AIR UNIVERSITY
DEPARTMENT OF ELECTRICAL & COMPUTER ENGINEERING
EXPERIMENT NO. 8
Lab Title: To introduce students to the basics of HTML & inline CSS
Student Name: Talha Sarfraz Reg. No: 243415
Objective: To introduce students to the basics of HTML & CSS and how
to create a simple web page.
LAB ASSESSMENT:
Attributes Excellent Good Average Satisfactory Unsatisfactory
(5) (4) (3) (2) (1)
Ability to Conduct
Experiment
Ability to assimilate the
results
Effective use of lab
equipment and follows the
lab safety rules
Total Marks: Obtained Marks:
LAB REPORT ASSESSMENT:
Attributes Excellent Good Average Satisfactory Unsatisfactory
(5) (4) (3) (2) (1)
Data Presentation
Experiment Results
Conclusion
Total Marks: Obtained Marks:
Date: Signature:
AIR UNIVERISTY, ISLAMABAD
Department of Electrical & Computer Engineering
Lab 08
Items Description
Lab Course Title Lab – Information & Communication Technology
Lab Title To introduce students to the basics of HTML & inline CSS
Objective To introduce students to the basics of HTML & CSS and how
to create a simple web page.
Duration 3 Hours
Operating System/Tools Windows/MS Office/Computer System/ Sublime Text Editor/
Notepad++
Page 1
AIR UNIVERISTY, ISLAMABAD
Department of Electrical & Computer Engineering
LAB TASK 01
<! DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
Width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr: nth-child (even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>Time Table</h2>
<table>
<tr>
<th></th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
</tr>
<tr>
Page 2
AIR UNIVERISTY, ISLAMABAD
Department of Electrical & Computer Engineering
<th rowspan="2">Hours</th>
<td>Science</td>
<td>Maths</td>
<td>Science</td>
<td>Maths</td>
<td>Arts</td>
</tr>
<tr>
<td>Social</td>
<td>History</td>
<td>English</td>
<td>Social</td>
<td>Sports</td>
</tr>
<tr>
<th colspan="6">Lunch</th>
</tr>
<tr>
<th rowspan="2">Hours</th>
<td>Science</td>
<td>Maths</td>
<td>Science</td>
<td>Maths</td>
<td>Project</td>
</tr>
<tr>
<td>Social</td>
<td>History</td>
<td>English</td>
<td>Social</td>
<td></td>
</tr>
Page 3
AIR UNIVERISTY, ISLAMABAD
Department of Electrical & Computer Engineering
</table>
</body>
</html>
Page 4
AIR UNIVERISTY, ISLAMABAD
Department of Electrical & Computer Engineering
Lab Task 2
ITS HTML CODE :
<! DocType html>
<head>
<title>
My Amazing Restaurant
</title>
<title>
Welcome to My Amazing Restaurant
</title>
</head>
<style>
Body {
margin: 0;
background: url('ig.jpg') no-repeat center center fixed;
background-size: cover;
color: white ;
line-height: 1.8;
}
</style>
Page 5
AIR UNIVERISTY, ISLAMABAD
Department of Electrical & Computer Engineering
<h1 style="text-align:center; " "background-color:blue; ">Welcome to My Amazing
Restaurant </h1>
<h2 style="text-align:center; " "background-color:orange; ">Delicious meals made
fresh every day, served with love! </h2>
<h1 style="text-align: center; line-height: 10; color: yellow; text-decoration: underline;
text-decoration-color: red;">Our Menu</h1>
<! -- Menu Section -->
<section id="menu" style="padding: 40px 20px; >
<h2 style="text-align: center; color:green;"></h2>
<div style="display: flex; justify-content: space-around; flex-wrap: wrap; gap:
20px;">
<div style="background-color: cyan; padding: 10px; width: 550px; border-
radius: 34px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
<h3 style="color:green;">Pizza Margherita</h3>
<img src="pizza.jpg" "height=10"width=10">
<p style="font-size: 16px; color:brown;">Classic pizza with fresh mozzarella,
tomatoes, and basil.</p>
</div>
<div style="background-color: cyan; padding: 10px; width: 550px; border-
radius: 34px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
<h3 style="color: green;">Spaghetti Carbonara</h3>
<img src="spegi.jpg" "height=1 "width=1">
<p style="font-size: 16px; color: brown ;"> Traditional Italian pasta with
creamy sauce and pancetta.</p>
</div>
<div style="background-color: cyan; padding: 10px; width: 550px; border-
radius: 34px; box-shadow: 0 4px 6px rgba (0, 0, 0, 0.1) ;">
<h3 style="color: green;" "text-align: center; ">Pasta</h3>
<img src="creamy.jpg" "height=10" "width=10">
<p style="font-size: 16px; color: brown ;"> Crisp romaine lettuce with Caesar
dressing and croutons. </p>
</div>
</div>
</section>
</body> </html>
Page 6
AIR UNIVERISTY, ISLAMABAD
Department of Electrical & Computer Engineering
Lab Task 3
HTML code:
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Profile</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f9;
}
.header {
text-align: center;
margin-bottom: 20px;
padding: 10px;
background-color: #4CAF50;
color: white;
border-radius: 5px;
}
.header h1 {
margin: 0;
}
.section {
margin: 10px 0;
padding: 10px;
background-color: #ffffff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.section h2 {
margin: 0 0 10px;
color: #4CAF50;
}
.table {
width: 100%;
Page 7
AIR UNIVERISTY, ISLAMABAD
Department of Electrical & Computer Engineering
border-collapse: collapse;
}
.table td {
padding: 8px;
border: 1px solid #ddd;
}
.table td:first-child {
font-weight: bold;
background-color: #f0f0f0;
}
ul {
list-style-type: disc;
padding-left: 20px;
}
.footer {
margin-top: 20px;
text-align: center;
color: #888;
font-size: 12px;
}
</style>
</head>
<body>
<div class="header">
<h1>Student Name</h1>
<p>Address here<br>Phone No here</p>
</div>
<div class="section">
<h2>Personal Information</h2>
<table class="table">
<tr>
<td>Date of Birth</td>
<td>Day-Month-Year</td>
</tr>
<tr>
<td>Gender</td>
<td>Your Gender here (Male/Female)</td>
</tr>
<tr>
Page 8
AIR UNIVERISTY, ISLAMABAD
Department of Electrical & Computer Engineering
<td>Religion</td>
<td>Your Religion here</td>
</tr>
<tr>
<td>Nationality</td>
<td>Pakistani</td>
</tr>
<tr>
<td>Email Address</td>
<td>[email protected]</td>
</tr>
<tr>
<td>CNIC</td>
<td>xxxxx-xxxxxxx-x</td>
</tr>
</table>
</div>
<div class="section">
<h2>Skills</h2>
<ul>
<li>Skill 1</li>
<li>Skill 2</li>
<li>Skill 3</li>
</ul>
</div>
<div class="section">
<h2>Hobbies</h2>
<ul>
<li>Hobby 1</li>
<li>Hobby 2</li>
<li>Hobby 3</li>
</ul>
</div>
<div class="footer">
© 2024 Student Profile
</div>
</body>
</html>
Page 9
AIR UNIVERISTY, ISLAMABAD
Department of Electrical & Computer Engineering
WEBPAGE WITH COLOURS:
Page 10
AIR UNIVERISTY, ISLAMABAD
Department of Electrical & Computer Engineering
Conclusion
In conclusion, learning HTML programming in the lab was a valuable experience that provided
a deeper understanding of how web pages are created and structured. We explored essential tags
such as those for headings, paragraphs, links, and images, gaining practical skills in designing
and organizing web content. This hands-on approach helped us see how small details, like proper
syntax and formatting, play a significant role in creating web pages that are both functional and
accessible. The knowledge gained through these exercises serves as a strong starting point for
developing more advanced skills in web development, making this a meaningful step in our
learning journey.
Page 11
