We'll come back.
So in this lesson we're going to start by making a new file actually filling it with h t m l an opening
in the browser and we're also going to learn about the underlying structure of every HTML document.
So there's a few things that every document always has kind of boilerplate that we're going to learn
about.
So to start going to go to sublime and I'm going to make a new file.
So file new file or command and and then I'm going to save the file and give it a name.
So file save or command as.
So once I do that we're going to give it a name.
Let's call it first page the page T.M. and this part is very important.
Dot h Timo.
So I'll hit save.
And that dot each team l tell sublime.
And when I open it in Chrome it tells chrome This is an h tim I'll file treated as such.
So we can write to Tim Allen here.
So we'll start with just the one tag we've seen so far are one of the tags which is an H-1.
And you'll notice that it's highlighted for me.
So let's fill this in.
This is my first tag and save this file and you'll see sublime knows it's H D M L so it highlights it
makes corresponding tags red.
In my case.
Now what we want to do is actually open this file and view it because remember each time out it's just
text but our browser interprets it and turns it into something like this or this.
So to actually get Chrome to open it there's a few solutions.
The first one is just double click on it and it will open it in your default browser.
If that is not chrome it will still work but it will open it in Safari or Firefox or Internet Explorer
and you can see though as it opens it it's not showing me the actual h t m l it is taking the h him
out underlying it and turning it into this nice visual representation.
As always I can view my page source and you'll see it's just one tag.
So definitely simpler than something like this.
But underlying they're exactly the same.
And there's probably an H-1 on this page as well.
So one other way of doing this.
You can take the file right click and click on open with Google Chrome or you can click on it and drag
it to Chrome and that will open it as well.
Same thing goes for sublimest well so if you accidentally close the file you can drag it here and it
will reopen it.
So just to show you that click and I can open it.
So unfortunately I have to break the news that are simple.
It's Tim L that we've written so far is actually slightly wrong.
The e-mail tag itself is fine but this isn't a valid document.
And that's because we're missing the underlying structure that every page needs to have.
So it looks like this.
It is a lot compared to what we've done so far.
But the good news is there's two pieces of good news.
One it's always the same.
And two sublime has a nice shortcut that gives this structure to us very very quickly with just four
letters that we have to type.
So we're going to go over these pieces individually and just a little bit but I'm going to start by
just showing you how to get it in sublime so sublime instead of h tim l file we can type the word h
tim L and then hit tab and we automatically get this structure.
So let's go over what this does.
First we're going to save.
So there's this doc type H him out up top and it's kind of weird because there isn't a corresponding
closing doc type like there is H-G M-L and head and title and body doc type is on its own.
So let's go to M.D. and just showing you how you would get there I would type MT-NW and then doc type
and it might seem silly to really talk about that but this is important because finding this information
out is really what being a developer is googling something.
How do you find the right answer.
I'm going to be a complete broken record on that.
My students laugh every time I talk about the art of googling but it really is important.
So I'm here.
Let's take a look.
It says the doc type for each Timofei is simple to indicate that your HMO content uses HDMI.
Five simply use doctype H-2 him out with an exclamation point in front of it and we do want to use HMO
5.
We'll talk exactly about what a schmuck a 5 is and what it isn't.
In a future video.
But we do want to use it.
It's basically just the newest version of aged him out.
So we put this up top.
So the next thing we're going to talk about is the h t m l element.
So this one is a little harder to find by searching who do MT-NW an HMO.
If we just element
there we go I always look for this empty end in the name.
And this tells us the aged him root element represents the root of an HMO document.
All other elements must be descendants of this element.
So it's pretty self-explanatory.
Basically everything that we write needs to go inside of each element.
And more importantly under permitted content it tells us one head element followed by one body which
is what we have one head and one body.
So let's take a look at what head is the head element.
Provide general information metadata about the document including its title and links to are definitions
of scripts and style sheets.
So what that means is basically everything that we don't see on the page as a user.
So things like font files in our stylesheet files or javascript files all of those go in the head and
then the body is where we put all of our content.
It represents the content of an age HTML document.
So if we go back here I can assure you one more thing which is how to write comments and niched him
out.
If I wanted to write a note to myself if I just wrote this content goes in the body and then appear
I wrote a data goes in head.
Fortunately that won't work because this will actually show up on the page.
Its team will treat this like text and I want it just to be a note to myself.
So this is something you can do in every programming language.
You can turn this into a comment and a comment looks just like this starts with a less than sign exclamation
point two dashes and then some content and then on the other side two dashes and a greater than sign
.
So he can type that hear yourself type it manually
and you can see it kind of goes gray in sublime.
But another really nifty shortcut is that you can select a line you don't have to select it just go
to align and hit command slash
and you can also see it can go up to it and you can go to comment toggle comment.
So in case you forget this and you don't want to write it out.
Another nice thing.
Let's say I had a bunch of notes to myself I can select all of them and do the same thing.
Command slash.
Great.
So I'm going to keep these comments here that are just notes to myself.
My content goes in the body.
It goes in the head.
So that means that if we're following our own notes our content here needs to go inside of our body
.
So we should have nothing floating around outside the H Tim L element except for doctype.
Everything else goes in head or in body.
So let's go ahead and open this up make sure it looks the same as it did before.
Double click.
You can see it looks identical.
Let's view the page source looks the same.
Notice that our comments are not showing up of course only our H-1 shows up.
One thing that we're missing while we're here is a title.
A title is important not because it shows up on the page it will not show up in our actual page here
.
Remember it's in the head.
So it's just metadata what it does do is two things.
One it's going to determine the name or the text that goes in our tab appear.
And it's also important for search engines and for other pages when other pages linked to your site
or when you go to Google and you search for MDA on these names here.
These come from the title elements.
So for instance M.D. and celebrates 10 years of document in your web you click on that.
You can see up here it says MDA and celebrates it gets cut off.
You can inspect the page look for a title element.
So a lot of stuff here we go.
Title and celebrates 10 years of documenting your web.
The mizzle blog.
So title is important.
So let's give ArcSight a title let's just call it my first page refresh watch right here and it updates
.
That's it for now.
Remember two things.
This boilerplate can just type H him l tab.
You would never have more than one in the document.
But just so you remember html tab and comments.
You can do with command slash can target them on and off.
All right