17mtcs068-Lab Manual

WEB TECHNOLOGIES LAB 17MTCS068
SCHOOL OF COMPUTER SCIENCE AND ENGINEERING

BHARATHIDASAN UNIVERSITY, TIRUCHIRAPPALLI – 620023
III - B.Tech. CSE

SUBJECT CODE: 17MTCS068
SUBJECT: WEB TECHNOLOGIES LAB
FACULTY NAME: Dr. M. DURAIRAJ

EXERCISE 1:
Write a HTML coding to create table with rows & columns. Split them using
Rowspan and Colspan tags.
Procedure:
Coding:
<html>
<head><title> COLSPAN FOR MULTI-COLUMN HEADING</title></head>
<body>
<table>
<caption>Life Expectancy By Current Age</caption>
tr>
<th colspan="2">65</th>
</tr>
<tr>
<th>Men</th>
<th>Women</th>
<th>Men</th>
<th>Women</th>
<th>Men</th>
<th>Women</th>
</tr>
<tr>
<td>82</td>
<td>85</td>
<td>78</td>
<td>82</td>
<td>77</td>
<td>81</td>
</tr>
</table>
</body>
</html>
<html>
<head><title> rowspan</title>
</head>
<body>
<table> <caption>Favorite and Least Favorite Things</caption>
<tr> <th></th><th></th>
<th>Bob</th>
<th>Alice</th>
</tr>
<tr>
<th rowspan="2">Favorite</th>
<th>Color</th>
<td>Blue</td>
<td>Purple</td>
</tr>
<tr>
<th>Flavor</th>
<td>Banana</td>
<td>Chocolate</td>
</tr>
<tr>
<th>Least Favorite</th>
<th>Color</th>
<td>Yellow</td>
<td>Pink</td>
</tr>
<tr>
<th>Flavor</th>
<td>Mint</td>
<td>Walnut</td>
</tr>
</table>
</body>
</html>
EXERCISE 2:
Write an HTML page with Javascript that takes a number from one text field
in the range 0-999 and display it in other text field in words.If the number is
out of range ,it shold show “out of range” and if it is not a number ,it should
show “not a number” message in the result box.
Conver.html
<script language="javascript">
function convert_number_to_words(number)
{
hyphen = '-';
conjunction = ' and ';
separator = ', ';
dictionary = {
0 : 'zero',
1 : 'one',
2 : 'two',
3 : 'three',
4 : 'four',
5 : 'five',
6 : 'six',
7 : 'seven',
8 : 'eight',
9 : 'nine',
10 : 'ten',
11 : 'eleven',
12 : 'twelve',
13 : 'thirteen',
14 : 'fourteen',
15 : 'fifteen',
16 : 'sixteen',
17 : 'seventeen',
18 : 'eighteen',
19 : 'nineteen',
20 : 'twenty',
30 : 'thirty',
40 : 'fourty',
50 : 'fifty',
60 : 'sixty',
70 : 'seventy',
80 : 'eighty',
90 : 'ninety',
100 : 'hundred',
};
if (number < 0 || number > 999)
{
alert("Enter a number range between 0 and 999");
return "";
}
switch (true)
{
case (number < 21):
string = dictionary[number];
Break;
case (number < 100):
tens = parseInt(number / 10) * 10;
units = number % 10;
string = dictionary[tens];
if (units) {
string += hyphen + dictionary[units];
}
Break;
case (number < 1000):
hundreds = parseInt(number / 100);
remainder = number % 100;
string = dictionary[hundreds] + ' ' + dictionary[100];
if (remainder) {
string += conjunction + convert_number_to_words(remainder);
}
Break;
Default:
Break;
}
return string;
}
a=prompt("Enter a number");
num=parseInt(a);
document.write(convert_number_to_words(num));
</script>
Output:
EXERCISE 3:
Create a web page in the format of Front page of a News paper using Text
links. Align the text with colors.

<html>
<head>
<title>News Paper</title>
</head>
<body bgcolor="black">
<font face="Bradley Hand ITC" color="white" size="5">Front page of the News
Paper</font>
<br>
<font face="Cooper Black" color="green" size="4">You are learning Web
Designing</font>
<font face="broadway" color="red" size="6">You are learning Web Designing</font>
<font face="Aerial" color="yellow" size="8"> You are learning Web Designing</font>
<font face="Comic Sans MS" color="purple" size="10"> You are learning Web
Designing</font>
</body>
</html>
Output:
EXERCISE 4:
Write an ASP program to prepare Employee Pay Bill using HTML and Java
Script.
Program:
<html>
<style>
body,p {
font-family:arial;
font-size:16px;
font-weight:bolder;
}
.container {
width: 500px;
clear: both;
}
.container input {
width: 100%;
clear: both;
}
</style>
<div class="container">
<body>
<h3> Payroll System </h3>
<br/>Employee's Name
<input type="text" id="emp_name" name="emp_name">
<br>
<br/> Designation
<input list="des" id = "design"/>
<datalist id="des">
<option value="MD">
<option value="HR">
<option value="TL">
<option value="TM">
</datalist>
<br/>
<br>
<br/> Number of Days Work
<input type="number" id="no_days_work" name="no_days_work">
<br>
<br>
<button onclick="solve_salary()">Solve Salary</button>
<br><br>
<p id="demo"></p>
<p id="demo2"></p>
</div>
<script>
function solve_salary() {
var emp_name = document.getElementById("emp_name").value;
var desig= document.getElementById("design").value;
var no_days_work = document.getElementById("no_days_work").value;
var gross_pay;
if(desig == "MD")
gross_pay = 2350 * no_days_work;
else if(desig == "HR")
else if(desig == "TL")
else
results = "Employee's Name : " + emp_name + ".";

results2 = "Salary of the current Month : &#8377 " +
gross_pay.toFixed(2)+".";
document.getElementById("demo").innerHTML = results;
document.getElementById("demo2").innerHTML = results2;
}
</script>
</body>
</html>
Output:
EXERCISE 5:

<html>
<head>
<style>
body{
margin-top:60px;
margin-bottom:60px;
margin-left:200px;
margin-right:200px;
background-color: grey ;
color: beige;
font-weight: bold;
font-family: Lucida;
text-align: center;
}
</style>
<script >
function Calc(){
var total,average;
var a1= new Number(document.getElementById('p1').value);

<br/>
<br/>
<br/>
<br/>
<br/>
var a6=new Number( document.getElementById('p6').value);
<br/>
total = a1 + a2 + a3 + a4 + a5 + a6;
var check = prompt("shall it continue?");

if(check=="yes")
{
document.getElementById('totM').value = total;
average = total/6;
document.getElementById('avgM').value = average;
if(average>60)
{
document.getElementById('res').value = "Pass";
}
else
{
document.getElementById('res').value = "Fail";
}
}
else
alert("cancelled");
</script>
</head>
<body>
<form>
Welcome to the Result evaluation system</h1><br/><br/>
Enter the Details of the student:<br/>
Course: <input list="course" id = "good"/>

<datalist id="course">
<option value="Mtech">
<option value="MCA">
</datalist>
<br/>
Regno.: <input id="regno" type="text" name="regno"/><br/>
Name : <input id="sname" type="text" name="sname"/><br/>
Enter the Subject Marks:<br/>
P1 = <input id="p1" type="number" name="p1" required/><br/>
<input type="button" onclick="Calc()" value="Submit"> <input type="button"

onclick="window.print()" value="print"> <br/><br/>
TOTAL - MARKS :<input id="totM" type="number" name="totM"/><br/>
PERCENTAGE% :<input id="avgM" type="number" name="avgM"/><br/><br/>
Result :<input id="res" type="text" name="res" ><br/>
<meta http-equiv="refresh" content="60" />
</form>
</body>
</html>

17mtcs068-Lab Manual

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

17mtcs068-Lab Manual

Uploaded by

Copyright:

Available Formats

WEB TECHNOLOGIES LAB 17MTCS068

SCHOOL OF COMPUTER SCIENCE AND ENGINEERING

III - B.Tech. CSE

FACULTY NAME: Dr. M. DURAIRAJ

links. Align the text with colors.

results = "Employee's Name : " + emp_name + ".";

var a1= new Number(document.getElementById('p1').value);

var check = prompt("shall it continue?");

Enter the Details of the student:<br/>

Course: <input list="course" id = "good"/>

<input type="button" onclick="Calc()" value="Submit"> <input type="button"

You might also like