Creating Web Links

Let's learn how to create links, whether those are links to other web pages within our website, or other people's websites, or web pages within their websites. We're going to have to deal with file names within our website, so let's address file names, and then we're going to dive into the code and see how the code works. In the previous exercises, we've been using Microsoft.html. So the.html file extension, of course, says what kind of file it is.

But as far as the name of the file, you can use basically any file name you want. And just to clean up these files here, I know we have many ready files, which are for our exercises in case you want to jump ahead and kind of go out of order or something, or review something, and you don't want to do all the previous exercises leading up to it. But just to make this a little bit cleaner, I'm just going to create this folder here just to ignore these.

I'm going to put all of these kind of ready files here, and finished files. I'm just going to put them into there, so we have something that's cleaner. And essentially, we have an index page, Microsoft, Wall Street, and Bill Gates.

So out of all these, notice that things like Wall Street, which is two words, we don't use a space. You want to use a dash or an underscore instead. Generally, dashes are easier to type because they don't require holding shift.

So dashes are generally preferred by most people just because they're easier to type. But either a dash or an underscore instead of a space. Spaces are not allowed in our file names.

They can create problems. So best to avoid spaces. You can use as many words as you want.

I know these are very short, but you can use as many words as you want. The best practices are don't use spaces. Also avoid special characters like at symbols and things like that.

Keep everything lowercase. Some web servers are case sensitive. If you're linking to files, it's best to use the same case just in case, pun intended.

Some web servers won't care, and you can link to it with upper or lowercase. But if it would be case sensitive, just easiest if everything is lowercase, it's just easier for everybody. Now you can use whatever name you want, except for one, index.html. If you only have a one-page website, you will only have one html file, and it will be called index.html. When somebody goes to your webpage, your website I should say, and they go to your home page, and they're not typing in a file name.

They're just going to type in something like danrodney.com, and that's going to pull up index.html. I know you don't see that, but behind the scenes it is pulling up index.html. So that is the home page. That's the name for our home page. From there, you can link to any other file name that you want, but this is a reserved special name that web browsers always know.

Out of all the files you have, it serves up that as your home page. So it's a special reserved name. So you will always have an index.html. From there, you can name all your other pages, whatever you want.

I would advise to use good names that are maybe similar to the topics that the page is talking about, using terminology that maybe people are searching for, because actually file names are minorly considered when Google is ranking. It's a very minor signal, but it doesn't hurt to have your same names or keywords in your file names. So don't do things like a.html, b.html. Don't use bad unreadable names.

Not only would that be hard for you to know what they are, but it's just not friendly for other people as well. We're going to be switching to index.html for this particular exercise here, and I want to preview this in my browser just so I can see what this page looks like. It's going to be the home page for our website here.

I'm going to preview this in the browser, and there's one main heading here. The heading one right here, latest news from the onion, and then there are different news headlines here. So all of this is the latest news, and then we have different various news articles for the latest news.

If this is the main heading one, and we only have one of those heading ones per page, the other ones are heading twos. So the heading twos are our subtopics, because all of this is the latest news, and we have three things of latest news, so those are heading twos. All subtopics under the main topic of heading one.

And then we have a couple paragraphs as well. I've got a little kind of byline here of who it was written by. Now back in the Microsoft webpage here, I want to create some links to different websites.

Now let's say I want to link to the Microsoft website. In my browser, I can go to Microsoft, their website. There is Microsoft.com. Of course, if I didn't know that, I could just Google that to go to the website.

And of course, this is actually linking to some specific page within their website, and I could copy that entire address to link to that specific page in their website. But I actually just want the Microsoft.com. Now you do need all of the stuff leading up to that. The HTTPS, which is S is for secure.

Now HTTP kind of sounds like HTML. So HTML is hypertext markup language. That is the language we're using to mark up our content.

HTTP is the hypertext transfer protocol. Transfer protocols are simply the way that we transfer files. We're transferring files of hypertext.

The S is for secure, so this cannot be read in transit. It is encrypted, and you know that if you give it things like credit card information, that you can trust this source and that things are safe between you and the web server. There'll be a colon slash.

There may or may not be a www. That is an older thing that we used to have on all websites, but we no longer have to have it there. So it's optional on modern websites.

Websites that have been around for a long time will keep it for historical purposes, but just copy it the way that it is. If it has the www, copy it with it. If it doesn't, don't put it there.

The same thing if it has the S or does not have the S, just copy whatever the website currently has if you're linking to someone else's website. So I'm just going to copy that, and I want to link, let's say, these words right here. I want them to be clickable, so I need to wrap them in a tag to indicate that they are going to be anchored to another page, tied to another page.

So for that, we use the A for anchor tag. The anchor tag is how we anchor ourselves or link ourselves to some other page. Now, what page are we going to go to? This is the text that I'll click to go there, but where are we going? You always have an href on this anchor tag.

Remember that with attributes, as we've seen up here, attributes are that there's a tag, a space. The attribute equals some value in quotes. Same thing here.

The A is the anchor tag. Href is the attribute equals a value in quotes, and we're going to paste in that web address. So I'll just close this up over here so we don't see that, and we've got our href, right? So that's the page that we're linking to.

We're going to go there when we click the text that's in the anchor tag. I can save that page, preview in my browser. Notice that it is clickable, and when I click it, it'll go to that page, and I can hit the back button, and I come back.

All right. Now I can go back and forth between other pages. Now, I'm going to close these other pages here, and let's just focus on this one tab.

So notice we're just in one tab here, going back and forth, and I can go between the pages. But if I'm leading out to somebody else's webpage, I might not want to send them off and have people forget about my website. Maybe I want to put that into a new tab.

We have another attribute for our anchor tag. The href is what page are we referencing. So href is short for hypertext reference.

We're referencing or pointing people to some other webpage. But then we can have a target. So I can say space.

We always start with the tag, then there's a space, and you can have as many different attributes as you want. The order of those attributes does not matter. You just always have to start with the tag, and then you can put the attributes in whatever order you want.

So I can use target, and notice target has an underscore blank. And so let me just reflow this just so you can kind of see this. So again, notice there's just a space between these.

And if you want to put this first, a target, and then href, you could do that. The order of these does not matter as long as you have the tag, and then you can have attributes in any order. Normally speaking though, it's better to put where you're going, and then what you want to do with that link.

And we're going to target a new blank tab. So it is target equals underscore blank. And with that, now I'm going to hit refresh, and now watch what happens.

It's going to open up a new tab. There we go. Now it's in a new tab.

And now when I want to go back, I can either switch back, and I can reference both of them, or I can close it and go back as well. So I'm not saying you have to do that on anything that you put to another website, but it's something you might want to do. I wouldn't do that with links within your website, but when you're linking to somebody else's website, you might want to do that.

Let's do another link to another website. We're going to link to theonion.com. So I'm going to look up theonion, which is theonion.com. And notice in this case, they do not have the www. It would be okay to add it, but they don't actually have it here.

So I'm just going to copy it as it is. And I'm going to link this text here. Now, since I already have an M for italic already there, I can put the anchor tag inside the M or outside the M. It doesn't really matter whether the italics are inside or outside the link.

It is really just personal preference. The only thing is you just need to make sure that they're enclosing each other, kind of like Russian nested dolls, if you've ever seen those where you have a doll inside of a doll inside of a doll. Just make sure that the link is either around the italic, so it's outside surrounding the italic, or that it's inside the italic.

So I'm going to wrap it around the whole thing. So I'm going to start my anchor tag here, and then I'm going to end the anchor tag over here. So notice the text, and then the italic tag, and then the link like this.

You will always have an href referencing the other page. Paste in that address. And I will also, in this case, I will add a target of underscore blank to pop it open in a new tab as well.

I save that page, come back, hit refresh. Now I can click it, and once again it opens up in a new tab like so. I can close it.

So that's if you want to link to other people's websites. That's what we call an absolute address. You're going to a specific place.

It is not relative to where you are. It doesn't really matter where you are. Any webpage can link to this.

Any website can link to this. But within your own website, you want to be able to link to other pages, and we link to them based on the file names. That's why I talked about the file names just a moment ago.

We link with a relative path. We're going from one page to the other based on where we currently are. So as I want to link to other pages here, there's some information about Wall Street here, and there's a Wall Street page over here, and I want to link people to that.

Here, if I wrap this in an anchor tag to say this is what I want to be able to click, where do I want to go? I'm still going to have an href there, and to accept those code hints, by the way, as I hit space and I type in hr, notice how href is automatically chosen. I can hit TAB to accept that code hint, and then I can keep typing. All right, so I want to link to it based on the file name.

Because these are all in the same folder, I can simply start typing the file name, and notice how it automatically completes it here, suggests it. So again, I can just hit TAB to accept that code hint so that I don't make a typo, because if you make a typo and you get the name wrong, then the link won't work. So you got to make sure you have that typed in properly.

This is where things like spaces, capital letters, if you don't type things in exactly the same, the link might not work. So I'm going to save that, come back, hit refresh. Now I can click on this and see this other page within my websites, and I can hit the back button for that.

I'm certainly not going to pop that open in a new tab, because I want people to just be able to go around between pages within my own website here. When we're linking here, if everything's in the same folder, we can simply say the file name. All of these are in the same folder, so I could just put the file name in there.

So for example, like going from the index page to one of those articles here, if I want to link to one of those articles, like let's say Wall Street, and I want to link to Wall Street, I can wrap this in a link, and oops, don't want to do that. I'll put that there. Again, I could put the either inside the heading, or I can wrap it around the heading, either way.

And if I'm referencing Wall Street, I just, oh, did that so fast. Just want to make sure that's clear. As I start to type in the name, I just hit TAB.

Tab accepts that code hint there, just like it did previously. This page can also link to that Wall Street. So I can preview this in the browser, click on that, and it also links to that.

All of these links work because they're all in the same folder. However, if, let's say, something were in a subfolder, maybe I create a folder here, and I create that folder I called finance, and maybe I put Wall Street into the finance folder. Are you sure? Yes, I want to move it there.

Now Wall Street is in the finance folder. Now it's going to look here from the Microsoft page, because notice I'm in Microsoft. It's going to look, and it's going to look around and say, where's Wall Street? I don't see Wall Street.

So notice when I try this, it says file could not be accessed. It's been moved, edited, or deleted. Yes, it has been moved.

That is correct. I need to tell it where it is based on this file's location, based on where I am. I am in Microsoft.html right now.

How do I go into that finance folder and find that? Oh, well, I kind of said it. You have to tell it to go into the finance folder and find it. So deleting this, I can say go into the finance folder.

Oh, look, it suggests finance. I can hit TAB and find Wall Street tab. So I have to tell it where to find it.

When you are in a file, the browser, the server, they will look around in the same folder to try to find the file name. And so in this case, it looks around for the finance folder, finds it. Then once it's in there, then it will find this.

So it's all based on how you get from the current file to finding the other file. Now my link works once again. Now, in this other file, in this Wall Street, if I want to get back to Microsoft, we're not in the same folder.

So let's say I want to create a link and I want to say go to Microsoft. So article and I want that href to go out. So right now I'm in Wall Street.

I've got to go out of the finance folder and get back to Microsoft. So I can't just start typing Microsoft. Notice how it doesn't code hints because it's not in the same folder.

I've got to get out of the finance folder to get back into this root directory. The root directory is your base directory of your folder. You will always have for a website, you'll have a folder and all your files will be in that folder.

You can't have files in totally random different places because as you notice here, I'm linking to other files based on their relationships, based on their file names. So put things into the right location, into the right folder to begin with, with the correct file name. Otherwise you have to edit all of your links and that can be tedious and time-consuming and potentially prone to errors.

So I need to get out of this finance folder because Wall Street is currently in the finance folder. So I have to do a dot slash. Dot dot slash says to go up one folder.

Now I've exited finance and now notice I can see the whole root directory there. So then I can see Microsoft and I can link to it. Every time you do a dot slash, it will go up one folder.

If I do dot slash, I've exited the finance folder that Wall Street is in. If I knew it, do another dot slash. Now I'm actually in the entire web development class.

If I do another dot slash, now I'm in the class files folder that contains my web development class. So I keep going back up one folder every time I do a dot slash. So dot slash to go up out of finance and then over to Microsoft and then that link will work.

Now I can click it and now it'll go back to Microsoft. So really all of your links that are relative links working within a website will either say to go find another file in the same folder, to go into some folder and then find the file, or in the case of when it's inside of a folder, it'll say go out of the current folder and then find that file. It's all based on where your current file is.

How do you go from there to the other file and then find that other file? These are what we call relative paths as opposed to absolute paths like we saw here linking out to somebody else's website. These are the two main kind of ways of linking and we're going to see the same kind of relative paths when we're linking to images which we're going to learn next. So for right now go ahead and do exercise 1c coding your links.