OneCompiler

lablab

126
<!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>