Instructor: Now that we've seen
how HTML elements and tags work,
it's time to explore the bigger picture,
what's called the HTML boilerplate.
And this allow us to understand
the structure of our HTML files,
just like how there is structure
to letters that you would write.
For example, there's the section
where you have your address,
and then you probably would include a
Dear so and so,
and then you have the body of your letter,
and finally you would write something like
Your sincerely,
and then your name and signature.
Similarly, there is a structure to our HTML files,
and it looks something like this.
And this is called a boilerplate.
It's what you usually start off with
when you create any new HTML file.
And we're gonna go through it line by line
so that we understand it.
At the top of every HTML file,
there should be a DOCTYPE declaration,
and that's what this tag does.
It tells the browser
which version of HTML the file was written in.
Now the latest version of HTML is HTML5
and the DOCTYPE declaration looks like this,
with an angle bracket,
an exclamation mark,
DOCTYPE in all caps,
and then html.
And this line tells any browser that's reading our HTML file
that we have written our code in HTML version five.
The next part that we've got is the actual html.
Now this is going to be the root of the document.
It means that everything else, every other element,
no matter if it's an h1 or an image or a link,
it's all gonna go inside
the opening and closing tags of the html element.
And this attribute where it says lang,
this is the language of the text content in that element.
So for example, if you are writing a website
that is going to be targeted at English speakers,
then you're gonna set your lang to English, en.
Now, this isn't very important
for the users who can see your website.
It's more important for the users who can't
because there are various screen readers
and assistive technologies
that will look at this language attribute
so that when they read out the website,
they can pronounce the words correctly.
Man's Voice: Opens profile photo.
Follow at Yu Angela button.
Instructor: Now with the html element,
we're starting to see the beginnings of a hamburger.
There's a bun at the top and there's a bun at the bottom.
For those of you guys who have been my long-term friends,
you know how much I love food analogies.
But this is a great one.
Because when we have an html element,
usually there is the opening and the closing
and everything that belongs in it
is sandwiched inside.
Now, the next part of the HTML boilerplate
is the head element.
And this is an area
where important information about our website is placed
that is not going to be displayed to the user.
It includes things
that will help the website render in the browser correctly,
but it doesn't include any sort of content,
like text or images
or anything that the user will see.
So one of the things that you should always have
in the head section
is a meta tag for the character set encoding of the webpage.
And in this case, it's set as UTF-8.
What this does is it ensures
that the characters that you are using on your website
gets displayed correctly.
So for example, in certain character sets,
it won't allow emojis to render,
in other character sets,
they won't have certain symbols
like multiplication, division symbols,
and that's what this meta tag takes care of.
Usually, by convention,
in our HTML boilerplate,
we will simply just include this tag as is
using the UTF-8 character set,
which is one of the most common.
So you don't even have to think about it.
Now, another thing that you should have in your head section
is the title of your website.
And that title is usually what gets displayed up here
in the tab bar.
And in fact, if you right-click on any website in Chrome,
you can click to view page source.
And you can see we've got our DOCTYPE,
we've got our html element,
inside it, we've got our head,
our character set.
And then if we scroll a little bit more,
you can see we've got our title here.
And in between the opening and closing tags of the title,
it tells you what title should be displayed up here.
So in our case here,
the title will simply say My Website.
Now there's a lot more things
that can go into the head element,
as you've seen when we looked at the Google homepage.
But for now,
these two are the most important things
that will always go into your HTML files.
And it's important to know.
We'll cover other tags as we come across them.
Now the next sandwich,
inside the sandwich, if you will,
are two slices of tomatoes.
No, just kidding.
It's actually the body element.
Just like a person,
after the head element comes the body element.
Inside the body element
is where we're gonna be spending the majority of our time
creating and writing our website.
This is where all of the content of the website goes.
So the text, the titles,
the images, the links,
everything that you can do with HTML
creating content and structure
goes in between the opening
and the closing tags of the body element.
So somewhere inside here.
Now what can go in here?
Well, we've seen already how an h1 works.
So we can put in a heading,
we can add images,
we can add lots of things.
And this is essentially
where the meat of our website is going to live.
Once our burger collapses down,
you can see that this is what a typical website's HTML code
is made up of.
So no matter what you add into your body,
you can vary it up.
But by default,
most websites will start off
with a boilerplate that looks like this.
When you are starting out,
I often recommend students to type this out
when they're creating new websites.
And in fact, you can have a go doing this now.
By going into VS Code,
typing out these elements
and creating your website entirely from scratch.
Now we're beginning to see this idea
of nesting in an HTML document,
and this is gonna be a concept
that's gonna become super important
as we learn more and more programming.
But it's simple to understand
if we come back to this analogy of the hamburger.
So we have our html element,
which has the opening and closing tags here,
and it is exactly like our hamburger bun.
So this is our top bun
and this is our bottom bun.
And sandwich in between
is everything that goes inside the html element.
Now if we take a look at our body element,
then you can see here we've got the opening body tag,
which will represent with a slice of tomato,
and the closing body tag.
And in between those two slices of tomato
is the content for our website.
Now you'll notice that some of the HTML tags,
even though they have an opening and closing tag,
they're not on different lines.
And that's because if we can fit it on one line
and we can see the beginning and the end very easily,
then we don't actually need to create several lines.
But nonetheless, it's still got a beginning and an end.
Now, the important thing for us.
When we are writing code
and we've got all of this sandwiching going on
that we indent our code properly,
so that you can see
that this clearly lines up with the opening tag here,
so they are clearly sandwiching something in between.
And then we have two spaces
and we've got the next indentation level here.
So this one lines up with the closing tag.
And through this kind of indentation,
you can quite easily visualize
that this head section
is clearly embedded inside the html section.
So just like our lettuce is inside our hamburger,
by indenting our code properly,
we'll be able to keep our code tidy
and we'll be able to see at a glance
exactly what our code looks like.
Now finally, because we're using VS Code,
I wanna tell you about a shortcut.
That means you don't have to type out
this boilerplate every single time.
Once you've typed that out once or twice
and you know exactly how the boilerplate looks,
you can save a lot of time
by simply typing exclamation mark,
hitting Enter on the first selection,
and then it will automatically
insert all of that code for you,
saving you a lot of time
especially when you're creating many HTML documents.
Now the important thing here though
is this only works
if you have created a .html website.
So notice that when you create a new file inside VS Code,
if you name it and save it as something something .html,
then this trick will work.
If you save it with another extension,
then it won't.
There's a couple of things here that we haven't seen before,
couple more meta tags,
and there's a lot of other meta tags.
But here we've got one line here which says
http equivalent X UA Compatible content IE edge.
This basically just keeps our code compatible
with Internet Explorer.
And in fact, I normally don't write this line anymore
because Internet Explorer has been deprecated
and is no longer in use.
So if you want to keep your code clean,
you can actually delete this
from your VS Code autogenerated boilerplate.
Now the next one tells you the viewport,
and it defines how the website should be displayed
relative to the screen that it's being rendered on.
And this line of code just tells the browser
how to display your website when it first opens.
So now that we've learned all about HTML Boilerplates,
it's time to build your own boilerplate,
or in this case, build your own burger.
As you notice,
there are endless numbers of html elements
and we're gonna be creating our own html elements.
But the important thing here I want you to understand
is how nesting works in HTML
and how you can keep your code tidy
by using good indentation
and keeping good programming practices.
If we're building our own imaginary burger,
let's imagine the world's best burger,
you can have it vegan,
you can have it vegetarian,
you can have bacon,
you can have whatever it is your heart desires,
but you have to write it in HTML code.
Let's begin by creating a bun.
So I've got a bun element that I've created,
which has an opening and a closing tag,
and I've added an attribute.
You can add as many of these attributes as you like.
And remember, we add attributes by giving it a name,
and then after an equal sign,
we give it a value.
Now the next part is for you to invent.
So head over to VS Code
and build your own burger,
adding in whatever elements you want,
add tomatoes,
add ham,
but make sure that you're keeping the indentation correct,
and that you are working
with this idea of opening and closing tags.
But you can be as creative as you like.
Be sure to share your code for your burger
in the Q&A section.
And if you want some inspiration,
this is one that I made earlier.
But I want you to practice making your own
and doing it your way.
Have a go at that,
and once you're done,
head over to the next lesson.