<!DOCTYPE html>
<html lang="en">
<head>
<title>Inline Styles</title>
</head>
<body>
<h1 style="color: blue; text-align: center;">This is a Heading with Inline Styles</h1>
<p style="font-size: 18px; color: green;">This is a paragraph with inline styles.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Internal Styles</title>
<style>
h1 {
color: red;
text-align: center;
}
p {
font-size: 20px;
color: purple;
}
</style>
</head>
<body>
<h1>This is a Heading with Internal Styles</h1>
<p>This is a paragraph with internal styles.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>External Styles</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>This is a Heading with External Styles</h1>
<p>This is a paragraph with external styles.</p>
</body>
</html>
- [ ] 3
<!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>
</head>
<body>
<h2>Simple Calculator</h2>
<form id="calculatorForm">
<input type="number" id="num1" placeholder="Number 1">
<select id="operation">
<option value="add">+</option>
<option value="subtract">-</option>
<option value="multiply">*</option>
<option value="divide">/</option>
</select>
<input type="number" id="num2" placeholder="Number 2">
<button type="button" onclick="calculate()">Calculate</button>
</form>
<p id="result">Result: </p>
<script>
function calculate() {
var num1 = +document.getElementById('num1').value;
var num2 = +document.getElementById('num2').value;
var op = document.getElementById('operation').value;
var result = eval(num1 + op + num2);
document.getElementById('result').innerText = 'Result: ' + result;
}
</script>
</body>
</html>
- [ ] 4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Squares and Cubes Calculator</title>
</head>
<body>
<h2>Squares and Cubes Calculator</h2>
<table border="1">
<tr>
<th>Number</th>
<th>Square</th>
<th>Cube</th>
</tr>
<script>
for (var i = 0; i <= 10; i++) {
var square = i * i;
var cube = i * i * i;
document.write(`<tr><td>${i}</td><td>${square}</td><td>${cube}</td></tr>`);
}
</script>
</table>
</body>
</html>
5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Animation</title>
<style>
#animatedText { color: red; }
</style>
</head>
<body>
<div id="animatedText">TEXT-GROWING</div>
<script>
var animatedText = document.getElementById('animatedText');
var fontSize = 10;
var growing = true;
function animateText() {
animatedText.style.fontSize = (growing ? fontSize += 2 : fontSize -= 2) + 'pt';
if ((growing && fontSize >= 50) || (!growing && fontSize <= 5)) {
growing = !growing;
animatedText.innerText = growing ? 'TEXT-GROWING' : 'TEXT-SHRINKING';
animatedText.style.color = growing ? 'red' : 'blue';
}
setTimeout(animateText, 100);
}
animateText();
</script>
</body>
</html>
6
Code.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="student.css"?>
<students>
<student>
<sname>Ankush</sname>
<usn>4SF15CS001</usn>
<college>SCEM</college>
<branch>CSE</branch>
<yoj>2015</yoj>
<email>[email protected]</email>
</student>
<student>
<sname>Rayan</sname>
<usn>4SF15CS003</usn>
<college>SCEM</college>
<branch>CSE</branch>
<yoj>2015</yoj>
<email>[email protected]</email>
</student>
<student>
<sname>Pavan</sname>
<usn>4SF15CS006</usn>
<college>SCEM</college>
<branch>CSE</branch>
<yoj>2015</yoj>
<email>[email protected]</email>
</student>
</students>
student.css
students
{
background-color: pink;
font-family: ‘cambria';
}
student
{
display: block;
margin-bottom: 30pt;
margin-left: 0;
}
sname
{
display: block;
font-size: 15pt;
text-transform: uppercase;
color: blue;
}
usn:before
{
content: "USN: ";
font-size: 14pt;
font-weight: bold;
}
usn
{
display: block;
font-size: 14pt;
margin-left: 20pt;
text-transform: uppercase;
color: blueviolet;
}
college:before
{
content: "Affiliated College: ";
font-size: 14pt;
font-weight: bold;
}
college
{
display: block;
font-size: 14pt;
margin-left: 20pt;
color: blueviolet;
}
branch:before
{
content: "Branch: ";
font-size: 14pt;
font-weight: bold;
}
branch
{
display: block;
font-size: 14pt;
margin-left: 20pt;
color: blueviolet;
}
yoj:before
{
content: "Year of Joining: ";
font-size: 14pt;
font-weight: bold;
}
yoj
{
display: block;
font-size: 14pt;
margin-left: 20pt;
color: blueviolet;
}
email:before
{
content: "EMAILID: ";
font-size: 14pt;
font-weight: bold;
}
email
{
display: block;
font-size: 14pt;
margin-left: 20pt;
color: blueviolet;
}
7
<html>
<head>
<title>Visitors Count</title>
<style type="text/css">
h1, h2 {text-align: center}
</style>
</head>
<body>
<h1>Welcome to MY WEB PAGE</h1>
<?php
$file = "count.txt";
$handle = fopen($file, 'r') or die("Cannot Open File: $file");
$count = fread($handle, 10);
fclose($handle);
$count++;
echo "<h2>No of visitors who visited this page: $count</h2>";
$handle = fopen($file, 'w') or die("Cannot Open File: $file");
fwrite($handle, $count);
fclose($handle);
?>
</body>
</html>
8
<html>
<head>
<meta http-equiv="refresh" content="1">
<title>Digital Clock</title>
<style type="text/css">
h1 {text-align: center}
</style>
</head>
<body>
<?php
echo "<h1>Digital Clock</h1>";
echo "<hr/>";
echo "<h1>".date('h:i:s A')."</h1>";
echo "<hr/>";
?>
</body>
</html>
9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator (PHP)</title>
</head>
<body>
<h2>Simple Calculator (PHP)</h2>
<form method="post" action="">
<input type="number" name="num1" placeholder="Number 1" required>
<select name="operation">
<option value="add">+</option>
<option value="subtract">-</option>
<option value="multiply">*</option>
<option value="divide">/</option>
</select>
<input type="number" name="num2" placeholder="Number 2" required>
<button type="submit" name="calculate">Calculate</button>
</form>
<?php
if (isset($_POST['calculate'])) {
$num1 = isset($_POST['num1']) ? $_POST['num1'] : 0;
$num2 = isset($_POST['num2']) ? $_POST['num2'] : 0;
$op = isset($_POST['operation']) ? $_POST['operation'] : 'add';
switch ($op) {
case 'add':
$result = $num1 + $num2;
break;
case 'subtract':
$result = $num1 - $num2;
break;
case 'multiply':
$result = $num1 * $num2;
break;
case 'divide':
$result = ($num2 != 0) ? $num1 / $num2 : 'Cannot divide by zero';
break;
default:
$result = 'Invalid operation';
break;
}
echo '<p>Result: ' . $result . '</p>';
}
?>
</body>
</html>
