html code

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 a..n@example.com 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.