The img tag
<img> tag to show images on a Web page. Like this:
<h1>Happiness</h1> <p>What makes a dog happy?</p> <p><img src="food_love_happiness.png" alt="Food, love, and happiness"></p>
src gives the URL of the image file. Like URLs for links, the URL can be absolute, root relative, or relative.
You should add the
alt attribute to every image. It gives a text alternative to the tag when the image can't be shown.
There are two reasons you should use the alt tag. First, the
alt attribute is used by screen readers, that read out the text of a Web page to visually impaired people.
alt tag helps search engines know what the image is about. People are more likely to find your page if you add
alt attributes to your images.
Links on images
You can add links to images as well, like this:
<a href="/index.html"><img src="/library/home.png" alt="Home"></a>
The browser will jump when the user clicks on the image.
Sometimes we want to use the same image on many pages. A logo, for example, might be on every page. How?
Earlier, we talked about root relative links. That's a link from the root of a site, to a file somewhere in the site. We can use root relative links to help us reuse images.
Suppose a site's files were organized like this:
We want to reuse the images
rosie.png. We put the files into a directory we create especially for shared files. I called this one
library, but you could use a different name.
Every time we want to show a picture of Rosie, we put this in the HTML:
<img src="/library/rosie.png" alt="Rosie">
rosie.png, rather than a bunch of copies all over the place.
There's another reason to reuse files, though. It makes the site easier to manage. Suppose we want to change Rosie's photo, to another one that's even cuter. We replace
/library/rosie.png with a new file, and every page on the site uses the new photo.
There are many good, free image tools out there. Here are some I use.
Use any breeds you want. I got the photos from Wikipedia, and shrank them a little.
Link the images to pages with information about each breed. I linked to pages on Wikipedia, like the Jack Russell page.
Make a directory in your
littlehtml subdomain for this exercise. Upload your files to the directory. Submit the URL.
(If you were logged in as a student, you could submit an exercise solution, and get some feedback.)