HTML & CSS Intro Course: Coding Links

Full Video Transcript

Within a website we link between pages and we also link to other websites, so let's see how to create links in HTML. Here I have a local HTML page that I've started. I'm going to open it up in my code editor by right-clicking or control-clicking on the Mac and going to Open With and choosing 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 just so we can see what it looks like as well, so I'm also going to go back to my desktop and open this up in Chrome. You could be using any browser here, it doesn't really matter.

I can actually put these side by side because there's not a lot of content here. So this is how it looks, and let's say some of the text in here I want to link to another website. We'll start by going to a website. For example, let's say I want to go to microsoft.com or The Onion. These are two different websites that I'll be linking to, so I'll navigate there in my browser just to make sure that I have the address right.

Understanding HTTP and HTTPS

Now 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. In this case it's S for secure. So what does HTTP mean? We are writing HTML, Hypertext Markup Language, and so that's the markup language that we use to markup or label our content. That's our tagging language. HTTP is the Hypertext Transfer Protocol. So Hypertext Markup Language, Hypertext Transfer Protocol. This is the protocol that's used to transfer the HTML pages.

S is something that a website can optionally have. S is for secure, so if it's a secure site that encrypts the information between you and the server, then it's HTTPS. Sites that have that enabled are going to be more secure, but it's up to the site to make it so. If it's just HTTP, you can't make the site secure by just adding an S if they didn't set up their website as a secure website.

So whatever the address is, whether it's HTTP or HTTPS, just go with whatever they have set up. When in doubt, do the HTTP if you're just not sure, because it should redirect to the HTTPS version, but you should check it out and just see what they do. Here, for example, 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. This is the full address. Some websites will have WWW and some will not. That's just their preference of how they have the website configured.

Creating Your First Link with the Anchor Tag

So some websites will just be something like theonion.com. Again, go with however they have their site set up. In this case they have the WWW, and so you copy that address and then you can link to that. We have to decide here within our page what text do we want to link there. I've got "The Onion" down here, and I'm going to wrap that in a link.

A link is the A for anchor tag. 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. A is for anchor, as though you think about on a boat when there's an anchor and you're kind of linked to that anchor and it connects you to something. We're going to kind of build a connection, we're going to anchor ourselves to this other page.

You might have thought that this would be maybe something like a link tag, and there is actually a link tag in HTML, but it's not used to link to another page. It's used to link to assets. So A is for anchor. Now by itself you're never going to use just the A tag. There's always an attribute that you're going to put onto the anchor tag, which is the destination of where you're going to go. The text that's in the tag is what you're going to click, that's what's going to look like the link, but where's it going to go?

The HREF Attribute

So always on your opening anchor tag you're going to put on an HREF when you are wanting to link to another web page. Now 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. So it's A HREF. HREF is for hypertext reference. This is a page of hypertext, we're using Hypertext Transfer Protocol to go there, and this is the hypertext reference. We're referencing another page of hypertext.

So 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 now because I've already been to The Onion, but if I hadn't been to The Onion it would be blue. Let me click it just to show you that the link does work, and there it does work.

Visited and Unvisited Link Colors

Let me go back. You can use your browser's back button to go back. So right now it started purple, it stayed purple, but if I go ahead and close that page and I clear my browser's history, because this particular browser knows that I've been to theonion.com. If I go to Chrome and I clear my browsing data, which will have my history, it remembers my browsing history. Let me just clear my browsing history so it forgets all the sites that I've been to.

Now the link is going to be blue because Chrome doesn't remember that I've ever been to that site. So unvisited sites are blue, and when you click on them you'll go visit it, and you come back, and then the visited site, one that you've seen, that is a purple color. You can customize that using CSS, which we're not going to get into right now. We're just going to look at building the links themselves.

Linking to Microsoft

Linking to another website like Microsoft. Now Microsoft is a little bit different because they are a worldwide company and 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 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, but if you were linking to a specific page on a site, like let's say you want to link to this particular page here, you would just copy the full address. But I just want to link to the website in general, so I'm going to link to just the dot com portion of that.

I will copy that and find the Microsoft text. So up here, "Microsoft Corporation," I'm going to wrap a link tag, an A tag, around that at the start and the end. Let's put this on one line just so you can see this all in one line. 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. If I use this little pop-up menu to enter this in, if I hit return to choose this, it does the HREF equals and the quotes for me, so it saves me a little bit of typing. Then I'm going to paste in that address.

So we have the address, let me save it and go back. I'll 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.

Opening Links in New Tabs with the Target Attribute

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 browser window or tab. Browsers are all configured by default 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 here, the anchor 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. So you've 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. 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.

Browser Differences with New Tabs

So I will save that, pop back over to my browser and hit refresh. So now Microsoft will pop open in a new tab, which I can close. Then I can pop open The 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. One of the neat things about Safari actually is 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. This is especially useful on mobile phones where people might not notice that the tab on a phone really is actually like a whole window in a way. The tabs take over the full screen on smaller phones, as opposed to 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. 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.

Relative Linking Within Your Website

Now that's linking to somebody else's websites, 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.

Here in my website I'm in the microsoft.html. What if I want to link over to the Bill Gates file over here? 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 dot com available yet. 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. Because they're in the same folder, I can use this file name. So I'm just going to copy that file name. 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.

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 this, this is in the same folder, that link will work. If I come back here, hit refresh, then that will go to that other page. So the link works.

File Naming Best Practices

Now if I get the name wrong, like I do Bill Gates 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. Speaking of dashes, your file names can't have spaces in them. When you're naming your files, you need to use a dash or an underscore instead of a space. 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. Just in case they are case sensitive, no pun intended there, you need to make sure that when you're linking, you link to the file name exactly as it is. If you keep everything lowercase, it's just much easier and then you don't have to worry about doing upper and lowercase in your file names. But as long as they match, that's fine. Just don't use spaces in your names and it'll work just fine.

Linking to Files in Folders

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. From microsoft it says, "Oh, I found the people," 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.

Navigating Back Out of Folders

How do I get back and forth between pages? Let's say I want to go from the Bill Gates page, I want to go back to... 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, 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. 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. You can go as many different folders deep as you want. You just keep putting folder name slash folder name slash 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? Dot dot slash. So "../" goes out of the current directory and it backs up one level. 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. I've exited the people folder and now I'm in the main, what we call the root directory, of this particular website. Then I want to go to the microsoft.html. So I will then go to microsoft.html. Exit the current people folder and then go find Microsoft, and that would work. 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.

Avoiding Broken Links

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.

You'd have to go back and you'd have to say, "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. I can just 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 and your locations, your folder structure, as early as possible to avoid later changes. Of course you can always change them, but it's just additional work. So that's how links work in HTML, whether they are going to a website or linking within the website.