HTML 4 Kids: Lesson Week 7

The Image Tag

<img src="image.gif" width="60" height="20" alt="description" align="top">

Image Attributes:

src=
This tells the name of the file.
Unless you include a path, the default directory is assumed. Place this file in the same folder as the html code document that calls it.
The graphic can be a GIF file or a JPG file.
Take care to use the smallest file possible, so your page will load as quickly as possible. If the page hasn't loaded in 30 seconds, the user will move on.
width= and height=
The width and height are measured in pixels. Use a graphic program to find these values.
By providing these values, the browser can reserve the location for them on the screen. When the locations are reserved, the page will not shift as images arrive.
alt=
Some people turn off graphics when they use the Internet. If graphics are turned off, this is text that will appear in the space reserved for the image.
If the image does load, the contents of the alt attribute are used for a pop-up tooltip type box.
align=
Use the align attribute to align the text next to the image. Put the tag<br clear="all"> at the end of the text you want with the image.
Your alignment choices are:
  • "top"
  • "middle"
  • "bottom"

Using a Thumbnail

Sometimes, a smaller version, or thumbnail, is used as a link to a larger version of the graphic. That way, the detailed picture can be accessed, but the transmission time will only be required if the user wants to see the detail.
<a href="large.gif" >< img src="small.gif" width="30" height="30" alt="description"></a>

Using an Image for a Link

Insert the image tag between the a href and /a tags to use an image for the "hot spot."
<a href="url" >< img src="image.gif" width="30" height="30" alt="description"></a>
Return