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
What are 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.
Historical Buildings
For our example here we shall build a web page dealing with four historical buildings in Wellington. 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>
Explore the structure of the file
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;
}
Styling the hyperlinks
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
What are external hyperlinks
External Hyperlinks take the user to another web page instead of a location in the same page. The destination page could be on the same web site or on a completely different web site. The external hyperlinks are specified in the same way as for internal hyperlinks except that the value of the href attribute is missing the leading "#".
<a href = "#introduction">Introduction</a>In the above example the hyperlink will take the user to the block whose id is "introduction". The fact that the id name is preceded by a "#" means that the block in question is on the same page.
<a href = "introduction.com">Introduction</a>
In the above example the hyperlink will take the user to the web page whose URL is "introduction.com". The fact that the href value is missing the "#" means that the destination page is on a different web page.
For our example we shall create a small website on New Zealand volcanoes. Each volcano will have its own page and all of the pages will be linked together with external hyperlinks. We shall also use external hyperlinks to link our pages to other pages not on our own site.
Mount Ngauruhoe
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mount Ngauruhoe</title>
<link rel="stylesheet" href="volcanoes.css" type="text/css">
</head>
<body>
<header>
<h1>Mount Ngauruhoe</h1>
<nav>
<a href="Mt Ruapehu.html">Mount Ruapehu</a>
<a href="Mt Taranaki.html">Mount Taranaki</a>
</nav>
</header>
<main>
<img src="Ngauruhoe.jpg" alt="Mount Ngauruhoe" style="width: 512px;">
<p>Mount Ngauruhoe, located in New Zealand’s central North Island, is a striking and iconic stratovolcano within Tongariro National Park. Rising to a height of 2,291 meters (7,516 feet), it is the youngest and most active vent of the larger Tongariro Volcanic Complex. Known for its near-perfect conical shape, Ngauruhoe is often mistaken for a standalone volcano but is part of the interconnected volcanic system of the park.</p>
<p>Ngauruhoe holds deep cultural significance for the Māori people, who regard it as a sacred ancestor. Its name translates to “throwing hot stones,” reflecting its history of eruptions. The volcano erupted frequently during the 19th and 20th centuries, with the most recent significant activity occurring in 1975.</p>
</main>
<footer>
<p><a href="https://en.wikipedia.org/wiki/Mount_Ngauruhoe" target="_blank">Ngauruhoe - Wikipedia</a></p>
<p><a href="https://www.gns.cri.nz/assets/Our-Science/Subfiles/Natural-Hazards-and-Risks/Subfiles/Volcanoes/Volcano-Fact-Sheet-Ngauruhoe.pdf" target="_blank">Ngauruhoe Scientific facts</a></p>
© Guillaume Piolle
</footer>
</body>
</html>
Listing 3 above is the code for our first page on Mount Ngauruhoe. It is a simple page with an image of the volcano and two paragraphs of text. Its body is divided into the three classic divisions; header spanning lines 9 - 14, main spanning lines 15 - 19 and footer spanning lines 20 - 24.
We are introducing two new items here: the nav block that spans lines 10 - 13 and four hyperlinks at lines 11, 12, 21 and 22. We shall begin with the nav block.
A nav block is a container which contains hyperlinks. The <nav> tag gives meaning to navigation areas, making it clear to developers that the enclosed content is for navigation, i.e. that it contains only hyperlinks. Search engines understand <nav> as a container for important site links, which can improve the indexing of the website’s structure.
Our nav block contains two hyperlinks, one to Mount Ruapehu and the other to Mount Taranaki. The hyperlinks are contained inside the nav block and are enclosed in the <a> tags. The href attribute of the <a> tag specifies the destination of the hyperlink. In this case the destination is the file "Mt Ruapehu.html" and "Mt Taranaki.html". The text between the opening and closing <a> tags is the text that will appear on the web page. In this case the text is "Mount Ruapehu" and "Mount Taranaki".
We have two extra external hyperlinks at lines 21 and 22. Those are links to pages on other websites. In practice these could also be enclosed in a separate nav block. It is a common practice in web design to put hyperlinks to the pages on our own site into the header and to put links to pages on other sites at the end of our main block or else in the footer block.
html{
background-color: #f0f0f0;
font-family: Verdana, sans-serif;
margin: 0;
padding: 0;
}
header, main, footer{
display: block;
margin: 0 auto;
width: 800px;
padding: 10px 20px;
}
header{
background-color: #444;
color: yellow;
text-align: center;
}
header nav a{
text-align: center;
color: yellow;
}
footer{
background-color: #444;
color: white;
text-align: center;
}
footer a{
color: white;
}
main{
background-color: beige;
}
img{
display: block;
margin: 20px auto;
}
Listing 4 above is the CSS file for our first page on Mount Ngauruhoe. It contains styling for the html, header, main, footer and img elements. The html element is styled to have a background colour of #f0f0f0 and a font-family of Verdana. The header, main and footer elements are styled to have a display of block, a margin of 0 auto, a width of 800px, and padding of 10px 20px. The header element is styled to have a background colour of #444, a text colour of yellow, and text aligned to the center. The footer element is styled to have a background colour of #444, a text colour of white, and text aligned to the center. The main element is styled to have a background colour of beige. The img element is styled to have a display of block, a margin of 20px auto.
Fig 4 above shows the file produced by the code in Listing 3 after it has been styled by the CSS code in Listing 4.
Mount Ruapehu
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mount Ruapehu</title>
<link rel="stylesheet" href="volcanoes.css" type="text/css">
</head>
<body>
<header>
<h1>Mount Ruapehu</h1>
<nav>
<a href="Ngauruhoe.html">Mount Ngauruhoe</a>
<a href="Mt Taranaki.html">Mount Taranaki</a>
</nav>
</header>
<main>
<img src="512px-Mount_Ruapehu_October_9,_2023_(cropped).jpg" alt="Mount Ruapehu" style="width: 512px;">
<p>Mount Ruapehu, located in New Zealand’s central North Island, is the country’s largest active stratovolcano and a prominent feature of Tongariro National Park, a UNESCO World Heritage site. Standing at 2,797 meters (9,177 feet), it is the tallest peak in the North Island and a popular destination for adventurers and nature enthusiasts.</p>
<p>The volcano is home to three major ski areas—Whakapapa, Tūroa, and Tukino—making it a premier location for winter sports. Its crater lake, Te Wai ā-moe, adds to its allure, serving as a stunning yet volatile reminder of the mountain's geothermal activity. The lake's temperature and water level fluctuate with volcanic activity, providing scientists with valuable data on the volcano's behavior.</p>
<p>Ruapehu's eruptions have shaped the landscape and influenced local ecosystems. The most recent significant eruptions occurred in 1995 and 1996, creating lahars and ash clouds that impacted the surrounding areas. Despite its active status, Mount Ruapehu remains a beloved destination for outdoor enthusiasts, offering hiking, skiing, and breathtaking views of New Zealand's volcanic terrain.</p>
</main>
<footer>
<p><a href="https://www.visitruapehu.com/explore-the-region/mount-ruapehu" target="_blank">Visit Mt Ruapehu</a></p>
<p><a href="https://en.wikipedia.org/wiki/Mount_Ruapehu" target="_blank">Mt Ruapehu - Wikipedia</a></p>
<p><a href="https://www.mtruapehu.com/" target="_blank">Welcome to Mr Ruapehu</a></p>
<p><a href="https://commons.wikimedia.org/wiki/File:Mount_Ruapehu_October_9,_2023_(cropped).jpg" target="_blank">Geoff McKay</a>, via Wikimedia Commons</p>
</footer>
</body>
</html>
Listing 5 above is the code for our second page on Mount Ruapehu. It is similar to the first page with an image of the volcano and three paragraphs of text. The text is a brief description of the volcano and its cultural significance. The page also contains a navigation bar with hyperlinks to the other two volcanoes in our series. Due to its strong similarity with Listing 3 there is no need for further explanation.
The above image shows the output from Listing 5. Again it has been styled by the CSS code in Listing 4.
Mount Taranaki
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mount Taranaki</title>
<link rel="stylesheet" href="volcanoes.css" type="text/css">
</head>
<body>
<header>
<h1>Mount Taranaki</h1>
<nav>
<a href="Ngauruhoe.html">Mount Ngauruhoe</a>
<a href="Mt Ruapehu.html">Mount Ruapehu</a>
</nav>
</header>
<main>
<img src="Mount_Taranaki.jpg" alt="Mount Taranaki" style="width: 512px;">
<p>Mount Taranaki, also known as Mount Egmont, is an iconic stratovolcano located on New Zealand’s North Island. Standing at 2,518 meters (8,261 feet), it is the second tallest peak in the region and a prominent feature of Egmont National Park. The mountain is known for its symmetrical cone shape and lush surrounding forests, making it a popular destination for hikers and nature enthusiasts.</p>
<p>Taranaki is considered one of the most symmetrical volcanic cones in the world, with a near-perfect circular base and gently sloping sides. The mountain is sacred to the local Māori people, who believe it to be a personification of the land and a significant cultural landmark.</p>
<p>The volcano has a history of eruptions, with the most recent significant activity occurring in the 1850s. Despite its active status, Mount Taranaki is a popular destination for outdoor activities, including hiking, skiing, and sightseeing. The surrounding national park offers a range of trails and scenic viewpoints, providing visitors with a unique opportunity to explore New Zealand’s volcanic landscape.</p>
</main>
<footer>
<p><a href="https://en.wikipedia.org/wiki/Mount_Taranaki" target="_blank">Mt Taranaki - Wikipedia</a></p>
<p><a href="https://www.wildtaranaki.co.nz/our-adventures/mount-taranaki/" target="_blank">Taranaki Adventures</a></p>
<p><a href="https://taranakimounga.nz/nga-mounga/history/" target="_blank">Mt Taranaki - History</a></p>
<p><a href="https://commons.wikimedia.org/wiki/File:Mount_Taranaki,_New_Zealand.jpg" target="_blank">Russell Street</a>, via Wikimedia Commons</p>
</footer>
</body>
</html>
Again Listing 6 is identical in structure to Listing 3 and listing 5 and again there is no need for any further explanation.
Fig 4 above shows the output from Listing 6. Again it has been styled by the CSS code in Listing 4.
Summary
Hyperlinks are an essential part of web design. They allow the user to navigate through the web page and to other web pages. They are specified using the <a> tag and the href attribute. The href attribute can take two types of values: internal and external. Internal values are those that take the user to a location within the same page. External values are those that take the user to a location on a different page. The id attribute is used to identify the location in the same page that the hyperlink is to take the user to. The title attribute is used to give the user more information about the hyperlink. The nav tag is used to contain hyperlinks and the li tag is used to contain the hyperlinks themselves. The display attribute is used to stretch the hyperlinks horizontally across the page. The font-weight attribute is used to make the text bold. The text-decoration attribute is used to remove the underlining from the text. The padding attribute is used to give the hyperlinks proper spacing. The :hover pseudo-class is used to change the colours of the hyperlinks when the mouse hovers over them.
External hyperlinks are used to take the user to a location on a different page. They are specified in the same way as internal hyperlinks except that the value of the href attribute is missing the leading "#".
Our example was a small website on New Zealand volcanoes. Each volcano had its own page and all of the pages were linked together with external hyperlinks. External hyperlinks were also used to link our pages to other pages not on our own site.
Go to topRevision
Multi choice
-
What is the primary purpose of hyperlinks in web design?
- To create graphical elements
- To connect different parts of a website or external sites
- To embed multimedia content
- To style web page elements
-
Which tag is used to create a hyperlink in HTML?
- <link>
- <a>
- <nav>
- <href>
-
What is the difference between internal and external hyperlinks?
- Internal links use the <link> tag, external links use the <a> tag
- Internal links navigate within the same page, external links navigate to other pages
- Internal links use absolute URLs, external links use relative URLs
- There is no difference between them
-
What attribute is required to specify the destination of a hyperlink?
- src
- id
- href
- name
-
What is the function of the "title" attribute in a hyperlink?
- It specifies the file type of the linked document
- It displays additional information about the link when hovered over
- It styles the link's appearance
- It sets the URL of the hyperlink
-
Which HTML element is used as a container for navigation links?
- <header>
- <nav>
- <footer>
- <section>
-
What CSS property is used to arrange hyperlinks horizontally in a navigation bar?
- display: block;
- display: inline;
- float: left;
- text-align: center;
-
Which pseudo-class is used to style hyperlinks when hovered over with a mouse?
- :hover
- :link
- :visited
- :focus
-
What is the purpose of the "#" symbol in the href attribute of a hyperlink?
- To indicate the link is external
- To specify an anchor within the same page
- To denote a placeholder link
- To signify a relative URL
-
How is the visual styling of hyperlinks typically modified in CSS?
- By changing the font-family property
- By using the text-decoration property
- By adjusting the background-color property
- By modifying the width property
Fill in the blanks
- Hyperlinks are typically created using the ______ tag in HTML.
- The attribute used to specify the destination of a hyperlink is ______.
- Internal hyperlinks use the ______ symbol to indicate the destination is within the same page.
- The ______ attribute in a hyperlink provides additional information that appears when the user hovers over it.
- The ______ element is commonly used to contain navigation links on a webpage.
- The CSS property ______ is used to display hyperlinks in a horizontal layout.
- When a user hovers over a hyperlink, the ______ pseudo-class is used to apply styling.
- External hyperlinks do not include the ______ symbol in the href attribute.
- The HTML attribute ______ is used to identify specific parts of a webpage for internal navigation.
- To remove the underline from hyperlinks, the CSS property ______ is used.
Assignment
Part 1
For this part of the assignment, you will demonstrate your understanding of hyperlinks by creating a simple HTML webpage and applying CSS to enhance its appearance and usability.
Begin by creating a new HTML file named hyperlinks.html. Design the page to include a navigation section using the nav> element. Inside the nav> block, add four hyperlinks. Two of these links should be internal, directing the user to different sections within the same page, and the remaining two should be external, linking to your favorite websites. For each hyperlink, include a title attribute that provides additional context when a user hovers over it.
Next, create a CSS file named styles.css to style your hyperlinks. Link this stylesheet to your HTML file. In your CSS, ensure that the hyperlinks in the navigation section are displayed horizontally rather than vertically. Remove the default underline styling by using the text-decoration property and make the links bold using font-weight. Add some interactivity by changing the background color of the links when a user hovers over them with their cursor. Additionally, provide proper spacing around each link by applying padding of at least 10 pixels to both sides.
By the end of this task, you will have a visually appealing and functional webpage that demonstrates your ability to implement and style hyperlinks effectively. Ensure your files are correctly named and linked so the styles are applied to the webpage as intended.
Part 2
For the second part of the assignment, you will create a multi-page website that explores a topic of your choice. Each page should focus on a different aspect or subtopic related to the main theme. Use hyperlinks to navigate between the pages and provide a seamless browsing experience for users.
Go to top