Epcet 21csl481
Epcet 21csl481
TECHNOLOGY
LAB MANUAL
WEB TECHNOLOGY LABORATORY
WEB TECHNOLOGY LABORATORY
Subject Code 21CSL481
3. Write a necessary HTML code for Time Table. This should look similar to the one below
4. Implement a simple HTML code with the use of different CSS selectors.
5. Create a Registration form using HTML code. This should look similar to the one below
6. Write a JavaScript to design a simple calculator to perform the following operations:
sum, product, difference and quotient.
7. Write a JavaScript that calculates the squares and cubes of the numbers from 0 to
10and outputs HTML text that displays the resulting values in an HTML table format.
8. Write a JavaScript code that displays text “TEXT-GROWING” with increasing font size in
the interval of 100ms in RED COLOR, when the font size reaches 50pt it displays “TEXT-
SHRINKING” in BLUE color. Then the font size decreases to 5pt.
9. Develop and demonstrate a HTML5 file that includes JavaScript script that uses
functions for the following problems:
a. Parameter: A string
c. Parameter: A number
<html>
<head>
<title>
Welcome to HTML classes
</title>
<body>
<h1> Hello,World!</h1>
<p>This is a paragraph</p>
<p>
<font color="blue">How are you?</font>
</p>
<p>
<b> This is a bold text </b><br>
<i> This is a italic text </i><br>
<u> This is a underlined text </u><br>
</p>
</body>
</head>
</html>
Output
<html>
<head>
<title>
Hello,World!
</title>
<body>
<h1>Subjects for fourth semester </h1>
<h2>Mathematics</h2>
<ul>
<li>Statistics</li>
<li>Probability</li>
<li>Integration</li>
</ul>
<h2>Operating Systems</h2>
<ul>
<li>Process</li>
<li>Threads</li>
</ul>
<h2>Other Subjects are</h2>
<ol>
<li>DAA</li>
<li>MCES</li>
<li>UHV</li>
</ol>
<img src="hai.jpg" alt="Rabbit" alt="Hello">
</body>
</head>
</html>
Output
Prog3 : Tables
<!DOCTYPE html>
<html>
<body>
<h1>TIME TABLE</h1>
<table border="5" cellspacing="0" align="center">
<!--<caption>Timetable</caption>-->
<tr>
<td align="center" height="50"
width="100"><br>
<b>Day/Period</b></br>
</td>
<td align="center" height="50"
width="100">
<b>I<br>9:30-10:20</b>
</td>
<td align="center" height="50"
width="100">
<b>II<br>10:20-11:10</b>
</td>
<td align="center" height="50"
width="100">
<b>III<br>11:10-12:00</b>
</td>
<td align="center" height="50"
width="100">
<b>12:00-12:40</b>
</td>
<td align="center" height="50"
width="100">
<b>IV<br>12:40-1:30</b>
</td>
<td align="center" height="50"
width="100">
<b>V<br>1:30-2:20</b>
</td>
<td align="center" height="50"
width="100">
<b>VI<br>2:20-3:10</b>
</td>
<td align="center" height="50"
width="100">
<b>VII<br>3:10-4:00</b>
</td>
</tr>
<tr>
<td align="center" height="50">
<b>Monday</b></td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Mat</td>
<td align="center" height="50">Che</td>
<td rowspan="6" align="center" height="50">
<h2>L<br>U<br>N<br>C<br>H</h2>
</td>
<td colspan="3" align="center"
height="50">LAB</td>
<td align="center" height="50">Phy</td>
</tr>
<tr>
<td align="center" height="50">
<b>Tuesday</b>
</td>
<td colspan="3" align="center"
height="50">LAB
</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Che</td>
<td align="center" height="50">Mat</td>
<td align="center" height="50">SPORTS</td>
</tr>
<tr>
<td align="center" height="50">
<b>Wednesday</b>
</td>
<td align="center" height="50">Mat</td>
<td align="center" height="50">phy</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Che</td>
<td colspan="3" align="center"
height="50">LIBRARY
</td>
</tr>
<tr>
<td align="center" height="50">
<b>Thursday</b>
</td>
<td align="center" height="50">Phy</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Che</td>
<td colspan="3" align="center"
height="50">LAB
</td>
<td align="center" height="50">Mat</td>
</tr>
<tr>
<td align="center" height="50">
<b>Friday</b>
</td>
<td colspan="3" align="center"
height="50">LAB
</td>
<td align="center" height="50">Mat</td>
<td align="center" height="50">Che</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Phy</td>
</tr>
<tr>
<td align="center" height="50">
<b>Saturday</b>
</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Che</td>
<td align="center" height="50">Mat</td>
<td colspan="3" align="center"
height="50">SEMINAR
</td>
<td align="center" height="50">SPORTS</td>
</tr>
</table>
</body>
</html>
Output
Prog 4 :Use of CSS with selectors
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS: Selecting by class</title>
<style>
h2 {
color: rgb(0, 232, 15);
}
#rabbits-info-heading {
background-color: purple;
}
p{
color: rgb(191, 0, 255);
}
#rabbits-song {
background-color: yellow;
}
.hai {
background-color: #34495e;
}
</style>
</head>
<body>
<p>Rabbits are little creatures with long ears and puffy tails, and they move
their nose up and down in an adorable way. They eat the most orange vegetables
in <em>our</em> world, and <strong>they reproduce more than any human
<em>ever</em> has</strong>.</p>
<h2>Songs</h2>
Output
Prog 5 : Form Elements
<!doctype html>
<html>
<head>
<title> HTML Form</title>
<style>
th{
font-size:30px;
background-color:#FFA;
color:red;
}
td{
padding: 2px 15px;
background-color:#0CF;
}
*{
font-size:16px;
}
</style>
</head>
<body>
<form>
<table border="3" cellspacing="5px">
<tr> <th colspan="2"> Registration Form </th> </tr>
<tr> <td>Enter Name</td>
<td> <input class="" type="text" /> </td>
</tr>
<tr> <td>Enter Password</td>
<td><input type="password" /></td></tr>
<tr> <td>Enter Address</td>
<td><textarea rows="3"></textarea></td></tr>
<tr> <td>Gender</td><td>
<input type="radio" name ="s1" checked="true" /> Male
<input type="radio" name ="s1"/> Female
</td></tr>
<tr><td colspan="2">
<input type="button" value="Click Me" style="width:33%;
height:40px;" />
<input type="reset" style="width:32%; height:40px;" />
<input type="submit" value="Submit Form" style="width:33%;
height:40px;" />
</td></tr>
</table>
</form>
</body>
</html>
Output
Prog 6 Calculator
<html>
<head>
<title>Calculator</title>
<style>
body
{
margin:150px;
}
input{
width:100%;
height:100%;
}
</style>
<script>
function display(x){
document.getElementById("text1").value+=x;
}
function compute(){
var x =
document.getElementById("text1").value;
document.getElementById("text1").value =
eval(x);
}
</script>
</head>
<body>
<center>
<form>
<table border="1" bgcolor="lime">
<tr>
<th colspan=4><h1>Calculator</h1></th>
</tr>
<tr >
<td colspan=4><input type="text"
id="text1" placeholder="0" style="text-align:right;"/></td>
</tr>
<tr>
Output
Prog 7.Squares and Cubes
<html>
<head>
<style> table,tr, td
width: 33%;
text-align: center;
</style>
<script>
document.write( "<tr><td>Number</td><td>Square</td><td>Cube</td></tr>"
);
document.write( "</table>" ) ;
</script>
</head>
</html>
Output
<html>
<head>
<style>
p{
position: absolute;
top: 50%;
left: 50%;
</style>
</head>
<body>
<p id="demo"></p>
<script>
var fs = 5;
function inTimer() {
ids.innerHTML = 'TEXT GROWING'; ids.setAttribute('style', "font-size: " + fs + "px;
color: red"); fs += 5;
if(fs >= 50 ){
clearInterval(var1);
function deTimer() {
fs -= 5;
clearInterval(var2);
}
</script>
</body>
</html>
Output
<html>
<body>
<script type="text/javascript">
if(!(isNaN(str)))
var num,rev=0,remainder;
num = parseInt(str);
while(num!=0) {
remainder = num%10;
num = parseInt(num/10);
else
str = str.toUpperCase();
if(chr == 'A' || chr == 'E' || chr == 'I' || chr == 'O' || chr == 'U')break;
}
else
</script>
</body>
</html>
Output