Creating HTML Links

Quick reference

• 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.