The power of the web is the ability to create hypertext links to information that is related. This other information may be other web pages, graphics, sounds, digital movies or more.
The World Wide Web uses an addressing scheme known as URLs, or Uniform Resource Locators (sometimes also called "Universal Resource Locators"), to indicate the location of these items. The hypertext links are known as anchors.
The first step of "anchoring" is to create a hypertext link to a second web page. These links are called "local" because they reside on the same computer as the working document (they do not have to access the Internet to find these pages). This document, if you are using the
Link to Local Files
The simplest and most common anchor link is one that opens another HTML
file in the same directory as the presently displayed web page. The HTML
format for doing this is:
The filename must be another HTML file. Whatever text occurs after the first <a href=...> and before the closing </a> symbols will be the "hypertext" that appears underlined.
Anchor Link to a Graphic
Earlier I explained how to display an "inline" graphic that would
appear in your web page. With the anchor tag, you can also create a
link to display a graphic file. When the anchor link is selected, it
will download the image file and display the image by itself, an empty
page or your web browser should automatically launch an external application
that can display the image.
The anchor link to this graphics file is the same as a standard
link to another page except that it calls for a .gif or .jpg file in the
same directory/folder as the HTML document linking it. The format for
creating a hypertext link to a graphic is :
where filename.gif is the name of a GIF (or .jpg) image file. This loads the graphic.
Linking to a site on the Internet combines the knowledge you have gained to create a link to a local file and incorporating the use of URLs within this link.
A Uniform Resource Locator (URL) is what the WWW uses to find the location of files and documents from computers on the Internet. On your web browser screen, the URL for a document is typically displayed in the upper part of the Web browser window. A URL includes:
- an identifier for the type of Internet server;
- an Internet address; and
- a file path to the particular item of interest.
The URL is what you will need to build a link from a web page that you are creating to connect to some other piece of information available on the Internet.
The full HTML format for an anchor link to an item on the Internet
is:
where URL is the full Uniform Resource Locator, in quotes, the address for the Internet site where you want to send the viewer. The string Text to Activate Link is what will show up as hypertext in your web browser. When a viewer clicks on this hypertext, the web browser will link them to the Internet site indicated by the URL. Know that a URL can be a link to another World Wide Web (WWW) server, Gopher server, FTP site, or any text, graphic, sound, video file on these servers.
The Named Anchor
A named anchor is a hidden reference marker for a particular section
of your HTML file. This might be used to link to a different section
of the same page if it is large page, or to a marked section of another
page. For example, on this page you are viewing, I have created a hidden marker
called "top" that marked the top of this particular page. The link to this
hidden marker is at the bottom of the page, and can be used when you are
asked Click on...here (Top) to return to the
top of document. This anchor link connects this section of the
document to the top of the page. Once you click on a link to this named
anchor, your web browser will jump to the top of the web page.
There are two parts that make up the HTML format for creating a
named anchor, they are:
This is a normal link, but as you see the link is to the same page but to the #top name. The #top is the anchor where it should go. The a href section can be placed anywhere on a document and it will search the document for top and go there when clicked on.
As you can see by the format of a named link, the reason of having the whole documentname.html part is so that you can use named links to jump into any area of a different html document. For example :
<a href="index.html#top">top</a>
<a href="page1.html#middle">middle</a>
Both have links named top, if they are on a page called page2.html, then the first link will take you to the top of the index page and the second link will take you to the middle of page 1.
Graphic Links Well, this is the last link part, and by now you should have gotten used to seeing the structure of how links work. While you have been surfing the WWW, I'm sure you have seen many links that were activated by clicking on a graphic. As impressive as this seems it isn't that hard to do. By now you should know how to load graphics and make normal links (or at least have seen the code for both). To have a graphic link the HTML code for it is :
<a href="less-7.htm#top"><img src="world.gif" alt="Link to Top" width=90 height=90></a>
This is a link to the top of the page
Looks big doesn't it. But break it down to it's single components, it's a normal link with it's <a href=...> </a> but instead of text between the <a href> and </a> commands there is the html code for loading a picture (<img src=....>). Simple really.