HTML and CSS Reference
In-Depth Information
Apply Your Knowledge
continued
7. Enter the onLoad event handler in the <body> tag to call the two user-defined functions when the
Web page loads.
8. Save the revised file in the Chapter09\Apply folder using the filename apply9-1solution.html.
9. Validate the file using the w3.org validator.
10. View and test the Web page in your browser. In this exercise, you must use Internet Explorer to see
the countdown message.
11. If any errors occur, check the code against Steps 1 through 7, make any required changes, save the
file using the same filename, and then refresh the Web page in the browser.
12. Submit the revised HTML file and Web page in the format specified by your instructor.
Extend Your Knowledge
Extend the skills you learned in this chapter and experiment with new skills. You will need to
search the Internet to complete the assignment.
Learning More about Displaying Messages
Instructions:
Start Notepad++ and your browser. Open the file extend9-1.html from the Chapter09\
Extend folder of the Data Files for Students. See the inside back cover of this topic for instructions on
downloading the Data Files for Students, or contact your instructor for information about accessing the
required files.
Perform the following tasks:
1. Search the Internet for the JavaScript instructions on how to display a message on the status bar of
your browser. (
Hint:
Look for properties of the Windows object.)
2. Add the <script> section and then write the code for a user-defined function, called copyRight(),
which would use the lastModified property and the substring() method to extract the date the Web
page was last modified and saved. However, instead of placing the message in a <div> container,
create a copyright message: “© Copyright Denver Opera House 2014. This document was last
modified” followed by the date, and assign it to the browser status bar. (
Note:
After allowing
Internet Explorer to run blocked content, you may have to right-click the Address bar and make
sure the status bar is checked. If the status bar still does not display, you may have click the Refresh
button to reload the Web page and display the status bar.)
3. Search the Internet for the proper scroll bar names for the arrow and shadow color. Using the code
in Table 9-21 on page HTML 429 as a guide, enter the code for a user-defined function called
newScroll() to change the scroll bar colors to the hexadecimal values shown in Table 9-30.
Table 9-30 Scroll Bar Colors
scroll bar face color: #603520
scroll bar arrow color: #bf853f
scroll bar track color: #ffffff
scroll bar shadow color: #a66030
4. Locate the blank line between the divider line images and enter the <div> tag container for the
dynamic message. Use an id attribute “displayDate” and include a class attribute, center, which is
defined in the CSS code.
