HTML Tutorial 5: how to link to the world

Author: Ian McAllister

Hyper- links are what make HTML so much fun - Without them you couldn't follow all these interesting links round the world. But don't put links to other web sites without a good reason. You will lose your visitors.

Don't start your page with links to Netscape or Explorer for instance. Why should you lose your visitors, and give unpaid advertising to companies that don't need your help?!

There is a standard format for a link.

<a href="URL you want to go to"> text or graphic to click on </a> Yes, once again, you must remember the start and closing tags for the <a> command.

I use Arachnophilia - a free html editor - and have set it up so that when I click the bare link tag it prints
<a href="" target="_blank" rel="nofollow" title=""></a>

Naturally that has a lot of stuff that I only use sometimes, so I delete what I don't want. rel=nofollow means that the search engines mustn't follow that link. Target=_blank instructs the browser to open a new page. Title is what you see if you hover the mouse over the link.

The target URL is made up of

http://domain/directory/pagename#target
but you don't need all of that every time. The #target part is only used when you want to jump to a particular place in a page. For this you need to have given that place in the page a name. I'll show you later how to do this.

Example http://beginnersmakeownwebsite.com/directory/index.html#steps
This will get you nowhere, because I don't have a separate directory called directory.

Example http://case-studies.sitesell.com/buildwebprofit.html#NORI
If you clicked on that, you will have gone to the middle of the file to a target called "NORI".

Example http://beginnersmakeownwebsite.com/index.php
If you clicked on that, you would be taken to the start of the page, because I didn't mention any target.

What else can you remove? Well, if the link goes to another place in the same directory you can miss out most of the link.
http://beginnersmakeownwebsite.com/directory/index.php
Example index.php
If you clicked on that you would get to the start of the home page, because it is in the same directory. Home pages are always called "index" followed by a dot and the type of file such as html or php.

If you have too many files to be easy to handle in the root directory, make other directories all connected to the root directory. If you are in directory B and want to get file z.html from the root directory, you would refer to it as /z.html where the forward slash (/) means the root directory so you can see my main home page by clicking on /.

That was good advice years ago, but now Google likes you to divide your files up into a logical structure, just as you should do on your computer. Have different directories for different sub-themes.

If you are in directory B and want a file z.gif from the C directory, you would refer to it as /C/z.gif

In other words, you have to go down to the root directory and back up again to the directory you want.

Targets or Anchors

These are used when you want a link to jump to that particular part of a page. You might have taken your visitor on a detour, and want them to return to the same place for example.
Example <A name="steps"></A> is what I could use to create a "target" or "anchor" called "steps" on my index page.

The URL to jump to that point would be
/index.php#steps See also the example above for NORI.

Targets for new windows

If you decide to link a visitor to the free Acrobat reader for example, you don't want to lose the visitor. The answer is to add the "_blank" target, which will open another window. Note the underline in "_blank". Note too the position of the quote marks.

The clickable part

This is often the words "Click here" Web design enthusiasts object that it's not very clever. But it has the advantage that it tells your visitor exactly what to do, and you hope there will be very many newbies among your visitors. ;-)= You want people to click here, so why not just say so?

There's a very good reason. If you want the search engines to find a website that you are pointing to you don't want them to catalogue it under click here. You want a good keyword, so that if your page is about widgets, you will have the word widgets in the blue-underlined link.

The other alternative is to use a graphic link, such as a push-button, as I used to have for "Next" on this page. You just replace the clickable part with a graphic of a push-button. I describe this in a later lesson.

If you do use a graphic link, always include alternative text. Try moving your mouse over any one of my push-buttons. (I no longer have graphics buttons on this page, but hover over the cartoon at top left to see the alternative text) If you have a recent browser, you will see the contents of the alternative text appear in a little balloon.

Many people still browse with their graphics display turned off. These people still see the alternative text, which allows them to decide whether or not it is worth turning on the graphics for this one page.

The "title" section in a link (see my bare link example above) has a similar effect when the mouse hovers over the link.

Mailto links

If you want someone to e-mail you from your page, use a mailto link. I strongly advise you against it, because there is software out there that searches web sites for mailto addresses, and you will soon get a flood of unwanted emails. Instead make a contact page with a form that visitors can use... see later chapter about forms.
<A HREF=mailto:johnsmith@hotmail.com>E-mail me</A> will reach you only if you happen to be johnsmith at hotmail.com, so you would be better to change the email address before using the mailto tags.

You can also disguise your email by using the decimal equivalent of each number. There is a free tool at
http://www.voormedia.com/en/tools/html-obfuscate-scrambler.php to give you the right code for this.

You can also use mailto from a form, but not if it is being browsed by Explorer, so don't do it.

If you think I am giving you more "dont's"' than "do's" that is because there are so many, many, ways to upset your visitors. Most of these are technical, so are easily avoided when you know the problem.

Files links

These are normally used for sound or video. These drive customers away from your page, because they take so long to load. Don't use them if you care about keeping visitors on your web site.

You can create tiny versions of a picture with instructions to click the picture for the full-size version. This warns the visitor to be prepared to wait for the download time. To make a picture clickable you put the picture in the space where you would normally put "click here". In other words you would have the img tag there.

There are exceptions to most rules. You can create web pages that show a video together with clickable links. Just don't use them as searchable pages... if you advise your visitor to click on a link for an hour of video instruction, she will be prepared for a long wait during loading.

Next lesson will give you two HTML templates