HTML for the complete beginner

Clickable links

To make a link to a page on your site, it's just:
<a href="pagename.html">page name or whatever</a>

To someone elses site, it's just:
<a href="yoururl.com">URL name or whatever</a>

Lets look at a few other methods to do this.
You can read through the lot or click on the part you want to see to go there.

Text link
Picture links
Email links
Same page links
File downloads (not forced)
Auto links (or page refresh)
Targets (Where the link opens)

Text links

Are like the examples above or at the bottom of the page.
Say for example you wanted to link to my index page of this site, feel free to do so :), you would put:

<a href="http://www.munchtech.com/ezhtml/">Ez HTML</a>

The index.html is the first page and doesn't need to be added to the URL, but if you
wanted to go to a page on, say, my sitemap you would have to add the page name, like this:
<a href="www.munchtech.com/ezhtml/ezsitemap.html">EZHTML's Site map</a>

The .html or .htm is very important for links to pages. Also it is case-sensitive.
If you are linking within your own site, you can drop the full URL and just use the page name, like so:

<a href="next.html">Next page</a>

There are two good reasons not to use your full URL within your own site. One is bandwidth theft, the other is incase you ever change your server and you wont have to change every link you have, and this does happen even if you think you wont change, plus it allows you to work on your pages off line.

One thing we should try to avoid when making text links is the old "Click here" link. People know what links are unless you change the color of them or something as silly, try use words of the sentence for a link, like: To see more pictures of my rabbit and dog use these links. or I have more pictures of my rabbit and dog, instead of click here to see my rabbit pictures and click here to see my pictures of my dog.

Picture links

Can be great, but can also be a pain.

Why a pain? Well I have two examples, firstly say you have 10 pages of information you want people to see. You use some graphics for buttons, people won't know what pages they have been to, where as text links show you by changing colors. But having text links as well can solve this problem. The second reason is if your graphics don't show up and you don't use 'alt' tags no one will know to click on it or where the link goes.

Important
Content - you have to have something people are interested in. Keep your images in moderation and related to the pages topic.
Navigation - people must be able to get around your whole site within 3 click (3 links) and always find their way out. If you use images as links, always offer a text based option at the bottom of the page or somewhere.
Layout - make your layout easy to follow, with colours that wont blind them or confuse them, make all your pages similar in appearance.

To add a picture link you just add the graphic/picture tag within the link tags. like so:
<a href="next.html"><img src="next.gif" width="50" height="50" alt="neener neener neener this goes no where"></a>
Which will look like this, hold your mouse over the graphic (The link doesn't go anywhere)

You might notice the blue border around the picture/graphic, to get rid of this we add border="0" into the <img src> tag. Like so:

<img src="next.gif" width="50" height="50" border="0" alt="neener neener neener this goes no where">
I can't stress enough how important the 'alt' tag is. Do yourself and your visitors a favor and use them, always.

The order of the tag doesn't matter as long as '<img' is first, for editing it may be easier to add the 'src' next then 'width, height and alt'. Most graphic editing programs display width first, then height.

To avoid the line you may see next to your link, whether it be a text or graphic one, place your code on the same line, otherwise you will end up with the vertical line running at the bottom left of your link

Thumbnails; if for example you have a few large photos you would like people to see, offer then as thumbnails. (Smaller pictures of the original) resize the graphic DO NOT use the height and width tags to resize them, and add the bigger pictures link to the thumbnail.
To do this we add the bigger image into the link, like so:
<a href="bigpicture.jpg"><img src="bigpicturesml.jpg" width="20" height="20" border="0" alt="Click to see the full sized image"></a>
I have named the thumbnail "bigpicturesml" and the full sized picture "bigpicture", this makes it easy to keep track of them.

Email links

Are a good way of getting feedback from your site.
To add a email link just add a 'mailto:' to the <a href></a> tag, like so

<a href="mailto:you@youraddress.com">Email me</a>
Which looks like this: Email me (Note email address is a made up one)

Put your mouse on the above link and you will also notice in the status bar the email address showing up, this can be handy for people that just want to take note of your address and maybe send an email later, if you don't display your email address in the link. (Note not everyone uses their browsers with the status bar displayed and other people use those stupid JavaScript scrolling messages so you can't see it). I personally like to see the link, to see if it will take me of the site I am viewing or not.
Using graphics for email links is the same as the picture/graphic link, except you add the 'mailto:' instead of the URL.

Side note There are two main ways spammers gain email addresses, one is from message boards and guest books by the help of a robot that harvests them or from web pages by the same way so they can place them on a CD and sell them. Then your email box gets filled of junk. As I understand it the robots look or are programmed to find the mailto: tag, so what we can do is use a special character instead of a letter, like this:
<a href="mailto:ezhtml@hotmail.com">ezhtml@hotmail.com</a>
which shows up as this ezhtml@hotmail.com.
The e is the letter e. It seems the special characters confuse the robots so they list the whole thing instead of the letter, which gives them a dud address.

or better yet change the @ and . like so; mailto:ezhtml@hotmail.com

The special character are on the "Special characters" page but here is the lower case letters a - z and numbers from 0 - 9:

a = a	b = b	c = c	d = d	e = e
f = f	g = g	h = h	i = i	j = j
k = k	l = l	m = m	n = n	o = o
p = p	q = q	r = r	s = s	t = t
u = u	v = v	w = w	x = x	y = y
z = z
0 = 0	1 = 1	2 = 2	3 = 3	4 = 4
5 = 5	6 = 6	7 = 7	8 = 8	9 = 9

Spammers may have wised up to this trick so be sure to check out the spam 101 page for more ways to hide them.

A neat little trick for email links is to add your own subject line, but be warned. The subject line trick is only for the later version browsers.
I use it on one of my other sites, but you would notice that I show my full email address encase someone with an older browser wants to email me.

<a href="mailto:you@youraddress.com?subject=message">Email me</a>
Notice the ?subject=, that is what sets the subject line, You must include the ? and the word subject.

You can also display part or all of a message as well by using '&body=', like so;
<a href="mailto:you@youraddress.com?subject=message goes here&body=This is written in the body">Email me</a>

Remember this doesn't work for every browser and you can't use certain symbols etc. Notice there is only one " at the start, and one " at the end, any others inside would confuse the browser and not display it.

XHTML doesn't allow the use of the & character in the tag, so you must replace the & with & (&body)

Try it, Click this link to display the outcome, but don't press send, the email address is a made up one.

Same page links

This is a neat little trick if you have long pages or want to send people to a certain part of a page. I use these tags on this page and 'Site map' to go directly to the summary or exercises of each page.

To do this we need two tags, firstly a link, and then a place to go (anchor)

The first one <a href="#target">Go to target</a>, then we need to place this tag <a name="target"></a> where we want to go.
Try it, go to the top of this page, use the 'same page links' to come back here.
Pretty neat huh, we can also link to a part of another page by adding the link to an URL or part of it, like so:

<a href="page1.html#summary">Summary of page 1 (The Basics)</a>
which if you want to go there, you can
(But you'll have to use your 'back' on your browser to get back here)

Or you can include a full URL (best to keep it to within your own sites), like so:
<a href="http://www.munchtech.com/mschat/faq.html#wavs">Go to part of one of my other sites</a>
Go to part of one of my other sites
Again you'll have to use the Back button on your browser to get back here.

To make this work we need to add the <name="????"> to where we want to go, in this case on the other page. If you don't add the target it will go to the top of the page your on.

File downloads

To make things downloadable, and I stress, these should not be forced upon your guests, is just a file name within the link to tag, like so:
For this example I'll use a text file, but is the same for zip files, programs (.exe), comic characters (.avb) etc etc.
<a href="textfile.zip">Click for a zip file.</a>
which looks like: Click for a zip file
Note: this file doesn't exist, this is just an example.
If we use this way on a graphic it will only open it in another page (by itself)
I should note, some browsers don't like you uploading certain files, if you have this trouble then just zip the files.

Auto links

This isn't really a link but it does transfer you somewhere or refreshes your page every few seconds. It's using the meta tag.

<html>
<head>
<title>Your page title</title>
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://munchtech.com/ezhtml">
</head>
........

You add your own URL where it has mine, and change the 5 in front of it to how many seconds delay you want.
It will automatically take you to the index of this site.

Targets

One last thing to do with links, this is mostly used for frames, but can be used anywhere.
Targets, yep the target you want the new page (link) opened up. These targets are:
_blank (loads in a new window)
_self (loads in the same window)
_parent (loads in the parent frameset)
_top (loads in the full body of the window)

These are the main ones but others are used. If the browser can't find or understand your target it will open in a new window.

You can also change the color of your links from the regular blue and purple to any color you want. You can change link color, active link (alink) color and visited link (vlink) color. You just add this to the <body> tag, but be warned, people are used to the blue/purple set up and can become confused as to which is a link or which isn't so choose your color carefully.

<body bgcolor="#000000" text="#FFFFFF" link="#0066FF" alink="#CCCCFF" vlink="#990099">

Better to use CSS for this

Common errors

Typos - spelling href the wrong way (herf) is very common
Missing a quote off a value (") will cause errors
Linking to a page thats not there, or making a error in the name
For the case of same page links, not having the <a name="??"></a> will cause it not to work
email links - mailto is one word, and must have the colon (:) straight after it, no spacers. Also the quote goes before the mailto and after the email address

Summary

We have seen how to use a text link.
We have seen how to set up picture links
We have seen how to set up an email link
We have seen how to link within pages
We have seen how to make downloads
We have seen how we can change the link colors

Exercise

For the first part of this exercise, I would like you to make a second page and make a link on both pages so they are linked to each other.
Also add your email link to your page
Add 3 more links, your own favorite links (URL's) from the net, yes you can add mine :)
And lastly make a long page and make a link to go from the top and to the bottom.

These exercises are to get you going, the more you do the better you'll get so if you want to try something go for it, do it. Don't be afraid of trying new things, with HTML the worse you can do is lock up your computer (save your work as you go). HTML is an easy language but trying to filter it down into subjects is hard because every part of it is used within each other.