Anchor Tags

Links make the Internet the engaging and interactive place that it is. 0:00 They make it possible to share articles, and recipes, and 0:04 cat videos with our loved ones. 0:06 Links are what we use to string together related web pages to create 0:08 whole websites. 0:12 The Internet without links would be a lonely sea of single, isolated web pages. 0:13 An anchor tag is how we create clickable links. 0:19 Let's turn one of the new paragraphs we just made in the last video 0:21 into a clickable link. 0:24 So, I'm going to type a before the text and copy and paste this 0:26 closing tag on the other side, so that the text is enclosed within the anchor tag. 0:31 Let's refresh and take a look. 0:37 Whatever content is between our anchor tags is going to be clickable. 0:39 It looks like a clickable link now but if you click on it, nothing actually happens. 0:42 It's just a place holder hyperlink. 0:47 This is where the href attribute comes in. 0:49 Href stands for Hypertext Reference. 0:53 That's how we tell the browser where we want the browser to go, 0:55 when the user clicks a link. 0:58 We can link to somewhere else on the page or to a different page entirely. 1:00 As an example of how to link to a different place on the page, 1:04 lets go back to index.html. 1:08 And on this a, we'll type an href attribute. 1:11 And in the quotes, we can put #top, save, refresh that. 1:15 And now if we click on this link, it takes us to the top of the page. 1:22 Next, I'll show you how to make an image clickable. 1:27 Let's go back to index.html, and find the image that we were playing with earlier. 1:31 Let's copy that whole thing, and 1:37 paste it right here next to where it says, this is a third paragraph. 1:40 We'll save that, refresh. 1:44 And if we look down here, now we can click on this image. 1:49 And it takes us to the top of the page. 1:53 Let's go down to the footer, and 1:55 see how to use anchor text to link to an outside page. 1:57 So if we look at these social media links down here in the footer. 2:02 We can see that they don't actually lead anywhere. 2:06 In the href, there is a # symbol. 2:08 Which pretty much does the same thing as #top does. 2:11 Which is it takes you to the top of the page, if you click on it. 2:15 So let's set this Twitter link so that it actually goes to Twitter. 2:18 And we'll do that by deleting this # sign and 2:22 typing the full link to your Twitter handle. 2:26 Save, refresh and now the link goes to Twitter. 2:33 Quick tip, if you want users to be able to see your Twitter post by opening a new tab 2:38 in the browser rather than navigating away from your website. 2:43 You can add a third attribute to the anchor element called target blank. 2:46 So here, we can type a new attribute called target. 2:52 And in the quotes, _blank, save. 2:56 Now we can go back to the profile project and refresh. 3:03 And when we click on the Twitter link, 3:07 you can see up here that it opened in a new tab. 3:10 And the profile project is still open. 3:12 We can also set anchor tags to click through to different pages 3:15 on our own website. 3:18 We'll get into more detail about that in the last section of this course, 3:19 when we learn how to set up a new page. 3:23