Scribd
Upload
40 views

Web Technologies (Lab)

Uploaded by

ruchithamt2129
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
40 views

Web Technologies (Lab)

Uploaded by

ruchithamt2129
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/ 14

Web Technologies (LAB) 22MCA24

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).

Program

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Program 1</title>
</head>
<body>
<h1>RNS Institute of Technology</h1>
<hr/>
<h2>MCA Department</h2>
<h3>Faculty Details</h3>
<table border="1">
<tr>
<th>Name</th>
<th>Designation</th>
</tr>
<tr>
<td>Amar</td>
<td>HOD</td>
</tr>
<tr>
<td>Akbar</td>
<td>Associate Professor</td>
</tr>
</table>
<h3>Useful Links</h3>
<a href="https://vtu.ac.in/"><b>VTU</b></a>
<br/><br/>
<img src="image.jpg" width="500" height="300"/>
</body>
</html>

YOGEESH S 1
Web Technologies (LAB) 22MCA24

Output

YOGEESH S 2
Web Technologies (LAB) 22MCA24

2. Develop and demonstrate the usage of inline, external and internal style sheet
using CSS. Use XHTML page that contains at least three paragraphs of text, listed
elements and a table with four rows and four columns.

Program (Program2.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Program 2</title>
<style>
table{
border: 1px solid rgb(136, 136, 136);
}
</style>
</head>
<body>
<h1>My Details</h3>
<p>I am Yogeesh</p>
<p>I am studying at RNSIT</p>
<p></p>

<h1>My Skills</h3>
<ul style="list-style-type: square">
<li>Java</li>
<li>C</li>
<li>C++</li>
<li>SQL</li>
<li>Photoshop</li>
</ul>

<h1>My Education Details</h3>


<table border="1">
<tr>
<th>Qualification</th>
<th>Result</th>
<th>Percentage</th>
<th>Remarks</th>
</tr>
<tr>
<td>SSLC</td>
<td>First Class</td>
<td>67.36%</td>
<td>-</td>

YOGEESH S 3
Web Technologies (LAB) 22MCA24

</tr>
<tr>
<td>PUC</td>
<td>Second Class</td>
<td>55.5%</td>
<td>-</td>
</tr>
<tr>
<td>BCA</td>
<td>Distinction</td>
<td>80%</td>
<td>-</td>
</tr>
</table>
</body>
</html>

Program (style.css)

body{

background-color: beige;

font-family: 'Courier New', Courier, monospace;

Output

YOGEESH S 4
Web Technologies (LAB) 22MCA24

3. 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
Program

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Program 3</title>
</head>
<body>
<h1>Find First N Fibonacci Numbers</h1>
<button onclick="fib()">Generate</button>
<h1>Generate Number And Its Squares</h1>
<button onclick="square()">Generate</button>
</body>
<script>
function fib(){
let n = parseInt(prompt("Enter value for n: "));
let a=0,b=1,c=0;
let output = "Fibaonocci Series\n";
for(i=0;i<n;++i)
{
if(i==0 || i ==1){
output += i+" ";
continue;
}
let c=a+b;
output += c+" ";
a=b;
b=c;
}
alert(output);
}
function square(){
let n = parseInt(prompt("Enter value for n: "));
let output = "Number Square\n";
for(i=1;i<=n;++i)
{
let sqr = i*i;
output += i +" "+sqr+"\n";
}
alert(output);
}

YOGEESH S 5
Web Technologies (LAB) 22MCA24

</script>
</html>

Output

YOGEESH S 6
Web Technologies (LAB) 22MCA24

YOGEESH S 7
Web Technologies (LAB) 22MCA24

4. Develop, test and validate an XHTML document that has checkboxes for apple (59
cents each), orange (49 cents each), and banana (39 cents each) along with submit
button. Each check boxes should have its own onclick event handler. These
handlers must add the cost of their fruit to a total cost. An event handler for the
submit button must produce an alert window with the message „your total cost is
$xxx‟, where xxx is the total cost of the chose fruit, including 5 percent sales tax.
This handler must return „false‟ (to avoid actual submission of the form data).
Modify the document to accept quantity for each item using textboxes.
Programs

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Program 4</title>
</head>
<body>
<table>
<tr>
<td><input type="checkbox" id="apple" onclick="calAppleCost()">Apple(59
cents)</td>
<td>Quantity <input type="number" id="apple_qty"></td>
</tr>
<tr>
<td><input type="checkbox" id="orange" onclick="calOrangeCost()">Orange(49
cents)</td>
<td>Quantity <input type="number" id="orange_qty"></td>
</tr>
<tr>
<td><input type="checkbox" id="banana" onclick="calBananaCost()">Banana(39
cents)</td>
<td>Quantity <input type="number" id="banana_qty"></td>
</tr>
<tr>
<td colspan="3"><button onclick="disp()">Submit</button></td>

</tr>

</table>

YOGEESH S 8
Web Technologies (LAB) 22MCA24

<script>
let appleCost=0,orangeCost=0,bananaCost=0;
function calAppleCost(){
let checked = document.getElementById("apple").checked;
if(checked)
{
appleCost = 0.59*parseFloat(document.getElementById("apple_qty").value);
}
else{
appleCost = 0;
}
console.log(appleCost);
}
function calOrangeCost(){
let checked = document.getElementById("orange").checked;
if(checked)
{
orangeCost = 0.49*parseFloat(document.getElementById("orange_qty").value);
}
else{
orangeCost = 0;
}
console.log(orangeCost);
}

function calBananaCost(){
let checked = document.getElementById("banana").checked;
if(checked)
{
bananaCost = 0.39*parseFloat(document.getElementById("banana_qty").value);
}
else{
bananaCost = 0;
}
console.log(bananaCost);
}

function disp(){
calAppleCost();
calBananaCost();
calOrangeCost();
alert("Your Total cost is $"+(appleCost+orangeCost+bananaCost*0.05));
}
</script>
</body>
</html>

YOGEESH S 9
Web Technologies (LAB) 22MCA24

Output

YOGEESH S 10
Web Technologies (LAB) 22MCA24

5. Develop and demonstrate a HTML file which includes JavaScript that uses functions
for the following problems: a. Parameter: A string Output: The position in the string
of the left-most vowel. b. Parameter: A number Output: The number with its digits
in the reverse order.
Program

<!DOCTYPE html>
<html>
<head>
<title>Program 5</title>
</head>
<body>
<h1>JavaScript Functions Demo</h1>
<script>
function findLeftVowelPos(inputString) {
const vowels = "aeiouAEIOU";
for (let i = 0; i < inputString.length; i++) {
if (vowels.includes(inputString[i])) {
return i + 1;
}
}
return -1;
}

function reverseNumber(number) {
return parseFloat(number.toString().split('').reverse().join(''));
}

const inputString = prompt("Enter a string: ");


const positionOfVowel = findLeftVowelPos(inputString);
alert(`Position of left-most vowel in '${inputString}': ${positionOfVowel}`);

const num = parseInt(prompt("Enter a number to reverse: "));


const rev = reverseNumber(num);
alert(`Original number: ${num}, Reversed number: ${rev}`);
</script>
</body>
</html>

YOGEESH S 11
Web Technologies (LAB) 22MCA24

Output

YOGEESH S 12
Web Technologies (LAB) 22MCA24

6. 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 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

Program

<!DOCTYPE html>
<html>
<head>
<title>Stack Ordering</title>
<style type="text/css">
.layer {
border: solid thick black;
padding: 10px;
width: 300px;
height: 200px;
position: absolute;
z-index: 0;
}
#layer1 { background-color: red; top: 140px; left: 240px; }
#layer2 { background-color: green; top: 120px; left: 220px; }
#layer3 { background-color: blue; top: 100px; left: 200px; }
</style>
</head>
<body>
<p id="layer1" class="layer" onmouseover="mover(layer1);">This is the first layer</p>
<p id="layer2" class="layer" onmouseover="mover(layer2);">This is the middle layer</p>
<p id="layer3" class="layer" onmouseover="mover(layer3);">This is the last layer</p>
<script type="text/javascript">
var topLayer = document.getElementById('layer3');
function mover(toTop) {
topLayer.style.zIndex = "0";
toTop.style.zIndex = "1";
topLayer = toTop;
}
</script>
</body>
</html>

YOGEESH S 13
Web Technologies (LAB) 22MCA24

Output

YOGEESH S 14

You might also like