html 101

Inserting Images

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

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:

Your code should now look like this:

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".

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:

Horizontal spacing on images

We'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: