HTML Tutorial #3
Having now done all the basics, time to get on with the interesting stuff. HTML and hence The Internet is based on one big idea - links. It is links that make it all work the way it does and makes the experience of 'surfing' a reality. Web pages would also be just plain text if it wasn't for links which allows the display of graphical content such as images to be easily downloaded and incorporated into the overall design, a miracle we now take very much for granted. So how do we code links. Like this:-
<BODY>
<A href="http://www.nickjc.co.uk/htmltutor3.htm">Tutorial
#3</A>
</BODY>
This will look like this on the page:-
This simple bit of code will simply download another copy of this page but it could be any page. The A is an Anchor tag with the Html Reference pointing to a file (in this case another HTML document). Note the use of the full path to the file in the statement which is sometimes not required but it is best to put it in anyway. The text Tutorial #3 is what will show on the page with an underline and coloured according to the the way the browser has been setup (although it is possible to assign colours to links within HTML code). This then is the basis of Hypertext, the ability to hop from page to page using links such as this. Very simple but very powerful. Here is another kind of link.
<BODY>
<img src="jestbut.jpg" alt="Jester">
</BODY>
This wiil look something like this:
Note that the ALT tage will specify an ALTernative text representation which will be displayed as a tool tip or as just text if the browser's ability to download images has been switched off. Of course, images can also act like links:-
Note how passing the mouse over the image turns the cursor to a hand denoting that this is a link. The ALTernative text still works as well making this a very used (and overused) feature of HTML. Here's what the code looks like:-
<HTML>
<BODY>
<a href="htmltutor3.htm">
<img src="jestbut.jpg" border="0"
alt="Jester as a link"></a>
</BODY>
</HTML>
You may have noticed that some sites display a different image when the mouse is passed over it and is called an image rollover (obviously). This is achieved by using some scripting which is browser specific and will be covered in one of my scripting tutorials. Meanwhile, here's another useful link which looks something like this:-
Please Email me at: nickjc@nickjc.co.uk
This is used to display an email address which if clicked on will start the email client defined in the browser's setup (or start a wizard if it hasn't been defined). It looks like this in code:-
<HTML>
<BODY>
<address>
<CENTER>
Written by Nick Cheesman. Last updated: 01/05/2001<br>
<a href="mailto:nickjc@nickjc.co.uk">
Please Email me at: nickjc@nickjc.co.uk</a>
</CENTER>
</address>
</BODY>
</HTML>
I find it looks better centred hence the <CENTER> tags nested between the <ADDRESS> tags. The first line after the <CENTER> can be a line of text possibly showing when the page was last updated. The <a tag begins the link in the normal way and specifies a mailto: address which must be enclosed in quotes and is the command to start the mail client. The line after the closing > can again be some descriptive text and the link is closed with </a> as is the document in the usual way.
And that concludes this
discussion on links. Suffice to say that this is not the
last word on the subject but will serve to help you begin
to build something more useful including a menu linking
all the pages together making them into something we can
recognize as a web site which we are all used to.
Please eMail me at: nickjc@nickjc.co.uk