Your job will be to write HTML code for three pages: the sites home page, a page containing race information, and finally a page containing a list of frequently asked questions (FAQs).

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.htmlrespectively.

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 Dianes 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 Dianes 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 Dianes 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 Dianes Run as the alternate text of the image.

B. Mark the first paragraph after the header as a paragraph. Mark the text Dianes 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:

Dianes 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 headerelement 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 Dianes 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.htmlin 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 Dianes 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 sectionelement, directly after the section header.

21.Next, youll 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 questions 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.htmlin your browser. Verify that by clicking a question within the ordered list, the browser jumps to that questions 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 dianesrun@example.comto 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.