SFDV2001 Web Development Lab Exam Instructions: ANSWER ALL QUESTIONS READ and understand the question carefully before writing the answer. WRITE the answer in your answer sheets
Name: ID: Time: 90 minutes Marks: 20 (5% of course)
Q1. [HTML/CSS - 5 marks] Write the HTML and CSS (internal style sheet) that will show the following web page exactly as it is shown below.
H1
H2
P
Body background color should be #FFCC66
H1 should have solid border of white, its width should be 70% and its font color should be white as shown above
H2 font color should be #FFCC33 and background color should be teal
Paragraph (p) should have a margin of 5px
Use internal style sheet ONLY for all the styles above.
SFDV2001 Web Development / Lab Exam /2010
Page 1
Q2. [HTML tables - 3 marks] Write the HTML code to generate the following web page which has a H1 and a table which are aligned to the center as shown below. Your HTML should generate the page exactly as shown below.
Q3. [Loops – 2 marks] Write the JavaScript code to print all odd numbers between 0 and 99 using a for loop. Q4. [JavaScript validation – 5 marks] Complete the verifyContactDetailsForm() JavaScript function for the registration form given below. For your answer write only the JavaScript function. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Contact Details Form</title> <script language="JavaScript"> function verifyContactDetailsForm() { //......... //Write the JavaScript code to check if all the three fields //are filled and that phone is a number….. } </script> </head> <body> <h2>Contact Details form</h2> <i> Please fill all the form fields</i> <br /><br /> <form name="contactDetailsForm" action="#" onsubmit="verifyContactDetailsForm()"> FullName : <input type="text" name="fullName"> <br /><br /> Email : <input type="text" name="email"> <br /><br /> Phone : <input type="text" name="phone"> <br /><br /> <input type="submit" value="Register"> </form> </body> </html>
The validations that you need to do when the user submits the form: Check if all the three fields are filled - if they are not filled, show an alert with the appropriate message. Check if phone is a number - if it is not a number, show an alert that phone number must be a number. SFDV2001 Web Development / Lab Exam /2010
Page 2
Q5. [JavaScript – 5 marks] Write the JavaScript functions calcArea() and calcPerimeter() of a rectangle using the length and breadth values from the HTML shown below. Write only the two JavaScript functions in your answer. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Q5: Area and Perimeter of Rectangle Using JavaScript</title> <script language="JavaScript"> function calcArea() { //…………… //calculate and display the area using the formula in an alert box //area = length * breadth } function calcPerimeter() { //…………… //calculate and display the perimeter using the formula in an alert box //perimeter = 2 * (length + breadth) } </script> </head> <body> <h1>Area and Perimeter of Rectangle Using JavaScript</h1> <form name="areaForm" action="#"> <input type="text" name="length"> <br /><br /> <input type="text" name="breadth"> <br /><br /> <input type="button" value="Calculate Area" onClick="calcArea()"> &nbsp;&nbsp; <input type="button" value="Calculate Perimeter" onClick="calcPerimeter()"> </form> </body> </html>
SFDV2001 Web Development / Lab Exam /2010
Page 3