HTML and CSS Reference
In-Depth Information
alert message pops up reminding the user to click the contact link to contact an
agent for more information.
2.
Add the date last modified to the footer section of the listings.html page.
Hands-On Practice Case
1.
Add
onmouseover
event handlers to the listing numbers in the listings.html page
such that when the user hovers the mouse pointer over the listing number, an
alert message pops up reminding the user to click the contact link to contact an
agent for more information.
Launch Notepad and open the listings.html file from the primecss folder.
●
Add the following code around the listing number as follows:
●
<a href="#" onmouseover=
"alert('Please contact us for more information.');">
Listing #3432535</a>
●
Similarly, add this code to the second listing paragraph.
Save the file and test it in a browser. The alert box should pop up when you
move the mouse pointer over the listing link.
2.
Add the date last modified to the footer section of the listings.html page.
Launch Notepad and open the listings.html page if it is not already open.
Modify the page as follows:
●
At the bottom of the page, after the e-mail link, add a script block that will
write the following message to the document:
This page was last modified on: date
●
Use the
document.lastModified
property to display the date.
●
Web Project
See Chapter 5 for an introduction to the Web Project case. Review the goals of your
Web site and determine if the use of JavaScript to add interactivity would add value to
your site. If so, add it appropriately. Check with your instructor for the required use of
interactivity in your Web project.
Select one or more from the following:
●
Choose one of the examples from the chapter to add an alert message to grab the
user's attention for important information.
●
Choose one of the examples from the chapter to add validation to a form in your
Web site. Consider using one or more of the following validation rules:
●
Required information such as name, address, e-mail, phone number
●
Numeric information within bounds such as a quantity greater than 0 or age
greater than 18
●
Consider adding image swapping as shown in the Fish Creek Animal Hospital
Case Study in this section.
Decide where to apply the interactive technology to your site. Modify, save the page(s)
and test it in the browser.
