Lab 1: Marking Up Content and Links for City Farmer
Problem: You work for a local but rapidly growing gardening supply company called City

Farmer that specializes in products that support food self-sufficiency. The company has

hired you to add content in the form of images, headings, paragraphs, and lists to the home

page. You will also identify several links. Create the webpage shown in Figure 3–70 that

contains the textual content that City Farmer wants on their home page.

Instructions: Perform the following tasks:
1. Open the cityfarmer03.html file in your HTML editor and then modify the comment at the

    top of the page to include your name and today’s date. Make sure the <title>…</title>
    tags contain the text City Farmer Home Page.
2. Delete the first comment in the header section and add an img element to insert the
    cityfarmer.jpg file as follows:
    <img src="cityfarmer.jpg" alt="City Farmer logo" width="303" height="252">
3. Change the <p>…</p> tags that mark up "City Farmer" in the header section to <h1>…</h1> tags.
4. Change the <p>…</p> tags that mark up "…today's urban cowboy" in the header section to <h2>…</h2> tags.
5. Modify the content in the nav section to create an unordered list of links to each of the 
     future pages of the website as follows:

       <ul>
         <li><a href="products.html">Products</a>&nbsp;</li>
        <li><a href="order.html">Order</a>&nbsp;</li>
        <li><a href="news.html">News</a>&nbsp;</li>
         <li><a href="events.html">Events</a>&nbsp;</li>
      </ul>

(Hint: Note that the ending anchor tag, </a>, is positioned immediately after the word that
becomes the link such as Products or Order. The ending anchor tag, </a>, does not include the
nonbreaking space, &nbsp;. This results in a clean link such as Products or Order instead of
a link that adds a space on the end such as Products or Order . Also note that the closing list

item tag, </li>, includes the nonbreaking space &nbsp;. The HTML validator will not allow any

text, even a nonbreaking space, inside an unordered list <ul> that is not surrounded by

list item <li>….</li> tags.)

6. In the footer section, modify the email address to be a hyperlink as follows:
    <a href="mailto:feedback@cityfarmer.com">Send us an email</a>
7. Validate your code and fix any errors.
8. Check the spelling of the text.
9. Save and open the page within a browser as shown in Figure 3–70.
10. Submit your assignment in the format specifoed by your instructor.

11. Current best practices are to code the links in the <nav> section as list items using <li>…</li>
     tags within an unordered list created with <ul>…</ul> tags. Why are these best practices
     recommended instead of coding the links as paragraph content using <p>…</p> tags or as
     heading content using <h1>…</h1> through <h6>…</h6> tags?