1) WriteaHTMLprogramfordemonstratingHyperlinks.
i. Navigationfrom one pageto another.
ii.Navigationwithin thepage.
i)
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Navigation</title>
</head>
<body>
<h1>Navigation to Another Page</h1>
<a href="page2.html">Go to Page 2</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>
</head>
<body>
<h1>Welcome to Page 2</h1>
<p>This is the second page linked from the main page.</p>
<a href="index.html">Go Back to Main Page</a>
</body>
</html>
ii) <!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>Simple Scrollable Navigation</title>
<style>
body {
scroll-behavior: smooth;
}
nav {
position: fixed;
top: 0;
width: 100%;
background: #f2f2f2;
}
a{
margin-right: 10px;
}
section {
margin-top: 60px;
}
</style>
</head>
<body>
<h1 id="top">XYZ College</h1>
<nav>
<a href="#about">About</a>
<a href="#courses">Courses</a>
<a href="#contact">Contact</a>
<a href="#top">Top</a>
</nav>
<section id="about">
<h2>About Us</h2>
<p>XYZ College provides quality education.</p>
</section>
<section id="courses">
<h2>Courses Offered</h2>
<p>Science, Arts, Commerce.</p>
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>Email: info@xyzcollege.edu</p>
</section>
</body>
</html>
2) simple calc
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
<script>
function calculate() {
var num1 = parseFloat(document.getElementById('num1').value);
var num2 = parseFloat(document.getElementById('num2').value);
var operator = document.getElementById('operator').value;
var result;
if (operator === '+') {
result = num1 + num2;
} else if (operator === '-') {
result = num1 - num2;
} else if (operator === '*') {
result = num1 * num2;
} else if (operator === '/') {
result = num2 !== 0 ? num1 / num2 : 'Error: Division by zero';
} else if (operator === '%') {
result = num1 % num2;
}
document.getElementById('result').innerText = 'Result: ' + result;
return false; // Prevent page refresh
}
</script>
</head>
<body>
<h1>Calculator</h1>
<form onsubmit="return calculate()">
<input type="number" id="num1" required>
<input type="text" id="operator" required>
<input type="number" id="num2" required>
<button type="submit">Calculate</button>
</form>
<p id="result"></p>
</body>
</html>
3)Web Page Displaying College Information with Various Style Sheets
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>College Info</title>
<link rel="stylesheet" href="styles.css"> <!-- External CSS -->
<style>
body { background-color: #f4f4f4; } /* Internal CSS */
</style>
</head>
<body>
<h1 style="color: #2c3e50;">XYZ College</h1> <!-- Inline CSS -->
<p>Welcome to XYZ College! We offer various programs.</p>
</body>
</html>
css:
p{
color: #34495e;
}
DHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Form</title>
<style>
body { font-family: Arial, sans-serif; margin: 50px; }
.form-container { width: 300px; margin: 0 auto; }
label, input { display: block; width: 100%; margin-bottom: 10px; }
.error { color: red; font-size: 12px; }
.input-error { border: 2px solid red; background-color: #ffe6e6; }
.success-message { color: green; font-size: 16px; font-weight: bold; text-align: center;
display: none; }
input[type="submit"] {
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
input[type="submit"]:disabled { background-color: #ccc; }
</style>
</head>
<body>
<div class="form-container">
<h2>Simple Form</h2>
<form onsubmit="return submitForm()">
<label for="name">Name:</label>
<input type="text" id="name" oninput="validateForm()">
<div id="nameError" class="error"></div>
<label for="age">Age:</label>
<input type="number" id="age" oninput="validateForm()">
<div id="ageError" class="error"></div>
<label for="occupation">Occupation:</label>
<input type="text" id="occupation" oninput="validateForm()">
<div id="occupationError" class="error"></div>
<input type="submit" id="submitBtn" value="Submit" disabled>
</form>
<div id="successMessage" class="success-message">Form submitted successfully!</div>
</div>
<script>
function validateForm() {
let isValid = true;
// Check if name is empty
if (document.getElementById("name").value == "") {
document.getElementById("nameError").innerText = "Please enter your name.";
isValid = false;
} else {
document.getElementById("nameError").innerText = "";
}
// Check if age is at least 18
if (document.getElementById("age").value < 18) {
document.getElementById("ageError").innerText = "You must be at least 18.";
isValid = false;
} else {
document.getElementById("ageError").innerText = "";
}
// Check if occupation is empty
if (document.getElementById("occupation").value == "") {
document.getElementById("occupationError").innerText = "Please enter your occupation.";
isValid = false;
} else {
document.getElementById("occupationError").innerText = "";
}
// Enable/Disable Submit button
document.getElementById("submitBtn").disabled = !isValid;
return isValid;
}
function submitForm() {
document.getElementById("successMessage").style.display = "block";
document.querySelector("form").reset(); // Reset form after submission
document.getElementById("submitBtn").disabled = true; // Disable the submit button again
return false; // Prevent actual form submission to keep it simple
}
</script>
</body>
</html>
7)xml
<books>
<book>
<title>Learn Java</title>
<author>John Doe</author>
<year>2020</year>
</book>
<book>
<title>Web Development Basics</title>
<author>Jane Smith</author>
<year>2022</year>
</book>
</books>
Xsd
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="books">
<xs:complexType>
<xs:sequence>
<xs:element name="book" maxOccurs="unbounded">
<xs:complexType>
<xs:sequence>
<xs:element name="title" type="xs:string"/>
<xs:element name="author" type="xs:string"/>
<xs:element name="year" type="xs:int"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html"/>
<xsl:template match="/books">
<html>
<head><title>Book List</title></head>
<body>
<h1>Book List</h1>
<ul>
<xsl:for-each select="book">
<li>
<strong><xsl:value-of select="title"/></strong><br/>
Author: <xsl:value-of select="author"/><br/>
Year: <xsl:value-of select="year"/>
</li>
</xsl:for-each>
</ul>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
