Images Tutorial

Made by: Nick

The <img> tag

The code to place an image is simple:

<img src="URL TO IMAGE" alt="alternative text" />

This shows the img tag with a source attribute (the path of where to find the image) and an alt attribute (alternative text) following it.

The alt Attribute

This attribute is paced inside the image tag. It will display when the image cannot be loaded (or if the user is using a text-only browser) and it is also used for screen readers, such as those used by people who have problems seeing what is on screen. So it is very important to include in your code.

Width and Height Attributes

Adding these attributes to the image code allows the webpage to keep that much space for the image before it loads (or even if it doesn't load).

For example:

<img width="110" height="33" alt="Free Divs, the place to really customise your profile" src="http://www.freedivs.com/gfx/promote/redani.gif" />

Would create this:

Free Divs, the place to really customise your profile

You may not be able to notice it on this image, but if the image size is large then it will take a while to load, and we want to keep space for it so these attributes are a must for good coders.

Feed the Dragon MySpace Tutorials