- 720p
- 540p
- 360p
- 0.50x
- 0.75x
- 1.00x
- 1.25x
- 1.50x
- 1.75x
- 2.00x
We hope you enjoyed this lesson.
Cool lesson, huh? Share it with your friends
About this lesson
Exercise files
Download this lesson’s related exercise files.
Creating HTML Links59.3 KB Creating HTML Links - Solution
59 KB
Quick reference
Creating HTML Links
All web pages contain links. In this videos we'll learn about internal and external links.
When to use
Links are used whenever you want to add the ability to navigate between different web pages or web sites.
Instructions
Internal links look like this:
<a href="page2.html">Page 2</a>
External links look like this:
<a href="http://google.com">Google</a>
To open a link in a new web browser window, use a target attribute:
<a href="http://Google.com" target="_blank">Google</a>
Hints & tips
- Here's an internal link: <a href="page2.html">Page 2</a>
- Here's an external link: <a href="http://google.com">Google</a>
- To open a new web browser window: <a href="http://Google.com" target="_blank">Google</a>
- 00:05 Okay, so we've talked about basic HTML concepts,
- 00:08 we've talked about basic HTML codes and formatting and a little bit CSS.
- 00:12 Now it's time to start talking about slightly more advance topics.
- 00:15 And in this video we're gonna talk about links.
- 00:18 So every website in the world has links and how do you create them?
- 00:21 Well a link Is very easy to do.
- 00:25 First, let's create an <h1> tag.
- 00:27 This is Page 1.
- 00:31 And go ahead and save it.
- 00:33 Let's go click Reload.
- 00:35 This is Page 1.
- 00:36 Okay, so let's come up here and right click on this folder and click new file.
- 00:41 And I'm gonna call this page2.html.
- 00:44 And I'm just gonna copy all this, gonna open up Page 2 and change this to Page 2.
- 00:51 So save it.
- 00:52 So how do we link these two pages together?
- 00:55 We've created these two pages, but if we head back over to our website,
- 00:59 they're not linked in any way.
- 01:00 I can't get from one to another.
- 01:02 I can get there by typing in page2 and then it shows up.
- 01:06 But you don't want your users to have to type in things into the Browser to
- 01:10 navigate your website.
- 01:11 So links are the way to do it.
- 01:12 So let's create a link here.
- 01:14 I'm gonna give this a line break.
- 01:16 And to create a link, it's very easy.
- 01:18 You just go <a.
- 01:19 <a is the link tag, href.
- 01:21 href is an attribute.
- 01:23 It's a link attribute.
- 01:26 And then we have a closing tag.
- 01:29 So to do this in this case, we can do it a couple of different ways.
- 01:32 You can create a hard coded link, and
- 01:35 to do that you get the URL, copy it and paste it in there.
- 01:40 And let's call this Page 2.
- 01:43 And this text right in the middle, that's called, anchor text.
- 01:46 And that's the text that's gonna show up on the page.
- 01:48 So if we save this, go back to our Page 1 and hit Reload.
- 01:52 Actually we need another line break.
- 01:57 Let's put two of them in there.
- 01:58 But now if we click Reload, we see this link right here.
- 02:02 If we click on it, it goes to the next page.
- 02:05 Now that's sort of a hard coded URL.
- 02:07 We don't actually need to do all that and I suggest that you don't do that,
- 02:10 because that URL can change.
- 02:13 What you wanna do is just put it like this, or even like that.
- 02:18 And click Save and if we come back here and hit Reload.
- 02:21 Now if we view our page source.
- 02:23 You can see it just says Page 2, but if we click it, boom it goes to Page 2.
- 02:27 So we can copy all of this and open up our page 2.
- 02:32 Paste this in here and let's change this.
- 02:34 Now what would we have for the URL here, we wanna go to our index page.
- 02:39 So that's index.html and
- 02:43 let's call this Home Page.
- 02:47 So if we save this, come back here and hit Reload, now we have this Home Page link.
- 02:52 And we have Page 2 link and we can navigate back and
- 02:54 forth between them on our website.
- 02:57 So that's pretty cool.
- 02:58 So this is an internal link, right?
- 03:01 If we come back to our index page here, we can create external links as well.
- 03:05 Allow us to put that in there.
- 03:06 And let's go <a href equals
- 03:13 http://google.com.
- 03:19 Type in Google, save it, hit Reload.
- 03:22 Go back to our main page.
- 03:23 Now we see we have this link to Google.
- 03:25 If we click it, we leave the website.
- 03:27 An external link, it goes away from our website.
- 03:29 So, internal link looks like this, external link looks like that.
- 03:34 Pretty simple,
- 03:35 you can also sort of tell the web browser to open up another tab, right?
- 03:39 So say for an internal link, you just wanna keep this tab open.
- 03:43 But if somebody clicks on this external link, maybe you wanna open a whole other
- 03:47 web browser, to do that you just designate a target.
- 03:50 And in this one we give this target = blank.
- 03:53 And blank says hey, open up a blank web browser, a whole other web browser.
- 03:57 If we save this and head back to here and click Reload.
- 04:00 So we hit Page 2, nothing happens if we stay on this web browser.
- 04:03 But if we click this Google, boom, you see up here at the top a whole other browser
- 04:08 window opened and our website still is sitting here.
- 04:11 So that's kind of a good thing to do.
- 04:13 I like to do that whenever I'm pointing out an external link away from my website.
- 04:18 I just sort of like something that I like to do.
- 04:19 So those are links, pretty simple, pretty straight forward.
- 04:22 And in the next video, I wanna start to talk about images.
Lesson notes are only available for subscribers.