1 00:00:00,690 --> 00:00:02,520 Instructor: Now let's get started 2 00:00:02,520 --> 00:00:05,939 by learning a little bit more about HTML. 3 00:00:05,939 --> 00:00:10,710 What exactly is it and how do we use it to create websites? 4 00:00:10,710 --> 00:00:13,260 Now, no matter what browser you like to use, 5 00:00:13,260 --> 00:00:16,620 Chrome or Safari or Brave even, 6 00:00:16,620 --> 00:00:19,500 all of these applications do the same thing. 7 00:00:19,500 --> 00:00:24,500 They take different files such as HTML, CSS and JavaScript, 8 00:00:25,020 --> 00:00:27,690 and they render them into a website. 9 00:00:27,690 --> 00:00:30,390 But even though most modern websites are created 10 00:00:30,390 --> 00:00:34,350 using these three different file types combined together, 11 00:00:34,350 --> 00:00:37,860 you can't create a website with just a CSS file 12 00:00:37,860 --> 00:00:39,750 or just a JavaScript file; 13 00:00:39,750 --> 00:00:43,830 however, you can have just an HTML file. 14 00:00:43,830 --> 00:00:45,780 And in fact, that's exactly what 15 00:00:45,780 --> 00:00:49,170 the first websites were created with, HTML. 16 00:00:49,170 --> 00:00:53,610 Now, HTML defines the content and structure of the website. 17 00:00:53,610 --> 00:00:56,970 So for example, in this case, all that my HTML file does 18 00:00:56,970 --> 00:01:01,230 is it renders a heading that says, "My website." 19 00:01:01,230 --> 00:01:05,250 And when this file is opened by the browser, 20 00:01:05,250 --> 00:01:08,970 it will display that heading saying, "My website." 21 00:01:08,970 --> 00:01:11,550 Now, what exactly is HTML? 22 00:01:11,550 --> 00:01:12,900 Let's break it down. 23 00:01:12,900 --> 00:01:17,190 So HTML stands for hypertext markup language. 24 00:01:17,190 --> 00:01:19,620 If we look at the first part, hypertext, 25 00:01:19,620 --> 00:01:21,630 what does that mean? 26 00:01:21,630 --> 00:01:24,570 Well, it refers to the pieces of text 27 00:01:24,570 --> 00:01:28,800 which can link to other documents in the website. 28 00:01:28,800 --> 00:01:33,800 So these pieces of text are hypertext or hyperlinks 29 00:01:34,050 --> 00:01:38,820 and they are the foundation of how an HTML website works. 30 00:01:38,820 --> 00:01:42,510 Now, if we take a look at the world's first website 31 00:01:42,510 --> 00:01:45,540 created by Sir Tim Berners-Lee, 32 00:01:45,540 --> 00:01:48,300 who also happens to be the inventor of the internet, 33 00:01:48,300 --> 00:01:49,710 then you can see it's filled 34 00:01:49,710 --> 00:01:52,290 with these hyperlinks marked in blue. 35 00:01:52,290 --> 00:01:54,600 And exactly as you would expect, 36 00:01:54,600 --> 00:01:56,700 if you click on any of these hyperlinks 37 00:01:56,700 --> 00:02:01,700 it takes you to another document, another HTML file. 38 00:02:01,950 --> 00:02:04,860 So if we go back, you can see that we were 39 00:02:04,860 --> 00:02:08,490 on project dot HTML and if I click on one 40 00:02:08,490 --> 00:02:11,520 of the hyperlinks, like, How can I help? 41 00:02:11,520 --> 00:02:14,700 It will take me to another HTML file. 42 00:02:14,700 --> 00:02:16,860 And this is how hypertext works. 43 00:02:16,860 --> 00:02:18,900 And there's even a link on this website 44 00:02:18,900 --> 00:02:22,500 explaining exactly what hypertext is. 45 00:02:22,500 --> 00:02:25,320 So now that we know what hypertext is, 46 00:02:25,320 --> 00:02:28,170 what about the other part? The markup language. 47 00:02:28,170 --> 00:02:30,480 What is a markup language? 48 00:02:30,480 --> 00:02:32,580 Now, if you look at the English language 49 00:02:32,580 --> 00:02:35,940 we often see little bits that function very similar 50 00:02:35,940 --> 00:02:39,150 to markup, like these double quotes. 51 00:02:39,150 --> 00:02:42,990 The presence of these quotation marks is what tells a reader 52 00:02:42,990 --> 00:02:45,840 that this part is a quotation. 53 00:02:45,840 --> 00:02:49,170 And as you'll find, this is gonna be really similar 54 00:02:49,170 --> 00:02:54,170 to what you see in the editor's review of manuscript. 55 00:02:54,570 --> 00:02:58,320 So used to mark them up and show different things, 56 00:02:58,320 --> 00:03:02,040 such as, for example, which parts need to be bold 57 00:03:02,040 --> 00:03:05,250 by adding a squiggly line underneath it 58 00:03:05,250 --> 00:03:08,160 and which parts need to be underlined 59 00:03:08,160 --> 00:03:10,473 by adding a straight line through it. 60 00:03:11,370 --> 00:03:15,600 So how do you do markup with HTML? 61 00:03:15,600 --> 00:03:19,980 Well, it's done through what's called HTML tags. 62 00:03:19,980 --> 00:03:22,200 Now, in the early days of the internet 63 00:03:22,200 --> 00:03:25,500 there were only very few HTML tag. 64 00:03:25,500 --> 00:03:27,840 These days there are loads more, 65 00:03:27,840 --> 00:03:30,570 but realistically you're only gonna be using 66 00:03:30,570 --> 00:03:32,430 some of the most important ones, 67 00:03:32,430 --> 00:03:35,880 such as headings, H1 through to H6, 68 00:03:35,880 --> 00:03:39,060 or the paragraph tag, the P tag. 69 00:03:39,060 --> 00:03:42,360 So here you can see all of the HTML tags 70 00:03:42,360 --> 00:03:44,010 but when we narrow it down to the ones 71 00:03:44,010 --> 00:03:45,660 that you actually need to know, 72 00:03:45,660 --> 00:03:48,330 then it makes it a lot more approachable. 73 00:03:48,330 --> 00:03:49,500 And in the rest of the course, 74 00:03:49,500 --> 00:03:52,830 we're gonna be covering some of the most essential tags 75 00:03:52,830 --> 00:03:55,560 and so don't worry about learning them. 76 00:03:55,560 --> 00:03:57,390 So don't worry about memorizing 77 00:03:57,390 --> 00:03:59,250 all of them or learning them. 78 00:03:59,250 --> 00:04:01,140 We're gonna cover them as we need them 79 00:04:01,140 --> 00:04:04,110 in our projects and in our exercises. 80 00:04:04,110 --> 00:04:07,260 So in the next lesson, we're gonna get started 81 00:04:07,260 --> 00:04:10,470 by learning about the heading tag, 82 00:04:10,470 --> 00:04:15,000 one of the most OG HTML tags that ever existed. 83 00:04:15,000 --> 00:04:16,829 So for all of that and more, 84 00:04:16,829 --> 00:04:18,430 I'll see you on the next lesson.