If you've successfully followed the last column, you've created and edited a bare-bones web page, and learned some basic concepts and HTML ( HyperText Markup Language ) tags.
This follows on from that, introducing images and links to that basic page.
Images can help make a website easier on the eye, serve as illustration, give visual cues to visitors, aid in layout or ease of reading, and reinforce a website's message.
In HTML images are rendered using the <img> tag. This tag is one of a few ( <br> to force a line break is another ), which is 'empty', that is, it doesn't have a closing tag.
It does however, have a number of attributes, such as obligatory src for source, as well as width, height, align to dictate text flow around it, hspace for horizontal space, border, and alt for alternative text.
Here's an example;
<img src="Manaia.jpg" width="335" height="219"
border="0" alt="an altered photograph of Mt Manaia"
hspace="5" align="left">The width an height attributes are the image dimensions in pixels, which any image editing programme should show you. These aren't strictly necessary, but using them allows a web browser to load the page more quickly.
The hspace attribute specifies 5 pixels of horizontal 'breathing room', and the left alignment specifies that the image should be docked to the left of the browser window, with text or other content wrapped around its right side.
The alt attribute gives an alternative for text-only browsers or the visually impaired.
To see how this all works, following is both the code for a page using the above image tag, and an example of how it might look in a small browser window.
Take care to save the image in the same directory you created for your .html file, and that the .html file is saved with that file extension, as type "All Files" in Notepad, or as "text only" in Word.
<html>
<head>
<title>My first page</title>
</head>
<body>
<h1>Mount Manaia, Whangarei Heads</h1>
<p><img src="Manaia.jpg" width="335" height="219"
border="0" alt="an altered photograph of Mt Manaia"
hspace="5" align="left">Mount Manaia is the most
striking feature of the view presented when visitors
to the Whangarei district reach the top of the
Brynderwyn hills travelling North.</p>
<p>It sits on the Eastern side of the entrance
to Whangarei harbour . </p>
</body>
</html>Add some more text to your liking, open the file in a browser, and change the size of the browser window ( middle button at top right in Windows ). Note how the text flows around the image, and that resizing the window forces the text to re-flow.
Now we've got images on the page, lets add some links, which is done using the <a>, for anchor tag.
The anchor tag must be closed, otherwise the rest of the page will function as link. It's most important attribute is href, which tells the browser what is being linked to, for example
<a href=http://www.nzherald.co.nz/>NZ Herald</a>If you wanted to link to another .html page in the same directory as this one, you would use what's called a relative link;
<a href="anotherpage.html">another page</a>Test this by adding to the example page given above. You can either create and link to another .html page in the same directory on your hard drive, or link to a "remote" web page such as the NZ Herald link shown above.
If that works, add the often-used target attribute,
<a href="anotherpage.html" target="newone">another page</a>You can also use images as links. To do that, surround the <img> tag in the full example page above with <a> tags;
<a href="anotherpage.html"><img src="Manaia.jpg"
width="335" height="219" border="0"
alt="an altered photograph of Mt Manaia"
hspace="5" align="left"></a>Now try changing the value of the border attribute, to, for example, border="1" in the example above, and note what happens.
In the next column, I'll show some ways of adding some more colour to your page, and touch on two methods of laying out a web page.
Meanwhile, if you've successfully followed the above examples, and want to move on more quickly, visit w3C Schools for more tutorials, or try out for yourself some of the HTML tags explained at the WDG HTML Reference.
site by Urban Legend Designs