In this exercise, you’ll code the HTML for the home page. When you’re through, the page should look like the one on the facing page, but with three speakers.Open the starting page and get the contents for it1. Use your text editor to open this HTML file:c:\html5_css3_2\exercises\town_hall_1\index.htmlNote that it contains the head section for this web page as well as a body section that contains header, main, and footer tags.2. Use your text editor to open this text file:c:\html5_css3_2\exercises\town_hall_1\text\c3_content.txtNote that it includes all of the text that you need for this web page.Enter the header3. Code the img element that gets the image at the top of the page from the images directory. To locate the image file, use this document-relative path: images/town_hall_logo.gif. Be sure to include the alt attribute, and set the height attribute of the image to 80.4. Copy the text for the first two headings from the txt file in the text folder into the header of the HTML file. Next, apply the h2 and h3 elements.5. Test this page in Chrome. If necessary, correct the HTML and test again.Enter the content for the main element6. Copy all of the content for the main element from the txt file into the HTML file. Then, add an h1 tag to the heading “This season’s guest speakers”, and add h2 tags to these headings “Our Mission” and “Our Ticket Packages”.7. Addtags to the first block of text after the “Our Mission” heading, and add blockquote tags to the second block of text as shown above.8. Add the ul and li tags that are needed for the three items after the “Our Ticket Packages” heading. Then, test these changes and make any adjustments. 9. Format the name and month for the first speaker after the “This season’s guest speakers” heading as one h3 element with a
in the middle that rolls the speaker’s name over to a second line. Then, test and adjust.
10. When that works, do the same for the next two speakers.
11. Enclose the name for each speaker in antag. The href attribute for each tag should refer to a file in the speakers subfolder that has the speaker’s last name as the filename and html as the file extension. In other words, the refer- ence for the first speaker should be: speakers/toobin.html
12. After the h3 element for each speaker, code an img element that displays the image for the speaker, and be sure to include the alt attribute. The images are in the images subfolder, and the filename for each is the speaker’s last name, followed by 75 (to indicate the image size), with jpg as the extension. So to refer to the first speaker’s file, you need to use a document-relative path like this: images/toobin75.jpg. Now, test and adjust.Enter the footer13. Copy the last paragraph in the txt file into the footer of the HTML file. Then, enclose the text in a
element.Add character entities and formatting tags14. Use character entities to add the quotation marks at the start and end of the text in the blockquote element.15. Use a character entity to add the copyright symbol to the start of the footer.16. Add the sup tags that you need for raising the th in the second line of the header (as in 75th). Then, test these enhancements.Test the links, validate the HTML, and test in Firefox and IE17. Click on the link for the speaker page. This should display a page that gives the speaker’s name and says “This page is under construction”. If this doesn’t work, fix the href attribute in the link and test again. To return to the first page, you can click the browser’s Back button.18. Open the toobin.html file that’s in the speakers subfolder. Then, add a link within a
element that says “Return to index page.” To refer to the index.html file, you’ll have to go up one level in the folder structure with a document-relative path like this: ../index.html. Now, test this link.19. Validate the HTML for the index page as shown in figure 2-15 of chapter 2. This should indicate one warning but no errors. If any errors are detected, fix them and validate the HTML again.20. Test the index page in the Firefox browser. If necessary, fix any problems and test again in both Chrome and Firefox.21. Test the index page in the IE browser. If necessary, fix any problems and test again in all three browsers.