Using Images

Check your book for more details.

The basic HTML code looks like this:
<img src="imagename.jpg or .gif" />.

The image name should have a trailing .gif or .jpg(JPEG) depending on which type it is. As with all html file names, no spaces are allowed.

You will want to add other attributes to the image tag. align is the most common attribute. For the align attribute directions are left and right or top, middle and bottom. You should also specify the height and width of the image. If you don't specify the height and width, it takes the browser longer to load your image. We don't want that!! Finally, image tags should have an alt tag describing in text what the image is about for users who are blind or have images turned off. The final typical image tag would then look something like this. <img src="imagename.jpg" align="direction" width=xxx height=xxx alt="My dog Fred, licking a popsicle" />, where xxx is the number of pixels.

Some examples follow. The browser view is shown with the HTML text directly below.

I can place the image on the right side of the page like this. The text will stay to the left of the image. I placed the image before the text in the HTML document.
<img src="ball.jpg" width=150 height=113 align="right" alt="a strange looking ball" />
I can place the image on the right side of the page like this. The text will stay to the left of the image. I placed the image before the text in the HTML document.

I can place the image on the left side of the page like this. The text will stay to the right of the image. I placed the image before the text in the HTML document.
<img src="ball.jpg" width=150 height=113 align="left" alt="a strange looking ball" />
I can place the image on the left side of the page like this. The text will stay to the right of the image. I placed the image before the text in the HTML document. Also, notice on this tag I did not specify width and height. You should for speed of loading, but it will work without those attributes.

I can describe one picture here. Because I used "align=right" anything after this will align to the left of the picture. If I want to stop the text wrap I use a <br> tag with a "clear=all" attribute to stop the textwrap.

I can describe another picture here. If I didn't use the <br> tag with a "clear=all" attribute the picture of my family would wrap to the left of the picture of the strange ball.
<img src="ball.jpg" width=150 height=113 align="right" alt="a strange looking ball" />
I can describe one picture here. Because I used "align=right" anything after this will align to the left of the picture. If I want to stop the text wrap I use a <br /> tag with a "clear=all" attribute to stop the textwrap.
<br clear=all />
<P></P> or another <br /> tag if you want to add a space
<img src="family.jpg" width=251 height=270 align="right" alt="My wife and kids as babies" />
I can describe another picture here. If I didn't use the <br /> tag with a "clear=all" attribute the picture of my family would wrap to the left of the picture of the strange ball.

The strange picture looks like this.
The strange picture <img src="ball.jpg" width=150 height=113 align="top" alt="text aligns acroos the top" /> looks like this.

The strange picture looks like this.
The strange picture <img src="ball.jpg" width=150 height=113 align="middle" alt="text trrough the middle" /> looks like this.

The strange picture looks like this.
The strange picture <img src="ball.jpg" width=150 height=113 align="bottom" alt="text aligned at bottom" /> looks like this.

Sometimes you may wish to use a BORDER attribute. Unfortunately, without Cascading Style Sheets(coming later this tri), the color of the border can only be black.
<img src="ball.jpg" width=150 height=113 border=5 align="right" alt="image with a border" /> Sometimes you may wish to use a BORDER attribute. Unfortunately, without Cascading Style Sheets(coming later this tri), the color of the border can only be black.

Never, ever ever adjust the size of your picture by changing the height and width attributes artificially. Always bring the image into Photoshop and adjust its height and width there.

One last thing: As a beginning web designer, I recommend that you put all of your images in the same folder that your html documents(Wordpad) are in. However, as your website becomes bigger it may be an advantage to organize images into their own folder(s). Your tag would then have to change to show the pathway to the image folder. If all of your images were in a folder called, "images" for example, the code would look like this. <img src="images/ball.jpg" etc .... />

Index Basic Tags Links Design Layout Tables Image File Types Using Images Image Editing Lists Frames