Directly after the opening HTML tag, you're going to find a document's head.
Now the head element is where you'll place information about the document,
references to things like external scripts and styles, and
additional instructions to the browser about how the document should be rendered.
Now I'm going to open up the head.htm file, found in the 02_03 directory.
But as you can see, it's picking up right where we left off in the last exercise.
So if you still have that file open,
feel free to continue working with that one that's fine, no harm, no foul.
Okay now before we get to adding the head of our document, we first remember,
have to have the HTML tag.
Sort of that opening and closing tag, the slices of bread that I talked about.
So right after the document type declaration, I'm going to add an HTML tag.
And then just below that, I'm going to close the HTML tag.
And notice that I have a good code editor and it sort of did that for me.
For some of you guys, it probably added both the opening and
closing at the same time.
That's a preference that you can turn off or turn on inside brackets, and it doesn't
really matter, it just makes it a little bit faster if itself closes it for you.
Now before we get to adding the head,
I'm going to add an attribute to the HTML element itself.
So, right after the character HTML, I'm going to open up a space here, and I'm
going to type in L-A-N-G for language, and I'm going to set that language to English.
So you may have recalled that from earlier when we were looking at basic HTML syntax.
So this is not something that you have to do to every single HTML document, but
it is one of those things that's sort of nice for you to do.
What this is doing, is it's basically telling any user agent,
that this HTML document is going to be using English for it's language.
That's useful for screen readers in terms of how they enunciate the text,
it's also very helpful for online translators, so
that they know which language they're dealing with.
So this is kind of a nice thing for you to do, but it's not required.
So after the opening HTML tag, I'm going to open up a head tag.
I'll hit Return down here, and then I'm going to close the head tag out.
Now they don't need to be on separate lines,
it's just a little bit easier to read, so I recommend doing that.
Okay, so there are a couple things that we want to go ahead and
put inside the head tag.
And the very first thing that we want to do,
is tell the user agents which character encoding to use for the page.
So to do that, I'm going to use a meta tag.
Now, I mentioned earlier when we talked about HTML syntax,
that not every tag needs a closing tag.
Meta tags are like that, meta tags don't need a closing tag.
All they need is the initial opening tag.
So I'm going to create a meta tag, and
then after meta I'm going to open up an attribute.
In this case, I'm going to do the attribute character set or C-H-A-R-S-E-T.
I'm going to set the value equal,
to utf-8, which is a pretty standard character encoding.
And then I'm going to close that opening tag by using the right angle bracket.
And that's it, that's all we're going to do there.
Now, this is something you should do for each of your HTML documents.
You always want to set the character encoding, and
unless you're using things like Russian alphabet, or Japanese characters, or
Kanji or something like that, you're probably going to use utf-8.
So that's probably going to develop into a standard for
most of the audience that's watching this.
So, what this is doing,
is it's going to inform the user agents which encoding to use.
And that way, it's going to use the proper characters when rendering the page.
You also want to do that as the very first thing after the head tag, so
it's immediately set.
Now you might notice some HTML documents that leave this off altogether.
Now that's because there are servers out there, that when they're serving
the pages, in the header of the page, they'll also set the character encoding.
I want to caution you as an author though, not to rely on that.
It's really a good idea to go ahead and
set that individually inside each of your HTML documents.
Okay, right after that we're going to add another meta tag.
Meta tags can do a lot of things for you.
And I'm not going to go over every single meta tag and what they can do for you.
We're just going to take a look at two of them,
the character setting, and one that we're going to do for description.
So I'm going to do meta, and
then for attributes I'm going to do the name attribute.
And I'm going to go ahead and name this description, because we're going to
provide a description for the site, and then after that, I'm going to do content.
And in content I can sort of describe,
I can write a brief summary of what this page is going to be.
I'm just going to type in A page for exploring HTML documents.
And then again, I'll close out the opening meta tag there.
Now, this used to be a much more important tag.
Way back in the day, search engines would use this to actually search sites and
figure out what content was on them.
The search engines have gotten a lot more sophisticated now,
and people weren't always honest with how they used this tag.
So it sort of not paid attention anymore, so why do it?
Well, a lot of search engines will use the content that you provide here for
search engine results when they're displaying them.
It's also useful for your own indexing purposes and
searching within your site or content management system.
So it's a good practice to get into doing descriptions for each of your pages.
All right, just after this,
we're going to finish out the head of our document by doing a title.
This is another thing that you want all of your pages to have.
If they don't, they're going to show up in search results as untitled document,
which looks really unprofessional.
So we do a title by opening up a title tag, and then inside that,
we have what we want the specific title of that page to be.
In this case, I type in Basic HTML document, because that's
exactly what this is, and then, I'm going to go ahead and close the title tags.
So, title tags unlike meta tags, are going to have an opening and closing tags.
If I save this, and I preview this on my browser, you don't really see a whole lot.
However, notice up here in the tab of this file,
it's showing my title, Basic HTML document.
So it is reading it, and it is coming through loud and clear.
Now there are other things that we can do inside the head.
For example we could write local styles, we could link to external styles,
we could write local scripts or link to external scripts.
We'll explore adding those to the head of our document a little later on, but
for right now, we're done with the head of our basic HTML file.