1
00:00:00,600 --> 00:00:01,433
Instructor: Now that we've seen

2
00:00:01,433 --> 00:00:04,200
how HTML elements and tags work,

3
00:00:04,200 --> 00:00:07,230
it's time to explore the bigger picture,

4
00:00:07,230 --> 00:00:09,750
what's called the HTML boilerplate.

5
00:00:09,750 --> 00:00:11,970
And this allow us to understand

6
00:00:11,970 --> 00:00:15,030
the structure of our HTML files,

7
00:00:15,030 --> 00:00:17,100
just like how there is structure

8
00:00:17,100 --> 00:00:19,620
to letters that you would write.

9
00:00:19,620 --> 00:00:21,120
For example, there's the section

10
00:00:21,120 --> 00:00:23,250
where you have your address,

11
00:00:23,250 --> 00:00:26,070
and then you probably would include a

12
00:00:26,070 --> 00:00:27,780
Dear so and so,

13
00:00:27,780 --> 00:00:30,780
and then you have the body of your letter,

14
00:00:30,780 --> 00:00:32,850
and finally you would write something like

15
00:00:32,850 --> 00:00:34,260
Your sincerely,

16
00:00:34,260 --> 00:00:36,990
and then your name and signature.

17
00:00:36,990 --> 00:00:41,430
Similarly, there is a structure to our HTML files,

18
00:00:41,430 --> 00:00:44,010
and it looks something like this.

19
00:00:44,010 --> 00:00:45,780
And this is called a boilerplate.

20
00:00:45,780 --> 00:00:47,850
It's what you usually start off with

21
00:00:47,850 --> 00:00:51,000
when you create any new HTML file.

22
00:00:51,000 --> 00:00:52,620
And we're gonna go through it line by line

23
00:00:52,620 --> 00:00:54,420
so that we understand it.

24
00:00:54,420 --> 00:00:56,400
At the top of every HTML file,

25
00:00:56,400 --> 00:00:59,490
there should be a DOCTYPE declaration,

26
00:00:59,490 --> 00:01:01,770
and that's what this tag does.

27
00:01:01,770 --> 00:01:03,150
It tells the browser

28
00:01:03,150 --> 00:01:06,780
which version of HTML the file was written in.

29
00:01:06,780 --> 00:01:09,850
Now the latest version of HTML is HTML5

30
00:01:11,190 --> 00:01:14,250
and the DOCTYPE declaration looks like this,

31
00:01:14,250 --> 00:01:15,690
with an angle bracket,

32
00:01:15,690 --> 00:01:17,370
an exclamation mark,

33
00:01:17,370 --> 00:01:19,080
DOCTYPE in all caps,

34
00:01:19,080 --> 00:01:20,490
and then html.

35
00:01:20,490 --> 00:01:23,970
And this line tells any browser that's reading our HTML file

36
00:01:23,970 --> 00:01:27,690
that we have written our code in HTML version five.

37
00:01:27,690 --> 00:01:31,230
The next part that we've got is the actual html.

38
00:01:31,230 --> 00:01:34,650
Now this is going to be the root of the document.

39
00:01:34,650 --> 00:01:37,740
It means that everything else, every other element,

40
00:01:37,740 --> 00:01:41,310
no matter if it's an h1 or an image or a link,

41
00:01:41,310 --> 00:01:43,710
it's all gonna go inside

42
00:01:43,710 --> 00:01:48,710
the opening and closing tags of the html element.

43
00:01:50,970 --> 00:01:54,060
And this attribute where it says lang,

44
00:01:54,060 --> 00:01:58,530
this is the language of the text content in that element.

45
00:01:58,530 --> 00:02:01,200
So for example, if you are writing a website

46
00:02:01,200 --> 00:02:04,980
that is going to be targeted at English speakers,

47
00:02:04,980 --> 00:02:08,729
then you're gonna set your lang to English, en.

48
00:02:08,729 --> 00:02:10,350
Now, this isn't very important

49
00:02:10,350 --> 00:02:13,590
for the users who can see your website.

50
00:02:13,590 --> 00:02:16,830
It's more important for the users who can't

51
00:02:16,830 --> 00:02:18,900
because there are various screen readers

52
00:02:18,900 --> 00:02:20,400
and assistive technologies

53
00:02:20,400 --> 00:02:22,740
that will look at this language attribute

54
00:02:22,740 --> 00:02:24,960
so that when they read out the website,

55
00:02:24,960 --> 00:02:27,270
they can pronounce the words correctly.

56
00:02:27,270 --> 00:02:29,490
Man's Voice: Opens profile photo.

57
00:02:29,490 --> 00:02:31,980
Follow at Yu Angela button.

58
00:02:31,980 --> 00:02:33,690
Instructor: Now with the html element,

59
00:02:33,690 --> 00:02:36,990
we're starting to see the beginnings of a hamburger.

60
00:02:36,990 --> 00:02:40,110
There's a bun at the top and there's a bun at the bottom.

61
00:02:40,110 --> 00:02:42,420
For those of you guys who have been my long-term friends,

62
00:02:42,420 --> 00:02:45,300
you know how much I love food analogies.

63
00:02:45,300 --> 00:02:46,830
But this is a great one.

64
00:02:46,830 --> 00:02:49,440
Because when we have an html element,

65
00:02:49,440 --> 00:02:52,500
usually there is the opening and the closing

66
00:02:52,500 --> 00:02:54,360
and everything that belongs in it

67
00:02:54,360 --> 00:02:56,220
is sandwiched inside.

68
00:02:56,220 --> 00:02:58,950
Now, the next part of the HTML boilerplate

69
00:02:58,950 --> 00:03:00,900
is the head element.

70
00:03:00,900 --> 00:03:02,010
And this is an area

71
00:03:02,010 --> 00:03:06,300
where important information about our website is placed

72
00:03:06,300 --> 00:03:09,630
that is not going to be displayed to the user.

73
00:03:09,630 --> 00:03:10,770
It includes things

74
00:03:10,770 --> 00:03:14,190
that will help the website render in the browser correctly,

75
00:03:14,190 --> 00:03:16,710
but it doesn't include any sort of content,

76
00:03:16,710 --> 00:03:18,150
like text or images

77
00:03:18,150 --> 00:03:20,070
or anything that the user will see.

78
00:03:20,070 --> 00:03:22,170
So one of the things that you should always have

79
00:03:22,170 --> 00:03:23,730
in the head section

80
00:03:23,730 --> 00:03:28,730
is a meta tag for the character set encoding of the webpage.

81
00:03:29,340 --> 00:03:32,460
And in this case, it's set as UTF-8.

82
00:03:32,460 --> 00:03:34,770
What this does is it ensures

83
00:03:34,770 --> 00:03:38,250
that the characters that you are using on your website

84
00:03:38,250 --> 00:03:40,230
gets displayed correctly.

85
00:03:40,230 --> 00:03:42,750
So for example, in certain character sets,

86
00:03:42,750 --> 00:03:45,060
it won't allow emojis to render,

87
00:03:45,060 --> 00:03:46,410
in other character sets,

88
00:03:46,410 --> 00:03:48,090
they won't have certain symbols

89
00:03:48,090 --> 00:03:50,850
like multiplication, division symbols,

90
00:03:50,850 --> 00:03:54,420
and that's what this meta tag takes care of.

91
00:03:54,420 --> 00:03:56,280
Usually, by convention,

92
00:03:56,280 --> 00:03:57,960
in our HTML boilerplate,

93
00:03:57,960 --> 00:04:01,050
we will simply just include this tag as is

94
00:04:01,050 --> 00:04:03,630
using the UTF-8 character set,

95
00:04:03,630 --> 00:04:05,340
which is one of the most common.

96
00:04:05,340 --> 00:04:07,500
So you don't even have to think about it.

97
00:04:07,500 --> 00:04:10,710
Now, another thing that you should have in your head section

98
00:04:10,710 --> 00:04:13,830
is the title of your website.

99
00:04:13,830 --> 00:04:18,829
And that title is usually what gets displayed up here

100
00:04:18,930 --> 00:04:20,730
in the tab bar.

101
00:04:20,730 --> 00:04:25,050
And in fact, if you right-click on any website in Chrome,

102
00:04:25,050 --> 00:04:28,110
you can click to view page source.

103
00:04:28,110 --> 00:04:30,510
And you can see we've got our DOCTYPE,

104
00:04:30,510 --> 00:04:32,580
we've got our html element,

105
00:04:32,580 --> 00:04:34,800
inside it, we've got our head,

106
00:04:34,800 --> 00:04:36,330
our character set.

107
00:04:36,330 --> 00:04:39,120
And then if we scroll a little bit more,

108
00:04:39,120 --> 00:04:42,420
you can see we've got our title here.

109
00:04:42,420 --> 00:04:45,840
And in between the opening and closing tags of the title,

110
00:04:45,840 --> 00:04:50,250
it tells you what title should be displayed up here.

111
00:04:50,250 --> 00:04:51,420
So in our case here,

112
00:04:51,420 --> 00:04:54,570
the title will simply say My Website.

113
00:04:54,570 --> 00:04:56,100
Now there's a lot more things

114
00:04:56,100 --> 00:04:58,170
that can go into the head element,

115
00:04:58,170 --> 00:05:02,160
as you've seen when we looked at the Google homepage.

116
00:05:02,160 --> 00:05:03,090
But for now,

117
00:05:03,090 --> 00:05:05,970
these two are the most important things

118
00:05:05,970 --> 00:05:09,210
that will always go into your HTML files.

119
00:05:09,210 --> 00:05:10,890
And it's important to know.

120
00:05:10,890 --> 00:05:13,830
We'll cover other tags as we come across them.

121
00:05:13,830 --> 00:05:15,600
Now the next sandwich,

122
00:05:15,600 --> 00:05:17,610
inside the sandwich, if you will,

123
00:05:17,610 --> 00:05:20,190
are two slices of tomatoes.

124
00:05:20,190 --> 00:05:21,030
No, just kidding.

125
00:05:21,030 --> 00:05:23,160
It's actually the body element.

126
00:05:23,160 --> 00:05:24,150
Just like a person,

127
00:05:24,150 --> 00:05:27,000
after the head element comes the body element.

128
00:05:27,000 --> 00:05:28,770
Inside the body element

129
00:05:28,770 --> 00:05:32,130
is where we're gonna be spending the majority of our time

130
00:05:32,130 --> 00:05:35,370
creating and writing our website.

131
00:05:35,370 --> 00:05:38,820
This is where all of the content of the website goes.

132
00:05:38,820 --> 00:05:41,160
So the text, the titles,

133
00:05:41,160 --> 00:05:42,840
the images, the links,

134
00:05:42,840 --> 00:05:45,270
everything that you can do with HTML

135
00:05:45,270 --> 00:05:47,400
creating content and structure

136
00:05:47,400 --> 00:05:50,220
goes in between the opening

137
00:05:50,220 --> 00:05:53,430
and the closing tags of the body element.

138
00:05:53,430 --> 00:05:56,493
So somewhere inside here.

139
00:05:57,330 --> 00:05:58,740
Now what can go in here?

140
00:05:58,740 --> 00:06:01,950
Well, we've seen already how an h1 works.

141
00:06:01,950 --> 00:06:03,930
So we can put in a heading,

142
00:06:03,930 --> 00:06:05,940
we can add images,

143
00:06:05,940 --> 00:06:07,380
we can add lots of things.

144
00:06:07,380 --> 00:06:09,330
And this is essentially

145
00:06:09,330 --> 00:06:13,473
where the meat of our website is going to live.

146
00:06:14,340 --> 00:06:16,560
Once our burger collapses down,

147
00:06:16,560 --> 00:06:20,700
you can see that this is what a typical website's HTML code

148
00:06:20,700 --> 00:06:22,320
is made up of.

149
00:06:22,320 --> 00:06:25,110
So no matter what you add into your body,

150
00:06:25,110 --> 00:06:26,760
you can vary it up.

151
00:06:26,760 --> 00:06:28,290
But by default,

152
00:06:28,290 --> 00:06:30,240
most websites will start off

153
00:06:30,240 --> 00:06:32,820
with a boilerplate that looks like this.

154
00:06:32,820 --> 00:06:34,620
When you are starting out,

155
00:06:34,620 --> 00:06:37,350
I often recommend students to type this out

156
00:06:37,350 --> 00:06:39,630
when they're creating new websites.

157
00:06:39,630 --> 00:06:42,720
And in fact, you can have a go doing this now.

158
00:06:42,720 --> 00:06:44,610
By going into VS Code,

159
00:06:44,610 --> 00:06:46,860
typing out these elements

160
00:06:46,860 --> 00:06:50,640
and creating your website entirely from scratch.

161
00:06:50,640 --> 00:06:52,830
Now we're beginning to see this idea

162
00:06:52,830 --> 00:06:56,460
of nesting in an HTML document,

163
00:06:56,460 --> 00:06:57,870
and this is gonna be a concept

164
00:06:57,870 --> 00:07:00,270
that's gonna become super important

165
00:07:00,270 --> 00:07:03,240
as we learn more and more programming.

166
00:07:03,240 --> 00:07:05,940
But it's simple to understand

167
00:07:05,940 --> 00:07:09,240
if we come back to this analogy of the hamburger.

168
00:07:09,240 --> 00:07:11,820
So we have our html element,

169
00:07:11,820 --> 00:07:15,000
which has the opening and closing tags here,

170
00:07:15,000 --> 00:07:19,560
and it is exactly like our hamburger bun.

171
00:07:19,560 --> 00:07:22,500
So this is our top bun

172
00:07:22,500 --> 00:07:25,470
and this is our bottom bun.

173
00:07:25,470 --> 00:07:26,940
And sandwich in between

174
00:07:26,940 --> 00:07:31,050
is everything that goes inside the html element.

175
00:07:31,050 --> 00:07:33,690
Now if we take a look at our body element,

176
00:07:33,690 --> 00:07:38,160
then you can see here we've got the opening body tag,

177
00:07:38,160 --> 00:07:41,400
which will represent with a slice of tomato,

178
00:07:41,400 --> 00:07:43,680
and the closing body tag.

179
00:07:43,680 --> 00:07:46,380
And in between those two slices of tomato

180
00:07:46,380 --> 00:07:48,810
is the content for our website.

181
00:07:48,810 --> 00:07:52,020
Now you'll notice that some of the HTML tags,

182
00:07:52,020 --> 00:07:55,530
even though they have an opening and closing tag,

183
00:07:55,530 --> 00:07:58,530
they're not on different lines.

184
00:07:58,530 --> 00:08:01,140
And that's because if we can fit it on one line

185
00:08:01,140 --> 00:08:04,560
and we can see the beginning and the end very easily,

186
00:08:04,560 --> 00:08:07,320
then we don't actually need to create several lines.

187
00:08:07,320 --> 00:08:11,250
But nonetheless, it's still got a beginning and an end.

188
00:08:11,250 --> 00:08:12,870
Now, the important thing for us.

189
00:08:12,870 --> 00:08:14,730
When we are writing code

190
00:08:14,730 --> 00:08:17,400
and we've got all of this sandwiching going on

191
00:08:17,400 --> 00:08:19,890
that we indent our code properly,

192
00:08:19,890 --> 00:08:21,210
so that you can see

193
00:08:21,210 --> 00:08:26,010
that this clearly lines up with the opening tag here,

194
00:08:26,010 --> 00:08:29,850
so they are clearly sandwiching something in between.

195
00:08:29,850 --> 00:08:31,860
And then we have two spaces

196
00:08:31,860 --> 00:08:34,860
and we've got the next indentation level here.

197
00:08:34,860 --> 00:08:39,090
So this one lines up with the closing tag.

198
00:08:39,090 --> 00:08:42,090
And through this kind of indentation,

199
00:08:42,090 --> 00:08:44,070
you can quite easily visualize

200
00:08:44,070 --> 00:08:46,740
that this head section

201
00:08:46,740 --> 00:08:51,740
is clearly embedded inside the html section.

202
00:08:52,830 --> 00:08:57,480
So just like our lettuce is inside our hamburger,

203
00:08:57,480 --> 00:08:59,820
by indenting our code properly,

204
00:08:59,820 --> 00:09:02,310
we'll be able to keep our code tidy

205
00:09:02,310 --> 00:09:04,260
and we'll be able to see at a glance

206
00:09:04,260 --> 00:09:07,410
exactly what our code looks like.

207
00:09:07,410 --> 00:09:10,320
Now finally, because we're using VS Code,

208
00:09:10,320 --> 00:09:12,630
I wanna tell you about a shortcut.

209
00:09:12,630 --> 00:09:14,340
That means you don't have to type out

210
00:09:14,340 --> 00:09:16,860
this boilerplate every single time.

211
00:09:16,860 --> 00:09:18,990
Once you've typed that out once or twice

212
00:09:18,990 --> 00:09:22,140
and you know exactly how the boilerplate looks,

213
00:09:22,140 --> 00:09:23,730
you can save a lot of time

214
00:09:23,730 --> 00:09:26,880
by simply typing exclamation mark,

215
00:09:26,880 --> 00:09:29,520
hitting Enter on the first selection,

216
00:09:29,520 --> 00:09:31,590
and then it will automatically

217
00:09:31,590 --> 00:09:33,870
insert all of that code for you,

218
00:09:33,870 --> 00:09:36,000
saving you a lot of time

219
00:09:36,000 --> 00:09:39,480
especially when you're creating many HTML documents.

220
00:09:39,480 --> 00:09:41,250
Now the important thing here though

221
00:09:41,250 --> 00:09:43,170
is this only works

222
00:09:43,170 --> 00:09:48,060
if you have created a .html website.

223
00:09:48,060 --> 00:09:52,260
So notice that when you create a new file inside VS Code,

224
00:09:52,260 --> 00:09:57,260
if you name it and save it as something something .html,

225
00:09:57,480 --> 00:09:59,490
then this trick will work.

226
00:09:59,490 --> 00:10:02,400
If you save it with another extension,

227
00:10:02,400 --> 00:10:04,200
then it won't.

228
00:10:04,200 --> 00:10:07,320
There's a couple of things here that we haven't seen before,

229
00:10:07,320 --> 00:10:09,060
couple more meta tags,

230
00:10:09,060 --> 00:10:11,280
and there's a lot of other meta tags.

231
00:10:11,280 --> 00:10:14,700
But here we've got one line here which says

232
00:10:14,700 --> 00:10:19,500
http equivalent X UA Compatible content IE edge.

233
00:10:19,500 --> 00:10:23,010
This basically just keeps our code compatible

234
00:10:23,010 --> 00:10:25,050
with Internet Explorer.

235
00:10:25,050 --> 00:10:27,570
And in fact, I normally don't write this line anymore

236
00:10:27,570 --> 00:10:30,330
because Internet Explorer has been deprecated

237
00:10:30,330 --> 00:10:32,550
and is no longer in use.

238
00:10:32,550 --> 00:10:34,590
So if you want to keep your code clean,

239
00:10:34,590 --> 00:10:36,210
you can actually delete this

240
00:10:36,210 --> 00:10:39,870
from your VS Code autogenerated boilerplate.

241
00:10:39,870 --> 00:10:43,170
Now the next one tells you the viewport,

242
00:10:43,170 --> 00:10:47,460
and it defines how the website should be displayed

243
00:10:47,460 --> 00:10:52,260
relative to the screen that it's being rendered on.

244
00:10:52,260 --> 00:10:54,930
And this line of code just tells the browser

245
00:10:54,930 --> 00:10:58,560
how to display your website when it first opens.

246
00:10:58,560 --> 00:11:01,650
So now that we've learned all about HTML Boilerplates,

247
00:11:01,650 --> 00:11:04,320
it's time to build your own boilerplate,

248
00:11:04,320 --> 00:11:06,483
or in this case, build your own burger.

249
00:11:07,320 --> 00:11:08,250
As you notice,

250
00:11:08,250 --> 00:11:11,550
there are endless numbers of html elements

251
00:11:11,550 --> 00:11:14,580
and we're gonna be creating our own html elements.

252
00:11:14,580 --> 00:11:17,220
But the important thing here I want you to understand

253
00:11:17,220 --> 00:11:20,940
is how nesting works in HTML

254
00:11:20,940 --> 00:11:23,040
and how you can keep your code tidy

255
00:11:23,040 --> 00:11:24,930
by using good indentation

256
00:11:24,930 --> 00:11:27,870
and keeping good programming practices.

257
00:11:27,870 --> 00:11:30,840
If we're building our own imaginary burger,

258
00:11:30,840 --> 00:11:33,480
let's imagine the world's best burger,

259
00:11:33,480 --> 00:11:34,770
you can have it vegan,

260
00:11:34,770 --> 00:11:36,420
you can have it vegetarian,

261
00:11:36,420 --> 00:11:37,560
you can have bacon,

262
00:11:37,560 --> 00:11:40,710
you can have whatever it is your heart desires,

263
00:11:40,710 --> 00:11:44,490
but you have to write it in HTML code.

264
00:11:44,490 --> 00:11:47,460
Let's begin by creating a bun.

265
00:11:47,460 --> 00:11:50,910
So I've got a bun element that I've created,

266
00:11:50,910 --> 00:11:54,720
which has an opening and a closing tag,

267
00:11:54,720 --> 00:11:56,760
and I've added an attribute.

268
00:11:56,760 --> 00:11:59,430
You can add as many of these attributes as you like.

269
00:11:59,430 --> 00:12:03,120
And remember, we add attributes by giving it a name,

270
00:12:03,120 --> 00:12:05,160
and then after an equal sign,

271
00:12:05,160 --> 00:12:07,110
we give it a value.

272
00:12:07,110 --> 00:12:10,380
Now the next part is for you to invent.

273
00:12:10,380 --> 00:12:12,240
So head over to VS Code

274
00:12:12,240 --> 00:12:13,950
and build your own burger,

275
00:12:13,950 --> 00:12:15,960
adding in whatever elements you want,

276
00:12:15,960 --> 00:12:17,220
add tomatoes,

277
00:12:17,220 --> 00:12:18,600
add ham,

278
00:12:18,600 --> 00:12:23,100
but make sure that you're keeping the indentation correct,

279
00:12:23,100 --> 00:12:24,810
and that you are working

280
00:12:24,810 --> 00:12:29,550
with this idea of opening and closing tags.

281
00:12:29,550 --> 00:12:32,130
But you can be as creative as you like.

282
00:12:32,130 --> 00:12:34,860
Be sure to share your code for your burger

283
00:12:34,860 --> 00:12:36,900
in the Q&A section.

284
00:12:36,900 --> 00:12:38,790
And if you want some inspiration,

285
00:12:38,790 --> 00:12:41,343
this is one that I made earlier.

286
00:12:42,180 --> 00:12:45,300
But I want you to practice making your own

287
00:12:45,300 --> 00:12:47,220
and doing it your way.

288
00:12:47,220 --> 00:12:48,810
Have a go at that,

289
00:12:48,810 --> 00:12:50,310
and once you're done,

290
00:12:50,310 --> 00:12:51,813
head over to the next lesson.