Using Images

Using Images
Check your book for more details.
The basic HTML code looks like this:
<IMG SRC="imagename">.
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!! The final typical image tag would then look something like this. <IMG SRC="imagename" ALIGN=direction WIDTH=xxx HEIGHT=xxx>, 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>
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" ALIGN=left>
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 tag with a "clear=all" attribute to stop the textwrap.

I can describe another picture here. If I didn't use the 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" ALIGN=right>
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 tag with a "clear=all" attribute to stop the textwrap.
 

<IMG SRC="family.jpg" width=251 height=270 ALIGN=right>
I can describe another picture here. If I didn't use the 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> looks like this.

The strange picture looks like this.

The strange picture <IMG SRC="ball.jpg" width=150 height=113 ALIGN=middle> looks like this.

The strange picture looks like this.

The strange picture <IMG SRC="ball.jpg" width=150 height=113 ALIGN=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> 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" width=150 height=113 ALIGN=bottom>

Index

Frames