Article
Beginners' HTML - Part 2
Adding Images to Your Site
Now that you've created a page that can direct visitors to your favourite Websites, how about a page with a couple of pictures? They could be of you, your house, your car - anything you want. For the examples on this page, I'm going to assume the pictures are of my house, but of course your photos can be of anything. To avoid having cluttered pages, I'm going to start another blank page for this. So let's open up a blank page in your text editor and call it pics.html. Fill in the blank page outline we saw earlier. Now we're ready.
Just like all other things in HTML, images use tags. The tag for an image is <img>. There are quite a lot of attributes for this tag, but for now we'll just look at two:
src="images/house.jpg"
The src attribute specifies where the image is located. This could be a URL, or a path on the local Website like the one I've included in the example above. For example, "images/house.jpg" indicates that we want to display an image stored in house.jpg, a file that can be found in the images subdirectory of the directory that contains the HTML file for this page.
alt="My House"
The alt attribute gives the image a description that can be used in a number of circumstances. Using the alt attribute is optional, but there are many good reasons for doing so, as we'll see later on.
So now, let's put a couple of pictures into an HTML page:
<html>
<head>
<title>
Pictures of My House
</title>
</head>
<body>
<p>
<font size="+2">
<b>
Pictures of My House
</b>
</font>
</p>
<p>
<img src="images/house1.jpg" alt="My Front Door">
<br>
<i>My Front Door</i>
</p>
<p>
<img src="images/house2.jpg" alt="My Back Yard">
<br>
<i>My Back Yard</i>
</p>
</body>
</html>
As you can see, I've only included two pictures here, but there is no limit to how many you can include on your page.
Why Bother Using the alt Attribute?
You may be wondering why people use the alt attribute if it's not required, and as it doesn't appear to do anything when you view your page. In actual fact, there are a number of advantages to using the alt attribute.
Firstly, if your image should ever be deleted, corrupted or moved, then the description set with the alt attribute will be shown in its place. That will at least give the viewer some description of the image that should appear.
Secondly, it means your site is friendlier to disabled people, as the text-only browsers and text-to-speech systems that many of these visitors use do not pick up images, but will recognise alt attributes.
In addition, recent browsers like Microsoft Internet Explorer will display the description provided in the alt attribute when you move your mouse over the image. Perhaps the only disadvantage is that the inclusion of alt attrubutes will make the page's file size slightly larger; however, the difference in speed is negligible. I certainly see no real reason not to use alt tags.
More Attributes for the Image Tag
The image tag uses a large number of attributes that are optional, but useful. Here are just a few:
border="n"
This places a border around the image. The "n" specifies the border's width in pixels. This is especially useful when you make images into links, because, by default, an ugly colored border is displayed around these images.
height="n"
This tells the browser the height of the image in pixels. This attribute is used so that, when the page is being processed and loaded, the browser will reserve the right amount of space for the image. As a result, your page layout will look perfect at all times - even while the images are still loading.
width="n"
This attribute serves the same purpose as the height attribute, except that it obviously defines image width instead. Again, it should be specified in pixels.
There are many more attributes, but these will give you a good start.
A Challenge
Now that you know a fair bit of basic HTML, it's time for a challenge! We currently have 3 pages:
- The Main Page
- The Links Page
- The Pictures Page
However, at the moment, there's no way to navigate between them. To rectify this, we'll need to open up the main page, and create links that take users to the other two pages. On each of the those pages, there should be a link to return to the main page. In case you're stuck, here's a hint: you'll need to use the <a> tag that we learned about at the beginning of this part of the tutorial.
The solution will be provided in the next part of the series, when we'll also take a look at one of the most useful of the HTML layout functions - tables.