Scribd
Upload
505 views

Kerala HSS CS Lab HTML Sample Programs

The document contains the source code and output for various HTML files. This includes files that demonstrate tables, forms, lists, and links. The files show how to design webpages with these basic HTML elements.

Uploaded by

FarseenAbdulSalam
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
505 views

Kerala HSS CS Lab HTML Sample Programs

The document contains the source code and output for various HTML files. This includes files that demonstrate tables, forms, lists, and links. The files show how to design webpages with these basic HTML elements.

Uploaded by

FarseenAbdulSalam
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

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:[email protected]>[email protected]</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: [email protected]

You might also like