With your website, you are not limited to a single page. You can have as many pages as you like, all connected together through tunnels and doors of your own design.
Here, text signifies more than a word, but can be a door, a song, an on-switch, a slide. It is multitudinous and hyper.
A new page
Let’s create a new page that will connect to our index.html page.
In my text editor, I will make a new page in this same folder (In bracket, you can right click on the sidebar and select ‘new file’), and name it birds.html. Do the same, named for whatever new space you’d like.
Then, fill in some initial text and save the file.
<h1>Birds!</h1> <p>These are some of my favourite birds...</p>
We now have a secret, stranded page. It exists in our webpage...since it’s a file in our webpage folder...but there’s no clear way to know about it or visit it.
We’ll create that clear passage with a link.
The <a> tag
The <a> tag stands for “A nice link” and transforms the text you wrap it in into a web link.
Opening my index.html file again, I can make the word birds a link, like so:
<h1>Zach World</h1> <p>This is my <em>personal</em> webpage. Stay awhile!</p> <p>I think <a>birds</a> are cool.</p>
Which updates in the browser like so:
A bit unexciting, bird looks no different!
This is because the link is incomplete. It has a tag, but no destination.
I can give a destination by adding what’s known as an attribute to my
<a> tag. In this case, I want the “hyper reference” attribute, shortened
to href.
So my bird link becomes:
<a href="/birds.html">birds</a>
and my full page:
<h1>Zach World</h1> <p>This is my <em>personal</em> webpage. Stay awhile!</p> <p>I think <a href="/birds.html">birds</a> are cool.</p>
Which becomes:
Hypertext! The page has become the passageway.
A bit about href
href is an attribute, and all attributes are written the same:
name="value". You’ll use them a bunch more when you start to style your page
with CSS.
You can add any attribute you want, if the browser doesn’t understand it, it’ll just ignore it. you can imbue your tags with special values, visible only in the source code, if you so fancy
A bit about the destination
Because I am linking to another page on my site, which is just another file in my folder, i can use what’s called a ‘relative link’...which essentially means I don’t have to put the whole web address.
If I wanted to link to another site, I’d put in its full address like so:
<a href="https://solarpunk.cool">check out solarpunk.cool</a>
A bit on inclusive semantics
When making links, it is good to have the link text describe where it goes.
We like...
<p>check out these <a href='birds.html">birds</a></p>
Instead of...
<p>cool birds over <a href="birds.html'>here</a></p>
It’s friendly for visitors in general to know where links go, but especially friendly to people using screen readers. The reader will often read the links as a group, to make navigation quicker, and to repeat “here here here” over and over is stressful and confusing!
no more bits!
To finish this chapter, I’ll add a link to birds.html, navigating back to the homepage.
<h1>Birds!</h1> <p>These are some of my favourite birds...</p> <a href="/index.html">return home</a>
Beautiful, and now we are ready to talk of some birds.