Hyperlinks
Hyperlinks are one of the fundamental ideas behind the World Wide Web and are one of the main reasons why it became so successful. A hyperlink is a pointer from a webpage to another file on the World Wide Web. Although the hyperlink’s destination is usually another webpage, it can also be a multimedia file, script or download.
Hyperlinks can be defined for either text or images (see Chapter 5) on a webpage. Web browsers usually underline text hyperlinks and render them in a specific colour (usually blue). When a pointing device passes over a hyperlink, the cursor usually changes to a picture of a pointing hand.
URLs
Every file on the World Wide Web can be defined using a unique address called a Uniform Resource Locator (URL). When you insert a hyperlink into a webpage, the destination of the hyperlink is defined as a URL. The diagram below shows the basic layout of a sample URL:
The first part of a URL is the protocol. This tells the Web browser how to handle the file. The protocol is separated from the rest of the URL by a colon. Examples of protocols include:
- ftp Specifies a file on an FTP server.
- mailto Specifies an email address.
- file Specifies a file on a computer connected to a network.
- http Specifies a file on the World Wide Web.
The network location section follows. It identifies the Internet server on which the file is located. This is followed by the path which specifies the folders that contain the file. Finally the actual file’s name is specified. If it is not specified, a default page is returned (usually named index.html).
If a URL points to a webpage, it can also have internal links that makes the browser display a certain section of the webpage once it loads.
The Anchor Element
To create a hyperlink, use the anchor element ( <a> ) together with the href= attribute. The anchor has an end element. The content between the start and end element is is what will be clicked to go to that file. The example below shows a hyperlink to Multimedia Australia's website:
<a href="http://www.mmaus.com/">Click here to visit Multimedia Australia's website!</a>
Of course you don't need to specify a full Web address. You can create a hyperlink to an individual webpage located in the same directory. This is demonstrated by the following example:
<a href="contact.htm">Click here to contact us!</a>
Hyperlinks don't just have to be text-based. You can allow users to click on images instead. To do this, simply specify an image between the anchor start and end elements rather than specifying text. You will learn how to insert images into your webpages in the next chapter.
Internal Links
You can create links within the same page. In this case, if a visitor clicks the link, the browser will move to a specific section of the page.
To create internal links, you first need to identify the different parts of your webpage where the browser can link to. This is achieved using the name= attribute. For example:
<a name="Section1">This is section 1</a>
If you now wanted to link to section 1, you would create the following hyperlink:
<a href="#Section1">Link to section 1</a>
Notice that the internal link is defined using a hash character (#).
Combining Internal and External Links
You can combine internal and external links. The following example links to a specfic webpage and then moves the browser window to the appropriate section of that page:
<a href="contact.htm#User1">Link to section 1</a>
|
