1 1 00:00:00,350 --> 00:00:02,050 Hi guys, and welcome back. 2 2 00:00:02,050 --> 00:00:03,790 In this video let's talk about 3 3 00:00:03,790 --> 00:00:05,080 bringing everything together a bit. 4 4 00:00:05,080 --> 00:00:07,380 Let's talk about document level annotations. 5 5 00:00:07,380 --> 00:00:10,900 So what is all that boiler plate that we've been typing 6 6 00:00:10,900 --> 00:00:14,520 or we've had our editor type for us in these documents? 7 7 00:00:14,520 --> 00:00:15,353 What does it mean? 8 8 00:00:15,353 --> 00:00:17,960 What's doctype HTML head, et cetera. 9 9 00:00:17,960 --> 00:00:18,893 Let's take a look. 10 10 00:00:19,970 --> 00:00:21,620 So the first line 11 11 00:00:21,620 --> 00:00:23,800 of all our HTML5 documents 12 12 00:00:23,800 --> 00:00:26,130 is going to look like this 13 13 00:00:26,130 --> 00:00:28,080 doctype HTML. 14 14 00:00:28,080 --> 00:00:30,280 So if everything looks like this 15 15 00:00:30,280 --> 00:00:33,370 in all our external documents, why do we need it? 16 16 00:00:33,370 --> 00:00:35,980 Well, it really exists for legacy reasons. 17 17 00:00:35,980 --> 00:00:37,220 It's job is to tell the browser 18 18 00:00:37,220 --> 00:00:41,310 that this document should abide by the HTML5 specification 19 19 00:00:41,310 --> 00:00:44,580 AKA this is an HTML5 document. 20 20 00:00:44,580 --> 00:00:46,970 Nowadays that are other ways of telling the browser 21 21 00:00:46,970 --> 00:00:49,630 what type of document this is, 22 22 00:00:49,630 --> 00:00:52,340 but this is here for legacy reasons 23 23 00:00:52,340 --> 00:00:55,250 so we still do need it. 24 24 00:00:55,250 --> 00:00:57,370 Then after the doctype HTML 25 25 00:00:57,370 --> 00:01:00,770 we've got the main HTML element. 26 26 00:01:00,770 --> 00:01:03,590 The HTML element is the root of our document 27 27 00:01:03,590 --> 00:01:07,690 and all other HTML elements will belong inside it. 28 28 00:01:07,690 --> 00:01:11,280 So the HTML element should always have two children exactly 29 29 00:01:11,280 --> 00:01:13,890 head and body. 30 30 00:01:13,890 --> 00:01:18,890 Every other element should be inside either head or body. 31 31 00:01:19,130 --> 00:01:22,020 It's also important to provide the language 32 32 00:01:22,020 --> 00:01:23,090 that the page is written in , 33 33 00:01:23,090 --> 00:01:24,730 the human language the page is written in 34 34 00:01:24,730 --> 00:01:26,010 to the HTML element 35 35 00:01:26,010 --> 00:01:27,860 so that screen readers and Google 36 36 00:01:27,860 --> 00:01:30,310 and so forth can know what this is written in. 37 37 00:01:30,310 --> 00:01:32,680 And we do that with lang="en" 38 38 00:01:32,680 --> 00:01:37,680 in my case en is the ISO language code for English. 39 39 00:01:37,830 --> 00:01:39,130 You can provide your own language in that, 40 40 00:01:39,130 --> 00:01:41,380 of course, if it's not in English 41 41 00:01:41,380 --> 00:01:44,120 there can only be a single head element 42 42 00:01:44,120 --> 00:01:45,810 in the whole document. 43 43 00:01:45,810 --> 00:01:49,200 Notice that we shouldn't confuse head and header. 44 44 00:01:49,200 --> 00:01:50,790 They are two different elements that are used 45 45 00:01:50,790 --> 00:01:53,140 for completely different things. 46 46 00:01:53,140 --> 00:01:55,330 So the head element contains elements 47 47 00:01:55,330 --> 00:01:57,710 that describe broad features of the page. 48 48 00:01:57,710 --> 00:02:01,440 Like the page title, the author, required resources 49 49 00:02:01,440 --> 00:02:05,000 like CSS style sheets, or JavaScript files, et cetera. 50 50 00:02:05,000 --> 00:02:08,590 The head element is required in all HTML5 documents. 51 51 00:02:08,590 --> 00:02:09,740 And if you don't put one in 52 52 00:02:09,740 --> 00:02:11,080 the browser is gonna make it up for you 53 53 00:02:11,080 --> 00:02:12,110 and it's gonna be empty. 54 54 00:02:12,110 --> 00:02:15,850 So put a one in, put your page title like this, 55 55 00:02:15,850 --> 00:02:16,683 for example 56 56 00:02:16,683 --> 00:02:20,550 title equal learning about head. 57 57 00:02:20,550 --> 00:02:21,605 And now when we refresh the page, 58 58 00:02:21,605 --> 00:02:23,610 you're gonna see that these changes there, 59 59 00:02:23,610 --> 00:02:26,220 the title is shown at the top. 60 60 00:02:26,220 --> 00:02:29,870 The title is one element that is normally used in head 61 61 00:02:29,870 --> 00:02:33,190 but you can also add other things like meta elements 62 62 00:02:33,190 --> 00:02:35,840 meta elements are used to describe meta information 63 63 00:02:35,840 --> 00:02:37,960 about the document that cannot be expressed 64 64 00:02:37,960 --> 00:02:39,430 using other elements. 65 65 00:02:39,430 --> 00:02:41,370 For example, the title of the page is there 66 66 00:02:41,370 --> 00:02:45,210 to tell the computer what the title of the page is 67 67 00:02:45,210 --> 00:02:47,430 and it is shown up here for example. 68 68 00:02:47,430 --> 00:02:49,240 But then there are other pieces of information 69 69 00:02:49,240 --> 00:02:52,510 that don't have elements specifically for them. 70 70 00:02:52,510 --> 00:02:55,830 And because they are so specific 71 71 00:02:55,830 --> 00:02:58,650 that the meta tag has become the element of choice 72 72 00:02:58,650 --> 00:03:00,120 for describing those. 73 73 00:03:00,120 --> 00:03:03,720 For example, you can give meta of anything 74 74 00:03:03,720 --> 00:03:06,540 you can say name="author" and that's you made up 75 75 00:03:06,540 --> 00:03:11,187 your own meta tag and the content="Rolf Smith." 76 76 00:03:12,660 --> 00:03:13,493 So you can do this, 77 77 00:03:13,493 --> 00:03:15,550 you can see the meta tag is a void element 78 78 00:03:15,550 --> 00:03:17,260 it doesn't have a closing tag. 79 79 00:03:17,260 --> 00:03:18,170 And what we've done here 80 80 00:03:18,170 --> 00:03:20,000 is we've made up our own meta tag. 81 81 00:03:20,000 --> 00:03:22,460 It's the author of the document. 82 82 00:03:22,460 --> 00:03:24,260 You can put whatever you want in name 83 83 00:03:24,260 --> 00:03:25,800 and you can put whatever you want in content. 84 84 00:03:25,800 --> 00:03:28,733 And that is how we make our own custom meta tags. 85 85 00:03:29,880 --> 00:03:32,630 That is one meta element that should be present 86 86 00:03:32,630 --> 00:03:33,940 in all your documents. 87 87 00:03:33,940 --> 00:03:36,460 And it looks like this. 88 88 00:03:36,460 --> 00:03:38,720 So here we've got the view port 89 89 00:03:38,720 --> 00:03:40,840 and this is going to help the browser understand 90 90 00:03:40,840 --> 00:03:43,010 how our page is going to scale 91 91 00:03:43,010 --> 00:03:44,800 depending on the size of the device 92 92 00:03:44,800 --> 00:03:46,013 that is looking at it. 93 93 00:03:46,900 --> 00:03:49,500 This is a vital component for responsive design 94 94 00:03:49,500 --> 00:03:50,750 that we're gonna discuss in more detail 95 95 00:03:50,750 --> 00:03:52,053 in the next section. 96 96 00:03:52,980 --> 00:03:54,150 But just for your information, 97 97 00:03:54,150 --> 00:03:55,930 responsive design is an approach 98 98 00:03:55,930 --> 00:03:58,090 to design and implement modern websites. 99 99 00:03:58,090 --> 00:04:01,170 And the idea is that the website should be viewable 100 100 00:04:01,170 --> 00:04:04,060 in different sized devices like mobile phones 101 101 00:04:04,060 --> 00:04:07,100 or big desktops, and the user experience should 102 102 00:04:07,100 --> 00:04:08,490 remain largely on change, 103 103 00:04:08,490 --> 00:04:12,440 or it should be good in both types of devices. 104 104 00:04:12,440 --> 00:04:14,160 So again, we're gonna look at responsive design 105 105 00:04:14,160 --> 00:04:16,150 in more detail later On. 106 106 00:04:16,150 --> 00:04:18,060 Finally, we've got the body element 107 107 00:04:18,060 --> 00:04:19,820 and that is the main container 108 108 00:04:19,820 --> 00:04:23,020 for what the user sees on the page. 109 109 00:04:23,020 --> 00:04:25,820 Generally, the body for simple page 110 110 00:04:25,820 --> 00:04:28,010 at least is gonna have a header 111 111 00:04:28,010 --> 00:04:31,240 is gonna have a main like this 112 112 00:04:31,240 --> 00:04:32,580 before the main content 113 113 00:04:32,580 --> 00:04:34,360 and it's gonna have a footer. 114 114 00:04:34,360 --> 00:04:35,940 But again this is not a requirement 115 115 00:04:35,940 --> 00:04:38,130 that's just something that generally happens 116 116 00:04:38,130 --> 00:04:40,050 for pages that have a header, 117 117 00:04:40,050 --> 00:04:42,290 some piece of content and a footer. 118 118 00:04:42,290 --> 00:04:45,470 So this sort of code is going to be a good starting point 119 119 00:04:45,470 --> 00:04:47,800 for most of the HTML pages you create. 120 120 00:04:47,800 --> 00:04:48,950 You can always get rid of this 121 121 00:04:48,950 --> 00:04:50,930 if you wanna create something a bit more specific 122 122 00:04:50,930 --> 00:04:51,763 but either way, 123 123 00:04:51,763 --> 00:04:55,150 this here is going to be a good starting point. 124 124 00:04:55,150 --> 00:04:57,210 VS code or visual studio code in particular 125 125 00:04:57,210 --> 00:05:00,340 has a good way of creating this starter code for you. 126 126 00:05:00,340 --> 00:05:03,140 You just type exclamation Mark, and that'll give you 127 127 00:05:03,140 --> 00:05:04,800 this Emmet abbreviation 128 128 00:05:04,800 --> 00:05:06,780 you press enter and it generates it for you. 129 129 00:05:06,780 --> 00:05:08,560 So if you're using visual studio code 130 130 00:05:08,560 --> 00:05:10,500 this is just a great way to get started 131 131 00:05:10,500 --> 00:05:12,710 in your HTML documents. 132 132 00:05:12,710 --> 00:05:14,820 All right, thank you guys for joining me in this video. 133 133 00:05:14,820 --> 00:05:15,940 I hope this has been useful. 134 134 00:05:15,940 --> 00:05:19,530 We are now really ready to get writing HTML code 135 135 00:05:19,530 --> 00:05:21,620 because we know what the different parts mean 136 136 00:05:21,620 --> 00:05:23,960 of all the boilerplate that we've been writing. 137 137 00:05:23,960 --> 00:05:25,940 And we know the different types of element 138 138 00:05:25,940 --> 00:05:27,700 that exists like flow elements 139 139 00:05:27,700 --> 00:05:30,610 which contain sectioning, heading and freezing among others. 140 140 00:05:30,610 --> 00:05:33,640 And we're now ready to really begin our journey 141 141 00:05:33,640 --> 00:05:35,230 together with CSS that we're gonna look at 142 142 00:05:35,230 --> 00:05:36,270 in the next section 143 143 00:05:36,270 --> 00:05:39,540 we're going to be able to create really nice web pages. 144 144 00:05:39,540 --> 00:05:41,782 That is really all the information we need, 145 145 00:05:41,782 --> 00:05:43,990 HTML and CSS to be able to create 146 146 00:05:43,990 --> 00:05:46,430 any webpage that we can imagine. 147 147 00:05:46,430 --> 00:05:47,990 So thank you guys for joining me once again 148 148 00:05:47,990 --> 00:05:49,740 and I'll see you in the next video.