How to add new webpages and links to your website

Making new webpages for your site is very similar to how you created your first HTML file. You can likely copy over much of the existing code from the original HTML file to the new one (e.g. the parts of the head and body elements that will be used on every webpage). Bear in mind though that some details may need to be modified slightly. For example, the 'title' declaration in the head element will likely need updating (e.g. change it from 'Home' to the name of the new webpage).

When it comes to saving the new webpage you have two main options. First, you could create a subfolder with the name of the webpage (e.g. About) then save the new HTML file within that subfolder as 'index.html'. Alternatively, you could save the new HTML file within the main folder for your website but you must use a different filename than 'index.html'. This is because in the main folder of your website the filename 'index.html' is already taken by the homepage. Instead, choose a file name that gives a good description of the webpage's content (e.g. 'about.html', 'contact.html', 'rare-tree-species.html'). It is worth remembering if you opt to save your new HTML file in a subfolder that your link to the 'main.css' stylesheet will need to be changed from <link rel="stylesheet" type="text/css" href="main.css"> to <link rel="stylesheet" type="text/css" href="../main.css">. Adding '../' before a file name tells the web browser that the file is located in a parent folder.

Adding links

When your site has multiple webpages you will likely want to link them together. To learn how to do this, we will walk through an example where we are trying to link our 'index.html' homepage to a new 'about.html' About page. First, open the 'index.html' file type the following:

<p>click <a href="about.html">here</a> to see our About page</p>

Note this code assumes the About page is in the same folder as the homepage. If the About page is 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>

In those code snippets, we wrote the text "click here to see our About page" and made the word "here" a hyperlink to the About page of the website. If you want a portion of text to serve as a link, then you must enclose that portion of text within opening <a> and closing </a> tags. Inside the opening <a> tag you will see a 'href' attribute. The href attribute specifies the location of the file or URL you are linking to.

There are other attributes you can include in your opening <a> tag which can modify the properties of the link. For example, you can include a target="" attribute to determine how the browser will open the link. By default, the link will open in the same window in which it was clicked. 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>

You can also include a title="" attribute. Any text in between the two quotation marks will be displayed when the user hovers over the link. This is a great way of describing to the user where the link will take them.

<p>click <a href="about.html" title="Our About page!" >here</a> to see our About page</p>

If you want to use another element as a link (e.g. an image) then simply enclose it inside the 'a' tags:

<a href="RareTrees/index.html"><img src="tree.jpg"/></a>

Linking to a specific section of a webpage

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 bookmark the section of the webpage you intend to link to by assigning it an id. For example, imagine we had a webpage with information on a variety of rare trees and we want to link to a specific section about Osage Orange Trees which is halfway down the webpage. We would first need to bookmark the heading for that section with an id:

<h3 id="osage-link">Osage Orange Tree</h3>

The section on Osage Orange Trees now has the bookmark 'osage-link'. If you wanted 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>

Styling links

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:

• :hover - determines how a link will appear when hovered over
• :active - style how a link will appear when it is being clicked.
• :visited - styles how a link will appear after it has been clicked

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;
}