1.
Use your text editor to create a new file named basic.htm, and then save it in the tutorial.01review folder included with your Data Files.
2.
Add the doctype for an HTML5 document.
3.
Create the root html element and nest the head and body elements within it.
61
62
4.
Within the head element, insert the comment
where your name is your name and the date is the current date.
5.
Add code to specify that the page uses the UTF-8 character set.
6.
Set the page title as Basic Sticks.
7.
Link the file to the modernizr-1.5.js script file to enable HTML5 support for older browsers.
8.
Link the file to the basicstyles.css style sheet file.
9.
Within the body element, create structural elements for the page header, main section, and footer.
10.
Within the page header, insert an h1 heading containing the inline image file basiclogo.png. Specify the following alternate text for the image: The J-Prop Shop. Below the h1 heading, insert an h2 heading containing the text Specials This Month. Group the h1 and h2 headings using the hgroup element.
11.
Within the section element, insert an aside element. The aside element should contain an inline image pointing to the basicstick.png file and having the text string photo as the alternate text. Below the inline image within the aside element, insert a paragraph containing the text string Our Basic Stick.
12.
Add two article elements to the section element.
13.
Within the first article, insert an h2 heading containing the text The Basic Stick. Add a paragraph containing the following text:
The Basic Stick is the perfect stick for beginners. The stick rotates slowly to provide extra time for performing stick tricks, but is flashy enough to impress your friends. Enjoy the following:
14.
Add a block quote containing the following four paragraphs (you can copy this text from the stick.txt file):
Patented Dura-Coat finish ensures sticks can withstand all weather conditions. More durable than other sticks, these props will keep looking like new for as long as you own them.
Enhanced stick flexibility provides more bounce, allowing for better tricks. A soft rubber core adds a whole new element to the sticking experience that you have to feel to believe!
Full customization will give you the chance to own a pair of sticks unlike any others out there. I make exactly what you want, with your colors and your designs.
A personal touch through both my customization options and hand-crafted designs.
15.
Mark the first few words of each of the four paragraphs as strong text, as shown in Figure 1-48.
16.
Within the second article element, insert an h2 heading with the title Specifications.
17.
Directly below the h2 heading, insert an unordered list. The list should contain two items: Main Stick and Handle Sticks (one pair).
18.
Within the Main Stick list item, insert a nested unordered list containing the following items: •
Weight: 7 oz.
•
Length: 24 inches
•
Tape: Dura-Coat finish with laser-style color choices
19.
Within the Handle Sticks (one pair) list item, insert a nested unordered list containing the following items:
•
Weight: 2 oz.
•
Length: 18 inches
•
Tape: Soft ivory tape with rubber core
20.
Locate the two occurrences of Dura-Coat in the document. Directly after the word Dura-Coat, insert the registered trademark symbol ®. The character entity name of the ® symbol is reg. Display the ® symbol as a superscript by placing the character within the sup element.
21.
Within the page footer, insert the company’s address:
The J-Prop Shop
541 West Highland Drive
Auburn, ME 04210
(207) 555 – 9001
22.
Separate the different sections of the address using a solid diamond (character code 9830).
23.
Save your changes to the file, open it in your Web browser, and then compare your Web page to Figure 1-48 to verify that it was rendered correctly. Older browsers may display some slight differences in the design.
24.
Submit your completed files to your instructor, in either printed or electronic form, as requested.
0 comments