Introduction
On a web page on the Internet, you are likely to see a short string of text or an image, which when clicked another web page would be displayed in your browser, replacing the one you were seeing. Such text or image is called a hyperlink. Our interest in this article is to see how to construct such hyperlinks.
For a long web page, a link can also be used to move the page to a different vertical position. For example, you can have a long web page, which begins with a menu. When you click a menu item, the section that has the details of the menu item will come to the top of the browser window; the menu potion will now be above the browser window and you will not be seeing it. In this case, clicking the menu item makes the page to jump to the section of the menu details.
A hyperlink is sometimes simple referred to as a Link.
Note: If you cannot see the code or if you think anything is missing (broken link), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what has been typed.
Web Recourses
Any item residing alone at the server, which you can see or hear at the browser is a web resource. An example of a web resource is an XHTML document. An XHTML document is the XHTML file at the server. At the browser, you see an XHTML document as a web page. Other examples of web resources are an image, a video clip or sound (music). At the server, an image file holds an image, a video file holds a video clip and a sound file holds the sound.
A hyperlink can be used to bring a web resource to the browser. In the case of an XHTML document, you see a new web page in the browser. In the case of an image, when you click the hyperlink, everything being equal, you would see a new web page displaying only that image and nothing else (no text). In the case of a video clip, when you click the hyperlink, everything being equal, a blank web page will open, and then you will see the clip (moving pictures and sound) on a window separated from the new blank web page.
Source and Destination Anchors
A Hyperlink has what is called a Source Anchor and a Destination Anchor. The source anchor is the element (text or image) that you click. The destination anchor is the web resource that appears in the browser window (to replace the web page the had the link on which you clicked).
The destination anchor can also be a vertical position on the same web page having the link you clicked. In the introduction above, I gave an example, where I talked about a menu and the details of the menu below the menu section on the same web page. Clicking a menu item takes its details, which may be in an XHTML Paragraph element (
) to the top of the page. In this case, the XHTML paragraph element is the destination anchor. When the destination anchor is a portion of the same web page, that portion is actually an XHTML element (e.g. the horizontal rule).
Below, we shall first consider hyperlinks that call web resources to the browser before we consider hyperlinks the cause the page to jump to a different vertical position. I call the first group of hyperlinks, simple hyperlinks. I call the second group of hyperlinks, Jump Hyperlinks.
Uniform Resource Locator
A Uniform Resource Locator abbreviated to URL is a kind of address you type at the address bar of your browser to receive a web page. A example, is
http://www.somewebsite.com/apage.htm
Here, the web site address is http://www.somewebsitee.com. apage.htm is an XHTML document in a directory (folder) in the server. Note the forward slash that separates the web site address and the XHTML document.
URL and Server Directories
A web server normally has XHTML documents in directories. The directories are in a hierarchy or a directory tree. The root directory has the XHTML document which represents the web site; this is the home page. This document has one of the following four names:
index.htm, index.html, default.htm or default.html.
So when you design your web site, you home page should have one of the above four names. This name does not appear in the URL. Whenever, you type the address of the web site (URL) such as the one below, the home page will appear (come to) the browser:
http://www.somewebsite.com
As you can see, none of the above possible four names would appear in the URL.
Now, directories are indicated in the URL by forward slashes. Consider the following URL:
Here the home page is in the root directory, having one f the above four names. The name is not indicated in the URL. The first part of the URL, that is, http://www.somewebsite.com, would call the home page when type only the part at the address bar of the browser. In the URL above, folder1 is a first level sub directory. folder2 is a second level sub directory. The file (web page), apage.htm is in the sub directory, folder2. You access file in any directory in this way, by appending it at the end of the URL after the directory path. A URL generally has a site address, names of folders separated by forward slashes and a web page file name. You cannot have two web page file names in a URL.
You do not only need to have only the home page in the root directory. You can have other web pages in the root directory. These pages would have any name, but with the extension .htm or .html.
Assume that you have a page, called, special.htm, in the root directory at the server, if you want this page at the browser, you would type the following at the browser’s address bar:
http://www.somewebsite.com/special.htm
You begin with the site address; this is followed by a forward slash and then the name of the file. The first single forward slash of the URL indicates that the next item is either a first level directory or the name of a file in the root directory.
Web resources as mentioned above can be described by a URL were the last item of the URL is the file name of the web resource. Before we continue, know that you can call a web resource to the browser, by typing the URL of the web resource at the address bar and then click Go. Uniform Resource Locator (URL) forms a component of a hyperlink as we shall see below.
Hyperlink
Here, I am referring to a hyperlink that brings a web resource from the server to the client browser.
The A Element
The A element is used to define a Hyperlink or a Jump Hyperlink. In its simplest form, the syntax of the A element is:
Content
Above, the start tag is:
It begins with the open angle bracket. This is immediately followed by the letter ‘a’ in lower case. Next, you have an attribute. The attribute name is href; the attribute value is a URL e.g. http://www.somewebsite.com/apage.htm. This value must be in quotes (either double or single).
Looking at the syntax, we see that after the start tag we have the content. The content is text or an image (we shall consider the case of an image later). The text is just simple text, like, Products, for a web site that sells products. After the content, you must have the end tag. Remember, with XHTML, all tag names and attribute names are in lower case; so A for the start or end tag must be in lower case. An example of the A element is
Products>/a>
When you type this in the BODY element of your web page or inside any element (e.g. Paragraph element) in the BODY element, the user will see the word, Products, underlined in the browser.
The tags of the A element do not appear on the web page at the browser. It is the content that appears, and underlined, by default. For the above example, when the user clicks the content, Products, the products page will appear in the browser replacing the page that had the link. Note that the file name of the URL, of the A element above, is, products.htm. This file is the file that is downloaded from the server to the client and is displayed on the browser.
This is how the A element is used as hyperlink to download web resources to the browser. All you have to do is to have the resource file name as the last item of the URL of the href element. Remember, attribute names are case sensitive and the href name must be in lower case. The URL also has the directory path to the web resource (as explained above).
For the A element, A stands for Anchor.
An A element used in this way, forms a simple hyperlink. Let us first see how the Simple Hyperlink is implemented, before we look at the Jump Hyperlink. Before we do that, let us look at some rules governing the URL as the value of the href attribute.
Files in the same Directory
Remember that web resources are files in directories at the server. An XHTML document is web resource; at the client browser, it is a web page; while at the client browser, there are two instances of the file content: one in the file at the server and the other displayed at the browser. A sound file is a web resource; at the browser it is sound (music) that you hear. A video clip file is a web resource; at the browser, you see a moving image and hear sound. Just note that a video clip file has both moving image and sound, all in one unit. We shall use only the XHTML document web resource for our examples. While at the browser, there are two instances of a web resource content: one in a directory at the server and the other (exactly the same) at the client browser.
If the file you are looking for is in the same directory as the file (XHTML document) currently displayed at the browser, then for a hyperlink in the page at the browser to access the file you are looking for, all you need in the value (URL) of the href attribute is the file name. Let us say you have a page having a hyperlink and the page is currently displayed at the client browser. Let us assume that when you click this link the XHTML document to be downloaded and displayed is in the same directory at the server as the file currently displayed. Let us say that the name of the file to be downloaded is products.htm. In this case, the A element would be:
Products
So all you need as value of the href attribute is just the mane (including the extension .htm) of the file. You can also precede the file name with the left part of the complete URL, but this is not necessary since both files are in the same directory. Let us call this directory, the current directory.
What we have said in this section concerning the file name is applicable to other web resources.
Sub Directory to Current Directory
Here we talk about the case, where the file to be downloaded is in a sub directory to the current directory. In this case, for the value of the href attribute, precede the file name with the sub directory names that exist below the current directory. Image that the current directory has an immediate sub directory called, dir3. Also assume that the dir3 directory has an immediate sub directory called dir4. Assume that the file, products.htm is in dir4. To download (and automatically have displayed) the file, products.htm, you would have:
Products
You separate the directory names from one another with a forward slash. You do not begin with a forward slash. Beginning with a forward slash has a special meaning (see below). The last directory name is separated from the file name with a forward slash. You can precede the value of the href attribute with the rest of the left part of the URL, but this is not necessary.
Any Directory
For the value of your href attribute, you can identify the root directory by the forward slash, /. From the forward slash, you can type the path of any file. Assume that for the above situation, you had a directory called, dir1 just inside the root directory. Assume that inside dir1 you have dir2 and inside dir2, you have dir3.
Also assume that your current directory is dir3. Assume that when your link is clicked, it would display a file called, furniture.htm residing in dir1. Your link for the file in the current directory would be
Furniture
You can see how beginning the value of the href attribute with a forward slash, refers to the root directory (were you have the home page file). You can precede the start forward slash here with the left part of the complete URL, but that is not necessary.
Implementing a Hyperlink
By the word, Hyperlink, here, I am referring to a simple hyperlink as described above. I will use two simple XHTML documents (web pages) for the illustration. This is the first document:
Example
Products>/a>
The above code has a link. You can save the above code with a file name such as, one.htm. When the link is clicked, the file it has to display has to be residing in the current directory and has to be called, products.htm. To try the code, you can type (copy and paste) the following file, and save it in the same directory as the file one.htm with the name, products.htm.
Products
The products are found in this page.
This file is the second document mentioned above.
Jump Hyperlink
A Jump Hyperlink is my vocabulary for a hyperlink that when clicked, will take you to a different vertical position of the same page. To achieve this, the source anchor and destination anchor have to be on the same page. With the simple hyperlink, the source anchor is the A element of the current page and the destination anchor is a web resource.
With the Jump Hyperlink, the source anchor is an A element and the destination anchor is any XHTML element, both on the same page. However, here, the destination anchor element has an ID. This ID also has to be present in the source A element. Let us illustrate this with an example. Assume that you have a long web page. Assume that at the top of the web page, you have a menu list, and one of the list items is “The Computer”. Assume that down on the page, you have the computer details in a paragraph element. Assume the long file is called myPage.html.
The Paragraph element down below in the page would be something like:
Details of the Computer: Microprocessor: 4GHz, RAM: 256MB
Most XHTML elements can have an ID attribute as indicated in the paragraph element above (ID means IDentification). The purpose is to differentiate an element from another. For example it is possible for you to have two paragraph elements with the same content. The best way to differentiate them is with an ID. The value of the ID attribute must always be in quotes (single or double). The value must always start with a letter (
Above, the ID is “C1”. The value of the href attribute of the source anchor is a URL ending with what is called, the Fragment Identifier. In the above case, the URL is the shortened, myPage.html (we are dealing with the same page). This is followed by the special # character and then the ID, “C1”, of the Paragraph element. The ID after the # character is called the Fragment Identifier. The # character separates the fragment identifier from the URL in the href attribute value.
So for the Jump Hyperlink the source anchor should have a fragment identifier and the destination anchor should have an ID. The value of this ID is also the fragment identifier.
You can try the above rules with the following code:
Details of the Computer: Microprocessor: 4GHz, RAM: 256MB
/>
/>
The line break elements simply make the page long by adding blank lines.
Vertical Point in another Page
Some good news here: It is possible for you to click a link in one page and go to a particular vertical position in a different page. You still use the Jump Hyperlink technique, but here, the URL in the source anchor should be that of the different page. The XHTML element in the different page should have and ID value. In the current page, the fragment identifier of the source anchor should be this ID value.
That is it for XHTML Hyperlink Basics. It has been long ride. It was worth it. We take a break now and continue in the next part of the series.
