My third page – a basic HTML recipe

14 October 2008 · 1 comment

The previous Tips in this series introduced a little basic HTML, showing you how to make paragraphs and headings and emphasise a few words. See: My first page — a basic HTML recipe and My second page — a basic HTML recipe. In this Tip we link to another website and also to an email [...]

 

The previous Tips in this series introduced a little basic HTML, showing you how to make paragraphs and headings and emphasise a few words.

See: My first page — a basic HTML recipe and My second page — a basic HTML recipe.

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 KnowIT, and when they do they will be transported to a website at the address http://knowit.co.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

  1. type in the words you want people to click on, for example:
    KnowIT
  2. in front of those words type this:
    <a href="http://knowit.co.nz">

    3. 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://knowit.co.nz , or whatever address you need.

  3. after the words you want people to click on type this:
    </a>

    4. That shows where the link text ends.

Here’s how my whole link looks now:
<a href="http://knowit.co.nz">KnowIT</a>

The visitor will click on the words KnowIT and be transported to the website at http://knowit.co.nz .

How to link to an email address

  1. type in the words you want people to click on, for example:
    Email Miraz Jordan

    2. Note: the email address is miraz@firstbite.co.nz .

  2. in front of those words type this:
    <a href="mailto:miraz@firstbite.co.nz">

    3. 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:">

  3. after the words you want people to click on type this:
    </a>

    4. Here’s how my whole link looks now:
    <a href="mailto:miraz@firstbite.co.nz">Email Miraz Jordan</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:miraz@firstbite.co.nz”>Email Miraz Jordan</a> for more information. </p>

</body>

</html>

In the next Tip I’ll show you how to add an image.

Written by Miraz Jordan for, and reproduced from CommunityNet Aotearoa Panui, October 2008. This article has been modified for publication here.

Update: The whole series:

  1. Use Plain Text options for TextEdit when writing HTML files
  2. My first page – a basic HTML recipe
  3. My second page – a basic HTML recipe
  4. My third page – a basic HTML recipe
  5. My fourth page – a basic HTML recipe
Clip to Evernote

Tagged as: beginners, code, HTML

1 comment

Tell us what you think.
Note: there may be a delay before your comment appears. I now approve all comments from new visitors, in an attempt to keep spam at bay.

{ 1 comment… read it below or add one }

Ken Allan 14 October 2008 at 23:09 21

Tēnā koe Miraz!

An ace how-to here!

You may also be interested in links within a post. I find this quite useful, for as the link here will show, the same technique can be used to point a link to a paragraph in another post.

Ka kite anō

Reply

Add your Comment

Older Post:

Newer Post: