Welcome to your first challenge.
In this challenge, I want you to practice not only using the correct syntax for
formatting content but also the decision making that goes behind it as well.
I want to warn you.
This is the biggest challenge of the entire course and
you're going to be editing multiple files.
So, don't be surprised if it takes you a couple of sessions to
get all the way through it.
There's nothing wrong with that.
Basically, in the challenge, you're going to be editing a reference site that
I've created for the HTML Essential Training course.
This reference site has a page that gives a little brief Introduction to HTML.
It talks a little bit about its history.
There's a page on HTML Syntax.
It goes over the different HTML Syntax rules.
There's a page on structuring pages properly,
which we'll cover in a later chapter.
There's one on Creating Links.
There's an HTML Reference that has a glossary and
a table a the bottom of it that shows common named character entities.
And finally, there's a Next Steps page that talks a little bit about what to
do after completing this course and
gives some references that I think are very valuable for anybody learning HTML.
So as part of your challenges,
you'll be working on different portions of this site.
So for our first challenge, I want you to go into the 03 underscore 09 directory.
Inside of that folder, we've got all the files that we'll be working on.
You'll notice that there are several HTML files,
there's intro, links, next, reference, structure and syntax.
And then there's also this file.
This is the lab underscore instructions.txt and
this contains all of the instructions that you'll need for this challenge.
Now I'm going to go over them for you in just a moment, one by one.
But it's nice to kind of have this handy when you're working,
because you can always reference back to it and it'll tell you what to do next and
you won't have to keep coming back and watching this video.
So, let's go through step by step what it is that you'll be doing for
this challenge.
The very first thing I want you to do is to determine a heading strategy for
this site.
Now this is going to apply to all pages.
What you're going to do is you're going to open each of these pages, intro links,
next, reference, structure and syntax.
Read through the text.
And then determine which content should be represented as headings.
And then what level of heading you should use or each page.
Is it an h1?
Is it an h2?
Is it an h3?
That sort of thing.
You really want to focus on being consistent in how you assign headings on
each page.
So, if you, you use one strategy on one page, you're going to use it on the other.
So your going to go to each of the pages and format headings based your tragedy.
Now, I've tried to make this a little bit easier or you.
I'm going to switch over to intro.htm and show you what I mean.
You can see the text is group kind of on its own line and
that maybe a single line like you see these or it may be a big paragraph.
And I've tried to offer some separation between those to make it
little easier to read those.
So, it shouldn't be that difficult to sort of scan through these pages and
figure out what needs to be a heading.
The challenge here is going to be determining a strategy for
these headings and assigning values to them.
After you're done determining heading and
applying those to pages, the next step will be formatting paragraphs.
Now, you're not going to need to do this in every page.
You're just going to need to do this to the intro.htm.
So again, going back to intro.
Scanning through its content, you're also going to need to consider which of
these blocks of content should be paragraphs.
And then format those appropriately.
Next, we want to take a look at controlling line breaks.
That'll be in the next.htm file.
And there's a specific section called learning web design.
Below there that are four recommendations.
Now each of these recommendations has an initial sentence that's followed by
descriptive text.
What I want you to do is use a line break to format those paragraphs, so
their initial sentence appears on its own line.
And just so you know what I'm talking about.
If I go to next,
you can see that we have this section down here about learning web design.
It says, learn how the web works and then some descriptive text.
Determine an area of focus and start there and some descriptive text.
So right now, all of these are in the same paragraph.
So they would just appear as one block of copy.
What I want you to do is use line breaks to make sure the first line is on its
own individual line within the paragraph.
Now staying with next.htm, your next task will be to determine emphasis for text.
Now I want you to read this set of instructions very carefully because it'll
give you a hint as to which tags I'm expecting you to use.
So again, we're going to be in the next.htm file.
All those four pieces of advice that we were just talking about in
the learning web design section, you need to determine how to best emphasize that
first line that you put on it's own line break in each paragraph.
Think about in ways that you could isolate that line or
emphasize it in a way that denotes, its importance to the rest of the paragraph.
Now in the last advice paragraph, which is break things.
Which I'll show you in just a moment.
You want to display the quotes I have there in italics.
And in the same paragraph, the last line.
Always challenge yourself.
I want you to emphasize that, so that its importance is indicated.
So there's little semantics that I was just giving you for those instructions.
So if I go back over to next and
I go down to the break things, you can see that I have some quotations here.
So I want to tail size those.
And in the very last sentence, always challenge yourself.
You want to emphasize that.
And then finally, there's a list of resources below the advice section.
You want to make sure all the top-level list items appear in bold.
So again, going back to next.
If I scroll down, I can see a list of resources down here.
Most of them are single lines within paragraphs, but
some of them are descriptive text.
You want to make sure that you're bolding everything, except for the descriptions.
So as you're reading through those, it should be pretty easy to
determine which of them need to be bold and which of them don't.
Next, we'll be displaying special characters.
To do this, you'll navigate to the reference file.
Down at the bottom,1 you're going to find a table down there that
displays common named character entities.
Now, you're not going to need to do a lot of this.
My advice is to go ahead and preview that page in a browser and, and
actually use that actual table as a reference.
Once you want to do then is go back into the code and
add the appropriate name character entity into the first table cell.
So you're providing a visual of that character.
So, switching back over to the reference.htm.
If I scroll down, you'll find this table down towards the bottom.
Here we go.
And you can see that the first table cell right here is empty.
That needs to have the quotation named character entity inside of it.
One more thing that I want you to do is in the definition for Elements,
wrap the word tags in quotes using a left and right quotes special character.
So, if I go back to reference.
Let me show you what I'm talking about.
If I scroll up into these definitions.
I can find the definition for Elements right here.
And it says, HTML elements consist of an HTML tag used to identify the content and
then the content itself.
It's often used interchangeably with the term tags.
So this is the one right here that I want a left quote on this side and
then a right quote on this side.
One last thing that you need to do.
I told you this was a very big challenge.
Is you're going to be inserting an image.
And you want to do this in the intro.htm page.
There's actually an existing image already at the top of the page.
You're going to use that as a reference.
You'll note an attribute called class.
And it has a value of flowRight.
Now this is being used by CSS to control styling in terms of
the way that the text wraps around that.
We're going to learn more about that later on.
But for right now, you just want to make a note of that.
When you scroll down, you're going to find a paragraph that says,
Shortly After the 1.0 specification.
At the beginning of that paragraph,
you want to insert an image that has the following values.
It should point to the 200 pixel dash W3C icon.png,
which you can find in the images directory.
So, the source attribute is going to need to point to that.
You're going to use for the alt text the W3C logo.
It has a 200 pixel width and 136 pixel height.
And you want to apply a class and you can use the image above it as a reference,
you want to apply a class attribute of flowLeft and
you need to spell it like this and capitalization does matter.
Going into intro.
If I scroll down, I can see the existing image.
It's right there.
And, if I scroll down even further, I can find the paragraph that I'm looking for,
which is right here shortly after the 1.0 specification.
So you're going to place an image right there and
give it the attributes that are mentioned in the instructions.
Okay.
Now when you're finished, there's one thing I want you to do and
that is to go into the finished files directory and
compare the results that you got with my finished files.
Now you can find those in the 03 underscore 09 finished files directory.
Don't peak before you finish.
I really want you to see what your results look like next to mine.
And in most cases, they'll probably match.
But if they don't, I want you to really think about why they don't match.
Was it because you disagreed with the strategy that I used for
headings, paragraphs or probably emphasizing text.
Those are the three areas where you might disagree with me the most.
A lot of times, as I mention here in the text, those decisions are indeed
judgement calls and they may not have a quote, unquote right answer.
However, if your files do disagree with me or don't match up.
Make sure that number one is not a syntax error and
you didn't type in something wrong.
And number two make sure that if you're results diverge from mine that
the decision making that you use was based on valid semantic HTML.
It's okay to have disagreements about the way certain things should be structured.
That's fine.
But you want to make sure that regardless, your using valid HTML and that your
code really reflects the semantic meaning if what you're wanting to do.
I also recommend that if you're looking for a little bit more practice,
go through all the files and compare your formatting to the existing formatting and
make sure that it's consistent all the way through.
I know that's a lot, as I mentioned this was a really big challenge.
But I wanted you to have the experience of having to consider multiple pages across
your site when developing strategies for how content is going to be formatted.
So be sure to go slow, take your time on the challenge.
And then when you're done, check out the finished files and
compare them with your work.
But above anything else, have fun.