Web Page Design with HTML and CSS Questions and Answers
Questions
Environmental Institute of Colombo intends to develop a website to provide information on an art competition for students. A web page from this website and another web page with entry form to register for the competition are shown in figure below.
- Using appropriate HTML, tags, create a HTML file required to render the web page as shown in pic-1. your code shuold satisfy the following requirements.It is required to format the text of the list in 'Calibri' font, 14 points high, in red color. The list should be bulleted with squares. Format the list by using internal or external style sheet only. Further, when a user clicks on the hypetext 'online entry form' on the web page, the entry from given in pic-2 should be rendered on a new tab/page. Assume that the name of the HTML file of the web page with the entry form is 'form.html'.
- Using appropriate HTML tags, create a HTML file to render the entry form given in pic-2. The option for 'Grade Category' are given in the pic-3. Your code should satisfy the following requirements. When the 'Clear your Entries' Button is clicked, all the entries of the form should be cleared. Similarly, when the 'Submit' button is clicked, the form should be submitted to the server.
Answers
a)
<html>
<head>
<meta charset="utf-8">
<title>Information</title>
<style>
li{font-family:calibri;font-size:14pt;color:red;list-style:square;}
</style>
</head>
<body>
<h1> Student Art Competition</h1>
<h2>Theme: Litter on the environment</h2>
<h3>PRIZES<h3>
<ul>
<li>1st place Rs. 10,000/=</li>
<li>2nd place Rs. 7,500/=</li>
<li>3rd place Rs. 5,000/=</li>
</ul>
<h3>Entry Form</h3>
<p>Please fill and submit this <a href="form.html" target="_blank">online entry form</a> to enter the competition.</p>
</body>
</html>
b)
<html>
<head>
<meta charset="utf-8">
<title>Entry Form</title>
</head>
<body>
<h1>Art Competition Online Entry Form 2017</h1>
<h3>Theme:Litter on the environment</h3>
<form method="get" action="abc.php">
Name: <input type="text" name="name">
<p>Gender:
<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="female">Female
</p>
<p>Grade Category
<select name="ageGroup">
<option value="g1">Grade 1-2</option>
<option value="g2">Grade 3-6</option>
<option value="g3">Grade 7-10</option>
<option value="g4">Grade 11-13</option>
</select>
</p>
<p>Art media </p>
<input type="checkbox" name="media1" value="Colour">Water Colurs <br>
<input type="checkbox" name="media2" value="Pencils">Colur Pencils<br>
<input type="checkbox" name="media3" value="Crayon">Crayon<br>
<input type="checkbox" name="media4" value="Chalk">Chalk<br>
<p> <input type="reset" value="Clear your Entries"></p>
<p> <input type="submit" value="Submit"></p>
</form>
</body>
</html>
No comments:
Post a Comment