Creating a Page with Links, Images, Lists, and Headings
Instructions: In this exercise, you will use your HTML editor to enter the needed tags and

content to create a template for the pages for a new website as well as the home page for the

Durango Jewelry and Gem Shop. The completed home page is shown in Figure 3–67. It contains

the content as well as the HTML5 tags required to insert an image, headings, links, lists, and

paragraphs of information for this page. You will also use professional web development best practices

to indent, space, validate, and check the spelling of your work.

Perform the following tasks:
1. Open your HTML editor and then open the apply03.html file from the Data Files for Students.

     Use the File Save As feature to save the webpage in the chapter03\apply folder with the name

      index.html to create the home page.
2. Modify the comment at the top of the page to include your name and today’s date.
3. Enter Durango Jewelry Pendant Gem in the <title> tags. Recall that content in the title tags

     appears in the tab at the top of the browser and is also used by search engines.
4. In the header section, enter the following content, each on its own line in the HTML editor.
      a. An image element coded as follows:

         <img src="wirewrap01.jpg" alt="smoky quartz pendant" width="171" height="171">

    b. The text Durango Jewelry and Gem Shop in <h1> tags to insert the name of the store.
     c. The text Distinguished wire-wrapped jewelry, pendants, and gems in <h2> tags to serve as the tagline.

5. In the nav section, enter the following links, each on its own line in the HTML editor.
      <a href="classics.html">Classics</a>&nbsp;
       <a href="specials.html">Specials</a>&nbsp;
       <a href="gems.html">Gems</a>&nbsp;
      <a href="contact.html">Contact Me</a>&nbsp;

6. In the footer section, enter the following content, each on its own line in the HTML editor.
       a. The text Durango Jewelry and Gem Shop, 10101 Main Street, Durango, CO in paragraph tags.
       b. The text Established 1979 in paragraph tags.
       c. The text Contact us through email coded as a link to gemologist@durangogem.com
7. The content added to the <div id="main"> section for each page will differ, but the content
     you just added to the header, nav, and footer sections for the index.html home page
     will be the same for all pages in the website. Therefore, use the Save As feature to create the
    four other pages for this website: classics.html, specials.html, gems.html, and
     contact.html. You will fill in the content for the main section for these pages in later
     tutorials, so close these pages and then reopen index.html.
8. In the <div id="main"> section, enter the following content.
    a. First paragraph:

         <p>Durango Jewelry and Gem Shop pampers you with one-of-a-kind, highquality

                wire wrapped pendants and gems. Our works of art are inspired  by natural geometries

                and the vast beauty of mother nature.</p>

    b. Second paragraph:
         <p>The featured pendant provides these characteristics:</p>
     c. Unordered list:
        <ul>
        <li>gemstone is "Smoky quartz" also called a "Soulmate Crystal"</li>
         <li>gemstone is over two carats</li>
         <li>wire is a mixture of antique colored copper and .930 pure silver</li>
         <li>high-quality silver alloy requires very little polishing</li>
        <li>pendant is approximately 4cm × 3cm</li>
         </ul>

d. Final paragraph:
      <p>Come to Durango Jewelry and Gem Shop to make your stay in Durango a life-time treasure.</p>
9. Review and check the spelling of your textual content.
10. Validate your webpage using the W3C validator found at validator.w3.org and fix any errors
that are identified. Validation is complete when the validator returns the message “This document was

successfully checked as HTML5!” in a green bar near the top of the webpage.

11. Submit the index.html file in a format specified by your instructor.
12. In this exercise, you were instructed to use the <div id="main"> tag instead of the HTML5
<main> tag to mark up the main content in the body of the webpage. Because browsers are
constantly changing and improving, it’s important to make sure that the audience you are
trying to reach supports the HTML5 elements and attributes you are using on your website.
Find two websites that address the issue of HTML5 browser compatibility. Paste those links
and a screenshot of the webpage into a document. (Hint: To take a screenshot of the webpage,
press the PrtSc or Print Screen key on your keyboard, tap or click your document, and then tap
or click the Paste button.)
Use your research to answer these questions:
a. When is the div element used within a webpage written with HTML5 tags?
b. What are the HTML5 semantic tags?
c. What is the primary advantage and the primary disadvantage of using the <main> tag versus <div id="main">?