Your regular hyperlink is a kind of attribute. The Mozilla Developer Network has all kinds of info on what kinds of elements take what attributes, but I'm just going to play with the “a” tag right now. You ANCHOR with an “a” tag, then tell it to “href”, probably short for hyper reference?, then give the link in quotes. I don't know if it matters if it's single or double quotes, but consistency is important for making things human readable, so. Pick one I guess? Shit I've already failed step one. I started a neocities site, which comes with some defaults when you make a new page, before downloading brackets and doing this properly. Oh well, now you can learn from my mistakes. Going forward, I'm going to try single quotes, and keep double quotes for writing for humans. Also, how do you write parenthesies? I don't want to do a code thing, I want to write text!
You should also say what the link is for in whatever it's anchored to. So: when I'm linking to a page about images, I anchor the link to the word images instead of undescriptive works like “link” or “this.”
There's 3 types of links that we're talking about right now:
Links are use “uniform resource locators” that point at where you should go.
They're the values we give to the href.
Absolute links I've already been using, and that's when you give the full, complete, “absoulte” URL.
I'll admit to being a bit sloppy with this, I'm not yet used to providing the “scheme&rduo; of https:// or http:// with a link, since I'm used to cutting that out when making notes for myself. But it makes sense to include this, you want things to be as clear as possible for computers to read.
I think the “s” that some websites have now is something to do with security? Might come back and add a reference here, might not.
Now that we're linking pages on our own site together, we're finally learning about the structure/architecture/bones of a website. Don't you love that nagging feeling that there's a really important thing, and everyone takes forever to get to it? Just me?
There are lots of metaphor to use when explaining the web. Right now, we're talking about it in the way it shows up in my editor: a series of folders and html files. There are many other metaphors for explaining the web, which highlight different aspects of what the internet is or how it works, but right now I'm learning how the pages of this single website relate to one another, and learning from a tutorial that uses that metaphor.
A url link has three parts: All Gaul is divided into, no wait.
It's best practice to not keep on listing the domain of your site in links. That means that if you ever move your site, you haven't broken everything! It's also a lot less typing, and therefore less oportunity to fuck up. And it's shorter/easier to read! The same reason I got used to deleting the scheme! I know that there are non http/https things, like opening a file in your broswer. But since I don't use them much, I knew that in notes to myself, I didn't need to include it. Here, I'm talking to “myself” in a slightly different way; I'm talking internally to this single website. So I omit the domain, and only include the path. Only use absolute links with the full domain when directing to another website.
A relative link says, “I know we're in the same site, so I'm only looking around for a new path.”
If you only give the path, something like page.html, then the computer only looks for stuff on the same site, in the same folder.
It's easy to define a path INTO another folder, and that's why the tutorial had me set up a folder inside another folder for this.
I'm linking to the extras page inside a folder with the path misc/extras.html.
The extras page is in the misc folder, one level down from the links-and-images folder this current page is in.
All folders are listed with a forward slash between them, same as how the file browser does it.
I've got to look up how to make a pretty box-out, or at least how to type parenthesies, this is killing me.
ta-dah! It's not a "pretty" boxout, but putting words between
and makes it look like this! And parentheses are ( and ) for left and right, respectively.
But yes: it's easy to look down into a folder, but you've got to do something extra to go back up into the parent folder that holds the folder your page is in.
We use the ‘..’ syntax to look in the parent folder. That's TWO consecutive dots. That tells the computer “go to the folder one up from me.” I could explain this on the extras page, but for brutalist reasons, I'm explaining it here. There's no need to make you leave this page to learn what I'm already talking about, so I won't make you. But there is a bit of content there, if you go visit.
So ‘..’ means look in the parent folder.
You can string them together, to go multipile folders up, like so:
../../elsewhere.html
But lots of dots gets confusing to humans, which ALSO means you might mess up and tell the computer to do something silly.
The computer will listen, but that means if you point it somewhere that doesn't exist, it'll go looking and not find anything there.
The main reason to use ‘..’ in your relative links is so that you can shuffle folders around without having to do a bunch of stupid (aka tedious and easily fuck-up-able) work.
They're good for storing resources in the same folder, or one folder down, in the same section of the website.
So images that're only used in one place should go in that folder.
For example, if I want to show examples of sigils, I should probably make an images folder as a subfolder of whatever section I talk about magic in, and put them there.
That means I can rename my magic section without having to do the tedious work of updating image paths.
So how do we go up a bunch of parent folders without a silly string of dots and slashes?
Root relative means relative to our domain.
Use ‘/’ to say “go to the root of the domain.”
The attribute and value of href='/' should go directly to the plain ol’ domain.
But since I'm doing all this in local files without a live preview, I can't technically check this.
I could load up my neocites site, but I'm bobing along and don't want to lose momentum or get distracted by going ˜live˜.
The difference between relative and root-relative links is that root-relative links start with a forward slash.
So I think the tricksy way this works is, you make a folder and a .html file in the parent folder with “the same&rduo; name. From home, you go to /example.html, and have that be the landing page of “example” folder.
Everything else in that section goes in the example folder, and the root-relative links will be /example/page.html
I had to write this out because I'm used to Scrivener, where “folders” also can take text, and I was literally thrown for a second that you couldn't do that here.
Normal is what you're used to.
Ah. I see why people like a nice style.css file. I've just learned how to make links open in a new tab, which is in my opinion the Correct way to give someone a foreign link. My mood about links is “you're telling me about another cool thing, and I want to see it, but I'm still talking to you right now.” Hmm, but I'd only want that on absolute links, not relative and root-relative links. And heck, I'm probably better off practicing it manually for now anyways. It's also a design decision I should put more thought into than “this is what I think I usually do.”
Neocities is set up with this file, but I haven't learned how to do everything I want with it yet; for example, to get fonts, you need to put that info in your header, which isn't part of style.css. So I've been avoiding using it much so far.
style.css is where the CSS goes to tell a computer how the html should look.
You can make a single css page that everypage looks to for how it should appear, instead of having it written down on each page.
This is a good use for the root-relative link, because it'll look the same for every webpage and you can just copy it into the header of every page, unless you want that page to look VERY different.
Style guides! I love them!
But what I love more? Needing to specify less in them.
Elements can take multiple attributes.
So our anchor element <a> can take the attribute href AND attributes that tell you where to open the link it's hyper referencing.
One of attributes is target; if you set it to '_blank it'll open the link in a new tab.
Further details of the
values a target attribute can take
are, as per usual, on the MDN.
I've heard that for security reasons, it's important to use rel='noreferrer' on any link that's labeled target='_blank'