Home > Chapter Review and Exercises > Chapter 5 > Chapter 5 Exercises

Read pages 71-81 before starting Exercise 5-1.

Exercise 5-1 What you need to know for this exercise

1. Chapter 5 explores some of the HTML text elements.  

2. The paragraph element is <p>...</p> .  It contains: text, images, and other inline elements (i.e. <em>).  It does not contain headings, lists, sectioning elements, or any elements that typically display as blocks by default.

4. The horizontal rule is <hr>.  The horizontal rule inserts a horizontal line on the page.

Seldom used HTML text elements

7. Description lists use the <dl>...</dl> element.  They are not used very often.  A name, such as a term or label uses the <dt>…</dt> element, and a value, such as a description or definition uses the <dd>…</dd> element .

8. Long quotations use the <blockquote>...</blockquote> element.  It is used for long quotations, testimonials, etc.

9. Preformatted Text uses the <pre>...</pre> element.  It displays text in monospace (the characters are all the same width) and whitespace (spaces) are not ignored.

Exercise 5-1 Walkthrough

Page 81

Step 1 

For this exercise you will be working in the Chapter 5 exercises folder, Ch05.  Open File Explorer, and then navigate to your Ch05 folder.  Once you are there you will see three text files.

Start your Sublime text editor, and then drag the exercise_05-01_text.txt file from your Ch05 folder into Sublime.  Instructions for how to drag files into Sublime are in Exercise 4-1.

The contents of the exercise_05-01_text.txt file is shown below.

Tapenade (Olive Spread)

This is a really simple dish to prepare and it’s always a big hit at parties. My father recommends:

"Make this the night before so that the flavors have time to blend. Just bring it up to room temperature before you serve it. In the winter, try serving it warm."

Ingredients

1 8oz. jar sundried tomatoes

2 large garlic cloves

2/3 c. kalamata olives

1 t. capers

Instructions

Combine tomatoes and garlic in a food processor. Blend until as smooth as possible.

Add capers and olives. Pulse the motor a few times until they are incorporated, but still retain some texture.

Serve on thin toast rounds with goat cheese and fresh basil garnish (optional).

Step 2

The first row of text, "Tapenade (Olive Spread)", is a heading, so the <h1>...</h1> element is ideal for this.

<h1>Tapenade (Olive Spread)</h1>

Step 3

The next line is a paragraph of text, so the <p>...</p> element can be used here.

<p>This is a really simple dish to prepare and it's always a big hit at parties. My father recommends:</p>

Step 4

The next two sentences are enclosed in quotation marks, so the <blockquote>...</blockquote> element should be used.  The text in a blockquote element needs to be part of a paragraph element <p>...</p>.

<blockquote>

  <p>"Make this the night before so that the flavors have time to blend. Just bring it up to room temperature before you serve it. In the winter, try serving it warm."</p>

</blockquote>

Step 5

The Ingredients subheading can use a smaller heading element such as <h2>...</h2>.

<h2>Ingredients</h2>

Step 6

The ingredients can be added in any order, so the unordered list element <ul>...</ul> can be used.

<ul>

  <li>1 8oz. jar sundried tomatoes</li>

  <li>2 large garlic cloves</li>

  <li>2/3 c. kalamata olives</li>

  <li>1 t. capers</li>

</ul>

Step 7

The Instructions subheading can use the same sized heading element as the Ingredients heading: <h2>...</h2>.

<h2>Instructions</h2>

Step 8

The final part is the step by step instructions used to make Tapenade.  An ordered list is used: <ol>...</ol>.

<ol>

<li>Combine tomatoes and garlic in a food processor. Blend until as smooth as possible.</li>

<li>Add capers and olives. Pulse the motor a few times until they are incorporated, but still retain some

texture.</li>

<li>Serve on thin toast rounds with goat cheese and fresh basil garnish (optional).</li>

</ol>

Step 9

At this point the exercise_05-01_text.txt file should look like this:

<h1>Tapenade (Olive Spread)</h1>

<p>This is a really simple dish to prepare and it's always a big hit at parties. My father recommends:</p>

<blockquote><p>"Make this the night before so that the flavors have time to blend. Just bring it up to room temperature before you serve it. In the winter, try serving it warm."</p></blockquote>

<h2>Ingredients</h2>

<ul>

<li>1 8oz. jar sundried tomatoes</li>

<li>2 large garlic cloves</li>

<li>2/3 c. kalamata olives</li>

<li>1 t. capers</li>

</ul>

<h2>Instructions</h2>

<ol>

<li>Combine tomatoes and garlic in a food processor. Blend until as smooth as possi-ble.</li>

<li>Add capers and olives. Pulse the motor a few times until they are incorporated, but still retain some

texture.</li>

<li>Serve on thin toast rounds with goat cheese and fresh basil garnish (optional).</li>

</ol>

Step 10

In Sublime, select the File pull-down menu (green arrow) with a left-click, and then select Save As.. (red arrow).

Step 11

 In the Save As window, navigate back to your Ch05 folder in your Dropbox or Google Drive folder (as shown below with a red arrow).  

This is VERY important.  The first place you will see in the Save As window may not be your Ch05 folder.  Saving your work anywhere else but the Ch05 folder means it cannot be reviewed by your instructor.  It needs to be saved in the Ch05 folder.

Step 14

Now navigate in File Explorer to your Ch05 folder in your Dropbox or Google Drive folder.  The bistro.html file will now appear with your default web browser icon next to it.

Step 15

Double left-click on the bistro.html file in File Explorer.  This will open bistro.html in a browser.  It should like this:

Read pages 82-97 before starting Exercise 5-2.

Exercise 5-2 What you need to know for this exercise

Part 1 - Note about this exercise

In this exercise you will add markup for paragraphs, headings, lists, and a blockquote to a sample recipe.  Tags will be added to the provided text.  

Remember to:

• • Nest multiple inline elements properly by closing the inner elements before you close the outer ones.  

For example, the following part of a sentence has two inline elements, <b> and <i>:

<b><i>Sous Vide</i> Salmon with Dill Hollandaise</b>

• • Be sure that all text-level elements are contained within block elements.

For example, the following sentence has an inline italics element <i>:

<p>This week I am <i>extremely</i> excited about a new cooking technique</p>

Part 2 - Elements Used To Organize Page Content

Page 82

None of these elements display anything on the website.  They are only used to visually organize a website for you, the website designer.

1. The Main element <main>...</main> is used to identify the primary content of the web page.  It is used so that search engines like Google can locate the main content of a website.

2. The Header element <header>...</header> is used for introductory material that typically appears at the beginning of a web page or at the top of a section or article. 

3. The Footer element <footer>...</footer> is used to indicate the type of information that typically comes at the end of a page or an article, such as its author, copyright information, related documents, or navigation.

4. The Section element <section>...</section> is used to divide long web documents into sections.

5. The Article element <article>...</article> is used for magazine or newspaper articles, blog posts, comments, or other items.

6. The Aside element <aside>...</aside>  is typically used to identify a sidebar on a website, background information, lists of links, or anything else that is related to the rest of the content on the page.

7. The <nav>...</nav> element is used to identify website navigation (menus).  Some menus are spread across the top of the website, and others are along the side.  The following example is a Nav element with an unordered list that has website links to nowhere.  

NOTE: Using the href="/" makes the text in the <a> element look like a website link, but when you click on it, it goes nowhere.

<nav>

  <ul>

    <li><a href="/">Serif</a></li>

    <li><a href="/">Sans-serif</a></li>

    <li><a href="/">Script</a></li>

    <li><a href="/">Display</a></li>

    <li><a href="/">Dingbats</a></li>

  </ul>

</nav>

8. The Address element <address>...</address> is used to create an area for contact information for the author, or the person who maintains the website.  Here is an example.

Part 3 - Inline Elements

Page 88

1. In Chapter 4 we learned about block and inline elements.  Block elements take up the entire width of the page or column.  Inline elements go inside block elements.

2. The entire list of inline elements is on page 89 in the class text.

3. Here is a summary of the inline text elements you will need for Exercise 5-2.

4. The Emphasized text elements <em>...</em> and <i>...</i> display text in italics.  The following markup 

<p>Arlo is <em>very</em> smart.</p> 

would display as

Arlo is very smart. 

5. The Strong element <strong>...</strong> or <b>...</b> display text in bold.

6. The Underline text element <u>...</u> is used to underline text.  Note that underlined text is easily confused with a website link, and should be used sparingly.

7. The Strike-through element <s>...</s> is used to indicate text that is incorrect.

8. The Quotation text element <q>...</q> is used to insert quotation marks.  

• • Here is the w3schools demonstration of the quotation element:

https://www.w3schools.com/tags/tag_q.asp 

9. The line break element <br> puts a carriage return on your website.

10. The Citation element <cite>...</cite> is used to identify a reference from another document, just like you would on a term paper where you would list your sources.

• • Here is the w3schools explanation of the citation element:

https://www.w3schools.com/tags/tag_cite.asp 

11. The Defining Term element <dfn>...</dfn> identifies the first instance of a term that is used throughout the website.  Alone, this does nothing to the text.  Latter, when we cover CSS, we will see how to make the text in this element a different color, font, size, etc.

• • Here is the w3schools explanation of the defining term element:

https://www.w3schools.com/tags/tag_dfn.asp 

12. The Time element <time>...</time> is used to allow programs like search engines (i.e. Google) computers to understand that what you are presenting in text form is a date and time.

• • Here is the w3schools explanation of the time element (click on the try it yourself button to see it in action):

https://www.w3schools.com/tags/tag_time.asp .

• • Here is the Mozilla (i.e. Firefox) explanation of the time element.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time 

13. The Small text element <small>...</small> renders the text in a font smaller than the surrounding text.

• • Here is the w3schools demonstration of the small text element:

https://www.w3schools.com/tags/tag_small.asp 

14. The Highlight element <mark>...</mark> puts a yellow background around the text inside the element, just as your would highlight text with a yellow highlighter.

Exercise 5-2 Walkthrough

Page 98

Step 1

 Make sure your Sublime text editor is running.  If not start it.  In File Explorer, go to your Dropbox or Google Drive folder, and then to your 1.Class text Exercises folder.   From there navigate to the Ch05 subfolder.   Locate the exercise_05-02_text.txt file and drag it into the Sublime text editor The exercise_05-02_text.txt file is now in Sublime as shown below.

Step 2

NOTE: The following is the contents of the exercise_05-02_text.txt file.

<article>

<header>

  <p>posted by BGB, November 15, 2016</p>

</header>

<h2>Low and Slow</h2>

<p>This week I am extremely excited about a new cooking technique called sous vide. In sous vide cooking, you submerge the food (usually vacuum-sealed in plastic) into a water bath that is precisely set to the target temperature you want the food to be cooked to. In his book, Cooking for Geeks, Jeff Potter describes it as ultra-low-temperature poaching.</p>

<p>Next month, we will be serving Sous Vide Salmon with Dill Hollandaise. To reserve a seat at the chef table, contact us before November 30.</p>

<p>blackgoose@example.com

555-336-1800</p>

<p>Warning: Sous vide cooked salmon is not pasteurized. Avoid it if you are pregnant or have immunity issues.</p>

</article>

Step 3

First, to make sure the date is  understandable to Internet search engines (i.e. Google, etc.) that scan the website, the date needs to be included in the <time>...</time> element.  To do that, use the datetime attribute with a value of "2016-11-15".

<p>posted by BGB, <time datetime="2016-11-15">November 15, 2016</time></p>

Step 4

In the first sentence, it looks like the word extremely could be emphasized by making it italic.  Use the emphasized (italics) element <i>...</i> or <em>...</em> to make the word extremely show in italics.

<p>This week I am <em>extremely</em> excited about a new cooking technique called sous vide. 

Step 5

The words sous vide is a term that appears for the first time in that sentence, and is also used elsewhere in this article.  Since this is the first instance that term appears, use defining term element <dfn>...</dfn> to identify it so that later you can use a cascading style sheet (CSS) to modify its appearance.  Note that the emphasized (italics) element <i>...</i> or <em>...</em> is used here as well, which is optional.

<p>This week I am <em>extremely</em> excited about a new cooking technique called <dfn><i>sous vide</i></dfn>.

Step 6

The next sentence also uses the term sous vide, so since it was put in italics in the first sentence, it should be in italics here also.

In <i>sous vide</i> cooking, you submerge the food (usually

Step 7

This next sentence has a reference to a book by Jeff Potter.  Use the citation element <cite>...</cite> to identify it.

In his book, <cite>Cooking for Geeks</cite>, Jeff Potter describes it as ultra-low-temperature poaching.</p>

Step 8

The last part of that sentence is a quotation, "ultra-low temperature poaching," from the author.  Use the quotation element <q>...</q> to identify it in your markup.  Remember that if you have a quotation at the end of a line, that the period is enclosed in the quotes.

In his book, <cite>Cooking for Geeks</cite>, Jeff Potter describes it as <q>ultra-low-temperature poaching.</q></p>

Step 9

In this sentence the term sous vide appears again, so it should be enclosed with the emphasized (italics) element <i>...</i> or <em>...</em>.

<p>Next month, we will be serving <i>Sous Vide</i> Salmon with Dill Hollandaise.

Step 10

On that same sentence, the menu item "Sous Vide Salmon with Dill Hollandaise" could be displayed in bold.  Use the strong element <strong>...</strong> or <b>...</b> around the entire menu item.

<p>Next month, we will be serving <b><i>Sous Vide</i> Salmon with Dill Hollandaise</b>.

Step 11

The final sentence of the article's paragraph has a date in it, so it should be included in the time element <time>...</time>.

To reserve a seat at the chef table, contact us before <time datetime="2016-11-30">November 30</time>.</p>

Step 12

This next one is a little tricky.  Notice that these last two lines would appear on the website as a single line, but they should be two separate lines.  That's because web browsers ignore carriage returns:

<p>blackgoose@example.com

555-336-1800</p>

To fix that, use the break element <br> after the website name. 

<p>blackgoose@example.com<br>

555-336-1800</p>

Step 13

The warning at the end of the article doesn't need to be in the same size font as the rest.  Use the small element <small>...</small> to make the font smaller.

<p><small>Warning: <i>Sous vide</i> cooked salmon is not pasteurized. Avoid it if you are pregnant or have immunity issues.</small></p>

Step 14

At this point the exercise_05-02_text.txt file should look like this:

<article>

<header>

<p>posted by BGB, <time datetime="2016-11-15">November 15, 2016</time></p>

</header>

<h2>Low and Slow</h2>

<p>This week I am <em>extremely</em> excited about a new cooking technique called <dfn><i>sous vide</i></dfn>. In <i>sous vide</i> cooking, you submerge the food (usually vacuum-sealed in plastic) into a water bath that is precisely set to the target temperature you want the food to be cooked to. In his book, <cite>Cooking for Geeks</cite>, Jeff Potter describes it as <q>ultra-low-temperature poaching.</q></p>

<p>Next month, we will be serving <b><i>Sous Vide</i> Salmon with Dill Hollandaise</b>. To reserve a seat at the chef table, contact us before <time datetime="2016-11-30">November 30</time>.</p>

<p>blackgoose@example.com<br>

555-336-1800</p>

<p><small>Warning: <i>Sous vide</i> cooked salmon is not pasteurized. Avoid it if you are pregnant or have immunity issues.</small></p>

</article>

<p>Arlo is <em>very</em> smart.</p>

Step 15

In Sublime, select the File pull-down menu (green arrow) with a left-click, and then select Save As.. (red arrow).

Step 16

In the Save As window, navigate back to your Ch05 folder in your Dropbox or Google Drive folder (as shown below with a red arrow).  

This is VERY important.  The first place you will see in the Save As window may not be your Ch05 folder.  Saving your work anywhere else but the Ch05 folder means it cannot be reviewed by your instructor.  It needs to be saved in the Ch05 folder.

Step 19

Once the  exercise_05-02.html file is saved, the HTML markup will appear color-coded in Sublime as shown below.

Step 20

Now navigate in File Explorer to your Ch05 folder in the 1.Class text Exercises folder.  The exercise_05-02.html file will now appear with your default web browser icon next to it

Step 21

Double left-click on the exercise_05-02.html file in File Explorer.  This will open exercise_05-02.html in a browser.  It should like this:

Read pages 98 - 102 and 105 - 108 before starting Exercise 5-3.

NOTE: Starting on page 102 and going all the way to the first part of 105, skip the section entitled "IMPROVING ACCESSIBILITY WITH ARIA."

Exercise 5-3 What you need to know for this exercise

Part 1 - Div and Span

1. Back in chapter 4 the two types of elements, block and inline, were discussed.  Browsers treat block elements as though they are in little rectangular boxes, stacked up in the page.  Each block element begins a new line.  Inline elements do not start new lines, but rather they are contained inside block elements.

2. Given that background, this section of the text introduces the <div>...</div> element and the <span>...</span> element.  Alone these two elements do nothing, but you can use style sheets (think CSS) to format them however you like.

3. The div element is used to include a grouping of content and elements on the page.  It's a block-level element.

4. The span element is used to contain only text and other inline elements.  It's an inline element.

5. A website might have many div and span elements, with their content formatted differently.

Part 2 - Id and Class

6. The id and class attributes are used to assign a unique identifiers to all HTML elements (i.e. not  just div and span)

7. The id attribute is used to assign a single unique identifier to an element in the document.  The identifier is the id attribute's value.  The attribute value can only be used once on a website.  The example below shows the id attribute being used with the sections and aside elements.  Note that the id attribute values are different.

<section id="news">

   <!-- news items here -->

</section>

<aside id="links">

   <!-- list of links here -->

</aside>

8. Unlike the id attribute, the class attribute can be shared by multiple elements.  This allows you to apply styles to all of the same-labeled elements at once.

<div class="listing">

   <p><cite>The Complete Manual of Typography</cite>, James Felici</p>

</div>

<div class="listing">

   <img src="bringhurst-cover.gif" alt="">

</div>

9. An element can have both a class and an id.  In the example below is div element with both an id and class attribute.

<div id="reference" class="listing">

10. An element can also have multiple classes.  Each class name is separated by a space.  in the example, the two classes, listing and book are  being used as value for the class attribute in the div element.

<div id="reference" class="listing book">

Part 3 - Special characters

1. Because several characters are used by HTML for elements and tags, you would not normally be able to display these along with text on your website.  

2. Some of these characters are <, >, &, ", ', and others.

3. There are three ways to do this.  Two of these methods are in the book, and third is explained here.

4. The first method is to use one of the hundreds of pre-defined abbreviated names for the character.  These are called a named entities.  

5. The second method is to use an assigned numeric value that corresponds to its position in a coded character set (i.e. the UTF-8 character set defined in the <meta charset="UTF-8"> element).

6. These are the most common special characters you will likely use:

Character      Description          Entity name   Decimal no.   Hexadecimal no.

    <          Less-than symbol     &lt;          &#060;         &#x3C;

    >          Greater-than symbol  &gt;          &#062;         &#x3E;

    "          Quotation mark       &quot;        &#034;         &#x22;

    '          Apostrophe           &apos;        &#039;         &#x27;

    &          Ampersand            &amp;         &#038;         &#x26;

(non-printing) Non-breaking         &nbsp;        &#160;         &#xA0;

               space

7. The &nbsp; character creates a space that does not break into a new line.  Two words that are separated by a non-breaking space always appear on the same line. 

8. A more complete list of these characters is on page 108 of your class text.

9. The third way to display these special characters is to put spaces around them.  For example, this HTML markup,

<p> This is a < p > " and ' and & sign tag </p>

will look like this in a web browser:

This is a < p > " and ' and & sign tag

This is because HTML compresses all space characters (tabs, spaces, and carriage returns) into one character.

Exercise 5-3 Walkthrough

Page 98

Step 1

This exercise is an opportunity to try out HTML elements from the entire chapter.  The exercise_05-03_text.txt in the Ch05 folder is the News page for the Black Goose Bistro site.

Step 2

Open your Sublime text editor and drag the exercise_05-03_text.txt in the Ch05 folder into it.   The contents of the exercise_05-03_text.txt files is shown below.

The Black Goose Bistro News

Home

Menu

News

Contact

Summer Menu Items

posted by BGB, June 18, 2017

Our chef has been busy putting together the perfect menu for the summer months. Stop by to try these appetizers and main courses while the days are still long.

Appetizers

Black bean purses

Spicy black bean and a blend of Mexican cheeses wrapped in sheets of phyl-lo and baked until golden. $3.95

Southwestern napoleons with lump crab -- new item!

Layers of light lump crab meat, bean and corn salsa, and our handmade flour tortillas. $7.95

Main courses

Shrimp sate kebabs with peanut sauce

Skewers of shrimp marinated in lemongrass, garlic, and fish sauce then grilled to perfection. Served with spicy peanut sauce and jasmine rice. $12.95

Jerk rotisserie chicken with fried plantains -- new item!

Tender chicken slow-roasted on the rotisserie, flavored with spicy and fragrant jerk sauce and served with fried plantains and fresh mango. $12.95

Low and Slow

posted by BGB, November 15, 2016

<p>This week I am <em>extremely</em> excited about a new cooking technique called <dfn><i>sous vide</i></dfn>. In <i>sous vide</i> cooking, you submerge the food (usually vacuum-sealed in plastic) into a water bath that is precisely set to the target temperature you want the food to be cooked to. In his book, <cite>Cooking for Geeks</cite>, Jeff Potter describes it as <q>ultra-low-temperature poaching.</q></p>

<p>Next month, we will be serving <b><i>Sous Vide</i> Salmon with Dill Hollandaise</b>. To reserve a seat at the chef table, contact us before <time datetime="20161130">November 30</time>.</p>

Location: Baker's Corner, Seekonk, MA

Hours: Tuesday to Saturday, 11am to 11pm

All content copyright 2017, Black Goose Bistro and Jennifer Robbins

Step 3

Starting at the very top, the first step is to add the <!DOCTYPE html> declaration that tells browsers this is an HTML5 document.   This goes at the very beginning of the exercise_05-03_text.txt file.

<!DOCTYPE html>

The Black Goose Bistro News

Home

Menu

News

Contact

Step 4

Add all the required HTML document structure elements (html, head, meta, title, and body) to the exercise_05-03_text.txt file. 

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

</head>

<body>

The Black Goose Bistro News

Home

Menu

News

Contact

Step 5

Give the exercise_05-03_text.txt document the <title> “The Black Goose Bistro News.”

<!DOCTYPE html>

<html>

<head>

  <title>The Black Goose Bistro News</title>

  <meta charset="utf-8">

</head>

<body>

The Black Goose Bistro News

Home

Menu

News

Contact

Step 6

The website will have several elements inside its <header> element.  The <header> element is used for introductory material that typically appears at the beginning of a web page, or at the top of a section or article.  The main header for this document will include the headline "The Black Goose Bistro News", and the list of links (Home, Menu, News, Contact).

<body>

<header>

The Black Goose Bistro News

Home

Menu

News

Contact

</header>

Step 7

Make the headline "The Black Goose Bistro News" into the largest heading font.

<body>

<header>

<h1>The Black Goose Bistro News</h1>

Home

Menu

News

Contact

</header>

Step 8

The list of links (Home, Menu, News, Contact) are other pages in this website.  These pages don't actually exist, but the links to them are here to show how to set up links to other pages on a website.  Make them an unordered list <ul>...</ul> for now.  Be sure to use the list item element <l1>...</li> for each link.

<body>

<header>

<h1>The Black Goose Bistro News</h1>

  <ul>

    <li>Home</li>

    <li>Menu</li>

    <li>News</li>

    <li>Contact</li>

  </ul>

</header>

Step 9

Give the list more meaning by identifying it as the primary navigation for the site by using the navigation element <nav>...</nav>.

<body>

<header>

<h1>The Black Goose Bistro News</h1>

<nav>

  <ul>

    <li>Home</li>

    <li>Menu</li>

    <li>News</li>

    <li>Contact</li>

  </ul>

</nav>

</header>

Step 10

The two posts entitled “Summer Menu Items” and “Low and Slow” can be marked up as articles using the <article>...</article> element.  The first article is "Summer Menu Items":

<article>

Summer Menu Items

posted by BGB, June 18, 2017

Our chef has been busy putting together the perfect menu for the summer months. Stop by to try these appetizers and main courses while the days are still long.

Appetizers

Black bean purses

Spicy black bean and a blend of Mexican cheeses wrapped in sheets of phyl-lo and baked until golden. $3.95

Southwestern napoleons with lump crab -- new item!

Layers of light lump crab meat, bean and corn salsa, and our handmade flour tortillas. $7.95

Main courses

Shrimp sate kebabs with peanut sauce

Skewers of shrimp marinated in lemongrass, garlic, and fish sauce then grilled to perfection. Served with spicy peanut sauce and jasmine rice. $12.95

Jerk rotisserie chicken with fried plantains -- new item!

Tender chicken slow-roasted on the rotisserie, flavored with spicy and fragrant jerk sauce and served with fried plantains and fresh mango. $12.95

</article>

Step 11

The second article is "Low and Slow".  Note that is already marked up with the inline elements from Exercise 5-2.  It's all done for you.

<article>

Low and Slow

posted by BGB, November 15, 2016

<p>This week I am <em>extremely</em> excited about a new cooking technique called <dfn><i>sous vide</i></dfn>. In <i>sous vide</i> cooking, you submerge the food (usually vacuum-sealed in plastic) into a water bath that is precisely set to the target temperature you want the food to be cooked to. In his book, <cite>Cooking for Geeks</cite>, Jeff Potter describes it as <q>ultra-low-temperature poaching.</q></p>

<p>Next month, we will be serving <b><i>Sous Vide</i> Salmon with Dill Hollandaise</b>. To reserve a seat at the chef table, contact us before <time datetime="20161130">November 30</time>.</p>

</article>

Step 12

Three thing are needed for the first article, “Summer Menu Items”.  First, we need to create a header that contains the heading "Summer Menu Items" using the smaller <h2> heading font.

<article>

  <header>

    <h2>Summer Menu Items</h2>

    posted by BGB, June 18, 2017

  </header>

Our chef has been busy putting together the perfect menu for the summer months. Stop by to try these appetizers and main courses while the days are still long.

Step 13

Next, the publication information needs a paragraph element <p>...</p>.

<article>

  <header>

    <h2>Summer Menu Items</h2>

    posted by BGB, June 18, 2017

  </header>

<p>Our chef has been busy putting together the perfect menu for the summer months. Stop by to try these appetizers and main courses while the days are still long.</p>

Step 14

We want the publication date to be machine-readable.  That means we need to encode this date in a machine-readable way so that search engines can understand it and thereby produce smarter search results.   Use the <time>...</time> element for that.

<article>

  <header>

    <h2>Summer Menu Items</h2>

    <p><time datetime="2016-06-18">posted by BGB, June 18, 2017</time></p>

  </header>

<p>Our chef has been busy putting together the perfect menu for the summer months. Stop by to try these appetizers and main courses while the days are still long.</p>

Step 15

Under the header “Summer Menu Items” there are two sections, "Appetizers" and "Main courses".  Use the section element <section>...</section> to identify each.  Here is the "Appetizers" section.

<section>

Appetizers

Black bean purses

Spicy black bean and a blend of Mexican cheeses wrapped in sheets of phyl-lo and baked until golden. $3.95

Southwestern napoleons with lump crab -- new item!

Layers of light lump crab meat, bean and corn salsa, and our handmade flour tortillas. $7.95

</section>

Step 16

The "Main courses" section is next.  Be sure to put the </section> closing tag above the </article> closing tag.

<section>

Main courses

Shrimp sate kebabs with peanut sauce

Skewers of shrimp marinated in lemongrass, garlic, and fish sauce then grilled to perfection. Served with spicy peanut sauce and jasmine rice. $12.95

Jerk rotisserie chicken with fried plantains -- new item!

Tender chicken slow-roasted on the rotisserie, flavored with spicy and fragrant jerk sauce and served with fried plantains and fresh mango. $12.95

</section>

</article>

Step 17

ach of these two section have headings.  We have used the <h1> and the <h2> elements already, so we should use the <h3> element here.  The "Appetizers" section markup should look like this.  

<section>

<h3>Appetizers</h3>

Black bean purses

Spicy black bean and a blend of Mexican cheeses wrapped in sheets of phyl-lo and baked until golden. $3.95

Southwestern napoleons with lump crab -- new item!

Layers of light lump crab meat, bean and corn salsa, and our handmade flour tortillas. $7.95

</section>

Step 18

Likewise, the "Main courses" heading should use the <h3> element.

<section>

<h3>Main courses</h3>

Shrimp sate kebabs with peanut sauce

Skewers of shrimp marinated in lemongrass, garlic, and fish sauce then grilled to perfection. Served with spicy peanut sauce and jasmine rice. $12.95

Jerk rotisserie chicken with fried plantains -- new item!

Tender chicken slow-roasted on the rotisserie, flavored with spicy and fragrant jerk sauce and served with fried plantains and fresh mango. $12.95

</section>

Step 19

The content in the Appetizers section is a two item descriptive list, "Black bean purses" and "Southwestern napoleons with lump crab -- new item!".  Use the descriptive list <dl> element along with its <dt> (defines terms/names) and <dd> (describes each term/name) elements.  The "Appetizers" section is as follows:

<section>

   <h3>Appetizers</h3>

   <dl>

      <dt>Black bean purses</dt>

      <dd>Spicy black bean and a blend of Mexican cheeses wrapped in sheets of phyl-lo and baked until golden. $3.95</dd>

      <dt>Southwestern napoleons with lump crab -- new item</dt>

      <dd>Layers of light lump crab meat, bean and corn salsa, and our handmade flour tortillas. $7.95</dd>

   </dl>

</section>

Step 20

Likewise, we add a descriptive list to the "Main Course" section.

<section>

   <h3>Main courses</h3>

   <dl>

      <dt>Shrimp sate kebabs with peanut sauce</dt>

      <dd>Skewers of shrimp marinated in lemongrass, garlic, and fish sauce then grilled to perfection. Served with spicy peanut sauce and jasmine rice. $12.95</dd>

     <dt>Jerk rotisserie chicken with fried plantains -- new item!</dt>

     <dd>Tender chicken slow-roasted on the rotisserie, flavored with spicy and fragrant jerk sauce and served with fried plantains and fresh mango. $12.95</dd>

   </dl>

</section>

Step 21

Here we want to assign an attribute to all the price amounts on this page.  There are four prices listed in this document.  To assign the same attribute to multiple elements, you use the class attribute (verses the id attribute which can only appear once).  So now we need to decide if we are going to put the class attribute in either the div or the span element.  The price amounts appear inside the <dd>...</dd> element in the description list.  As mentioned previously, the div element is used to include a grouping of content and elements on the page.  It's a block-level element.  The span element is used to contain only text and other inline elements.  It's an inline element.  Since the price amounts are an inside the <dd>...</dd> element, the <span>...</span> inline element is used rather than the div block element.

Here is the "Appetizers" section.

<section>

   <h3>Appetizers</h3>

   <dl>

      <dt>Black bean purses</dt>

      <dd>Spicy black bean and a blend of Mexican cheeses wrapped in sheets of phyl-lo and baked until golden. <span class="price">$3.95</span></dd>

     <dt>Southwestern napoleons with lump crab -- new item</dt>

     <dd>Layers of light lump crab meat, bean and corn salsa, and our handmade flour tortillas. <span class="price">$7.95</span></dd>

    </dl>

</section>

Step 22

And here is the "Main Course" section.

<section>

   <h3>Main courses</h3>

   <dl>

      <dt>Shrimp sate kebabs with peanut sauce</dt>

      <dd>Skewers of shrimp marinated in lemongrass, garlic, and fish sauce then grilled to perfection. Served with spicy peanut sauce and jasmine rice. <span class="price">$12.95</span></dd>

     <dt>Jerk rotisserie chicken with fried plantains -- new item!</dt>

     <dd>Tender chicken slow-roasted on the rotisserie, flavored with spicy and fragrant jerk sauce and served with fried plantains and fresh mango. <span class="price">$12.95</span></dd>

   </dl>

</section>

Step 23

Two of the dishes are new items.  Change the double hyphens  -- to an em dash character &#8212;.  Here is the "Appetizers" section.

<section>

   <h3>Appetizers</h3>

   <dl>

      <dt>Black bean purses</dt>

      <dd>Spicy black bean and a blend of Mexican cheeses wrapped in sheets of phyl-lo and baked until golden. <span class="price"$3.95</span></dd>

     <dt>Southwestern napoleons with lump crab &#8212; new item</dt>

     <dd>Layers of light lump crab meat, bean and corn salsa, and our handmade flour tortillas. <span class="price">$7.95</span></dd>

    </dl>

</section>

Step 24

And here is the "Main Course" section.

<section>

   <h3>Main courses</h3>

   <dl>

      <dt>Shrimp sate kebabs with peanut sauce</dt>

      <dd>Skewers of shrimp marinated in lemongrass, garlic, and fish sauce then grilled to perfection. Served with spicy peanut sauce and jasmine rice. <span class="price">$12.95</span></dd>

     <dt>Jerk rotisserie chicken with fried plantains &#8212; new item!</dt>

     <dd>Tender chicken slow-roasted on the rotisserie, flavored with spicy and fragrant jerk sauce and served with fried plantains and fresh mango. <span class="price">$12.95</span></dd>

   </dl>

</section>

Step 25

Now markup "new item!" as "strongly important" using the inline <strong>...</strong> element.  Here is the "Appetizers" section.

<section>

   <h3>Appetizers</h3>

   <dl>

      <dt>Black bean purses</dt>

      <dd>Spicy black bean and a blend of Mexican cheeses wrapped in sheets of phyl-lo and baked until golden. <span class="price"$3.95</span></dd>

     <dt>Southwestern napoleons with lump crab &#8212; <strong>new item!</strong></dt>

     <dd>Layers of light lump crab meat, bean and corn salsa, and our handmade flour tortillas. <span class="price">$7.95</span></dd>

    </dl>

</section>

Step 26

And here is the "Main Course" section.

<section>

   <h3>Main courses</h3>

   <dl>

      <dt>Shrimp sate kebabs with peanut sauce</dt>

      <dd>Skewers of shrimp marinated in lemongrass, garlic, and fish sauce then grilled to perfection. Served with spicy peanut sauce and jasmine rice. <span class="price">$12.95</span></dd>

     <dt>Jerk rotisserie chicken with fried plantains &#8212; <strong>new item!</strong></dt>

     <dd>Tender chicken slow-roasted on the rotisserie, flavored with spicy and fragrant jerk sauce and served with fried plantains and fresh mango. <span class="price">$12.95</span></dd>

   </dl>

</section>

Step 27

Finally, classify the title of each new dish as "newitem" (use the existing dt element, as there is no need to add a span at this time).  This allows you to target menu titles with the "newitem" class attribute, and thus style them differently than the other menu items (using CSS which we will cover shortly).  Here is the "Appetizers" section.

<section>

   <h3>Appetizers</h3>

   <dl>

      <dt>Black bean purses</dt>

      <dd>Spicy black bean and a blend of Mexican cheeses wrapped in sheets of phyl-lo and baked until golden. <span class="price"$3.95</span></dd>

     <dt class="newitem">Southwestern napoleons with lump crab &#8212; <strong>new item!</strong></dt>

     <dd>Layers of light lump crab meat, bean and corn salsa, and our handmade flour tortillas. <span class="price">$7.95</span></dd>

    </dl>

</section>

Step 28

And here is the "Main Course" section.

<section>

   <h3>Main courses</h3>

   <dl>

      <dt>Shrimp sate kebabs with peanut sauce</dt>

      <dd>Skewers of shrimp marinated in lemongrass, garlic, and fish sauce then grilled to perfection. Served with spicy peanut sauce and jasmine rice. <span class="price">$12.95</span></dd>

     <dt class="newitem">Jerk rotisserie chicken with fried plantains &#8212; <strong>new item!</strong></dt>

     <dd>Tender chicken slow-roasted on the rotisserie, flavored with spicy and fragrant jerk sauce and served with fried plantains and fresh mango. <span class="price">$12.95</span></dd>

   </dl>

</section>

Step 29

The second article, "Low and Slow", is already mostly marked up from the previous exercise, but you should mark up the header with the same heading as the first article, "Summer Menu Items", using the <h2> element.

<article>

   <h2>Low and Slow</h2>

posted by BGB, November 15, 2016

<p>This week I am <em>extremely</em> excited about a new cooking technique called <dfn><i>sous vide</i></dfn>. In <i>sous vide</i> cooking, you submerge the food (usually vacuum-sealed in plastic) into a water bath that is precisely set to the target temperature you want the food to be cooked to. In his book, <cite>Cooking for Geeks</cite>, Jeff Potter describes it as <q>ultra-low-temperature poaching.</q></p>

<p>Next month, we will be serving <b><i>Sous Vide</i> Salmon with Dill Hollandaise</b>. To reserve a seat at the chef table, contact us before <time datetime="20161130">November 30</time>.</p>

</article>

Step 30

As we did before in the first article, "Summer Menu Items", use the <time>...</time> element for the date in the "Low and Slow" article.

<article>

   <h2>Low and Slow</h2>

   <p>posted by BGB, <time datetime="2016-11-15">November 15, 2016</time></p>

<p>This week I am <em>extremely</em> excited about a new cooking technique called <dfn><i>sous vide</i></dfn>. In <i>sous vide</i> cooking, you submerge the food (usually vacuum-sealed in plastic) into a water bath that is precisely set to the target temperature you want the food to be cooked to. In his book, <cite>Cooking for Geeks</cite>, Jeff Potter describes it as <q>ultra-low-temperature poaching.</q></p>

<p>Next month, we will be serving <b><i>Sous Vide</i> Salmon with Dill Hollandaise</b>. To reserve a seat at the chef table, contact us before <time datetime="20161130">November 30</time>.</p>

</article>

Step 31

Make the remaining content that applies to the whole page a footer.  Mark each line of content within the footer as a paragraph.

<footer>

   <p>Location: Baker's Corner, Seekonk, MA</p>

   <p>Hours: Tuesday to Saturday, 11am to 11pm</p>

   <p>All content copyright 2017, Black Goose Bistro and Jennifer Robbins</p>

</footer>

Step 32

We want to later add some CSS to modify how the Location and Hours information appears.  Both of these are block elements, so the div block element is used.  Since there is only one footer, the id attribute is used rather than the class attribute.  Set the id attribute equal to "about".

<footer>

<div id="about">

   <p>Location: Baker's Corner, Seekonk, MA</p>

   <p>Hours: Tuesday to Saturday, 11am to 11pm</p>

</div>

   <p>All content copyright 2017, Black Goose Bistro and Jennifer Robbins</p>

</footer>

Step 33

Make the labels “Location” and “Hours” appear on a line by themselves by adding line breaks after them with the <br> element.

<footer>

<div id="about">

   <p>Location:<br>Baker's Corner, Seekonk, MA</p>

   <p>Hours:<br>Tuesday to Saturday, 11am to 11pm</p>

</div>

   <p>All content copyright 2017, Black Goose Bistro and Jennifer Robbins</p>

</footer>

Step 34

Mark up the hours with the time element (you don’t need the date or time zone portions).

<footer>

<div id="about">

   <p>Location:<br>Baker's Corner, Seekonk, MA</p>

   <p>Hours:<br>Tuesday to Saturday, <time datetime="11:00">11am to 11pm</time></p>

</div>

   <p>All content copyright 2017, Black Goose Bistro and Jennifer Robbins</p>

</footer>

Step 35

Copyright information is typically “small print” on a document, so mark it up using the <small>...</small> element.

<footer>

<div id="about">

   <p>Location:<br>Baker's Corner, Seekonk, MA</p>

   <p>Hours:<br>Tuesday to Saturday, <time datetime="11:00">11am to 11pm</time></p>

</div>

   <p><small>All content copyright 2017, Black Goose Bistro and Jennifer Robbins</small></p>

</footer>

Step 36

Add a copyright symbol after the word “copyright” using the keyboard or the &copy; character entity.

<footer>

<div id="about">

   <p>Location:<br>Baker's Corner, Seekonk, MA</p>

   <p>Hours:<br>Tuesday to Saturday, <time datetime="11:00">11am to 11pm</time></p>

</div>

   <p><small>All content copyright &copy; 2017, Black Goose Bistro and Jennifer Robbins</small></p>

</footer>

Step 38

Your bistro_news.html website should now like like below: