Scribd
Upload
2 views

Web Technology Lab

Uploaded by

all in 1
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
2 views

Web Technology Lab

Uploaded by

all in 1
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/ 15

Web Technology Lab :

Q1) Write a HTML program for the demonstration of


Lists.
a. Unordered List
b. Ordered List
c. Definition List
d. Nested List
Solution : -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>List Demonstration</title>
</head>
<body>

<h2>Unordered List</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
<h2>Ordered List</h2>
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
<h2>Definition List</h2>
<dl>
<dt>HTML</dt>
<dd>A markup language for creating web
pages</dd>
<dt>CSS</dt>
<dd>A style sheet language used for
presentation of web pages</dd>
</dl>
<h2>Nested List</h2>
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrot</li>
<li>Spinach</li>
</ul>
</li>
</ul>
</body>
</html>
Output :- Unordered List
 Apple
 Banana
 Cherry

Ordered List
1.First
2.Second
3.Third
Nested List
 Fruits
o Apple
o Banana
 Vegetables
o Carrot
o Spinach

Q2) To-Do list


Solution:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>To-Do List</title>
</head>
<body>
<h2>My To-Do List</h2>
<ul>
<li>Finish homework</li>
<li>Buy groceries</li>
<li>Clean the house</li>
<li>Read a book</li>
</ul>
</body>
</html>
Output :-
My To-Do List
 Finish homework
 Buy groceries
 Clean the house
 Read a book

Q3) Calculator :
Solution :-
<!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>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f9;
}
.calculator {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
text-align: center;
}
.calculator h1 {
margin-bottom: 20px;
}
.input-field {
margin: 10px 0;
}
input {
width: 80%;
padding: 8px;
margin: 5px 0;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
background-color: #007BFF;
color: white;
border: none;
padding: 10px 15px;
margin: 5px;
cursor: pointer;
border-radius: 4px;
font-size: 16px;
}
button:hover {
background-color: #0056b3;
}
#result {
margin-top: 15px;
font-size: 18px;
color: #333;
}
</style>
</head>
<body>
<div class="calculator">
<h1>Simple Calculator</h1>
<div class="input-field">
<input type="number" id="num1"
placeholder="Enter first number">
</div>
<div class="input-field">
<input type="number" id="num2"
placeholder="Enter second number">
</div>
<div>
<button
onclick="calculate('+')">+</button>
<button
onclick="calculate('-')">-</button>
<button onclick="calculate('')"></button>
<button
onclick="calculate('/')">/</button>
</div>
<div id="result">Result: </div>
</div>
<script>
function calculate(operator) {
const num1 =
parseFloat(document.getElementById('num1').valu
e);
const num2 =
parseFloat(document.getElementById('num2').valu
e);
const resultDiv =
document.getElementById('result');

if (isNaN(num1) || isNaN(num2)) {
resultDiv.innerText = 'Result: Please
enter valid numbers';
return;
}
let result;
switch (operator) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
if (num2 === 0) {
resultDiv.innerText = 'Result: Cannot
divide by zero!';
return;
}
result = num1 / num2;
break;
default:
result = 'Invalid Operation';
}
resultDiv.innerText = Result: ${result};
}
</script>
</body>
</html>

Q4) Write a HTML program for demonstrating


Hyperlinks.
a. Navigation from one page to another.
b. Navigation within the page.
Solution :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Hyperlinks Example</title>
</head>
<body>

<h2>Hyperlink Demonstration</h2>

<!-- Navigation to another page -->


<a href="https://www.example.com"
target="_blank">Go to Example Website</a>
<hr>

<!-- Navigation within the same page -->


<a href="#section1">Go to Section 1</a>
<a href="#section2">Go to Section 2</a>
<hr>

<h3 id="section1">Section 1</h3>


<p>This is Section 1 content.</p>

<h3 id="section2">Section 2</h3>


<p>This is Section 2 content.</p>
</body>
</html>
Q5 ) Write an internal Document Type Definition to
validate XML for CUSTOMER DETAILS?
Solution :
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE customerDetails [
<!ELEMENT customerDetails (customer+)>
<!ELEMENT customer (name, age, email,
address)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT age (#PCDATA)>
<!ELEMENT email (#PCDATA)>
<!ELEMENT address (#PCDATA)>
]>
<customerDetails>
<customer>
<name>John Doe</name>
<age>30</age>
<email>john.doe@example.com</email>
<address>123 Main St,
Springfield</address>
</customer>
<customer>
<name>Jane Smith</name>
<age>28</age>
<email>jane.smith@example.com</email>
<address>456 Elm St, Springfield</address>
</customer>
</customerDetails>
Output : -
<customerDetails>
<customer>
<name>John Doe</name>
<age>30</age>
<email>john.doe@example.com</email>
<address>123 Main St,
Springfield</address>
</customer>
<customer>
<name>Jane Smith</name>
<age>28</age>
<email>jane.smith@example.com</email>
<address>456 Elm St, Springfield</address>
</customer>
</customerDetails>

You might also like