HTML and CSS Reference
In-Depth Information
Perform the following tasks:
1. Start Notepad++ and open the lab10-3.html file from the Chapter10\IntheLab folder of the Data
Files for Students. Save immediately as lab10-3solution.html.
2. Using the techniques learned in this chapter, write the JavaScript code to create a scrolling message,
validate the data entered into the form, and calculate the number of months to pay off a debt making
a specific monthly payment. Place the scrolling message form text field in the blank line after
the banner image, and use the embedded style sheet class, align-center, to center the form. Add the
date the Web page was last modified in the blank line before the </body> tag at the bottom of the
Web page. Use either a <div> or <footer> tag with an inline style with a left margin of 25% and
the id attribute, lastDate. A pop-up window should display with a message as indicated in Figure 10-46a.
The pop-up window size is 600 pixels wide by 390 pixels high. The pop-up filename is
lab10-3announce.html.
3. Save the completed HTML file, validate, and test it using your browser. If an error occurs, check
your code, save, and test again.
4. Submit the completed HTML file and Web page in the format specified by your instructor.
Cases and Places
Apply your creative thinking and problem-solving skills to design and implement a solution.
Note:
To complete these assignments, you may be required to use 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.
1
: Creating a Stock Market Club Web Page
Academic
You are a member of your campus Stock Market Club. Because you have had a course in Web design
and Web programming, they have asked you to create a Web page that allows a user to enter a current
stock quote price and the number of shares of the five stocks your club has chosen to track. Your Web
page form should validate that the data entered is numeric and should display a total cost of shares
purchased, formatted with commas and dollar signs.
You should search the Internet for a widget or badge (such as Yahoo! Finance at finance.yahoo
.com/badges). Follow the steps for creating the HTML code to embed the stock quotes on your page.
Use your five stocks as the stock symbols. (Search the Internet to find the stock symbols you want to
use.) Use this page as a pop-up window that launches when the Web page is loaded.
2
: Calculating Your GPA
Personal
Quite often, students like to track their own semester GPA. Check with your school, but most schools
that use a plus/minus grade system assign the following values to letter grades: A+ = 4, A = 4, A- = 3.7,
B+ = 3.3, B = 3, B- = 2.7, C+ = 2, C- = 1.7, D+ = 1.3, D = 1, D- = .7, F = 0. Grades of W, I, P are not
calculated in a GPA.
Create a form that allows you to enter from four to six courses. For each course have a text box
to accept the letter grade. Next to the letter grade, have a text field that accepts the credit hours for
the course. Include Calculate GPA and Reset buttons. When you click the Calculate GPA button, the
JavaScript function needs to verify that a valid grade letter has been entered and then accumulate the
number of grade points. At the same time, you need to accumulate the credit hours.
Continued >
