Scribd
Upload
3 views8 pages

HTML Questions Set3 Output

The document contains multiple HTML and XML files demonstrating JavaScript event handling, date, math, and string object functionalities, as well as teacher and bookstore data structures. The HTML files include scripts for interactive buttons and displaying results, while the XML files define structured data for teachers and books with associated CSS for styling. Overall, it showcases practical examples of web programming and data representation.

Uploaded by

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

HTML Questions Set3 Output

The document contains multiple HTML and XML files demonstrating JavaScript event handling, date, math, and string object functionalities, as well as teacher and bookstore data structures. The HTML files include scripts for interactive buttons and displaying results, while the XML files define structured data for teachers and books with associated CSS for styling. Overall, it showcases practical examples of web programming and data representation.

Uploaded by

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

Question 18

File Content (Plain Text):


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>
Event Handling Example
</title>
</head>
<body style="font-family: Arial; text-align: center; margin-top: 50px;">
<h2>
JavaScript Event Handling Example
</h2>
<button onclick="showMessage()" style="padding:10px 20px;">
Click Me
</button>
<br/>
<br/>
<div onmouseout="resetColor(this)" onmouseover="changeColor(this)" style="width:200px; height:100px
Hover Over Me
</div>
<script>
function showMessage() {
alert("Button clicked! This is an onclick event.");
}

function changeColor(element) {
[Link] = "lightgreen";
[Link] = "Mouse Over!";
}

function resetColor(element) {
[Link] = "lightblue";
[Link] = "Hover Over Me";
}
</script>
</body>
</html>

[Rendered Output Placeholder]


Question 19

File Content (Plain Text):


<html>
<head>
<title>
Date, Math, and String Object Example
</title>
</head>
<body style="font-family: Arial; margin: 40px;">
<h2>
JavaScript Date, Math, and String Object Functions
</h2>
<button onclick="showResults()">
Click to Show Results
</button>
<p id="output" style="white-space: pre-line; background:#f0f0f0; padding:15px; border-radius:8px;">
</p>
<script>
function showResults() {
let result = "";

let today = new Date();


result += "■ DATE OBJECT:\n";
result += "Current Date: " + today + "\n";
result += "Year: " + [Link]() + "\n";
result += "Month (0-11): " + [Link]() + "\n";
result += "Date: " + [Link]() + "\n";
result += "Day (0=Sun): " + [Link]() + "\n";
result += "Hours: " + [Link]() + "\n";
result += "Minutes: " + [Link]() + "\n";
result += "Seconds: " + [Link]() + "\n\n";

result += "■ MATH OBJECT:\n";


result += "PI: " + [Link] + "\n";
result += "Square Root of 25: " + [Link](25) + "\n";
result += "Power (2^3): " + [Link](2,3) + "\n";
result += "Round(4.6): " + [Link](4.6) + "\n";
result += "Ceil(4.2): " + [Link](4.2) + "\n";
result += "Floor(4.8): " + [Link](4.8) + "\n";
result += "Absolute(-10): " + [Link](-10) + "\n";
result += "Random (0–1): " + [Link]().toFixed(3) + "\n";
result += "Max(5,8,2): " + [Link](5,8,2) + "\n";
result += "Min(5,8,2): " + [Link](5,8,2) + "\n\n";

let str = "JavaScript is Fun!";


result += "■ STRING OBJECT:\n";
result += "Original String: " + str + "\n";
result += "Length: " + [Link] + "\n";
result += "Uppercase: " + [Link]() + "\n";
result += "Lowercase: " + [Link]() + "\n";
result += "Character at index 4: " + [Link](4) + "\n";
result += "Index of 'is': " + [Link]("is") + "\n";
result += "Substring (0,10): " + [Link](0,10) + "\n";
result += "Slice (4,10): " + [Link](4,10) + "\n";
result += "Replace 'Fun' with 'Awesome': " + [Link]("Fun", "Awesome") + "\n";
result += "Split by space: " + [Link](" ") + "\n";
result += "Trim Example: '" + " Hello World ".trim() + "'\n";

[Link]("output").innerText = result;
}
</script>
</body>
</html>

[Rendered Output Placeholder]


Teacher XML

File Content (Plain Text):


<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="[Link]"?>
<!DOCTYPE teachers [
<!ELEMENT teachers (teacher+)>
<!--ELEMENT teacher (name, subject, qualification, experience, email)-->
<!--ATTLIST teacher id ID #REQUIRED-->
<!--ELEMENT name (#PCDATA)-->
<!--ELEMENT subject (#PCDATA)-->
<!--ELEMENT qualification (#PCDATA)-->
<!--ELEMENT experience (#PCDATA)-->
<!--ELEMENT email (#PCDATA)-->
]&gt;
<teachers>
<teacher id="t1">
<name>
Rajesh Sharma
</name>
<subject>
Mathematics
</subject>
<qualification>
[Link], [Link]
</qualification>
<experience>
10 years
</experience>
<email>
[Link]@[Link]
</email>
</teacher>
<teacher id="t2">
<name>
Anita Verma
</name>
<subject>
English
</subject>
<qualification>
M.A, [Link]
</qualification>
<experience>
8 years
</experience>
<email>
[Link]@[Link]
</email>
</teacher>
<teacher id="t3">
<name>
Vikram Singh
</name>
<subject>
Computer Science
</subject>
<qualification>
[Link], [Link]
</qualification>
<experience>
6 years
</experience>
<email>
[Link]@[Link]
</email>
</teacher>
</teachers>

[Rendered Output Placeholder]


Teacher CSS

File Content (Plain Text):


teachers {
display: block;
font-family: Arial, Helvetica, sans-serif;
background-color: #f6f8fa;
color: #222;
padding: 20px;
margin: 20px;
}

teachers:before {
content: "Teacher Details";
display: block;
font-size: 1.8rem;
font-weight: bold;
color: #0a1f44;
margin-bottom: 15px;
}

teacher {
display: block;
background-color: #ffffff;
border: 1px solid #d9e2ec;
border-radius: 8px;
padding: 12px 18px;
margin-bottom: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

teacher > name {


display: block;
font-size: 1.2rem;
font-weight: bold;
color: #003366;
margin-bottom: 5px;
}

teacher > subject,


teacher > qualification,
teacher > experience,
teacher > email {
display: block;
font-size: 1rem;
color: #333;
margin-bottom: 4px;
}

teacher > email {


color: #0a5fc1;
}

[Rendered Output Placeholder]


Bookstore XML

File Content (Plain Text):


<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="[Link]"?>
<!DOCTYPE bookstore [
<!ELEMENT bookstore (book+)>
<!--ELEMENT book (title, author, genre, price, publish_date, description?)-->
<!--ATTLIST book id ID #REQUIRED-->
<!--ELEMENT title (#PCDATA)-->
<!--ELEMENT author (#PCDATA)-->
<!--ELEMENT genre (#PCDATA)-->
<!--ELEMENT price (#PCDATA)-->
<!--ELEMENT publish_date (#PCDATA)-->
<!--ELEMENT description (#PCDATA)-->
]&gt;
<bookstore>
<book id="b1">
<title>
Learning JavaScript
</title>
<author>
R. Smith
</author>
<genre>
Programming
</genre>
<price>
449.00
</price>
<publish_date>
2024-08-15
</publish_date>
<description>
A practical guide to modern JavaScript with examples.
</description>
</book>
<book id="b2">
<title>
HTML &amp; CSS Cookbook
</title>
<author>
A. Kumar
</author>
<genre>
Web Development
</genre>
<price>
399.00
</price>
<publish_date>
2023-11-01
</publish_date>
<description>
Recipes and patterns for building responsive websites.
</description>
</book>
<book id="b3">
<title>
Data Structures Made Easy
</title>
<author>
J. Patel
</author>
<genre>
Computer Science
</genre>
<price>
599.00
</price>
<publish_date>
2022-05-10
</publish_date>
<description>
Clear explanations of common data structures with examples.
</description>
</book>
</bookstore>

[Rendered Output Placeholder]


Bookstore CSS

File Content (Plain Text):


html, body {
font-family: Arial, Helvetica, sans-serif;
background: #f8f9fb;
margin: 20px;
color: #222;
}

bookstore {
display: block;
max-width: 900px;
margin: 0 auto;
}

book {
display: block;
background: #ffffff;
border: 1px solid #e0e6ef;
box-shadow: 0 2px 4px rgba(20,30,50,0.05);
padding: 14px 18px;
margin: 12px 0;
border-radius: 8px;
}

book > title {


display: block;
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 4px;
color: #0f1724;
}

book > author,


book > genre {
display: inline-block;
font-size: 0.95rem;
color: #475569;
margin-right: 12px;
}

book > price {


display: block;
margin-top: 8px;
font-weight: 700;
color: #0b642b;
}

book > publish_date {


display: inline-block;
font-size: 0.85rem;
color: #6b7280;
margin-left: 8px;
}

book > description {


display: block;
margin-top: 10px;
font-size: 0.98rem;
line-height: 1.4;
color: #111827;
}

bookstore:before {
content: "Bookstore Catalog";
display: block;
font-size: 1.6rem;
font-weight: 800;
margin: 0 0 12px 0;
color: #0b1220;
}
@media (max-width: 480px) {
book {
padding: 10px 12px;
}
book > title { font-size: 1.05rem; }
}

[Rendered Output Placeholder]

You might also like