Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 00:00:00,920 --> 00:00:06,799 And welcome back! In the previous videos we talked about some of the most common a HTML tags 2 00:00:06,800 --> 00:00:11,530 and how the HTML document is read by the browser. 3 00:00:11,570 --> 00:00:20,449 However we've missed one critical feature of HTML, and if we go back to our diagram here, that we 4 00:00:20,450 --> 00:00:29,809 should remember from the first section the HTML file gets sent to us but the power of HTML is 5 00:00:29,810 --> 00:00:32,689 in its ability to link to other document. 6 00:00:32,690 --> 00:00:40,970 So if I go back here to our website it's a simple one page website but I can't really click on 'fuji', 7 00:00:40,990 --> 00:00:42,490 or 'apple', or 'banana'. 8 00:00:42,730 --> 00:00:44,799 It doesn't link to anything. 9 00:00:44,800 --> 00:00:48,070 There must be a HTML tag that we can use for that right? 10 00:00:48,640 --> 00:00:50,700 Well yes there is. 11 00:00:50,710 --> 00:00:53,200 It's called a anchor tag. 12 00:00:53,320 --> 00:00:56,440 So an anchor tag is very easy just an 'a'. 13 00:00:56,650 --> 00:01:06,100 And this anchor tag has something called an 'href' which is an attribute and it's the hypertext reference. 14 00:01:06,130 --> 00:01:11,289 So in this 'href' you'll be able to link to something. 15 00:01:11,290 --> 00:01:12,360 Let's close this 'a' tag. 16 00:01:12,370 --> 00:01:15,560 An 'a' tag has an opening and closing tag. 17 00:01:16,060 --> 00:01:23,679 And if I save this and refresh the page, well nothing happens because you need something in the anchor 18 00:01:23,680 --> 00:01:24,140 tag. 19 00:01:24,430 --> 00:01:27,540 So let's do "New Page". 20 00:01:27,650 --> 00:01:29,690 I save that, I refresh. 21 00:01:29,920 --> 00:01:31,809 And we have "New Page" here. 22 00:01:31,810 --> 00:01:40,510 Now if I click this, nothing happens. But you can see that it has the link, and the mouse changes images, 23 00:01:40,570 --> 00:01:43,329 so it's clickable but nothing happens. 24 00:01:43,330 --> 00:01:48,600 Well that's because we need to specify where we want the link to go. 25 00:01:48,610 --> 00:01:52,610 Now let's think about this if we want to link to a new page. 26 00:01:52,690 --> 00:01:56,020 We don't really have another new page, if you remember 27 00:01:56,270 --> 00:01:58,330 We only have 'index.html'. 28 00:01:58,940 --> 00:02:02,200 Wouldn't it be great if there was another file that we can link to? 29 00:02:02,380 --> 00:02:04,520 Well let's create another file. 30 00:02:04,600 --> 00:02:07,030 So let's open up Sublime Text, 31 00:02:07,100 --> 00:02:14,680 actually. I'm going to say 'File' 'New File', I'm going to save this as 'newpage' 32 00:02:14,820 --> 00:02:19,180 And we're going to save it to desktop and see over here how, 33 00:02:19,270 --> 00:02:21,809 when I went to Sublime Text, 34 00:02:21,810 --> 00:02:24,120 It's now a 'Plain Text'? 35 00:02:24,210 --> 00:02:31,670 I need to make sure that this is an HTML file, so I can just do 'newpage.html'. Save, and Sublime Text 36 00:02:31,760 --> 00:02:34,159 automatically adjusts to the 'HTML'. 37 00:02:34,160 --> 00:02:43,310 So again I can type in that short command, 'html' and (then press) 'Tab', that comes with Sublime Text, and let's do 38 00:02:43,430 --> 00:02:46,730 the title 'New Page' and the 'body' 39 00:02:46,850 --> 00:02:53,930 We can just do a header [h1] that says, "This is the new page!" 40 00:02:54,640 --> 00:03:01,290 If I save this... great! we have a new page. And if I go to my desktop here, you see that I have 'newpage.html' 41 00:03:01,380 --> 00:03:03,200 and 'index.html'. 42 00:03:03,210 --> 00:03:06,270 So how do we link these two together? 43 00:03:06,280 --> 00:03:08,129 Well it's very simple. 44 00:03:08,130 --> 00:03:12,380 We open up sublime again and within 'index.html'. 45 00:03:12,570 --> 00:03:22,770 The 'href' can now say we're linking to 'newpage.html'. Let's save that and let's give it a try. 46 00:03:23,160 --> 00:03:26,320 Refresh the page, click, 47 00:03:26,460 --> 00:03:29,020 And "This is a new page!" awesome. 48 00:03:29,030 --> 00:03:36,580 But to go back we have to press the back symbol, so let's link back to the original file again. 49 00:03:36,830 --> 00:03:46,160 We can do this by 'p' tag, which is for 'paragraph' - I'm going to say 'Go Back'. Close that tag [/p]. 50 00:03:46,470 --> 00:03:47,800 But, hold on a minute. 51 00:03:47,820 --> 00:03:49,930 I need an anchor tag, right? 52 00:03:49,950 --> 00:03:54,169 If I just save this, and refresh the page, I say, 'Go Back'. 53 00:03:54,170 --> 00:04:02,240 But what if you really, really want this to be a paragraph, or let's say you want this to be an 'h2' but 54 00:04:02,270 --> 00:04:05,340 you also want it to be an anchor tag. 55 00:04:05,420 --> 00:04:09,670 Well that's very simple you just wrap it in an anchor tag [a]. 56 00:04:10,100 --> 00:04:14,480 And just so it's nice and clear, we're going to have the nice spacing here. 57 00:04:14,630 --> 00:04:20,640 And again an anchor tag must have an 'href', which tells us where to go. And we want to go to 'index.html' 58 00:04:20,950 --> 00:04:27,460 So, 'index.html', save, and refresh. 59 00:04:27,870 --> 00:04:28,870 Let's go back. 60 00:04:29,790 --> 00:04:32,110 Let's go to the next one, and back. 61 00:04:32,310 --> 00:04:37,850 So this is the power that comes with HTML, this ability to link to other pages. 62 00:04:37,980 --> 00:04:44,969 And yeah, we can have text, we can have lists, we can have images, but the true power is in this linking 63 00:04:44,970 --> 00:04:49,040 ability. In the next episode we're going to expand on this. 64 00:04:50,060 --> 00:04:51,410 I'll see you in that one. Bye-bye 6312