Scribd
Upload
3 views7 pages

Practical

The document contains multiple HTML examples demonstrating hyperlink navigation between pages and within a single page, a simple calculator with JavaScript functionality, and a web page displaying college information with various styling methods. Additionally, it includes XML data for books, an XSD schema for validation, and an XSLT stylesheet for transforming the XML into an HTML format. Each section showcases different aspects of web development, including forms, styles, and data representation.

Uploaded by

mariajovana2008
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
3 views7 pages

Practical

The document contains multiple HTML examples demonstrating hyperlink navigation between pages and within a single page, a simple calculator with JavaScript functionality, and a web page displaying college information with various styling methods. Additionally, it includes XML data for books, an XSD schema for validation, and an XSLT stylesheet for transforming the XML into an HTML format. Each section showcases different aspects of web development, including forms, styles, and data representation.

Uploaded by

mariajovana2008
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/ 7

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: [email protected]</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>

You might also like