Linking

The chief power of HTML comes from its ability to link text and/or an image to another document or
section of a document. A browser highlights the identified text or image with color and/or underlines
to indicate that it is a hypertext link (often shortened to hyperlink or just link).

HTML's single hypertext-related tag is <A>, which stands for anchor. To include an anchor in your
document:

1.start the anchor with <A (include a space after the A)
2.specify the document you're linking to by entering the parameter HREF="filename" followed by
a closing right angle bracket (>)
3.enter the text that will serve as the hypertext link in the current document
4.enter the ending anchor tag: </A> (no space is needed before the end anchor tag)

Here is a sample hypertext reference in a file called US.html:

<A HREF="MaineStats.html">Maine</A>

This entry makes the word Maine the hyperlink to the document MaineStats.html, which is in the
same directory as the first document.

Relative Pathnames Versus Absolute Pathnames

You can link to documents in other directories by specifying the relative path from the current
document to the linked document. For example, a link to a file NYStats.html located in the
subdirectory AtlanticStates would be:

<A HREF="AtlanticStates/NYStats.html">New York</A>

These are called relative links because you are specifying the path to the linked file relative to the
location of the current file. You can also use the absolute pathname (the complete URL) of the file,
but relative links are more efficient in accessing a server. They also have the advantage of making
your documents more "portable" -- for instance, you can create several web pages in a single folder
on your local computer, using relative links to hyperlink one page to another, and then upload the
entire folder of web pages to your web server. The pages on the server will then link to other pages
on the server, and the copies on your hard drive will still point to the other pages stored there.

It is important to point out that UNIX is a case-sensitive operating system where filenames are
concerned, while DOS and the MacOS are not. For instance, on a Macintosh, "DOCUMENT.HTML",
"Document.HTML", and "document.html" are all the same name. If you make a relative hyperlink to
"DOCUMENT.HTML", and the file is actually named "document.html", the link will still be valid. But if
you upload all your pages to a UNIX web server, the link will no longer work. Be sure to check your
filenames before uploading.

Pathnames use the standard UNIX syntax. The UNIX syntax for the parent directory (the directory that
contains the current directory) is "..". (For more information consult a beginning UNIX reference text
such as Learning the UNIX Operating System from O'Reilly and Associates, Inc.)

If you were in the NYStats.html file and were referring to the original document US.html, your link
would look like this:

<A HREF="../US.html">United States</A>

In general, you should use relative links whenever possible because:

1.it's easier to move a group of documents to another location (because the relative path
names will still be valid)
2.it's more efficient connecting to the server
3.there is less to type

However, use absolute pathnames when linking to documents that are not directly related. For
example, consider a group of documents that comprise a user manual. Links within this group
should be relative links. Links to other documents (perhaps a reference to related software) should
use absolute pathnames instead. This way if you move the user manual to a different directory, none
of the links would have to be updated.

URLs

The World Wide Web uses Uniform Resource Locators (URLs) to specify the location of files on other
servers. A URL includes the type of resource being accessed (e.g., Web, gopher, FTP), the address
of the server, and the location of the file. The syntax is:

scheme://host.domain [:port]/path/ filename

where scheme is one of :

• File
  a file on your local system
  
• FTP
  a file on an anonymous FTP server
  
• HTTP
  a file on a World Wide Web server
  
• Gopher
  a file on a Gopher server
  
• WAIS
  a file on a WAIS server
  
• News
  a Usenet newsgroup
  
• Telnet
  a connection to a Telnet-based service
  
  The port number can generally be omitted. (That means unless someone tells you otherwise, leave
  it out.)
  
  For example, to include a link to this primer in your document, enter:
  
  <A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html">
  NCSA's Beginner's Guide to HTML</A>
  
  This entry makes the text NCSA's Beginner's Guide to HTML a hyperlink to this document.
  
  There is also a mailto scheme, used to hyperlink email addresses, but this scheme is unique in that
  it uses only a colon (:) instead of :// between the scheme and the address. You can read more
  about mailto below.
  
  For more information on URLs, refer to:
  
  WWW Names and Addresses, URIs, URLs, URNs
  A Beginner's Guide to URLs
  
  Links to Specific Sections
  
  Anchors can also be used to move a reader to a particular section in a document (either the same or
  a different document) rather than to the top, which is the default. This type of an anchor is commonly
  called a named anchor because to create the links, you insert HTML names within the document.
  
  This guide is a good example of using named anchors in one document. The guide is constructed
  as one document to make printing easier. But as one (long) document, it can be time-consuming to
  move through when all you really want to know about is one bit of information about HTML. Internal
  hyperlinks are used to create a "table of contents" at the top of this document. These hyperlinks move
  you from one location in the document to another location in the same document. (Go to the top of
  this document and then click on the Links to Specific Sections hyperlink in the table of contents. You
  will wind up back here.)
  
  You can also link to a specific section in another document. That information is presented first
  because understanding that helps you understand linking within one document.
  
  Links Between Sections of Different Documents
  
  Suppose you want to set a link from document A (documentA.html) to a specific section in another
  document (MaineStats.html).
  
  Enter the HTML coding for a link to a named anchor:
  
  documentA.html:
  
  In addition to the many state parks, Maine is also home to
  <a href="MaineStats.html#ANP">Acadia National Park</a>.
  
  Think of the characters after the hash (#) mark as a tab within the MaineStats.html file. This tab tells
  your browser what should be displayed at the top of the window when the link is activated. In other
  words, the first line in your browser window should be the Acadia National Park heading.
  
  Next, create the named anchor (in this example "ANP") in MaineStats.html:
  
  <H2><A NAME="ANP">Acadia National Park</a></H2>
  
  
  With both of these elements in place, you can bring a reader directly to the Acadia reference in
  MaineStats.html.
  
  NOTE: You cannot make links to specific sections within a different document unless either you have
  write permission to the coded source of that document or that document already contains
  in-document named anchors. For example, you could include named anchors to this primer in a
  document you are writing because there are named anchors in this guide (use View Source in your
  browser to see the coding). But if this document did not have named anchors, you could not make a
  link to a specific section because you cannot edit the original file on NCSA's server.
  
  Links to Specific Sections within the Current Document
  
  The technique is the same except the filename is omitted.
  
  For example, to link to the ANP anchor from within MaineStats, enter:
  
  ...More information about
  <A HREF="#ANP">Acadia National Park</a>
  is available elsewhere in this document.
  
  
  Be sure to include the <A NAME=> tag at the place in your document where you want the link to jump to
  (<A NAME="ANP">Acadia National Park</a>).
  
  Named anchors are particularly useful when you think readers will print a document in its entirety or
  when you have a lot of short information you want to place online in one file.
  
  Mailto
  
  You can make it easy for a reader to send electronic mail to a specific person or mail alias by
  including the mailto attribute in a hyperlink. The format is:
  
  <A HREF="mailto:emailinfo@host">Name</a>
  
  For example, enter:
  
  <A HREF="mailto:pubs@ncsa.uiuc.edu">
  NCSA Publications Group</a>
  
  to create a mail window that is already configured to open a mail window for the NCSA Publications
  Group alias. (You, of course, will enter another mail address!)

Home