Scribd
Upload
48 views21 pages

Weprgms 083422

Web

Uploaded by

Shankar M
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
48 views21 pages

Weprgms 083422

Web

Uploaded by

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

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>&copy; 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>

You might also like