Anchors

Simple Hypertext Links

To link to another file use the <A HREF="URL">link</A> tag.

The term URL is the location of the file to be linked to. It could be on a hard or floppy disk — as in a:\filename.htm or c:\my documents\week01\filename.htm — on the same Web server, or on another Web server, as in http://www.fortunecity.com/username/filename.htm

To Do

Read about links in your textbooks.

Activity 8: Simple hypertext links

In this Activity you will create four new Web pages: index.htm, filetwo.htm, filethree.htm and filefour.htm. You will then link them together using relative URLs.

  1. Open Notepad and type in the HTML code shown below. (You may find it easier to cut and paste the code from your Web browser into Notepad rather than enter it yourself.)

    <HTML>
    <HEAD> 
    <TITLE>File name</TITLE>
    </HEAD>
    <BODY>
    <h2>File name</h2>
    <p>
    
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam 
    erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci 
    tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
    consequat.
    <P>
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse 
    molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero 
    eros et accumsan et iusto odio dignissim qui blandit praesent 
    luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
    <P> 
    <A HREF="index.htm">Homepage</A><BR>
    <A HREF=filetwo.htm">Filetwo</A> <BR>
    <A HREF="filethree.htm">Filethree</A> <BR>
    <A HREF=filefour.htm">Filefour</A> <BR>
    </BODY>
    </HTML>
           
  2. Save this file as index.htm. Save the file a further three times using the file names from the list above. Each time also revise file name in the HTML title and body.

  3. You should now have four unique files that link to each other. Test these files in your browser.

  4. Now add the following in index.htm to create a hyperlink to the University of Cape Town website.

    <P> 
    
    <A HREF="http://www.uct.ac.za">University of Cape Town</A> 
           
  5. Save the file and test it in your browser.

Linking to Email Addresses & other Non-Web Links

The previous examples have used the HTTP protocol to inform the browser to load a Web page when you click a hyperlink.

Various other protocols may be used. For example, to create a link to an email address use the 'mailto' protocol. Note that this depends on the user's email programme being correctly configured, and so may not always work. However, this feature is commonly used on the Web to contact the webmaster or to get more information from sites.

The following anchor tag creates a mail link:

 <A HREF="mailto:username@domainname">user</A>
      

A subject line for the email message can also be provided:

 <A HREF="mailto:username@address.com?SUBJECT=e-mail from a friend">user</A>
      

Other protocols that can be used include: ftp://, news://, telnet:// and gopher://. These protocols often require other software besides the Web browser, and, as with emails, if the software is not correctly installed and configured the links will not work.

To Do

Read about non-Web links and protocols in your textbooks.

Linking to Sections within Documents

Anchor tags can be used to link to a specific location within an HTML file (even within the same HTML file).

Firstly, a location must be defined using the tag: <A NAME="xxxx"></A> with xxx being the location name.

A link to the location is created using the tag <A HREF="#xxx">link</A>. If the location is in another document, its file file name too must be included as well: <A HREF="URL#xxx">link</A>

To Do

Read about linking within an HTML document in your textbooks.

Activity 9 - Linking to sections within a document

This Activity sets up links to sections within the documents created by Activity 8

  1. Open Notepad and load index.htm.

  2. Copy the following text twice into the body of the file above the hyperlinks in order to create a long file. Rename section two to section three when copying it for the second time.

    section two
    
    <P>
    
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam 
    erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci 
    tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
    consequat..
    
    <P>
    
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse 
    molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero 
    eros et accumsan et iusto odio dignissim qui blandit praesent 
    luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
    
    <P>
           
  3. Now define the location section two by amending the text in the following way.

    <A NAME="section_two">section two</A> 
           
  4. Define the location section three in the same way. Save the file

  5. Save this file as filetwo.htm, overwriting the previous file.

  6. Re-open index.htm and add the following hyperlinks to the top of the <body> section:

    • Section Two

    • Section Three

    • File Two: Section Two

    • File Two: Section Three

  7. Ensure that the links work by reloading index.htm in your Web browser.

Read Discussion of Activity 9 — Linking to sections within documents

Targeting Windows

In modern Web browsers, anchor tags can specify target windows using the target window attribute.

<A HREF="URL" TARGET="New_Window"></A>
      

This specifies where the contents of a selected hyperlink should be displayed. It is commonly used with frames (see Unit 8) or multiple browser windows, allowing the link to be opened in a specified frame or a new browser window.

Windows may have names defined for them, but the underscore should not be used for the first character of any target defined in your documents. Such names are reserved for four special target names:

Table 2.1. 

_blank The browser always loads a target="_blank" linked document in a newly opened, unnamed window.
_self This target value is the default for all <A> tags that do not specify a target. It causes the target document to be loaded and displayed in the same frame window as the source document.
_parent This one is useful for framed sites to create navigation links back to the parent window.
_top _top forces a break out of a framed site, or to take over the browser window. That means, for example, that if a site has be linked to from within a framed site, clicking on the link only brings up the site inside the frame. The _top target attribute forces the link to take over the entire browser window.


To Do

Read about targeting windows in your textbooks.

Activity 10 - Targeting windows

This Activity allows you to try the different target attributes. You will see how they behave by adding them to one or more of the files set up by Activities 8 and 9. For instance, create a link that loads the UCT site in a new browser window.

Link Appearance

It is possible to change the colour of a hyperlink to match the colour scheme of the Web page. The underlining of a hyperlink can also be modified or removed.

To Do

Read about affecting the appearance of links in your textbooks.

Activity 11: Changing the appearance of links

In this Activity you will set up a colour scheme for a Web page by using the BGCOLOR, TEXT, LINK, VLINK and ALINK attributes of the BODY tag

  1. Open Notepad and load index.htm. Create the following colour schemes for the page using either hexadecimal values or colour names (see your textbooks)

    • white background, black text and red hyperlinks

    • black background, white text and cyan hyperlinks

    • your own colour scheme

  2. View the pages in the browser.

Read Discussion of Activity 11 — Changing the appearance of links