Enriching Web Pages: Adding Links
In this lesson, we will see how to add links to our webpage. Let's begin!
We'll cover the following...
Adding links
No doubt, the power of the World Wide Web is in links that allow web pages to link to other pages. The HTML <a> tag adds this power to pages.
You can surround parts of the HTML markup to link them to other pages, or to bookmarks within your page, as Listing below demonstrates:
Listing: Linking HTML markup to other pages
<!DOCTYPE html>
<html>
<head>
<title>Using links</title>
<style>
.rectangle {
width: 200px;
height: 100px;
margin: 100px 20px;
text-align:center;
color: white;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
</style>
</head>
<body>
<p>
Go to <a href="https://en.wikipedia.org/wiki/HTML">
This page</a> for more info about HTML.
</p>
<p>
Open this
<a href="https://en.wikipedia.org/wiki/Markup_language"
target="_blank">link</a> in a new tab
</p>
<ul>
<li><a href="#red">Red</a></li>
<li><a href="#green">Green</a></li>
<li><a href="#blue">Blue</a></li>
</ul>
<div id="red" class="rectangle red">Red</div>
<div id="green" class="rectangle green">Green</div>
<div id="blue" class="rectangle blue">Blue</div>
</body>
</html>
The output of the above can be found at the link next to the <a> tag that surrounds the HTML markup. When the ...