Peter has supplied you with the text content, the graphic images, and style sheets you

need for the

Complete the following:

1. Using your editor, open the dr_index_txt.html, dr_info_txt.html, and dr_faq_txt.html files from the
html01 case3 folder. Enter your name and the date in the comment section of each file, and save
them as dr_index.html, dr_info.html, and dr_faq.html respectively.

2. Go to the dr_index.html file in your HTML editor. Within the document head, add the following
metadata:

a. Set the character encoding of the file to utf-8.

b. Insert the search keywords: breast cancer, run, race, and charity.

c. Set the title of the document to Diane’s Run.

d. Link the document to the dr_base.css and dr_layout.css style sheet files.

3. Within the document body, insert a header element, two section elements, and a footer element.

4. In the header element, insert a navigation list containing an unordered list with the items: Home,
Race info, and FAQ. Link the items to the dr_index.html, dr_info.html, and dr_faq.html files respectively.

5. The file dr_index.txt contains the text to be inserted into the Diane’s Run home page. Go to the
dr_index.txt file in your text editor and copy the text from the first section of the file. Then, go to the
dr_index.html file in your HTML editor and paste it into the first section element.

6. Add the following markup to the content of the first section element:

a. Mark the line What Your Support Does as an h1 heading.

b. Mark the next two paragraphs as paragraphs using the p element.

c. Mark the four ways a contribution can help as an unordered list. Mark the dollar amounts of

each list item using the strong element.

7. Return to the dr_index.txt file in your text editor, copy the text from the second section, then close
the dr_index.txt file. Go to the dr_index.html file in your HTML editor and paste the copied text within
the second section element.

8. Within the second section element in the dr_index.html file, add the following:

a. Enclose the opening heading Diane’s Run - September 9, 2017 within a header element and

marked as an h1 heading. Directly above this heading, insert the inline image file dr_photo1.png
with Diane’s Run as the alternate text of the image.

b. Mark the first paragraph after the header as a paragraph. Mark the text Diane’s Run in this
opening paragraph using the strong element.
 c. Mark the minor headings How to Join, History, and Remembering Diane as h2 headings. Mark
the other blocks of text as paragraphs.

9. Within the footer element, insert the following text:

Diane’s Run 45 Mountain Drive cheyenne, WY 82001 where the character is inserted using
the character code 9829.

10. Save your changes to the file and then open dr_index.html in your browser. Verify that the content
and the layout of the page resemble that shown in Figure 1-48.

11. Go to the dr_info.html file in your HTML editor. Within the document head, link the page to the
dr_base.css and dr_layout2.css style sheets.

12. Go to the dr_index.html file in your HTML editor and copy the body header content. Then, go to the
dr_info.html file in your HTML editor and paste the copied content into the document body. Repeat for
the body footer so that the Racing Information page has the same navigation list and footer as the home
page. Between the header and footer element, insert a section element.

13.Within the section element, insert a header element with the following content:

a. Insert a paragraph with the text Page last updated: tuesday, August 29, 2017. Mark the date
using the time element with the datetime attribute equal to 2017-08-29.

b. Add the text Race information as an h1 heading.

c. Insert the inline image file dr_logo.png with Diane’s Run as the alternate text.

14. Go to the dr_info.txt file in your text editor. This file contains the text describing the race. Copy the
content describing the race from the file, then close the dr_info.txt file. Go to the dr_info. html file in
your HTML editor and paste the copied text into the section element, directly after the section header.

15. Mark the content of the section element as follows:

a. Mark the opening block of text directly after the section header as a paragraph.

b. Mark the headings Race Times, Goodies and Stuff, and Notes as h2 headings.

c. Below each of the h2 elements, mark the list of items that follows as an unordered list.

16. Save your changes to the file and then load dr_info.html in your browser to verify that the layout
and content are readable.

17. Go to the dr_faq.html file in your HTML editor. Within the document head, link the page to the
dr_base.css and dr_layout3.css style sheets.

18. Go to the dr_index.html file in your HTML editor and copy the body header content. Then, go to the
dr_faq.html file in your HTML editor and paste the copied content into the document body. Repeat with
the body footer so that the FAQ page has the same navigation list and footer as was used in the home
page. Between the header and footer element, insert a section element.
19. Within the section element, insert a header element with the id attribute pagetop. Within the
header, insert the inline image file dr_logo.png with the alternate text Diane’s Run followed by the h1
element with the text Frequently Asked Questions.

20. Go to the dr_faq.txt file in your text editor. This file contains a list of frequently asked questions
followed by the question answers. Copy the text and then close the dr_faq.txt file. Then, go to the
dr_faq.html file in your HTML editor and paste the copied text into the section element, directly after
the section header.

21.Next, you’ll create a series of hypertext links between the list of questions and their answers within
the same document. Make the following changes to the section element in the dr_faq.html file:

a. Mark the 13 questions at the top of the section as an ordered list.

b. Notice that below the ordered list you just created, the questions are repeated and each
question is followed by its answer. Mark the text of those questions as an h2 heading and the
answer as a paragraph. Add an id attribute to each of the 13 h2 headings with the first heading
given the id faq1, the second heading faq2, and so forth down to faq13 for the last h2 heading.

c. After the last answer, insert a paragraph with the text Return to the top and mark the text as
a hypertext link pointing to the header element with the id pagetop.

d. Return to the ordered list at the top of the section that you created in Step a. Change each
item in the ordered list to a hypertext link pointing to the h2 heading containing the question’s
answer that you created in Step b. For example, the first question How do I sign up? should be
linked to the h2 heading with the faq1 id.

22. Save your changes to the file and then open dr_faq.html in your browser. Verify that by clicking a
question within the ordered list, the browser jumps to that question’s answer. Further, verify that
clicking the Return to the Top link at the bottom of the page causes the browser to return to the top of
the page.

23.Return to the dr_index.html file in your HTML editor. Add the following two hypertext links to the
How to Join paragraph in the second section element:

a. Change the e-mail address [email protected] to an e-mail link with the subject
heading Entry Form.

b. Change the word accommodations to a hypertext link pointing to the element with the id
faq13 in the dr_faq.html file.

24. Save your changes to the file and reload dr_index.html in your browser. Verify that clicking the e-
mail link brings up your e-mail program with the e-mail address and the subject heading already filled in.

25. Click the accommodations hypertext link and verify that the browser goes to the last answer on the
FAQ page.

26. Verify that you can jump between all three pages by clicking the navigation links at the top of the
page.