1 00:00:00,200 --> 00:00:07,130 Now, in the previous lesson, we took a look at what is and in this lesson I want to get us started 2 00:00:07,130 --> 00:00:13,640 using HTML as quickly as possible so we can learn how to write our own code and start creating websites 3 00:00:13,640 --> 00:00:14,240 with it. 4 00:00:14,270 --> 00:00:19,400 Now, in this lesson, we're going to be learning about one of the most important elements, the heading 5 00:00:19,400 --> 00:00:20,060 element. 6 00:00:20,060 --> 00:00:23,320 And this is what a heading element looks like. 7 00:00:23,330 --> 00:00:31,460 It starts off with what's called an opening tag here, and it ends with what's called a closing tag. 8 00:00:31,460 --> 00:00:37,610 Now, if you look closely, the opening and the closing tag actually have one thing that's different, 9 00:00:37,610 --> 00:00:40,520 and it's this forward slash right here. 10 00:00:40,700 --> 00:00:44,240 And that is what makes this a closing tag. 11 00:00:44,450 --> 00:00:52,100 And what goes in between these two tags is the content of that particular HTML element. 12 00:00:52,100 --> 00: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 13 00:00:58,820 --> 00:01:03,200 is going to contain is these words Hello world. 14 00:01:03,620 --> 00:01:10,670 Now, very often when you hear me talking about HTML, you'll hear me refer to tags and elements and 15 00:01:10,670 --> 00:01:13,490 you'll see this on the Internet and everywhere else as well. 16 00:01:13,730 --> 00:01:16,550 So what exactly is the difference? 17 00:01:16,850 --> 00:01:20,360 Well, the tag refers to these bits. 18 00:01:20,360 --> 00:01:21,530 These are tags. 19 00:01:21,530 --> 00:01:27,530 Anything that's inside an angle bracket we call these angle brackets is a tag. 20 00:01:27,530 --> 00:01:28,910 And they have different names. 21 00:01:28,910 --> 00:01:32,180 So as I mentioned, this one is the opening tag. 22 00:01:33,210 --> 00:01:37,950 And this one at the end is, of course, called the closing tag. 23 00:01:38,520 --> 00:01:40,920 Now, these are the tags. 24 00:01:40,920 --> 00:01:42,630 So what's an element? 25 00:01:42,660 --> 00:01:52,260 Well, the entire thing here, this is an element that includes the content as well as any opening or 26 00:01:52,260 --> 00:01:53,420 closing tags. 27 00:01:53,430 --> 00:01:56,160 This is the HTML element. 28 00:01:56,160 --> 00:01:59,550 And these parts are the tags. 29 00:02:00,120 --> 00:02:05,520 So hopefully that'll make things a little bit clearer the next time you hear about tags and elements. 30 00:02:06,210 --> 00:02:09,750 What is the purpose of these heading elements? 31 00:02:09,750 --> 00:02:12,930 Well, the idea comes from book binding. 32 00:02:12,930 --> 00: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 33 00:02:18,810 --> 00:02:20,250 of hierarchy, right? 34 00:02:20,280 --> 00:02:23,670 You've got the top level headings here. 35 00:02:23,760 --> 00:02:31,530 This would probably be a level one heading and these would be a level two heading because they refer 36 00:02:31,530 --> 00:02:37,180 to something that's more or less related to this approval section. 37 00:02:37,300 --> 00:02:45,490 And you can see inside section eight here, there's even another subsection 8.1, which goes into more 38 00:02:45,490 --> 00:02:48,280 detail about some aspect of eight. 39 00:02:48,310 --> 00:02:52,300 This in our case might be an H three heading. 40 00:02:52,330 --> 00:02:58,270 These levels are what we get to define using our HTML headings. 41 00:02:59,350 --> 00:03:07,540 This is what the code would look like for all six level of headings and remember that there is no heading 42 00:03:07,540 --> 00:03:08,290 seven. 43 00:03:08,320 --> 00:03:15,430 There is no such thing as an H seven that does not exist once you've gone to heading six. 44 00:03:15,430 --> 00:03:23,410 That's pretty much the end as defined by the people and anything that's lower in importance, you would 45 00:03:23,410 --> 00:03:27,940 start using a different type of tag, which will go into a little bit later on. 46 00:03:27,940 --> 00:03:33,610 But for everything from one through to six, the structure is pretty much the same. 47 00:03:33,610 --> 00:03:39,490 You've got an open tag, which is H one or H six, and you've got a closing tag that has the corresponding 48 00:03:39,490 --> 00:03:40,140 number. 49 00:03:40,150 --> 00:03:47,140 Now if you create a tag like this with an H one and then you end with a different one like an H six, 50 00:03:47,170 --> 00:03:49,210 then that's not going to work either. 51 00:03:49,210 --> 00:03:51,850 Just remember that when you're writing your own code. 52 00:03:51,880 --> 00:03:54,070 Now, what does this look like? 53 00:03:54,070 --> 00:03:57,400 If we were to run this code, this is what we would get. 54 00:03:57,430 --> 00:04:04,870 We would get different heading levels and by default, they would be styled to have different sizes. 55 00:04:04,870 --> 00:04:09,310 So heading one being the biggest and heading six being the smallest. 56 00:04:09,490 --> 00:04:15,340 We can of course further style this later on, but as soon as we type these headings, it just gives 57 00:04:15,340 --> 00:04:21,820 us an indication of our levels to make sure that we've written all our code as intended. 58 00:04:21,820 --> 00:04:26,950 And this essentially follows that structure we saw earlier on with the table of contents. 59 00:04:26,950 --> 00:04:32,320 The level one headings are the biggest and the level six headings are the smallest. 60 00:04:32,990 --> 00: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 61 00:04:39,200 --> 00:04:40,990 our own heading elements. 62 00:04:41,000 --> 00:04:48,440 To download the starting files, you have to go over to the course resources for this lesson and click 63 00:04:48,440 --> 00:04:53,060 on the 2.1 heading element file in order to download it. 64 00:04:53,060 --> 00:04:58,310 Now, if you don't know where that is, then you might have missed where at the very beginning of the 65 00:04:58,310 --> 00:05:05,030 course there's a lesson called how to download the course resources and in there I show you exactly 66 00:05:05,030 --> 00:05:08,930 how to download each of the course resources for every single lesson. 67 00:05:08,930 --> 00:05:14,060 So if you miss that, be sure to head over there to take a look and see how you can do this. 68 00:05:14,810 --> 00:05:21,910 Now, once you've downloaded this file, it's really important that you extract it or what we call unzipping. 69 00:05:21,920 --> 00:05:28,250 Now, the first thing I want you to do is to create a folder for all of your web development projects, 70 00:05:28,250 --> 00:05:35,130 and you can create that folder anywhere you like on your desktop in your C drive, in your username 71 00:05:35,130 --> 00:05:40,560 section, wherever you want, but just call it web development projects like this. 72 00:05:41,130 --> 00:05:47,520 Now, once you've created that folder, then I want you to go ahead and open up the zip file that you 73 00:05:47,520 --> 00:05:50,400 just downloaded by double clicking on it. 74 00:05:50,490 --> 00:05:57,450 And once you've opened up that zip file, I want you to drag it into your Web development projects folder 75 00:05:57,600 --> 00:05:58,890 like this. 76 00:05:59,760 --> 00:06:03,150 And then you'll be able to access them right here. 77 00:06:03,450 --> 00:06:07,170 Now, the next step is we're going to open it up in VS code. 78 00:06:08,510 --> 00:06:13,310 Inside vs code, go to file and we're going to create a new window. 79 00:06:13,340 --> 00:06:16,160 Now open up the explorer here. 80 00:06:16,160 --> 00:06:22,000 And then when we're here, we're going to open up our web development projects folder that we just created, 81 00:06:22,010 --> 00:06:26,480 and you should be able to see that folder heading element. 82 00:06:26,750 --> 00:06:32,510 Now, if for some reason this is not working for you, especially if you're on Windows, this might 83 00:06:32,510 --> 00:06:36,100 be because you haven't actually extracted this folder properly. 84 00:06:36,110 --> 00:06:41,120 So again, make sure that you double click on the zip file or on Windows. 85 00:06:41,120 --> 00:06:44,510 You can also right click on it and click extract. 86 00:06:44,510 --> 00:06:50,900 And then once you've done that, drag, that folder that's been extracted into your web development 87 00:06:50,900 --> 00:06:56,000 projects folder and open up that folder inside your VS code. 88 00:06:56,390 --> 00:07:02,390 When you're here, you can see that there are three files in this folder called 2.1 heading Element 89 00:07:02,420 --> 00:07:04,880 one is the index.html. 90 00:07:04,910 --> 00: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 91 00:07:10,290 --> 00:07:13,770 going to need to modify in order to complete this challenge. 92 00:07:13,800 --> 00:07:20,220 Now you've also got the solution, which I don't recommend looking at until you've completed the challenge, 93 00:07:20,220 --> 00:07:23,790 just to check your code or see if there's any differences. 94 00:07:23,790 --> 00:07:29,430 Now notice how I've added a little bit here so that you don't accidentally see it unless you wanted 95 00:07:29,430 --> 00:07:29,970 to. 96 00:07:29,970 --> 00:07:34,110 But if you want to see the solution, just scroll down and you'll see it down there. 97 00:07:34,320 --> 00:07:43,560 The goal of this exercise is to make the code here, create a website that looks like this. 98 00:07:43,740 --> 00:07:48,780 Remember previously when we did our setup and download for VS Code, I showed you how to install the 99 00:07:48,780 --> 00:07:50,580 extension live preview. 100 00:07:50,580 --> 00:07:55,770 If you don't see live preview when you click on extensions, that might mean that you've missed out 101 00:07:55,770 --> 00:07:57,360 on some parts of that video. 102 00:07:57,360 --> 00:08:03,690 So please go back to the setup and download videos for VS Code because there's some other things that 103 00:08:03,690 --> 00:08:05,100 I need you to set up as well. 104 00:08:05,130 --> 00: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 105 00:08:10,020 --> 00:08:11,400 familiar with everything. 106 00:08:11,580 --> 00: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 107 00:08:18,690 --> 00:08:20,160 click show preview. 108 00:08:20,160 --> 00:08:26,190 So it should now open up another pane and you can see it shows us our book chapters, Section one, 109 00:08:26,190 --> 00:08:31,800 Chapter one, chapter two, chapter three sections and Diagrams and Subsections. 110 00:08:31,920 --> 00:08:38,010 Unfortunately, everything seems to be just on one long line, and if you drag it out, you can see 111 00:08:38,010 --> 00:08:39,330 it's just one long line. 112 00:08:39,330 --> 00:08:44,400 There's no formatting at all and there's no indication about hierarchy. 113 00:08:44,400 --> 00:08:46,860 So that's where the challenge comes in. 114 00:08:46,890 --> 00:08:54,660 You're going to use what you learned about heading elements in order to format this code here in the 115 00:08:54,660 --> 00:08:59,820 index.html so that we end up with something that looks like this. 116 00:08:59,820 --> 00:09:05,700 So we want the preview to show us heading one elements heading two elements heading three elements. 117 00:09:05,700 --> 00:09:09,330 And this one this diagram one is actually a heading four element. 118 00:09:09,330 --> 00:09:14,370 So you should have H one through to H four in your code here. 119 00:09:14,370 --> 00:09:21,030 So now is the time to pause me in the video and try to complete this challenge. 120 00:09:21,030 --> 00:09:26,970 And after you're done then you can resume the video and we'll walk through the solution together, pause 121 00:09:26,970 --> 00:09:28,890 the video now and give it a go. 122 00:09:32,320 --> 00:09:32,770 All right. 123 00:09:32,770 --> 00:09:40,480 So we're going to have a single h one element up here, which is going to be for this word book. 124 00:09:40,510 --> 00:09:48,250 So we're going to put an H one element right here, and we're going to drag our book, which is the 125 00:09:48,250 --> 00:09:48,820 content. 126 00:09:48,820 --> 00:09:54,700 Remember, in between these two tags, that's how our heading tags are formatted. 127 00:09:54,790 --> 00:10:00,910 Now, the next one are these Chapter one, chapter two, chapter three sections, and they're all going 128 00:10:00,910 --> 00:10:05,500 to be the next level of hierarchy, which is an H two. 129 00:10:05,530 --> 00:10:08,290 So let's do that for all three of them. 130 00:10:16,830 --> 00:10:23,070 And then we can move on to our H three, which is going to be the sections within the chapters. 131 00:10:23,220 --> 00: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. 132 00:10:29,000 --> 00:10:35,930 And then finally, this diagram, which belongs inside section one in chapter two, is going to be the 133 00:10:35,930 --> 00:10:40,860 final and the lowest level of hierarchy, which is an H four. 134 00:10:40,880 --> 00:10:47,120 And once we've completed all of this code, you can check yourself against the solution code and you 135 00:10:47,120 --> 00:10:49,400 should see it's pretty much the same. 136 00:10:51,020 --> 00: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 137 00:11:00,320 --> 00:11:05,810 see that IT auto formats our code so that we lose any of the indentation. 138 00:11:05,840 --> 00:11:09,470 Don't worry if this happens to you, it's perfectly normal. 139 00:11:09,590 --> 00:11:13,670 And if we check ourselves against the solution, you can see they match. 140 00:11:13,700 --> 00:11:14,600 Exactly. 141 00:11:14,600 --> 00:11:20,840 And we end up with the same result as the goal image, which is what we were aiming for. 142 00:11:21,470 --> 00:11:22,960 How did you manage that? 143 00:11:22,970 --> 00:11:23,750 Don't worry. 144 00:11:23,750 --> 00: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 145 00:11:30,170 --> 00:11:32,600 there's no tests and there's nobody watching you. 146 00:11:32,630 --> 00:11:35,420 All that matters is you're actually learning stuff. 147 00:11:35,420 --> 00:11:36,890 That's what's important. 148 00:11:36,920 --> 00:11:38,590 Have a play around with the code. 149 00:11:38,600 --> 00:11:42,260 Don't worry, if you do anything wrong, there's always a solution. 150 00:11:42,260 --> 00:11:44,240 And me here to help you. 151 00:11:44,900 --> 00: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 152 00:11:49,880 --> 00:11:51,390 I want to talk to you about. 153 00:11:51,420 --> 00:11:56,990 One important rule is notice how in our exercise there was only one H1. 154 00:11:57,000 --> 00:12:05,280 It's not good practice to have more than one H1 because the H1 is the very top level heading. 155 00:12:05,310 --> 00:12:11,340 Imagine the H1 as the book title and the table of contents as including the other parts. 156 00:12:11,340 --> 00:12:14,520 So maybe the H2 would be the first chapter. 157 00:12:15,150 --> 00:12:17,580 Don't have more than one H1. 158 00:12:17,580 --> 00:12:26,400 Instead, if you need another subtitle or another level of heading, then go to the H2 or H3 or all 159 00:12:26,400 --> 00:12:29,430 of the other ones up until H6. 160 00:12:30,180 --> 00:12:34,710 Now the other thing to watch out for is don't skip a level. 161 00:12:34,710 --> 00:12:40,440 When you're creating heading elements, don't go straight from H1 to H3. 162 00:12:40,470 --> 00:12:46,170 If you have an H3, there should also be an H2 somewhere on that web page. 163 00:12:46,230 --> 00:12:52,650 Instead, I recommend to just go in order when you have an H1 that you've created and then you realize 164 00:12:52,650 --> 00:12:55,650 you need another heading, then go to an H2. 165 00:12:55,650 --> 00:13:01,620 And then if you need another level of heading that's even lower in priority, go to an H3. 166 00:13:01,650 --> 00:13:04,680 Don't jump between the different level headings. 167 00:13:04,890 --> 00:13:07,710 These are not things that will break your code. 168 00:13:07,710 --> 00:13:11,190 Your website will still look fine even if you break all of these rules. 169 00:13:11,190 --> 00:13:13,140 But they're just rules for convention. 170 00:13:13,140 --> 00:13:17,880 And because we're going to be professionals, we're going to start off on the right foot and learn all 171 00:13:17,880 --> 00:13:19,740 the rules that we need to know. 172 00:13:20,270 --> 00:13:27,350 Now, if you wanted to read up even more on the heading elements, then I recommend going to the professional 173 00:13:27,380 --> 00:13:34,610 tool, which is our Mozilla developer network web docs, and they have documentation for all of the 174 00:13:34,760 --> 00:13:36,950 HTML elements that exist. 175 00:13:36,950 --> 00:13:43,070 And when you read up on each of these pages, they tell you more details about things that you need 176 00:13:43,070 --> 00:13:47,630 to know, and they show you some interactive examples of how it all works. 177 00:13:47,870 --> 00:13:53,750 Now, I don't recommend reading through all of these for all of the HTML elements, but I do recommend 178 00:13:53,750 --> 00: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, 179 00:13:59,420 --> 00: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 180 00:14:04,700 --> 00:14:09,920 examples about how they're used in a similar way that I've shown you in the lectures. 181 00:14:10,640 --> 00:14:15,800 Now that we've learned about one of the most important HTML elements, the heading elements, in the 182 00:14:15,800 --> 00:14:21,960 next lesson, we're going to move on to another super important element which is the paragraph element. 183 00:14:21,960 --> 00:14:24,450 So for all of that and more, I'll see you there.