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.
Analyze, Correct, Improve continued
Copyright 2017 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. WCN 02-200-203
HTML Chapter 3STUDENT ASSIGNMENTS
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> </li>
<li><a href="order.html">Order</a> </li>
<li><a href="news.html">News</a> </li>
<li><a href="events.html">Events</a> </li>
</ul>
(Hint:
(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, . 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 .
a link that adds a space on the end such as Products or Order . a link that adds a space on the end such as Products or Order .
Figure 3–70
Continued >
Copyright 2017 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. WCN 02-200-203
STUDENT ASSIGNMENTS
Figure 3–71
Also note that the closing list item tag, </li>, includes the nonbreaking space . 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 specified 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?
Lab 2: Creating a Home Page for Cycle Out Cancer
Problem: You are part of a philanthropic group of motorcyclists, Cycle Out Cancer, who participate in community events and parades to distribute cancer awareness information. Create the webpage shown in Figure 3–71 that marks up the content on the organization’s home page.
In the Lab continued
Copyright 2017 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. WCN 02-200-203
HTML Chapter 3STUDENT ASSIGNMENTS
Instructions: Perform the following tasks:
1. Open the cycle03.html 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 Cycle Out Cancer Home Page.
2. Change the <p>…</p> tags that mark up “Cycle Out Cancer” in the header section to
<h1>…</h1> tags.
3. Change the <p>…</p> tags that mark up “We Ride So Others May Live” in the header section to <h2>…</h2> tags.
4. Delete the <!-- add photo--> comment in the header section and add an img tag with the following attributes and values:
src="cycle.jpg"
alt="Woman saluting riders"
width="385"
height="578"
5. Modify the content in the nav section to create links to each of the future pages of the website with the href attribute values as follows:
<a href="about.html">About Us</a>
<a href="events.html">Events</a>
<a href="faq.html">Cancer FAQs</a>
<a href="contact.html">Contact Us</a>
6. Modify the list of links in the nav section to be indented list items using <li>…</li> tags within an unordered list created with <ul>…</ul> tags. The two nonbreaking space codes
should be positioned after the closing </a> tag but before the closing </li> tag for each item.
7. In the <div id="main"> section, mark up the following headings with <h3>…</h3> tags:
Rides and Activities
Blood and Organ Donation Survivor Stories
7 Steps Every Cancer Patient Should Take Key Terminology
8. Below the “Rides and Activities” heading in the <div id="main"> section, mark up the first line (“Rides and activities are…”) with <p>…</p> tags. Mark up the list of four hospitals as an unordered list.
9. Below the “Blood and Organ Donation” heading in the <div id="main"> section, use the first URL as the href attribute value to create a link with the text Information on donating blood from the American Red Cross.
Use the second URL as the href attribute value to create a link with the text Information on donating organs from WebMD.
10. Below the “Survivor Stories” heading in the <div id="main"> section, mark up the four testimonials using <p>…</p> tags. (Hint:
testimonials using <p>…</p> tags. (Hint:
testimonials using <p>…</p> tags. ( Each paragraph ends with the name of a person.) 11. Below the “7 Steps Every Cancer Patient Should Take” heading in the <div id="main"> section,
delete numbers 1 through 7, and then mark up and indent the seven steps as list items using
<li>…</li> tags within an ordered list created with <ol>…</ol> tags.
12. Below the “Key Terminology” heading in the <div id="main"> section, mark up the entire section as a description list using <dl>…</dl> tags. Mark up each term as a definition term with
<dt>…</dt> tags and each definition with <dd>…</dd> tags.
Continued >
Copyright 2017 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. WCN 02-200-203
STUDENT ASSIGNMENTS
13. Validate your code and fix any errors.
14. Check the spelling of the text.
15. Save and open the page within a browser as shown in Figure 3–71.
16. Submit your assignment in the format specified by your instructor.
17. It’s easy to confuse head, header, and heading HTML elements. Describe the purpose for each.
Lab 3: Expand Your World