Program -1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<marquee>Basic HTML Tags</marquee>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph with a <br> line break.</p>
<blockquote>
"This is a block quote."
</blockquote>
<pre>
This is a pre-formatted text.
</pre>
<strong>This is a strong text.</strong>
<em>This is an emphasized text.</em>
</body>
</html>
Program-2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Table</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: center;
}
.highlight {
background-color: #ffcccb;
}
.elective {
background-color: #ccffcc;
}
</style>
</head>
<body>
<h1 style="text-align: center;"> Time Table</h1>
<table>
<thead>
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
</thead>
<tbody>
<tr>
<td>9:00 - 10:00</td>
<td class="highlight">Lab</td>
<td>SEPM</td>
<td>Computer Networks</td>
<td>Theory of Computation</td>
<td class="elective">Elective</td>
</tr>
<tr>
<td>10:00 - 11:00</td>
<td>Computer Graphics</td>
<td class="elective">Elective</td>
<td>SEPM</td>
<td class="highlight">Lab</td>
<td>NSS</td>
</tr>
</tbody>
</table>
</body>
</html>
Program-3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled HTML Elements</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h2>This is an H2 Heading</h2>
<h3>This is an H3 Heading</h3>
<hr>
<p>This is a paragraph with some <span>highlighted text</span> using a span
element.</p>
<div>
<p>This paragraph is inside a div element with a background color and padding.</p>
</div>
<time datetime="2024-11-17">November 17, 2024</time>
<p>
Here is an image example:
<img src="Images/[Link]" alt="Sample Image">
</p>
</body>
</html>
[Link]
h2 {
color: blue;
font-size: 24px;
}
h3 {
color: green;
}
hr {
border: 2px solid red;
}
p{
font-size: 18px;
}
div {
background-color: #cea9a9;
padding: 10px;
}
span {
color: red;
}
time {
font-style: italic;
}
img {
width: 100px;
height: 100px;
}
Program-4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<style>
body {
background-color: #e3a8a8;
font-family: Arial, sans-serif;
}
.form-container {
width: 350px;
background-color: white;
padding: 20px;
margin: 50px auto;
border: 1px solid #ccc;
}
h2 {
text-align: center;
}
table {
width: 100%;
}
td {
padding: 8px;
}
input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
padding: 6px;
border: 1px solid #999;
}
button {
width: 100%;
padding: 8px;
background-color: blue;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: darkblue;
}
</style>
</head>
<body>
<div class="form-container">
<h2>Registration Form</h2>
<form>
<table>
<tr>
<td>Name:</td>
<td><input type="text" placeholder="Enter name"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="email" placeholder="Enter email"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" placeholder="Enter password"></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female
</td>
</tr>
<tr>
<td>Accept Terms:</td>
<td>
<input type="checkbox"> I agree
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit">Register</button>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
Program-5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Newspaper</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
}
header {
background-color: #c5139b;
color: white;
text-align: center;
padding: 20px;
}
article, section {
background-color: white;
width: 80%;
margin: 20px auto;
padding: 15px;
border: 1px solid #ccc;
}
h2, h3 {
color: #333;
}
footer {
background-color: black;
color: white;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<header>
<h1>Modern Newspaper</h1>
</header>
<article>
<h2>Breaking News</h2>
<p>
Today’s top story: A significant breakthrough in technology has been made,
impacting industries worldwide.
</p>
</article>
<section>
<h3>Sports Section</h3>
<p>
The local team secured a dramatic victory in the final minutes of the game
and advanced to the championship.
</p>
</section>
<footer>
<p>© 2024 Modern Newspaper</p>
</footer>
</body>
</html>
Program-6
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
<style>
body {
font-family: Arial;
background: linear-gradient(to right, #6a11cb, #2575fc);
}
.calc {
width: 260px;
background: white;
margin: 60px auto;
padding: 20px;
border-radius: 10px;
text-align: center;
}
input {
width: 90%;
padding: 8px;
margin: 6px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
width: 45%;
padding: 8px;
margin: 5px;
border: none;
background: #2575fc;
color: white;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #6a11cb;
}
#res {
margin-top: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="calc">
<h3>Calculator</h3>
<input type="number" id="a" placeholder="Number 1">
<input type="number" id="b" placeholder="Number 2">
<button onclick="add()">+</button>
<button onclick="sub()">−</button>
<button onclick="mul()">×</button>
<button onclick="div()">÷</button>
<button onclick="mod()">%</button>
<button onclick="pow()">^</button>
<button onclick="sq()">x²</button>
<button onclick="sqrt()">√x</button>
<p id="res">Result:</p>
</div>
<script>
function add(){ [Link]="Result: "+(+[Link] + +[Link]); }
function sub(){ [Link]="Result: "+([Link] - [Link]); }
function mul(){ [Link]="Result: "+([Link] * [Link]); }
function div(){ [Link]="Result: "+([Link] / [Link]); }
function mod(){ [Link]="Result: "+([Link] % [Link]); }
function pow(){ [Link]="Result: "+([Link] ** [Link]); }
function sq(){ [Link]="Result: "+([Link] * [Link]); }
function sqrt(){ [Link]="Result: "+[Link]([Link]); }
</script>
</body>
</html>
Program-9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Example</title>
<!-- jQuery CDN -->
<script src="[Link]
<style>
body {
font-family: Arial, sans-serif;
}
.container {
margin: 20px;
}
button {
background-color: green;
color: white;
border: none;
padding: 6px 10px;
margin-right: 5px;
cursor: pointer;
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
margin-top: 20px;
}
.highlight {
border: 2px solid green;
}
</style>
</head>
<body>
<div class="container">
<button id="appendBtn">Append Content</button>
<button id="animateBtn">Animate Box</button>
<p id="para">This is a paragraph.</p>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div class="box"></div>
</div>
<script>
$(document).ready(function () {
$("#appendBtn").click(function () {
$("#para").append(" Appended text.");
$("#list").append("<li>New Item</li>");
});
$("#animateBtn").click(function () {
$(".box").animate({
width: "200px",
height: "200px"
}, 1000, function () {
$(this).css("background-color", "violet")
.addClass("highlight");
});
});
});
</script>
</body>
</html>
