- [Teacher] I hope you had fun with your first challenge.
I know it was a big one, and it probably took you a little
bit longer to get through it than you were anticipating.
I hope you were able to reinforce a lot of the
things that we've learned in the previous chapter.
What I wanna do in this movie is just kinda go through
the finished files with you, and explain my reasoning
for why I formatted things a certain way.
That way, if you disagree with me
or if your code doesn't match up,
you can at least sort of understand the thinking
that I used when I structured mine,
and sort of adjust yours appropriately
or determine if you liked your strategy better,
which in some cases you might.
There's nothing wrong with that.
So the very first step was determine a heading strategy,
and I'm gonna show you what I did by
just going over to the intro.htm page.
So the very first heading on the page,
which is HTML Essential Training, and you may have
noticed that, that is consistent on every single page.
That's the first line of text.
It's the name of the course, so to me,
that becomes the most important heading on the page,
and I formatted it appropriately with a heading 1.
Below that, we have the title of each page.
So every page has a different title,
and this is unique to the page.
So to me, that's kind of a subheading.
Now after that, within the content,
we would also find headings,
and these headings typically indicated
the beginning of a section of content.
So what I like to do there is use a heading 3, again,
'cause it's one level below those main headings at the top.
And I was pretty consistent with that throughout
all of my pages, and if I preview this in the browser,
you can kind of see the results to this.
Now some of you out there might be going,
"Wait a minute, HTML Central Training was in h1.
"Why isn't it bigger than the h2?"
And again, that's the magic of CSS.
We'll learn about that later in this course.
The styles that I wrote for this page
actually de-emphasize that even though
it's considered to be "the more important of the headings."
So as I scroll through the content, I can see
each of the sections start with one of those heading 3s.
Now the only part where yours and mine might
differ a lot is on, say, something like links.
If I go to the links.htm page and I scroll down,
I can see that in this section of link types,
there's actually two types of links that I talk about:
absolute and document relative.
Now I went ahead and used an h4 on those
because they belong to the section above them,
and that's why I use an h4 there.
Now you may not have known that they
belonged to the section above it.
If you were reading through that, you would've had to say,
"Okay, well those are two different link types."
And maybe you just scan through it
or maybe you didn't read through it
or maybe you just didn't realize that it belonged to that.
So if you gave those an h3 as well,
that's something for you to think about.
That actually occurs in a couple places.
If I'm on Links, for example, and scroll down,
I can see that for link types, I have
absolute links and document relative links,
and it occurs in one other page as well.
I think it is in Syntax.
Yes, in Syntax, as I scroll down,
I can see that under Doctypes, for example, I have
all these different doctypes, and those are all h4s.
So that's my heading strategy.
You wanna compare your pages to mine and see
if they match up, and if not, as long as yours
is based on sound semantics, then it's fine.
However, if it doesn't match, and it's not
semantically described in the content,
you may wanna rethink that strategy.
Now the next task was to format
paragraphs in the intro page.
Let me switch back to intro, and this
probably was pretty easy for you guys.
Basically, any block of content that wasn't a heading
is already formatted, got a paragraph around it.
Just scroll through and make sure
that you got the same paragraphs as I did.
You may have grouped text into larger paragraphs,
and also, if you did anything with the list down here,
that does not need to have a paragraph surrounding it.
So if you surrounded that with a paragraph,
you did not need to.
You'll also notice that I had a paragraph
down here on the very bottom,
where we have the footer content of our page.
Next up was controlling line breaks,
and this applied to the next.htm file.
So if I go to next and I scroll down
to find those sort of four pieces of advice,
you'll notice that I have a line break
after each one of these, so that was pretty simple.
And whether or not they're on the same line is up to you.
A lot of people like doing what I've done here,
which is to put them on separate lines,
but really if the text was formatted just like this,
it would still look the same within the browser.
So how you format that is totally up to you.
Now staying in that file, we were talking about
determining emphasis, and one of the very first things
that we talked about was emphasizing those lines that
are sort of on their own line due to the line break.
And you guys could see this when
I was showing you the line break.
But what I did was I surrounded them with a strong tag.
Now the reason that I use a strong instead of a bold tag
is in the instructions themselves.
Notice that it says, "Determine how to best
"emphasize the first line in each paragraph."
So I'm not saying just displaying in bold,
I'm saying I want them emphasized.
And so because of that, I use
a strong instead of a bold tag.
The last advice paragraph break things,
I wanted to display the quotes in italics.
Notice I didn't say I wanted to emphasize them,
but I did wanna emphasize the last line,
"Always challenge yourself."
So if I go in to that and scroll down a little bit,
you can see that I used the i,
or italics tag around the quotes,
and I used the em tag around always challenge yourself.
Using that same type of thinking,
in the list of resources below the Advice section,
make sure all top-level list items appear in bold.
Well if I go back to next, you can see
that within those paragraphs, I've just
used the b tag around those top-level items.
And if your top-level items differ from mine,
you'll notice that I've only got a b right here,
not around HTML related titles and
Web Design related titles, that's okay.
This is actually later on when we talk about lists.
This is gonna be a list of items,
and it's really difficult to tell right now
because they're all just paragraphs.
So if you didn't get this exactly right,
or if yours isn't exactly the same as mine,
it's totally okay, don't worry about that.
The semantics of this information will become a lot
clearer later on when we have our chapter on lists.
Next, we were gonna display special characters,
and we did that in the reference.htm.
So the first thing was going to the first table cell
that was empty and put in the proper name character entity,
and then we wanted to go and wrap
the text tags in quotation marks.
So let's take a look at how we did that.
So go into reference, and if I scroll down into
that first table cell, we can see that I use
the name character entity for quotation mark
for the first table cell, and then if I scroll up
to find the definition for elements, I can see
that I have the left quote on the left side
and the right quote on the right side.
So make sure that you used the proper named
character entities for the left quote
and the right quote around that text.
And finally, we wanted to insert
an image at the bottom of the page.
Now there were a couple things that we needed to do there.
First, we needed to point to the 200px-W3C_icon.
We also wanted to give it a class of flowLeft,
which would use the CSS to flow the text around it.
It should have the alt text for W3C logo,
and its width and height should be 200 by 136.
So if I go into the intro page,
scroll down towards the bottom.
So again, notice that the image tag is inside the paragraph
so it's right after the opening tag.
There's its source, so it's pointing to _images,
so I had to know to go to that folder,
and then /200px-W3C_Icon.png.
Now if your image didn't show up, more than likely
it's this that is the culprit, so make sure that the path
is spelled correctly, make sure that capitalization
is done the same way, that shouldn't matter, but
just in case it does, make sure you have .png.
So this needs to be exactly the
same as you're seeing it here.
So if you're having a problem with the
image display, that's the likely culprit.
Next, we have our alt text W3C logo,
there's the width and height,
and then there's the class attribute of flowLeft,
and that results in the image that you're seeing here.
Okay, so those were all the steps and how I completed them.
Again, yours may differ from mine a little bit,
it's perfectly okay in some instances.
You just wanna make sure that anywhere that you
have a disagreement with me, that your reasoning
is based on sound semantic formatting of your content.