Scribd
Upload
11 views

Web Lab Study Material

The document contains multiple HTML programs demonstrating various web development concepts, including a class timetable, styled HTML elements, a registration form, an online newspaper layout, a simple calculator, and JSON operations. Each program showcases different HTML structures, CSS styles, and JavaScript functionalities. The content is organized into distinct sections with appropriate headings and styling to enhance readability and usability.

Uploaded by

genericnishanth
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views

Web Lab Study Material

The document contains multiple HTML programs demonstrating various web development concepts, including a class timetable, styled HTML elements, a registration form, an online newspaper layout, a simple calculator, and JSON operations. Each program showcases different HTML structures, CSS styles, and JavaScript functionalities. The content is organized into distinct sections with appropriate headings and styling to enhance readability and usability.

Uploaded by

genericnishanth
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

Web Lab Study Material

Program 2

<!DOCTYPE html>
<html>
<head>
<title>Time Table</title>
<style>

table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
text-align: center;

}
th, td {
border: 1px solid black;
padding: 15px;
}

th {
background-color: green;
color: white;
}
tr:nth-child(even) {

background-color: #f2f2f2;
}
.lab {
background-color: #ffcccb;
}

.elective {
background-color: #ccffcc;
}
.row-span {

background-color: #ffcc99;
}
.col-span {
background-color: #ffff99;
}

tfoot {
font-weight: bold;
background-color: #f1f1f1;
}
</style>

</head>
<body>
<h1 style="text-align:center;">Class Time Table</h1>
<table>
<thead>

<tr>
<th colspan="6">Class Schedule</th>
</tr>
<tr>
<th>Day</th>

<th>9:00 - 10:00</th>
<th>10:00 - 11:00</th>
<th>11:00 - 12:00</th>
<th>12:00 - 1:00</th>
<th>1:00 - 2:00</th>
</tr>
</thead>
<tbody>
<tr>

<td>Monday</td>
<td>Math</td>
<td class="lab" colspan="2">Physics Lab</td>
<td>Lunch</td>
<td>Electronics</td>

</tr>
<tr>
<td>Tuesday</td>
<td class="elective">History</td>
<td>Math</td>

<td>Physics</td>
<td class="lab">Chemistry Lab</td>
<td>Lunch</td>
</tr>
<tr>

<td>Wednesday</td>
<td>Computer Science</td>
<td>Math</td>
<td class="elective">Music</td>
<td rowspan="2" class="row-span">Project Work</td>

<td>Lunch</td>
</tr>
<tr>
<td>Thursday</td>
<td>Math</td>
<td>Physics</td>
<td class="lab">Computer Lab</td>
<td>Electronics</td>
</tr>

<tr>
<td>Friday</td>
<td class="col-span" colspan="2">Seminar</td>
<td>Physics</td>
<td>Lunch</td>

<td>Math</td>
</tr>
</tbody>
<tfoot>
<tr>

<td colspan="6">Note: Labs and Electives are highlighted with different colors.</td>
</tr>
</tfoot>
</table>
</body>

</html>
Program 3

<!DOCTYPE html>
<html lang="en">

<head>
<title>Styled HTML Elements</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<h2>This is an H2 Heading</h2>
<h3>This is an H3 Heading</h3>
<hr>
<p>This is a regular paragraph.</p>
<p class="special-paragraph">This is a special paragraph styled using a class selector.</p>

<div id="unique-div">
This is a unique div styled with an ID selector.
<span>This span is inside a div and styled with a descendant selector.</span>
</div>
<time datetime="2024-09-13">September 13, 2024</time> -

<p>This is another paragraph with an <span>inline span</span> inside it.</p>


<a href="https://www.example.com">This is a link to example.com</a>
<img src="https://via.placeholder.com/600x400" alt="Placeholder Image">
</body>
</html>

/* Style for h2 tag */


h2 {

color: #4CAF50;
text-align: center;
}
/* Style for h3 tag */

h3 {
color: #ff5722;
text-align: center;
}
/* Style for hr tag */

hr {
border: 2px solid #333;
width: 80%;
}
/* Style for p tag */

p{
font-size: 16px;
color: green;
}
/* Style for span tag */

span {
font-weight: bold;
}
/* Style for time tag */
time {

font-style: italic;
color: purple;
}
/* Style for img tag */
img {
width: 3x0%; }
/* Style for a tag */
a{
color: blue;

}
/* Class selector for a special paragraph */
.special-paragraph {
font-style: italic;
border-left: 4px solid;

padding-left: 10px;
}
/* ID selector for unique div */
#unique-div {
background-color: #ffeb3b;

border: 2px dashed #333;


padding: 15px;
}
/* Descendant selector for span inside a div */
div span {

font-size: 18px;
color: blue;
}
Program 4

<!DOCTYPE html>
<html lang="en">
<head>
<title>Registration Form</title>
<style>

body {
font-family: Arial, sans-serif;
background-color: pink;
}
h2 {

text-align: center;
}
.form-container {
background: white;
width: 60%;

margin: 20px auto;


padding: 20px;
}
table {
width: 100%;

}
td {
padding: 10px;
vertical-align: top;
}

input, select, textarea {


width: 100%;
padding: 8px;
}
input[type="radio"], input[type="checkbox"] {

width: auto;
}
input[type="submit"] {
background: green;
color: #fff;

padding: 10px;
}
.note {
color: red;
text-align: center;

}
</style>
</head>
<body>
<h2>Registration Form</h2>

<div class="form-container">
<form action="#" method="post">
<table>
<tr>
<td><label for="name">Name:</label></td>

<td><input type="text" id="name" name="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="dob">Date of Birth:</label></td>
<td><input type="date" id="dob" name="dob" required></td>
</tr>

<tr>
<td><label for="phone">Phone Number:</label></td>
<td><input type="tel" id="phone" name="phone" pattern="[0-9]{10}"
required></td>
</tr>
<tr>
<td>Gender:</td>

<td>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female" required>
<label for="female">Female</label>

</td>
</tr>
<tr>
<td><label for="course">Select Course:</label></td>
<td>

<select id="course" name="course" required>


<option value="cs">Computer Science</option>
<option value="it">Information Technology</option>
<option value="ece">Electronics and Communication</option>
</select>
</td>
</tr>
<tr>

<td>Hobbies:</td>
<td>
<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>
<input type="checkbox" id="reading" name="hobbies" value="reading">
<label for="reading">Reading</label>
</td>
</tr>

<tr>
<td><label for="address">Address:</label></td>
<td><textarea id="address" name="address" rows="4"
required></textarea></td>
</tr>
<tr>
<td colspan="2" class="note">* All fields are mandatory</td>

</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input type="submit" value="Submit">
</td>

</tr>
</table>
</form>
</div>
</body> </html>
Program 5

<!DOCTYPE html>
<html lang="en">
<head>
<title>Online Newspaper</title>

<style>
body {
font-family: Arial;
margin: 0;
}

header {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;

}
footer {
background-color: #333;
color: white;
text-align: center;

padding: 10px;
position: fixed;
width: 100%;
bottom: 0;

}
section {
padding: 20px;
margin: 20px;
}
aside {
background-color: #f0f0f0;

padding: 15px;
width: 30%;
float: right;
margin: 20px;
}

article {
background-color: #eef5f9;
padding: 15px;
margin-bottom: 20px;
border-radius: 8px;

}
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;

}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;

}
th {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<header>

<h1>Daily News Online</h1>


<p>Your trusted source for the latest news</p>
</header>
<section>
<article>

<h2>Breaking News: Technology Advances in AI</h2>


<p>Artificial Intelligence (AI) continues to grow rapidly with new innovations being
introduced daily.</p>
<h3>AI Advancements in 2024</h3>
<table>
<thead>
<tr>

<th>Field</th>
<th>Key Development</th>
<th>Impact</th>
</tr>
</thead>

<tbody>
<tr>
<td>Healthcare</td>
<td>AI-assisted Surgeries</td>
<td>Improved accuracy and efficiency</td>

</tr>
<tr>
<td>Transportation</td>
<td>Autonomous Vehicles</td>
<td>Reduced traffic accidents</td>
</tr>
<tr>
<td>Retail</td>

<td>AI Chatbots</td>
<td>Enhanced customer service</td>
</tr>
</tbody>
</table>

</article>
</section>
<aside>
<h3>Latest Headlines</h3>
<ul>

<li><a href="#">New Vaccine Shows Promising Results</a></li>


<li><a href="#">Electric Cars Sales Surge Globally</a></li>
<li><a href="#">SpaceX Prepares for Lunar Mission</a></li>
<li><a href="#">New Renewable Energy Policies</a></li>
</ul>

</aside>
<footer>
<p>&copy; 2024 Daily News Online. All rights reserved.</p>
</footer>
</body>

</html>
Program 6
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Calculator</title>
<style>

body {
font-family: Arial;
background: grey;
display: flex;
justify-content: center;

align-items: center;
margin: 0;
}
.calculator {
background: #fff;

padding: 20px;
text-align: center;
}
h2 {
color: #4CAF50;

margin-bottom: 20px;
}
input, button {
margin: 10px 5px;
padding: 10px;

border: 1px solid #ccc;


}
button {
background: #4CAF50;
color: white;

cursor: pointer;
}
#result {
margin-top: 20px;
font-size: 18px;

}
</style>
</head>
<body>
<div class="calculator">

<h2>Simple Calculator</h2>
<input type="number" id="num1" placeholder="First Number">
<input type="number" id="num2" placeholder="Second Number">
<div>
<button onclick="calculate('sum')">Sum</button>

<button onclick="calculate('diff')">Difference</button>
<button onclick="calculate('prod')">Product</button>
<button onclick="calculate('quot')">Quotient</button>
<button onclick="calculate('mod')">Remainder</button>
<button onclick="calculate('power')">Power</button>

<button onclick="calculate('square')">Square</button>
<button onclick="calculate('sqrt')">Square Root</button>
</div>
<div id="result">Result: 0</div>
</div>
<script>
function calculate(op) {
const num1 = parseFloat(document.getElementById('num1').value) || 0;
const num2 = parseFloat(document.getElementById('num2').value) || 0;

let result;
switch (op) {
case 'sum': result = num1 + num2; break;
case 'diff': result = num1 - num2; break;
case 'prod': result = num1 * num2; break;

case 'quot': result = num1 / num2 ; break;


case 'mod': result = num2 ? num1 % num2 : 'Error'; break;
case 'power': result = Math.pow(num1, num2); break;
case 'square': result = num1 ** 2; break;
case 'sqrt': result = Math.sqrt(num1); break;

default: result = 'Invalid Operation';


}
document.getElementById('result').textContent = `Result: ${result}`;
}
</script>

</body>
</html>
Program 7
<!DOCTYPE html>
<html lang="en">
<head>
<title>JSON Operations</title>
<style>

body {
font-family: Arial, sans-serif;
padding: 10px;
}
h2 {

color: #333;
}
textarea, input, button, pre {
display: block;
margin: 10px 0;

width: 100%;
}
textarea {
height: 100px;
}

button {
padding: 8px;
background: #4CAF50;
color: white;
border: none;

cursor: pointer;
} }
</style>
</head>
<body>

<h2>JSON Operations</h2>
<!-- JSON to Object -->
<label for="jsonInput">Enter JSON Text:</label>
<textarea id="jsonInput" placeholder='{"name": "Alice", "age": 25, "date": "2024-09-
13"}'></textarea>
<button onclick="convertJsonToObject()">Convert JSON to Object</button>
<pre id="jsonObjectOutput">JavaScript Object will appear here...</pre>

<!-- JSON Date Conversion -->


<button onclick="convertJsonToDate()">Convert JSON Date</button>
<pre id="jsonDateOutput">Converted Date will appear here...</pre>
<!-- JSON to CSV -->
<button onclick="convertJsonToCsv()">Convert JSON to CSV</button>

<pre id="csvOutput">CSV format will appear here...</pre>


<!-- CSV to JSON -->
<label for="csvInput">Enter CSV Data (e.g., "name,age,date\nAlice,25,2024-09-
13"):</label>
<textarea id="csvInput"></textarea>
<button onclick="convertCsvToJson()">Convert CSV to JSON</button>

<pre id="jsonFromCsvOutput">JSON format will appear here...</pre>


<!-- Hashing a String -->
<label for="hashStringInput">Enter String to Hash:</label>
<input type="text" id="hashStringInput" placeholder="Enter string to hash">
<button onclick="createHash()">Create Hash</button>

<pre id="hashOutput">Hashed string will appear here...</pre>


<script>
const updateOutput = (id, content) => {
document.getElementById(id).textContent = content;
};
const safeParseJSON = (input) => {
try {

return JSON.parse(input);
} catch {
return null;
}
};

function convertJsonToObject() {
const json = safeParseJSON(document.getElementById('jsonInput').value);
updateOutput('jsonObjectOutput', json ? JSON.stringify(json, null, 2) : 'Invalid JSON
format.');
}
function convertJsonToDate() {
const json = safeParseJSON(document.getElementById('jsonInput').value);

if (json && json.date) {


const date = new Date(json.date);
updateOutput('jsonDateOutput', `Converted Date: ${date}`);
} else {
updateOutput('jsonDateOutput', 'Invalid JSON or missing "date" field.');

}
}

function convertJsonToCsv() {
const json = safeParseJSON(document.getElementById('jsonInput').value);

if (json) {
const keys = Object.keys(json);
const values = Object.values(json);
updateOutput('csvOutput', `${keys.join(',')}\n${values.join(',')}`);
} else {
updateOutput('csvOutput', 'Invalid JSON format.');
}
}

function convertCsvToJson() {
const csv = document.getElementById('csvInput').value;
try {
const [header, data] = csv.split('\n');

const keys = header.split(',');


const values = data.split(',');
const json = keys.reduce((obj, key, i) => {
obj[key.trim()] = values[i].trim();
return obj;

}, {});
updateOutput('jsonFromCsvOutput', JSON.stringify(json, null, 2));
} catch {
updateOutput('jsonFromCsvOutput', 'Invalid CSV format.');
}

function createHash() {
const str = document.getElementById('hashStringInput').value;
let hash = 0;

for (const char of str) {


hash = (hash << 5) - hash + char.charCodeAt(0);
hash |= 0; // Convert to 32-bit integer
}
updateOutput('hashOutput', `Hashed String: ${hash}`);
}
</script>
</body>
</html>
Program 8

8a)
<?php
// Define the file path to store the visitor count

$filename = 'count.txt';

// Check if the file exists


if (!file_exists($filename)) {
// If the file doesn't exist, create it and initialize the count to 0

file_put_contents($filename, '0');
}

// Read the current count from the file


$count = (int)file_get_contents($filename);

// Increment the count


$count++;

// Update the count in the file

file_put_contents($filename, $count);

// Output the HTML with the visitor count


?>
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visitor Counter</title>
<style>

body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
margin: 0;

padding: 50px;
}
h1 {
color: #333;
}

.container {-
background: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
display: inline-block;

padding: 20px;
}
p{
font-size: 1.2em;
color: #555;

}
</style>
</head>
<body>
<div class="container">
<h1>Visitor Counter</h1>
<p>Number of visitors to this page: <?php echo $count; ?></p>
</div>
</body>

</html>

8b)
CREATE DATABASE school;
USE school;
CREATE TABLE students (
id INT AUTO_INCREMENT PRIMARY KEY,

name VARCHAR(100),
grade INT
);
INSERT INTO students (name, grade) VALUES
('Alice', 85),

('Bob', 70),
('Charlie', 95),
('Diana', 88);

<?php

// Database connection
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "school";

$conn = new mysqli($servername, $username, $password, $dbname);


if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Fetch student records
$sql = "SELECT id, name, grade FROM students";

$result = $conn->query($sql);
$students = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$students[] = $row;

}
}
// Selection Sort function
function selectionSort(&$arr) {
$n = count($arr);

for ($i = 0; $i < $n - 1; $i++) {


$minIndex = $i;
for ($j = $i + 1; $j < $n; $j++) {
if ($arr[$j]['grade'] < $arr[$minIndex]['grade']) {
$minIndex = $j;

}
}
// Swap the minimum element with the first element
if ($minIndex != $i) {
$temp = $arr[$i];

$arr[$i] = $arr[$minIndex];
$arr[$minIndex] = $temp;
}
}
}
// Sort students by grade
selectionSort($students);
$conn->close();
?>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Sorted Student Records</title>
<style>

body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
background-color: #f4f4f4;

}
table {
width: 100%;
border-collapse: collapse;
}

table, th, td {
border: 1px solid #ddd;
}
th, td {
padding: 8px;

text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Sorted Student Records</h1>

<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>

<th>Grade</th>
</tr>
</thead>
<tbody>
<?php foreach ($students as $student): ?>

<tr>
<td><?php echo htmlspecialchars($student['id']); ?></td>
<td><?php echo htmlspecialchars($student['name']); ?></td>
<td><?php echo htmlspecialchars($student['grade']); ?></td>
</tr>

<?php endforeach; ?>


</tbody>
</table>
</body>
</html>

You might also like