Anchor Tags3:25 with Treasure Porth
An anchor tag is how we create clickable links. Links are what we use to string related web pages together to create whole websites.
Anything wrapped in <a> </a> is clickable, even images! Links can point to other pages, to other places on your website, or to links anywhere on the web.
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
You need to sign up for Treehouse in order to download course files.Sign up