HTML 101

By Scot Hacker, Lisa Pickoff-White
Published May 16, 2007 in Web Development

Inserting Images

You can insert images into a page by using the img tag with the src attribute, like this:

<img src="picture.jpg">

Wherever you type this tag on your Web page is where the image you specified will appear in the browser.

The image itself is a separate graphic file in.jpg, .gif, or .png format (use JPGs for photographs, and GIFs or PNGs for line art or most screenshots).

The graphic file should be stored in the same folder as the Web page you are creating, or in a subfolder called "images."

Let's put an image tag on a Web page. Here's an image (named computerlab.jpg) that you can download onto your desktop to use on your page:

Computer lab

To download the image above, simply drag it from the browser window and into your "site" folder. To insert this image into your Web page, below the horizontal rule type:

<img src="computerlab.jpg">

Your code should now look like this:

<html>
<head>
<title>My First HTML Page</title>
</head>
<body style="background-color: #F5F5DC;">

<div align="center"><h1>Welcome to My First HTML Page </h1></div>

<p>
I'm learning <em>HTML</em> at the UC Berkeley <strong>Graduate School of Journalism.</strong><br />
Here is one of my <a href="http://www.google.com">favorite Web sites</a>.
</p>
<hr />
<img src="computerlab.jpg">
</body>
</html>

Your page now should look like this:

Basic imageImage spacing and alignment

Let's add some descriptive text. Type in "Here is the computer lab where I learned HTML" directly after the close of the img tag.

Notice that the text butts up against the edge of the image and wraps around the bottom. To make the text wrap correctly, we need to add an "align" attribute to the image. You can align things to the left or right by using align="left/right".

<img src="computerlab.jpg" align="left" /> Here is the computer lab where I learned HTML.

Left-aligning images

Now the text aligns to the top of the photo and takes up all of the available space on the right. You'll also probably want to create some space around the image, to give it some breathing room. Do this with the "hspace" and "vspace" attributes:

<img src="computerlab.jpg" hspace="7" align="left">

Horizontal spacing on imagesWe've added some extra text here to demonstrate the effects of both align="left" and hspace="7".

hspace sets the horizontal spacing around an image (a corresponding vspace attribute sets the vertical spacing, but you'll find it's rarely useful). Both attributes are measured in pixels. Again, the order of attributes on a tag is irrelevant.

Note: Rather than using align=left/right and hspace/vspace, it's preferable to address design and layout problems such as these with Cascading Style Sheets. The techniques shown here are for educational purposes.

Because images can't be "read" by search engines, nor can they be seen by blind users, you also need to give images an attribute for "alternative text." Notice when you mouse over an image in Safari or Internet Explorer that a small text balloon appears. This is an image's "alt text."

In your img tag, add it like this:

<img src="computerlab.jpg" … alt="Computer Lab">

Add your comment

Login to post a comment.