oblaat
a guide to conceiving, creating & publishing your own website
a guide to conceiving, creating & publishing your own website
The thing that defines hypertext is its hyperlinks. In our modern day, we have dropped the hyper; hypertext has almost become regular text to us.
A hyperlink is a link from one document to another. One document can include several hyperlinks to several other hypertext documents, or be linked to from any other document. A document can link to a regular old file, too.
The thing that allows for this is our dear friend the anchor tag, defined using the letter a.
Anchor tags are curious because, unlike paragraphs, they need more detail than just this piece of text is a link. Okay, this piece of text is a link... to where? We define this within the tag itself:
<a href="https://oblaat.org/">A handy guide to making websites</a>
The details on where the link goes is given in the form of the href attribute, which stands for hypertext reference. It references where the hypertext leads to. Here, the link anchors you to this very website.
A link without the href property cannot go anywhere because the browser does not know where it is supposed to go.
You live inside of the first room in the second floor of your apartment building. You have a friend who lives on the third floor, in the fourth room.
You might meet a stranger who asks for your address, and maybe you feel compelled to give it to them: I live on 123 Example Street, on the second floor, in the first apartment. You have to give them your exact location or else they will not be able to find you.
While they are visiting you, your friend knocks on the door to drop something off. Your friend and the stranger get along just great... before they leave to go about their day, the stranger asks for their address. Your friend tells them, I live in the fourth room on the floor above us.
You supplied this stranger with an absolute location, and your friend supplied them with a relative location. The exact same goes for the location of files.
When linking to a file on another website, its address has to be absolute: the page I want to show you is at this address. This is often in the form of a complete URL:
<a href="https://google.com/">Search for cool things on Google!</a>
When linking to a file within your own server, it makes sense to tell the browser where it is relative to the file you are currently on rather than always telling it the exact Web address to go to. What if your URL changes?
If you have a collection of files within the same folder that link between each other, you could have these links in one of two ways:
<a href="more.html">Read more</a>
<a href="./more.html">Read more</a>
Formatted the first way, the browser assumes that it should be looking in the same spot on a server. The second way, you are directly telling the browser. But what if your file is in a folder and you want to make it go "up one level", to go to a file in the folder above that?
<a href="../index.html">Back to main</a>
The two dots signal to the browser to go "up" by exactly one level. In a website with many folders inside of folders, this can be very useful—especially if you are moving those folders around on occasion.
Interpreting the file path as a set of directions, you could tell the browser exactly where to go from the root directory, or "starting point", of your server. This is still a relative path, because you are starting relative to another place rather than giving the exact "coordinates" of the file.
This is often used to kick someone to the homepage of a website no matter where they are coming from, or to access a file in a totally different place:
<a href="/index.html">Go home</a>
<a href="/my/hidden/directory/secret.html">My secret Web page</a>
You do not just have to link to a different document with the anchor tag; you can include a link to another part of the document, or to a specific part of another web page. This is done via giving elements IDs.
Elements take IDs via a new attribute: the id attribute. This can be applied to any element to make it "linkable"; when one such link is followed, the browser will jump to that particular part of the document.
IDs are easily added to a document:
<h2 id="about">About me</h2>
<p>I am a...</p>
<h2 id="what">What I do</h2>
<p>Every day I...</p>
<h2 id="why">Why I do it</h2>
<p>I have a passion for...</p>
You can use these IDs to link to another part of the same document:
<h2>Table of Contents</h2>
<ol>
<li><a href="#about">About me</a></li>
<li><a href="#what">What I do</a></li>
<li><a href="#why">Why I do it</a></li>
</ol>
You can also use these IDs to link to a specific part of a completely different document:
<a href="/fruit.html#apples">All about apples</a>
<a href="https://oblaat.org/#creation">Advice on creating websites</a>
Anchor tags take another attribute: the target of the link. Should the link open like normal? Or in a new tab? What about in an entirely new window?! This is where the target attribute comes into play.
There are a few different built-in targets in HTML.
This kind of link simply replaces the currect document in the browser tab with whatever is being linked to. You don't have to use this target because it is the default.
<a href="/new.html" target="_self">New stuff!</a>
This kind of link opens a new tab in the browser.
<a href="/new.html" target="_blank">New stuff!</a>
If a document is being displayed inside of a frame or iframe, this will open a link inside of the parent document (the one displaying the document inside of a frame).
<a href="/new.html" target="_parent">New stuff!</a>
If your document is somehow displayed within a frame that is displayed within a frame, the link will open in the browser window as if the link was normal!
<a href="/new.html" target="_top">New stuff!</a>
If you are using frames and want to open links inside of them from an outside source, then you must name them first. You can now use this name as a target for your links.
<a href="/new.html" target="YOURNAMEHERE">New stuff!</a>
(Don't worry if the frame business makes little sense; ideally you shouldn't be using them!)