Challenge instructions for Chapter 03: Formatting Page Content

Welcome to your first challenge! In this course’s challenges, you’ll work on completing the HTML Essential Training reference site. You won’t be building the site from scratch, rather you’ll be completing various portions of the site in varying degrees of completion. The goal is to reinforce and put into practice what you’ve learned in this chapter.

For this challenge you’ll be planning and implementing a formatting strategy for the site. In the steps below I’ll list the tasks you need to perform, as well as the relevant files for each task.

1.	Determine a heading strategy.
             a.	Applies to: All pages
             b.	Explore each of the pages (intro.htm, links.htm, next.htm, reference.htm, structure.htm and syntax.htm) and carefully read through the text.
             c.	Determine which content should be represented as headings, and then which level of headings you should use for each page. Focus on being consistent in how you assign headings for each page.
             d.	Go through each of the pages, and format headings based on your strategy.

2.	Format paragraphs
             a.	Applies to: intro.htm
             b.	Determine which content should be represented by paragraphs and then format them appropriately. 

3.	Controlling line breaks
             a.	Applies to: next.htm
             b.	In the section under “learning web design” there are four recommendations. Each recommendation has an initial sentence followed by descriptive text. Using a line break, format these paragraphs so their initial sentence appears on its own line.

4.	Determining emphasis
	     a.	Applies to: next.htm
	     b.	In the file next.htm examine the four pieces of advice in the Learning Web Design section. Determine how to best emphasize the first line in each paragraph. Think about ways that you could isolate that line or emphasize it in a way that denotes its importance to the rest of the paragraph.
             c.	In the last advice paragraph (“break things”), display the quotes in italics. In the same paragraph, emphasize the last line “Always challenge yourself” so that it’s importance is indicated.
	     d.	In the list of resources below the advice section, make sure all top-level list items appear in bold.
			
5.	Displaying special characters
	     a.	Applies to: reference.htm
	     b.	Scroll down and find the table that displays common named character entities.
	     c.	Preview the page in a browser, and using the table as a reference, add the appropriate entity into the first table cell to provide an example of that character.
	     d.	In the definition for Elements, wrap the word tags in quotes using a left and right quote special character.
			
6.	Inserting Images
	     a.	Applies to: Intro.htm
	     b.	Examine the existing image at the top of the page. Note the class “flowRight” which is used by CSS to control styling. You’ll learn more about this in the chapter on CSS.
	     c.	Scroll down until you locate the paragraph “Shortly After the 1.0 specification…” At the beginning of that paragraph insert an image that:
                  i.	points to the 200px-W3C_icon.png in the _images directory
                  ii.	uses the alt text “W3C logo”
		  iii.	passes the value of 200 for width, and 136 for height
		  iv.	applies a class of “flowLeft”			
					
When you're finished, open up the same files from the "finished_files" directory and compare your results with mine. Do they match? Were there times when you disagreed with the strategy I used for headings, paragraphs, or emphasizing text? Often these decisions are judgment calls, and don't necessarily have a "right" answer. What's important is that you have a sound reason for making the decision you did that's based on valid, semantic HTML. For more practice, go through the files and compare your formatting to the existing formatting. Is it consistent? Is the formatting what you expect, or would you make changes?