[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:02.84,Default,,0000,0000,0000,,- [Voiceover] You've already learnt\Na bunch of HTML tags.
Dialogue: 0,0:00:03.00,0:00:04.80,Default,,0000,0000,0000,,But do you know what HTML actually means?
Dialogue: 0,0:00:04.85,0:00:09.09,Default,,0000,0000,0000,,HTML stands for \NHyperText Markup Language.
Dialogue: 0,0:00:11.47,0:00:14.18,Default,,0000,0000,0000,,It's a way of using tags \Nto markup content.
Dialogue: 0,0:00:14.18,0:00:16.86,Default,,0000,0000,0000,,But what does hypertext mean?
Dialogue: 0,0:00:16.87,0:00:20.49,Default,,0000,0000,0000,,It's actually a phrase that was invented\Nbefore the Internet even existed,
Dialogue: 0,0:00:20.49,0:00:23.82,Default,,0000,0000,0000,,in the 1960s, to mean\Ntext that is connected to other text
Dialogue: 0,0:00:23.82,0:00:26.26,Default,,0000,0000,0000,,that the reader can immediately jump to.
Dialogue: 0,0:00:26.27,0:00:29.72,Default,,0000,0000,0000,,Tim Berners-Lee invented HTML,
Dialogue: 0,0:00:29.72,0:00:32.76,Default,,0000,0000,0000,,and other ingredients \Nof the Internet, like HTTP,
Dialogue: 0,0:00:32.79,0:00:34.91,Default,,0000,0000,0000,,to be a way to connect \Ntext to other text
Dialogue: 0,0:00:34.91,0:00:36.72,Default,,0000,0000,0000,,located anywhere in the world.
Dialogue: 0,0:00:36.75,0:00:39.19,Default,,0000,0000,0000,,How do we connect\Nwebpages to other webpages
Dialogue: 0,0:00:39.19,0:00:41.28,Default,,0000,0000,0000,,in HyperText Markup Language?
Dialogue: 0,0:00:41.28,0:00:43.45,Default,,0000,0000,0000,,With a hyperlink, of course!
Dialogue: 0,0:00:43.45,0:00:46.28,Default,,0000,0000,0000,,Which we usually just call a link, now.
Dialogue: 0,0:00:46.28,0:00:48.60,Default,,0000,0000,0000,,How do we make a link in HTML?
Dialogue: 0,0:00:48.64,0:00:50.30,Default,,0000,0000,0000,,This is where it gets weird.
Dialogue: 0,0:00:50.30,0:00:52.77,Default,,0000,0000,0000,,You might think that we'd use \Na `link` tag...
Dialogue: 0,0:00:52.77,0:00:57.63,Default,,0000,0000,0000,,But actually, that's used for \Na different sort of link in HTML.
Dialogue: 0,0:00:57.63,0:01:03.11,Default,,0000,0000,0000,,Instead, we use the `a` tag, \Nwhere the "a" stands for "anchor".
Dialogue: 0,0:01:03.17,0:01:06.45,Default,,0000,0000,0000,,It's anchoring the link in the page \Nat a certain location
Dialogue: 0,0:01:06.45,0:01:09.42,Default,,0000,0000,0000,,and connecting that anchor\Nto a different webpage.
Dialogue: 0,0:01:09.44,0:01:11.99,Default,,0000,0000,0000,,To make a link, you know\Nwe have to write the tag,
Dialogue: 0,0:01:11.99,0:01:14.62,Default,,0000,0000,0000,,but we also have to decide \Non the text of the link,
Dialogue: 0,0:01:14.62,0:01:17.22,Default,,0000,0000,0000,,and then the address \Nthat the link goes to.
Dialogue: 0,0:01:17.23,0:01:24.07,Default,,0000,0000,0000,,Let's make this link to a page with more \Ninformation about the birth of the web.
Dialogue: 0,0:01:24.07,0:01:29.51,Default,,0000,0000,0000,,The text of the link will go inside\Nthe start and end tags.
Dialogue: 0,0:01:29.60,0:01:31.90,Default,,0000,0000,0000,,So I'll stick my cursor\Nin here and write,
Dialogue: 0,0:01:31.90,0:01:36.61,Default,,0000,0000,0000,,"Read more about the history of HTML".
Dialogue: 0,0:01:36.61,0:01:41.02,Default,,0000,0000,0000,,So now we can see that text \Nlooks like a link.
Dialogue: 0,0:01:41.06,0:01:44.32,Default,,0000,0000,0000,,But it's not going anywhere yet.\NWe need to add an address.
Dialogue: 0,0:01:44.35,0:01:47.48,Default,,0000,0000,0000,,We don't actually want the address \Nto show up on the page,
Dialogue: 0,0:01:47.48,0:01:49.94,Default,,0000,0000,0000,,but we still need the browser \Nto know what it is.
Dialogue: 0,0:01:49.99,0:01:53.04,Default,,0000,0000,0000,,So we put it inside an attribute \Non the a tag.
Dialogue: 0,0:01:53.09,0:01:56.94,Default,,0000,0000,0000,,That's the href attribute.
Dialogue: 0,0:01:56.98,0:01:59.75,Default,,0000,0000,0000,,What does "href" stand for?
Dialogue: 0,0:01:59.77,0:02:03.26,Default,,0000,0000,0000,,I will give you a hint:\NYou have seen that "h" a lot.
Dialogue: 0,0:02:03.28,0:02:06.12,Default,,0000,0000,0000,,It stands for "hyper"!\NHyper-reference.
Dialogue: 0,0:02:06.12,0:02:11.97,Default,,0000,0000,0000,,Now, I'll paste in the address, \Nwhich we also call a URL.
Dialogue: 0,0:02:12.04,0:02:15.94,Default,,0000,0000,0000,,Do you notice how this URL \Nstarts with "http:" ?
Dialogue: 0,0:02:16.05,0:02:19.04,Default,,0000,0000,0000,,Guess what that "h"stands for?\NHyper!
Dialogue: 0,0:02:19.08,0:02:21.48,Default,,0000,0000,0000,,HTML is all about the hyper.
Dialogue: 0,0:02:21.55,0:02:25.66,Default,,0000,0000,0000,,This URL specifies everything the browser\Nneeds to know to find the webpage:
Dialogue: 0,0:02:25.72,0:02:27.96,Default,,0000,0000,0000,,The protocol used for finding it,
Dialogue: 0,0:02:28.04,0:02:30.36,Default,,0000,0000,0000,,the domain it is on,
Dialogue: 0,0:02:30.46,0:02:34.26,Default,,0000,0000,0000,,and the path that it's located in \Non the server.
Dialogue: 0,0:02:34.29,0:02:38.58,Default,,0000,0000,0000,,Since it specifies everything, \Nwe call this an "absolute URL".
Dialogue: 0,0:02:38.62,0:02:43.50,Default,,0000,0000,0000,,On some webpages, you might see URLs \Nthat start with just slash and a path.
Dialogue: 0,0:02:43.56,0:02:46.18,Default,,0000,0000,0000,,That tells the browser to stay\Non the current domain,
Dialogue: 0,0:02:46.18,0:02:48.63,Default,,0000,0000,0000,,and just look for a different path\Non that domain.
Dialogue: 0,0:02:48.64,0:02:50.63,Default,,0000,0000,0000,,That's called a "relative URL".
Dialogue: 0,0:02:50.68,0:02:54.05,Default,,0000,0000,0000,,We use them all over Khan Academy\Nwhen we link between our content.
Dialogue: 0,0:02:54.14,0:02:57.62,Default,,0000,0000,0000,,You should stick to absolute URLs \Nin the webpages that you make here,
Dialogue: 0,0:02:57.62,0:02:59.29,Default,,0000,0000,0000,,to stay on the safe side.
Dialogue: 0,0:02:59.32,0:03:02.15,Default,,0000,0000,0000,,We can also tell the browser \Nwhere to open the page:
Dialogue: 0,0:03:02.15,0:03:04.73,Default,,0000,0000,0000,,the current window,\Nor a new window.
Dialogue: 0,0:03:04.77,0:03:07.06,Default,,0000,0000,0000,,To tell the browser to open\Na link in a new window,
Dialogue: 0,0:03:07.06,0:03:10.75,Default,,0000,0000,0000,,we'll add another attribute, target.
Dialogue: 0,0:03:10.80,0:03:15.26,Default,,0000,0000,0000,,`target="_blank"`
Dialogue: 0,0:03:15.29,0:03:19.41,Default,,0000,0000,0000,,Now, I want you to pause this \Ntalk-through and try clicking the link.
Dialogue: 0,0:03:19.44,0:03:23.37,Default,,0000,0000,0000,,Go ahead, I'll wait.\NClicky-clicky!
Dialogue: 0,0:03:23.39,0:03:24.37,Default,,0000,0000,0000,,What happened?
Dialogue: 0,0:03:24.43,0:03:25.80,Default,,0000,0000,0000,,You probably saw a warning
Dialogue: 0,0:03:25.80,0:03:28.24,Default,,0000,0000,0000,,about the link being \Nfrom a user-generated webpage.
Dialogue: 0,0:03:28.24,0:03:30.62,Default,,0000,0000,0000,,And then if you clicked "OK", \Nthe link opened up.
Dialogue: 0,0:03:30.68,0:03:33.12,Default,,0000,0000,0000,,That's because \Nwe treat links a little special
Dialogue: 0,0:03:33.12,0:03:34.40,Default,,0000,0000,0000,,on the webpages made here.
Dialogue: 0,0:03:34.42,0:03:37.80,Default,,0000,0000,0000,,Because we don't want users thinking \Nthat links are specially endorsed
Dialogue: 0,0:03:37.80,0:03:41.05,Default,,0000,0000,0000,,by Khan Academy and then landing \Non a scary, unexpected website.
Dialogue: 0,0:03:41.07,0:03:43.99,Default,,0000,0000,0000,,So, every link that you make here \Nwill have that warning,
Dialogue: 0,0:03:43.99,0:03:46.16,Default,,0000,0000,0000,,and every link will pop up \Nin a new window.
Dialogue: 0,0:03:46.30,0:03:50.22,Default,,0000,0000,0000,,That means that I can actually \Ndelete this target attribute,
Dialogue: 0,0:03:50.22,0:03:53.05,Default,,0000,0000,0000,,since it's getting set \Nbehind the scenes, too.
Dialogue: 0,0:03:53.09,0:03:54.42,Default,,0000,0000,0000,,Or, I could leave it,
Dialogue: 0,0:03:54.42,0:03:57.76,Default,,0000,0000,0000,,in case I want to move this HTML \Noff of Khan Academy one day
Dialogue: 0,0:03:57.76,0:04:00.84,Default,,0000,0000,0000,,and make sure that link still opens \Nin a new window.
Dialogue: 0,0:04:00.87,0:04:02.72,Default,,0000,0000,0000,,When should you use target?
Dialogue: 0,0:04:02.78,0:04:06.30,Default,,0000,0000,0000,,Generally, if a link is going \Nto another page on the same domain,
Dialogue: 0,0:04:06.30,0:04:08.02,Default,,0000,0000,0000,,it should open in the same window.
Dialogue: 0,0:04:08.02,0:04:12.18,Default,,0000,0000,0000,,And if it's going to a page on another\Ndomain, it should open in a new window.
Dialogue: 0,0:04:12.24,0:04:13.64,Default,,0000,0000,0000,,Enough of that blabbing,
Dialogue: 0,0:04:13.64,0:04:16.65,Default,,0000,0000,0000,,let me show you \Nsomething else neat about links.
Dialogue: 0,0:04:16.69,0:04:18.65,Default,,0000,0000,0000,,We can link more than just text.
Dialogue: 0,0:04:18.65,0:04:21.63,Default,,0000,0000,0000,,We can also link images, \Nor text and images!
Dialogue: 0,0:04:21.66,0:04:26.82,Default,,0000,0000,0000,,Here, we have this image, which is\Nwhich is this picture of Tim Berners-Lee.
Dialogue: 0,0:04:26.87,0:04:30.45,Default,,0000,0000,0000,,I'm going to actually cut it...
Dialogue: 0,0:04:30.46,0:04:34.07,Default,,0000,0000,0000,,and paste it so that it's inside \Nthis link here.
Dialogue: 0,0:04:34.09,0:04:36.07,Default,,0000,0000,0000,,Oh! Sweet.
Dialogue: 0,0:04:36.07,0:04:38.96,Default,,0000,0000,0000,,Now, if I mouse-over this image,
Dialogue: 0,0:04:38.96,0:04:41.31,Default,,0000,0000,0000,,I'll see my cursor change to a pointer,
Dialogue: 0,0:04:41.31,0:04:44.38,Default,,0000,0000,0000,,and clicking it will go \Nto the CERN webpage.
Dialogue: 0,0:04:44.38,0:04:46.95,Default,,0000,0000,0000,,In fact, you could link\Nyour entire webpage --
Dialogue: 0,0:04:46.95,0:04:49.87,Default,,0000,0000,0000,,and make it \Na big, blue, underlined blob.
Dialogue: 0,0:04:49.87,0:04:57.00,Default,,0000,0000,0000,,But please don't do that! \NLink with love, my friends.