Links – Absolute, relative and linking to parts of the page

Websites are basically a bunch of files (html files) linked to each other. This ultimately creates the World Wide Web. How do these files link to each other? With anchor tags!

<a href="">Link</a>

It’s that simple. With some caveats…

There are different types of links and to understand the concept on how they work. We have to understand more how computers work. But this is something you already understand (you just need the right teacher 👨🏽‍🏫).

There 2 types of links and then there is also linking to parts of a page. So lets cover the 2 types first:

Absolute Links

You can think of an absolute link, like your home address:

123 fake st

Albany, New York

12084

With an address like this, anyone on Earth could find the address. It is an absolute definitive address within 3d space that can be found from anywhere else within the same 3d space.

Which is akin to something like this: <a href=”https://somewebsite.com/”>Link</a>  or this: <a href=”https://somewebsite.com/somesubfolder/nameofsomefile.jpg”>Link</a>

Which is also an absolute address, it is a definite address within 2d space that can also be found from anywhere else within that space.

Relative Links

Think of this like if you were driving and got lost, you stop and ask some person for directions. The person tells you:

“Pull off and go to the light, take a left and drive 3 blocks, hop on the hiway going east and drive until you see exit 170 where you will exit the hiway and turn right. The place you are looking for will be on the left side of the 1st intersection.”

Directions like this will only work from where you are when you ask and get the directions. If you were a mere 5 blocks away, the directions would no longer work. The directions are relative to your current position.

Which is akin to something like this:  <a href=”about.html”>Link</a> or <a href=”some-sub-folder/name-of-file.html”>Link</a>

The links in the examples above, point to a file relative to the document you are linking it to.

so if you have files like this:

/ Root – public_html

|- index.html

|-about.html

|- some-sub-folder

|_ name-of-file.html

and you were making the link in the index.html within the root folder:

<a href=”about.html”>Link</a> would simply be looking for a sibling file next to the index.html file with the name of “about.html

and

<a href=”some-sub-folder/name-of-file.html”>Link</a> would be looking for a file named “name-of-file.html that is located within a sub folder named “some-sub-folder”

Linking to parts of the page in HTML

In HTML you can link to other parts of the same document. You can also use the same concept to make dummy links.

To link to a part of a page, simply give the part of the page you want to link to an id:

<section id=”about-us“>

</section>

and link to it using an anchor tag but use the id name with a # in front of the name so the HTML knows its an ID:

<a href=”#about-us“>Link</a>

To make this work more smooth. In the CSS you can tell the html to smooth scroll:

html {

Categorised in: Lectures, WEBD 100

This post was written by amax