FULL STACK DEVELOPMENT LAB MANUAL
1. Lists, Links and Images:
Aim:
a. Write a HTML program, to explain the working of lists.
Note: It should have an ordered list, unordered list, nested lists and ordered list
in an unordered list and definition lists.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Lists Example</title>
</head>
<body>
<h1>HTML List Types and Examples</h1>
<!-- Ordered List -->
<h2>1. Ordered List</h2>
<p>Steps to start a computer:</p>
<ol>
<li>Connect the power cable</li>
<li>Turn on the power button</li>
<li>Wait for the system to boot</li>
<li>Login to your account</li>
</ol>
<!-- Unordered List -->
<h2>2. Unordered List</h2>
<p>Items to bring to school:</p>
<ul>
<li>Books</li>
<li>Notebook</li>
<li>Pencil Box</li>
<li>Lunch Box</li>
</ul>
<!-- Nested List -->
<h2>3. Nested List (Unordered inside Ordered)</h2>
<p>Daily Routine:</p>
<ol>
<li>Morning
<ul>
<li>Wake up</li>
<li>Brush teeth</li>
<li>Exercise</li>
</ul>
</li>
<li>Afternoon
<ul>
<li>Have lunch</li>
<li>Study</li>
</ul>
</li>
<li>Evening
<ul>
<li>Play outside</li>
<li>Do homework</li>
</ul>
</li>
</ol>
<!-- Ordered List inside Unordered List -->
<h2>4. Ordered List inside an Unordered List</h2>
<p>Favorite Subjects and Topics:</p>
<ul>
<li>Math
<ol>
<li>Algebra</li>
<li>Geometry</li>
<li>Trigonometry</li>
</ol>
</li>
<li>Science
<ol>
<li>Physics</li>
<li>Chemistry</li>
<li>Biology</li>
</ol>
</li>
</ul>
<!-- Definition List -->
<h2>5. Definition List</h2>
<p>Web Technologies:</p>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language used to structure web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets used for styling the appearance of
content.</dd>
<dt>JavaScript</dt>
<dd>A scripting language used to create interactive web pages.</dd>
</dl>
</body>
</html>
Output:
1. Ordered List
Steps to start a computer:
1. Connect the power cable
2. Turn on the power button
3. Wait for the system to boot
4. Login to your account
2. Unordered List
Items to bring to school:
Books
Notebook
Pencil Box
Lunch Box
3. Nested List (Unordered inside Ordered)
Daily Routine:
1. Morning
o Wake up
o Brush teeth
o Exercise
2. Afternoon
o Have lunch
o Study
3. Evening
o Play outside
o Do homework
4. Ordered List inside an Unordered List
Favorite Subjects and Topics:
Math
1. Algebra
2. Geometry
3. Trigonometry
Science
1. Physics
2. Chemistry
3. Biology
5. Definition List
Web Technologies:
HTML
HyperText Markup Language used to structure web pages.
CSS
Cascading Style Sheets used for styling the appearance of content.
JavaScript
A scripting language used to create interactive web pages.
b. Write a HTML program, to explain the working of hyperlinks using tag
and href, target Attributes.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Hyperlinks Example</title>
</head>
<body>
<h1>Working with Hyperlinks in HTML</h1>
<p><strong>1. Simple hyperlink (same tab):</strong></p>
<a href="https://www.google.com">Visit Google</a>
<p><strong>2. Hyperlink that opens in a new tab:</strong></p>
<a href="https://www.wikipedia.org" target="_blank">Open Wikipedia in a
new tab</a>
<p><strong>3. Link to an internal section on the same page:</strong></p>
<a href="#about">Go to About Section</a>
<p><strong>4. Email Link:</strong></p>
<a href="mailto:someone@example.com">Send an Email</a>
<p><strong>5. Telephone Link:</strong></p>
<a href="tel:+911234567890">Call Us</a>
<hr>
<h2 id="about">About Section</h2>
<p>This is the section you jumped to using an internal link!</p>
</body>
</html>
C.Create a HTML document that has your image and your friend‟s image with a
specific height and width. Also when clicked on the images it should navigate to
their respective profiles.
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Profile Links</title>
<style>
.profile {
margin: 20px;
text-align: center;
}
.profile img {
width: 200px;
height: 200px;
border-radius: 10px;
border: 2px solid #333;
transition: transform 0.2s;
}
.profile img:hover {
transform: scale(1.05);
}
</style>
</head>
<body>
<h1 style="text-align:center;">My Profile and My Friend's Profile</h1>
<div class="profile">
<a href="https://www.linkedin.com/in/your-profile" target="_blank">
<img src="https://via.placeholder.com/200x200.png?text=My+Image"
alt="My Profile">
</a>
<p>My Profile</p>
</div>
<div class="profile">
<a href="https://www.linkedin.com/in/friend-profile" target="_blank">
<img src="https://via.placeholder.com/200x200.png?
text=Friend+Image" alt="Friend Profile">
</a>
<p>Friend's Profile</p>
</div>
</body>
</html>
d. Write a HTML program, in such a way that, rather than placing large images
on a page, the preferred technique is to use thumbnails by setting the height and
width parameters to something like to 100*100 pixels. Each thumbnail image is
also a link to a full-sized version of the image. Create an image gallery using
this technique.
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Thumbnail Image Gallery</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
.gallery {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 15px;
margin-top: 30px;
}
.gallery a img {
width: 100px;
height: 100px;
object-fit: cover;
border: 2px solid #444;
border-radius: 10px;
transition: transform 0.3s;
}
.gallery a img:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<h1>My Thumbnail Image Gallery</h1>
<div class="gallery">
<a href="https://via.placeholder.com/600x400.png?text=Image+1"
target="_blank">
<img src="https://via.placeholder.com/100x100.png?text=Thumb+1"
alt="Image 1">
</a>
<a href="https://via.placeholder.com/600x400.png?text=Image+2"
target="_blank">
<img src="https://via.placeholder.com/100x100.png?text=Thumb+2"
alt="Image 2">
</a>
<a href="https://via.placeholder.com/600x400.png?text=Image+3"
target="_blank">
<img src="https://via.placeholder.com/100x100.png?text=Thumb+3"
alt="Image 3">
</a>
<a href="https://via.placeholder.com/600x400.png?text=Image+4"
target="_blank">
<img src="https://via.placeholder.com/100x100.png?text=Thumb+4"
alt="Image 4">
</a>
</div>
</body>
</html>
2. HTML Tables, Forms and Frames:
Aim:
a. Write a HTML program to exolain the working of tables.(use
tags:<table>,<tr>,<th>,<td> and attributes:border,rowspan,colspan)
Source Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Table Example</title>
</head>
<body>
<h2>Student Marks Table</h2>
<table border="2">
<tr>
<th rowspan="2">Roll No</th>
<th rowspan="2">Name</th>
<th colspan="3">Marks</th>
</tr>
<tr>
<th>Math</th>
<th>Science</th>
<th>English</th>
</tr>
<tr>
<td>101</td>
<td>Alice</td>
<td>85</td>
<td>90</td>
<td>88</td>
</tr>
<tr>
<td>102</td>
<td>Bob</td>
<td>78</td>
<td>82</td>
<td>80</td>
</tr>
<tr>
<td>103</td>
<td>Charlie</td>
<td>92</td>
<td>88</td>
<td>91</td>
</tr>
</table>
</body>
</html>
Output:
Roll No Name Marks
Maths Science English
101 Alice 85 90 88
102 Bob 78 82 80
103 Charlie 92 88 91
b.Write a HTML program, to explain the working of tables by preparing a
timetable. (Note: Use tag to set the caption to the table & also use cell spacing,
cell padding, border, rowspan, colspan etc.).
Source Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>School Timetable</title>
</head>
<body>
<h2>HTML Table Example - Timetable</h2>
<table border="2" cellspacing="5" cellpadding="8">
<caption><b>Class Timetable</b></caption>
<!-- Header Row -->
<tr>
<th>Day</th>
<th>9:00 - 10:00</th>
<th>10:00 - 11:00</th>
<th>11:00 - 11:15</th>
<th>11:15 - 12:15</th>
<th>12:15 - 1:15</th>
</tr>
<!-- Monday -->
<tr>
<td>Monday</td>
<td>Math</td>
<td>English</td>
<td rowspan="5">Break</td>
<td>Science</td>
<td>Computer</td>
</tr>
<!-- Tuesday -->
<tr>
<td>Tuesday</td>
<td>Physics</td>
<td>Chemistry</td>
<td>Math</td>
<td>English</td>
</tr>
<!-- Wednesday -->
<tr>
<td>Wednesday</td>
<td>Biology</td>
<td>History</td>
<td colspan="2">Sports</td>
</tr>
<!-- Thursday -->
<tr>
<td>Thursday</td>
<td>Math</td>
<td>Science</td>
<td>English</td>
<td>Art</td>
</tr>
<!-- Friday -->
<tr>
<td>Friday</td>
<td colspan="2">Project Work</td>
<td>Computer</td>
<td>Music</td>
</tr>
</table>
</body>
</html>
Output:
10:00 - 11:00 - 12:15 -
Day 9:00 - 10:00 11:15 - 12:15
11:00 11:15 1:15
Monday Math English Break Science Computer
10:00 - 11:00 - 12:15 -
Day 9:00 - 10:00 11:15 - 12:15
11:00 11:15 1:15
Tuesday Physics Chemistry Break Math English
Sports
Wednesday Biology History Break
(colspan 2)
Thursday Math Science Break English Art
Project Work
Friday Break Computer Music
(colspan 2)
c. Write a HTML program, to explain the working of forms by designing
Registration form. (Note: Include text field, password field, number field, date
of birth field, checkboxes, radio buttons, list boxes using & tags, and two
buttons ie: submit and reset. Use tables to provide a better view).
Source Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Registration Form</title>
</head>
<body>
<h2>HTML Form Example - Registration Form</h2>
<form action="#" method="post">
<table border="1" cellpadding="8" cellspacing="0">
<caption><b>Student Registration Form</b></caption>
<!-- Name -->
<tr>
<td><label for="fullname">Full Name:</label></td>
<td><input type="text" id="fullname" name="fullname"
required></td>
</tr>
<!-- Password -->
<tr>
<td><label for="password">Password:</label></td>
<td><input type="password" id="password" name="password"
required></td>
</tr>
<!-- Age -->
<tr>
<td><label for="age">Age:</label></td>
<td><input type="number" id="age" name="age" min="1"
max="100" required></td>
</tr>
<!-- Date of Birth -->
<tr>
<td><label for="dob">Date of Birth:</label></td>
<td><input type="date" id="dob" name="dob" required></td>
</tr>
<!-- Gender -->
<tr>
<td>Gender:</td>
<td>
<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>
</td>
</tr>
<!-- Hobbies -->
<tr>
<td>Hobbies:</td>
<td>
<input type="checkbox" id="reading" name="hobbies"
value="Reading"> <label for="reading">Reading</label>
<input type="checkbox" id="sports" name="hobbies"
value="Sports"> <label for="sports">Sports</label>
<input type="checkbox" id="music" name="hobbies"
value="Music"> <label for="music">Music</label>
</td>
</tr>
<!-- Country -->
<tr>
<td><label for="country">Country:</label></td>
<td>
<select id="country" name="country">
<option value="">--Select Country--</option>
<option value="India">India</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
<option value="Canada">Canada</option>
</select>
</td>
</tr>
<!-- Address -->
<tr>
<td><label for="address">Address:</label></td>
<td><textarea id="address" name="address" rows="3"
cols="30"></textarea></td>
</tr>
<!-- Buttons -->
<tr>
<td colspan="2" style="text-align:center;">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>
Key Elements Used
<input type="text"> → For entering full name.
<input type="password"> → For password entry.
<input type="number"> → For age entry.
<input type="date"> → For date of birth.
<input type="radio"> → For gender selection (single choice).
<input type="checkbox"> → For multiple hobbies selection.
<select> & <option> → Dropdown list for country selection.
<textarea> → For address input.
<input type="submit"> & <input type="reset"> → Buttons for form
submission and reset.
<table> → Used to arrange form fields neatly.
Output:
d. Write a HTML program, to explain the working of frames, such that page is
to be divided into 3 parts on either direction. (Note: first frame image, second
frame paragraph, third frame □ hyperlink. And also make sure of using “no
frame” attribute such that frames to be fixed).
Source code:
Main file – index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Frames Example</title>
</head>
<!-- Divide page into 3 vertical parts -->
<frameset cols="33%,34%,33%" border="2">
<frame src="image.html" name="frame1">
<frame src="paragraph.html" name="frame2">
<frame src="links.html" name="frame3">
<!-- Content for browsers without frames support -->
<noframes>
<body>
<h2>Your browser does not support frames</h2>
<p>Please use a modern browser to view this content.</p>
</body>
</noframes>
</frameset>
</html>
First frame – image.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Image Frame</title>
</head>
<body>
<img src="https://via.placeholder.com/300x200" alt="Sample Image"
width="100%">
</body>
</html>
Second frame – paragraph.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Paragraph Frame</title>
</head>
<body>
<h3>About Frames</h3>
<p>
Frames in HTML allow you to split the browser window into multiple
sections,
each capable of displaying a separate HTML document.
Although they are less common today, they were widely used in earlier
web design.
</p>
</body>
</html>
Third frame – links.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Links Frame</title>
</head>
<body>
<h3>Useful Links</h3>
<ul>
<li><a href="https://www.google.com" target="_blank">Google</a></li>
<li><a href="https://www.wikipedia.org"
target="_blank">Wikipedia</a></li>
<li><a href="https://www.github.com" target="_blank">GitHub</a></li>
</ul>
</body>
</html>
Output:
3. HTML 5 and Cascading Style Sheets, Types of CSS:
a.Write a HTML program,that makes use of <article>,<aside>,<figure>,
<figcaption>,<fooetr>,<header>,<main>,<nav>,<section>,<div>,<<span> tags.
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Semantic Tags Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, nav, main, footer {
padding: 10px;
background-color: #f4f4f4;
margin-bottom: 10px;
}
nav a {
margin-right: 15px;
text-decoration: none;
color: #333;
}
article {
background-color: #e3f2fd;
padding: 10px;
margin-bottom: 10px;
}
aside {
background-color: #fff3e0;
padding: 10px;
margin-bottom: 10px;
}
figure {
margin: 0;
text-align: center;
}
figcaption {
font-size: 0.9em;
color: #555;
}
section {
margin-bottom: 15px;
}
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<!-- Header -->
<header>
<h1>My Website</h1>
<p>Welcome to my HTML5 semantic tags demo</p>
</header>
<!-- Navigation -->
<nav>
<a href="#">Home</a>
<a href="#">Articles</a>
<a href="#">Gallery</a>
<a href="#">Contact</a>
</nav>
<!-- Main Content Area -->
<main>
<!-- Section containing an Article -->
<section>
<article>
<h2>HTML5 Semantic Elements</h2>
<p>Semantic elements help structure your HTML in a way that is
meaningful to both browsers and developers.</p>
<!-- Figure with Figcaption -->
<figure>
<img src="https://via.placeholder.com/300" alt="Placeholder
Image">
<figcaption>An example placeholder image</figcaption>
</figure>
<!-- Example of span -->
<p>This is an example of using the <span
class="highlight"><span></span> tag to highlight part of a sentence.</p>
</article>
</section>
<!-- Aside: Related content -->
<aside>
<h3>Did You Know?</h3>
<p>The <code><aside></code> tag is often used for side notes,
tips, or related information.</p>
</aside>
<!-- Another Section with Divs -->
<section>
<div>
<h3>HTML5 Benefits</h3>
<p>Better structure, accessibility, and search engine
optimization.</p>
</div>
<div>
<h3>Popular Semantic Tags</h3>
<p><header>, <footer>, <article>, <section>,
and more.</p>
</div>
</section>
</main>
<!-- Footer -->
<footer>
<p>© 2025 My Website | Designed by HTML Enthusiast</p>
</footer>
</body>
</html>
Output:
b. Write a HTML program, to embed audio and video into HTML web page.
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Embed Audio and Video</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
}
h1 {
color: #333;
}
.media-container {
margin: 20px;
text-align: center;
}
audio, video {
max-width: 100%;
border: 2px solid #333;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Embedding Audio and Video in HTML</h1>
<div class="media-container">
<h2>Audio Player</h2>
<audio controls>
<source src="https://www.w3schools.com/html/horse.mp3"
type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<div class="media-container">
<h2>Video Player</h2>
<video controls width="640" height="360">
<source src="https://www.w3schools.com/html/mov_bbb.mp4"
type="video/mp4">
Your browser does not support the video element.
</video>
</div>
</body>
</html>
Output:
c. Write a program to apply different types (or levels of styles or style
specification formats) - inline, internal, external styles to HTML elements.
(identify selector, property and value).
Source Code:
1. External CSS file (styles.css)
/* Selector: h1
Property: color
Value: darkblue */
h1 {
color: darkblue;
text-align: center; /* property: text-align, value: center */
}
/* Selector: .external-style
Property: background-color
Value: lightyellow */
.external-style {
background-color: lightyellow;
padding: 10px;
border: 1px solid #ccc;
}
2. HTML file (style_levels.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Style Levels Example</title>
<!-- Link to external stylesheet -->
<link rel="stylesheet" href="styles.css">
<!-- Internal CSS -->
<style>
/* Selector: p
Property: color
Value: green */
p{
color: green;
font-size: 16px; /* property: font-size, value: 16px */
}
/* Selector: #internal-box
Property: border
Value: 2px dashed blue */
#internal-box {
border: 2px dashed blue;
padding: 10px;
}
</style>
</head>
<body>
<!-- This h1 gets styles from external CSS -->
<h1>CSS Style Specification Levels</h1>
<!-- This div gets styles from external CSS -->
<div class="external-style">
This box uses <strong>external styles</strong>.
</div>
<!-- This paragraph gets styles from internal CSS -->
<p>This paragraph uses <strong>internal styles</strong> defined in the
<style> tag.</p>
<!-- Inline CSS: style attribute directly on the element -->
<!-- Selector: (inline applies directly to element, no separate selector)
Property: color
Value: red -->
<div id="internal-box" style="color: red; background-color: #f0f0f0;">
This box combines <strong>internal styles</strong> (border) and
<strong>inline styles</strong> (text color red, background grey).
</div>
</body>
</html>
Output:
