Scribd
Upload
6 views

Practical 3

The document describes a web page for passenger information using HTML tables, frames, and anchor tags. It includes the HTML code and CSS styling for the page layout and a table to display passenger data. It also includes a booking form within a frame. The document explains each component and how they are used to display passenger information and allow booking.

Uploaded by

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

Practical 3

The document describes a web page for passenger information using HTML tables, frames, and anchor tags. It includes the HTML code and CSS styling for the page layout and a table to display passenger data. It also includes a booking form within a frame. The document explains each component and how they are used to display passenger information and allow booking.

Uploaded by

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

Practical 3

Title: Design Web page for passenger information using HTML table, frame and anchor tags.

Here's a simple example of a passenger information web page using HTML table, frame, and
anchor tags, along with a brief explanation of each component

HTML Code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Passenger Information</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background-color: #f4f4f4;

header {

background-color: #333;

color: #fff;

padding: 20px;

text-align: center;
}

.container {

width: 80%;

margin: 20px auto;

padding: 20px;

background-color: #fff;

border-radius: 8px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

table {

width: 100%;

border-collapse: collapse;

th, td {

padding: 10px;

border-bottom: 1px solid #ddd;

text-align: left;

tr:hover {

background-color: #f2f2f2;

.frame {

margin-top: 20px;

border: 1px solid #ccc;


border-radius: 8px;

padding: 10px;

background-color: #fff;

</style>

</head>

<body>

<header>

<h1>Passenger Information</h1>

</header>

<div class="container">

<table>

<tr>

<th>ID</th>

<th>Name</th>

<th>Age</th>

<th>Gender</th>

<th>Destination</th>

</tr>

<tr>

<td>1</td>

<td>John Doe</td>

<td>35</td>

<td>Male</td>
<td><a href="https://www.destination.com">New York</a></td>

</tr>

<tr>

<td>2</td>

<td>Jane Smith</td>

<td>28</td>

<td>Female</td>

<td><a href="https://www.destination.com">London</a></td>

</tr>

<!-- Add more rows as needed -->

</table>

</div>

<div class="frame">

<h2>Booking Form</h2>

<p>Fill out the form below to book your ticket:</p>

<form action="#">

<label for="name">Name:</label>

<input type="text" id="name" name="name" required><br><br>

<label for="age">Age:</label>

<input type="number" id="age" name="age" required><br><br>

<label for="gender">Gender:</label>

<select id="gender" name="gender" required>

<option value="male">Male</option>

<option value="female">Female</option>
</select><br><br>

<label for="destination">Destination:</label>

<input type="text" id="destination" name="destination" required><br><br>

<input type="submit" value="Book Now">

</form>

</div>

</body>

</html>

Explanation:

HTML Structure:

The structure consists of a <header> and a <div> with the class container for the main content.

Inside the container, there is a <table> element to display passenger information.

Below the table, there is another <div> with the class frame containing a booking form.

Styling with CSS:

CSS is used to style the page, including fonts, colors, margins, padding, and layout.

The .container class sets the width, margin, padding, background color, border radius, and box
shadow for the main content area.

The table and its children (th, td) are styled to have borders, padding, and alignment.

The .frame class styles the booking form with border, padding, and background color.

Table Structure:
The table has a header row (<tr>) with column headers (<th>) for ID, Name, Age, Gender, and
Destination.

Each subsequent row contains data (<td>) for each passenger, including ID, Name, Age, Gender,
and Destination.

The Destination column includes anchor (<a>) tags linking to the destination website.

Booking Form:

The booking form includes input fields for Name, Age, Gender, and Destination, along with a
submit button.

The form action is set to # for demonstration purposes. It should be replaced with the actual
form submission URL.

This example demonstrates the use of HTML table, frame, and anchor tags to create a
passenger information web page with a booking form. You can further enhance the design and
functionality based on your requirements.

You might also like