PRACTICAL:-1
Create a web page listing computer lab rules using HTML. The page
should includes:
A main heading(<h1>) titled “Computer Lab Rules”.
A subheading(<h2>) titled “Rules To Follow”.
An unordered list(<ul>) with at least 8 rules for computer lab.
Apply CSS to style the background color, text color and list
appearance.
SOURCE CODE:-
<html>
<head>
<title>Computer Lab Rules</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
body {
background-color: #d2f8d8;
color: #333;
padding: 20px;
}
h1 {
text-align: center;
margin-bottom: 20px;
color: rgb(15, 153, 15);
}
h2 {
text-align: left;
margin-bottom: 15px;
color: rgb(15, 153, 15);
}
ul {
list-style-type: disc;
color: #30c14b;
margin: 0 auto;
padding: 0;
max-width: 600px;
}
li {
margin-bottom: 10px;
padding-left: 20px;
}
</style>
</head>
<body>
<h1>COMPUTER LAB RULES</h1>
<div>
<h2>RULES TO FOLLOW</h2>
<ul>
<li>Please log off after using a computer.</li>
<li>Keep your workspace neat and tidy.</li>
<li>No food or drinks in the lab, please!</li>
<li>Respect everyone’s privacy; don’t peek at their screens.</li>
<li>Don’t download software without permission.</li>
<li>If something’s wrong, let the lab supervisor know.</li>
<li>Use headphones if you’re listening to something.</li>
<li>Always follow the instructions from lab staff.</li>
</ul>
</div>
</body>
</html>
RESULT:-
PRACTICAL:-2
Design a Leave Report webpage that includes:
A table to display leave data (Name, Leave Type, Start Date, End
Date, Status).
A header with a title and description.
The table should have alternating row colors (zebra-striped table).
Apply CSS to style the table with borders, padding, hover effects,
and responsive design.
SOURCE CODE:-
<html>
<head>
<title>Leave Report</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main-container{
max-width: 1000px;
margin: 0 auto;
padding: 20px;
background-color: #c9c6c6;
}
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 50px;
}
header {
text-align: center;
margin-bottom: 10px;
}
h1 {
color: #333;
margin-bottom: 10px;
}
p{
text-align: center;
color: #555;
}
.table-container {
width: 100%;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
table, th, td {
border: 1px solid #ddd;
}
th {
background-color: #0073e6;
color: white;
padding: 12px 15px;
text-align: left;
}
td {
padding: 12px 15px;
text-align: left;
}
tr {
margin-bottom: 20px;
text-align: left;
}
</style>
</head>
<body>
<div class="main-container">
<header>
<h1>LEAVE REPORT</h1>
<p>A detailed report of employee leave sttus</p>
</header>
<div class="table-container">
<table>
<thead>
<tr>
<th>NAME</th>
<th>LEAVE TYPE</th>
<th>START DATE</th>
<th>END DATE</th>
<th>STATUS</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Name">John Doe</td>
<td data-label="Leave Type">Sick Leave</td>
<td data-label="Start Date">2024-09-01</td>
<td data-label="End Date">2024-09-05</td>
<td data-label="Status">Approved</td>
</tr>
<tr>
<td data-label="Name">Jane Smith</td>
<td data-label="Leave Type">Casual Leave</td>
<td data-label="Start Date">2024-09-10</td>
<td data-label="End Date">2024-09-12</td>
<td data-label="Status">Pending</td>
</tr>
<tr>
<td data-label="Name">Emily Davis</td>
<td data-label="Leave Type">Maternity Leave</td>
<td data-label="Start Date">2024-08-15</td>
<td data-label="End Date">2024-11-30</td>
<td data-label="Status">Approved</td>
</tr>
<tr>
<td data-label="Name">Michael Brown</td>
<td data-label="Leave Type">Vacation Leave</td>
<td data-label="Start Date">2024-07-01</td>
<td data-label="End Date">2024-07-15</td>
<td data-label="Status">Rejected</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
PRACTICAL:-3
Create a personal web page using HTML that includes:
A main heading (<h1>) titled "Welcome to My IT Insights".
A subheading (<h2>) titled "About Information Technology".
Several paragraphs (<p>) describing Information Technology,
using <strong>, <em>, and <u> for text formatting.
An image (<img>) related to Information Technology with an alt
attribute.
A link (<a>) to an external IT-related site, such as TechCrunch.
Apply CSS styling to the page, including background color, text
color, link styles, and image styling.
SOURCE CODE:-
<html>
<head>
<title>Welcome to My IT Insights</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #bf4bc5;
color: #333;
padding: 20px;
line-height: 1.6;
}
h1 {
text-align: left;
color: #030303;
margin-bottom: 20px;
}
hr{
margin-bottom: 20px;
}
h2 {
color: #1c1c1d;
margin-bottom: 15px;
}
p{
margin-bottom: 20px;
color: #030303;
}
img {
display: block;
align-self: left;
max-width: 400px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
a{
color: #0073e6;
}
a:hover {
text-decoration: underline;
color: #005bb5;
}
</style>
</head>
<body>
<h1>Welcome to My IT Insights</h1><hr>
<h2>About Information Technology</h2>
<p>Information Technology (IT) is a rapidly evolving field that
encompasses a wide range of technologies used for managing and
processing information. IT involves the use of computers, software,
networks, and databases to store, retrieve, and transmit data
efficiently.</p>
<p>Key areas within IT include <b>software development</b>,<i>
network administration</i>, <u>cybersecurity</u>, and data analysis.
Each of these areas plays a crucial role in the modern technological
landscape, supporting both individual and organizational needs.</p>
<p>In the <b>software development</b> sector, professionals create
and maintain applications and systems that drive various business
processes. <i>Network administrators</i> ensure reliable and secure
communication between devices, while <u>cybersecurity experts</u>
protect against digital threats.</p>
<p>To stay with the latest trends and advancements in IT, I frequently
explore reasource and indstry news. For more detailed insights and
resources on IT, visit my <a href="[Link]
target="_blank">TechCrunch</a> profile</p>
<img src="OIP (1).jpeg" alt="Information Technology Concept">
</body>
</html>
RESULT:-
PRACTICAL:-4
Create a feedback form using HTML and CSS that includes fields for
the user’s name, email, feedback (text area), and a rating (radio buttons
from 1 to 5). Apply basic CSS to style the form, ensuring it is centered
on the page and has a clean, user-friendly appearance.
SOURCE CODE:-
<html>
<head>
<title>Feedback Form</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.feedback-form {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 400px;
}
h2 {
margin-bottom: 20px;
text-align: center;
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}
input[type="text"],
input[type="email"],
textarea {
width: 360px;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
.rating {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.rating label {
font-weight: normal;
}
button {
width: 100%;
padding: 10px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
</style>
</head>
<body>
<form class="feedback-form">
<h2>FEEDBACK FORM</h2>
<label for="name">NAME:</label>
<input type="text" id="name" name="name" required>
<label for="email">EMAIL:</label>
<input type="email" id="email" name="email" required>
<label for="feedback">FEEDBACK:</label>
<textarea id="feedback" name="feedback" rows="5"
required></textarea>
<label>RATE US:</label>
<div class="rating">
<label><input type="radio" name="rating" value="1"
required>1</label>
<label><input type="radio" name="rating" value="2"> 2</label>
<label><input type="radio" name="rating" value="3"> 3</label>
<label><input type="radio" name="rating" value="4"> 4</label>
<label><input type="radio" name="rating" value="5"> 5</label>
</div>
<button type="submit">SUBMIT FEEDBACK</button>
</form>
</body>
</html>
RESULT:-
PRACTICAL:-5
Create a basic home page using HTML that includes a navigation bar
with links to Home, About, Services, and Contact pages, a main content
area with a welcome message and an image, and a footer with a
copyright notice. Apply basic inline CSS styles for layout and design.
SOURCE CODE:-
<html>
<head>
<title>Basic Home Page</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.navbar {
background-color: #1c7ae6;
overflow: hidden;
}
.navbar a {
float: left;
align-self: center;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: #575757;
}
.main-content {
padding: 20px;
margin-left: 100px;
margin-right: 100px;
text-align: left;
}
img {
width: 1300px;
height: 400px;
border-radius: 10px;
margin-right: 100px;
box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2);
}
.footer {
background-color: #1c7ae6;
color: white;
text-align: center;
padding: 10px 0;
position: fixed;
width: 100%;
bottom: 0;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
<div class="main-content">
<h1>Welcome to Our Website!</h1>
<img src="[Link]" alt="Welcome Image">
<p>Hello I'm glad you visited my [Link]'ll find
information about my services, my background, and how you can get in
touch with me. Feel free to browsw around and learn more about what I
have to offer.</p>
<p>This website serves as a platform to showcase my skils,
experiences, and the service I provide. If you have any questions or need
more information, don't hesitate to rech out through the contact
page.</p>
</div>
<div class="footer">
<p>© 2024 My Website. All rights reserved.</p>
</div>
</body>
</html>
RESULT:-