Practical Viewer

1 Program 1

Aim (Write on the ruler page)

The first webpage will accept the name of the traveller, date of travel , telephone number . It also has submit button as an image . The second webpage has information about the name of transporter, time , seat no and destination displayed one below the other in the form of unordered list as Name of transporter – Air Asia Time – 09:30 am Seat no – B39 Destination – Delhi Both pages should be interlinked. Create an external stylesheet with relevant tags.

Program (Start from new page after AIM)

body
{
background-color: powderblue;
}
h1
{
color: darkblue;
text-align:center;
text-shadow: 2px 2px 12px #00ddff;
}
h4
{
color: red;
font-family: Arial;
}
h5
{
color:blue;
border: 8px yellow solid;
font-size:20px;
}
a
{
text-decoration:none;
}

Output (Stick on blank page opposite to code)

Diagram needed

2 Program 2

Aim (Write on the ruler page)

page1.html

Program (Start from new page after AIM)

<html>
<head>
<title>TOUR & TRAVELS</title>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
<body>
<h1>
<b>
TOURS & TRAVELS
</b>
</h1>
<h2>
Fill the following form
</h2>
<br>
<form>
<h4>
Name of the traveller  :  <input type="text"
required maxlength="20" size="50">
<br><br>
Date of travel  :  <input type="date">
<br><br>
Telephone number  :  <input type="tel"
pattern='[0-9]{10}'> <br><br>
<center>
<input type="image" src="submitbutton.png" value="Submit"
height="35px" width="170px">
</center>
</h4>
</form>
<center>
<h5>

<a href="page2.html">
Next Page
</a>
</h5>
</center>
</body>
</html>

Output (Stick on blank page opposite to code)

Download Output

3 Program 3

Aim (Write on the ruler page)

page2.html

Program (Start from new page after AIM)

<html>
<head>
<title>TOUR & TRAVELS</title>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
<body>
<h1>
<b>Tours & Travels</b>
</h1>
<h4>
<ul>
<li>Name of transporter - Air Asia
<li>Time - 9:30 am
<li>Seat No - B39
<li>Destination - Delhi
</ul>
</h4>
<center>
<h5>
<a href="page1.html">
Home Page
</a>
</h5>

</center>
</body>
</html>

Output (Stick on blank page opposite to code)

Download Output