Introduction to Web Design - 7. HTML - Links
7.1 Links to Other Pages | 7.2 Links to Sections of the Same Page | 7.3 Changing the Color of the Links
  1. Preface
  2. Markup Languages – A Definition and Some History
  3. Beginning HTML
  4. HTML Lists
  5. HTML Tables
  6. HTML - Color, Fonts and Special Characters
  7. HTML Links
  8. HTML Images
  9. HTML Frames
  10. Cascading Style Sheets
  11. MicroSoft PhotoDraw
  12. JavaScript
  13. HTML Forms and Form Handling
  14. VBScript
  15. MicroSoft FrontPage
  16. Active Server Pages
  17. Java Applets
  18. XML Meaning and More
  19. Macromedia Flash 5.0
  20. References
Providing links to other pages is what http (HyperText Transfer Protocol) 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 HTML file. Open a new file in Notepad and create a new HTML 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 a Browser

  3. Now, open your first HTML page in Notepad and go to the bottom of the file, but before the ending BODY tag. Links are placed on an HTML page using anchor tags, <A> … </A>. The beginning anchor tag takes a very important attribute, HREF (hypertext reference). 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 beginning 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 beginning and closing anchor 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 anchor 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 beginning anchor tag. If the link is to a section of another document in the same directory, the URL in the beginning anchor 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 HTML 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 anchor tag and the NAME attribute. The value of the NAME attribute is one of your choosing. Add the following anchor tags so that the heading is between the beginning and closing anchor 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 beginning <PRE> tag, insert the following: 

    <A NAME = “meals”>  <h2> 
My diet today
</h2> </A>


  3. Now, position your cursor just below the beginning 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 beginning 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 HTML 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.

7.3 Changing the Colors of the Links on a Page

The appearance of the links on your page can be altered from the standard underlined blue text. However, you should bear in mind that a significant deviation from the standard look may confuse your readers. If you decide to make links look the same as non-link text, the readers will not realize that these are potentially useful links. On the other hand, if you choose to underline portions of text or choose a different color for some text, the readers may think that these are links and be disappointed when they try to click on them. The appearance of links in a page can be altered by the LINK, ALINK and VLINK attributes of the BODY tag. The values for these attributes are HTML color names or an RGB color specification number as described earlier. The LINK attribute affects the color of unvisited links. The ALINK attribute affects the color of a clicked link while the browser is loading the linked page. If the next page loads very quickly, this color will not be seen. The VLINK attribute affects the color of links that the reader has visited.
  1. Try adding the LINK, ALINK and VLINK attributes and different values for the attributes, to the body tag of one of your HTML documents. Be sure to select colors that are distinguishable from each other so that you can observe the effect of the changes. You might want to try the following: 

    
<body LINK = "#FF0000" ALINK = "#00FF00"  VLINK = "#0000FF">


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

Cynthia J. Martincic
cynthia.martincic@email.stvincent.edu
CIS Department
Saint Vincent College
Latrobe, PA 15650