Scribd
Upload
14 views15 pages

Web M

Uploaded by

saic170001
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
14 views15 pages

Web M

Uploaded by

saic170001
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/ 15

Program 1 <!

-- Horizontal line -->


<!DOCTYPE html> <hr>
<html lang="en">
<head> <!-- Line Break -->
<meta charset="UTF-8"> <p>This is some text.<br>This is on a
new line.</p>
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">
<!-- Block Quote -->
<title>My First Web Page</title>
<blockquote>This is a block
</head> quote.</blockquote>
<body>
<!-- Moving text --> <!-- Pre tag -->
<marquee direction="right">Basic <pre>
HTML Tags</marquee>
Text is
pre-formatted
<!-- Headings from h1 to h6 -->
and retains
<h1>Heading 1</h1>
spaces and line breaks.
<h2>Heading 2</h2>
</pre>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<!-- Logical Styles -->
<h5>Heading 5</h5>
<p>This is <b>bold</b> text,
<h6>Heading 6</h6> <u>underlined</u> text,
<sub>subscript</sub> text, and
<sup>superscript</sup> text.</p>
<!-- Paragraph -->
</body>
<p>This is a paragraph
</html>
demonstrating the paragraph tag.</p>
Program 2
<!DOCTYPE html> </tfoot>
<html> <tbody>
<head> <tr style="background-color:
#a6a8db;">
<title>Time Table</title>
<th>Monday</th>
</head>
<td>CN</td>
<body>
<td>PE-AI</td>
<h1 style="text-align: center;">Time
Table</h1> <td rowspan="6"
style="background-color:
<table border="1" align="center"
#ffcccb;"><b>TEA BREAK</b></td>
width="80%">
<td colspan="2"
<thead>
style="background-color:
<tr> #add8e6;">Lab</td>
<th>Day/Period</th> <td rowspan="6"
<th>I<br>9:30-10:25</th> style="background-color:
#ffcccb;"><b>LUNCH</b></td>
<th>II<br>10:25-11:20</th>
<td>EVS</td>
<th><br>11:20-11:35</th>
<td>RM</td>
<th>III<br>11:35-12:30</th>
<td>TOC</td>
<th>IV<br>12:30-1:20</th>
</tr>
<th><br>1:25-2:15</th>
<tr style="background-color:
<th>V<br>2:25-3:10</th> #FFFFFF;">
<th>VI<br>3:10-4:05</th> <th>Tuesday</th>
<th>VII<br>4:05-5:00</th> <td>CN</td>
</tr> <td>RM</td>
</thead> <td>SE&PM</td>
<tfoot> <td>SE&PM</td>
<tr> <td>TOC</td>
<td colspan="10" style="text- <td>RM</td>
align: center;">End of Timetable</td>
<td>NPTEL/MOOC</td>
</tr>
</tr> <th>Friday</th>
<tr style="background-color: <td>PE-AI</td>
#a6a8db;">
<td>CN</td>
<th>Wednesday</th>
<td colspan="2">Mini
<td>SE&PM</td> Project</td>
<td>TOC</td> <td
colspan="3">NPTEL/MOOC</td>
<td>SE&PM</td>
</tr>
<td>PE-AI</td>
<tr style="background-color:
<td>CN</td>
#FFFFFF">
<td
<th>Saturday</th>
colspan="2">NPTEL/MOOC</td>
<td
</tr>
colspan="2">NPTEL/MOOC</td>
<tr style="background-color:
<td
#FFFFFF">
colspan="2">PrePlacement
<th>Thursday</th> Activities</td>
<td>TOC</td> <td colspan="3">Technical
<td>PE-AI</td> Workshop/Cultural Event/Skill
Development</td>
<td colspan="2"
style="background-color: </tr>
#add8e6;">Lab</td> </tbody>
<td </table>
colspan="3">NPTEL/MOOC</td>
</body>
</tr>
</html>
<tr style="background-color:
#a6a8db;">
three.html style.css(3)
h2 {
<!DOCTYPE html> color: #4CAF50;
<html lang="en"> font-family: 'Arial', sans-serif;
text-transform: uppercase;
<head> border-bottom: 2px solid #ccc;
<meta charset="UTF-8"> }
h3 {
<meta name="viewport" color: #FF5722;
content="width=device-width, initial- font-family: 'Verdana', sans-serif;
scale=1.0"> text-transform: capitalize;
}
<title>Styled Elements</title> .hr-special {
<link rel="stylesheet" border: 1px dashed #FFC107;
margin: 10px 0px;
href="style.css"> }
</head> #unique-paragraph {
font-size: 18px;
<body> color: #9C27B0;
<h2>Heading 2 Example</h2> }
<h3>Heading 3 Example</h3> div * {
font-weight: bold;
<hr class="hr-special"> }
<p class="hr-special">use of class a:hover {
color: #F44336;
selector</p> }
<p id="unique-paragraph">This is a span {
color: #009688;
unique paragraph with an ID font-weight: normal;
selector.</p> }
<p>This is a normal paragraph.</p> time {
font-style: italic;
<div class="box"> color: #795548;
<p>Inside a div with class "box".</p> }
img{
<span>Some text in a span inside width: 100px;
div</span> height: auto;
</div> border-radius: 10px;
}
<div class="highlight"> [title="flower"] {
<p>This is another div with a border: 5px solid purple;
width: 100px;
background color from class height: auto;
"highlight".</p> border-radius: 10px;
}
</div> div.box {
<time datetime="2024-10- border: 1px solid #333;
05">October 5, 2024</time> padding: 15px;
margin: 15px 0;
<img src="image.jpg" title="flower" background-color: #f9f9f9;
alt="Example Image"> }
div.highlight {
<img src="image.jpg" title="flow" background-color: #FFEB3B;
alt="Example Image"> }
div p {
<a href="https://example.com">Go to color: forestgreen;
Example.com</a> }
</body> p::first-letter {
color: #ff0000;
</html> font-size: xx-large;
}
Four.html }
td input[type="radio"],
<!DOCTYPE html>
td input[type="checkbox"] {
<html lang="en">
margin-right: 10px;
<head>
}
<meta charset="UTF-8">
td input[type="submit"] {
<meta name="viewport"
width: 100%;
content="width=device-width, initial-
padding: 10px;
scale=1.0">
font-size: 18px;
<title>Registration Form</title>
background-color: #28a745;
<style>
color: #fff;
body {
border-radius: 10px;
font-family: Arial, sans-serif;
cursor: pointer;
background-color: #f4f4f4;
}
padding: 20px;
td input[type="submit"]:hover {
}
background-color: #218838;
h1 {
}
color: #333;
</style>
text-align: center;
</head>
}
<body>
table {
<h1>Registration Form</h1>
margin: 0 auto;
<form action="#" method="post">
padding: 20px;
<table>
width: 50%;
<tr>
background-color: #fff;
<th>First Name:</th>
}
<td><input type="text"
th, td {
name="firstname"
padding: 10px;
placeholder="Enter your first
text-align: left;
name"></td>
}
</tr>
th {
<tr>
color: #333;
<th>Last Name:</th>
font-size: 18px;
<td><input type="text"
}
name="lastname" placeholder="Enter
td input[type="text"],
your last name"></td>
td input[type="email"],
</tr>
td input[type="password"],
<tr>
td input[type="date"],
<th>Email:</th>
td select {
<td><input type="email"
width: 100%;
name="email" placeholder="Enter
padding: 8px;
your email"></td>
font-size: 16px;
</tr>
background-color: #e6f7ff;
<tr>
border: 1px solid #ccc;
<th>Password:</th>
border-radius: 4px;
<td><input type="password" <option
name="password" value="uk">UK</option>
placeholder="Enter your </select>
password"></td> </td>
</tr> </tr>
<tr> <tr>
<th>Date of Birth:</th> <th></th>
<td><input type="date" <td><input type="submit"
name="dob"></td> value="Register"></td>
</tr> </tr>
<tr> </table>
<th>Gender:</th> </form>
<td> </body>
<input type="radio" </html>
name="gender" value="male"> Male
<input type="radio"
name="gender" value="female">
Female
</td>
</tr>
<tr>
<th>Hobbies:</th>
<td>
<input type="checkbox"
name="hobby1" value="reading">
Reading
<input type="checkbox"
name="hobby2" value="sports">
Sports
<input type="checkbox"
name="hobby3" value="music">
Music
</td>
</tr>
<tr>
<th>Country:</th>
<td>
<select name="country">
<option value="">Select
Country</option>
<option
value="india">INDIA</option>
<option
value="bhutan">BHUTAN</option>
Five.html
<!DOCTYPE html> flex: 1;
<html lang="en"> background-color: #e7e7e7;
<head> padding: 20px;
<meta charset="UTF-8">
<meta name="viewport" }
content="width=device-width, initial- footer {
scale=1.0"> background-color: #333;
<title>Newspaper</title> color: white;
<style> text-align: center;
body { padding: 10px 0;
font-family: Arial, sans-serif; width: 100%;
margin: 0; }
padding: 0; figure {
background-color: #f4f4f4; background-color: #e7f3fe;
} padding: 10px;
header { margin: 0;
background-color: #007BFF; }
color: white; figcaption {
text-align: center; font-size: 0.9em;
padding: 20px 0; color: #555;
} }
nav { table {
background-color: #333; width: 100%;
padding: 10px; margin-top: 20px;
} }
nav a { th,
color: white; td {
padding: 10px 15px; border: 1px solid #ddd;
text-decoration: none; padding: 8px;
} }
nav a:hover { th {
background-color: #575757; background-color: #f2f2f2;
} color: #333;
section { }
display: flex; h1,
margin: 20px; h2,
} h3 {
article { color: #333;
flex: 3; }
background-color: #fff; </style>
padding: 20px; </head>
margin-right: 20px; <body>
} <header>
aside { <h1>Daily News</h1>
<nav> <td>October 6, 2024</td>
<a href="#">Home</a> <td>Moon</td>
<a href="#">World</a> </tr>
<a href="#">Local</a> <tr>
<a href="#">Sports</a> <td>National Sports Day
<a href="#">Entertainment</a> Celebration</td>
</nav> <td>August 29, 2024</td>
</header> <td>Various Locations</td>
<section> </tr>
<article> <tr>
<h2>Breaking News: India <td>Diwali Festival</td>
Launches Chandrayaan-3 Lunar <td>October 31, 2024</td>
Mission</h2> <td>Nationwide</td>
<p>India has successfully </tr>
launched the Chandrayaan-3 mission </table>
to the moon.</p> </article>
<figure> <aside>
<img src="chandrayaan3.JPG" <h2>Popular Articles</h2>
alt="Chandrayaan-3 Mission Image"> <ul>
<figcaption>India's <li><a href="#">India's
Chandrayaan-3 spacecraft preparing Economic Growth Projections for
for launch.</figcaption> 2024</a></li>
</figure> <li><a href="#">Top 10 Tourist
<h3>Latest Updates</h3> Destinations in India</a></li>
<table> </ul>
<tr> </aside>
<th>Event</th> </section>
<th>Date</th> <footer>
<th>Location</th> <p>&copy; 2024 Daily News. All
</tr> Rights Reserved.</p>
<tr> </footer>
<td>Chandrayaan-3 </body>
Landing</td> </html>
Six.html
<!DOCTYPE html> }
<html lang="en"> .calculator {
<head> padding: 20px;
<meta charset="UTF-8"> text-align: center;
<meta name="viewport" width: 300px;
content="width=device-width, initial- }
scale=1.0"> input {
<title>Simple Calculator</title> width: 90%; padding: 8px;
<link rel="stylesheet" margin: 5px 0;
href="styles.css"> }
</head> button {
<body> padding: 10px;
<div class="calculator"> margin: 5px; width: 100px;
<h1>Simple Calculator</h1> background-color: darkturquoise;
<div class="input-section"> }
<input type="number" id="num1" .result-section {
placeholder="Enter number 1"> margin-top: 20px;
<input type="number" id="num2" font-size: 18px;
placeholder="Enter number 2"> }
</div> script.js(6)
<div class="buttons-section"> function calculate(operation) {
<button const num1 =
onclick="calculate('sum')">Sum</butt parseFloat(document.getElementById
on> ('num1').value);
<button const num2 =
onclick="calculate('product')">Produc parseFloat(document.getElementById
t</button> ('num2').value);
<button let result = 0;
onclick="calculate('difference')">Diffe switch (operation) {
rence</button> case 'sum':
<button result = num1 + num2;
onclick="calculate('remainder')">Rem break;
ainder</button> case 'product':
<button result = num1 * num2;
onclick="calculate('quotient')">Quoti break;
ent</button> case 'difference':
<button result = num1 - num2;
onclick="calculate('power')">Power</ break;
button> case 'remainder':
<button result = num1 % num2;
onclick="calculate('squareRoot')">Sq break;
uare Root</button> case 'quotient':
<button result = num1 / num2;
onclick="calculate('square')">Square< break;
/button> case 'power':
</div> result = Math.pow(num1, num2);
<div class="result-section"> break;
<h2>Result: <span case 'squareRoot':
id="result"></span></h2> result = `Square Root of ${num1} =
</div> ${Math.sqrt(num1)}, ${num2} =
</div> ${Math.sqrt(num2)}`;
<script src="script.js"></script> break;
</body> case 'square':
</html> result = `Square of ${num1} =
styles.css(6) ${num1 * num1}, ${num2} = ${num2 *
body { num2}`;
font-family: Arial, sans-serif; break;
justify-content: center; default:
align-items: center; result = "Invalid Operation";
height: 100vh; }
margin: 0; document.getElementById('result').i
display: flex; nnerText = result }
seven.html
<!DOCTYPE html> <button class="btn"
<html lang="en"> id="jsonToObject">Convert
<head> JSON</button>
<meta charset="UTF-8"> <div id="output"></div>
<meta name="viewport" </div>
content="width=device-width, initial- <div class="container">
scale=1.0"> <h2>Convert JSON Date to
<title>JSON Operations with JavaScript Date</h2>
JavaScript</title> <button class="btn"
<style> id="jsonToDate">Convert JSON
body { Date</button>
font-family: Arial, sans-serif; <div id="dateOutput"></div>
padding: 20px; </div>
} <div class="container">
.container { <h2>Convert JSON to CSV and CSV
margin: 20px 0; to JSON</h2>
} <button class="btn"
.btn { id="jsonToCSV">Convert JSON to
padding: 10px 15px; CSV</button>
background-color: #007bff; <button class="btn"
color: white; id="csvToJSON">Convert CSV to
border: none; JSON</button>
cursor: pointer; <div id="csvOutput"></div>
margin-right: 10px; </div>
} <div class="container">
.btn:hover { <h2>Create Hash from String using
background-color: #0056b3; crypto.createHash()</h2>
} <button class="btn"
#output, #csvOutput, #hashOutput id="createHashBtn">Generate Hash
{ (Node.js)</button>
margin-top: 20px; <div id="hashOutput">This will
padding: 15px; work on Node.js only.</div>
background-color: #f4f4f4; </div>
border: 1px solid #ddd; <script>
} document.getElementById('jsonTo
</style> Object').addEventListener('click',
</head> function() {
<body> const jsonString = '{"name":
"Alice", "age": 25, "city": "London"}';
<h1>JSON Operations with const jsonObject =
JavaScript</h1> JSON.parse(jsonString);
<div class="container"> document.getElementById('outp
<h2>Convert JSON to JavaScript ut').innerHTML = 'Name: ' +
Object</h2> jsonObject.name + '<br>Age: ' +
jsonObject.age + '<br>City: ' + });
jsonObject.city; function
}); convertJSONToCSV(jsonArray) {
document.getElementById('jsonTo const headers =
Date').addEventListener('click', Object.keys(jsonArray[0]).join(',');
function() { const rows = jsonArray.map(obj
const jsonDate = '{"date": "2023- => Object.values(obj).join(',')).join('\n');
09-20T15:30:00Z"}'; return headers + '\n' + rows;
const jsonObj = }
JSON.parse(jsonDate); function
const dateObj = new convertCSVToJSON(csvString) {
Date(jsonObj.date); const lines = csvString.split('\n');
document.getElementById('date const headers = lines[0].split(',');
Output').innerHTML = 'Date: ' + const jsonArray =
dateObj.toString(); lines.slice(1).map(line => {
}); const values = line.split(',');
document.getElementById('jsonTo let obj = {};
CSV').addEventListener('click', headers.forEach((header,
function() { index) => {
const jsonArray = [ obj[header] = values[index];
{ name: "Alice", age: 25, city: });
"London" }, return obj;
{ name: "Bob", age: 30, city: });
"Paris" } return jsonArray;
]; }
const csv = document.getElementById('create
convertJSONToCSV(jsonArray); HashBtn').addEventListener('click',
document.getElementById('csvO function() {
utput').innerHTML = '<pre>' + csv + alert("This feature is only
'</pre>'; available in Node.js environment.
}); Please run the script in a Node.js
document.getElementById('csvToJ environment.");
SON').addEventListener('click', });
function() { </script>
const csvString = </body>
"name,age,city\nAlice,25,London\nBo </html>
b,30,Paris"; seven.js
const json = const crypto = require('crypto');
convertCSVToJSON(csvString); const hash =
document.getElementById('csvO crypto.createHash('sha256').update('
utput').innerHTML = '<pre>' + Hello World').digest('hex');
JSON.stringify(json, null, 2) + '</pre>'; console.log('Hash:', hash);
8a.php 8b sql command
<?php CREATE DATABASE school;
$count_file = 'count.txt'; USE school;
if (!file_exists($count_file)) {
file_put_contents($count_file, 0); CREATE TABLE students (
} id INT AUTO_INCREMENT PRIMARY
$count = KEY,
(int)file_get_contents($count_file);
$count++; name VARCHAR(50),
file_put_contents($count_file, grade INT
$count); );
?>
<!DOCTYPE html> INSERT INTO students (name, grade)
<html lang="en"> VALUES
<head> ('Alice', 85),
<meta charset="UTF-8">
<meta name="viewport" ('Bob', 78),
content="width=device-width, initial- ('Charlie', 92),
scale=1.0"> ('David', 65),
<title>Visitor Counter</title>
<style> ('Eve', 88);
body { 8b.php
font-family: Arial, sans-serif; <?php
background-color: #f4f4f4;
margin: 0; $servername = "localhost";
padding: 20px; $username = "root";
} $password = "";
.container {
max-width: 600px; $dbname = "school";
margin: 0 auto; $conn = new mysqli($servername,
background: white;
padding: 20px; $username, $password, $dbname);
border-radius: 8px; if ($conn->connect_error) {
box-shadow: 0 0 10px rgba(0, 0,
0, 0.1); die("Connection failed: " . $conn-
} >connect_error);
h1 { }
text-align: center;
color: #333; $sql = "SELECT * FROM students";
} $result = $conn->query($sql);
p{
font-size: 18px; $students = [];
text-align: center; if ($result->num_rows > 0) {
} while ($row = $result->fetch_assoc())
</style>
</head> {
<body> $students[] = $row;
<div class="container">
<h1>Visitor Counter</h1> }
<p>Number of visitors: } else {
<strong><?php echo $count;
?></strong></p> echo "No records found.";
</div> }
</body> function selectionSort(&$students) {
</html>
$n = count($students);
for ($i = 0; $i < $n - 1; $i++) {
$min_idx = $i;
for ($j = $i + 1; $j < $n; $j++) { text-align: center;
if ($students[$j]['grade'] < }
$students[$min_idx]['grade']) { th {
$min_idx = $j; background-color: #f2f2f2;
} }
} tr:hover {
$temp = $students[$min_idx]; background-color: #f1f1f1;
$students[$min_idx] = }
$students[$i]; </style>
$students[$i] = $temp; </head>
} <body>
} <h1 style="text-align:
selectionSort($students); center;">Sorted Student Records by
?> Grade</h1>
<!DOCTYPE html> <table>
<html lang="en"> <thead>
<head> <tr>
<meta charset="UTF-8"> <th>ID</th>
<meta name="viewport" <th>Name</th>
content="width=device-width, initial- <th>Grade</th>
scale=1.0"> </tr>
<title>Sorted Student </thead>
Records</title> <tbody>
<style> <?php foreach ($students as
body { $student): ?>
font-family: Arial, sans-serif; <tr>
background-color: #f4f4f4; <td><?= $student['id']; ?></td>
margin: 0; <td><?= $student['name'];
padding: 20px; ?></td>
} <td><?= $student['grade'];
table { ?></td>
width: 50%; </tr>
margin: 20px auto; <?php endforeach; ?>
border-collapse: collapse; </tbody>
background-color: white; </table>
box-shadow: 0 0 10px rgba(0, 0, </body>
0, 0.1); </html>
} <?php
th, td { $conn->close();
padding: 10px; ?>
border: 1px solid #ddd;
9.html style.css
<!DOCTYPE html> .container {
<html lang="en"> margin-top: 50px;
<head> }
<meta charset="UTF-8"> #paragraph, #list {
<meta name="viewport" margin: 20px;
content="width=device-width, initial- font-size: 18px;
scale=1.0"> }
<title>jQuery Script Example</title> .box {
<link rel="stylesheet" width: 100px;
href="style.css"> height: 100px;
<script src="jquery- background-color: lightblue;
3.6.0.min.js"></script> margin: 20px auto;
<script src="script.js"></script> display: flex;
</head> justify-content: center;
<body> align-items: center;
<div class="container"> font-weight: bold;
<p id="paragraph">This is an color: white;
example paragraph.</p> }
<ul id="list">
<li>List item 1</li> script.js
<li>List item 2</li> $(document).ready(function() {
</ul> $('#appendButton').click(function() {
<div id="animatedDiv" class="box">I $('#paragraph').append(' Appended
am a div!</div> text.');
<button id="appendButton">Append $('#list').append('<li>New list
Content</button> item</li>');
<button });
id="animateButton">Animate $('#animateButton').click(function() {
Div</button> $('#animatedDiv').animate({
</div> width: '200px',
</body> height: '200px',
</html> opacity: 0.5
}, 1000, function() {
$(this).css('background-color',
'coral');
});
});
});
Ten.html
<!DOCTYPE html> xhr.send();
<html lang="en"> }
<head> function loadTextWithJQuery() {
<meta charset="UTF-8"> $.ajax({
<meta name="viewport" url: "textfile.txt",
content="width=device-width, initial- method: "GET",
scale=1.0"> success: function (data) {
<title>AJAX and JSON $("#content").text(data);
Example</title> },
<style> error: function (error) {
body { console.error("Error loading text
font-family: Arial, sans-serif; file:", error);
display: flex; }
flex-direction: column; });
align-items: center; }
padding: 20px; function loadJSONWithGetJSON() {
} $.getJSON("data.json", function
#content, #json-content { (data) {
margin: 15px 0; let jsonContent = `Name:
padding: 10px; ${data.name}, Age: ${data.age},
border: 1px solid #ddd; Country: ${data.country}`;
width: 300px; $("#json-
background-color: #f9f9f9; content").text(jsonContent);
} });
button { }
padding: 8px 16px; function loadJSONWithParseJSON()
margin: 5px; {
cursor: pointer; $.ajax({
} url: "data.json",
</style> method: "GET",
</head> dataType: "text",
<body> success: function (response) {
<h1>AJAX & JSON Example</h1> const data =
<div id="content">Text Content will $.parseJSON(response);
load here...</div> let jsonContent = `Name:
<button ${data.name}, Age: ${data.age},
onclick="loadTextWithoutJQuery()">L Country: ${data.country}`;
oad Text without jQuery</button> $("#json-
<button content").text(jsonContent);
onclick="loadTextWithJQuery()">Load },
Text with jQuery</button> error: function (error) {
<div id="json-content">JSON console.error("Error loading JSON
Content will load here...</div> file:", error);
<button }
onclick="loadJSONWithGetJSON()">L });
oad JSON with getJSON()</button> }
<button </script>
onclick="loadJSONWithParseJSON()"> </body>
Load JSON with parseJSON()</button> </html>
<script src="jquery.min.js"></script> textfile.txt
<script>
function loadTextWithoutJQuery() { This is a sample text file content
const xhr = new XMLHttpRequest(); loaded via AJAX.
xhr.open("GET", "textfile.txt", true); data.json
xhr.onreadystatechange = function
() { {
if (xhr.readyState === 4 && "name": "John Doe",
xhr.status === 200) { "age": 30,
document.getElementById("cont "country": "USA"
ent").innerText = xhr.responseText; }
}
};

You might also like