Learning Outcomes
On completion of this lesson you will know:
- The nature of hyperlinks
- The difference between internal and external hyperlinks
- How to open pages in a new tab
- Improve user experience
Hyperlinks
Introduction
Hyperlinks are the lifeblood of a web site. They allow the user to move easily from one part of the site to another. They are easily distinguished as they are normally blue underlined pieces of text. They can, however, appear also as buttons or menus, including drop down menus. In fact most things that can appear on a web page can be used as hyperlinks.
There are two types of hyperlinks:
- Those that take the user to different parts of the same page. We shall refer to those as internal hyperlinks.
- Those that take the user to another page. This new page could be part of the same web site or could be on a completely different website
Internal Hyperlinks
These are used in order to easily navigate to individual parts of a large document. They act somewhat like the contents page of a book. In order to use internal hyperlinks we also need to use another feature called bookmarks. Bookmarks are simply features that define an area of the web page which the browser can move to if requested. Thus our example will contain both hyperlinks and bookmarks. Bookmarks are also referred to as anchors.
For our example here we shall expand the page we created to demonstrate sidebars by adding two extra paragraphs to it detailing two other historical buildings. This will give us a more realistic example of the use of internal hyperlinks for quickly locating individual parts of a long web page.
<html>
<head>
<title>Hyperlinks</title>
<link href="Laying%20out%20Text.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<header>
<h1>Hyperlinks</h1>
</header>
<main>
<nav>
<ul>
<li><a href="#PlimmerHouse" title="This brings you to the section about Plimmer House">Plimmer House</a></li>
<li><a href="#MtVictoria" title="This brings you to the section about Mt Victoria">Mt Victoria Houase</a></li>
<li><a href="#GovernmentHouse" title="This brings you to the section about The old Government House">Government House</a></li>
<li><a href="#NairnCottage" title="This brings you to the section about Nairn Cottage">Nairn Cottage</a></li>
</ul>
</nav>
<h2>Connect to other web pages or parts of this page</h2>
<article id="PlimmerHouse">
<aside>
<img src="Boulcott St Cottage.jpg">
<span>Boulcott St. Cottage</span>
</aside>
<h3>Plimmer House</h3>
<p><a href="https://www.heritage.org.nz/the-list/details/225" title="This link takes you to the official Heritage New Zealand page on Plimmer House" target="_blank">Plimmer House</a> was registered under the Historic Places Act 1980. The following text is the original citation considered by the NZHPT Board at the time of registration.</p>
<p>One of the last examples of a small gentleman's residence built in central Wellington, Plimmer House was built in the early 1870s for Henry Eustace de Bathe Brandon. It was constructed by Scoular and Archibald, builders of the Government Buildings. In contrast to the Renaissance Revival style of the government Buildings, Plimmer House quietly echoes the Gothic Revival style with its steeply pitched roof and tower. Thus the house displays the versatility of Scoular and Archibald as builders.</p>
<p>The house was subsequently acquired by Charles Plimmer - hence the current name of the house.</p>
<p>As a piece of townscape its smallness in scale is offset by the adjacent high-rise buildings which is so much a part of the twentieth century.</p>
<p>Below is the Heritage New Zealand data on this house.</p>
<table>
<caption>NZ Heritage List: Plimmer House</caption>
<thead>
<th scope="col">Category</th><th scope="col">Value</th>
</thead>
<tbody>
<tr><td>List Entry Status</td><td>Listed</td></tr>
<tr><td>List Entry Type</td><td>Historic Place Category 1</td></tr>
<tr><td>Public Access</td><td>Private/No public access</td></tr>
<tr><td>List Number</td><td>225</td></tr>
<tr><td>Date Entered</td><td>26 November 1981</td></tr>
<tr><td>Date of Effect</td><td>26 November 1981</td></tr>
</tbody>
</table>
<a href="#">Go to top</a>
</article>
<article id="MtVictoria">
<aside>
<img src="Mt%20Vic%20House.jpg">
<span>A house in Majoribanks St., Mt. Victoria</span>
</aside>
<h3>Mt Victoria House</h3>
<p><a href="https://www.newzealand.com/nz/feature/mount-victoria/" title="This link takes you to 100% New Zealand's page about Mt Victoria" target="_blank">Mount Victoria</a> provides stunning 360 degree views of Wellington City, the harbour and the ocean to the south. Car and bus access is via Alexandra Road, while walking tracks lead from Oriental Parade and Majoribanks Street.</p>
<p>Legend has it that Wellington harbour, originally a land-locked lake, was home to two large and very active taniwha (sea monsters). One taniwha forged a passage to the open sea creating the entrance to the harbour. The second, named Whataitai, tried a different route, became stranded and died. It is believed that Tangi-te keo (Mt Victoria) was named after the soul of Whataitai.</p>
<p>Mount Victoria is part of the Wellington Town Belt, land set aside in 1841 by the colonial New Zealand Company for a "public recreation ground for the inhabitants of Wellington". It's a great place for walking, jogging and mountain biking.(100% New Zealand)</p>
<a href="#">Go to top</a>
</article>
<article id="GovernmentHouse">
<aside>
<img src="Government%20House.jpg">
<span>Government House</span>
</aside>
<h3>Government House</h3>
<p><a href="https://www.heritage.org.nz/the-list/details/37" title="This link takes you to the official Heritage New Zealand page about the old Government House" target="_blank">Government Buildings</a> is celebrated as one of New Zealand's most important historic buildings, and as an icon of Wellington City. It was built entirely of timber, an astonishing achievement in the 1870s, and remains probably the world's largest timber office building. It was Colonial Architect William Clayton's finest achievement. Government Buildings was constructed to house almost the entire Wellington-based public service, and its completion coincided with the end of provincial government in New Zealand. Its restoration in 1994-96 was a landmark in government-initiated heritage conservation. The restored building is a key feature in the Government Centre Conservation Area, an historic reserve in its own right, and a popular tourist destination.</p>
<a href="#">Go to top</a>
</article>
<article id="NairnCottage">
<aside>
<img src="Nairn%20St%20Cottage.jpg">
<span>Nairn St Cottage</span>
</aside>
<h3>Nairn St Cottage</h3>
<p><a href="https://www.heritage.org.nz/the-list/details/1444" title="This link takes you to the official Heritage New Zealand page about the Nairn Cottage" target="_blank">The Nairn Street Cottage</a> is historically significant as it is believed to be the oldest identified residential property in central Wellington. It is a rare example of a form of housing once typical throughout the country and prevalent in Wellington in the late nineteenth century. The house retains most of its original character and is in an excellent condition. It is also noteworthy as Wellington's first house museum and reflects the national trend for the creation of such museums between 1960 and1980. The house is particularly interesting as one of the few Wellington buildings saved from development on heritage grounds during this period. The juxtaposition with modern housing and council flats is an eloquent reminder of its near brush with demolition. The cottage is physically significant for the insight it provides into early colonial building techniques. The retention of original wallpaper, and the inclusion of items such as William Wallis' tool chest, add to the authenticity of the building and enhance its value as a historic resource. The collection of period furniture adds to the cultural value of the building. The cottage is a popular tourist attraction and a valuable educational tool.</p>
<a href="#">Go to top</a>
</article>
</main>
<footer>
<p>Heritage New Zealand. (n.d.). Plimmer House. Retrieved from Heritage New Zealand Web site: https://www.heritage.org.nz/the-list/details/225</p>
<p>100% New Zealand. (n.d.). Mt Victoria. Retrieved from 100% Pure New Zealand: https://www.newzealand.com/nz/feature/mount-victoria/</p>
</footer>
</body>
</html>
Before we begin explaining our hyperlinks let us revise a little about the structure of our newly expanded web page. It contains details of three buildings in the Wellington area. The detials of each building is enclosed inside one article container.
- The first, detailing Plimmer House, spans lines 20 to 46
- The second, detailing Mt Victoria, spans lines 47 to 57
- The third, detailing the old government house, spans lines 58 to 66
- The fourth, detailing Nairn Cottage, spans lines 67 to 75
If we examine line 20, its code is <article id="PlimmerHouse"> This means that the entire article is now identified by the identity of "PlimmerHouse". Also notice that "PlimmerHouse" has no spaces. This is because HTML does not allow spaces in the value of the attribute id.
Also notice that the article elements at lines 47, 58 and 67 are given id values of "MtVictoria", "GovernmentHouse" and "NairnCottage". Thus our four article elements now have unique id values so that each can be identifie from other parts of the page.
Why do we need to identify them? Recall that we are going to use hyperlinks to jump to each of those article elements. In this case the hyperlink needs to know the id of the article element it is to jump to.
Now let us look at those hyperlinks.
The hyperlinks are specified inside a nav element that spans lines 11 to 18. This is the first time we have come across the nav and so we need to say something about it. Firstly it's name is an abbreviation for "navigation". It is a container just like article, aside etc. but is used for controlling hyprlinks. Our four hyperlinks are defined inside it at lines 13 to 16. As you can see the hyperlinks are contained inside the <li>..</li> pairs.
Let us examine the first one at line 13. Inside the <li>..</li> pair we have the the <a> which is the opening tag for the hyperlink. We are giving values to two of its atributes: href and title. The href's value is "#PlimmerHouse" which is the id of our first article element. What this means is that if the user clicks on the hyperlink focus will jump to the block whose id "PlimmerHouse. Finally there is a "#" before the id's name. This is to tell the browser that the destination of the hyperlinks is inside inside the current document and not an external filename. Without the "#" the browser assumes that we are referring to an external file.
The other attribute title is an enhncement for the user interface. If you hover over the hyperlink on the web page with the mouse, the text assignned to the attribute is displayed in a popup window on the page. This is used to give the user a more detailed information about the hyperlink.
Once we close the opening tag for the hyperlink we enter the main text for the hyperlink - "Plimmer House" in this case and then we enter the closing tag.
The explanation we have given about line 13 also applies to lines 14, 15 and 16 and thus there is no need to describe them.
Fig 1 above shows what our hyperlinks would look like without any formatting. They will work, i.e. clicking on any one of them will move the focus to the block whose id value corresponds to that specified in the hyperlink. However they look like an unordered list, which is not what we want.
nav ul li{
display: inline;
/*margin-left: 20px*/;
}
nav ul li a{
font-weight: bold;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
}
nav ul li a:hover{
background-color: black;
color: white;
}
We would like our hyperlinks to stretch in a hourizontal line across the top of the page. By default the display attribute of li is block which is why they appear stacked vertically in Fig 1. To get them to stretch horizontally we need to change the display attribute to inline which is done at lines 73 and 74 of listing 2.
With this amount of styling the hyperlinks look as in Fig 2 below.
Although they are now stretched horizontally they are stilled underlined and there is no proper spacing between the different hyperlinks. We need extra formatting that will do the following:
- Change the font weight to bold
- Remove the underlining
- Pad both left and right sides of each hyperlink by 10 pixels in order to give them proper spacing
All of this is accomplished at lines 77 to 81 of Listing 2.
A final embellishment is that if the user hovers over a hyperlink with the mouse, the colours of that hyperlink will reverse, i.e. the background becomes black and the text colour will be white. This is accomplished by the styling code at lines 83 to 85.
The code at line 83 can be translated into English as "If the mouse hovers over the <;a>; element which is inside the <;li>; element, which is inside the <;ul>; element, which is itself inside the <nav> element, then change the background colour of the text to black and the colour of the text itself to white.
In Fig 3 we see the result of the formatting specified in the CSS file from Listing 2, including reversing the colours when a hyperlink is hovered over. Also notice that the value of the title for Nairn Cottage which is specified at line 16 of listing 1 also appears.
Go to topExternal Hyperlinks
In our code in Listing 1 we have four examples of external hyperlinks. These are at lines 26, 53, 64 and 73. Line 26 is reproduced below.
<a href="https://www.heritage.org.nz/the-list/details/225" title="This link takes you to the official Heritage New Zealand page on Plimmer House" target="_blank">Plimmer House</a>
In this case the hyperlink tag <a> has three attributes with values. We have encountered the first attribute href already but this time it is referencing a target outside of the current web page. We know this from the fact that its value begins with "https://www." and that it does not begin with a "#". The title attribute should also be familiar to use, i.e. it describes the page that the hyperlink links to. The attribute that we have not met before is target. This simply specifies how the browser will load the target file. If the attribute is omitted then the page is loaded into the current tab, whereas if the target attribute is given a value of "_blank" then the page is loaded into a new tab.
Go to top