Scribd
Upload
7 views

HTML Lab Manual

Uploaded by

vidhak1.o
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

HTML Lab Manual

Uploaded by

vidhak1.o
Copyright
© © All Rights Reserved
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