Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:15Length:1.2 hours
Getstartedhtmlcss
  • Overview
  • Transcript

3.2 Hyperlinks

Now that we have our navigation items printed out, lets spin up some pages and actually create links between all of them. You will learn how to create HTML anchor tags and turn them into proper hyperlinks using the href attribute.

3.2 Hyperlinks

Welcome back, in this lesson we're going to take a look at setting up hyperlinks. Hyperlinks give your users the ability to click on text throughout the website and be taken to different parts of your website or completely different websites altogether. So when the user comes to our website and clicks the About Us text, I want them to be taken to an About Us page. Same goes for the Company Timeline, CEO Bio, Contact Us, etc. We can also set up links to external sites, and I'll be sure to show you how to do that, too. Let's get started. So I'm going to toggle to my Sublime text editor. I'm going to find the About Us link, cuz that's the first link I want to create on this webpage. So just down from Home, I find About Us. And I'm going to surround it with what's called an anchor tag. So, I'm gonna use a, and then I'm going to pass in the href attribute, and I want people to click on About Us and be taken to about.html. I'll close that a tag, save it, and toggle back to my webpage. When I refresh, I now see that About Us has turned blue and underlined and when I move my mouse to hover over About Us. In the lower left-hand corner of my browser, we see that if I was to click on that link, it would take us to the about.html. Now there are a couple of things we need to do to make this really work. One, we don't actually have an about.html file set up yet, so we need to create that. Two, we should probably get these files moved into a directory. Notice at the bottom left, it says if we were to click the link, we'd go to file ///users/alex/Desktop/about.html. Well in a real live web server, we want this to be in its own home directory. So the first thing I'm going to do is minimize everything else, and create a folder for all of these files to start going in. And to keep things simple, I'll just name it the home directory. So now I'll drag index.html into the home folder, and this is where we will put all of our HTML files going forward. While we're at it, it's a good time to reset our Sublime so it looks at the entire folder structure, and not just a single file. So I'm gonna close out of index.html in Sublime And then I'm gonna go grab the entire home folder and drag it over Sublime's icon. That way it brings up the entire folder structure so we can start creating more pages pretty quickly and easily. Let's double click on index.html to open it back up again. And what I basically want to do is create an entire copy of this page but just change the main content in order to create the about.html page. So, I'm going to use a Cmd+A to select everything and a Cmd+C to copy. Then, I'm going to right-click on the Home folder to create a new file. I'll immediately save this file as about.html. It'll automatically save it into my home folder. So all I need to do is paste in the text that I just copied and save it. Now let's get rid of all of the Home page text and replace it with some About Us page text. So all of this stuff that's in here as our Home page we'll get rid of, so pretty much everything inside this main div, we'll clear out. And let's just create a h2 tag that says this is the About Us page. We'll leave it like that for now. We'll save it. We'll come back to the website and we'll refresh. And you'll notice we got a this webpage is not found. Remember, we moved the index.html into its own sub-folder. So, I need to change the URL here to add that sub-folder in from desktop to be desktop/home/index.html. Now it's working again. And now, when we click the about us, it will go to home/about.hmtl and we'll see, this is our About Us page. The link works, so now that you have a basic understanding of how links work, let's go ahead and take care of this side bar. Company Timeline, CEO Bio, Social Media, Contact Us, basically all of the pages. We're gonna toggle back to the text editor, I'm gonna start creating a Company Timeline, so a href equals company.html. And we'll surround company timeline with that anchor tag. So I'll go ahead and close it at the very end of timeline with a /a. We'll do the same thing for CEO Bio. So once again, open the anchor tag, href equals CEO.html and go ahead and close that off at the end Bio. And Social Media goes the exact same way. We'll open an anchor tag, href it, put social.html, and then at the end we'll go ahead and close off that anchor tag. Notice how I surround the text with the anchor tag. The text is what I want someone to click. The href is where I want to send them. So once again when they contact us it's a href equals contact.html and then at the end of contact, I'll go ahead and close that anchor tag. We toggle back and refresh, and we see that all of our links have been set. So now all we have to do is create pages for these links. Because if somebody comes to our website right now, and clicks company timeline, they're going to see a webpage that's not found. That's because we don't actually have company.html created yet. Let's do that now. We're going to click back so we can see the actual website, Toggle into Sublime text editor, and I'm going to right click, and create a new file. And once again, since I want a copy of basically what all the other pages look like, with just a little bit of change in the main content. I'm going to go back to about.html, highlight all of that content, copy it with Cmd+C, and then come back to the untitled page, paste it with a Cmd+V. And then save the page as company.html. And where we have the h2 saying this is the About Us page, I'm going to change it to the This is the Company Timeline page and save it once again. I'll repeat this step for the CEO Bio. So, right click, New File, paste it in, and change the About Us text to say CEO Bio. And we'll save that page as ceo.html. Now it's time to do the Social page. So once again, go up to home folder, right-click New File, paste in the text, we'll change this text to actually say Social, we'll save that as social.html. And the last page is the Contact Us. So we'll go ahead and create a new file, paste in the text, save it as contact.html. And we need remember to change this to the Contact Us page. And we'll save that down as well. Let's toggle back, refresh. And let's check these pages to make sure they work. Company Timeline goes to company. CEO, Social Media, Contact Us, all of the links are properly linked up to their right pages. But what if we want to include a link to a completely different website like Google or Touch Plus? Let's do that now. Toggle back to Sublime. Find the Contact Us and let's add a new list item with an anchor tag inside of it below that. And we'll send everybody to http://www.tutsplus.com. The text will be I learned this at tuts+. We'll save that, we'll go back to our website and refresh. We have a new link that says, I learned this at tuts+. When someone clicks on it they're taken to tutsplus.com. It's that simple. Now let's go back to our website and take a look at all that we've accomplished. We've created several new web pages, and moved them all into a directory folder. They're all linked up, so that we actually have a proper navigation on the sidebar. And we can even link to external sites. You may be wondering why I didn't link up the Home page. Well, in the next video we're going to replace that Home page link with an actual image. And I'm going to show you how to put images anywhere you like on your web page. Thanks for watching.

Back to the top