[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.19,0:00:02.68,Default,,0000,0000,0000,,Links are \Na great way of connecting
Dialogue: 0,0:00:02.68,0:00:04.76,Default,,0000,0000,0000,,one webpage to another webpage.
Dialogue: 0,0:00:04.76,0:00:07.24,Default,,0000,0000,0000,,But they can also connect \None part of a webpage
Dialogue: 0,0:00:07.24,0:00:09.49,Default,,0000,0000,0000,,to another part of that same webpage,
Dialogue: 0,0:00:09.49,0:00:13.82,Default,,0000,0000,0000,,especially on really long webpages, \Nlike for a table of contents.
Dialogue: 0,0:00:13.82,0:00:16.88,Default,,0000,0000,0000,,I have now added \Na bunch more information to this page,
Dialogue: 0,0:00:16.88,0:00:19.50,Default,,0000,0000,0000,,so that I could give you a \Nhistory of the web,
Dialogue: 0,0:00:19.50,0:00:21.85,Default,,0000,0000,0000,,and a history of HTML versions.
Dialogue: 0,0:00:21.85,0:00:26.05,Default,,0000,0000,0000,,And I think it's enough content that \Nit deserves a table of contents.
Dialogue: 0,0:00:26.05,0:00:29.42,Default,,0000,0000,0000,,And I've started one up here, \Njust an unordered list,
Dialogue: 0,0:00:29.42,0:00:32.83,Default,,0000,0000,0000,,with list items \Nwith each of the section titles.
Dialogue: 0,0:00:32.83,0:00:35.23,Default,,0000,0000,0000,,And I want to link each of these \Nsection titles,
Dialogue: 0,0:00:35.23,0:00:38.56,Default,,0000,0000,0000,,so that you can click them, \Nand just go to that part of the page.
Dialogue: 0,0:00:38.56,0:00:41.70,Default,,0000,0000,0000,,To do that, I once again \Nuse the `` tag,
Dialogue: 0,0:00:41.70,0:00:45.11,Default,,0000,0000,0000,,so I'll start by just \Nwrapping this title
Dialogue: 0,0:00:45.11,0:00:48.56,Default,,0000,0000,0000,,in the start and end tags for ``
Dialogue: 0,0:00:48.56,0:00:54.62,Default,,0000,0000,0000,,Now, what should go \Nas the href of this link?
Dialogue: 0,0:00:54.62,0:00:57.81,Default,,0000,0000,0000,,Well, we need to somehow \Ntell the browser
Dialogue: 0,0:00:57.81,0:00:59.93,Default,,0000,0000,0000,,where to jump to in the webpage.
Dialogue: 0,0:00:59.93,0:01:03.31,Default,,0000,0000,0000,,Some way of uniquely identifying \Nthat part of the page.
Dialogue: 0,0:01:03.31,0:01:06.34,Default,,0000,0000,0000,,If you've learnt CSS selectors already,
Dialogue: 0,0:01:06.34,0:01:09.11,Default,,0000,0000,0000,,you've actually seen \Nhow to do this, in fact.
Dialogue: 0,0:01:09.11,0:01:13.77,Default,,0000,0000,0000,,We can do it by adding \Nan `` attribute to a tag.
Dialogue: 0,0:01:13.77,0:01:18.66,Default,,0000,0000,0000,,Let's scroll down \Nand find the heading here.
Dialogue: 0,0:01:18.66,0:01:22.79,Default,,0000,0000,0000,,And we'll add an `` attribute \Nto this heading.
Dialogue: 0,0:01:22.79,0:01:25.37,Default,,0000,0000,0000,,So I'm going to put my cursor in ``,
Dialogue: 0,0:01:25.37,0:01:27.43,Default,,0000,0000,0000,,type `id = "`
Dialogue: 0,0:01:27.43,0:01:30.08,Default,,0000,0000,0000,,and come up with \Na good identifier that's unique,
Dialogue: 0,0:01:30.08,0:01:32.96,Default,,0000,0000,0000,,like "web-history".
Dialogue: 0,0:01:32.96,0:01:35.78,Default,,0000,0000,0000,,Okay, let's scroll back up to the link.
Dialogue: 0,0:01:35.78,0:01:39.56,Default,,0000,0000,0000,,And now, in order to tell the browser \Nto go to this internal link,
Dialogue: 0,0:01:39.56,0:01:41.80,Default,,0000,0000,0000,,we need to start with a hash sign,
Dialogue: 0,0:01:41.80,0:01:45.94,Default,,0000,0000,0000,,and then type exactly the id \Nlike we typed it below.
Dialogue: 0,0:01:45.94,0:01:48.09,Default,,0000,0000,0000,,Okay, so now,
Dialogue: 0,0:01:48.09,0:01:51.36,Default,,0000,0000,0000,,pause this talk-through, \Nand try clicking the link.
Dialogue: 0,0:01:51.36,0:01:56.39,Default,,0000,0000,0000,,Go on, I will wait. \NClicky-clicky!
Dialogue: 0,0:01:56.39,0:01:59.58,Default,,0000,0000,0000,,Okay, did you see it scroll down\Nto this section?
Dialogue: 0,0:01:59.58,0:02:01.21,Default,,0000,0000,0000,,Then it worked!
Dialogue: 0,0:02:01.21,0:02:02.88,Default,,0000,0000,0000,,We can add more links like that
Dialogue: 0,0:02:02.88,0:02:05.56,Default,,0000,0000,0000,,by putting the id attributes on, \Non every heading,
Dialogue: 0,0:02:05.56,0:02:07.70,Default,,0000,0000,0000,,and making `` tags \Nthat point at them.
Dialogue: 0,0:02:07.71,0:02:09.50,Default,,0000,0000,0000,,But I'll leave that for you to try.
Dialogue: 0,0:02:09.50,0:02:12.15,Default,,0000,0000,0000,,The big to remember \Nis that the IDs must be unique,
Dialogue: 0,0:02:12.15,0:02:15.37,Default,,0000,0000,0000,,because otherwise the browser \Nwon't know where to jump to.
Dialogue: 0,0:02:15.37,0:02:17.83,Default,,0000,0000,0000,,So make them nice and descriptive.