Hyperlinks and Images

All About Links

• On day one we learned quite a bit about how to create an HTML page and serve it on the web. However, this is really only the beginning of web publishing. The true magic of the web begins to manifest itself only when you begin to explore the world of links.
• A link is a bit of text or image that the user may click on in order to be transported somewhere else on the web.
• For example, if you want to go to the Electric Eye Homepage, click here. If you do so, you will notice that this page will disappear and the Electric Eye Homepage will appear in its place. (You can use the browser's "back" button to get back here.)
• Notice that links are typically identified by being underlined, being in a color other than that of the regular text, and being sensitive to mouse over events. That is, when you move your mouse over the link, it changes its appearance. When you see this change in pointers, you know that if you click your mouse, you will go somewhere. (We will discuss coloring of links tomorrow).
• Links allow you to tie multiple documents together into a "web site" or allow you to reference other web sites in other corners of the web.
• Links also allow you to link from one place in a document to another. For example, if you click here, you will be transported to the very top of this page (provided your monitor is not so large that it can fit the whole page on one screen).

What is a URL

• Before we get into links themselves, it would be wise to make sure we understand what a URL is, because URL's are basic to creating links.
• A URL (Universal Resource Locator) is the most basic information about where a web page is located on the web. It includes information about which web server the page is stored on, in which directory it is located in, its name and the protocol we will use to fetch it.
• Thus a URL will look like the following:
  
  

  http://www.eeye.com.sg/Tutorials/Web_design/index.html

  • In this case, we will use the HTTP protocol to contact the server named "www.eeye.com.sg". We will tell that server that we are looking for a document called "index.html" that is contained in the directory "Tutorials/Web_design".

Linking to Another Document

• So how do you create a link?
• To create a link, you will use the "anchor" tag that uses the standard opening and closing format such as <A></A>.
• However, you will never use the anchor tag by itself.
• Rather, you will always include the HREF attribute that defines the location that the anchor points to. You will also include some text or image that will be "clickable".
• Thus, to create a link to The Extropia Homepage, we use the following anchor tag:

• The previous anchor tag appears like this on the web... Web Design Library
• Notice that the value for the HREF attribute is a URL and that the words "Electric Eye" were used as the text that should be clickable. If you click on the text, you will be transported to the Electric Eye Homepage.

Internal Links

• So how do you create a link that points to a location inside of a document?
• Just as we did when we were creating links to another web page, we will use the anchor tag with an HREF attribute. However, rather than setting the HREF value to a simple URL, we will define a location within a page to link to.
• An "internal anchor" uses a number sign and an internal page keyword to define a location. It looks something like this...

• Of course, how does the web browser know what "#top" means?
• Well, we have to let it know with HTML code. Specifically, we will provide an anchor to link to by using the NAME attribute in the anchor tag.
• The NAME attribute specifies a location within a page. Thus, for example, if we wanted the internal anchor in the previous example to work, we would need to put the following anchor at the actual top of the document with the internal link:

• Try it out, by clicking here. We have included the example code in this very document.
• Of course, you are not limited to linking from one part of a page to another. You can also link to a part of another page by including a URL within the HREF attribute. For example, the following anchor tag would link to the bottom of the page:

Email Links

• Another neat trick that you can do with anchors is to provide an email link.
• As we mentioned earlier, the anchor HREF attribute takes any form of URL as its value. Thus, you could put an ftp address, a gopher address, or even a mail address.
• An email address takes the following form:

• The previous code, would create a hyperlink that would open up a mail program when the user clicked on it. Try it out....

mail me

Relative and Absolute Links

• It is important to note that there are two ways you can reference a document within an HREF attribute. You can reference it absolutely or relatively.
• An absolute link defines the location of the document absolutely including the protocol to use to get the document, the server to get it from, the directory it is located in, and the name of the document itself.
• An anchor of this type will look like those we have seen so far...

• A relative link on the other hand takes advantage of the fact that the server knows where the current document is. Thus, if we want to link to another document in the same directory, we don't need to write out the full URL. All we need to use is the name of the file.
• For example, if we are looking at the index.html file addressed in the previous example, and we want to link to a file called page1.html in the same directory (Tutorials), we need not write out the entire URL. In fact, either of the following anchor tags will work:

• Similarly, if you wanted to link to a document in the directory "Tutorials/Chapter2/Part1" called "page23.html, you could use the following anchor:

• This is because the web server will remember the "http://www.eeye.com.sg/Tutorials" part for you.
• One little technical note here. When you are creating a relative link to a directory under your current one, be careful not to put an initial backslash before the referenced directory. Otherwise, the server will think you are referencing the "root" directory. By example, the following link would be wrong:

Exercise Five

• Okay, now you should open up your HTML file from yesterday and create some links. Why not add a list of a few of your favorite web sites? Also, throw in a link to your email address.