A+ Work



Use your text editor to open the morningtxt.htm and programstxt.css files from the HW5 folder on your PC. Enter your name and the date in the comment section of each file. Save the files as morning.htm and programs.css, respectively, in the same folder. 2. Go to the morning.htm file in your text editor. Insert links to the kpaf2.css and programs.css style sheets. 3. Scroll down the file and directly below the paragraph element, insert a Web table with the class name programs. 4. Add a table caption containing the text All Times Central. 5. Below the caption, create a column group containing three columns. The first col element should have the class name timeColumn. The second col element should have the class name wDayColumns and span five columns in the table. The last col element should have the class name wEndColumns and span two columns. 6. Add the table header row group containing the headings shown in the figure above. 7. Enter the table body row group containing the times and names of the different KPAF programs from 5:00 a.m. to 12:00 p.m., Monday through Sunday, in half-hour intervals. Create row- and column-spanning cells to match the layout of the days and times shown in the figure above. 8. Close the morning.htm file, saving your changes. 9. Go to the programs.css file in your text editor. Create a style rule for the programs table to: a) set the width of the table to 100%; b) add a 2-pixel solid black border that is collapsed around the table; and c) set the font family to the following list of fonts: Arial, Verdana, and sans-serif. 10. Create a style rule to align the table caption with the bottom-left corner of the table. Set the caption font size to 0.8em. 11. Create a style rule for all table data cells in the table body of the programs table to: a) set all table cells to a font size of 0.7em; b) vertically align the text of all table data cells with the top of the cell; c) add a 1-pixel solid gray border around every cell, and d) setting the padding space to 2 pixels. 12. Set the height of all table rows to 25 pixels. 13. Display the header row group in white font with a background color of (105, 177, 60). 14. For table header cells within the header row group, set the font size to 0.7em and add a 1- pixel solid gray border. For the first table header cell in the header row group, set the background color to the value (153, 86, 7). Use the nth-of -type pseudo-class to set the background color of the seventh and then the eighth table header cells in the header row group to the value (153, 0, 153). 15. Add the following style rules for the three column groups in the table: a) set the width of the timeColumn column group to 10% with a background color of (215, 205, 151); b) set the width of the wDayColumns column group to 11% with a background color of (236, 255, 211); and c) set the width of the wEndColumns column group to 17% with a background color of (255, 231, 255). 16. Create a three-column layout for the introductory paragraph within the intro section with three columns in the layout separated by a gap of 20 pixels with a 1-pixel solid black divider. 17. Add style comments throughout the style sheet to document your work, and then save your changes. 18. Open the morning.htm file in your Web browser and verify that the table layout and design resemble that shown in the figure above. (Note: If you are using Internet Explorer or Opera, you will not see the three-column layout for the introductory paragraph.)