Program 1
<!DOCTYPE html>
<html lang="en">
<head>
<title> My First Web Page</title>
</head>
<body>
<marquee>Basic HTML Tags</marquee>
<h1>SRIDHAR</h1>
<h2>SRIDHAR</h2>
<h3>SRIDHAR</h3>
<h4>SRIDHAR</h4>
<h5>SRIDHAR</h5>
<h6>SRIDHAR</h6>
<p>Web application with HTML, CSS, JavaScript, jQuery and PHP for
online application/registration form.</p>
<hr>
<blockquote><q>Block<br> Quote</q></blockquote>
<pre> Pre tag Analyze the results and produce substantial written
documentation.</pre>
<p>
This is <b>bold</b> text.<br>
This is <u>underlined</u> text.<br>
This is <sub>subscript</sub> text.<br>
This is <sup>superscript</sup> text.<br>
</p>
</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;
}
th {
background-color: #f2f2f2;
}
.lab {
background-color: #ffeb3b; /* Yellow for lab hours */
}
.elective {
background-color: #80deea; /* Light blue for elective hours
*/
}
.highlight-row {
background-color: #d1c4e9; /* Light purple for rows */
}
footer {
text-align: center;
padding: 10px;
background-color: #f2f2f2;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Class 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 class="highlight-row">
<td>9:00 - 10:00</td>
<td>Maths</td>
<td class="lab">Lab - Physics</td>
<td>Maths</td>
<td class="elective">Elective</td>
<td>English</td>
</tr>
<tr>
<td>10:00 - 11:00</td>
<td>English</td>
<td>Maths</td>
<td>Lab - Chemistry</td>
<td class="elective">Elective</td>
<td class="lab">Lab - Biology</td>
</tr>
<tr class="highlight-row">
<td>11:00 - 12:00</td>
<td class="lab">Lab - Computer</td>
<td>English</td>
<td class="lab">Lab - Chemistry</td>
<td>Maths</td>
<td class="elective">Elective</td>
</tr>
<tr>
<td>12:00 - 1:00</td>
<td>Break</td>
<td>Break</td>
<td>Break</td>
<td>Break</td>
<td>Break</td>
</tr>
<tr class="highlight-row">
<td>1:00 - 2:00</td>
<td class="elective">Elective</td>
<td>Maths</td>
<td>English</td>
<td>Lab - Physics</td>
<td>Lab - Biology</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6">This is your weekly class time
table.</td>
</tr>
</tfoot>
</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>CSS Demonstration</title>
<link rel="stylesheet" href="3.style.css"> <!-- Link to external
CSS file -->
</head>
<body>
<h2>This is an H2 Heading</h2>
<h3>This is an H3 Heading</h3>
<hr>
<p>This is a paragraph of text styled by an external CSS file.</p>
<div class="highlight">
<p>This is inside a div with class 'highlight'. It has special
styling.</p>
</div>
<span>This is a span element, styled differently.</span>
<time datetime="2024-12-06">6th December 2024</time>
<img src="https://via.placeholder.com/150" alt="Placeholder Image">
<a href="https://www.example.com">Visit Example</a>
</body>
</html>
Style.css
/* style.css */
/* Universal selector: Apply a common style to all elements */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* h2 selector: Style all <h2> elements */
h2 {
color: #2e3a59;
font-family: 'Arial', sans-serif;
font-size: 24px;
text-align: center;
border-bottom: 2px solid #ddd;
padding-bottom: 10px;
}
/* h3 selector: Style all <h3> elements */
h3 {
color: #4caf50;
font-size: 20px;
text-transform: uppercase;
font-weight: bold;
margin-top: 20px;
}
/* hr selector: Style horizontal rules */
hr {
border: none;
border-top: 2px solid #ccc;
margin: 20px 0;
}
/* p selector: Style all <p> elements */
p {
font-family: 'Georgia', serif;
font-size: 16px;
line-height: 1.5;
color: #555;
margin-bottom: 15px;
}
/* div selector: Style <div> elements */
div {
background-color: #f4f4f4;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* Specific class selector: Style <div> with class "highlight" */
div.highlight {
background-color: #ffeb3b;
border: 2px solid #ff9800;
}
/* span selector: Style all <span> elements */
span {
font-style: italic;
color: #007bff;
}
/* time selector: Style <time> elements */
time {
font-size: 14px;
color: #9e9e9e;
font-family: 'Courier New', monospace;
}
/* img selector: Style <img> elements */
img {
width: 150px;
height: 150px;
border-radius: 10px;
margin-top: 20px;
}
/* a selector: Style all <a> elements */
a {
text-decoration: none;
color: #1e88e5;
font-weight: bold;
}
/* a:hover selector: Style <a> elements on hover */
a:hover {
color: #d32f2f;
text-decoration: underline;
}
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 {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
color: #333;
}
.form-container {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
width: 300px;
margin: 0 auto;
}
table {
width: 100%;
margin-bottom: 20px;
}
td {
padding: 10px;
}
input[type="text"], input[type="email"],
input[type="password"], input[type="tel"], input[type="date"], select {
width: 100%;
padding: 8px;
margin: 5px 0;
border: 1px solid #ddd;
border-radius: 4px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}
input[type="submit"]:hover {
background-color: #45a049;
}
label {
font-size: 14px;
color: #333;
}
</style>
</head>
<body>
<h1>Registration Form</h1>
<div class="form-container">
<form action="#" method="post">
<table>
<tr>
<td><label for="first-name">First
Name:</label></td>
<td><input type="text" id="first-name" name="first-
name" required></td>
</tr>
<tr>
<td><label for="last-name">Last Name:</label></td>
<td><input type="text" id="last-name" name="last-
name" required></td>
</tr>
<tr>
<td><label for="email">Email:</label></td>
<td><input type="email" id="email" name="email"
required></td>
</tr>
<tr>
<td><label for="password">Password:</label></td>
<td><input type="password" id="password"
name="password" required></td>
</tr>
<tr>
<td><label for="phone">Phone:</label></td>
<td><input type="tel" id="phone" name="phone"
pattern="[0-9]{10}" required></td>
</tr>
<tr>
<td><label for="dob">Date of Birth:</label></td>
<td><input type="date" id="dob" name="dob"
required></td>
</tr>
<tr>
<td><label for="gender">Gender:</label></td>
<td>
<input type="radio" id="male" name="gender"
value="male" required> Male
<input type="radio" id="female" name="gender"
value="female" required> Female
</td>
</tr>
<tr>
<td><label for="country">Country:</label></td>
<td>
<select id="country" name="country" required>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
<option value="ca">Canada</option>
<option value="in">India</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center;">
<input type="submit" value="Register">
</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>Newspaper</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
nav {
background-color: #444;
padding: 10px;
text-align: center;
}
nav a {
color: white;
margin: 0 10px;
text-decoration: none;
}
main {
display: flex;
padding: 20px;
}
article {
flex: 70%;
padding: 20px;
background-color: white;
margin-right: 20px;
}
aside {
flex: 30%;
background-color: #e0e0e0;
padding: 20px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: fixed;
width: 100%;
bottom: 0;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
padding: 8px;
border: 1px solid #ccc;
}
th {
background-color: #444;
color: white;
}
</style>
</head>
<body>
<header>
<h1>Daily News</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">World</a>
<a href="#">Business</a>
<a href="#">Technology</a>
</nav>
<main>
<article>
<h2>Market Hits New High</h2>
<section>
<h3>Stock Prices Surge</h3>
<p>Today, the stock market hit a record high due to
strong economic growth...</p>
</section>
<section>
<h3>Tech Sector Leads the Charge</h3>
<p>Tech companies are leading the market rally with
strong earnings reports...</p>
</section>
<figure>
<img src="https://via.placeholder.com/600x300"
alt="Stock Market" width="600">
<figcaption>Stock Market Surge</figcaption>
</figure>
<table>
<caption>Top 5 Performing Stocks</caption>
<tr>
<th>Company</th>
<th>Price</th>
<th>Change</th>
</tr>
<tr>
<td>Apple</td>
<td>$145</td>
<td>+2%</td>
</tr>
<tr>
<td>Amazon</td>
<td>$3400</td>
<td>+1.5%</td>
</tr>
<tr>
<td>Microsoft</td>
<td>$300</td>
<td>+1.2%</td>
</tr>
</table>
</article>
<aside>
<h3>Opinion</h3>
<p>While the market is booming, many are still struggling
to recover from the pandemic...</p>
</aside>
</main>
<footer>
<p>© 2024 Daily News</p>
</footer>
</body>
</html>
Program6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Simple Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
input, button {
padding: 10px;
margin: 5px;
}
input {
width: 150px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h2>Simple Calculator</h2>
<input type="number" id="num1" placeholder="Enter first number">
<input type="number" id="num2" placeholder="Enter second number">
<br><br>
<button onclick="calculate('sum')">Sum</button>
<button onclick="calculate('difference')">Difference</button>
<button onclick="calculate('product')">Product</button>
<button onclick="calculate('quotient')">Quotient</button>
<button onclick="calculate('remainder')">Remainder</button>
<button onclick="calculate('power')">Power</button>
<button onclick="calculate('sqrt')">Square Root</button>
<button onclick="calculate('square')">Square</button>
<h3 id="result"></h3>
<script>
function calculate(operation) {
var num1 =
parseFloat(document.getElementById('num1').value);
var num2 =
parseFloat(document.getElementById('num2').value);
var result = 0;
var message = "";
if (isNaN(num1) || isNaN(num2)) {
message = "Please enter valid numbers!";
} else {
switch (operation) {
case 'sum':
result = num1 + num2;
message = "Sum: " + result;
break;
case 'difference':
result = num1 - num2;
message = "Difference: " + result;
break;
case 'product':
result = num1 * num2;
message = "Product: " + result;
break;
case 'quotient':
if (num2 === 0) {
message = "Cannot divide by zero!";
} else {
result = num1 / num2;
message = "Quotient: " + result;
}
break;
case 'remainder':
result = num1 % num2;
message = "Remainder: " + result;
break;
case 'power':
result = Math.pow(num1, num2);
message = "Power: " + result;
break;
case 'sqrt':
if (num1 < 0) {
message = "Square root of negative number
is not possible!";
} else {
result = Math.sqrt(num1);
message = "Square Root: " + result;
}
break;
case 'square':
result = Math.pow(num1, 2);
message = "Square: " + result;
break;
}
}
document.getElementById('result').innerText = message;
}
</script>
</body>
</html>
Program7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>JSON & Crypto Operations</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f4f4f9;
text-align: center;
}
input, button {
padding: 10px;
margin: 5px;
font-size: 16px;
}
textarea {
width: 100%;
height: 100px;
margin: 10px 0;
font-size: 16px;
}
.result {
font-size: 18px;
margin-top: 20px;
}
</style>
</head>
<body>
<h2>JSON & Crypto Operations</h2>
<!-- JSON to JavaScript Object -->
<div>
<h3>1. Convert JSON Text to JavaScript Object</h3>
<textarea id="jsonText" placeholder="Enter JSON text
here..."></textarea>
<button onclick="convertJsonToObject()">Convert JSON to
Object</button>
<div class="result" id="jsonToObjectResult"></div>
</div>
<!-- Convert JSON results into a Date -->
<div>
<h3>2. Convert JSON Results into Date</h3>
<input type="text" id="jsonDate" placeholder='{"date": "2024-
12-06"}' />
<button onclick="convertJsonToDate()">Convert to Date</button>
<div class="result" id="jsonToDateResult"></div>
</div>
<!-- Convert JSON to CSV and CSV to JSON -->
<div>
<h3>3. Convert JSON to CSV and CSV to JSON</h3>
<textarea id="jsonInput" placeholder='Enter JSON like [{"name":
"John", "age": 30}, {"name": "Jane", "age": 25}]'></textarea>
<button onclick="convertJsonToCsv()">Convert JSON to
CSV</button>
<textarea id="csvInput" placeholder="Enter CSV
format"></textarea>
<button onclick="convertCsvToJson()">Convert CSV to
JSON</button>
<div class="result" id="jsonToCsvResult"></div>
<div class="result" id="csvToJsonResult"></div>
</div>
<!-- Hashing a String -->
<div>
<h3>4. Create Hash from String</h3>
<input type="text" id="hashString" placeholder="Enter string to
hash">
<button onclick="createHash()">Create Hash</button>
<div class="result" id="hashResult"></div>
</div>
<script>
// Convert JSON to JavaScript Object
function convertJsonToObject() {
var jsonText = document.getElementById('jsonText').value;
try {
var jsonObject = JSON.parse(jsonText);
document.getElementById('jsonToObjectResult').innerText
= JSON.stringify(jsonObject, null, 2);
} catch (e) {
document.getElementById('jsonToObjectResult').innerText
= "Invalid JSON text!";
}
}
// Convert JSON results into a Date
function convertJsonToDate() {
var jsonDate = document.getElementById('jsonDate').value;
try {
var jsonObject = JSON.parse(jsonDate);
var date = new Date(jsonObject.date);
document.getElementById('jsonToDateResult').innerText =
date.toLocaleDateString();
} catch (e) {
document.getElementById('jsonToDateResult').innerText =
"Invalid JSON format!";
}
}
// Convert JSON to CSV
function convertJsonToCsv() {
var jsonInput = document.getElementById('jsonInput').value;
try {
var jsonArray = JSON.parse(jsonInput);
var csv = 'Name, Age\n';
jsonArray.forEach(item => {
csv += item.name + ', ' + item.age + '\n';
});
document.getElementById('jsonToCsvResult').innerText =
csv;
} catch (e) {
document.getElementById('jsonToCsvResult').innerText =
"Invalid JSON format!";
}
}
// Convert CSV to JSON
function convertCsvToJson() {
var csvInput = document.getElementById('csvInput').value;
var lines = csvInput.split('\n');
var result = [];
var headers = lines[0].split(', ');
for (var i = 1; i < lines.length; i++) {
var obj = {};
var currentLine = lines[i].split(', ');
for (var j = 0; j < headers.length; j++) {
obj[headers[j]] = currentLine[j];
}
result.push(obj);
}
document.getElementById('csvToJsonResult').innerText =
JSON.stringify(result, null, 2);
}
// Create Hash from String
function createHash() {
var hashString =
document.getElementById('hashString').value;
var hash = btoa(hashString); // Using btoa to create a
simple hash-like encoding
document.getElementById('hashResult').innerText = hash;
}
</script>
</body>
</html>
Program 9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>jQuery Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.animated-div {
width: 150px;
height: 150px;
background-color: lightblue;
margin-top: 20px;
display: inline-block;
text-align: center;
line-height: 150px;
font-size: 18px;
color: black;
position: relative;
}
ul {
margin-top: 20px;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>Task 1: Append Content</h2>
<p id="paragraph">This is a paragraph.</p>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<button onclick="appendContent()">Append Content</button>
<h2>Task 2: Animate Div</h2>
<div id="divToAnimate" class="animated-div">
Animate Me
</div>
<button onclick="animateDiv()">Animate Div</button>
<h2>Task 3: Change Color While Animating</h2>
<div id="colorDiv" class="animated-div">
Color Change
</div>
<button onclick="changeColorOnAnimation()">Animate and Change
Color</button>
<script>
// Task 1: Append content to paragraph and list
function appendContent() {
// Append text to paragraph
$('#paragraph').append(' More text added to the
paragraph.');
// Append item to list
$('#list').append('<li>New Item</li>');
}
// Task 2: Animate the div (Change position)
function animateDiv() {
$('#divToAnimate').animate({
left: '+=100px', // Move 100px to the right
top: '+=50px' // Move 50px down
}, 1000); // Duration: 1 second
}
// Task 3: Change the color of a div while animating
function changeColorOnAnimation() {
$('#colorDiv').animate({
left: '+=100px', // Move 100px to the right
top: '+=50px' // Move 50px down
}, 1000, function() {
// Change color after animation completes
$(this).css('background-color', 'coral');
});
}
</script>
</body>
</html>
