FREELessons: 32Length: 5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.7 Anchors

[SOUND] Today we're going to learn about anchor tags and this allows us to connect one page to another. And this can be a local page or we can even link to a different website. So let's take a look, I'm gonna add a paragraph tag and I would like to say, visit me at my site. I would like to make my website a link to my personal website. So, we do that by wrapping it within an anchor tag. We do that, it has an element name of a and we can do it like this, so let's wrap it. But, then this alone will not work. Let's see though what happens when we view it in the browser. And as you can see here, even though my website is wrapped within an anchor element, it's not even receiving any styling. So we need to add a specific attribute that specifies what we are linking to. That is vital, and it's required for all anchor tags for obvious reasons. So we do that by speccing href. Some people will say heref, you'll also hear people say h-ref. Either will do. Now we need to say what are we referring to? What are we referencing? So we will link to my personal website in this case. Now I will save it again and let's review it one more time. And now you'll see that, the browser has provided some default styling for anchor text. We can see here that it makes the text blue or purplish, for visited websites. And it also makes the text underlined to help specify that it is a link. But remember, you can override every single one of these things. So now let's click on it and see where we go. Now it's taken me to my personal website, good. But notice we've lost our current page, and that's fine and it is considered a best practice, don't always open up new windows. That said though, you should know how to do it because sometimes it does make sense to do so. So if we want to specify that this link should open within a new tab, I can add another attribute name. And you'll notice that some editors will provide some hints. In this case we're going to specify target. What is the target of this link? And I'm going to say open it in a blank, notice I've done underscore blank tab. So let's save it and I'm going to reload the page and this time when I click it. Notice that it creates a new tab that links to my website. You'll probably wanna keep it like this unless you have a specific reason why you need the person to stay on your website. But don't be greedy and, and do that by default, because it tends to irritate people. Now what if we want to link to a local page? So right now, I have one page that I'm storing on my desktop. And you can see it's right here. So I will add a new file. This ones gonna be called how bout about and this will be our about page. Now I'm going to copy everything here and, we'll say my about page and now on this page we want to be able to link to a page that describes who we are. So, lets give it some quick info. First, the heading one, what's most important on this page, about me. That way they know exactly what they're getting if all they read was this h1 tag. And then we'll say, that looks good to me. So, now I'm going to link to this page. And I will say right here, lean more about me. And now we're going to take about me, or we can take the entire string, why don't we do that? And we're going to wrap it. Once again we're using an anchor element, and we're going to specify and attribute name of href, or href, and an attribute value. And this time, because it's in the exact same directory, in my case, the desktop directory, I can simply reference it like so, about.html. Come back and I will reload the page. And now notice because I have never visited this site before, it's not showing that purplish color, it's showing blue. So I'm gonna click on it, and now we are on the, about me section. So this is the basic concept between if you are building a static website. Now a static website is simply a website that is not using a database. It's not determining content dynamically. It's static, meaning every bit is coded in simple markup and we're not using any kind of server site language, because you're not ready for that just yet. But now we have, about me, but how do we get back to our homepage. Well this is why you would normally have a navigation section, that would be present on every page. But for now, let's simply add one more link back to the home page. And we'll call this, Back to Home, and once again reference it with an anchor tag linking to index.html. Now one more time I load the page and now I can return home. I can go back and forth, and notice this time because these pages have been visited, the browser has specific styling that says, If this anchor tag has been visited, meaning it is in your browser history, then you're going to style it this way so the user has a quick little note to know, I have been here before. Now, coming back to local references, this works because both of these files are stored within the root folder. So why don't we do this, I'm gonna create a new folder, because you will find with all of your projects they will be contained with in a root folder. So I'm going to say, learning. I'm going to take each of these and drag them in like so. Next I'm going to create an additional directory and maybe this will be, be about folder because this is going to contain everything related to the about me page. So I will drag that and bring it in like so. And now let's see what happens with this alone. So first I need to update my projects. I'm going to close each of these out and now I'm going to drag this new learning folder back into my editor. Now, you can see we can reference the folder. So, let's see what has changed now. Let's come back, and now we are referencing Desktop/learning/index.html. So, let's see if this link works. If I click it. Nope, that didn't work, because we are trying to reference, or we are trying to find, and about.html file that's within the root, and it's not in the root anymore, it's within an about folder. So we reference about folders by using the name of the folder followed by a forward slash. In this case, we would do about, because that's the name of this folder right here, and then followed by a forward slash like so. Now let's try it. Refresh. Click on it, and now we are correctly referencing it. So always make sure that you reference the folder names and you're not always assuming that every file will be within the same directory. But we also must remember, the same is true for linking out of directories. This link will not work as well, because now we're trying to link to index.html within the about directory, but of course, that's not contained within there. So to go up a directory meaning from the about go up to the next parent directory and then look for a file called index.html. We do period, period forward slash. If you're familiar with the terminal or the command line at all, this will look very familiar to you. So, now, we're saying, go up to the parent directory and then look for, whoops, I am in the wrong file. Let's do it one more time. Go up to the parent directory and then look for index.html. Let's try it again. Refresh. And there we are. So now we are learning how to connect files that are in different folders. Let's take a look at one last thing before we finish up today. Notice how we are referencing an about folder, but then we duplicate that again. So we have about, about. Now what you'll find is when you name a file, index.html, as we've done right here. That becomes the default file to display for a folder. So, for example, if we come back to our root learning directory, and I don't type in anything, it will still render the index.html file, click it. And in this case it's not because we are on our local system, but by default it should do that. If you have it on a website, this is identical to this. That in mind, if we have an about folder, we should be able to link automatically to the index.html file. We should be able to change about.html to index. Because these are not within the same folder, you can have multiple files with the same name. So I will do that right now. Rename it to index. Now, if we load the page, this will load instantly once you upload it to your web host. So that is the essentials of what you need to know about using anchor text. It's really not that difficult, is it? In the next lesson you're going to get to have some fun because we're finally gonna learn the very, very basics of working with cascading style sheets, or CSS.

Back to the top