Program 1: Formatting Tags
1a. Basic Text Formatting Tags
<!DOCTYPE html>
<html lang="en">
<head>
<title>Basic Text Formatting</title>
</head>
<body>
<h1>Heading 1 (Main Title)</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6 (Smallest Heading)</h6>
<hr>
<marquee>Welcome to Bhavan's Vivekananda College - Web Technologies
Lab</marquee>
<hr>
<p><font color="blue" size="5" face="Arial">This text uses the font tag with
attributes.</font></p>
<p>This is a line break.<br>Now I am on the next line.</p>
<pre>
This is preformatted text.
It preserves spaces
and line breaks exactly
as written in the code.
</pre>
</body>
</html>
1b. Physical Formatting Tags
<!DOCTYPE html>
<html lang="en">
<head>
<title>Physical Formatting Tags</title>
</head>
<body>
<h3>Physical Formatting Demonstration</h3>
<p><b>This text is Bold.</b></p>
<p><i>This text is Italic.</i></p>
<p><strike>This text is Strike-through (deleted).</strike></p>
<p>Water Formula: H<sub>2</sub>O (Subscript)</p>
<p>Math Formula: (a+b)<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup> + 2ab
(Superscript)</p>
<p><big>This is Big text.</big></p>
<p><small>This is Small text.</small></p>
</body>
</html>
1c. Logical Formatting Tags
<!DOCTYPE html>
<html lang="en">
<head>
<title>Logical Formatting Tags</title>
</head>
<body>
<h3>Logical Formatting Demonstration</h3>
<blockquote cite="[Link]
"This is a blockquote. It is used for long quotations from another source."
</blockquote>
<p><cite>The Sun Also Rises</cite> is a famous book (Citation).</p>
<p><abbr title="World Health Organization">WHO</abbr> was founded in 1948
(Abbreviation).</p>
<p><acronym title="Hypertext Markup Language">HTML</acronym> is the standard
(Acronym).</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save your work (Keyboard Input).</p>
<address>
Bhavan’s Vivekananda College,<br>
Sainikpuri, Secunderabad,<br>
Telangana - 500094.
</address>
</body>
</html>
Program 2: HTML List Types
2a. Menu for a Cafe Site
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cafe Menu</title>
</head>
<body>
<h2 align="center">☕ Bhavan's Cafe Menu</h2>
<h3>Hot Beverages (Unordered List)</h3>
<ul type="square">
<li>Cappuccino</li>
<li>Espresso</li>
<li>Hot Chocolate</li>
<li>Green Tea</li>
</ul>
<h3>Snacks (Definition List)</h3>
<dl>
<dt><b>Paneer Sandwich</b></dt>
<dd>Grilled bread with spiced paneer filling.</dd>
<dt><b>Veg Burger</b></dt>
<dd>Classic patty with fresh lettuce and mayo.</dd>
</dl>
</body>
</html>
2b. Ingredients and Instructions for a Recipe
<!DOCTYPE html>
<html lang="en">
<head>
<title>Recipe Page</title>
</head>
<body>
<h2>Recipe: Classic Lemonade</h2>
<h3>Ingredients (Unordered List)</h3>
<ul>
<li>2 Lemons</li>
<li>3 tablespoons of Sugar</li>
<li>1 pinch of Salt</li>
<li>500ml Water</li>
<li>Ice Cubes</li>
</ul>
<h3>Instructions (Ordered List)</h3>
<ol type="1">
<li>Squeeze the lemons into a jug.</li>
<li>Add sugar and salt to the juice.</li>
<li>Pour in the water and stir until sugar dissolves.</li>
<li>Add ice cubes and serve chilled.</li>
</ol>
</body>
</html>
Program 3: Grouping Elements (div and span)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Grouping Elements</title>
<style>
.news-box { border: 2px solid #000; padding: 15px; background-color:
#f4f4f4; width: 300px; }
.highlight { color: red; font-weight: bold; background-color: yellow; }
</style>
</head>
<body>
<div class="news-box">
<h2>Latest Update</h2>
<p>The <span class="highlight">Practical Exams</span> will begin from next
Monday. Please ensure your <span class="highlight">Lab Records</span> are
complete.</p>
</div>
</body>
</html>
Program 4: Multi-column Layout Website
<!DOCTYPE html>
<html lang="en">
<head>
<title>College Website Layout</title>
<style>
.container { display: flex; width: 100%; }
.column { flex: 33.33%; padding: 15px; border: 1px solid #ccc; }
header { background: #333; color: white; text-align: center; padding: 10px;
}
</style>
</head>
<body>
<header><h1>Bhavan's Vivekananda College</h1></header>
<div class="container">
<div class="column" style="background:#eee;">
<h3>About Us</h3>
<p>A premier institution for Science, Humanities, and Commerce.</p>
</div>
<div class="column">
<h3>Our Courses</h3>
<ul>
<li>[Link] Computer Science</li>
<li>[Link] General</li>
<li>B.A Mass Comm</li>
</ul>
</div>
<div class="column" style="background:#eee;">
<h3>Contact Us</h3>
<p>Email: info@[Link]<br>Phone: 040-1234567</p>
</div>
</div>
</body>
</html>
Program 5: HTML5 Semantic Elements
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Semantics</title>
</head>
<body>
<header>
<h1>Bhavan's News Portal</h1>
</header>
<nav>
<a href="#">Home</a> | <a href="#">Academics</a> | <a href="#">Events</a>
</nav>
<main>
<article>
<h2>Annual Day Celebration</h2>
<p>The college annual day will be celebrated on March 15th.</p>
</article>
<section>
<h3>Department News</h3>
<p>Computer Science department is organizing a Hackathon.</p>
</section>
<aside>
<h4>Quick Links</h4>
<p>Admissions Open 2025</p>
</aside>
</main>
<footer>
<p>© 2025 Bhavan's Vivekananda College</p>
</footer>
</body>
</html>
Program 6: Images, Audio, Video
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multimedia Demonstration</title>
</head>
<body>
<h2>HTML Multimedia</h2>
<h3>College Logo (Image)</h3>
<img src="[Link] alt="College Logo" border="2">
<h3>Background Music (Audio)</h3>
<audio controls>
<source src="audio_sample.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>
<h3>Campus Tour (Video)</h3>
<video width="320" height="240" controls>
<source src="video_sample.mp4" type="video/mp4">
Your browser does not support video.
</video>
</body>
</html>
Program 7: Time Table
<!DOCTYPE html>
<html lang="en">
<head>
<title>Class Time Table</title>
</head>
<body>
<h2 align="center">[Link] (CS) III Year Time Table</h2>
<table border="2" align="center" cellspacing="0" cellpadding="10" width="80%">
<tr bgcolor="lightblue">
<th>Day / Time</th>
<th>09:00 - 10:00</th>
<th>10:00 - 11:00</th>
<th>11:00 - 11:15</th>
<th>11:15 - 12:15</th>
</tr>
<tr>
<td><b>Monday</b></td>
<td>Web Tech</td>
<td>Maths</td>
<td rowspan="6"><b>B<br>R<br>E<br>A<br>K</b></td>
<td>Electronics</td>
</tr>
<tr>
<td><b>Tuesday</b></td>
<td>Maths</td>
<td>Electronics</td>
<td>Web Tech</td>
</tr>
<tr>
<td><b>Wednesday</b></td>
<td colspan="2" align="center">Web Tech Lab</td>
<td>English</td>
</tr>
</table>
</body>
</html>
Program 8: Student Registration Form (Any 6 controls)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Registration Form</title>
</head>
<body>
<h2>Student Registration</h2>
<form action="#" method="get">
1. Full Name: <input type="text" name="fname" required><br><br>
2. Password: <input type="password" name="pass"><br><br>
3. Gender:
<input type="radio" name="gen" value="m"> Male
<input type="radio" name="gen" value="f"> Female<br><br>
4. Select Course:
<select name="course">
<option>[Link] (CS)</option>
<option>[Link]</option>
<option>B.A</option>
</select><br><br>
5. Interests:
<input type="checkbox" name="c1"> Sports
<input type="checkbox" name="c2"> Coding<br><br>
6. Date of Birth: <input type="date" name="dob"><br><br>
<input type="submit" value="Register">
<input type="reset" value="Clear Form">
</form>
</body>
</html>
Program 9: Frames and Links between Frames
<!DOCTYPE html>
<html lang="en">
<head>
<title>Frameset Example</title>
</head>
<!-- Note: frameset replaces the body tag -->
<frameset cols="25%, 75%">
<frame src="[Link]" name="left_frame">
<frame src="[Link]" name="right_frame">
</frameset>
</html>
<!-- Create [Link] separately -->
<!--
<body bgcolor="lightgrey">
<h3>Links</h3>
<a href="[Link] target="right_frame">Google</a><br>
<a href="[Link] target="right_frame">Wikipedia</a>
</body>
-->
Program 10: CSS Types
10a. External Style Sheet
HTML File:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="[Link]">
<title>External CSS</title>
</head>
<body>
<h1>This uses an External Style Sheet</h1>
<p>The background and text properties are defined in a separate .css file.</p>
</body>
</html>
[Link] (Save in same folder):
body { background-color: lightyellow; }
h1 { color: darkblue; text-align: center; }
p { font-family: Verdana; font-size: 20px; }
10b. Embedded Style Sheet (List Formats)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Embedded CSS</title>
<style>
ul { list-style-type: disc; color: green; font-size: 18px; }
ol { list-style-type: upper-roman; color: purple; }
</style>
</head>
<body>
<h2>Favorite Subjects</h2>
<ul>
<li>Web Technologies</li>
<li>Mathematics</li>
</ul>
</body>
</html>
10c. Inline Style Sheet (Table)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Inline CSS</title>
</head>
<body>
<table border="1" style="border-collapse: collapse; width: 50%; background-
color: #f0f0f0;">
<tr style="background-color: navy; color: white;">
<th>ID</th>
<th>Subject</th>
</tr>
<tr>
<td style="padding: 10px;">101</td>
<td style="padding: 10px;">Web Programming</td>
</tr>
</table>
</body>
</html>
Program 11: CSS on Links, Lists, Tables
<!DOCTYPE html>
<html lang="en">
<head>
<title>Advanced CSS</title>
<style>
/* Links */
a:link { color: blue; }
a:hover { color: red; text-decoration: underline; font-size: 20px; }
/* Lists */
ul { list-style-image: url('[Link]'); }
/* Tables */
table { border: 5px solid darkgreen; }
/* Generated Content */
p::before { content: "Note: "; font-weight: bold; color: darkred; }
</style>
</head>
<body>
<a href="#">Hover over this link</a>
<p>This is a paragraph with generated content.</p>
</body>
</html>
Program 12: RWD Mobile Layout (Text and Image)
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Design</title>
<style>
.responsive-img { width: 100%; height: auto; max-width: 400px; }
.text-section { padding: 20px; font-size: 1.2em; }
@media only screen and (max-width: 600px) {
.text-section { font-size: 1em; background-color: lightblue; }
}
</style>
</head>
<body>
<h2>Responsive Web Design</h2>
<img src="[Link] class="responsive-img">
<div class="text-section">
This layout adapts based on the screen size. On mobile, the background
turns blue.
</div>
</body>
</html>
Program 13: JavaScript - Area of Rectangle
<!DOCTYPE html>
<html lang="en">
<head>
<title>JS Function</title>
<script>
function calculateArea() {
var length = [Link]("l").value;
var width = [Link]("w").value;
var area = length * width;
[Link]("res").innerHTML = "Area: " + area;
}
</script>
</head>
<body>
<h2>Calculate Area</h2>
Length: <input type="number" id="l"><br><br>
Width: <input type="number" id="w"><br><br>
<button onclick="calculateArea()">Calculate</button>
<h3 id="res"></h3>
</body>
</html>
Program 14: JavaScript - Time-based Greeting
<!DOCTYPE html>
<html lang="en">
<head>
<title>JS Greeting</title>
</head>
<body>
<h1 id="greet"></h1>
<script>
var d = new Date();
var hr = [Link]();
var msg = "";
if (hr < 12) { msg = "Good Morning!"; }
else if (hr < 17) { msg = "Good Afternoon!"; }
else { msg = "Good Evening!"; }
[Link]("greet").innerHTML = msg;
</script>
</body>
</html>
Program 15: JavaScript - Switch Case
<!DOCTYPE html>
<html lang="en">
<head>
<title>JS Switch Case</title>
</head>
<body>
<button onclick="checkDay()">Show Day Message</button>
<script>
function checkDay() {
var day = new Date().getDay();
switch(day) {
case 0: alert("Happy Sunday! Relax."); break;
case 6: alert("It's Saturday! Weekend vibes."); break;
default: alert("It's a working weekday.");
}
}
</script>
</body>
</html>
Program 16: JavaScript - Multiplication Table
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multiplication Table</title>
</head>
<body>
<h2>Generate Multiplication Table</h2>
<script>
var n = prompt("Enter a number:");
[Link]("<h3>Table of " + n + "</h3>");
for(var i=1; i<=10; i++) {
[Link](n + " x " + i + " = " + (n * i) + "<br>");
}
</script>
</body>
</html>