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.

 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
    &nbsp; 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: 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.

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.