'My third page' - a basic HTML recipe
[October 2008] The last Tips introduced a little basic HTML, showing you how to make paragraphs and headings and emphasise a few words. In this Tip we link to another website and also to an email address. Please reread the previous Tips to refresh your memory.
A good link grabs Google
If you link to another website (or another page in your own website) Google pays attention to the words you use for the link. More importantly though, human beings like it when you use clear text for links.
Some people fall in love with a phrase like 'click here' or 'read more' so it appears like an outbreak of measles, or acne, on their web pages. Read more, read more, read more….
That's as unattractive (and unhelpful) as that rash only your doctor knows about.
Good links use words with real meaning, such as:
books for sale 2008 annual report 2009 conference programme
Make a link with 'a href'
Let's imagine you want people to click on the words Engage your Community, and when they do they will be transported to a website at the address http://eyc.org.nz. You now have the information you need for a link.
Geeks made the web, so they used geeky terms in HTML. What you and I call a link they call an anchor.
Hypertext is what the web runs on. When you click on a link (anchor), you go to a web address. But that's too easy, so the geeks called the web address a hypertext reference instead.
Even they thought that was all a bit much though, so they shortened it to 'a' for 'anchor' and 'href' for 'hypertext reference'.
How to link to a webpage
- type in the words you want people to click on, for example:
Engage your Community
- in front of those words type this:
<a href="http://eyc.org.nz">
Replace the address I've used above with the address you need for your link. The address part, or hypertext reference goes in between the speech marks.
The framework around the address is: <a href=""> . You're saying that you're using an anchor and the hypertext reference is (equals) http://eyc.org.nz , or whatever address you need.
- after the words you want people to click on type this:
</a>
That shows where the link text ends.
Here's how my whole link looks now:
<a href="http://eyc.org.nz">Engage your Community</a>
The visitor will click on the words Engage your Community and be transported to the website at http://eyc.org.nz .
How to link to an email address
- type in the words you want people to click on, for example:
Email Communitynet Aotearoa
Note: the email address is information@community.net.nz .
- in front of those words type this:
<a href="mailto:information@community.net.nz">
Replace the email address I've used above with the address you need. The email address goes in between the speech marks, and after mailto: . Notice the colon.
The framework around the address is:
<a href="mailto:">
- after the words you want people to click on type this:
</a>
Here's how my whole link looks now:
<a href="mailto:information@community.net.nz">Email Communitynet Aotearoa</a>
A complete simple webpage
Here's a really simple webpage with everything the Tips have covered so far. Save it as page-03.html and open it into your web browser to see how it reads. Try the links, to check they work.
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h1>My first web page </h1>
<h2>Community groups and the web </h2>
<p>My <strong>first</strong> paragraph. Type some more stuff in here to make it longer. </p>
<p>Another paragraph. Type some more stuff in here to make it longer. </p>
<h3>Engage your Community </h3>
<p>Another paragraph. Type some more stuff in here to make it longer. </p>
<p>The <a href="http://eyc.org.nz">Engage your Community</a> Conference is one all community organisations should attend. There will be many workshops, including one called Keeping up with the Joneses, run by <a href="http://knowit.co.nz">Miraz Jordan</a>. </p>
<p><a href="mailto:information@community.net.nz">Email Communitynet Aotearoa</a> for more information. </p>
</body>
</html>
In the next Tip I'll show you how to add an image.
Panui tips contributed by Miraz Jordan, http://knowit.co.nz