HTML and XHTML - Lesson 6

Back to Lesson 1, Lesson 2, Lesson 3, Lesson 4, Lesson 5

Images

To type out the source of an image is very tricky for new XHTML coders. I will explain it as best as I can. You can use gif, jpg or png images. To know which type of image you are using may be tricky if your computer is set to hide known extentions such as .gif, .jpg or .png.

If your image does not show the extention beside it, you may want to change your computer settings to do so. To fix this in Windows XP, open a folder window on your computer such as My Documents. Go to Tools > Folder Options..., and click the View tab. From there uncheck Hide extentions for known file types.
You will now be able to see the image extention.

It is best to rename the image using lowercase letters and no spaces, including a lowercase extention.

If you have an image named cute.gif, the XHTML code you would use would be:

Code:

<img src="cute.gif" />

Displays as:

This is where it gets tricky. This code would only work like this if cute.gif is in the same folder as your example XHTML file, index.html

If you want to use a folder for your images, the folder should be placed in the same directory as your HTML file.

You can then, put your image cute.gif into the images folder and use this code to display the image:

Code:

<img src="images/cute.gif" />

Displays as:

Image Variables

Please note to create your own images folder if you do this. Do not use the My Images folder.

Now, we are not finished learning about images yet. There are other variables we must place in the image tag <img />. There is also the width, height, alt and align variables.

For the width and height, you can use exact size in pixels or a relative size by using percentages.

To use pixel size, your image tag would look like this:

Code:

<img src="cute.gif" width="50" height="100" />

Displays as:

It is best to use the exact size of the image for your size variables.

To use percentage size, your image tag would look like this:

Code:

<img src="cute.gif" width="25%" height="10%" />

Displays as:

Now, alt variables for images are used to specify alternative text. This will display in many browsers when the mouse pointer hovers over the image. This will also display in Web browsers that do not display images, or if the user has images turned off in their browser. As well, Web browsers that read text to the user for visually impared people will read the alt variables. The alt tag is a requirement for XHTML documents.
For example:

Code:

<img src="cute.gif" width="50" height="100" alt="[This is such a cute picture]" />

Displays as:

Like all variables, it uses the equal sign = and the set of quotations " ". I placed the alt information in square brackets so that it does not get confused with regular text, but the square brackets are only an option.

Within the body of an XHTML document, the order of tags are the same order the are displayed on a Web page from top to bottom.

If you want an image displayed at the top of the page and then your paragraph underneath your code would look like this:

Code:

<img src="cute.gif" width="50" height="100" alt="[This is such a cute picture]" /> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. 

Displays as:

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

However, if you want the image to be aligned to the left or right of a paragraph, use the align variable in the image tag:

Code:

 <img src="cute.gif" width="50" height="100" alt="[This is such a cute picture]" align="right" /> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. 

Displays as:

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

Image Links

Now that we know both anchor and image tags it is almost obvious how to make images info links. Just place the image in between the set of anchor tags, and don't forget to specify no border as well using border="0":

Code:

<a href="http://www.google.com/"> <img src="cute.gif" width="50" height="100" alt="[This is such a cute picture]" border="0" /> </a>

Displays as:

By this point, you now know how to create all kinds of text, images and links. However, you may think your example web page is very plain, and are wondering what is missing. All you need to learn now to fix that up is positioning and style. Positioning will place your text and images exactly where you want them. Style will add colour and shape to your page.