SOP 2: Create a webpage using HTML & CSS code to design a web page as the layout
displayed below.
- The top section will display the heading, “Tourist Places” in header. The
section on left has the list of cities. The right-hand side section displays the
tourist places of any one of the cities.
- Use Inline style sheet in the top section to display background color for the
text ‘Tourist places’. Use internal stylesheet for the left and right section with
background color & font styles.
Tourist Places
City Tourist places in Pune
1. Pune . Shanivarwada
2. Banglore . Kelkar Museum
3. Hyderabad . Sinhgad Fort
4. Delhi
CODE:
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tourist Places</title>
<style>
body {
font-family: 'Times New Roman', Times, serif;
}
#s1{
background-color: #eff5a4;
padding: 5px;
width: 50%;
border: 3px solid;
#s2{
background-color: pink;
padding: 5px;
width: 50%;
border: 3px solid;
}
.container{
display: flex;
width: 100%;
border: 1px solid black;
}
</style>
</head>
<body>
<h1 style="background-color: #b3e5fc; color: #d81b60; text-align: center; padding: 10px;
margin: 0; font-size: 24px; border: 2px solid black;">Tourist places</h1>
<div class="container">
<div id="s1">
<h3>City</h3>
<ol>
<li>Pune</li>
<li>Banglore</li>
<li>Hyderabad</li>
<li>Delhi</li>
</ol>
</div>
<div id="s2">
<h2>Tourist places in Pune</h2>
<ul>
<li>Shanivarwada</li>
<li>Kelkar Museum</li>
<li>Sinhgad fort</li>
<li>Rajiv Gandhi Zoological Park</li>
</ul>
</div>
</div>
</body>
</html>
OUTPUT:
SOP 3: Create website using HTML & CSS code to design webpages as follows:
- The 1st web page will accept the name of the traveller, date of travel, telephone
number. It also has a submit button as an image.
- The 2nd web page has information about the name of the transporter, time &
seat number & destination displayed one below the other in the form of
unordered list as
Name of Transporter: Air Asia
Time: 09:30 am
Seat No.: B 39
Destination: Delhi
- Both the pages must be interlinked. Create external Style-sheet with relevant
tags.
CODE:
page1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Travel Details</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Traveller Information</h1>
<form action="page2.html" method="get">
<label for="name">Name of Traveller:</label>
<input type="text" id="name" name="name" required>
<label for="date">Date of Travel:</label>
<input type="date" id="date" name="date" required>
<label for="phone">Telephone Number:</label>
<input type="tel" id="phone" name="phone" required>
<input type="image" src="submit-button.png" height="50px" id="submit-button">
</form>
</div>
</body>
</html>
page2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Transport Details</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Travel Details</h1>
<ul>
<li><strong>Name of Transporter:</strong> Air Asia</li>
<li><strong>Time:</strong> 09:30 AM</li>
<li><strong>Seat No.:</strong> B 39</li>
<li><strong>Destination:</strong> Delhi</li>
</ul>
<p><a href="page1.html">Back to Form</a></p>
</div>
</body>
</html>
style.css
body {
font-family: 'Times New Roman', Times, serif;
background-color: #f2f2f2;
margin: 20px;
padding: 20px;
}
.container {
background-color: white;
padding: 20px;
border-radius: 10px;
width: 400px;
margin: auto;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #333;
}
label {
display: block;
margin-top: 15px;
font-weight: bold;
}
input[type="text"],
input[type="tel"],
input[type="date"] {
width: 100%;
padding: 8px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
#submit-button {
display: block;
margin: 20px auto 0;
border: none;
background: none;
}
ul {
list-style-type: disc;
padding-left: 20px;
line-height: 1.6;
}
OUTPUT:
Page1.html
Page2.html
