Scribd
Upload
21 views

HTML Lab Manual

Uploaded by

vidhak1.o
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

HTML Lab Manual

Uploaded by

vidhak1.o
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

HTML Lab Manual: Practical Exercises

Practical 1: HTML Tables

Scenario 1: Computer Science (Displaying Student Records)

Create a table to display student details like Roll Number, Name, Course, and Marks for a subject.

Solution:

<!DOCTYPE html>
<html>
<head>
<title>Student Records</title>
</head>
<body>
<h1>Student Details</h1>
<table border="1">
<tr>
<th>Roll Number</th>
<th>Name</th>
<th>Course</th>
<th>Marks</th>
</tr>
<tr>
<td>001</td>
<td>Alice</td>
<td>Computer Science</td>
<td>85</td>
</tr>
<tr>
<td>002</td>
<td>Bob</td>
<td>Information Technology</td>
<td>78</td>
</tr>
</table>
</body>
</html>

Output:
Scenario 2: Real-World Problem (Price List of a Restaurant)

Create a table to display the menu of a restaurant with Item Name, Category, and Price.

Solution:

<!DOCTYPE html>
<html>
<head>
<title>Restaurant Menu</title>
</head>
<body>
<h1>Restaurant Menu</h1>
<table border="1">
<tr>
<th>Item Name</th>
<th>Category</th>
<th>Price</th>
</tr>
<tr>
<td>Margherita Pizza</td>
<td>Vegetarian</td>
<td>$12</td>
</tr>
<tr>
<td>Chicken Burger</td>
<td>Non-Vegetarian</td>
<td>$10</td>
</tr>
</table>
</body>
</html>

Output:
Practical 2: HTML Lists (Navigation Pane)

Scenario 1: Computer Science (Course Navigation Pane)

Create a navigation pane with an unordered list for a course management system.

Solution:

<!DOCTYPE html>
<html>
<head>
<title>Course Navigation</title>
</head>
<body>
<h1>Course Navigation</h1>
<ul>
<li><a href="#introduction">Introduction to Programming</a></li>
<li><a href="#data_structures">Data Structures</a></li>
<li><a href="#algorithms">Algorithms</a></li>
</ul>
</body>
</html>

Output:
Scenario 2: Real-World Problem (E-commerce Categories)

Create a navigation pane for an e-commerce website with an ordered list for categories.

Solution:

<!DOCTYPE html>
<html>
<head>
<title>E-commerce Categories</title>
</head>
<body>
<h1>Categories</h1>
<ol>
<li><a href="#electronics">Electronics</a></li>
<li><a href="#fashion">Fashion</a></li>
<li><a href="#home_appliances">Home Appliances</a></li>
</ol>
</body>
</html>

Output:
Practical 3: HTML Forms

Scenario 1: Computer Science (Student Registration Form)

Create a student registration form with fields for Name, Email, Course, and Password.

Solution:

<!DOCTYPE html>
<html>
<head>
<title>Student Registration Form</title>
</head>
<body>
<h1>Student Registration</h1>
<form>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br><br>

<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br><br>

<label for="course">Course:</label><br>
<input type="text" id="course" name="course"><br><br>

<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br><br>

<input type="submit" value="Register">


</form>
</body>
</html>

Output:
Scenario 2: Real-World Problem (Contact Us Form for a Business Website)

Create a "Contact Us" form with fields for Name, Email, Subject, and Message.

Solution:

<!DOCTYPE html>
<html>
<head>
<title>Contact Us Form</title>
</head>
<body>
<h1>Contact Us</h1>
<form>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br><br>

<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br><br>

<label for="subject">Subject:</label><br>
<input type="text" id="subject" name="subject"><br><br>

<label for="message">Message:</label><br>
<textarea id="message" name="message"></textarea><br><br>

<input type="submit" value="Send">


</form>
</body>
</html>

Output:
Practical 4: HTML Layout Design

Scenario 1: Computer Science (Dashboard Layout for Admin Panel)

Create a simple layout for an admin dashboard using divs and CSS for layout.

Solution:

<!DOCTYPE html>
<html>
<head>
<title>Admin Dashboard</title>
<style>
.header, .footer {
background-color: #f1f1f1;
text-align: center;
padding: 10px;
}
.menu {
width: 20%;
float: left;
background-color: #f9f9f9;
padding: 15px;
}
.content {
width: 75%;
float: right;
padding: 15px;
}
</style>
</head>
<body>
<div class="header">
<h1>Admin Dashboard</h1>
</div>
<div class="menu">
<h2>Menu</h2>
<ul>
<li><a href="#users">Users</a></li>
<li><a href="#settings">Settings</a></li>
</ul>
</div>
<div class="content">
<h2>Welcome Admin</h2>
<p>Here is the overview of the admin panel.</p>
</div>
<div class="footer">
<p>Footer Information</p>
</div>
</body>
</html>
Output:
Scenario 2: Real-World Problem (Portfolio Website Layout)

Design a basic layout for a portfolio website with sections for About, Projects, and Contact.

Solution:

<!DOCTYPE html>
<html>
<head>
<title>Portfolio Website</title>
<style>
.header, .footer {
background-color: #f1f1f1;
text-align: center;
padding: 10px;
}
.sidebar {
width: 25%;
float: left;
padding: 15px;
}
.main-content {
width: 70%;
float: right;
padding: 15px;
}
</style>
</head>
<body>
<div class="header">
<h1>My Portfolio</h1>
</div>
<div class="sidebar">
<h2>About Me</h2>
<p>A brief introduction about myself.</p>
</div>
<div class="main-content">
<h2>Projects</h2>
<p>Details about my projects.</p>
<h2>Contact</h2>
<p>Contact information here.</p>
</div>
<div class="footer">
<p>Footer Information</p>
</div>
</body>
</html>
Output:
Practical 5: HTML Tables, Lists, Forms, and Layout Combined

Scenario 1: Computer Science (Student Portal Interface)

Design a student portal interface with a navigation pane, student information table, and a form for
feedback.

Solution:

<!DOCTYPE html>
<html>
<head>
<title>Student Portal</title>
<style>
.header, .footer {
background-color: #f1f1f1;
text-align: center;
padding: 10px;
}
.menu {
width: 20%;
float: left;
background-color: #f9f9f9;
padding: 15px;
}
.content {
width: 75%;
float: right;
padding: 15px;
}
</style>
</head>
<body>
<div class="header">
<h1>Student Portal</h1>

</div>
<div class="menu">
<ul>
<li><a href="#profile">Profile</a></li>
<li><a href="#courses">Courses</a></li>
<li><a href="#grades">Grades</a></li>
</ul>
</div>
<div class="content">
<h2>Student Information</h2>
<table border="1">
<tr>
<th>Roll Number</th>
<th>Name</th>
<th>Course</th>
<th>Marks</th>
</tr>
<tr>
<td>101</td>
<td>John</td>
<td>Computer Science</td>
<td>85</td>
</tr>
</table>
<h2>Feedback Form</h2>
<form>
<label for="feedback">Your Feedback:</label><br>
<textarea id="feedback" name="feedback"></textarea><br><br>
<input type="submit" value="Submit">
</form>
</div>
<div class="footer">
<p>Footer Information</p>
</div>
</body>
</html>

Output:
Scenario 2: Real-World Problem (Online Shopping Website Layout)

Create an online shopping interface with a navigation list for categories, a product table, and a form
to contact the seller.

Solution:

<!DOCTYPE html>
<html>
<head>
<title>Shopping Website</title>
<style>
.header, .footer {
background-color: #f1f1f1;
text-align: center;
padding: 10px;
}
.menu {
width: 20%;
float: left;
background-color: #f9f9f9;
padding: 15px;
}
.content {
width: 75%;
float: right;
padding: 15px;
}
</style>
</head>
<body>
<div class="header">
<h1>Online Shopping</h1>
</div>
<div class="menu">
<h2>Categories</h2>
<ul>
<li><a href="#electronics">Electronics</a></li>
<li><a href="#clothing">Clothing</a></li>
<li><a href="#home_appliances">Home Appliances</a></li>
</ul>
</div>
<div class="content">
<h2>Products</h2>
<table border="1">
<tr>
<th>Product Name</th>
<th>Category</th>
<th>Price</th>
</tr>
<tr>
<td>Laptop</td>
<td>Electronics</td>
<td>$800</td>
</tr>
</table>
<h2>Contact Seller</h2>
<form>
<label for="message">Message to Seller:</label><br>
<textarea id="message" name="message"></textarea><br><br>
<input type="submit" value="Send">
</form>
</div>
<div class="footer">
<p>Footer Information</p>
</div>
</body>
</html>

Output:

You might also like