11. We are now ready to begin entering content into the body by using grouping elements, which are elements that contain content that is viewed as a distinct block within the Web page. The following are Grouping Elements:address – contact information
blockquote – an extension quotation
dd – a definition from a description list
div – a generic grouping element
dl – a description list
dt – a definition term from a description list
figure – a figure or illustration
figcaption – the caption of a figure
li – a list item from an ordered or unordered list
ol – an ordered list
p – a paragraph
ul – an unordered list
We will now add headings to the Web page. Return to the jprop.htm file. Within the <header> element, insert the following tags:
<header>
<h1>The J-Prop Shop</h1>
<h2>Quality Juggling and Circus Props</h2>
</header>
Within the first <article> element, insert the following <h2> heading:
<article>
<h2>Welcome</h2>
</article>
Within the second <article> element, insert:
<article>
<h2>Specials This Month</h2>
</article>
Within the third and final <article> element, insert:
<article>
<h2>Quality Tested</h2>
</article>
Finally, within the <aside> element, insert:
<aside>
<h2>Customer Comments</h2>
</aside>
blockquote – an extension quotation
dd – a definition from a description list
div – a generic grouping element
dl – a description list
dt – a definition term from a description list
figure – a figure or illustration
figcaption – the caption of a figure
li – a list item from an ordered or unordered list
ol – an ordered list
p – a paragraph
ul – an unordered list
We will now add headings to the Web page. Return to the jprop.htm file. Within the <header> element, insert the following tags:
<header>
<h1>The J-Prop Shop</h1>
<h2>Quality Juggling and Circus Props</h2>
</header>
Within the first <article> element, insert the following <h2> heading:
<article>
<h2>Welcome</h2>
</article>
Within the second <article> element, insert:
<article>
<h2>Specials This Month</h2>
</article>
Within the third and final <article> element, insert:
<article>
<h2>Quality Tested</h2>
</article>
Finally, within the <aside> element, insert:
<aside>
<h2>Customer Comments</h2>
</aside>
12. The interpretation of a particular heading depends on how it’s used. The h2 headings that you just entered were used to provide a title for articles or sections in the Web page or as a subtitle to the main title of the page. You can indicate that an h2 heading acts as a subtitle by grouping it with a main title heading using the hgroup element.
We are going to group the first two headings so that they are interpreted as a main title and a subtitle. Return to the jprop.htm in your text editor. Indent the first two headings in the document and then enclose them within <hgroup> tags as follows:
<body>
<header>
<hgroup>
<h1>The J-Prop Shop</h1>
<h2>Quality Juggling and Circus Props</h2>
</hgroup>
</header>
Save your changes to the file.
We are going to group the first two headings so that they are interpreted as a main title and a subtitle. Return to the jprop.htm in your text editor. Indent the first two headings in the document and then enclose them within <hgroup> tags as follows:
<body>
<header>
<hgroup>
<h1>The J-Prop Shop</h1>
<h2>Quality Juggling and Circus Props</h2>
</hgroup>
</header>
Save your changes to the file.
13. Next, we will add four paragraphs within the <article> elements. Return to the jprop.htm file in your text editor. Directly below the h2 heading Welcome, insert the following paragraph code:
<p>
If you’re looking for high-quality, hand-crafted juggling and circus products, the J-Prop Shop is the store for you. I’ve designed and built props for the past 35 years and my products have been used by professional entertainers and hobbyists throughout the world. Our prices are reasonable and our quality is excellent.
</p>
Directly below the h2 heading Specials This Month, insert the following:
<h2>Specials This Month</h2>
<p>
The following devil sticks are available at a special discount for the entire month of May:
</p>
Directly below the h2 heading Quality Tested, insert the following:
<h2>Quality Tested</h2>
<p>
Every item I create is checked and tested before being shipped out to assure perfect quality. I take pride in every one of my juggling props and I want my customers to feel that same pride.
</p>
Finally, below the h2 heading Customer Comments, insert the following:
<h2>Customer Comments</h2>
<p>
Here are a few select quotes from our happy family of customers and associates:
</p>
Save your changes to the file and then refresh the jprop.htm in your Web browser to view the new paragraphs added to the Web page.
<p>
If you’re looking for high-quality, hand-crafted juggling and circus products, the J-Prop Shop is the store for you. I’ve designed and built props for the past 35 years and my products have been used by professional entertainers and hobbyists throughout the world. Our prices are reasonable and our quality is excellent.
</p>
Directly below the h2 heading Specials This Month, insert the following:
<h2>Specials This Month</h2>
<p>
The following devil sticks are available at a special discount for the entire month of May:
</p>
Directly below the h2 heading Quality Tested, insert the following:
<h2>Quality Tested</h2>
<p>
Every item I create is checked and tested before being shipped out to assure perfect quality. I take pride in every one of my juggling props and I want my customers to feel that same pride.
</p>
Finally, below the h2 heading Customer Comments, insert the following:
<h2>Customer Comments</h2>
<p>
Here are a few select quotes from our happy family of customers and associates:
</p>
Save your changes to the file and then refresh the jprop.htm in your Web browser to view the new paragraphs added to the Web page.
14. We will enter a few select quotes from satisfied customers using the <blockquote> element. Return to the jprop.htm file in your text editor. Scroll down to the <aside> element and after the paragraph within that element, insert the following block quote:
<h2>Customer Comments</h2>
<p>
Here are a few select quotes from our happy family of customers and associates:
</p>
<blockquote>
<p>
“I’m more than happy to recommend Dave Vinet’s products. I came upon his work 10 years ago and was immediately impressed by his craftsmanship. He provides well-balanced and attractive props which are the perfect compliment to my performances.”
</p>
<p>
“Dave Vinet makes the best juggling equipment on the planet. Period.”
</p>
<p>
“David has been my main supplier for 20 years. I have never had a problem with his equipment and his service is impeccable.”
</p>
</blockquote>
Save your changes to the file and then reload the jprop.htm file in your Web browser to see the revised page with the quoted material.
<h2>Customer Comments</h2>
<p>
Here are a few select quotes from our happy family of customers and associates:
</p>
<blockquote>
<p>
“I’m more than happy to recommend Dave Vinet’s products. I came upon his work 10 years ago and was immediately impressed by his craftsmanship. He provides well-balanced and attractive props which are the perfect compliment to my performances.”
</p>
<p>
“Dave Vinet makes the best juggling equipment on the planet. Period.”
</p>
<p>
“David has been my main supplier for 20 years. I have never had a problem with his equipment and his service is impeccable.”
</p>
</blockquote>
Save your changes to the file and then reload the jprop.htm file in your Web browser to see the revised page with the quoted material.
15. We will display the company's address at the bottom of the body of this page using the <address> element. Scroll down to the bottom of the file and then within the <footer> element, insert:
<address>
The J-Prop Shop
West Highland Drive
Auburn, Me 04210
(207) 555 – 9001
</address>
<address>
The J-Prop Shop
West Highland Drive
Auburn, Me 04210
(207) 555 – 9001
</address>
16. The next step will be to display a list of products on this sample page by using an unordered list with a nested list tag. Return to the jprop.htm file in your text editor. Within the Specials This Month article, directly below the <p> element, insert the following code:
<h2>Specials of the Month</h2>
<p>
The following devil sticks are available for the entire month of May:
</p>
<ul>
<li>Basic Stick ($19.95)
The easiest stick to learn with, but “grippy” enough for the most demanding tricks. Comes in red, green and blue.
</li>
<li>Flower Stick ($24.95)
A graceful stick with colored tassels. Flower Sticks float slowly, making them ideal for beginners.
</li>
<li>Master Stick ($39.95)
Our most popular stick is shorter and heavier for fast play and more advanced tricks. Each Master Stick is available in custom colors.
</li>
<li>Glow Stick ($29.95)
The Glow Stick shines brightly at night (without the danger of a fire stick).
</li>
</ul>
Save your changes to the file and then refresh the jprop.htm file in your Web browser to see the list of products that appear as a bulleted list in the middle of the page.
<h2>Specials of the Month</h2>
<p>
The following devil sticks are available for the entire month of May:
</p>
<ul>
<li>Basic Stick ($19.95)
The easiest stick to learn with, but “grippy” enough for the most demanding tricks. Comes in red, green and blue.
</li>
<li>Flower Stick ($24.95)
A graceful stick with colored tassels. Flower Sticks float slowly, making them ideal for beginners.
</li>
<li>Master Stick ($39.95)
Our most popular stick is shorter and heavier for fast play and more advanced tricks. Each Master Stick is available in custom colors.
</li>
<li>Glow Stick ($29.95)
The Glow Stick shines brightly at night (without the danger of a fire stick).
</li>
</ul>
Save your changes to the file and then refresh the jprop.htm file in your Web browser to see the list of products that appear as a bulleted list in the middle of the page.
17. We have added a lot of text content to the Web page but to improve the appearance of the display, you need to apply a style sheet which has already been prepared for you in the data files. You will learn how to create your own style sheet in later lessons. We need to link the jpsstyles.css to the Web page to apply it’s styles.
Return to the jprop.htm file in your text editor. Within the head element at the top of the file, insert the following link element:
<title>The J-Prop Shop Sample Page</title>
<link href= “jpsstyles.css” rel= “stylesheet” type= “text/css” />
Save your changes to the file. Reload the jprop.htm file in your Web browser and view the format and layout change to reflect the styles in the style sheet.
Return to the jprop.htm file in your text editor. Within the head element at the top of the file, insert the following link element:
<title>The J-Prop Shop Sample Page</title>
<link href= “jpsstyles.css” rel= “stylesheet” type= “text/css” />
Save your changes to the file. Reload the jprop.htm file in your Web browser and view the format and layout change to reflect the styles in the style sheet.
And now for some finishing touches!
18. Internet Explorer version 8 and earlier versions do not recognize styles applied to HTML5 elements and need an external program called a script to work. One of the most useful programs to enable HTML5 support in older browsers is Modernizr. We are going to link our Web page to the Modernizr file. Return to the jprop.htm file in your text editor. Scroll to the top of the file and add the following above the <link> element:
<title>
The J-Prop Shop
</title>
<script src= “modernizr-1.5.js”></script>
<link href= “jpsstyles.css” rel= “stylesheet” type= “text/css”/>
</head>
Save your changes t the file. Unless you have access to Internet Explorer 8 or earlier, you will not be able to see the page layout.
<title>
The J-Prop Shop
</title>
<script src= “modernizr-1.5.js”></script>
<link href= “jpsstyles.css” rel= “stylesheet” type= “text/css”/>
</head>
Save your changes t the file. Unless you have access to Internet Explorer 8 or earlier, you will not be able to see the page layout.
19. Another type of element is a text-level element which marks content like a phrase or a collection of characters within a paragraph or heading. We are going to use the <strong> text-level element to display selected words in boldface text.
Return to the jprop.htm file in your text editor. Scroll down to the unordered list and enclose the name and price of each product within a set of <strong> tags as shown:
<ul>
<li><strong>Basic Stick ($19.95)</strong>
The easiest stick to learn with, but “grippy” enough for the most demanding tricks. Comes in red, green and blue.
</li>
<li><strong>Flower Stick ($24.95)</strong>
A graceful stick with colored tassels. Flower Sticks float slowly, making them ideal for beginners.
</li>
<li><strong>Master Stick ($39.95)</strong>
Our most popular stick is shorter and heavier for fast play and more advanced tricks. Each Master Stick is available in custom colors.
</li>
<li><strong>Glow Stick ($29.95)</strong>
The Glow Stick shines brightly at night (without the danger of a fire stick).
</li>
</ul>
</article>
Save your changes to the file and then reload the jprop.htm file in your Web browser to view the revised appearance of the bulleted list of products.
Return to the jprop.htm file in your text editor. Scroll down to the unordered list and enclose the name and price of each product within a set of <strong> tags as shown:
<ul>
<li><strong>Basic Stick ($19.95)</strong>
The easiest stick to learn with, but “grippy” enough for the most demanding tricks. Comes in red, green and blue.
</li>
<li><strong>Flower Stick ($24.95)</strong>
A graceful stick with colored tassels. Flower Sticks float slowly, making them ideal for beginners.
</li>
<li><strong>Master Stick ($39.95)</strong>
Our most popular stick is shorter and heavier for fast play and more advanced tricks. Each Master Stick is available in custom colors.
</li>
<li><strong>Glow Stick ($29.95)</strong>
The Glow Stick shines brightly at night (without the danger of a fire stick).
</li>
</ul>
</article>
Save your changes to the file and then reload the jprop.htm file in your Web browser to view the revised appearance of the bulleted list of products.
20. Next we are going to add the customers names who made the comments, marking them as citations using the <cite> text-level element. Return to the jprop.htm file in your text editor. Locate the first customer comment and then add the following code at the end of the paragraph, directly before the closing </p> tag:
<p>
“I’m more than happy to recommend Dave Vinet’s products. I came upon his work 10 years ago and was immediately impressed by his craftsmanship. He provides well-balanced and attractive props which are the perfect compliment to my performances.”
<cite>Thomas Gage, Circus England</cite>
</p>
At the end of the paragraph for the second customer comment, insert:
<p>
“Dave Vinet makes the best juggling equipment on the planet. Period.”
<cite>Douglas Pederson, Street-Wise Shows</cite>
</p>
Finally, at the end of the paragraph for the third customer comment, insert:
<p>
“David has been my main supplier for 20 years. I have never had a problem with his equipment and his service is impeccable.”
<cite>Linda Unger, Linda & Louis</cite>
</p>
Save your changes to the file and then refresh the jprop.htm file in your Web browser to see the revised text of the Customer Comments sidebar.
<p>
“I’m more than happy to recommend Dave Vinet’s products. I came upon his work 10 years ago and was immediately impressed by his craftsmanship. He provides well-balanced and attractive props which are the perfect compliment to my performances.”
<cite>Thomas Gage, Circus England</cite>
</p>
At the end of the paragraph for the second customer comment, insert:
<p>
“Dave Vinet makes the best juggling equipment on the planet. Period.”
<cite>Douglas Pederson, Street-Wise Shows</cite>
</p>
Finally, at the end of the paragraph for the third customer comment, insert:
<p>
“David has been my main supplier for 20 years. I have never had a problem with his equipment and his service is impeccable.”
<cite>Linda Unger, Linda & Louis</cite>
</p>
Save your changes to the file and then refresh the jprop.htm file in your Web browser to see the revised text of the Customer Comments sidebar.
21. We will add line breaks using the <br /> tag to separate the citations from the comments to make it easier to read. Return to the jprop.htm file in your text editor. Insert the tag <br /> between the comment and the citation of each of the three customer comments in the file as shown:
<p>
“I’m more than happy to recommend Dave Vinet’s products. I came upon his work 10 years ago and was immediately impressed by his craftsmanship. He provides well-balanced and attractive props which are the perfect compliment to my performances.”
<br />
<cite>Thomas Gage, Circus England</cite>
</p>
<p>
“Dave Vinet makes the best juggling equipment on the planet. Period.”
<br />
<cite>Douglas Pederson, Street-Wise Shows</cite>
</p>
<p>
“David has been my main supplier for 20 years. I have never had a problem with his equipment and his service is impeccable.”
<br />
<cite>Linda Unger, Linda & Louis</cite>
</p>
</blockquote>
Save the changes to the file and then refresh the jprop.htm file in your Web browser to verify that each citation starts on a new line below the associated customer comment.
<p>
“I’m more than happy to recommend Dave Vinet’s products. I came upon his work 10 years ago and was immediately impressed by his craftsmanship. He provides well-balanced and attractive props which are the perfect compliment to my performances.”
<br />
<cite>Thomas Gage, Circus England</cite>
</p>
<p>
“Dave Vinet makes the best juggling equipment on the planet. Period.”
<br />
<cite>Douglas Pederson, Street-Wise Shows</cite>
</p>
<p>
“David has been my main supplier for 20 years. I have never had a problem with his equipment and his service is impeccable.”
<br />
<cite>Linda Unger, Linda & Louis</cite>
</p>
</blockquote>
Save the changes to the file and then refresh the jprop.htm file in your Web browser to verify that each citation starts on a new line below the associated customer comment.
22. To learn how to insert an inline image, we will replace the name of the company at the top of the Web page with an image of the company logo using the <img> element. Return to the jprop.htm file in your text editor. Go to the h1 heading element at the top of the body section, delete the text The J-Prop Shop from between the opening and closing <h1> tags and then replace it with the following:
<header>
<h1><img src= “jpslogo.png” alt= “The J-Prop Shop” /></h1>
<h2>Quality Juggling and Circus Props</h2>
</header>
Save your changes to the file and then refresh the jprop.htm in your Web browser to see the new heading with the logo centered across the page.
<header>
<h1><img src= “jpslogo.png” alt= “The J-Prop Shop” /></h1>
<h2>Quality Juggling and Circus Props</h2>
</header>
Save your changes to the file and then refresh the jprop.htm in your Web browser to see the new heading with the logo centered across the page.
23. The company’s address in the page footer is difficult to read because the street address, city name, zip code and phone number all run together on one line. We are going to separate them by a bullet or solid circular marker. Every character that your browser is capable of rendering belongs to a collection of characters and symbols called a character set. The most commonly used character set on the Web is UTF-8.
Return to the jprop.htm file in your text editor. Scroll down to the address element within the address and insert a space followed by the • character entity as shown below:
<address>
The J-Prop shop •
541 West Highland Drive •
Auburn, ME 04210 •
(207) 555 – 9001
</address>
We are also going to use a long horizontal line known as an em-dash to mark the customer names in the customer comments section. Locate the customer comment from Thomas Gage and then directly before the opening <cite> tag, insert the following character code followed by a space: (Repeat this for the two remaining customer comments).
<blockquote>
<p>
“I’m more than happy to recommend Dave Vinet’s products. I came upon his work 10 years ago and was immediately impressed by his craftsmanship. He provides well-balanced and attractive props which are the perfect compliment to my performances.”
<br />
— <cite>Thomas Gage, Circus England</cite>
</p>
<p>
“Dave Vinet makes the best juggling equipment on the planet. Period.”
<br />
— <cite>Douglas Pederson, Street-Wise Shows</cite>
</p>
<p>
“David has been my main supplier for 20 years. I have never had a problem with his equipment and his service is impeccable.”
<br />
— <cite>Linda Unger, Linda & Louis</cite>
</p>
</blockquote>
Save your changes to the file. Refresh the jprop.htm file in your Web browser to see the final content of the Web page.
Return to the jprop.htm file in your text editor. Scroll down to the address element within the address and insert a space followed by the • character entity as shown below:
<address>
The J-Prop shop •
541 West Highland Drive •
Auburn, ME 04210 •
(207) 555 – 9001
</address>
We are also going to use a long horizontal line known as an em-dash to mark the customer names in the customer comments section. Locate the customer comment from Thomas Gage and then directly before the opening <cite> tag, insert the following character code followed by a space: (Repeat this for the two remaining customer comments).
<blockquote>
<p>
“I’m more than happy to recommend Dave Vinet’s products. I came upon his work 10 years ago and was immediately impressed by his craftsmanship. He provides well-balanced and attractive props which are the perfect compliment to my performances.”
<br />
— <cite>Thomas Gage, Circus England</cite>
</p>
<p>
“Dave Vinet makes the best juggling equipment on the planet. Period.”
<br />
— <cite>Douglas Pederson, Street-Wise Shows</cite>
</p>
<p>
“David has been my main supplier for 20 years. I have never had a problem with his equipment and his service is impeccable.”
<br />
— <cite>Linda Unger, Linda & Louis</cite>
</p>
</blockquote>
Save your changes to the file. Refresh the jprop.htm file in your Web browser to see the final content of the Web page.
24. For a browser to apply our character set correctly, we must add the meta element within the head element of your HTML document.
Return to the jprop.htm file in your text editor. Scroll to the top of the file. Directly below the comment in the head section, insert the following meta element as shown:
-->
<meta charset= “UTF-8” />
<title>The J-Prop Shop</title>
<script src= “modernizr-1.5.js”></script>
<link href= “jpsstyles.css” rel= “stylesheet” type= “text/css />
</head>
Save your changes to the file and refresh the jprop.htm file in your browser and verify that the browser renders the page with no errors.
Return to the jprop.htm file in your text editor. Scroll to the top of the file. Directly below the comment in the head section, insert the following meta element as shown:
-->
<meta charset= “UTF-8” />
<title>The J-Prop Shop</title>
<script src= “modernizr-1.5.js”></script>
<link href= “jpsstyles.css” rel= “stylesheet” type= “text/css />
</head>
Save your changes to the file and refresh the jprop.htm file in your browser and verify that the browser renders the page with no errors.