Hypertext Anchors
An HTML anchor, unlike the ones on ships, is a piece of text or an object (typically an image) which gives a relationship or link to other documents, portions of documents, or to other objects.It is the
<A>element in HTML that's used to mark such a link. The text between the opening and closing tags:<A [ATTRIBUTE=VALUE]> ... text ... </A>, can be the start or destination (or both) of a link. Here are some examples:
<A HREF="http://www.ziplink.net/index.shtml">Home Page</A>The string "Home Page" is a hypertext link to the document located at the indicated URL. The example uses a logical, or what's known as an absolute, URL for the HREF value. It defines a full HTTP address (or URL) to the document. We can also create a link using a relative URL, that is, a partial URL pointing to a file relative to the location of the current document (unless otherwise specified by the BASE element). If the link was to a document in the same directory the current one is in, then the following can be used as a link to that page:
<A HREF="intro.html">Introduction to HTML</A>There are several issues to be aware of when setting up links in your documents:
- ZipLink uses a flavor of the UNIX operating system on it's Web server. UNIX is case sensitive, so if your files' names are all in lowercase or all CAPS (or a mixture), you need to refer to them as such. This is often the cause of broken graphic links on a page.
- When using relative links, you can point to a file in a directory above the current directory by using "../". For example, the "About ZipLink" page is one directory above where the page you're now reading resides, so I can make a relative link to the About ZipLink page using:
<A HREF="../about.html">ZipLink</A>
- This is only peripherally related to links, but if the computer operating system you develop your Web site's content on allows the use of spaces in filenames, you may want to avoid this for your Web files, using dashes or underscores ( _ ) instead if you need to break up the names of your files for readability.
Image as Anchor
Another example of a relative URL is seen in the example below, in which the URL points to the file 'image.jpg' that resides in the directory 'graphics', which is under the current directory.
<A HREF="graphics/ziplink.jpg"><IMG SRC="graphics/ziplink.gif"></A>
The image 'ziplink.gif' is a hypertext link to a JPEG file. This can allow the use of a small icon that links the user to a larger version of the same image. Alternatively, the anchor tag could have been:
<A HREF="document.html"><IMG SRC="graphics/ziplink.gif"></A>In this case the image acts like an icon button that links the user to the indicated HTML document. To get rid of the border around the image showing it to be a link, set the BORDER attribute for the IMG tage to 0 (zero), like so:<IMG SRC="graphics/icon.gif" BORDER="0">For more information on in-line images, see the next page, which deals with the IMG element.
Linking to Sections of a Document
<A NAME="blah">About blah</A>
The 'blah' value for the NAME attribute is the target of a link, indicating a fragment identifier within the document. This link is referenced via the form:
<A HREF="document.html#blah">go to blah</A>The file 'document.html' contains the anchor and 'blah' is the anchor NAME. Note the hash or pound character (#) is used to indicate the fragment within the document. If you are already in 'document.html' the file is implicit, so it can be left out.A hypertext link can also act as a fragment identifier within a document, by containing both the HREF and NAME attributes.
Back to Formatting Index Back to the Ziplink 101 page ©2000 ZipLink. All Rights Reserved.