Introduction to Web Design - 7. XHTML Links

Providing links to other pages is what HTTP is all about. Hyperlinks allow the user to obtain more information about a topic at will. While hyperlinks are very useful, the use of hyperlinks is not without its problems. One problem involves the design of a website. For centuries, people have written documents and read documents in a mostly linear fashion. When designing webpages, you must keep in mind that readers of the webpages will most likely not read the pages in a linear fashion, or even read any page in its entirety. Another problem is that, unless a website is very thoughtfully designed, a reader of the pages may get lost, or feel disoriented when they can't find a certain page again, or cannot get back to previous information easily.

7.1 Links to Other Pages

There are two ways to link to other webpages: (1) absolute links and (2) relative links. Absolute links contain the full specification of the URL for a page. Absolute links are required when providing a link to a page on another server. Relative links can be used when providing a link for a page that exists on the same server as the current page. Relative links contain a partial specification of the URL of a webpage. If the linked webpage is in the same directory (or folder) as the current page, only the file name needs to be specified in the link.

  1. In order to link to another page on the same site, we need to create a second XHTML file. Open a new file in Notepad and create a new XHTML page that contains the following: <html>
    <head>
    <title>my second webpage</title>
    </head>
    <body>
    <h1>Additional Information</h1>

    Blah, blah, blah…
    </body>
    </html>
  2. Save this file as "second.htm" in the same directory or folder as your first page and view it in a browser. It should look like this:

    Image of Second File in Browser

  3. Now, open your first XHTML page in Notepad and go to the bottom of the file, but before the ending </body> tag. Links are placed on an XHTML page using anchor tags, <a>…</a> tags. The opening <a> tag takes a very important attribute, href. The value of the href tag is the name of a file, a relative directory path or a complete URL. The text placed between the opening and ending tags will be the link that appears on the current page. Open your first.htm file and add the following to the bottom of that page (but before the ending <body> tag: <a href="second.htm">Go to next page.</a>
  4. Save your file and view it. Note that the text in between the opening and closing <a>…</a> tags is a different color than the rest of the plain text on the page and is underlined. Click on the text and the new page should appear. Using the browser's "back" button, go back to your first page. Note that the color of the link text has changed to indicate that you have followed that link.
  5. Let's add a link to a page on the internet. Add the following to the bottom of your first webpage: <br /><br />

    Go to the
    <a href="http://www.w3schools.com/html/html_colors.asp">
    Colors
    </a> page.
    <br /><br />
  6. Note that this time, only the word Colors appears underlined and in a different color. Click on the link to make sure that the link works.

7.2 Links to Sections of the Same Page

Sometimes you may want to provide the means for the user to jump to another section of the current page or to a section of another page. This is done by inserting labels into the document at points for which you want to provide this functionality. The links that will provide easy access to a section of document use the label in the <a> tag. If the link is a jump to a section of the current page, a pound sign (#) followed by the label is used in place of the URL in the opening <a> tag. If the link is to a section of another document in the same directory, the URL in the opening <a> tag uses the filename followed by the pound sign and the label. If the link is to a section of a document that is on another server, the complete URL followed by the pound sign and the label is used.

  1. First, let's insert some labels in our first XHTML page. Open the page in Notepad. Find the location of the definition list which contains the CIS course descriptions. Locate your cursor on the line that contains the Heading "CIS course descriptions". Labels are added to a long document using the <a> tag and the name attribute. The value of the name attribute is one of your choosing. Add the following <a> tags so that the heading is between the opening and closing <a> tags: <a name="cisdescriptions"><h2>
    CIS course descriptions
    </h2> </a>
  2. Save your file and view it in a browser. Note that inserting a label does not change the appearance of the document in a browser. Insert another label above the meal listing within the <pre>…</pre> tags. Above the opening <pre> tag, insert the following: <a name="meals"><h2>
    My diet today
    </h2></a>
  3. Now, position your cursor just below the opening <body> tag in the file. Here, we will provide quick links to the CIS Course Descriptions and today's meals. Links to another section of the current document use a pound sign followed by the label name in place of a file name or a URL. Add the following just under the opening <body> tag: Quick Links to Important Sections of this Page
    <a href="#cisdescriptions">
    CIS Course Descriptions
    </a> |
    <a href="#meals">
    My diet today
    </a>
    <br />
  4. Save the file and view it in a browser. It should appear as shown below. Make sure that the links appear correctly. Click on each one to make sure that it works.

    Image of File in a Browser

  5. Next, we will add links to these same sections in your other XHTML file that should be saved as "second.htm". Open "second.htm" in Notepad. At the bottom of the file, before the ending </body> tag, add the same code as above in step 3. Since these links point to sections in another file, we need to add the file name before the labels. Edit the code to include the file name, "first.htm" before the labels. The code added to second.htm should be the following: Quick Links to Important Sections of this Page
    <a href="first.htm#cisdescriptions">
    CIS Course Descriptions
    </a> |
    <a href="first.htm#meals">
    My diet today
    </a>
    <br />
  6. Save this file and view it in a browser. Make sure that the links appear correctly and that they work correctly.

    Image of File in a Browser

References

  1. A Beginner's Guide to HTML http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerPrintable.html
  2. HTML: A Guide For Beginners http://www.geocities.com/Baja/4361/index.html
  3. HTML: An interactive guide for beginners. http://www.davesite.com/webstation/html/
  4. HTML and XHTML Information www.w3c.org/markup
  5. HTML reference including browser support http://www.w3schools.com/html/html_reference.asp
  6. W3Schools HTML Tutorials http://www.w3schools.com/default.asp
  7. Willcam's Comprehensive HTML Cross Reference http://www.willcam.com/cmat/html/crossref.html
  8. Anderson-Freed, S. (2002) Weaving a Website: Programming in HTML, Javascript, Perl and Java. Prentice-Hall:NJ. ISBN 0-13-028220-0

Introduction to Web Design by Cynthia J. Martincic :: Credits