1 00:00:00,297 --> 00:00:01,680 Narrator: Now in the previous lesson 2 00:00:01,680 --> 00:00:04,920 we took a look at what HTML is, 3 00:00:04,920 --> 00:00:08,520 and in this lesson I wanna get us started using HTML 4 00:00:08,520 --> 00:00:10,890 as quickly as possible so we can learn how 5 00:00:10,890 --> 00:00:14,610 to write our own code and start creating websites with it. 6 00:00:14,610 --> 00:00:16,800 Now in this lesson, we're gonna be learning about one 7 00:00:16,800 --> 00:00:20,430 of the most important elements, the heading element, 8 00:00:20,430 --> 00:00:23,580 and this is what a heading element looks like. 9 00:00:23,580 --> 00:00:28,110 It starts off with what's called an opening tag here 10 00:00:28,110 --> 00:00:31,710 and it ends with what's called a closing tag. 11 00:00:31,710 --> 00:00:34,740 Now if you look closely, the opening and the closing tag 12 00:00:34,740 --> 00:00:37,830 actually have one thing that's different 13 00:00:37,830 --> 00:00:41,010 and it's this forward slash right here. 14 00:00:41,010 --> 00:00:44,850 And that is what makes this a closing tag. 15 00:00:44,850 --> 00:00:49,410 And what goes in between these two tags is the content 16 00:00:49,410 --> 00:00:52,410 of that particular HTML element. 17 00:00:52,410 --> 00:00:54,690 So in this case, what we're saying we wanna do 18 00:00:54,690 --> 00:00:58,020 is we wanna create a h1 heading. 19 00:00:58,020 --> 00:01:00,780 And what the heading is going to contain 20 00:01:00,780 --> 00:01:03,960 is these words, hello world. 21 00:01:03,960 --> 00:01:07,710 Now very often when you hear me talking about HTML, 22 00:01:07,710 --> 00:01:10,590 you'll hear me refer to tags and elements 23 00:01:10,590 --> 00:01:12,000 and you'll see this on the internet 24 00:01:12,000 --> 00:01:14,010 and everywhere else as well. 25 00:01:14,010 --> 00:01:17,160 So what exactly is the difference? 26 00:01:17,160 --> 00:01:20,460 Well, the tag refers to these bits. 27 00:01:20,460 --> 00:01:21,630 These are tags. 28 00:01:21,630 --> 00:01:24,240 Anything that's inside an angle bracket, 29 00:01:24,240 --> 00:01:27,870 we call these angle brackets, is a tag 30 00:01:27,870 --> 00:01:29,040 and they have different names. 31 00:01:29,040 --> 00:01:32,110 So as I mentioned, this one is the opening tag 32 00:01:33,450 --> 00:01:36,060 and this one at the end is, 33 00:01:36,060 --> 00:01:37,923 of course, called the closing tag. 34 00:01:38,880 --> 00:01:41,100 Now these are the tags. 35 00:01:41,100 --> 00:01:42,870 So what's an element? 36 00:01:42,870 --> 00:01:47,870 Well, the entire thing here, this is an element. 37 00:01:48,420 --> 00:01:51,120 That includes the content as well 38 00:01:51,120 --> 00:01:53,670 as any opening or closing tags. 39 00:01:53,670 --> 00:01:58,670 This is the HTML element and these parts are the tags. 40 00:02:00,046 --> 00:02:02,220 So hopefully that'll make things a little bit 41 00:02:02,220 --> 00:02:05,493 clearer the next time you hear about tags and elements. 42 00:02:06,480 --> 00:02:09,990 What is the purpose of these heading elements? 43 00:02:09,990 --> 00:02:13,050 Well, the idea comes from book binding. 44 00:02:13,050 --> 00:02:14,220 If you create a book 45 00:02:14,220 --> 00:02:17,190 and you create a table of contents like this one, 46 00:02:17,190 --> 00:02:20,580 you'll see that there's a sort of hierarchy, right? 47 00:02:20,580 --> 00:02:24,180 You've got the top level headings here. 48 00:02:24,180 --> 00:02:27,570 This would probably be a level one heading 49 00:02:27,570 --> 00:02:30,810 and these would be a level two heading 50 00:02:30,810 --> 00:02:33,270 because they refer to something that's more 51 00:02:33,270 --> 00:02:37,560 or less related to this approval section. 52 00:02:37,560 --> 00:02:40,470 And you can see inside section eight here, 53 00:02:40,470 --> 00:02:44,520 there's even another subsection, 8.1, 54 00:02:44,520 --> 00:02:48,480 which goes into more detail about some aspect of eight. 55 00:02:48,480 --> 00:02:52,440 This, in our case, might be an h3 heading. 56 00:02:52,440 --> 00:02:55,740 These levels are what we get to define 57 00:02:55,740 --> 00:02:58,203 using our HTML headings. 58 00:02:59,490 --> 00:03:01,050 This is what the code would look 59 00:03:01,050 --> 00:03:03,630 like for all six level of headings. 60 00:03:03,630 --> 00:03:08,490 And remember that there is no heading seven. 61 00:03:08,490 --> 00:03:11,850 There is no such thing as an h7. 62 00:03:11,850 --> 00:03:13,500 That does not exist. 63 00:03:13,500 --> 00:03:15,450 Once you've gone to heading six, 64 00:03:15,450 --> 00:03:20,010 that's pretty much the end as defined by the HTML people 65 00:03:20,010 --> 00:03:23,070 and anything that's lower in importance, 66 00:03:23,070 --> 00:03:25,530 you would start using a different type of tag 67 00:03:25,530 --> 00:03:28,230 which we'll go into a little bit later on. 68 00:03:28,230 --> 00:03:31,320 But for everything from one through to six, 69 00:03:31,320 --> 00:03:33,570 the structure is pretty much the same. 70 00:03:33,570 --> 00:03:36,747 You've got an open tag, which is h1 or h6, 71 00:03:36,747 --> 00:03:38,280 and you've got a closing tag 72 00:03:38,280 --> 00:03:40,380 that has the corresponding number. 73 00:03:40,380 --> 00:03:43,107 Now if you create a tag like this with an h1 74 00:03:43,107 --> 00:03:47,280 and then you end with a different one like an h6, 75 00:03:47,280 --> 00:03:49,170 then that's not gonna work either. 76 00:03:49,170 --> 00:03:51,990 Just remember that when you're writing your own code. 77 00:03:51,990 --> 00:03:54,060 Now what does this look like? 78 00:03:54,060 --> 00:03:57,420 If we were to run this code, this is what we would get. 79 00:03:57,420 --> 00:04:00,120 We would get different heading levels 80 00:04:00,120 --> 00:04:04,980 and by default they would be styled to have different sizes, 81 00:04:04,980 --> 00:04:06,900 so heading one being the biggest 82 00:04:06,900 --> 00:04:09,630 and heading six being the smallest. 83 00:04:09,630 --> 00:04:12,990 We can of course further style this later on 84 00:04:12,990 --> 00:04:14,820 but as soon as we type these headings, 85 00:04:14,820 --> 00:04:18,540 it just gives us an indication of our levels to make sure 86 00:04:18,540 --> 00:04:22,050 that we've written all our code as intended. 87 00:04:22,050 --> 00:04:24,030 And this essentially follows that structure 88 00:04:24,030 --> 00:04:27,120 we saw earlier on with the table of contents. 89 00:04:27,120 --> 00:04:29,760 The level one headings are the biggest 90 00:04:29,760 --> 00:04:32,223 and the level six headings are the smallest. 91 00:04:33,270 --> 00:04:35,520 So now that we've seen a little bit about how 92 00:04:35,520 --> 00:04:38,550 all of this works, let's try an exercise 93 00:04:38,550 --> 00:04:41,220 where we create our own heading elements. 94 00:04:41,220 --> 00:04:44,430 To download the starting files, you have to go 95 00:04:44,430 --> 00:04:48,510 over to the course resources for this lesson and click 96 00:04:48,510 --> 00:04:53,130 on the 2.1 Heading Element file in order to download it. 97 00:04:53,130 --> 00:04:55,710 Now if you don't know where that is, 98 00:04:55,710 --> 00:04:58,170 then you might have missed where at the very beginning 99 00:04:58,170 --> 00:05:00,360 of the course, there's a lesson called, 100 00:05:00,360 --> 00:05:03,120 How to Download the Course Resources. 101 00:05:03,120 --> 00:05:05,970 And in there I show you exactly how to download 102 00:05:05,970 --> 00:05:09,120 each of the course resources for every single lesson. 103 00:05:09,120 --> 00:05:11,400 So if you missed that, be sure to head over there 104 00:05:11,400 --> 00:05:14,043 to take a look and see how you can do this. 105 00:05:15,120 --> 00:05:18,750 Now once you've downloaded this file, it's really important 106 00:05:18,750 --> 00:05:22,170 that you extract it or what we call unzipping. 107 00:05:22,170 --> 00:05:25,890 Now the first thing I want you to do is to create a folder 108 00:05:25,890 --> 00:05:28,650 for all of your web development projects 109 00:05:28,650 --> 00:05:31,110 and you can create that folder anywhere you like 110 00:05:31,110 --> 00:05:33,660 on your desktop, in your C drive, 111 00:05:33,660 --> 00:05:36,960 in your username section, wherever you want, 112 00:05:36,960 --> 00:05:40,413 but just call it web development projects like this. 113 00:05:41,340 --> 00:05:44,040 Now once you've created that folder, 114 00:05:44,040 --> 00:05:47,220 then I want you to go ahead and open up the ZIP file 115 00:05:47,220 --> 00:05:50,760 that you just downloaded by double-clicking on it. 116 00:05:50,760 --> 00:05:53,010 And once you've opened up that ZIP file, 117 00:05:53,010 --> 00:05:54,570 I want you to drag it 118 00:05:54,570 --> 00:05:58,720 into your web development projects folder like this 119 00:06:00,060 --> 00:06:03,780 and then you'll be able to access them right here. 120 00:06:03,780 --> 00:06:07,113 Now the next step is we're gonna open it up in VS Code. 121 00:06:08,670 --> 00:06:10,860 Inside VS Code, go to file 122 00:06:10,860 --> 00:06:13,650 and we're gonna create a new window. 123 00:06:13,650 --> 00:06:17,490 Now open up the explorer here and then when we're here, 124 00:06:17,490 --> 00:06:19,620 we're going to open up our web development 125 00:06:19,620 --> 00:06:22,051 projects folder that we just created 126 00:06:22,051 --> 00:06:27,051 and you should be able to see that folder, Heading Element. 127 00:06:27,060 --> 00:06:30,210 Now if for some reason this is not working for you 128 00:06:30,210 --> 00:06:32,640 especially if you're on Windows, this might be 129 00:06:32,640 --> 00:06:36,420 because you haven't actually extracted this folder properly. 130 00:06:36,420 --> 00:06:38,580 So again, make sure that you double-click 131 00:06:38,580 --> 00:06:41,190 on the zipped file or on Windows, 132 00:06:41,190 --> 00:06:44,820 you can also right-click on it and click extract. 133 00:06:44,820 --> 00:06:46,530 And then once you've done that, 134 00:06:46,530 --> 00:06:49,590 drag that folder that's been extracted 135 00:06:49,590 --> 00:06:52,170 into your web development projects folder 136 00:06:52,170 --> 00:06:56,700 and open up that folder inside your VS Code. 137 00:06:56,700 --> 00:06:59,160 When you're here, you can see that there are three files 138 00:06:59,160 --> 00:07:02,700 in this folder called 2.1 Heading Element. 139 00:07:02,700 --> 00:07:05,070 One is the index.html. 140 00:07:05,070 --> 00:07:07,500 This is where you're gonna be writing your code 141 00:07:07,500 --> 00:07:09,060 and I've got some starting code 142 00:07:09,060 --> 00:07:11,790 for you which we're gonna need to modify 143 00:07:11,790 --> 00:07:14,010 in order to complete this challenge. 144 00:07:14,010 --> 00:07:15,930 Now you've also got the solution 145 00:07:15,930 --> 00:07:17,970 which I don't recommend looking at 146 00:07:17,970 --> 00:07:20,310 until you've completed the challenge, 147 00:07:20,310 --> 00:07:23,970 just to check your code or see if there's any differences. 148 00:07:23,970 --> 00:07:26,580 Now notice how I've added a little bit here 149 00:07:26,580 --> 00:07:30,150 so that you don't accidentally see it unless you wanted to. 150 00:07:30,150 --> 00:07:31,560 But if you wanna see the solution, 151 00:07:31,560 --> 00:07:34,500 just scroll down and you'll see it down there. 152 00:07:34,500 --> 00:07:39,500 The goal of this exercise is to make the code here 153 00:07:40,440 --> 00:07:43,800 create a website that looks like this. 154 00:07:43,800 --> 00:07:45,870 Remember previously when we did our setup 155 00:07:45,870 --> 00:07:47,490 and download for VS Code, 156 00:07:47,490 --> 00:07:50,610 I showed you how to install the extension live preview? 157 00:07:50,610 --> 00:07:54,000 If you don't see live preview when you click on extensions, 158 00:07:54,000 --> 00:07:55,500 that might mean that you've missed 159 00:07:55,500 --> 00:07:57,480 out on some parts of that video. 160 00:07:57,480 --> 00:08:00,990 So please go back to the setup and download videos 161 00:08:00,990 --> 00:08:03,570 for VS Code because there's some other things 162 00:08:03,570 --> 00:08:05,100 that I need you to set up as well. 163 00:08:05,100 --> 00:08:07,680 Make sure you don't skip any of these lessons 164 00:08:07,680 --> 00:08:09,480 unless you know exactly what you're doing 165 00:08:09,480 --> 00:08:11,760 and you're really familiar with everything. 166 00:08:11,760 --> 00:08:14,760 What that live preview allows us to do is to go 167 00:08:14,760 --> 00:08:17,610 into our code file index or HTML, 168 00:08:17,610 --> 00:08:20,310 right-click on it and click show preview. 169 00:08:20,310 --> 00:08:22,650 So it should now open up another pane 170 00:08:22,650 --> 00:08:25,290 and you can see it shows us our book chapters, 171 00:08:25,290 --> 00:08:27,360 section one, chapter one, chapter two, 172 00:08:27,360 --> 00:08:31,920 chapter three, sections and diagrams and subsections. 173 00:08:31,920 --> 00:08:34,409 Unfortunately, everything seems to be 174 00:08:34,409 --> 00:08:37,590 just on one long line and if you drag it out, 175 00:08:37,590 --> 00:08:39,419 you can see it's just one long line. 176 00:08:39,419 --> 00:08:41,309 There's no formatting at all 177 00:08:41,309 --> 00:08:44,610 and there's no indication about hierarchy. 178 00:08:44,610 --> 00:08:46,860 So that's where the challenge comes in. 179 00:08:46,860 --> 00:08:50,310 You're gonna use what you learned about heading elements 180 00:08:50,310 --> 00:08:55,310 in order to format this code here in the index.html 181 00:08:56,190 --> 00:08:59,820 so that we end up with something that looks like this. 182 00:08:59,820 --> 00:09:03,450 So we want the preview to show us heading one elements, 183 00:09:03,450 --> 00:09:05,670 heading two elements, heading three elements. 184 00:09:05,670 --> 00:09:07,440 And this one, this diagram one 185 00:09:07,440 --> 00:09:09,450 is actually a heading four element. 186 00:09:09,450 --> 00:09:14,450 So you should have h1 through to h4 in your code here. 187 00:09:14,580 --> 00:09:17,250 So now is the time to pause me 188 00:09:17,250 --> 00:09:21,180 in the video and try to complete this challenge. 189 00:09:21,180 --> 00:09:24,060 And after you're done, then you can resume the video 190 00:09:24,060 --> 00:09:26,580 and we'll walk through the solution together. 191 00:09:26,580 --> 00:09:28,773 Pause the video now and give it a go. 192 00:09:32,460 --> 00:09:37,460 All right, so we're gonna have a single h1 element up here, 193 00:09:37,890 --> 00:09:40,830 which is going to be for this word book. 194 00:09:40,830 --> 00:09:45,090 So we're going to put an h1 element right here 195 00:09:45,090 --> 00:09:48,900 and we're going to drag our book, which is the content, 196 00:09:48,900 --> 00:09:52,050 remember, in between these two tags. 197 00:09:52,050 --> 00:09:55,110 That's how our heading tags are formatted. 198 00:09:55,110 --> 00:09:57,960 Now the next one are these chapter one, chapter two, 199 00:09:57,960 --> 00:10:00,930 chapter three sections, and they're all going 200 00:10:00,930 --> 00:10:05,760 to be the next level of hierarchy, which is an h2. 201 00:10:05,760 --> 00:10:08,163 So let's do that for all three of them. 202 00:10:17,070 --> 00:10:20,100 And then we can move on to our h3s, 203 00:10:20,100 --> 00:10:23,550 which is going to be the sections within the chapters. 204 00:10:23,550 --> 00:10:25,230 And now I'm just gonna fast forward 205 00:10:25,230 --> 00:10:28,080 through the rest of the code so that you don't get bored. 206 00:10:29,220 --> 00:10:31,950 And then finally, this diagram, which belongs 207 00:10:31,950 --> 00:10:36,870 inside section one in chapter two is going to be the final 208 00:10:36,870 --> 00:10:40,263 and the lowest level of hierarchy, which is an h4. 209 00:10:41,190 --> 00:10:43,830 And once we've completed all of this code, 210 00:10:43,830 --> 00:10:46,860 you can check yourself against the solution code 211 00:10:46,860 --> 00:10:49,473 and you should see it's pretty much the same. 212 00:10:51,300 --> 00:10:53,970 Now one of the things that you'll find is when 213 00:10:53,970 --> 00:10:58,970 you hit save using Command + S or using file, save, 214 00:11:00,180 --> 00:11:03,150 you'll see that it auto-formats our code 215 00:11:03,150 --> 00:11:06,090 so that we lose any of the indentation. 216 00:11:06,090 --> 00:11:07,860 Don't worry if this happens to you. 217 00:11:07,860 --> 00:11:10,020 It's perfectly normal. 218 00:11:10,020 --> 00:11:12,480 And if we check ourselves against our solution 219 00:11:12,480 --> 00:11:14,790 you can see they match exactly, 220 00:11:14,790 --> 00:11:19,230 and we end up with the same result as the goal image 221 00:11:19,230 --> 00:11:21,570 which is what we were aiming for. 222 00:11:21,570 --> 00:11:23,190 How did you manage that? 223 00:11:23,190 --> 00:11:25,020 Don't worry if you got things wrong. 224 00:11:25,020 --> 00:11:27,690 This is where it's safe to go wrong 225 00:11:27,690 --> 00:11:30,300 and try things because we're just learning. 226 00:11:30,300 --> 00:11:32,910 There's no test and there's nobody watching you. 227 00:11:32,910 --> 00:11:35,580 All that matters is you're actually learning stuff. 228 00:11:35,580 --> 00:11:36,960 That's what's important. 229 00:11:36,960 --> 00:11:38,820 Have a play around with the code. 230 00:11:38,820 --> 00:11:40,620 Don't worry if you do anything wrong. 231 00:11:40,620 --> 00:11:45,000 There's always a solution and me here to help you. 232 00:11:45,000 --> 00:11:46,590 There's a couple of things to note 233 00:11:46,590 --> 00:11:48,750 in terms of dos and don'ts when it comes 234 00:11:48,750 --> 00:11:51,660 to heading elements that I wanna talk to you about. 235 00:11:51,660 --> 00:11:53,910 One important rule is notice how 236 00:11:53,910 --> 00:11:57,180 in our exercise there was only one h1. 237 00:11:57,180 --> 00:12:01,620 It's not good practice to have more than one h1s, 238 00:12:01,620 --> 00:12:05,370 because the h1 is the very top level heading. 239 00:12:05,370 --> 00:12:08,010 Imagine the h1 as the book title 240 00:12:08,010 --> 00:12:11,340 and the table of contents as including the other parts. 241 00:12:11,340 --> 00:12:14,373 So maybe the h2 would be the first chapter. 242 00:12:15,360 --> 00:12:17,670 Don't have more than one h1. 243 00:12:17,670 --> 00:12:21,060 Instead, if you need another subtitle 244 00:12:21,060 --> 00:12:22,860 or another level of heading, 245 00:12:22,860 --> 00:12:25,770 then go to the h2 or h3 246 00:12:25,770 --> 00:12:29,283 or all of the other ones up until h6. 247 00:12:30,360 --> 00:12:33,180 Now the other thing to watch out for is don't 248 00:12:33,180 --> 00:12:37,470 skip a level when you're creating heading elements. 249 00:12:37,470 --> 00:12:40,680 Don't go straight from h1 to h3. 250 00:12:40,680 --> 00:12:43,350 If you have an h3, there should also be 251 00:12:43,350 --> 00:12:46,440 an h2 somewhere on that webpage. 252 00:12:46,440 --> 00:12:49,770 Instead, I recommend to just go in order. 253 00:12:49,770 --> 00:12:51,840 When you have an h1 that you've created 254 00:12:51,840 --> 00:12:54,120 and then you realize you need another heading, 255 00:12:54,120 --> 00:12:55,740 then go to an h2. 256 00:12:55,740 --> 00:12:57,660 And then if you need another level 257 00:12:57,660 --> 00:13:01,770 of heading that's even lower in priority, go to an h3. 258 00:13:01,770 --> 00:13:04,890 Don't jump between the different level headings. 259 00:13:04,890 --> 00:13:07,740 These are not things that will break your code. 260 00:13:07,740 --> 00:13:09,330 Your website will still look fine 261 00:13:09,330 --> 00:13:11,340 even if you break all of these rules, 262 00:13:11,340 --> 00:13:13,170 but they're just rules for convention. 263 00:13:13,170 --> 00:13:15,360 And because we're gonna be professionals, 264 00:13:15,360 --> 00:13:16,920 we're gonna start off on the right foot 265 00:13:16,920 --> 00:13:19,653 and learn all the rules that we need to know. 266 00:13:20,490 --> 00:13:21,840 Now if you wanted to read up 267 00:13:21,840 --> 00:13:24,840 even more on the HTML heading elements, 268 00:13:24,840 --> 00:13:27,990 then I recommend going to the professional tool 269 00:13:27,990 --> 00:13:32,010 which is our Mozilla Developer Network Web Docs 270 00:13:32,010 --> 00:13:34,440 and they have documentation for all 271 00:13:34,440 --> 00:13:37,230 of the HTML elements that exist. 272 00:13:37,230 --> 00:13:39,960 And when you read up on each of these pages, 273 00:13:39,960 --> 00:13:41,940 they tell you more details 274 00:13:41,940 --> 00:13:43,650 about things that you need to know 275 00:13:43,650 --> 00:13:46,200 and they show you some interactive examples 276 00:13:46,200 --> 00:13:48,180 of how it all works. 277 00:13:48,180 --> 00:13:50,460 Now I don't recommend reading through all 278 00:13:50,460 --> 00:13:52,860 of these for all of the HTML elements, 279 00:13:52,860 --> 00:13:54,870 but I do recommend that if you're gonna use 280 00:13:54,870 --> 00:13:57,570 a new element that you haven't seen before 281 00:13:57,570 --> 00:13:59,580 and you don't know how it works, 282 00:13:59,580 --> 00:14:01,470 you haven't had a lecture on it, 283 00:14:01,470 --> 00:14:03,150 then I recommend just taking a quick look 284 00:14:03,150 --> 00:14:05,370 at the docs and seeing some examples 285 00:14:05,370 --> 00:14:08,190 about how they're used, in a similar way 286 00:14:08,190 --> 00:14:09,990 that I've shown you in the lectures. 287 00:14:10,860 --> 00:14:12,150 Now that we've learned about one 288 00:14:12,150 --> 00:14:14,280 of the most important HTML elements, 289 00:14:14,280 --> 00:14:16,500 the heading elements, in the next lesson 290 00:14:16,500 --> 00:14:19,920 we're gonna move on to another super important element 291 00:14:19,920 --> 00:14:22,080 which is the paragraph element. 292 00:14:22,080 --> 00:14:25,047 So for all of that and more, I'll see you there.