Inline Elements
Don't worry, we're nearly at the end of this section now. Not that that will stop me rattling on and on, mind you; in case you hadn't gathered by now, I love the sound of my own keyboard.
Where's the bloody pictures?
I know what you're thinking. You're currently tearing your hair out and screaming All I want to do is put a picture on my bloody web-page! Why won't you just show me how to do that, you bastard?
. Well, don't worry. I'm going to show you how to do that now.
The tag you need to know is <img>. IMG is short for 'image', and it works differently to a lot of HTML elements. It's what's called an 'empty' element. Instead of having an opening tag, some text, and a closing tag, you have just one tag. All you have to do is set values for its attributes.
The following code outputs a copy of the title graphic to the page.
<img src="img/title.png" alt="Slack 'n' Hash" width="300" height="32" />
Let's go through the element bit by bit, just so we know what's what.
img- The name of the element.
src="img/title.png"- Short for 'source'. This attribute tells the browser where the image is stored. In this case, it tells the browser to look in the
imgdirectory and pull outtitle.png. alt="Slack 'n' Hash"- Alternate text for the image. If the image isn't present or your browser is text-only (like Lynx, for example), you won't see the image specified. This text displays instead. It's good practice to always set the
altattribute for each image. width="300"- The width of the displayed image in pixels. Whenever you put an image on the page, it's a good idea to specify its display size. Note: If you want to put up a smaller version of an image, it's a good idea to make a smaller version of the image using your art package. A ten megabyte image that's output into a 10-pixel by 10-pixel space still weighs in at ten megabytes and takes ages to load. This should go without saying but so many people don't seem to grasp this.
height="32"- The height of the displayed image in pixels. See above.
/<img>is an empty tag, but still has to be closed properly in order to validate. To close an empty tag, put a forward slash (/) just before the right angle bracket (>).
But my image still won't display!
Accidents happen. Look at your code, and check every attribute. Chances are your error is one of the following:
- A misspelled attribute name.
- An incorrect address for your image. Have you referred to the right directory?
- You've misspelled your image's filename.
- You've given your image the wrong file extension, writing
.jpginstead of.gif, or some such.
Keep practicing and you'll get the hang of it.