Scribd
Upload
2 views

Web Technology Lab

Uploaded by

all in 1
Copyright
© © All Rights Reserved
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
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>[email protected]</email>
<address>123 Main St,
Springfield</address>
</customer>
<customer>
<name>Jane Smith</name>
<age>28</age>
<email>[email protected]</email>
<address>456 Elm St, Springfield</address>
</customer>
</customerDetails>
Output : -
<customerDetails>
<customer>
<name>John Doe</name>
<age>30</age>
<email>[email protected]</email>
<address>123 Main St,
Springfield</address>
</customer>
<customer>
<name>Jane Smith</name>
<age>28</age>
<email>[email protected]</email>
<address>456 Elm St, Springfield</address>
</customer>
</customerDetails>

You might also like