HTML for Technophobes: Chapter Two

HTML for Technophobes.

©David Knopfler/Willa Cline July 1998

Chapter Two: Hyperlinks

Hyperlinks, or "links," for short, are what connect pages to each other on the web. Without links to click, you would have to type in the whole web page address of every page you wanted to visit. The techie term for an "address" by the way, is an URL (Uniform Resource Locator) ... that's an impressive sounding mouthful isn't it? Dazzle your friends with that.

Links for you to click can be either text links or graphic links. A text link is usually underlined or in a different colour (often, but by no means always, blue). You can't always tell whether or not it's a link without running your mouse across it. If the pointer turns into a hand, it's a link. To make a link, first you need to know the web page address (URL) that you want the link to point to. The HTML for a text link looks like this:

<A HREF="http://www.knopfler.com/phobic/">HTML for Technophobes</A>

It would look like this on the finished page: HTML for Technophobes. Click that link now and you'll notice it takes you back to the front page of this tutorial. The <A HREF = indicates that the text which follows it is a link. The text in the middle between the brackets (the non blue bit) is the what will appear on the web page and last, but most importantly, the </A> indicates the end of the link.

You could, by the way, just as usefully type it in small type as <a href =. The capitalization is only to make it easier to see.

If you're using a WYSIWYG web editor, as recommended in the first lesson, your life will be much easier because you will simply type in the text, i.e. HTML for Technophobes, type the address (http://www.knopfler.com/phobic/) in a little box somewhere (or cut and paste it from somewhere else) and the program will automatically insert the appropriate coding for you.

Graphic links are constructed the same way. A graphic link is a picture or photograph or icon that takes the place of text in a link. Like this:

You'll notice when you run your mouse over this graphic above, that a new web page address will pop up in the status bar (that's the "Link To:" place at the very bottom of the browser) and, as mentioned before, your pointer turns into a hand, which indicates a link.

The basic HTML for a graphic link is:

<A HREF="http://www.willa.com"><IMG SRC ="saucer.gif"></A>

The first and last parts of the HTML are exactly the same as they were for a text link, but in the case of a graphic link, the location of the graphic is substituted for the text. You still hanging in there? The <A HREF ="http://www.willa.com"> part, indicates where the link should take you. The </A> tells you where the link ends. The stuff in the middle, <IMG SRC ="saucer.gif"> tells the browser which graphic to display.

Now, try typing the following URL into the place near the top of of your browser where you normally type your web addresses

http://www.knopfler.com/phobic/lesson2/congrat.html ... or easier still click on the link here

Congratulations ;-) You just came back to this page using a graphic hyperlink... and better still, you understand this sentence. Not bad for five minutes reading is it?

The basic HTML for a graphic link inserts a box around the graphic which shows that the graphic is a link. However, most of the time you probably won't want the box to show. Unless your graphic is a square or rectangle, in which case the box blends in and may even add to the appearance of the graphic, the border is usually fairly unattractive and you'll probably want to get rid of it. The way to get rid of it is simple:

border=0

This command goes into the HTML like this:

and produces this effect:

Much nicer without that unsightly blue box, isn't it? :) You can now go and tell your loved ones that you've been embedding images. Hearing them say "very nice Dear" should give you the necessary encouragement to keep reading.

Grabbing images from the web or even from your e-mail, is simplicity itself - but since we don't assume anything here at Technophobes Inc., this is how you do it:

From within your browser single click the image you want (left button for PC users) and hold the mouse button down - you'll get a list of options show up on a drop down menu. The one you want to select is "save" - this should allow you to save the image to your own CPU (that's a neat bit of jargon for your computer by the way) - or if you're in a hurry - single click the image and drag it onto your own window from the browser - should produce the same effect. If you want to be extravagant and show off to friends select "save as" instead - you can then rename the image or even change it's format on the fly as you trawl it in... "Dad, what's a format?... is that something you wipe your feet on?".

Paths. You might want to place your GIF or JPEG images in a different folder to the HTML file that contains the hyperlink to them. Some people find it less confusing to arrange things this way - some the opposite. However if you do want to try this out, the link will need to reflect the different path. I'm not talking garden paths here. Taking the example Willa used above, to generate a nice flying saucer i.e.

If instead of putting the .html page and the gif image in the same folder, Willa had arbitrarily decided to put her saucer.gif inside a folder called say images (and as we say some people do like to do this) you would need to change the hyperlink to reflect this. So the code for the link would now look like this

Spotted the difference? Of course. We've added images. It's a bit of a light bulb going on once you understand that one, so forgive us if we sound like children's presenters telling you how build a nice Wendy house.

Just to be perverse, to torture your unsullied heads a little, we could have hidden the image at www.knopfler.com inside a folder called pics, instead of images and which might sit inside another folder called phobic - in order then for the hyperlink to find the image the path would need to take a longer journey under the ocean to England and off to DK's host server in Cheshire. The way it would do this is very clever but all you need to know is that you would have to change the link to this:

In other words you've added this bit www.knopfler.com/phobic/pics to your original hyperlink.

So ... You can call the folders whatever you like and you can put them where you like, pardon the expression, just as long as you note the change in the hyperlink.

For those of you already using a WYSIWYG (what you see is what you get) application to make web pages, the only golden rule to follow, if you are using a host server, is that however you have arranged the folder structure on your computer at home is how it will also need to be reflected when you upload it to your host. Otherwise you'll only see some funny looking little squares with question marks where your picture of Great Aunty Eileen's cat litter tray was meant to be.

Some people take a rather dim view of you using up their bandwidth (we can drop jargon like the best of them) by calling down images from their web site. If you want to use an image make sure you're not infringing copyright by getting permission from the creator of the image to use it and secondly, don't imitate the squirrels and forget where you've hidden your nuts. Download the image and place it at your own web site, somewhere you'll be able to find it again ... then we'll all be able to enjoy looking at them... or not, as the case may be.

COOL TIP

TARGET
Another aspect of using hyper-links is that you can target a special place for the new page you want to access, to open. It doesn't have to replace the existing page in your browser. Simply by adding target = "new" inside your bracket in the hyperlink bit of code, you can make the page you are calling up open in a new window try it The code to do that would look something like this

We'll come back to this attribute in more detail when we discuss Frames later on

Back to index