Kerala HSS CS Lab
HTML Source Code and Output
By Farzeen | My Website
More Downloads | Project Website
01-TABLE01.HTML source
<!-Design a webpage containing tables as below
Terrestrial Planets (Source:NASA)
_______________________________________
| Planet
| Day length | Year length |
|
| (earth hrs) | (earth days)|
|__________|______________|_____________|
| Mercury | 1408
| 88
|
| Venus
| 5832
| 224.7
|
| Earth
| 24
| 365.26
|
| Mars
| 25
| 687
|
|__________|______________|_____________|
-->
<html>
<head> <title> Terrestrial Planets </title>
<body>
<H2> Terrestrial Planets (Source: Nasa) </H2>
<table border=1 cellspacing=5 cellpadding=10>
<tr>
<th>Planet</th>
<th>Day length (earth hrs) </th>
<th>Year length (earth days) </th>
</tr>
<tr>
<td>Mercury</td>
<td>1408</td>
<td>88</td>
</tr>
<tr>
<td>Venus</td>
<td>5832</td>
<td>224.7</td>
</tr>
<tr>
<td>Earth</td>
<td>24</td>
<td>365.26</td>
</tr>
<tr>
<td>Mars</td>
<td>25</td>
<td>687</td>
</tr>
</table>
</body>
</html>
01-TABLE01.HTML output
Terrestrial Planets (Source: Nasa)
Planet
Day length (earth hrs)
Year length (earth days)
Mercury
1408
88
Venus
5832
224.7
Earth
24
365.26
Mars
25
687
02-FORM01.HTML source
<!-Design an HTML form to accept the curriculum
vitae of a job applicant.
The
*
*
*
*
*
form should provide
Name
Address in multiple
Gender using option
Nationality using a
Hobbies using check
facility to accept:
lines
button
list box
boxes
The form should provide buttons to save and clear
the contents of text boxes
-->
<html>
<head> <title> Job Application </title> </head>
<body>
<!-- Students can ignore the style tag. It is used to make the page look more beautiful -->
<style>
body { font-family: Fantasque Sans Mono, Ubuntu Mono, monospace; }
input[type=text] {margin-left:5em;height:2em; width: 15em;}
select {margin-left:0.5em;height:2em; width: 15em;}
input[type=submit], input[type=reset] { width:5em; height:2em;}
textarea
{ margin-left:9.5em;height:5em; width: 15em;}
br { height:2em; margin:0.8em;}
</style>
<h1> Job Application </h1>
<form name=form1 action=apply.php method=POST>
Name: <input type=text name=name> <br>
Address: <br>
<textarea name=name></textarea> <br>
Gender:
Male <input type=radio name=gender value=Male>
Female <input type=radio name=gender value=Female>
<br>
Nationality:
<select name=nationality>
<option>Indian</option>
<option>Pakistan</option>
<option>USA</option>
<option>UK</option>
<option>China</option>
<option>Other</option>
</select>
<br>
Hobbies: <br>
<input type=checkbox name=hobby_music> Music <br>
<input type=checkbox name=hobby_read> Read Books<br>
<input type=checkbox name=hobby_sports> Sports <br>
<input type=submit value=Submit> <input type=reset value=Clear>
</form>
</body>
</html>
02-FORM01.HTML output
Job Application
Name:
Address:
Gender: Male
Female
Nationality: Indian
Hobbies:
Music
Read Books
Sports
Submit
Clear
03-FORM02.HTML source
<!-Imagine that your school is hosting an inter-school IT fair. Design an HTML form for accepting registrations.
The form page should contain facility to enter:
* School name * User name * Password * Mobile phone no.
It should also contain a button for saving and clearing the details entered
-->
<html>
<head> <title> Registration - Interschool IT Fair </title> </head>
<body>
<!-- Students can ignore style tag -->
<style>
body {font-family: Fantasque Sans Mono, Ubuntu Mono, monospace;}
input { width:10em; height:2em; margin:0.2em;}
</style>
<h1>Registration - Interschool IT Fair</h1>
<form name=form1 action=register.php method=POST>
School name: <input type=text name=school_name> <br>
User name : <input type=text name=user_name> <br>
Password
: <input type=password name=pw> <br>
Repeat Password: <input type=password name=pw2> <br>
Mobile No.
: <input type=text name=mobile> <br> <br>
<input type=submit value=Submit> <input type=reset value=Clear>
</form>
</body>
</html>
03-FORM02.HTML output
Registration - Interschool IT Fair
School name:
User name :
Password :
Repeat Password:
Mobile No. :
Submit
Clear
04-LIST01.HTML source
<!-Design a webpage showing tourist destinations in kerala
Tourist Department of Kerala
============================
1. Beach
a) Kovalam
b) Muzhappilangad
c) Kappad
2. Hill Station
a) Munnar
b) Wayanad
c) Gavi
3. Wild Life
a) Iravikulam
b) Muthanga
c) Kadalundi
-->
<html>
<head> <title> Tourist Department of Kerala </title> </head>
<body>
<!-- students can ignore style tag -->
<style> body {font-family: Fantasque Sans Mono, Ubuntu Mono,monospace;} </style>
<H1><u>Tourist Department of Kerala </u> </H1>
<ol type=1>
<li> Beach
<ol type=a>
<li> Kovalam </li>
<li> Muzhappilangad </li>
<li> Kappad </li>
</ol>
</li>
<li> Hill Station
<ol type=a>
<li> Munnar </li>
<li> Wayanad </li>
<li> Gavi </li>
</ol>
</li>
<li> Wild Life
<ol type=a>
<li> Iravikulam </li>
<li> Muthanga </li>
<li> Kadalundi </li>
</ol>
</li>
</ol>
</body>
</html>
04-LIST01.HTML output
Tourist Department of Kerala
1. Beach
a. Kovalam
b. Muzhappilangad
c. Kappad
2. Hill Station
a. Munnar
b. Wayanad
c. Gavi
3. Wild Life
a. Iravikulam
b. Muthanga
c. Kadalundi
05-LINK_MAILTO.HTML source
<!-Design a personal webpage for your friend.
It should have a link to hid email address.
-->
<html>
<head> <title> My Webpage </title> </head>
<body>
<style> body {font-family:Fantasque Sans Mono,Ubuntu Mono, monospace; } </style>
<h1> About Me </h1>
Name: Kiran <br>
DOB: 2/2/2000 <br>
Address: <br>
Sooraj <br>
Fort Kochi <br>
Ernakulam <br>
Nationality: Indian <br>
E-Mail: <a href=mailto:kiran@gmail.com>kiran@gmail.com</a>
</body>
</html>
05-LINK_MAILTO.HTML output
About Me
Name: Kiran
DOB: 2/2/2000
Address:
Sooraj
Fort Kochi
Ernakulam
Nationality: Indian
E-Mail: kiran@gmail.com
