XHTML Tutorial - Chapter 7: Images

If you've read through the previous chapters of this tutorial, you should be able to create all sorts of textual content by now, and you can even tie your pages together to link to eachother with anchor tags. Plain text articles can, however, be a little boring in the long run, and so it is about time we now introduce some images, or more specifically, the <img> tag.

Now, to work with the img tag, you're going to need some picture files. If you don't have any laying around, feel free to download the image I have provided on the right, of a tulip I photographed in my back yard. Right click the picture, choose "Save as" and then give it the name "flower.jpg" as you save it.



To show the picture on your web page, you simply include it in an attribute called src="" within an <img> tag. "Src" is short for "source" and is used to reference source files in several other HTML elements as well.

Let's look at an example of some code that displays the image:

<html>
  <head>
    <title>Image code</title>
  </head>
  <body>
    <h1>Flower</h1>
    <img src="flower.jpg" alt="A pretty flower" />
  </body>
</html>

Note that the flower.jpg image file needs to be in the same folder as the .html file if the above example is going to work.



According to what has by now started to become the norm for these little examples of mine, there is yet again an unexpected element of surprise! Two, in fact. Let's look at the <img> tag again without all the other stuff.

<img src="flower.jpg" alt="A pretty flower" />

The first thing you will notice is that there is no end tag. Why? There is simply no need for one. An image is a singular object that doesn't apply itself to any other content on the page, so it has no need to "wrap around" anything else. But since this is XHTML syntax, it still (as opposed to in traditional HTML) needs to be "closed". Therefore, the closing slash is introduced at the end of the tag itself, instead of adding an </img>.

The second thing you may have noticed is that there is, next to src="", also an added alt="" attribute, set to "A pretty flower". The alt="" is actually necessary for an XHTML <img> image tag to be valid (again, unlike standard HTML).

It also doesn't matter if it's completely empty, containing no text whatsoever between the quotes. The alt="" still needs to be included in every <img> tag.



What the alt="" actually does technically speaking, is provide an "alternative" way of knowing what's being displayed. If the image for some reason cannot be displayed, hovering the mouse over it will still tell us the contents of the alt="" attribute so that we can understand what it was supposed to be if it would have been visible.

Also, people who are vision impaired will often use voice browsers who will in some cases read the alt="" text out loud for them, so that they also may know what the image depicts without being able to physically see it.

Even in the case of visually available images, it might still be hard to see what they are supposed to represent in the case of small or badly drawn icons, etc. It can then be a welcome aid to the visitor to allow for an explanatory text when he or she hovers the mouse over the image.



A couple of other very common attributes on image tags are width="" and height="", setting the respective width and height that the image should be displayed in. These aren't necessary, but they are recommended since they tell the browser how much room should be reserved for each image just as the page is loaded. If the attributes width="" and height="" are left out, the browser will find these out only as the image has finished loaded, which can sometimes result in a series of ugly little "jumps" in the page layout before everything has settled in place.

Another function of width="" and height="" is that you can set whatever values you want there - it doesn't necessarily have to be the actual width and height of the image. The tulip photo for example has a size of 115 x 100 pixels, but if we were to enter these values in the image tag instead:

<img src="flower.jpg" width="600" height="25" alt="A pretty flower" />

We'll get this funny result:





You can of course also make images clickable as links in the same way as you would with text, by placing a couple of <a href=""> and </a> tags around the <img> tag and specifying the URL in the href="". Nothing more to it :o)





< Previous: Links

robert@eagleowl.se     +46 (0)26-16 13 61     www.eagleowl.se
©2021 EagleOwl