The HREF anchor
HREF stands for Hypertext REFerence. An HREF anchor can be used to create a link to another document on the web, or to create a link to a specific location within a document (such locations must be named; more about naming in a few screens).
Usage:
<A HREF="URL">HREF format</A>- The URL for an HREF anchor can be a RELATIVE URL or an ABSOLUTE URL (also called just plain URL). Relative URL's are URL's that are missing the http://server.name/ part. A relative URL is used to reference documents that are on the same server as the referring document (or are on the server named in the BASE tag, if you have included one in the head of your document). You should always use relative URL's in your documents whenever you are referring to your own pages that exist on the same server as the one that your page is published by. Using relative URLs for your own documents permits you to test them from your hard drive.
You may find it easier to picture the relative locations of the files in the following examples if you first examine the illustration here:
Example 1:
<A HREF="index.html">HTML I Entry Page</A>- A relative URL with no slash character anywhere in it is the name of a file in the same directory as the file containing the HTML tag. In other words, this refers to a "sibling" file, which lives in the same parent directory. The HTML I entry page exists on the same server as this page (and in fact is in the same directory). The actual link would look like this: HTML I Entry Page.
Example 2:
<A HREF="folder/example.html">Example Page</A>- A relative URL that has an embedded slash refers to a file in a subdirectory (or "folder," we use the two terms interchangeably) that is contained within the same directory as the file containing the HTML tag. In other words, this refers to a "nephew" file, the offspring of a sibling. The actual link would look like this: Example Page.
Example 3:
<A HREF="../index.html">Classes Entry Page</A>- A relative URL that starts with "../" refers to a file in the folder that contains the folder that contains the file containing the HTML tag. In other words, it means to move "up" or "out" one level in the file structure, and refers to an "aunt" file, the sibling of the parent folder. The Classes entry page exists on the same server as this page (and in fact is in the parent directory of the directory containing this file). The actual link would look like this: Classes Entry Page.
Example 4:
<A HREF="../html2/index.html">HTML II Entry Page</A>- A relative URL that starts with "../" and contains another embedded slash refers to a file in a folder that is contained in the folder that contains the folder that contains the file containing the HTML tag. In other words, this refers to a "cousin" file, the offspring of the parent folder's sibling. The HTML II entry page exists on the same server as this page (and in fact is in a different subdirectory of the parent directory of the directory containing this file). The actual link would look like this: HTML II Entry Page.
When you are linking to pages that are located on another server, or to pages that other people maintain (even if they are presently located on the same server as your files) you should always use an ABSOLUTE URL. An absolute URL includes the http://server.name/ part.
Example 5:
<A HREF="http://www.yahoo.com/">Yahoo</A>- Yahoo exists on another server, called www.yahoo.com, so we must use an absolute URL if we expect our link to work, e.g., Yahoo.
The NAME anchor
Your names must not contain space characters. Names will be interpreted by the browser, and will therefore be case-sensitive, regardless of whether the server is case-sensitive for path and filename, or not. To simplify your life creating and revising the file, and to simplify the life of anyone who might have to type the URL, it is a good idea to choose names that are short and consist of lower-case letters and numerals. Choosing meaningful names will make it easier for you to work on the file.
When you choose the text to enclose within the NAME anchor tag, remember that Netscape will not display that enclosed text any differently than it would have otherwise, but that many versions of Lynx will emphasize that text, making it look like a non-selected link.
Once the destination has been named, setting up a link to jump to that named location merely requires an HREF anchor tag with the correct URL:
- If the destination is within the current document, the URL should be a "#" character followed by the name.
- If the destination is in some other document, the URL should be the appropriate relative or absolute URL for that document, followed by a "#" character and finally the name.
Example 6:
<A NAME="anchor-example">Target of Anchor Example</A>- This would be referenced from within the same document by using an HREF anchor such as:
- <A HREF="#anchor-example">Go to the Anchor Example</A>
- Because it is a reference within the same document, the relative URL in this HREF need not include the document's filename. It works like so, Go to the Anchor Example. (If you try it, you will see that the Example 6 header has that name in this file.)
Example 7:
<A NAME="top">Topics</A>- In this case we presume that the NAME tag, as shown above, is located within the table of contents file. It would be refrenced by using an HREF anchor such as:
- <A HREF="toc.html#top">HTML I Topics List</A>
- This would access the topics list at the top of the toc.html page in the same directory as this file, like so: HTML I Topics List.
Example 8:
<A HREF="#next" NAME="top">Topics</A>- In this case we have both HREF and NAME attributes in the Anchor tag. This means that the text can be linked to and that it can be selected as a link to another location. DO NOT use two separate, nested, anchor tags if you need the same text to be a target and a link. Instead, use this construction with a single anchor tag that has both attributes.
Exercise 7
- The page as it would be seen in Netscape.
- The source code at this seventh stage.
While viewing the source, look for the anchor tags within the Body section, and observe their effects on the displayed page. This is the method by which you can provide shortcuts down into a larger file, functioning as a table of contents. This exercise also introduces the CENTER tags, which provide horizontal centering of the text and images that are within the block. Review the entire page; are there any tags whose meaning and effects you do not understand? We will discuss the &...; constructs (e.g., " ") later.