Beginner's Guide to XHTML
Wednesday 22nd June 2005 - Saturday 7th January 2006
Categories: Guides, Internet, Code
Images and Hyperlinks
So, what do we have so far?
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Your Title</title>
</head>
<body>
<h1>My first web page</h1>
<p>This is my first web page. It's not very good, but it works!</p>
</body>
</html>
We have a working webpage with some text. Not very interesting, is it? In this part, images and hyperlinks will be used to make the page more interesting and interactive.
Adding an image is relatively simple. All we do is use this code: <img src="pathofimage" alt="alternative text" />. Replace pathofimage with, surprisingly enough, the path of your image. If the image is the same folder/directory as the XHTML file, you can just type the name of the file (don't forget the extension e.g. .gif, .jpg, .png). If the file is in a subdirectory, you type the name of the directory, a forward slash, and then the name of the file. You also need to provide alternative text - this is text that is displayed if the picture is not displayed.
For example, if I have an image called eggs.png in the directory pictures, which is in the directory storage, which is in the same directory as the XHTML file, I would write something similar to this:
<img src="storage/pictures/eggs.png" alt="A picture of eggs" />
There is something to note when using alternative text: in Internet Explorer, when you hover the image, the alternative text is displayed. However, this is not the way alternative text should be used - it should be only be used when the image isn't. As such, Firefox won't display the alternative text when you hover over the image. Instead, it will display the title text. Therefore, if you want the alternative text to be displayed when the image is hovered over, you should define both the alternative text and title. In this case, the title attribute belongs inside the <a> tag. For example:
<img src="storage/pictures/eggs.png" alt="A picture of eggs" title="A picture of eggs" />
You can also add the width and height to the image (in pixels), which can change the shape and size of the image. However, it is best to define the width and height as they really are. If you make the image smaller, you have a file larger than it needs to be, so you should shrink it yourself. If you make the image larger, you lose image quality. The advantage of defining the image width and height is that it helps keep the layout of the page correct, even when the images do not load. So, if my picture of eggs was 100 pixels tall and 50 pixels wide, I would use this code:
<img src="storage/pictures/eggs.png" alt="A picture of eggs" height="100" width="50" />
Adding a hyperlink is similarly easy. At the beginning of the section of text, or just before the image, you want to turn into a hyperlink, type <a href="pathoflink">, and type </a> at the end of that section of text, or the end of the image tag. The path can be internal, in the way described previously for images, or it can be another website. For example:
<a href="http://www.example.com">example.com</a>
Just as you can in images, you can set the text that appears when you hover over the link using the title attribute. For example:
<a href="http://www.example.com" title="example.com">example.com</a>
If you want to jump to a specific part of a page, you have to set up that page correctly. The code used is <a name="whatevernameyouwant" id="whatevernameyouwant"></a>, while the link is: <a href="pagepath.html#whatevernameyouwant"></a> For example, if, on a web page called 'food.html', I want to be able to jump to the heading 'Eggs', I would use the code:
<a name="eggs" id="eggs"></a><h2>Eggs</h2>
On the page that I want to jump to, while I would use this code to create the link:
<a href="food.html#eggs"></a><h2>Eggs</h2>
The name attribute is not really required - you could probably get away with just using the id attribute. Indeed, any tag can be used with the id attribute and function in the same way, but using <a name="... keeps compatibility with older browsers. Remember, the name and ID must be the same, and IDs should start with a letter (although they can contain letters, numbers, underscores, hyphens, colons and full stops.)
One thing to note is the attribute target="yourtarget". The main use would be when using frames, which, in this guide, we're trying to avoid. The other main use is target="_blank" - this makes the link appear in a new window. However, I don't encourage use of this - not only does it not conform to the XHTML1.0 Strict specification, it also forces a new window to be opened. By now, a user should be able to choose whether or not (s)he wants to open links in a new window.
One last tag is useful for seperating out text - the horizontal rule. The code is simply <hr />, which creates this: