So far we’ve done some links, but we haven’t really looked closely at how they work. For the purposes of this lesson, I’d like us to you can download this simple HTML page that I have published here. We’re going to look at three kinds of links: jump links, relative links and absolute links.
Jump Links
These are useful for jumping from one part of a page to another. We can actually use IDs to link this way. Essentially, we can link to any element by giving it an ID. For example, let’s say we change the last “header 3” on our sample page to an ID of “bottom”. Scroll down to line 51 in Brackets, and add id=”bottom”:
<h3 id="bottom">Header 3</h3>
Now, to link TO that part of the page, we can simply add an <a> tag higher on the page. Let’s add a link to the Header 2 on line 22 in Brackets:
<h2><a href="#bottom">Header 2</a></h2>
Now, save the page, and check the link works in your browser. Note: it will only jump down as far as there is content on the page. In a minute, when we start to play with CSS, I’ll show you how to link to the top of the page easily. We could also easy add a jump menu for all the content in the page.
Relative Links
Relative links allow us to link within a website, from page to page (and, in fact, from page to resources, as we have done with images already.)
Relative links in static webpages are relative to the page you’re working on. So, while we’re still working on the outline-friendly.htm page, let’s create a link to your home page.
Let’s change the first “header 3” to the text, “My home page”, and add a link there. (This is line 24 in Brackets.)
<h3><a href="index.html">My home page</a></h3>
Save your file and check that it works. This works fine, because both the index.html page and the outline-friendly.html are in the same folder. If the folder structure was different, we’d have to ensure that we directed the browser differently. For example, let’s say we want to include an image that we’ve already downloaded (the awesome cat pic). The link would be slightly different in our image tag:
<img src="images/awesome.png">
(In this case, “scr” is the linking attribute, not “href”.) The rest of the attribute “images/awesome.png” basically says to the browser: “Look down one level into the images folder, and when you’re there, show me awesome.png.” So, understanding the structure of your files and folders is critical to linking within a website. Learn more about file structure and relative linking here.
Absolute links
Finally, we have absolute links. They’re called that because they require the protocol as well as the domain and the folder structure. You use them whenever you are linking to another site.
For example, a link to the FIMS home page would look like this:
<a href="https://fims.uwo.ca">FIMS home</a>
But a link to the FIMS “About Us” page, requires more detail, and would have to include more in the pathway.
<a href="https://www.fims.uwo.ca/about/index.html">About Us at FIMS</a>
Okay, now that we know how to do that bit of HTML, let’s move onto Writing CSS!