Lab Report :-01
Course Code: CSE 413
Course Title: Web Engineering Lab
Submitted To:
Name: Monthasir Delwar Afnan
Designation: Lecturer
Department: Department of Computer Science and
Engineering
Daffodil International University
Submitted By:
Name: Rakibul Islam Khan
ID: 221-15-5980
Section:-61_U2
Department: Department of Computer Science and
Engineering
Daffodil International University
Experiment name:-Introduction to HTML and CSS
Introduction:-HTML (HyperText Markup Language) is the standard markup language used to
create and structure content on the web, such as text, images, links, tables, and forms. CSS
(Cascading Style Sheets) is used to style and layout HTML elements, allowing control over
fonts, colors, spacing, animations, and responsiveness.
In Lab 01, we learned the basic structure of HTML documents and explored core elements like
lists, paragraphs, tables, forms, and the difference between block and inline elements. In Lab 02,
we explored how CSS is used to style HTML using inline, internal, and external styles, and
learned about selectors, specificity rules, the box model, and animations. These labs laid the
foundation for building structured and visually styled web pages.
Implementation and Outputs:-
1. Basic Web Page Structure:
<!DOCTYPE html>
<html>
<head>
<title>Lab Report 1</title>
</head>
<body>
<h1>heading part</h1>
<p>paragraph part.</p>
</body>
</html>
Description: This basic HTML document sets up the fundamental structure of a web page using
the <!DOCTYPE html> declaration. The <head> contains metadata and the title, while the
<body> contains visible content like headings and paragraphs.
Output:-
2. Lists: Ordered and Unordered
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Description: The <ol> tag creates a numbered (ordered) list, while <ul> creates a bulleted
(unordered) list. Each item is wrapped in <li> tags.
Output:-
3. Block vs Inline Elements
<p style="border: 1px solid black">Hello World</p>
<p>This is an inline <span style="border: 1px solid black">Hello world!</span> element inside
a paragraph</p>
Description: <p> is a block-level element that takes the full width and starts on a new
line. <span> is an inline element that fits within a line of text and only takes as much width as its
content requires.
4. Table Tag
<style>
th, td {
border: 1px solid black;
}
</style>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Abdullah</td>
<td>Hasan</td>
</tr>
<tr>
<td>Fatimah</td>
<td>Hamid</td>
</tr>
</table>
Description: This code creates a table with borders. <th> tags define header cells, while <td>
defines standard cells. Styling is applied using CSS inside a <style> tag.
Output:-
5.Form:-
<form method="get" action="/anotherpage.html">
<label for="my_name">Name:</label><br>
<input type="text" id="my_name"><br><br>
<label for="password">Password:</label><br>
<input type="password" id="password"><br><br>
<span>Role:</span><br>
<input type="radio" id="student" value="s" name="role">
<label for="student">Student:</label><br>
<input type="radio" id="teacher" value="t" name="role">
<label for="teacher">Teacher:</label><br><br>
<input type="submit" value="submit">
Description:
This form collects a user's name and password using input fields, and allows them to select a role
(either Student or Teacher) using radio buttons. The form uses the GET method, which sends the
form data via the URL to the page /anotherpage.html when submitted. This is a basic but
functional structure for collecting user credentials and preferences.
Output:-
6.Favourites actors using table:-
<!DOCTYPE html>
<html>
<head>
<title>Favorite Actors</title>
<style>
table {
border-collapse: collapse;
width: 80%;
margin: 20px auto;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
img {
width: 50px;
height: auto;
}
</style>
</head>
<body>
<h1>Favorite Actors</h1>
<table>
<thead>
<tr>
<th>No.</th>
<th>Image</th>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Hobby</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><img
src="https://upload.wikimedia.org/wikipedia/commons/e/e8/Denzel_Washington_2018.jpg"
alt="Denzel Washington"></td>
<td>Denzel</td>
<td>Washington</td>
<td>67</td>
<td>Swimming</td>
</tr>
<tr>
<td>2</td>
<td><img
src="https://upload.wikimedia.org/wikipedia/commons/2/25/Leonardo_DiCaprio_2014.jpg"
alt="Leonardo DiCaprio"></td>
<td>Leonardo</td>
<td>DiCaprio</td>
<td>47</td>
<td>Cooking</td>
</tr>
<tr>
<td>3</td>
<td><img
src="https://upload.wikimedia.org/wikipedia/commons/6/66/Tom_Hanks_2016.jpg" alt="Tom
Hanks"></td>
<td>Tom</td>
<td>Hanks</td>
<td>65</td>
<td>Dixsing</td>
</tr>
<tr>
<td>4</td>
<td><img
src="https://upload.wikimedia.org/wikipedia/commons/3/33/Tom_Cruise_by_Gage_Skidmore_2
.jpg" alt="Tom Cruise"></td>
<td>Tom</td>
<td>Cruise</td>
<td>59</td>
<td>Fixing</td>
</tr>
<tr>
<td>5</td>
<td><img
src="https://upload.wikimedia.org/wikipedia/commons/4/4c/Brad_Pitt_2019_by_Glenn_Francis.
jpg" alt="Brad Pitt"></td>
<td>Brad</td>
<td>Pitt</td>
<td>58</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
Output:-
6. Inline CSS
<!DOCTYPE html>
<html>
<head></head>
<body style="background-color: lightblue;">
<h1 style="color:white;text-align: center;">My First CSS at CSE482</h1>
<p style="font-family: verdana; font-size: 20px;">This is the 1st para.</p>
<p style="font-family: verdana; font-size: 20px;">This is the 2nd para.</p>
</body>
</html>
Description:
• Styling is applied directly inside each HTML tag using the style attribute.
• Not scalable for large projects due to repetition and difficulty in maintenance.
Ouput:-
7. External CSS:-
File: style.css
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}
File: external.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My First CSS at CSE482</h1>
<p>This is the 1st para.</p>
<p>This is the 2nd para.</p>
</body>
</html>
Description:
• CSS is stored in a separate file and linked using <link>.
• Reusable and browser caches the styles for better performance.
Output:-
8. 7. CSS Selectors and Specificity
<!DOCTYPE html>
<html>
<head>
<style>
#demo { color: blue; }
.test { color: green; }
p { color: red; }
</style>
</head>
<body>
<p id="demo" class="test" style="color: pink;">Ki ache duniya?</p>
</body>
</html>
Description:
• Inline CSS has the highest specificity, so the color appears pink.
• Removing inline style would make the text blue due to ID selector.
Output:-
9. Box Model
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 30rem;
border: 15px solid green;
border-radius: 2rem;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Padding, margin, border and border radius</h2>
<div>
This is box’s content. 50px padding, 20px margin, 15px green border and a border radius of
2rem.
</div>
</body>
</html>
Description:
• Demonstrates padding, margin, border, and radius.
• rem, em, %, px define dimensions relative to font size or parent.
Output:-
10. Animation:-
**File: **mystyle.css
div {
background-color: red;
width: 10rem;
height: 10rem;
text-align: center;
position: relative;
animation-name: my_animation;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate;
}
@keyframes my_animation {
0% { background-color: red; left: 0px; top: 0px; }
25% { background-color: yellow; left: 200px; top: 0px; }
50% { background-color: blue; left: 200px; top: 200px; }
75% { background-color: green; left: 0px; top: 200px; }
100% { background-color: red; left: 0px; top: 0px; }
}
File: **animation.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h2>Animation Test Lab</h2>
<div>I am animated!</div>
</body>
</html>
Description:-
@keyframes Rule – Defines the sequence of frames or steps of the animation. Each percentage
(like 0%, 50%, 100%) indicates a point in the animation timeline and what style should apply at
that point.
Animation Properties – These are applied to an element using CSS, such as:
• animation-name: The name of the keyframes to apply
• animation-duration: Total time of the animation
• animation-iteration-count: How many times it repeats
• animation-direction: Whether it runs forward, reverse, or alternates
Output:-
Conclusion:-
HTML and CSS are the foundational technologies for building web pages. HTML provides the
structure and content of a webpage, while CSS controls its presentation and layout. Through this
lab, we explored different styling techniques including inline, in-file, and external CSS, and
learned how to use selectors, the box model, and animations. These skills help create visually
appealing and responsive websites. Mastering HTML and CSS is essential for any aspiring web
developer as they form the backbone of modern web design.
