Hi, everybody.
Every once in a while I like to
stop what we've been doing, and
just do a quick check and make sure
that we've all been following along, and
really getting a grasp
of what we're doing.
So today,
we're going to make a template page.
Today, I want you to create
a page called index.html.
This page should utilize all
those semantic tags that we've
been talking about.
The header, some sort of main, a footer.
And what I want you to do is I wanna
make sure those elements are not empty.
Thirdly, I wanna make sure
that your page validates.
So let's stop for a second, and
think about all the things we've learned.
You've learned how to make elements.
You've learned how to validate them.
You've learned how to save your code.
So if you've only been listening and
you haven't been coding,
now is the time to jump in with me and
start coding.
So let's start with a shell.
If you remember,
every webpage has three main parts.
It has your Doctype, which says
hey browser, I'm gonna use HTML5.
It has your Meta-Data, which says,
I'm gonna use this type of language and
this is what the title
of my page should be.
And finally, you're gonna show
your Displayable Content.
So, now's a time to stop, if you've
been looking along on, on your phone or
whatever, I'd really love
you to burst open an editor,
and start typing along with me.
So I've brought up Sublime,
which is the editor I like to use.
And I'm gonna go ahead and
start typing in my text.
The first thing I wanted to
start with,was my doc type.
And for HTML5 it's super easy,
because it's just doc type.
[SOUND] As long as I
can type it correctly.
I've got that.
The next thing I said I wanted to put in,
was the head or
the Meta-Data, and the tag for
that, very simply enough is head.
Now if you've been following along
as I code, you would know that
most of the time my code has this really
nice kind of color signature to it, and
you can follow along
with the different parts.
But right now all my text is just white.
The reason for this, is that even
though I've begun an HTML file.
I haven't told my browser yet
that it's an HTML file,
it's just any type of text to them.
So I am gonna go ahead and save.
And what I want to do is I
want to call this, index.html.
The reason for using index.html, is that
this is a convention known worldwide as,
this is the main page for my site.
So I'm gonna go ahead and hit save.
And as you can see,
the colors have started showing up.
So let's go ahead and
finish filling in my head element.
I'm gonna go ahead and
put in my end tag right away,
because otherwise I tend
to forget these things.
And the two things I want
in here are the Meta-Data.
[SOUND] Oops, meta.
Eight.
And the all important title.
The title, again, is what shows
up on the browser's little tab.
It doesn't show up on the page itself,
it shows up in the tab.
[SOUND] I'm gonna say, My First Page.
Okay, I've gone in and put the head, and
now it's time to put in
the body of my code.
Or my displayable content.
So I'm going to start with the body tag.
[SOUND] And I'm actually gonna go and
end my HTML tag while I'm thinking
about it at the same time.
So this is an important step right here,
where we decide,
whether we're gonna make accessible code,
or just every day average code.
Accessible code is broken into parts.
You have your header, you have your main,
you have your footer.
So at the very least, use a main and a
footer here, letting our user know how you
can distinguish between
the two types of content.
So when I put in main.
And I put in footer.
It may look like I have content, but
really I don't have anything yet.
So I'm gonna save my file.
And I'm gonna use, open in browser.
And just take a look at what we've done so
far.
As you can see, I do have that little part
along the top that says my first page,
but what I'm missing is
any type of real content.
It knows there's a main, and
it knows there's a footer,
but there's nothing else really there.
So let's go ahead and put it in.
So I will put in a little
paragraph tag that says,
this is my main code.
And down, oops,
I shall leave it just like that.
And in my footer,
I should put in some more information.
Think of a more interesting footer.
Okay.
So I'm gonna go ahead and
save my page really quickly.
And let's go ahead and take a look and
see if there's any, oops.
Wrong one.
And take a look and
see if there's anything there.
Oh, there we go.
We have this is my man code, and
think of a more interesting footer.
So it works.
My code works, and it's displaying
the things I wanted it to display.
But as I mentioned, one of the things
we wanna do every time we write code,
is we wanna validate it, and
make sure we've written good, solid code.
So let's take a look.
I'm gonna open up a new tab,
do a validator.
And I'm gonna do validate by direct input,
because I haven't actually
posted my code anywhere.
So go back to my sublime.
[SOUND] Grab all of my code.
[SOUND] And put it in here.
I'm curious if you guys all noticed
the error before I run it through
the validator, but let's check.
Well, at first you don't
really see many messages.
But as we scroll our way down,
you can see that right away it says,
the element footer must not appear
as a descendant of the footer.
Well that's a kind of weird error for
me, but let's take a look at it.
So, we wanna look
somewhere along line ten.
And also, I'm gonna peek just a little bit
at the next one, where it says end tag for
body seen, but
there were Unclosed Elements.
So now I know there
are two things going on.
There's something wrong with my footer,
and something hasn't been closed.
Let's go to line ten.
Alright, here's my footer.
Well it's unhappy about my footer.
Oh here's another problem.
I have footer here, and footer here.
So even though I had multiple errors,
lets see what happens when I just
make this one change right here.
[SOUND]
All right.
I'm gonna go back here.
I kind of do this the long way,
but I always prefer it that way.
Put in my code, And let's check it again.
Boom.
Even though I had a bunch of errors
before, everything is gone.
So I really hope you've been
following along with me.
I really hope you've gone in,
you've written some code.
You've remembered to use those semantic
tags such as main, such as footer.
And you went back in and
you fixed any of the errors that
the validator found for you.
This is really important.
You can't really know HTML5,
until you jump in and start coding.
So if you've just been following along
with me, go ahead make two files,
three files, four files.
Have some fun and really play with
the one tags that confused you the most.
Because that's how your
gonna understand them, and
feel confident about your coding.
