As you continue to build your website you will likely have new webpages that you must link together to allow the user to navigate around your site. You might also like to link your user to external content on other websites. In this tutorial, we will cover how to create links leading to other webpages or specific sections on those webpages and also style the appearance of the links using CSS.
To create a link, you should wrap the content that will serve as the link (e.g. text, an image or something else) between opening <a> and closing </a> a tags. The opening a tag will contain a href attribute that details the link destination. For example, if we were trying to link a webpage file on our website called about.html then we could write the following code:
<p>click <a href="about.html">here</a> to see our About page</p>Note the above code assumes the about.html file is in the same folder as the webpage containing the link. If the link destination was in a subfolder or parent folder then you must incorporate the file hierarchy into the link. For example, if the destination was in a subfolder called 'About' then your link should look like this:
<p>click <a href="About/index.html">here</a> to see our About page</p>Meanwhile, if the target destination was in the parent folder then the link structure would have to begin with ../
<p>click <a href="../index.html">here</a> to see our About page</p>In addition to the href attribute, which specifies the link destination, you can also include a target attribute. The target attribute defines how the web browser should open the link. By default, links will open in the same window; however, you can change this though by setting the target attribute to target="_blank". This will ensure the link opens in a new window/tab.
<p>click <a href="about.html" target="_blank">here</a> to see our About page</p>Furthermore, you can also include a title attribute. The title attribute specifies which text should be displayed when the user hovers over the link. The title attribute is useful for letting the user know where the link will lead.
<p>click <a href="about.html" title="Our About page!" >here</a> to see our About page</p>Finally, you are not limited to using text as links. In fact, you can use any element as a link. For example, if you wanted to use an image as a link then simply wrap the image element inside a tags as shown in the following example:
<a href="RareTrees/index.html"><img src="tree.jpg"/></a>Until now we've talked only about linking to webpages as a whole, but what if you wanted to link to a specific section of a given webpage? To achieve this, you must assign the webpage section you wish to link to a unique id. For example, imagine we had a webpage with information on a variety of rare trees and we want to link to the section about Osage Orange Trees that is halfway down the webpage. To generate the link, we would first need to assign the target section an id:
<h3 id="osage-link">Osage Orange Tree</h3>The heading for the section on Osage Orange Trees now has the id 'osage-link'. To link to that section then you simply need to set the id as the link destination. For example, if you have a contents section at the top of the webpage then the link to the section on Osage Orange Trees would look like this:
<a href="#osage-link">Osage Orange Tree</a>Just like in CSS, references to id's must be preceded by a hashtag. If the link to the section on the Osage Orange Tree was on a different webpage, then we must also include the web address before the bookmark. For example, if the section on the Osage Orange Tree was found on the webpage http://treesandtrees.com/RareTrees/ and we wanted to link to it from a different page then the link would look like this:
<p>You can read more about the Osage Orange Tree <a href="http://treesandtrees.com/RareTrees/#osage-link">here</a>.</p>Links can be styled using your main.css stylesheet. For example, one feature you might like to modify about text links is the text-decoration property. By default, links will be underlined; however, you can override this by setting the text-decoration property to 'none'.
a {
text-decoration: none;
}You can also style the different link states (e.g. before clicks, during clicks, after clicks). To style how a link will appear if it has not been clicked then add :link after 'a' in the CSS stylesheet. The other link states you can style include:
You can create separate declarations in the style sheet for each link category (a:link, a:visited, a:hover, a:active). For example, if you wanted a link to ordinarily be blue but turn red and underlined when hovered over or clicked then your CSS code would look like this:
a:link {
color: blue;
text-decoration: none;
}
a:hover, a:active {
background-color: red;
text-decoration: underline;
}