Content Page
1. HTML Fundamentals
2. HTML Links and Lists
3. HTML Images
4. HTML Page Structuring (Div/Span, Anchor Navigation, Semantic Tags)
5. HTML Tables
6. HTML Forms
7. CSS Box Model
8. CSS Position
9. CSS Class/ID Usage
10. CSS Flexbox and Grid
11. JavaScript Loops and Conditions
12. JavaScript Functions and Arrays
Experiment NO : 1
Experiment Name: HTML Fundamentals
Objectives:
• To understand the structure of an HTML document.
• To learn how to use basic tags for headings, paragraphs, and text formatting.
Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Fundamentals</title>
</head>
<body>
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<p>This is a paragraph of text.</p>
<p><b>Bold text</b> and <i>italic text</i> can be used for formatting.</p>
<p><u>Underlined text</u> is also possible.</p>
</body>
</html>
Output:
Experiment No.: 2
Experiment Name: HTML Links and Lists
Objectives:
• To learn how to create hyperlinks using the <a> tag.
• To understand how to structure ordered and unordered lists in HTML.
Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Links and Lists</title>
</head>
<body>
<h2>Hyperlink Example</h2>
<p>Visit <a href="[Link]
<h2>Unordered List</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
<h2>Ordered List</h2>
<ol>
<li>Step One</li>
<li>Step Two</li>
<li>Step Three</li>
</ol>
</body>
</html>
Output:
Experiment No.: 3
Experiment Name: HTML Images
Objectives:
• To learn how to insert images into a webpage using the <img> tag.
• To understand the use of attributes like src, alt, width, and height.
Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Links and Lists</title>
</head>
<body>
<h2>Image Example</h2>
<img src="[Link]" height="200" width="300"
> <br><br>
<img src="[Link]" height="200" width="300"
style="border-radius: 50% ; border:50px" >
</body>
</html>
Output:
Experiment No.: 4
Experiment Name: HTML Page Structuring (Div/Span, Anchor Navigation, Semantic Tags)
Objectives:
• To learn how to structure a webpage using <div> and <span>.
• To understand anchor navigation for linking within a page.
• To explore semantic tags like <header>, <section>, and <footer>.
Code:
#Div/Span:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="background-color: lightblue; padding: 10px;">
<h2>About Me</h2>
<p>I love coding and web design.</p>
<p>I enjoy <span style="color:red;">HTML</span> and <span
style="color:green;">CSS</span>.</p>
</div>
</body>
</html>
Output:
#Anchor Navigation:
<!DOCTYPE html>
<html>
<head>
<title>Anchor Navigation Example</title>
</head>
<body>
<!-- Navigation -->
<nav>
<a href="#about">About</a> |
<a href="#services">Services</a> |
<a href="#contact">Contact</a>
</nav>
<!-- Sections -->
<section id="about">
<h2>About Us</h2>
<p>We are a web development company.</p>
</section>
<section id="services">
<h2>Our Services</h2>
<p>We provide HTML, CSS, and JavaScript training.</p>
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>Email: info@[Link]</p>
</section>
</body>
</html>
Output:
#Semantic tags:
<!DOCTYPE html>
<html>
<head>
<title>Semantic Tags Example</title>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<a href="#home">Home</a> |
<a href="#about">About</a>
</nav>
</header>
<main>
<section id="home">
<h2>Welcome</h2>
<p>This is the main content of the page.</p>
</section>
<article>
<h2>Latest Blog Post</h2>
<p>Semantic HTML improves accessibility and SEO.</p>
</article>
<aside>
<p>Related links and ads go here.</p>
</aside>
</main>
<footer>
<p>© 2026 My Website</p>
</footer>
</body>
</html>
Output:
Experiment No.: 5
Experiment Name: HTML Tables
Objectives:
• To learn how to create and format tables using HTML.
• To understand the use of <table>, <tr>, <th>, and <td> tags.
Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<h2>Student Information Table</h2>
<table border="1" cellpadding="8" cellspacing="0">
<tr>
<th>Student Name</th>
<th>Roll No</th>
<th>Department</th>
</tr>
<tr>
<td>Lamia</td>
<td>01</td>
<td>Computer Science</td>
</tr>
<tr>
<td>Rafi</td>
<td>02</td>
<td>Information Technology</td>
</tr>
<tr>
<td>Nusrat</td>
<td>03</td>
<td>Software Engineering</td>
</tr>
</table>
</body>
</html>
Output:
Experiment No.: 6
Experiment Name: HTML Forms
Objectives:
• To learn how to create forms for user input.
• To understand the use of <form>, <input>, <textarea>, <select>, and <button> tags.
Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<h2>Registration Form</h2>
<form action="[Link]" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<p>Gender:</p>
<input type="radio" id="male" name="gender" value="Male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="Female">
<label for="female">Female</label><br><br>
<label for="dept">Department:</label>
<select id="dept" name="dept">
<option value="CSE">Computer Science</option>
<option value="IT">Information Technology</option>
<option value="SE">Software Engineering</option>
</select><br><br>
<label for="comments">Comments:</label><br>
<textarea id="comments" name="comments" rows="4" cols="30"></textarea><br><br>
<button type="submit">Register</button>
</form>
</body>
</html>
Output:
Experiment No.: 7
Experiment Name: CSS Box Model
Objectives:
• To understand how margin, border, padding, and content form the box model.
• To learn how CSS controls spacing and layout around elements.
Code:
<!DOCTYPE html>
<html>
<head>
<title>CSS Box Model</title>
<style>
.box {
width: 200px;
height: 100px;
margin: 20px;
padding: 15px;
border: 50px solid blue;
background-color: lightyellow;
</style>
</head>
<body>
<h2>CSS Box Model Example</h2>
<div class="box">
This is the content inside the box.
</div>
</body>
</html>
Output:
Experiment No.: 8
Experiment Name: CSS Position
Objectives:
• To understand how the position property controls element placement.
• To learn the difference between static, relative, absolute, and fixed positioning.
Code:
<!DOCTYPE html>
<html>
<head>
<title>CSS Position Small Boxes</title>
<style>
.container {
position: relative; /* important for absolute positioning */
width: 400px;
height: 250px;
border: 2px solid black;
margin: 20px auto;
background-color: #f9f9f9;
.box {
width: 100px;
height: 60px;
font-size: 14px;
font-weight: bold;
color: white;
display: flex;
align-items: center;
justify-content: center;
.static {
position: static; /* default */
background-color: steelblue;
margin: 10px;
.relative {
position: relative;
top: 20px; /* moves down */
left: 30px; /* moves right */
background-color: seagreen;
.absolute {
position: absolute;
top: 100px; /* positioned inside container */
right: 20px;
background-color: crimson;
.fixed {
position: fixed;
bottom: 10px; /* pinned to viewport */
right: 10px;
background-color: goldenrod;
</style>
</head>
<body>
<h2>CSS Position Demonstration (Small Boxes)</h2>
<div class="container">
<div class="box static">Static</div>
<div class="box relative">Relative</div>
<div class="box absolute">Absolute</div>
</div>
<div class="box fixed">Fixed</div>
</body>
</html>
Output:
Experiment No.: 9
Experiment Name: CSS Class and ID Usage
Objectives:
• To understand the difference between class selectors and ID selectors in CSS.
• To learn how to apply styles using . (class) and # (id).
Code:
<!DOCTYPE html>
<html>
<head>
<title>CSS Class and ID</title>
<style>
.highlight {
background-color: yellow;
color: black;
padding: 10px;
#special {
background-color: lightblue;
color: darkblue;
font-weight: bold;
padding: 10px;
</style>
</head>
<body>
<h2>CSS Class and ID Example</h2>
<p class="highlight">This paragraph uses a CLASS style.</p>
<p class="highlight">Another paragraph with the same CLASS style.</p>
<p id="special">This paragraph uses an ID style.</p>
</body>
</html>
Output:
Experiment No.: 10
Experiment Name: CSS Flexbox and CSS Grid
Objectives:
• To understand how Flexbox arranges elements in one dimension (row or column).
• To understand how Grid arranges elements in two dimensions (rows and columns).
• To compare Flexbox vs Grid for layout design.
Code :
#Flexbox:
<!DOCTYPE html>
<html>
<head>
<title>CSS Flexbox Example</title>
<style>
.flex-container {
display: flex;
justify-content: space-around; /* spacing between items */
align-items: center; /* vertical alignment */
background-color: lightblue;
padding: 20px;
.flex-item {
background-color: steelblue;
color: white;
padding: 20px;
width: 100px;
text-align: center;
</style>
</head>
<body>
<h2>Flexbox Layout</h2>
<div class="flex-container">
<div class="flex-item">Box 1</div>
<div class="flex-item">Box 2</div>
<div class="flex-item">Box 3</div>
</div>
</body>
</html>
Output:
#Grid:
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
gap: 20px; /* spacing between boxes */
background-color: lightgreen;
padding: 20px;
.grid-item {
background-color: seagreen;
color: white;
padding: 20px;
text-align: center;
</style>
</head>
<body>
<h2>Grid Layout</h2>
<div class="grid-container">
<div class="grid-item">Box A</div>
<div class="grid-item">Box B</div>
<div class="grid-item">Box C</div>
<div class="grid-item">Box D</div>
<div class="grid-item">Box E</div>
<div class="grid-item">Box F</div>
</div>
</body>
</html>
Output:
Experiment No.: 11
Experiment Name: JavaScript Loops and Conditions
Objectives:
• To learn how to control program flow using conditional statements (if, else if, else).
• To understand how loops (for, while, do-while) repeat tasks.
• To practice combining loops and conditions for problem solving.
Code :
#Condition:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Conditions</title>
</head>
<body>
<h2>JavaScript Conditions Example</h2>
<script>
let age = 18;
if (age < 18) {
[Link]("You are not eligible to vote.<br>");
} else if (age === 18) {
[Link]("You just became eligible to vote!<br>");
} else {
[Link]("You are eligible to vote.<br>");
</script>
</body>
</html>
Output:
#Loops:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Loops</title>
</head>
<body>
<h2>JavaScript Loops Example</h2>
<script>
for (let i = 1; i <= 5; i++) {
[Link]("for loop: " + i + "<br>");
let j = 1;
while (j <= 3) {
[Link]("While loop : " + j + "<br>");
j++;
let k = 1;
do {
[Link]("Do-while loop : " + k + "<br>");
k++;
} while (k <= 2);
</script>
</body>
</html>
Output:
Experiment No.: 12
Experiment Name: JavaScript Functions and Arrays
Objectives:
• To learn how to define and use functions in JavaScript.
• To understand how to store and access multiple values using arrays.
• To practice combining functions and arrays for problem solving.
Code:
#Functions:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Functions</title>
</head>
<body>
<h2>JavaScript Functions Example</h2>
<script>
function greet(name) {
return "Hello, " + name + "!";
[Link](greet("Lamia") + "<br>");
[Link](greet("Rahim") + "<br>");
</script>
</body>
</html>
Output:
#Arrays:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Arrays with Numbers</title>
</head>
<body>
<h2>JavaScript Array Example</h2>
<script>
let numbers = [10, 20, 30, 40, 50];
[Link]("First number: " + numbers[0] + "<br>");
[Link]("Last number: " + numbers[[Link] - 1] + "<br>");
for (let i = 0; i < [Link]; i++) {
[Link]("Number " + (i+1) + ": " + numbers[i] + "<br>");
let sum = 0;
for (let i = 0; i < [Link]; i++) {
sum += numbers[i];
[Link]("Sum of all numbers = " + sum);
</script>
</body>
</html>
Output: