Basic HTML – Inserting Images
February 26, 2011
Another important and very useful feature of a website is the display of images. When coding a site, so, one does not actually include or insert images at all – the browser does that for us. We just need to tell the browser where to find and how to display the image.
So technically, all we do is create another hyperlink. That, however also means that we have to make sure that we upload the image as well. An image that only sits on our computer won’t show up online. At best, you’ll get the ‘red X’ – or, depending on your browser, nothing at all.
To insert that image, and here I’m assuming that the image is saved in the exact same folder as the document we’re working with (that is important as is affects the path), it takes the following code:
<img src="image.jpg" alt="description of image"> |
The attributes are pretty much self-explanatory. img is short for ‘image’, src is short for SouRCe – and remember that word. For some reason, writing ‘scr’ instead of ‘src’ is a common mistake – and then the image won’t show. But if you keep thinking ‘source’, you should be able to get the r and c in the correct order. And lastly, there’s the alt tag. That stands for ‘alternate text’ and is required. There we describe what’s on the image for those who cannot see the image – the visually impaired, screen readers, or for those that can’t display images for whatever reason.
There are other useful attributes: height and width, and title (that creates the text box that pops up when one hovers over the image).
In order to display the following image
in a regular html website, assuming the image was stored in the same folder as the html page, it would require this code:
<img src="image.jpg" alt="Seedpod on a Japanese Bush" title="Seedpod" width="391" height="293"> |
If you were to view the source of this tutorial page, you’d see that the code was a bit more complex that what I’ve just shown you – that’s because this website runs on a WordPress Platform, which affects where files are stored, among other things.
One last thing to mention – above is all based on an HTML website with and HTML doctype. If you were using an XHTML doctype, the image tag would need to be closed by adding a closing slash – so for XHTML – it would need to look like this:
<img src="image.jpg" alt="Seedpod on a Japanese Bush" title="Seedpod" width="391" height="293" /> |
And one last comment about images: make sure that the width and height are the actual dimensions of the image – technically, you could display any size image in exactly the size you specify, but that might distort the image. Also, the image is loaded at whatever size it truly is, not the size it’s displayed, so by loading a large image but displaying it smaller, you’re wasting bandwith and are increasing load times for no reason at all. Image optimization are a whole different lesson, but above are important points – be aware of them!
