0:00:00.000,0:00:02.843 - [Voiceover] You've already learnt[br]a bunch of HTML tags. 0:00:03.000,0:00:04.800 But do you know what HTML actually means? 0:00:04.850,0:00:09.091 HTML stands for [br]HyperText Markup Language. 0:00:11.470,0:00:14.177 It's a way of using tags [br]to markup content. 0:00:14.181,0:00:16.860 But what does hypertext mean? 0:00:16.869,0:00:20.494 It's actually a phrase that was invented[br]before the Internet even existed, 0:00:20.494,0:00:23.823 in the 1960s, to mean[br]text that is connected to other text 0:00:23.823,0:00:26.263 that the reader can immediately jump to. 0:00:26.273,0:00:29.720 Tim Berners-Lee invented HTML, 0:00:29.720,0:00:32.756 and other ingredients [br]of the Internet, like HTTP, 0:00:32.787,0:00:34.912 to be a way to connect [br]text to other text 0:00:34.912,0:00:36.722 located anywhere in the world. 0:00:36.751,0:00:39.191 How do we connect[br]webpages to other webpages 0:00:39.191,0:00:41.280 in HyperText Markup Language? 0:00:41.282,0:00:43.451 With a hyperlink, of course! 0:00:43.451,0:00:46.280 Which we usually just call a link, now. 0:00:46.280,0:00:48.599 How do we make a link in HTML? 0:00:48.636,0:00:50.304 This is where it gets weird. 0:00:50.304,0:00:52.770 You might think that we'd use [br]a `link` tag... 0:00:52.770,0:00:57.633 But actually, that's used for [br]a different sort of link in HTML. 0:00:57.633,0:01:03.106 Instead, we use the `a` tag, [br]where the "a" stands for "anchor". 0:01:03.172,0:01:06.453 It's anchoring the link in the page [br]at a certain location 0:01:06.453,0:01:09.420 and connecting that anchor[br]to a different webpage. 0:01:09.443,0:01:11.989 To make a link, you know[br]we have to write the tag, 0:01:11.989,0:01:14.621 but we also have to decide [br]on the text of the link, 0:01:14.621,0:01:17.219 and then the address [br]that the link goes to. 0:01:17.233,0:01:24.068 Let's make this link to a page with more [br]information about the birth of the web. 0:01:24.068,0:01:29.506 The text of the link will go inside[br]the start and end tags. 0:01:29.599,0:01:31.900 So I'll stick my cursor[br]in here and write, 0:01:31.900,0:01:36.610 "Read more about the history of HTML". 0:01:36.610,0:01:41.017 So now we can see that text [br]looks like a link. 0:01:41.061,0:01:44.317 But it's not going anywhere yet.[br]We need to add an address. 0:01:44.347,0:01:47.480 We don't actually want the address [br]to show up on the page, 0:01:47.480,0:01:49.937 but we still need the browser [br]to know what it is. 0:01:49.990,0:01:53.040 So we put it inside an attribute [br]on the a tag. 0:01:53.088,0:01:56.942 That's the href attribute. 0:01:56.985,0:01:59.749 What does "href" stand for? 0:01:59.769,0:02:03.264 I will give you a hint:[br]You have seen that "h" a lot. 0:02:03.283,0:02:06.124 It stands for "hyper"![br]Hyper-reference. 0:02:06.124,0:02:11.966 Now, I'll paste in the address, [br]which we also call a URL. 0:02:12.036,0:02:15.940 Do you notice how this URL [br]starts with "http:" ? 0:02:16.051,0:02:19.044 Guess what that "h"stands for?[br]Hyper! 0:02:19.084,0:02:21.483 HTML is all about the hyper. 0:02:21.553,0:02:25.664 This URL specifies everything the browser[br]needs to know to find the webpage: 0:02:25.724,0:02:27.965 The protocol used for finding it, 0:02:28.035,0:02:30.357 the domain it is on, 0:02:30.457,0:02:34.265 and the path that it's located in [br]on the server. 0:02:34.294,0:02:38.579 Since it specifies everything, [br]we call this an "absolute URL". 0:02:38.622,0:02:43.499 On some webpages, you might see URLs [br]that start with just slash and a path. 0:02:43.562,0:02:46.179 That tells the browser to stay[br]on the current domain, 0:02:46.179,0:02:48.634 and just look for a different path[br]on that domain. 0:02:48.645,0:02:50.631 That's called a "relative URL". 0:02:50.682,0:02:54.054 We use them all over Khan Academy[br]when we link between our content. 0:02:54.136,0:02:57.623 You should stick to absolute URLs [br]in the webpages that you make here, 0:02:57.623,0:02:59.288 to stay on the safe side. 0:02:59.321,0:03:02.146 We can also tell the browser [br]where to open the page: 0:03:02.146,0:03:04.728 the current window,[br]or a new window. 0:03:04.769,0:03:07.061 To tell the browser to open[br]a link in a new window, 0:03:07.061,0:03:10.748 we'll add another attribute, target. 0:03:10.796,0:03:15.258 `target="_blank"` 0:03:15.288,0:03:19.406 Now, I want you to pause this [br]talk-through and try clicking the link. 0:03:19.444,0:03:23.373 Go ahead, I'll wait.[br]Clicky-clicky! 0:03:23.393,0:03:24.372 What happened? 0:03:24.432,0:03:25.802 You probably saw a warning 0:03:25.802,0:03:28.244 about the link being [br]from a user-generated webpage. 0:03:28.244,0:03:30.625 And then if you clicked "OK", [br]the link opened up. 0:03:30.676,0:03:33.122 That's because [br]we treat links a little special 0:03:33.122,0:03:34.395 on the webpages made here. 0:03:34.423,0:03:37.797 Because we don't want users thinking [br]that links are specially endorsed 0:03:37.797,0:03:41.054 by Khan Academy and then landing [br]on a scary, unexpected website. 0:03:41.066,0:03:43.992 So, every link that you make here [br]will have that warning, 0:03:43.992,0:03:46.163 and every link will pop up [br]in a new window. 0:03:46.300,0:03:50.223 That means that I can actually [br]delete this target attribute, 0:03:50.223,0:03:53.048 since it's getting set [br]behind the scenes, too. 0:03:53.088,0:03:54.420 Or, I could leave it, 0:03:54.420,0:03:57.764 in case I want to move this HTML [br]off of Khan Academy one day 0:03:57.764,0:04:00.840 and make sure that link still opens [br]in a new window. 0:04:00.870,0:04:02.723 When should you use target? 0:04:02.783,0:04:06.302 Generally, if a link is going [br]to another page on the same domain, 0:04:06.302,0:04:08.023 it should open in the same window. 0:04:08.023,0:04:12.179 And if it's going to a page on another[br]domain, it should open in a new window. 0:04:12.239,0:04:13.641 Enough of that blabbing, 0:04:13.641,0:04:16.649 let me show you [br]something else neat about links. 0:04:16.689,0:04:18.653 We can link more than just text. 0:04:18.653,0:04:21.627 We can also link images, [br]or text and images! 0:04:21.656,0:04:26.815 Here, we have this image, which is[br]which is this picture of Tim Berners-Lee. 0:04:26.867,0:04:30.454 I'm going to actually cut it... 0:04:30.464,0:04:34.067 and paste it so that it's inside [br]this link here. 0:04:34.094,0:04:36.068 Oh! Sweet. 0:04:36.068,0:04:38.958 Now, if I mouse-over this image, 0:04:38.958,0:04:41.309 I'll see my cursor change to a pointer, 0:04:41.309,0:04:44.379 and clicking it will go [br]to the CERN webpage. 0:04:44.379,0:04:46.948 In fact, you could link[br]your entire webpage -- 0:04:46.948,0:04:49.867 and make it [br]a big, blue, underlined blob. 0:04:49.867,0:04:57.000 But please don't do that! [br]Link with love, my friends.