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 P
H2
Body background color should be orange
H1 should have dotted border and text should be aligned to the middle as shown above. H1 width should be 80% and its font color should be white as shown above
H2 font color should be #FFFF99 and should be aligned to left
Paragraph (p) should have font color white and its width should be 80%
Use internal style sheet only for all styles above. Q2. [HTML tables - 3 marks] Write the HTML code to generate the following page which has a H1 and a table as shown below. Your HTML should generate the page exactly as shown below.
Q3. [Loops – 2 marks] Write the JavaScript code to print all even numbers between 1 and 100 using a for loop. Q4. [JavaScript validation – 5 marks] Complete the verifyRegForm() 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>Registration Form</title> <script language="JavaScript"> function verifyRegForm() { //......... //Write the JavaScript code to check if all the three fields //are filled and that age is a number….. } </script> </head> <body> <h2>Registration form</h2> <i> Please fill all the form fields</i> <br /><br /> <form name="regForm" action="#" onsubmit="verifyRegForm()"> FullName : <input type="text" name="fullName"> <br /><br /> Email : <input type="text" name="email"> <br /><br /> Age : <input type="text" name="age"> <br /><br /> <input type="submit" value="Register"> </form> </body> </html>
The validations that you need to do when the user submits the form are Check if all the three fields are filled if they are not shown an alert with the appropriate message. Check if age is a number if it is not show alert that age cannot be a number.
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>Q3: Area and Perimeter of Rectangle Using JavaScript</title> <script language="JavaScript"> function calcArea() { //…………… //calculate and display the area using the formula //area = length * breadth } function calcPerimeter() { //…………… //calculate and display the perimeter using the formula //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>