Basic Images
Now, you’ve got some stuff written, and a couple of linked pages. Your site is looking far more convincing now. But there’s still something missing, isn’t there? You probably can’t help but want to fill your pages with images. The beauty of it is that it’s really easy. In fact, if you’ve been paying attention so far, you should have no problem at all. Let’s get busy.
This page was last updated on 2012-08-21
Inserting an Image
This is the basic stuff — just getting the image on your page. The code for inline images is img. You use the same type of attribute as the href attribute from the last article, so having used that before will help you get your head around this quicker.
To keep it simple, place the image you want to use in the same directory as the HTML file it is going to be in. Say your image is called ’go.gif’, the code to insert that image into your document is:
The image will appear on your page like this.
srcstands for “SouRCe”, so what you’re saying is the image source is go.gif. Make sure you’ve gotten the image file type right. If you’re linking to a photograph, it is more than likely a .jpg. Thesrcbit is mandatory in animgtag, which means you have to put it in. Obvious really, otherwise there’d be nothing there.altstands for “Alternate text”. You should use this attribute to describe the image for people who browse with images turned off, or for visitors who aren’t able to see your images. Thealtattribute is also required, so you must write one for every image you use.
You can put in the url of any image on the web into the src, but really you should only use relative addresses to put images onto your pages. Adding external images means a reader has to connect to multiple servers when they load your page, and that adds lots of extra time to your page’s download. Not a good thing. You can save images from other web pages into your own directory and use them from there if you want, as long as the images are free (you should always check with the site owner).
Once you have entered the src for your image and saved your HTML file, you can open it in your browser and test if it worked. If your image doesn’t appear, and you get an empty frame or a rectangle with a little red ‘x’, there is a problem with the src value you have provided. Check that you have set the address correctly and that the image is where you say it is.
Linking Images
If you want to link to another file, by clicking on an image to get to it, all you do is use the same tag from the earlier lesson, and wrap the a around the image code, so that the image is in place of the text you’d normally have. So, to make go.gif a link to fullindex.html, you’d write:
<a href="fullindex.html"><img src="go.gif" alt="Go to the full index."></a>
This would create:
...which, as you can see, doesn’t look quite the same as the image above. This is because the browser puts a border around the image to show that it is a link, coloured the same as your link colours, which we’ll be getting into in the next tutorial. Of course, it’s not always welcome, so to get rid of the border, add this attribute to your img tag:
<img src="go.gif" alt="Go to the full index." border="0">
The default border thickness is 2, so you can set it to 1 if you want a thinner border, or to anything higher for a big bad-ass border. You can even add borders to images that aren’t links, which will be the colour of your text.
Basic Attributes
Since you already know how to align stuff like paragraphs, I may as well add aligning images to this page. img aligning is done in much the same way, except now you have 3 new values you can use (only for images, mind): top, middle and bottom. They are used in a similar fashion, as attributes to the tag like so:
<img src="monkey.gif" alt="A monkey" align="left">
Here are some examples
Aligned left. Notice how the text hugs the image, instead of starting under it.
Aligned right. The image hops over to the side, and if the text reaches it, it just drops down beside it and continues.
Aligned top. That means the text will align to the top of the image and then go under. Note that with these last three, you only get one line before it drops under the image.
Aligned middle. Are you getting this yet?
Aligned bottom, keeping everything all straight.
For a few other very useful image attributes, read Further Attributes. Then you can go on to explore the rest of our image lessons.
