Check Your Links!

Link problems are almost always due to an error in the web address. If the Web address does not exactly match the page you want to link to it will not work.

Particular care must be taken with email addresses as it may take days to discover they are wrong.

An email sent to an address where the name is wrong but the "domain" (the bits after the @ sign) is correct will go to the correct location but will bounce around, possibly indefinitely, as it tries to find ash.l@xyz.com when you meant for it to go to ashe.l@xyz.com.

Because of the importance of links to a Web page make sure you check every one you include. It even pays to check them periodically as pages can expire and sites can be shut-down without notice.

Naming Links

One of the most common mistakes in Web design is to make a link like this:

To see our holiday snapshot of Boyle click here.

A link like this gives no indication as to where it heads. Sure, if you read the surrounding text you'll be able to figure it out but mostly people want information as fast as possible. To assist them use a title that describes the contents of the link.

e.g. This summer we went to Boyle and here is our holiday snapshot.

e-Mail

When naming an email link anything can be entered following the coding and the mail link will work correctly when it is clicked but only if your viewer has their email set-up correctly.

This is a fairly simple process but it does introduce one of the golden rules of web design. When designing a page you must assume your readers haven't done this. If they haven't they will need to type the address into a email by hand and this is why entering it exactly following the html coding is important.

Valid XHTML 1.0 Transitional

Links and Mail

The most important feature of Web pages is their ability to link to other Web pages. In fact it is this interconnectedness of pages that gave the "World Wide Web" its name.

Links serve two important functions: they can be used to direct readers to topical content produced by other Web users and, they make it possible for your readers to email you.

Both types of link make use of the anchor tag <a>.

  1. Locate a Web page you'd like to link to and copy its address from the navigation bar.
  2. Place the cursor by a word or statement where you'd like to place a link and insert an opening "anchor" tag <a .

    <body>
    <h1>Bob's World of Trees</h1>
    <p>Trees are awesome. They are mostly green but in <a Autumn they go...

  3. The code for a hyperlink reference or just "link" is href=. Leave a space after your anchor tag and insert a hyperlink reference.

    <body>
    <h1>Bob's World of Trees</h1>
    <p>Trees are awesome. They are mostly green but in <a href=Autumn they go...

  4. To finish the link, insert the full address you acquired in step 24. inside a pair of quotation marks and finish the opening anchor tag.

    <body>
    <h1>Bob's World of Trees</h1>
    <p>Trees are awesome. They are mostly green but in <a href="http:// en.wikipedia.org/wiki/Autumn">Autumn they go...

  5. Now insert the closing anchor tag, </a>, at the end of the word or statement you are making into a link.

    <body>
    <h1>Bob's World of Trees</h1>
    <p>Trees are awesome. They are mostly green but in <a href="http:// en.wikipedia.org/wiki/Autumn">Autumn</a> they go...

    This is how your browser will display the link.

    Trees are awesome. They are mostly green but in Autumn they go...

  6. Save your .html file
  7. Start your browser and click: File→ Open→ Browse and choose your .html file.

    Your Web page should now contain a link to the page you selected. Checking links is crucial.

  8. To make an email link, select a suitable location within the body of your .html file and open a new <p> tag. Inside the tag enter the same coding that you used for a Web page link.

    ... have prickles so watch where you put your nose.<p>
    <p><a href=

  9. Following the hypertext reference instead of entering a Web page address enter  mailto: followed by the coding for an email address, again this must be placed inside a set of quotation marks.

    <a href="mailto:bob@trees.com">

  10. After the coding enter the exact wording for the email address then close the link tag:

    <a href="mailto:bob@trees.com">
    bob@trees.com</a>

  11. Save your .html file.
  12. Open your browser and click File→Open→Browse now choose your file whether it is on the server or on a floppy disk.

    Your Web page should now contain an email link to you. If you are attached to a computer from which you can send email check that the link works.

Next section: Images →