HTML & CSS Intro Course: Coding Links

Continue to learn to code HTML & CSS in our NYC Web Development classes. For those outside New York, find and compare the best HTML & CSS classes near you or live online HTML & CSS classes.

Video Transcription

Within a website, we link between pages and also to other websites. Let's see how to create links in HTML. I have a local HTML page and I'm going to open it up in my code editor. I'm going to use Sublime Text, but this will work in any code editor. I want to also take a look at this page, so I'm going to open it up in Chrome. I can put these side by side because there's not a lot of content here.

So let's say some of the text in here I want to link to another website. I'll navigate there in my browser to make sure that I have the address right. In Chrome, when you first click you're just going to get the basic address here, but if I click again, you'll notice the full address here with HTTP. HTTP is the Hypertext Transfer Protocol so Hypertext Markup Language and Hypertext Transfer Protocol. This is the protocol used to transfer HTML pages. S is something that a website can optionally have; it's for secure. Sites that have that enabled are going to be more secure, but it's up to the site to make it secure.

Whatever the address is, whether it's HTTP or HTTPS, go with whatever they have set up. Some websites will have www and some will not. In this case, they have the www and so you copy that address and then you can link to that. We have to decide what text we want to link there and I've got the onion dot. We're going to wrap the anchor tag around the text that we want to click on. This is the text that you'll click to go to the link. Anchor tag is an attribute that you're going to put onto the anchor tag, which is the destination of where you're going to go.

Always on the opening anchor tag, you're going to put an href when you are wanting to link to another webpage. Attributes are always the tag and a space, the name of the attribute equals a value in quotes. In the quotes, that's where we paste in our web address. Now if I go to the non-secure version, it does redirect to the secure version, but we should link to whatever that website is, whether it's the secure or non-secure version.

So say let's go there and there we have built a link. I'm going to save that page and then I can go to my browser and refresh and that goes and gets the latest version. Initially this link is purple, but if I haven't been to the onion, it would be blue. Visit unvisited sites are blue and when you click on them, you'll go visit it and come back, and then the visited site is a purple color. You can customize this using CSS.

We're just going to look at building the links themselves linking to another website like Microsoft. Because they are a worldwide company, they have different sites for different languages in different parts of the world, so they detect where you are and they redirect you to a like kind of little subsite if you will. I don't want to link to just the English version of the site; I want to link to just the Microsoft.com. So in this case, I'm just going to copy the first part of this. I'll wrap a link tag and an a tag around that at the start and the end. I like to put the start and the end just to make sure that I've put the tag in the right place and that I don't forget to end it. Then I come back in and I put in my href, and I use this little pop-up menu to enter this in. I hit return to choose this and it does the href equals and the quotes for me. I'm going to paste in that address, save it, go back, close that up, hit refresh, and now we have that link. Since I cleared my history, it forgot that I've been there, so it's blue. When I click it, it goes to that page; I can hit the back button and it's purple, so my links are working now.

These links are going to some other website, and while you certainly can do that within the same browser window, some people like to open that up in a different window or tab. Browsers are all defaultly configured to open up in tabs, although people can change that preference in their browser preferences, but by default it's going to be a tab that it would open up in. So let's say for either of these I want to open that up in a new tab or window, whatever the browser preference is. When I look at the link tag, I've got one attribute for href that's where it's going to go, but there's another attribute called target which controls where that link opens: is it in this window, is it another window or tab?

So I can go and add another attribute to the opening tag. Attributes always go in the opening tag, and you put a space between them—the order of attributes does not matter, so I could put target after href or I could put it before it. Doesn't really matter, it would work functionally either way. So I can say target equals and in quotes, and let's make this on one line just so you can see the whole thing there. So it's got your tag, a space, the first attribute, another space, you separate each attribute with a space, and then you've got your next attribute. It's always attribute equals some value in quotes. Now, in the case of target, we're going to target underscore blank, so this is a special name that's given to us by HTML to target a blank window or tab, whatever the browser preference is. And just to show you, I can put that after the href and in this case I'll put it before the href, so both of those links will open up in new tabs and you'll see that both of them work fine regardless of the order, as long as you have a space between your attributes and your tag name comes first and your attributes all come after that. So, I will save that, pop back over to my browser, and hit refresh. Now Microsoft will pop open in a new tab which I can close, and then I can pop open Onion in a new tab as well which I can close.

Sometimes there's little minor differences between browsers; for example, here when I click the link, the back button does not work here because I'm not navigating within this window—it's a different tab, and each tab has their own back button history. Safari is a little bit different, and actually one of the neat things about Safari is that if you click that link and it opens up in a new tab, Safari makes the back button work just in case somebody didn't notice that it was opening in a new tab. The back button still works, and this is especially useful on mobile phones, where people might not notice that the tab on a phone really is, like, a whole window in a way. The tabs take over the full screen on smaller phones as opposed to, like, tablets, for example, where you can actually see the different tabs, so it's especially useful on phones where you could just hit the back button even though it has to actually close the tab. The back button will actually just close the tab and go back to where you came from, so that's a nice little usability thing that Safari does, but that is actually unique to Safari—you don't have control over the programming of how that works. All the other browsers just open it up, and if you want to close that tab you have to just close that tab.

Now that's linking to somebody else's website, so that is a URL that you're going to go to. When we want to link to another page within our own website, we don't have to use the full web address to do that; we can use what's called relative linking. Relative linking is linking based on the relationships of files. So here in my website, I'm in the Microsoft.html. What if I want to link over to the Bill Gates file over here? So I would do that by putting a link around something—here, for example, Bill Gates. I can wrap a link just like I did before, but I'm going to give it a different href. This is not a website yet; I don't have this uploaded so I don't have a.com available yet, so I don't need that. I can just link within the website based on the relationships of files—that's why they're called relative links. These two files are in the same folder, so I can use this file name. I'm just going to copy that file name and I could just merely say the file name.

I know that I get a little menu popping up there which is a helpful package that I've added on to Sublime Text. But for right now, I just want to focus on the code and not focus on any particular code editor's way of helping you to write that code. So here, I'm just linking to the name of the file and that works because they're both in the same folder. When you have an href, it starts looking in the same folder and as long as it can find that file name in the same folder as the current document, so I'm in Microsoft.html, this is in the same folder, that link will work. If I come back here and hit refresh, then that will go to that other page, so the link works. Now if I get the name wrong, like if I do "billgates" with no dash and this has a dash, that little typo is just one character but it doesn't work, the file can't be found. So you've got to be exact with your names. And speaking of dashes, your file names can't have spaces in them, so when you're naming your files, you need to use a dash or an underscore instead of a space. So don't use spaces, use underscore or dash instead. Technically, you can use upper and lowercase letters, but life is easier if everything is just lowercase because some servers can be set up to be case sensitive. No pun intended, there, you need to make sure that when you're linking, that you link to the file name exactly as it is. So just if you keep everything lowercase, it's just much easier and then you don't have to worry about doing upper and lower case in your file names. But as long as they match, that's fine, so just don't use spaces in your names and it'll work just fine.

Now what if "Bill Gates" was in a folder, for example? What if I make a new folder called "People"? And I put Bill Gates in there to organize all the people into one place? Well, then this link doesn't say to go into the "People" folder. And if we look at the relative location, "Microsoft" is the page that I'm in, it's going to look for the "Bill Gates" file in the same folder and it doesn't see it. So, the link is going to fail. Once again, doesn't work. So, how do I tell it to go into the "People" folder? Well, I need to tell it—I need to say, go into the "People" folder. So, "People/", will say, look in the current folder for the "People" folder. And so, from "Microsoft" it says "Oh, I found the 'People' folder, " then it goes into there. So, "People/" goes into the "People" folder and then it can find the "billgates.html". So, I hit refresh and now that link works once again.

How do I get back and forth between pages? Um, let's say I want to go from the "Bill Gates" page, I want to go back to "Microsoft.html". Well, let me open that up here. I want to make the "Microsoft" word a link back to the "Microsoft" page. So, I'm going to wrap a link around the word "Microsoft" and I'm going to make it go back. Now, if the location of the file is in the same folder as your current file, so I'm in "Bill Gates" then, we can just put in the file name. Now, there's no other pages here in the "Bill Gates" folder, which is where I'm in right now, I'm in this "Bill Gates" file.

So, it looks around and it's not going to find anything. So, I've got to get out of this folder to get back to the main folder, where everything else is. So, how do I go back a folder? We've seen how we go in a folder, we just say the folder name and this could be "Folder1/Folder2/Folder3" and you can go as many different folders deep as you want. You just keep putting "Folder Name/Folder Name" and then you eventually get to the file name. That's how you go into directories. But, how do you go out of them? "../" so "../" goes out of the current directory and it backs up one level and each time you want to go back out of a folder, you do another "../".

So that would back up two folders but I don't want to do that, I want to just go out of one folder. And then I am in this main folder right now, so I've exited the "People" folder and now I'm in the main, what we call the root directory of this particular website. And then I want to go to the "Microsoft.html". So, I will then go to "Microsoft.html". So, exit the current "People" folder and then go find "Microsoft" and that would work. So then I can go and hit refresh and "Microsoft" is a link now, so I can click it and now I can go back and forth between those two pages. Be careful because if you rename or move files later on, you're going to break the links that you've already made. For example, if I move "Bill Gates" back out of the "People" folder and if I don't fix those links, then I'm going to have some broken links. So, I can try to go to "Bill Gates", oh, it's not going to be found. And so, you'd have to go back and you'd have to say, "Oh, okay, well 'Bill Gates' is no longer in the 'People' folder, " save that. And in the "Bill Gates" file itself, which I have to close because I just moved that file itself, so let me open that back up again. That's no longer in a "People" folder, so I no longer have to go out of that "People" folder. I can just go say, "Hey, 'Bill Gates' and 'Microsoft', those are in the same folder now, " which they are, "Bill Gates" and "Microsoft" are right next to each other. So, I'd have to update in this case just two links.

But imagine on a bigger website, you'd have to update more links. So, ideally, choose your names for your files and your locations, your folder structure as early as possible to avoid later changes. Of course, you can always change them but it's additional work. So that's how links work in html whether they are going to a website or linking within the website.