Scribd
Upload
148 views

17mtcs068-Lab Manual

The document provides instructions and code examples for exercises completed in a Web Technologies lab class. The exercises include: 1) Creating HTML tables with rowspan and colspan tags to split rows and columns. 2) Writing HTML and JavaScript to convert a number entered in a text field to words, checking if it is in the correct range or a valid number. 3) Creating the front page of a newspaper using different text formats and colors in HTML. 4) Writing an ASP program to generate an employee payroll bill using HTML and JavaScript. 5) Calculating student exam totals, averages, and results using JavaScript form inputs and alerts.

Uploaded by

jaya Varman
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
148 views

17mtcs068-Lab Manual

The document provides instructions and code examples for exercises completed in a Web Technologies lab class. The exercises include: 1) Creating HTML tables with rowspan and colspan tags to split rows and columns. 2) Writing HTML and JavaScript to convert a number entered in a text field to words, checking if it is in the correct range or a valid number. 3) Creating the front page of a newspaper using different text formats and colors in HTML. 4) Writing an ASP program to generate an employee payroll bill using HTML and JavaScript. 5) Calculating student exam totals, averages, and results using JavaScript form inputs and alerts.

Uploaded by

jaya Varman
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

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


WEB TECHNOLOGIES LAB 17MTCS068

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>
  <th colspan="2">40</th>
  <th colspan="2">20</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>
WEB TECHNOLOGIES LAB 17MTCS068

<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>
WEB TECHNOLOGIES LAB 17MTCS068
WEB TECHNOLOGIES LAB 17MTCS068

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',
WEB TECHNOLOGIES LAB 17MTCS068
};
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>
WEB TECHNOLOGIES LAB 17MTCS068

Output:
WEB TECHNOLOGIES LAB 17MTCS068

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:
WEB TECHNOLOGIES LAB 17MTCS068
WEB TECHNOLOGIES LAB 17MTCS068

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
WEB TECHNOLOGIES LAB 17MTCS068
<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")
gross_pay = 1400 * no_days_work;
else if(desig == "TL")
gross_pay = 700 * no_days_work;
else
gross_pay = 300 * no_days_work;

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>
WEB TECHNOLOGIES LAB 17MTCS068

Output:
WEB TECHNOLOGIES LAB 17MTCS068
EXERCISE 5:

<!--DOCTYPE html-->
<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/>
var a2= new Number(document.getElementById('p2').value);
<br/>
var a3= new Number(document.getElementById('p3').value);
<br/>
var a4= new Number(document.getElementById('p4').value);
<br/>
var a5= new Number(document.getElementById('p5').value);
<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;
WEB TECHNOLOGIES LAB 17MTCS068

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/>
P2 = <input id="p2" type="number" name="p2" required/><br/>
P3 = <input id="p3" type="number" name="p3" required/><br/>
P4 = <input id="p4" type="number" name="p4" required/><br/>
P5 = <input id="p5" type="number" name="p5" required/><br/>
P6 = <input id="p6" type="number" name="p6" 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/>
WEB TECHNOLOGIES LAB 17MTCS068
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>

You might also like