1 00:00:05,190 --> 00:00:10,020 Welcome back, everyone, to this lecture, we're going to explore just some basic HTML and text. 2 00:00:10,770 --> 00:00:16,470 So we're going to do is go to our website and check out the source HTML of that website and begin to 3 00:00:16,470 --> 00:00:20,670 build an understanding of how it actually relates to the content we see on the page. 4 00:00:20,880 --> 00:00:23,670 We'll also show you how to inspect individual elements. 5 00:00:24,030 --> 00:00:27,180 Keep in mind, we're going to be using the Chrome browser for this. 6 00:00:27,660 --> 00:00:32,610 Once we understand a real website, we'll go ahead and start creating our own each HTML file. 7 00:00:33,030 --> 00:00:38,650 So in order to do that, we're actually going to check out Visual Studio code and then be able to create 8 00:00:38,650 --> 00:00:41,550 our HTML and see that file in our own browser. 9 00:00:41,940 --> 00:00:44,880 Let's get started by heading over to a browser. 10 00:00:45,780 --> 00:00:48,150 All right, here I am at Google Dot Com. 11 00:00:48,600 --> 00:00:54,480 Now let's imagine as you're taking a course, you have a question on something like an H HTML title 12 00:00:54,480 --> 00:00:56,400 text, the one we showed in the previous lecture. 13 00:00:56,730 --> 00:01:02,580 Well, what you could do is do something like each HTML title tag and then just hit enter, and you're 14 00:01:02,580 --> 00:01:06,150 often going to see two websites show up in these top links. 15 00:01:06,420 --> 00:01:13,290 You're going to see a website called W3C Schools Dot Com, and for pretty much any HTML blank tag sort 16 00:01:13,290 --> 00:01:20,070 of search, you're going to find each HTML, W3C schools and then basically an example, a definition 17 00:01:20,070 --> 00:01:25,430 and usage which browsers support it, global attributes and then examples of more things. 18 00:01:25,440 --> 00:01:29,940 And what's cool about this is you can actually click, try it yourself, and I'll have a little editor. 19 00:01:29,940 --> 00:01:32,370 You can run in your browser and see the result. 20 00:01:32,700 --> 00:01:37,320 We're going to be running our own editor that is Visual Studio Code, so you don't need to worry too 21 00:01:37,320 --> 00:01:42,320 much about this, but does like to do things like edit this, put in a bunch of text, their hit run, 22 00:01:42,330 --> 00:01:43,530 and you would see that change. 23 00:01:44,430 --> 00:01:49,920 Now the reason I mention just Google searching a question about each HTML is there's actually another 24 00:01:49,920 --> 00:01:55,530 source that often shows up in the top links, and that's developer that Mozilla thought this is the 25 00:01:55,530 --> 00:01:58,620 same people that are behind the Mozilla Firefox browser. 26 00:01:59,010 --> 00:02:04,800 And personally, I would actually recommend that as you get more and more comfortable with questions 27 00:02:04,800 --> 00:02:10,620 about how the web works and each HTML and CSS and those sort of things that you actually check out the 28 00:02:10,620 --> 00:02:12,930 Mozilla web docs as well. 29 00:02:13,740 --> 00:02:17,100 It's a lot of the same information, but it's a little more professional. 30 00:02:17,100 --> 00:02:20,880 It gives you some examples here, and I personally prefer it. 31 00:02:21,120 --> 00:02:26,460 As far as the examples and the explanations, the specifications you can see here, it is a little more 32 00:02:26,460 --> 00:02:32,190 geared towards professionals versus the school is more geared towards people who are learning. 33 00:02:32,490 --> 00:02:37,960 So eventually you're probably going to switch over to looking things up on developer that Mozilla, 34 00:02:37,960 --> 00:02:41,250 the org and clicking those links versus the W3C schools link. 35 00:02:41,490 --> 00:02:47,910 But I did want to make you aware of those actual resources for you as you begin to understand how the 36 00:02:47,910 --> 00:02:48,510 web works. 37 00:02:48,990 --> 00:02:54,180 Now let's go back to Google here, and let's check out a Wikipedia article page. 38 00:02:54,510 --> 00:02:58,800 The thing I'm about to show you won't work super well on Google because it's actually quite an advanced 39 00:02:58,800 --> 00:03:00,570 website that uses a lot of JavaScript. 40 00:03:00,840 --> 00:03:02,400 So a simpler website. 41 00:03:02,520 --> 00:03:07,680 So what I'm going to do is let's go ahead and look up Albert Einstein's Wikipedia page. 42 00:03:07,890 --> 00:03:12,150 So I'm going to go to Wikipedia, the org and check out Albert Einstein's page. 43 00:03:12,570 --> 00:03:17,670 You can see here there's a bunch of information, and you can also see that some of these are links 44 00:03:17,790 --> 00:03:19,800 to other Wikipedia pages. 45 00:03:19,800 --> 00:03:23,550 So I can click on a theory of relativity, and it takes me to that link. 46 00:03:24,060 --> 00:03:30,270 And if I notice some of these pieces of text are in larger font than others, some are in Bolt. 47 00:03:30,540 --> 00:03:32,370 Others are italicize. 48 00:03:32,760 --> 00:03:38,370 And so we'll need to understand is the browser is receiving that information of whether to make something 49 00:03:38,370 --> 00:03:43,170 a link, whether it's to make something larger or even whether to show an image somewhere that links 50 00:03:43,170 --> 00:03:48,180 to another page that is all actually being taken from the HTML. 51 00:03:48,990 --> 00:03:56,100 So I can right click and hit a view page source that's control you as a shortcut and your browser, 52 00:03:56,100 --> 00:04:01,950 if you're using the Chrome browser, should actually show you the each HTML document that your browser 53 00:04:01,950 --> 00:04:03,090 is reading for this page. 54 00:04:03,090 --> 00:04:08,330 So you can think of this as the source material, and you'll notice there's a bunch of information here. 55 00:04:08,340 --> 00:04:13,830 And as you begin to scroll down past all of this, eventually you'll see things like there's a list 56 00:04:13,830 --> 00:04:19,380 here like special, relatively general relativity, and those lists are actually later shown here on 57 00:04:19,380 --> 00:04:19,740 the page. 58 00:04:19,740 --> 00:04:24,240 You can think of this as kind of a giant list and there's other things like awards, et cetera. 59 00:04:24,300 --> 00:04:26,990 You can see here my first impression of the USA. 60 00:04:27,000 --> 00:04:33,210 So the actual text, for example, in July 1920, one that we just saw that is actually all being rendered 61 00:04:33,210 --> 00:04:35,700 on this page based off the HTML here. 62 00:04:35,910 --> 00:04:42,030 So in general, our idea is that we want to learn how to create our own HTML documents so our browser 63 00:04:42,030 --> 00:04:43,200 can end up rendering it. 64 00:04:43,680 --> 00:04:47,400 Obviously, there's a lot more going on than just simple HTML here, but you get the idea. 65 00:04:47,850 --> 00:04:52,920 The other thing I want to show you is the fact that you can inspect individual elements on this page. 66 00:04:53,100 --> 00:04:59,790 For example, I can right click on Albert Einstein and then instead of viewing the entire page source, 67 00:04:59,790 --> 00:05:00,870 I can inspect. 68 00:05:01,870 --> 00:05:04,630 And what this does is it loads up this little inspector. 69 00:05:05,590 --> 00:05:10,990 And you can see here it actually shows me in a little slightly more organized fashion as it also highlights 70 00:05:10,990 --> 00:05:16,690 things that are on the page of the actual each table about this particular element. 71 00:05:17,110 --> 00:05:23,440 So we're going to say is that this is an element and the tag is an H1 tag, which we're going to learn 72 00:05:23,440 --> 00:05:24,460 about in just a second. 73 00:05:24,820 --> 00:05:30,430 We can also see that there is actual text here of what it's showing, and I can double click on this 74 00:05:30,760 --> 00:05:35,140 and let's go ahead and change this to say something like Jose Padilla hit enter. 75 00:05:35,470 --> 00:05:36,160 And I'll look. 76 00:05:36,160 --> 00:05:39,880 The change is actually now being edited and changed by my browser. 77 00:05:40,150 --> 00:05:44,530 Now, of course, I haven't actually changed the real Wikipedia article to now say Jose Padilla. 78 00:05:44,920 --> 00:05:52,420 I've only changed the little source code that my browser loaded up when it asked Wikipedia for the initial 79 00:05:52,420 --> 00:05:53,170 information. 80 00:05:53,680 --> 00:05:57,700 The other thing you'll notice is that there's something over here on the right called styles. 81 00:05:58,000 --> 00:06:04,750 Later on, we'll learn that this is CSS that will actually dictate the styling that is things like color 82 00:06:04,900 --> 00:06:08,560 or padding or font size position, that sort of thing. 83 00:06:08,980 --> 00:06:13,990 We can think of each HTML as the content and CSIS as the styling of that content. 84 00:06:14,350 --> 00:06:21,010 There are some things you can do as far as styling is concerned and HTML things like bold text or italicized 85 00:06:21,010 --> 00:06:21,400 text. 86 00:06:21,700 --> 00:06:23,680 But for right now, we'll just keep that distinction. 87 00:06:23,800 --> 00:06:25,120 Each HTML is the content. 88 00:06:25,450 --> 00:06:27,070 CIUSSS will be the styling. 89 00:06:27,730 --> 00:06:28,060 All right. 90 00:06:28,180 --> 00:06:34,780 Now do we understand how to view the page source of a real website, as well as inspect particular elements 91 00:06:34,780 --> 00:06:35,440 on the website? 92 00:06:35,740 --> 00:06:40,180 Let's open up a visual studio code and bring in to create our own HTML files. 93 00:06:40,870 --> 00:06:41,140 OK. 94 00:06:41,170 --> 00:06:43,510 Here I am inside Visual Studio code. 95 00:06:43,840 --> 00:06:47,880 Now, the first thing you should do is somewhere on your computer that you can locate. 96 00:06:48,190 --> 00:06:50,880 Create a new folder and you can call this folder whatever you want. 97 00:06:50,890 --> 00:06:54,490 I'm going to call mine Django lectures and I'll be using it throughout the course. 98 00:06:54,490 --> 00:06:59,620 And I have this located on my desktop, so you can notice one of my recent folder locations that I have 99 00:06:59,620 --> 00:07:01,480 open is underneath my desktop. 100 00:07:01,690 --> 00:07:03,010 Django underscore lectures. 101 00:07:03,400 --> 00:07:07,750 After you create that folder, you can also open it by saying File Open Folder. 102 00:07:08,290 --> 00:07:10,840 So I'm going to select that. 103 00:07:10,990 --> 00:07:13,240 It's going to kind of reboot and open up that folder. 104 00:07:13,270 --> 00:07:16,420 And again, this Django lectures that's located on my desktop. 105 00:07:16,510 --> 00:07:18,620 So go ahead and take the time right now. 106 00:07:18,640 --> 00:07:25,210 Create a folder or directory somewhere on your computer and then open it by saying File, Open Folder 107 00:07:25,450 --> 00:07:27,760 and open that folder inside Visual Studio code. 108 00:07:28,150 --> 00:07:34,240 Once we've done that, you should be able to right click here or actually click on the icon and create 109 00:07:34,240 --> 00:07:35,360 a new file. 110 00:07:35,590 --> 00:07:41,860 So I'm creating a new file underneath this Django lecture folder, and I'm going to call it example 111 00:07:41,860 --> 00:07:47,740 dot h html and I enter, and right off the bat you can see that it has the extension. 112 00:07:48,010 --> 00:07:53,770 HTML and Visual Studio code is smart enough to understand that when you put that extension HTML, it 113 00:07:53,770 --> 00:07:59,620 says, Hey, this is an HTML file, and now I'm actually going to do syntax highlighting on this file 114 00:07:59,920 --> 00:08:03,940 to make sure that the user is aware of certain things like tags. 115 00:08:04,180 --> 00:08:11,980 So for example, if we create a heading one tab, I can say less then and you'll notice that it's already 116 00:08:11,980 --> 00:08:15,090 trying to help you on creating the HTML file. 117 00:08:15,100 --> 00:08:21,730 You can ignore that for right now, but just say this sign each one again, it's going to help you, 118 00:08:21,940 --> 00:08:27,100 and it actually has a link to the Mozilla reference, but kind of just ignoring all this extra help 119 00:08:27,100 --> 00:08:27,760 for right now. 120 00:08:28,210 --> 00:08:32,890 And then you notice once I closed that it will automatically create the closing type for you. 121 00:08:33,250 --> 00:08:39,100 So all the tags, or at least most of them are going to have an opening tag and then the relevant closing 122 00:08:39,100 --> 00:08:42,309 tag where the closing tag is noted with that forward slash. 123 00:08:42,429 --> 00:08:47,270 And so I have my opening tag in my closing tag and this is a heading one tag. 124 00:08:47,710 --> 00:08:49,410 And this is an H1 element. 125 00:08:49,420 --> 00:08:51,070 It represents a section heading. 126 00:08:51,550 --> 00:08:55,780 So what I'm going to do is just say this is a heading. 127 00:08:57,110 --> 00:08:59,640 And you notice that this is being syntax highlighted. 128 00:08:59,660 --> 00:09:02,300 I'm going to do control SE to save that change. 129 00:09:02,630 --> 00:09:07,910 And now what I want to do is actually open up this example, the HTML in my browser, and we're kind 130 00:09:07,910 --> 00:09:11,460 of curious, is it actually going to show this each one, each one? 131 00:09:11,480 --> 00:09:14,720 And this forward slash or will it just show this is a heading? 132 00:09:15,350 --> 00:09:22,670 So what I'm going to do is an example the HTML right click and you should be able to see it, says copy 133 00:09:22,670 --> 00:09:24,560 path, not copy relative path. 134 00:09:24,560 --> 00:09:25,700 We want the entire path. 135 00:09:25,970 --> 00:09:27,560 So go ahead and copy that path. 136 00:09:28,070 --> 00:09:34,430 And now on your clipboard, you should have the entire file path to that actual example that HTML. 137 00:09:34,910 --> 00:09:36,230 So you should be able to then. 138 00:09:37,000 --> 00:09:43,780 Bring in your browser and have open that HTML file, the other way to do this is to just actually double 139 00:09:43,780 --> 00:09:48,790 click on that file where it's saved on your computer and your browser should be the default option to 140 00:09:48,790 --> 00:09:51,460 open it up and we can see we have a heading. 141 00:09:51,910 --> 00:09:53,320 So what's actually going on here? 142 00:09:53,680 --> 00:10:00,490 Well, the tags are telling your browser how to actually approach this text. 143 00:10:00,640 --> 00:10:05,650 So, for example, I can also use something like a emphasise text. 144 00:10:06,670 --> 00:10:07,180 That's nice. 145 00:10:07,210 --> 00:10:07,770 Yep. 146 00:10:08,290 --> 00:10:12,130 So it's a stress emphasis, and basically it's another word for italics. 147 00:10:13,060 --> 00:10:16,810 Visual Studio code helped me out a lot by kind of autocomplete stuff. 148 00:10:17,140 --> 00:10:22,430 And in fact, if I just start typing em, I can actually enter here. 149 00:10:22,450 --> 00:10:24,220 And it's going to autocomplete that for me. 150 00:10:24,430 --> 00:10:28,180 So you're going to see maybe using the autocomplete more and more as we go out throughout the course. 151 00:10:28,690 --> 00:10:31,630 So I'm going to say I'll put in the exact same text. 152 00:10:31,630 --> 00:10:34,840 This is a heading, but we'll see that actually looks different once I save this. 153 00:10:35,200 --> 00:10:40,750 So once you save that, come back to your browser, refresh the page and I'll look emphasis, actually 154 00:10:40,750 --> 00:10:42,250 make things look italic. 155 00:10:42,610 --> 00:10:47,190 And if you had a question on, well, how does that actually work or what does emphasis actually do 156 00:10:47,200 --> 00:10:47,530 here? 157 00:10:47,860 --> 00:10:52,690 You just hover over this or select that block and then you can click the end reference. 158 00:10:52,930 --> 00:10:55,870 And it actually takes you to that reference page. 159 00:10:55,870 --> 00:10:59,410 And I click on that and my browser actually opened up the emphasis elements. 160 00:10:59,860 --> 00:11:04,300 And it's essentially, hey, just gives you emphasis, and it actually has the ability to demo. 161 00:11:04,810 --> 00:11:10,690 So browsers are so good now that they actually have technology to kind of render this little mini input 162 00:11:10,690 --> 00:11:11,110 output. 163 00:11:11,110 --> 00:11:15,610 So you can see here examples of things like paragraph, text, et etc.. 164 00:11:15,790 --> 00:11:20,010 So let's go through a few of these tags that are going to be important for us. 165 00:11:20,020 --> 00:11:22,520 So we have heading one, which is an H1. 166 00:11:22,540 --> 00:11:27,430 They can keep getting smaller and smaller so they can say H2 heading to. 167 00:11:28,390 --> 00:11:29,980 They can also say something like H three. 168 00:11:29,980 --> 00:11:31,240 Again, I'm going to hit enter. 169 00:11:31,240 --> 00:11:33,280 It's autocomplete, this heading three. 170 00:11:33,580 --> 00:11:36,100 And this actually goes all the way down to heading six. 171 00:11:36,880 --> 00:11:38,410 So then I can say heading six. 172 00:11:38,920 --> 00:11:41,320 And then there's also a paragraph tag. 173 00:11:41,440 --> 00:11:44,490 So if you hit P, this stands for a paragraph tag. 174 00:11:44,500 --> 00:11:49,870 And what's important about the paragraph tag, it will actually denote when the browser should have 175 00:11:49,870 --> 00:11:56,650 a new line and start a new paragraph so I can write a bunch of text here and if I keep writing. 176 00:11:57,760 --> 00:12:03,460 Text below it it's actually super clear to the HTML, whether this is a continuation inside the same 177 00:12:03,460 --> 00:12:08,440 paragraph notice, had this text, does it actually have any sort of text surrounding it? 178 00:12:08,860 --> 00:12:10,230 So I'm going to delete that. 179 00:12:10,240 --> 00:12:15,760 Let's save these changes and see what they look like inside the browser here and now I'm going to zoom 180 00:12:15,760 --> 00:12:17,610 in on the browser just so you can really see it. 181 00:12:17,620 --> 00:12:19,210 So I'm like 250 percent Zoom. 182 00:12:19,210 --> 00:12:20,740 Then the hopefully get the idea. 183 00:12:20,800 --> 00:12:23,770 This is heading one heading two heading three, you see, to get smaller. 184 00:12:24,040 --> 00:12:28,120 This is normal paragraph text actually heading six is smaller than just normal paragraph text. 185 00:12:28,450 --> 00:12:30,010 And then we can see the emphasis here. 186 00:12:30,430 --> 00:12:31,850 Something to keep in mind is later on. 187 00:12:31,850 --> 00:12:36,040 When we learn about CSS, we're going to be able to have a lot more flexibility on things like font 188 00:12:36,040 --> 00:12:43,180 size in terms of pixel counts like a 13 14 font size, colors, italics, different fonts, etc. So 189 00:12:43,480 --> 00:12:48,040 right now, just think of this more as just the very basics of what content is available to us. 190 00:12:48,460 --> 00:12:53,830 OK, so that was me just typing out the very basic HTML element tags. 191 00:12:54,280 --> 00:12:59,890 What I'm going to do now is show you what a typical Eats HTML document is structured with. 192 00:13:00,740 --> 00:13:08,480 And you may have noticed this as you start typing D.O.C., you get this kind of little helper that says, 193 00:13:08,480 --> 00:13:09,320 OK, Doc.. 194 00:13:09,350 --> 00:13:12,830 And that essentially stands for set up your HTML document. 195 00:13:13,220 --> 00:13:19,310 And you'll notice once you hit doc, you actually get what's known as the head of the HTML document 196 00:13:19,640 --> 00:13:22,310 and the body of the HTML document. 197 00:13:22,470 --> 00:13:24,080 And you may be wondering, well, what's the difference here? 198 00:13:24,500 --> 00:13:28,820 Well, the head typically contains things like links and metadata information. 199 00:13:29,300 --> 00:13:32,390 So we'll talk about that in more detail later on. 200 00:13:32,750 --> 00:13:38,030 But essentially, what this does is it informs the actual browser that, Hey, this is going to be an 201 00:13:38,030 --> 00:13:42,530 English language browser or, excuse me, English language web page. 202 00:13:42,860 --> 00:13:43,790 Why would that be important? 203 00:13:43,820 --> 00:13:48,920 Well, if this was another language, your browser, knowing you like English, may want to attempt 204 00:13:48,920 --> 00:13:54,050 to translate the text of the body on the page, so you may have noticed when you visit a foreign language 205 00:13:54,050 --> 00:13:58,490 website, Chrome browser says, Hey, would you like me to attempt to translate this for you? 206 00:13:58,850 --> 00:14:04,010 And browser knows that it's in a different language because it's detecting it based off which the HTML 207 00:14:04,010 --> 00:14:04,670 says it is. 208 00:14:04,700 --> 00:14:09,020 Now there's also more advanced technology, or Google itself is reading the contents of the page and 209 00:14:09,020 --> 00:14:12,200 can actually understand whether something's in like French, Spanish or English. 210 00:14:12,440 --> 00:14:17,390 But this is obviously very helpful for the browsers to understand the basic language that it was denoted 211 00:14:17,390 --> 00:14:22,100 in, which would be really useful if you have multiple languages on a single page, then we can also 212 00:14:22,100 --> 00:14:26,870 see those things like the title tag that also goes in the head portion of a page. 213 00:14:27,260 --> 00:14:30,140 There's other things here in the metadata that we'll talk about later on. 214 00:14:30,440 --> 00:14:34,010 We'll also later on be linking things like CSS files here in the head. 215 00:14:34,340 --> 00:14:39,960 But again, you can think of the head as just kind of more metadata about things about the page and 216 00:14:39,960 --> 00:14:42,830 then the actual content goes inside the body. 217 00:14:43,220 --> 00:14:47,390 So if you were to make an H1 heading here, it would go inside the body text. 218 00:14:47,750 --> 00:14:48,080 OK. 219 00:14:49,280 --> 00:14:55,540 And the other thing I want to point out is there's lorem ipsum so I can start typing out lorem enter. 220 00:14:55,550 --> 00:15:01,070 And it's going to make this really long piece of Latin text that's really useful if you ever find yourself 221 00:15:01,100 --> 00:15:03,560 needing to just have filler text. 222 00:15:03,650 --> 00:15:08,210 So I'm going to hit Save here, and let's refresh our page and see what happens. 223 00:15:08,780 --> 00:15:14,260 And so now I can see as a heading one, I see this entire thing of lorem ipsum text. 224 00:15:14,270 --> 00:15:17,900 Again, this just kind of Latin text here that's helpful for us. 225 00:15:18,140 --> 00:15:19,190 I have it has heading one. 226 00:15:19,190 --> 00:15:21,080 I should probably have it as just a paragraph. 227 00:15:21,890 --> 00:15:24,250 So let's mess around with some paragraph text here. 228 00:15:25,240 --> 00:15:30,610 Then I hit P, which is stands for paragraph, which is kind of quote unquote normal text, and I can 229 00:15:30,610 --> 00:15:32,080 hit lorem one time here. 230 00:15:32,860 --> 00:15:33,940 Open and close tax. 231 00:15:35,280 --> 00:15:39,900 A notice indentation in space, it's not really an issue for HTML, doesn't really care about that. 232 00:15:40,110 --> 00:15:42,000 It's just reading things based off the tags. 233 00:15:42,390 --> 00:15:43,700 Let's add a new paragraph. 234 00:15:43,710 --> 00:15:45,480 I'll say this new paragraph. 235 00:15:46,420 --> 00:15:50,390 Save those changes, come back to our page, refresh it. 236 00:15:50,450 --> 00:15:52,460 You can see here was the first paragraph. 237 00:15:52,480 --> 00:15:54,820 Then there's a new line and then the new paragraph starts. 238 00:15:55,090 --> 00:15:56,950 So it's doing that based off the tax. 239 00:15:57,250 --> 00:16:02,350 And if you're curious what's going on on this page, I could right click and then, Oops, I'm highlighting 240 00:16:02,350 --> 00:16:02,560 this. 241 00:16:02,560 --> 00:16:07,480 I could not right click view page source and I see the actual H Table code. 242 00:16:07,630 --> 00:16:13,120 So this is the same thing that we saw on the Wikipedia page, except now it's our own HTML code. 243 00:16:13,780 --> 00:16:14,080 All right. 244 00:16:14,500 --> 00:16:15,610 So that's it for this lecture. 245 00:16:15,620 --> 00:16:21,460 I just want you to get the idea that we're going to end up structuring these HTML documents with head 246 00:16:21,460 --> 00:16:22,180 and body. 247 00:16:22,660 --> 00:16:26,320 Later on will be kind of more strict about this as we begin to learn about each HTML. 248 00:16:26,500 --> 00:16:29,440 So that's super important to include head and body and everything. 249 00:16:29,710 --> 00:16:30,700 But just keep that in mind. 250 00:16:30,700 --> 00:16:32,080 You're going to see us use this more and more. 251 00:16:32,320 --> 00:16:36,670 But the main thing to understand is that there's a bunch of different types of tags which define different 252 00:16:36,670 --> 00:16:38,500 types of content on the HTML. 253 00:16:38,500 --> 00:16:43,570 And it's HTML really only cares about the stuff that's in between the opening and closing tags. 254 00:16:43,840 --> 00:16:49,930 The opening closing tags just gives information of where or how to display that particular text in between 255 00:16:49,930 --> 00:16:50,530 those tex. 256 00:16:50,950 --> 00:16:51,280 OK. 257 00:16:51,640 --> 00:16:52,050 Thanks. 258 00:16:52,060 --> 00:16:53,170 And I'll see you at the next lecture.