WEBVTT

0
00:00.290 --> 00:07.370
Now that we've seen how HTML elements and tags work, it's time to explore the bigger picture, what's

1
00:07.370 --> 00:09.430
called the HTML Boilerplate.

2
00:09.440 --> 00:16.880
And this will allow us to understand the structure of our HTML files just like how there is structure

3
00:16.880 --> 00:19.380
to letters that you would write.

4
00:19.400 --> 00:26.030
For example, there's the section where you have your address and then you probably would include a

5
00:26.060 --> 00:32.810
Dear so and so, and then you have the body of your letter and finally you would write something like,

6
00:32.840 --> 00:36.660
"Yours sincerely" and then your name and signature.

7
00:36.680 --> 00:43.760
Similarly, there is a structure to our HTML files and it looks something like this.

8
00:43.760 --> 00:45.500
And this is called a Boilerplate.

9
00:45.530 --> 00:50.510
It's what you usually start off with when you create any new HTML file.

10
00:50.660 --> 00:54.050
And we're going to go through it line by line so that we understand it.

11
00:54.080 --> 00:59.300
At the top of every HTML file, there should be a "Doctype declaration."

12
00:59.300 --> 01:01.530
And that's what this tag does.

13
01:01.560 --> 01:06.610
It tells the browser which version of HTML the file was written in.

14
01:06.630 --> 01:15.570
Now the latest version of HTML is HTML5 and the Doctype declaration looks like this with an angle bracket (<),

15
01:15.570 --> 01:20.310
an exclamation mark(!), DOCTYPE in all caps and then html.

16
01:20.310 --> 01:26.850
And this line tells any browser that's reading our HTML file that we have written our code in HTML Version

17
01:26.850 --> 01:27.480
5.

18
01:27.510 --> 01:31.120
The next part that we've got is the actual "html".

19
01:31.140 --> 01:34.440
Now, this is going to be the "root" of the document.

20
01:34.470 --> 01:41.310
It means that everything else, every other element, no matter if it's an h1 or an image or a link,

21
01:41.310 --> 01:52.440
it's all going to go inside the opening and closing tags of the html element. And this attribute where

22
01:52.440 --> 01:58.380
it says "lang," this is the language of the text content in that element.

23
01:58.380 --> 02:05.160
So for example, if you're writing a website that is going to be targeted at English speakers, then

24
02:05.160 --> 02:07.920
you're going to set your lang to English,

25
02:07.950 --> 02:08.550
"en".

26
02:08.580 --> 02:13.380
Now this isn't very important for the users who can see your website,

27
02:13.410 --> 02:20.370
it's more important for the users who can't, because there are various screen readers and assistive technologies

28
02:20.370 --> 02:25.770
that will look at this language attribute so that when they read out the website, they can pronounce

29
02:25.770 --> 02:27.000
the words correctly.

30
02:27.150 --> 02:30.220
"Opens profile photo. Follow @yu_angela.

31
02:30.270 --> 02:31.590
Button."

32
02:31.920 --> 02:36.870
Now, with the HTML element, we're starting to see the beginnings of a hamburger.

33
02:36.900 --> 02:39.810
There's a bun at the top and there's a bun at the bottom.

34
02:39.870 --> 02:45.180
For those of you guys who have been my longterm friends, you know how much I love food analogies,

35
02:45.180 --> 02:51.570
but this is a great one because when we have an html element, usually there is the opening and the

36
02:51.570 --> 02:55.920
closing and everything that belongs in it is sandwiched inside.

37
02:55.950 --> 03:00.600
Now the next part of the HTML boilerplate is the "head element".

38
03:00.600 --> 03:07.590
And this is an area where important information about our website is placed that is not going to be

39
03:07.590 --> 03:09.450
displayed to the user.

40
03:09.480 --> 03:15.450
It includes things that will help the website render in the browser correctly, but it doesn't include

41
03:15.450 --> 03:19.940
any sort of content like text or images or anything that the user will see.

42
03:19.950 --> 03:27.180
So one of the things that you should always have in the Head Section is a "meta" tag for the character

43
03:27.180 --> 03:32.280
set encoding of the web page, and in this case, it's set as "UTF-8".

44
03:32.310 --> 03:40.110
What this does is it ensures that the characters that you're using on your website gets displayed correctly.

45
03:40.110 --> 03:46.410
So, for example, in certain character sets, it won't allow emojis to render, in other character sets

46
03:46.410 --> 03:50.580
they won't have certain symbols like multiplication and division symbols,

47
03:50.580 --> 03:54.210
and that's what this "meta" tag takes care of.

48
03:54.240 --> 04:01.740
Usually by convention in our HTML boilerplate, we will simply just include this tag as is using the

49
04:01.770 --> 04:05.310
"UTF-8" character set, which is one of the most common.

50
04:05.310 --> 04:07.260
So you don't even have to think about it.

51
04:07.290 --> 04:14.340
Now another thing that you should have in your Head Section is the "title" of your website, and that

52
04:14.340 --> 04:20.520
title is usually what gets displayed up here in the tab bar.

53
04:20.520 --> 04:28.380
And in fact, if you right-click on any website in Chrome, you can click to "View Page Source" and you

54
04:28.380 --> 04:35.580
can see we've got our DOCTYPE, we've got our html element, inside it, we've got our head, our character

55
04:35.580 --> 04:36.120
set.

56
04:36.120 --> 04:42.240
And then if we scroll a little bit more, you can see we've got our title here.

57
04:42.240 --> 04:48.840
And in between the opening and closing tags of the title, it tells you what title should be displayed

58
04:48.840 --> 04:49.710
up here.

59
04:50.070 --> 04:54.150
So in our case here, the title will simply say, "My Website."

60
04:54.360 --> 04:59.880
Now, there's a lot more things that can go into the head element, as you've seen when we looked at

61
04:59.960 --> 05:01.520
the Google home page,

62
05:01.850 --> 05:09.050
but for now, these two are the most important things that will always go into your HTML files

63
05:09.050 --> 05:10.700
and it's important to know.

64
05:10.730 --> 05:13.490
We'll cover other tags as we come across them.

65
05:13.520 --> 05:19.520
Now, the next sandwich inside the sandwich, if you will, are two slices of tomatoes.

66
05:19.850 --> 05:20.990
No, just kidding.

67
05:20.990 --> 05:23.000
It's actually the "body element."

68
05:23.030 --> 05:24.140
Just like a person,

69
05:24.140 --> 05:26.600
after the head element comes the "body" element.

70
05:26.720 --> 05:33.920
Inside the body element is where we're going to be spending the majority of our time creating and writing

71
05:33.920 --> 05:35.030
our website.

72
05:35.060 --> 05:38.530
This is where all of the content of the website goes.

73
05:38.540 --> 05:45.090
So the text, the titles, the images, the links, everything that you can do with HTML,

74
05:45.110 --> 05:53.180
creating content and structure goes in between the opening and the closing tags of the body element.

75
05:53.180 --> 05:56.510
So somewhere inside here.

76
05:57.020 --> 05:58.580
Now what can go in here?

77
05:58.580 --> 06:06.660
Well, we've seen already how an h1 works so we can put in a heading, we can add images, we can add

78
06:06.660 --> 06:07.380
lots of things,

79
06:07.380 --> 06:13.680
and this is essentially where the meat of our website is going to live.

80
06:14.280 --> 06:21.300
Once our burger collapses down, you can see that this is what a typical website's HTML code is made

81
06:21.300 --> 06:21.990
up of.

82
06:22.080 --> 06:26.490
So no matter what you add into your body, you can vary it up,

83
06:26.490 --> 06:32.430
but by default, most websites will start off with a boilerplate that looks like this.

84
06:32.610 --> 06:39.450
When you're starting out, I often recommend students to type this out when they're creating new websites

85
06:39.450 --> 06:47.640
and in fact you can have a go doing this now by going into VS Code, typing out these elements and creating

86
06:47.640 --> 06:50.400
your website entirely from scratch.

87
06:50.430 --> 06:57.900
Now, we're beginning to see this idea of nesting in an HTML document, and this is going to be a concept

88
06:57.900 --> 07:02.970
that's going to become super important as we learn more and more programming,

89
07:02.970 --> 07:08.850
but it's simple to understand if we come back to this analogy of the hamburger.

90
07:09.000 --> 07:18.150
So we have our HTML element which has the opening and closing tags here, and it is exactly like our

91
07:18.150 --> 07:19.410
hamburger bun.

92
07:19.410 --> 07:26.220
So this is our top bun and this is our bottom bun, and sandwiched

93
07:26.220 --> 07:30.510
in between is everything that goes inside the HTML element.

94
07:30.810 --> 07:38.040
Now, if we take a look at our body element, then you can see here we've got the opening body tag,

95
07:38.040 --> 07:43.500
which will represent with a slice of tomato and the closing body tag,

96
07:43.500 --> 07:48.570
and in between those two slices of tomato is the content for our website.

97
07:48.600 --> 07:55.890
Now, you'll notice that some of the HTML tags, even though they have an opening and closing tag, they're

98
07:55.890 --> 07:58.380
not on different lines.

99
07:58.380 --> 08:04.380
And that's because if we can fit it on one line and we can see the beginning and the end very easily,

100
08:04.380 --> 08:07.230
then we don't actually need to create several lines,

101
08:07.230 --> 08:11.040
but nonetheless, it still got a beginning and an end.

102
08:11.070 --> 08:17.280
Now the important thing for us when we're writing code and we've got all of this sandwiching going on

103
08:17.280 --> 08:25.680
that we indent our code properly so that you can see that this clearly lines up with the opening tag

104
08:25.680 --> 08:26.040
here.

105
08:26.040 --> 08:29.640
So they are clearly sandwiching something in between.

106
08:29.640 --> 08:34.650
And then we have two spaces and we've got the next indentation level here.

107
08:34.650 --> 08:43.320
So this one lines up with the closing tag and through this kind of indentation you can quite easily

108
08:43.320 --> 08:52.610
visualize that this Head Section is clearly embedded inside the html section.

109
08:52.620 --> 09:00.840
So just like our lettuce is inside our hamburger, by indenting our code properly, we'll be able to

110
09:00.840 --> 09:07.180
keep our code tidy and we'll be able to see at a glance exactly what our code looks like.

111
09:07.200 --> 09:12.510
Now, finally, because we're using VS Code, I want to tell you about a shortcut,

112
09:12.510 --> 09:16.580
that means you don't have to type out this boilerplate every single time.

113
09:16.620 --> 09:22.800
Once you've typed it out once or twice and you know exactly how this boilerplate looks, you can save

114
09:22.800 --> 09:26.760
a lot of time by simply typing exclamation mark (!),

115
09:26.790 --> 09:33.810
hitting Enter on the first selection and then it will automatically insert all of that code for you,

116
09:33.840 --> 09:39.060
saving you a lot of time, especially when you're creating many HTML documents.

117
09:39.270 --> 09:47.580
Now, the important thing here, though, is this only works if you have created a dot HTML (.html) website.

118
09:47.850 --> 09:55.880
So notice that when you create a new file inside VS Code, if you name it and save it as something something

119
09:55.890 --> 09:59.460
dot html, then this trick will work.

120
09:59.550 --> 10:03.450
If you save it with another extension, then it won't.

121
10:03.960 --> 10:07.050
There's a couple of things here that we haven't seen before,

122
10:07.080 --> 10:11.040
a couple of more "meta tags" and there's a lot of other meta tags,

123
10:11.040 --> 10:19.140
but here we've got one line here which says, http-equiv="X-UA-Compatible" content="IE-edge".

124
10:19.170 --> 10:24.690
This basically just keeps our code compatible with Internet Explorer.

125
10:24.690 --> 10:30.150
And in fact, I normally don't write this line anymore because Internet Explorer has been deprecated,

126
10:30.150 --> 10:32.270
and is no longer in use.

127
10:32.280 --> 10:38.430
So if you want to keep your code clean, you can actually delete this from your VS Code autogenerated

128
10:38.430 --> 10:39.210
boilerplate.

129
10:39.780 --> 10:48.420
Now the next one tells you the "viewport," and it defines how the website should be displayed relative

130
10:48.450 --> 10:51.840
to the screen that it's being rendered on.

131
10:51.930 --> 10:57.990
And this line of code just tells the browser how to display your website when it first opens.

132
10:58.260 --> 11:04.530
So now that we've learned all about HTML boilerplates, it's time to build your own boilerplate, or

133
11:04.530 --> 11:06.570
in this case, build your own burger.

134
11:07.080 --> 11:13.650
As you've noticed, there are endless numbers of HTML elements and we're going to be creating our own HTML

135
11:13.650 --> 11:14.400
elements,

136
11:14.400 --> 11:22.050
but the important thing here I want you to understand is how nesting works in HTML and how you can keep

137
11:22.050 --> 11:27.510
your code tidy by using good indentation and keeping good programming practices.

138
11:27.690 --> 11:33.450
If we're building our own imaginary burger, let's imagine the world's best burger,

139
11:33.450 --> 11:38.820
you can have it vegan, you can have it vegetarian, you can have bacon, you can have whatever it is

140
11:38.820 --> 11:43.950
your heart desires, but you have to write it in HTML code.

141
11:44.400 --> 11:47.160
Let's begin by creating a bun.

142
11:47.250 --> 11:56.010
So I've got a bun element that I've created which has an opening and a closing tag, and I've added

143
11:56.010 --> 11:56.790
an attribute.

144
11:56.790 --> 11:59.490
You can add as many of these attributes as you like.

145
11:59.490 --> 12:06.780
And remember, we add attributes by giving it a name, and then after an equal sign, we give it a value.

146
12:06.930 --> 12:10.260
Now the next part is for you to invent.

147
12:10.260 --> 12:16.020
So head over to VS Code and build your own burger, adding in whatever elements you want.

148
12:16.050 --> 12:24.780
Add tomatoes, add ham, but make sure that you're keeping the indentation correct and that you're working

149
12:24.780 --> 12:29.220
with this idea of opening and closing tags.

150
12:29.310 --> 12:36.660
But you can be as creative as you like, and be sure to share your code for your burger in the Q&A section.

151
12:36.660 --> 12:38.700
And if you want some inspiration,

152
12:38.700 --> 12:47.130
this is one that I made earlier, but I want you to practice making your own and doing it your way.

153
12:47.160 --> 12:51.960
Have a go at that and once you're done, head over to the next lesson.