WT lab
WEB TECHNOLOGIES LAB JOURNAL
1.Create an XHTML page that provides information about your department. Your XHTML page
must use the
following tags: a) Text Formatting tags b) Horizontal rule c) Meta element d) Links e) Images f)
Tables (Use of additional tags encouraged).--!
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Information about the MCA Department" />
<title>Department Information</title>
</head>
<body>
<h1 style="text-align: center; color: navy;">Welcome to the MCA Department</h1>
<hr />
<p><strong>About Us:</strong> The <em>MCA Department</em> is dedicated to providing
quality education and fostering innovation. Our programs are designed to develop skills and
knowledge required to excel in various engineering fields.</p>
<h2>Our Mission</h2>
<p>We aim to:</p>
<ul>
<li>Deliver high-quality education.</li>
<li>Encourage research and innovation.</li>
<li>Collaborate with industries for practical exposure.</li>
</ul>
<h2>Courses Offered In our institution</h2>
<table border="1" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th>Course Name</th>
<th>Duration</th>
<th>Eligibility</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bachelor of Engineering (B.E)</td>
<td>4 Years</td>
<td>10+2 with Physics, Chemistry,Mathematics and cs</td>
</tr>
<tr>
<td>Master of Business Administration (MBA)</td>
<td>2 Years</td>
<td>BBA,BCA,B.Sc</td>
</tr>
<tr>
<td>Doctor of Philosophy (Ph.D.)</td>
<td>Minimum 3 Years</td>
<td>M.Tech or equivalent</td>
</tr>
</tbody>
</table>
<h2>Contact Us</h2>
<p>For more information, please visit our <a href="https://klecet.edu.in/" target="_blank">official
website</a> or reach out to us via email at <a
href="mailto:info@engineeringcollege.edu">info@engineeringcollege.edu</a>.</p>
<h2>Gallery</h2>
<p>Take a look at some of our campus images below:</p>
<img src="klecet2.jpg" alt="Campus Image 1" width="300" height="200" />
<img src="klecet1.jpg" alt="Campus Image 2" width="300" height="200" />
<h2>Visit Us</h2>
<p>Our campus is located in out of the city, for students college transportation facility is available.
See the map below for directions:</p>
<a
href="https://www.google.com/maps/place/K.L.E.+College+of+Engineering+%26+Technology/@16.4
407594,74.600103,15.52z/data=!4m6!3m5!1s0x3bc0c21b94947f8b:0xb26d98fea8c2b6c8!8m2!3d16
.4379515!4d74.6108676!16s%2Fg%2F11bwjbyx8m?entry=ttu&g_ep=EgoyMDI1MDExNS4wIKXMDSo
ASAFQAw%3D%3D">
<img src="map.jpg" alt="Campus Location Map" width="400" height="300" />
</a>
</body>
</html>
OUTPUT:
2. Develop and demonstrate a XHTML file that includes Javascript script for the following
problems:
a) Input : A number n obtained using prompt Output : The first n Fibonacci numbers
b) Input : A number n obtained using
prompt Output : A table of numbers from 1 to n and their squares using alert
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript Fibonacci and Table</title>
<script type="text/javascript">
function generateFibonacci() {
var n = parseInt(prompt("Enter a number to generate Fibonacci sequence:"), 10);
if (isNaN(n) || n <= 0) {
alert("Please enter a valid positive number.");
return;
}
var fib = [0, 1];
for (var i = 2; i < n; i++) {
fib[i] = fib[i - 1] + fib[i - 2];
}
alert("First " + n + " Fibonacci numbers: " + fib.slice(0, n).join(", "));
}
function generateTable() {
var n = parseInt(prompt("Enter a number to generate squares table:"), 10);
if (isNaN(n) || n <= 0) {
alert("Please enter a valid positive number.");
return;
}
var output = "Number | Square\n";
for (var i = 1; i <= n; i++) {
output += i + " | " + (i * i) + "\n";
}
alert(output);
}
</script>
</head>
<body>
<h1>JavaScript Fibonacci and Table Generator</h1>
<button onclick="generateFibonacci()">Generate Fibonacci Sequence</button>
<button onclick="generateTable()">Generate Square Table</button>
</body>
</html>
OUTPUT:
WTLAB-3
Develop and demonstrate, using JavaScript script, a XHTML document that contains three short
paragraphs of
text, stacked on top of each other, with only enough of each showing so that the mouse cursor can
be placed over
some part of them. When the cursor is placed over the exposed part of any paragraph, it should
rise to the top to
become completely visible. Modify the above document so that when a text is moved from the top
stacking
position, it returns to its original position rather than to the bottom--!>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Simple Paragraph Hover Effect</title>
<style>
.container {
position:absolute ;<!--The position property in CSS controls how an element is placed in the
document.The element stays in the normal flow, but you can move it using top, left, right, or bottom.
--!>
width: 300px;
height: 120px;
overflow: hidden;<!--Hides any content that extends beyond the container’s height.--!>
}
.paragraph {
position: relative;<!--The element is removed from the normal flow and positioned relative to
its nearest positioned ancestor--!>
width: 100%;
padding: 10px;
background-color: lightgray;
border: 1px solid black;
transition: top 0.3s;
}
#p1 { top: 0px; z-index: 3; }
#p2 { top: 40px; z-index: 2; }
#p3 { top: 80px; z-index: 1; }
</style>
<script>
function bringToTop(id) {
var paragraphs = document.querySelectorAll(".paragraph");
var para = document.getElementById(id);
// Restore all paragraphs to their original positions
paragraphs.forEach((p, index) => {
p.style.top = (index * 40) + "px";
p.style.zIndex = 1;
});
// Bring the hovered paragraph to the top
para.style.top = "0px";
para.style.zIndex = 3;
}
</script>
</head>
<body>
<div class="container">
<p id="p1" class="paragraph" onmouseover="bringToTop('p1')">Paragraph 1</p>
<p id="p2" class="paragraph" onmouseover="bringToTop('p2')">Paragraph 2</p>
<p id="p3" class="paragraph" onmouseover="bringToTop('p3')">Paragraph 3</p>
</div>
</body>
</html>