Hyperlinks
Users can navigate from page to page by clicking hyperlinks, or links for short.
Links can be applied to any element by opening an <a> tag before the element and closing the </a> tag after the element.
Links can also be applied to parts of a paragraph, individual list items or single words.
Key Points
Wrapping an element in <a> tags makes it a link to another page.
Inside the opening <a> tag you must set what page the link goes to.
Hyperlinks can be applied to a range of elements.
Adding a simple Hyperlink
The following code adds a hyperlink back to the home page (home.html).
The text that will appear on the page is ‘Back to Home’.
<a href="home.html">Back to Home</a>
Adding a hyperlink to elements
Below shows three examples of hyperlinks being added around elements.
Each hyperlink starts before the element and ends once the element has closed its tags.
<a href="page.html"><h2>Prompt To Page</h2></a>
<a href="page.html"><img src="image-name.png></a>
<ol>
<li>Item 1</li>
<a href="page.html"><li>Item 2</li></a>
<li>Item 3</li>
</ol>
Adding a hyperlink to a single word
By adding a hyperlink inside a piece of text, you can make a single word a clickable link.
The following code will make the word ‘here’ a clickable link that goes to the chickens page.
<p>To find out more information about chickens click <a href="chickens.html">here</a>.</p>
Styling a hyperlink
Internal Style Sheets / External Style Sheets
a{
color: pink;
background-color: black;
font-size: 30px;
font-family: "Times New Roman";
text-align: center;
}