WEBVTT 0 00:00.200 --> 00:07.130 Now, in the previous lesson, we took a look at what HTML is, and in this lesson, I want to get us started 1 00:07.130 --> 00:13.640 using HTML as quickly as possible so we can learn how to write our own code and start creating websites 2 00:13.640 --> 00:14.240 with it. 3 00:14.270 --> 00:19.400 Now, in this lesson, we're going to be learning about one of the most important elements, the heading 4 00:19.400 --> 00:20.060 element. 5 00:20.060 --> 00:23.320 And this is what a heading element looks like. 6 00:23.330 --> 00:31.460 It starts off with what's called an opening tag here (<h1>), and it ends with what's called a closing tag (</h1>). 7 00:31.460 --> 00:37.610 Now, if you look closely, the opening and the closing tag actually have one thing that's different, 8 00:37.610 --> 00:40.520 and it's this forward slash (/) right here. 9 00:40.700 --> 00:44.240 And that is what makes this a closing tag. 10 00:44.450 --> 00:52.100 And what goes in between these two tags is the content of that particular HTML element. 11 00:52.100 --> 00:58.820 So in this case, what we're saying we want to do is we want to create a h1 heading and what the heading 12 00:58.820 --> 01:03.200 is going to contain is these words, "Hello World." 13 01:03.620 --> 01:10.670 Now, very often when you hear me talking about HTML, you'll hear me refer to tags and elements and 14 01:10.670 --> 01:13.490 you'll see this on the Internet and everywhere else as well. 15 01:13.730 --> 01:16.550 So what exactly is the difference? 16 01:16.850 --> 01:20.360 Well, the tag refers to these bits. 17 01:20.360 --> 01:21.530 These are tags. 18 01:21.530 --> 01:27.530 Anything that's inside an angle bracket, we call these, "angle brackets," is a tag. 19 01:27.530 --> 01:28.910 And they have different names. 20 01:28.910 --> 01:32.180 So as I mentioned, this one is the opening tag, 21 01:33.210 --> 01:37.950 and this one at the end, is of course called the closing tag. 22 01:38.520 --> 01:40.920 Now, these are the tags. 23 01:40.920 --> 01:42.630 So what's an element? 24 01:42.660 --> 01:52.260 Well, the entire thing here, this is an element. That includes the content as well as any opening or 25 01:52.260 --> 01:53.420 closing tags. 26 01:53.430 --> 01:56.160 This is the HTML element, 27 01:56.160 --> 01:59.550 and these parts are the tags. 28 02:00.120 --> 02:05.520 So hopefully that'll make things a little bit clearer the next time you hear about tags and elements. 29 02:06.210 --> 02:09.750 What is the purpose of these heading elements? 30 02:09.750 --> 02:12.930 Well, the idea comes from book binding. 31 02:12.930 --> 02:18.810 If you create a book and you create a table of contents like this one, you'll see that there's a sort 32 02:18.810 --> 02:20.250 of hierarchy, right? 33 02:20.280 --> 02:23.670 You've got the top-level headings here. 34 02:23.760 --> 02:31.530 This would probably be a Level 1 heading, and these would be a Level 2 heading because they refer 35 02:31.530 --> 02:37.180 to something that's more or less related to this Approvals Section. 36 02:37.300 --> 02:45.490 And you can see inside Section 8 here, there's even another subsection 8.1, which goes into more 37 02:45.490 --> 02:48.280 detail about some aspect of 8. 38 02:48.310 --> 02:52.300 This in our case might be an h3 heading. 39 02:52.330 --> 02:58.270 These levels are what we get to define using our HTML headings. 40 02:59.350 --> 03:07.540 This is what the code would look like for all six levels of headings and remember that there is no heading 41 03:07.540 --> 03:08.290 seven. 42 03:08.320 --> 03:15.430 There is no such thing as an h7, that does not exist. Once you've gone to heading six, 43 03:15.430 --> 03:23.410 that's pretty much the end as defined by the HTML people. And anything that's lower in importance, you would 44 03:23.410 --> 03:27.940 start using a different type of tag, which will go into a little bit later on. 45 03:27.940 --> 03:33.610 But for everything from one through to six, the structure is pretty much the same. 46 03:33.610 --> 03:39.490 You've got an open tag, which is h1 or h6, and you've got a closing tag that has the corresponding 47 03:39.490 --> 03:40.140 number. 48 03:40.150 --> 03:47.140 Now, if you create a tag like this with an h1 and then you end with a different one like an h6, 49 03:47.170 --> 03:49.210 then that's not going to work either. 50 03:49.210 --> 03:51.850 Just remember that when you're writing your own code. 51 03:51.880 --> 03:54.070 Now, what does this look like? 52 03:54.070 --> 03:57.400 If we were to run this code, this is what we would get. 53 03:57.430 --> 04:04.870 We would get different heading levels and by default, they would be styled to have different sizes. 54 04:04.870 --> 04:09.310 So heading one being the biggest and heading six being the smallest. 55 04:09.490 --> 04:15.340 We can of course further style this later on, but as soon as we type these headings, it just gives 56 04:15.340 --> 04:21.820 us an indication of our levels to make sure that we've written all our code as intended. 57 04:21.820 --> 04:26.950 And this essentially follows that structure we saw earlier on with the table of contents. 58 04:26.950 --> 04:32.320 The Level 1 headings are the biggest and the Level 6 headings are the smallest. 59 04:32.990 --> 04:39.200 So now that we've seen a little bit about how all of this works, let's try an exercise where we create 60 04:39.200 --> 04:40.990 our own heading elements. 61 04:41.000 --> 04:48.440 To download the starting files, you have to go over to the course resources for this lesson and click 62 04:48.440 --> 04:53.060 on the 2.1 Heading Element file in order to download it. 63 04:53.060 --> 04:58.310 Now, if you don't know where that is, then you might have missed where at the very beginning of the 64 04:58.310 --> 05:05.030 course, there's a lesson called, "How to Download the Course Resources," and in there I show you exactly 65 05:05.030 --> 05:08.930 how to download each of the course resources for every single lesson. 66 05:08.930 --> 05:14.060 So if you missed that, be sure to head over there to take a look and see how you can do this. 67 05:14.810 --> 05:21.910 Now, once you've downloaded this file, it's really important that you extract it or what we call unzipping. 68 05:21.920 --> 05:28.250 Now, the first thing I want you to do is to create a folder for all of your Web Development Projects, 69 05:28.250 --> 05:35.130 and you can create that folder anywhere you like on your desktop in your C: drive, in your username 70 05:35.130 --> 05:40.560 section, wherever you want, but just call it Web Development Projects, like this. 71 05:41.130 --> 05:47.520 Now, once you've created that folder, then I want you to go ahead and open up the zipped file that you 72 05:47.520 --> 05:50.400 just downloaded by double clicking on it. 73 05:50.490 --> 05:57.450 And once you've opened up that zipped file, I want you to drag it into your Web Development Projects folder, 74 05:57.600 --> 05:58.890 like this. 75 05:59.760 --> 06:03.150 And then you'll be able to access them right here. 76 06:03.450 --> 06:07.170 Now, the next step is we're going to open it up in VS Code. 77 06:08.510 --> 06:13.310 Inside VS Code, go to File and we're going to create a New Window. 78 06:13.340 --> 06:16.160 Now open up the Explorer here, 79 06:16.160 --> 06:22.000 and then when we're here, we're going to open up our Web Development Projects folder that we just created, 80 06:22.010 --> 06:26.480 and you should be able to see that folder, Heading Element. 81 06:26.750 --> 06:32.510 Now, if for some reason this is not working for you, especially if you're on Windows, this might 82 06:32.510 --> 06:36.100 be because you haven't actually extracted this folder properly. 83 06:36.110 --> 06:41.120 So again, make sure that you double-click on the zipped file, or on Windows, 84 06:41.120 --> 06:44.510 you can also right-click on it and click E xtract. 85 06:44.510 --> 06:50.900 And then once you've done that, drag that folder that's been extracted into your Web Development 86 06:50.900 --> 06:56.000 Projects folder and open up that folder inside your VS Code. 87 06:56.390 --> 07:02.390 When you're here, you can see that there are three files in this folder called 2.1 Heading Element. 88 07:02.420 --> 07:04.880 One is the index.html. 89 07:04.910 --> 07:10.290 This is where you're going to be writing your code and I've got some starting code for you which we're 90 07:10.290 --> 07:13.770 going to need to modify in order to complete this challenge. 91 07:13.800 --> 07:20.220 Now you've also got the solution, which I don't recommend looking at until you've completed the challenge, 92 07:20.220 --> 07:23.790 just to check your code or see if there's any differences. 93 07:23.790 --> 07:29.430 Now notice how I've added a little bit here so that you don't accidentally see it unless you wanted 94 07:29.430 --> 07:29.970 to. 95 07:29.970 --> 07:34.110 But if you want to see the solution, just scroll down and you'll see it down there. 96 07:34.320 --> 07:43.560 The goal of this exercise is to make the code here, create a website that looks like this. 97 07:43.740 --> 07:48.780 Remember previously when we did our setup and download for VS Code, I showed you how to install the 98 07:48.780 --> 07:50.580 extension, Live Preview. 99 07:50.580 --> 07:55.770 If you don't see Live Preview when you click on extensions, that might mean that you've missed out 100 07:55.770 --> 07:57.360 on some parts of that video. 101 07:57.360 --> 08:03.690 So please go back to the setup and download videos for VS Code because there's some other things that 102 08:03.690 --> 08:05.100 I need you to set up as well. 103 08:05.130 --> 08:10.020 Make sure you don't skip any of these lessons unless you know exactly what you're doing and you're really 104 08:10.020 --> 08:11.400 familiar with everything. 105 08:11.580 --> 08:18.690 What that Live Preview allows us to do is to go into our code file index.html, right-click on it and 106 08:18.690 --> 08:20.160 click Show Preview. 107 08:20.160 --> 08:26.190 So it should now open up another pane and you can see it shows us our book chapters. Section 1, 108 08:26.190 --> 08:31.800 Chapter 1, Chapter 2, Chapter 3, Sections and Diagrams and Subsections. 109 08:31.920 --> 08:38.010 Unfortunately, everything seems to be just on one long line, and if you drag it out, you can see 110 08:38.010 --> 08:39.330 it's just one long line. 111 08:39.330 --> 08:44.400 There's no formatting at all and there's no indication about hierarchy. 112 08:44.400 --> 08:46.860 So that's where the challenge comes in. 113 08:46.890 --> 08:54.660 You're going to use what you learned about heading elements in order to format this code here in the 114 08:54.660 --> 08:59.820 index.html so that we end up with something that looks like this. 115 08:59.820 --> 09:05.700 So we want the preview to show us Heading 1 elements, Heading 2 elements, Heading 3 elements. 116 09:05.700 --> 09:09.330 And this one, this Diagram 1, is actually a Heading 4 element. 117 09:09.330 --> 09:14.370 So you should have h1 through to h4 in your code here. 118 09:14.370 --> 09:21.030 So now is the time to pause me in the video, and try to complete this challenge. 119 09:21.030 --> 09:26.970 And after you're done, then you can resume the video and we'll walk through the solution together. Pause 120 09:26.970 --> 09:28.890 the video now and give it a go. 121 09:32.320 --> 09:32.770 All right. 122 09:32.770 --> 09:40.480 So we're going to have a single h1 element up here, which is going to be for this word, Book. 123 09:40.510 --> 09:48.250 So we're going to put an h1 element right here, and we're going to drag our, "Book," which is the 124 09:48.250 --> 09:48.820 content 125 09:48.820 --> 09:54.700 remember, in between these two tags, that's how our heading tags are formatted. 126 09:54.790 --> 10:00.910 Now, the next one are these Chapter 1, Chapter 2, Chapter 3 sections, and they're all going 127 10:00.910 --> 10:05.500 to be the next level of hierarchy, which is an h2. 128 10:05.530 --> 10:08.290 So let's do that for all three of them. 129 10:16.830 --> 10:23.070 And then we can move on to our h3's, which is going to be the sections within the chapters. 130 10:23.220 --> 10:27.690 And now I'm just going to fast forward through the rest of the code so that you don't get bored. 131 10:29.000 --> 10:35.930 And then finally, this Diagram, which belongs inside Section 1, in Chapter 2, is going to be the 132 10:35.930 --> 10:40.860 final and the lowest level of hierarchy, which is an h4. 133 10:40.880 --> 10:47.120 And once we've completed all of this code, you can check yourself against the solution code and you 134 10:47.120 --> 10:49.400 should see it's pretty much the same. 135 10:51.020 --> 11:00.320 Now, one of the things that you'll find is when you hit Save using command+ S or using File, Save, you'll 136 11:00.320 --> 11:05.810 see that it auto-formats our code so that we lose any of the indentation. 137 11:05.840 --> 11:09.470 Don't worry if this happens to you, it's perfectly normal. 138 11:09.590 --> 11:13.670 And if we check ourselves against the solution, you can see they match 139 11:13.700 --> 11:14.600 exactly, 140 11:14.600 --> 11:20.840 and we end up with the same result as the goal image, which is what we were aiming for. 141 11:21.470 --> 11:22.960 How did you manage that? 142 11:22.970 --> 11:23.750 Don't worry 143 11:23.750 --> 11:30.170 if you got things wrong, this is where it's safe to go wrong and try things because we're just learning. 144 11:30.170 --> 11:32.600 There's no tests and there's nobody watching you. 145 11:32.630 --> 11:35.420 All that matters is you're actually learning stuff. 146 11:35.420 --> 11:36.890 That's what's important. 147 11:36.920 --> 11:38.590 Have a play around with the code. 148 11:38.600 --> 11:42.260 Don't worry, if you do anything wrong, there's always a solution, 149 11:42.260 --> 11:44.240 and me here to help you. 150 11:44.900 --> 11:49.880 There's a couple of things to note in terms of do's and don'ts when it comes to heading elements that 151 11:49.880 --> 11:51.390 I want to talk to you about. 152 11:51.420 --> 11:56.990 One important rule is notice how in our exercise there was only one h1. 153 11:57.000 --> 12:05.280 It's not good practice to have more than one h1, because the h1 is the very top-level heading. 154 12:05.310 --> 12:11.340 Imagine the h1 as the book title and the table of contents as including the other parts. 155 12:11.340 --> 12:14.520 So maybe the h2 would be the first chapter. 156 12:15.150 --> 12:17.580 Don't have more than one h1, 157 12:17.580 --> 12:26.400 instead, if you need another subtitle or another level of heading, then go to the h2 or h3 or all 158 12:26.400 --> 12:29.430 of the other ones up until h6. 159 12:30.180 --> 12:34.710 Now the other thing to watch out for is don't skip a level. 160 12:34.710 --> 12:40.440 When you're creating heading elements, don't go straight from h1 to h3. 161 12:40.470 --> 12:46.170 If you have an h3, there should also be an h2 somewhere on that web page. 162 12:46.230 --> 12:52.650 Instead, I recommend to just go in order when you have an h1 that you've created and then you realize 163 12:52.650 --> 12:55.650 you need another heading, then go to an h2. 164 12:55.650 --> 13:01.620 And then if you need another level of heading that's even lower in priority, go to an h3. 165 13:01.650 --> 13:04.680 Don't jump between the different level headings. 166 13:04.890 --> 13:07.710 These are not things that will break your code. 167 13:07.710 --> 13:11.190 Your website will still look fine even if you break all of these rules, 168 13:11.190 --> 13:13.140 but they're just rules for convention. 169 13:13.140 --> 13:17.880 And because we're going to be professionals, we're going to start off on the right foot and learn all 170 13:17.880 --> 13:19.740 the rules that we need to know. 171 13:20.270 --> 13:27.350 Now, if you wanted to read up even more on the heading elements, then I recommend going to the professional 172 13:27.380 --> 13:34.610 tool, which is our Mozilla Developer Network Web Docs, and they have documentation for all of the 173 13:34.760 --> 13:36.950 HTML elements that exist. 174 13:36.950 --> 13:43.070 And when you read up on each of these pages, they tell you more details about things that you need 175 13:43.070 --> 13:47.630 to know, and they show you some interactive examples of how it all works. 176 13:47.870 --> 13:53.750 Now, I don't recommend reading through all of these, for all of the HTML elements, but I do recommend 177 13:53.750 --> 13:59.420 that if you're going to use a new element that you haven't seen before and you don't know how it works, 178 13:59.420 --> 14:04.700 you haven't had a lecture on it, then I recommend just taking a quick look at the docs and seeing some 179 14:04.700 --> 14:09.920 examples about how they're used in a similar way that I've shown you in the lectures. 180 14:10.640 --> 14:15.800 Now that we've learned about one of the most important HTML elements, the heading elements, in the 181 14:15.800 --> 14:21.960 next lesson, we're going to move on to another super important element which is the paragraph element. 182 14:21.960 --> 14:24.450 So for all of that and more, I'll see you there.