1
B.Sc. VI Semester- Web Technologies
Practical Solutions
1.a. Write a HTML program using basic text formatting tags,<p>, <br>, <pre>.
<html>
<head> <title> text formatting tags</title> </head>
<body>
<p>hello world</p> <br>
<pre>we are bsc students</pre>
</body>
</html>
b. Write a HTML page for Example Cafe using above text formatting tags.
<html>
<head><title>cafe</title></head>
<body text="red" background="D:\yellow.jpg">
<marquee>welcome to siri cafe</marquee>
<h2 align="center">SIRI CAFE</h2> <br>
<table border=2 align="center">
<tr>
<th>SNO</th><th>ITEM</th><th>PRICE</th></tr>
<tr>
<td>1</td> <td>milk</td> <td>6 Rs</td></tr>
<td>2</td> <td>tea</td> <td>4 Rs</td> </tr>
<td>3</td> <td>coffee</td> <td>10 Rs</td></tr>
</body>
</html>
2.a.Write a HTML program using presentational element tags <b>, <i>, <strike>,
<sup>, <sub>, <big>, <small>, <hr>
<html>
<head><title>presentational elements</title></head>
<body>
<b>hello world</b><br>
<i>hello world</i><br>
<strike>hello world</strike><br>
2<sup>3</sup><br>
H<sub>2</sub>O <br>
<big>hello world</big><br>
<small>hello world</small><br>
<hr>horizonal ruler</hr>
</body>
</html>
b.Write a HTML program using phrase element tags <blockquote>, <cite>,
<abbr>,
<acronym>, <kbd>, <address>
2
<html>
<head>
<title>phrase elements</title>
</head>
<body>
<blackquote>hello world</blackquote><br>
<cite>su computers forum</cite><br>
<abbr>html</abbr>
<acronym>xml</acronym>
<kbd>su computers forum</kbd>
<address>
1-1,ramnagar, karimnagar
</address>
</body>
</html>
3.a. Write a HTML program using different list types.
<html>
<head>
<p>ordered list</p>
<ol type="1">
<li>mango</li>
<li>banana</li>
<li>apple</li>
</ol>
<p>unordered list</p>
<ul type="disc">
<li>mango</li>
<li>banana</li>
<li>apple</li>
</ul>
<p>data definition list</p>
<dl>
<dt>html</dt>
<dd>hyper text markup language</dd>
<dt>xml</dt>
<dd>extensible markup language</dd>
</dl>
</head>
</html>
b. Write a HTML page that displays ingredients and instructions to prepare a
recipe.
<html>
<head><title>Project: Recipe book</title></head>
3
<body background="D:\yellow.jpg" text="red">
<h3 align="center">SIRI RECIPE</h3>
<img src="D:\palak.png" alt="palak-paneer" height=100 width=100>
<ol type="1">
<p>Making Steps</p>
<li>Boil spinach in a pressure cooker and grind it to make palak puree.</li>
<li>Heat oil in a pan and fry paneer cubes in it until golden brown.</li>
<li>Remove the paneer cubes and put cumin, when it splutters, add bay leaf.</li>
<li>When it starts to crackle add ginger, garlic and onion paste.</li>
</ol>
<table border ="1">
<caption >Ingredients:</caption>
<tr><th>item</th>
<th>Qty</th></tr>
<tr>
<td>spinach</td>
<td>1 kg</td>
</tr>
<tr>
<td>paneer</td>
<td> 200 grms </td>
</tr>
<tr>
<td>oil </td>
<td>1 cup</td>
</tr>
</table>
If you like this recipe follow us, donot forget to subscribe </body>
<html>
4.a. Write a HTML program using grouping elements <div> and <span>.
<html>
<head>
<div style="background-color:skyblue;color:red;padding:20px;">
<h2>HTML</h2>
<p>It is stands for hypertext markup language</p>
</div>
<h1>hello <span style="color:red">this line displays in red
color</span> ok</h1>
</head>
</html>
b. Write a HTML Menu page for Example cafe site.
<html>
<head>
4
<title>Three DIVs</title>
<style type="text/css">
div.container {width:900px; margin:auto}
div.left {float:left; width:278px; padding:10px;background:red;border:1px dotted
#0f0;}
div.center {float:left; width:278px; padding:10px;background:skyblue;border:1px
dotted
#f00;}
div.right {float:right; width:278px; padding:10px;background:yellow;border:1px dotted
#00f;}
div.clear{width:100%; clear:both;}
</style>
</head>
<body>
<h1 align="center">RAM CAFE</h1>
<font color="orange"><h3>Today's Menu</h3></font>
<div class="container" >
<div class="left">
<h1> Menu 1</h1>
<h5 align="center">TIFFINS</h5>
<ul>
<li>Idly</li>
<li>Poori </li>
<li>Dosha</li>
</ul>
</div>
<div class="center">
<h1>Menu 2</h1>
<h5 align="center">MEALS</h5>
<ul>
<li>chapathi</li>
<li>Rice</li>
<li>Alu biryani</li>
</ul>
</div>
<div class="right">
<h1>Menu 3</h1>
<h5 align="center">DRINKS</h5>
<ul>
<li>Thums up</li>
<li>Appy</li>
<li>purple 3</li>
</ul>
5
</div>
<div class="clear"></div>
</div>
</body>
</html>
5.a. Write a HTML program using images, audios, videos.
<html>
<head>
</head>
<body>
<img src="d:\yellow.jpg" alt="yellow page">
<audio src="E:\oracle recordings\DBA audios\1.mp3" controls>
Your browser doesn't support HTML 5 audio.
</audio>
<video control>
<source src="E:\Redmi Note 5\video\sakshith.mp4" type="video/mp4;
codecs='avc1,
mp4a'">
</video>
</body>
</html>
b. Write a HTML program to create your time table.
<html>
<head>
<title>time table</title>
</head>
<body bgcolor="skyblue">
<H2><FONT COLOR="red"><CENTER>COLLEGE TIME TABLE FOR
MPCS/MSTCS</FONT></H2>
<table border="2" cellspacing="3" align="center">
<tr>
<td align="center">
<td>9:30-10:20</td>
<td>10:20-11:10</td>
<td>11:10-11:20</td>
<td>11:20-12:10</td>
<td>12:10-1:00</td>
<td>1:00-1:50</td>
</tr>
<tr>
<td align="center">MONDAY</td>
<td>soft engg</td>
<td>maths</td>
6
<td rowspan="6"align="center"/td>L<br>U<br>N<br>C<br>H
<td>web<br>
<td>phy/stats<br>
<td>chem<br>
</tr>
<td align="center">TUESDAY</td>
<td>soft engg</td>
<td>maths</td>
<td>web<br>
<td>phy/stats<br>
<td>chem<br>
</tr>
<td align="center">WEDNESDAY</td>
<td>soft engg</td>
<td>maths</td>
<td>web<br>
<td>phy/stats<br>
<td>chem<br>
</tr>
<td align="center">THURSDAY</td>
<td>soft engg</td>
<td>maths</td>
<td>web<br>
<td>phy/stats<br>
<td>chem<br>
</tr>
<td align="center">FRIDAY</td>
<td>soft engg</td>
<td>maths</td>
<td>web<br>
<td>phy/stats<br>
<td>chem<br>
</tr>
<td align="center">SATURDAY</td>
<td>soft engg</td>
<td>maths</td>
<td>web<br>
<td>phy/stats<br>
<td>chem<br>
</tr>
</body>
</html>
7
6.Write a HTML program to create a form using text inputs, password inputs,
multiple line text input, buttons, check boxes, radio buttons, select boxes, file
select boxes.
<html>
<body >
<form>
<label for="username">Username:</label>
<input type="text" name="username" id="username"> <br><br>
<label for="user-pwd">Password:</label>
<input type="password" name="user-password" id="user-pwd">
<br><br>
Address:<br>
<textarea id="msg" name="user_message"></textarea> <br>
SELECT GENDER
<br>
<input type="radio" name="gender" id="male">
<label for="male">Male</label><br>
<input type="radio" name="gender" id="female">
<label for="female">Female</label> <br>
<label for="country">Country:</label>
<select name="country" id="country">
<option value="India">India</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Australia">Australia</option>
</select> <br>
<label for="fileselect">Upload:</label>
<input type="file" name="upload" id="fileselect">
</form>
</html>
</body>
7. Write a HTML program to create frames and links between frames.
create the page with web.html
<html>
<head>
</head>
<body>
<h1>web technologies</h1>
<ol>
<li>HTML</li>
<li>DHTML</li>
<li>JAVA SCRIPT</li>
<li>OBJECTS IN JS</li>
<a href="info.html">plz click here to know about web</a>
8
</body>
</html>
create below page with info.html
<html>
<head>
<title>information</title>
</head>
<body>
<h1>WEB TECHNOLOGIES</h1>
<ul>
<li>Web is nothing but internet</li>
<li>We are accessing the webpages through internet</li>
<li>Internet is network of networks</li>
</ul>
</body>
</html>
8. Write a HTML program to create different types of style sheets.
inline style sheet:
<html>
<body>
<p> it is inline style sheet</p>
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
embedded style sheet:
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
</style>
</head>
<body>
<h1 style="color:blue;margin-left:30px;">This is a embedded style
sheet</h1>
<p>This is a paragraph.</p>
</body>
9
</html>
external style sheet:
<html>
<head>
<link rel="stylesheet" type="text/css" href="D:\one.css">
<h1 style="color:blue;font-size:40pt;">This is a external style sheet</h1>
<p>This is a paragraph.</p>
</head>
</html>
---below file name one.css---
body {
background-color: red;
}
h1 {
color: blue;
margin-left: 20px;
9. Write a HTML program to create CSS on links, lists, tables and generated
content.
<html>
<head>
<style>
a{
color: hotpink;
}
</style>
</head>
<body>
<ol>
<li>college data</li>
<li>web marks<li>
</ol>
<p><b><a href="marks.html" >click here to go marks
table</a></b></p>
</body>
</html>
save the below file with marks.html
<html>
<head>
<style>
table, td, th {
border: 2px solid black;
}
table {
10
border-collapse: collapse;
width: 50%;
}
th {
height: 50px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>sai</td>
<td>web</td>
<td>99</td>
</tr>
<tr>
<td>samreen</td>
<td>web</td>
<td>99</td>
</tr>
<tr>
<td>srilatha</td>
<td>web</td>
<td>100</td>
</tr>
<tr>
<td>shanth kumar</td>
<td>web</td>
<td>100</td>
</tr>
</table>
</body>
</html>
10. Write a HTML program to create your college web site using multi column
layouts.
<html>
<head>
<style>
11
body {
margin: 0;
}
/* Style the header */
.header {
background-color: red;
padding: 10px;
text-align: center;
}
*{
box-sizing: border-box;
}
.column {
float: left;
width: 50%;
padding: 10px;
height: 400px;
}
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<body background="D:\yellow.jpg">
<div class="header">
<h1>SU COMPUTERS FORUM GROUP OF INSTITUTIONS</h1>
</div>
<p>It is one of the top reputed college, having great faculties and it is owned by Dr.
Ravinder Rao Garu.</p>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>DEGREE</h2>
<ol>
<li>BSC</li>
<li>BCOM</li>
<li>BZC</li>
</li>
</ol>
</div>
<div class="column" style="background-color:#bbb;">
12
<h2>PG</h2>
<ol>
<li>MSC CS</li>
<li>MCOM</li>
<li>MSC MATHS</li>
</li>
</ol>
</div>
</body>
</html>
11. Write a HTML program to create login form and verify username and
password.
<html>
<body >
<form>
<center>login form</center>
<label for="username">Username:</label>
<input type="text" name="username" id="username"> <br><br>
<label for="user-pwd">Password:</label>
<input type="password" name="user-password" id="user-pwd"><br>
<input type="button" value="submit" name="submit">
12. Write a JavaScript program to calculate area of rectangle using function.
<html>
<head>
<title>Area of Rectangle</title>
</head>
<style>
h3 {
font-family:arial;
};
</style>
<body>
<script>
var length = parseInt(prompt("Enter length of Rectangle : "));
var width = parseInt(prompt("Enter width of Rectangle : "));
var solving_area = (length * width);
document.write("<br>");
document.write("<h3> Area of Rectangle</h3>");
document.write("<font face='arial' size='3'>")
document.write(" The Length of Rectangle is " + length + "</font><br>");
document.write("<font face='arial' size='3'>")
document.write(" The Width of Rectangle is " + width + ".</font><br><br>");
document.write("<font face='arial' size='3'>")
13
document.write(" The Area of Rectangle is " + solving_area + "</font>");
document.write("<h3> End of Program </h3>");
</script>
</body>
</html>
13. Write a JavaScript program to wish good morning, good afternoon, good
evening
depending on the current time.
<html>
<head>
<title>Greeting Message using JavaScript</title>
</head>
<body>
<label id="lblGreetings"></label>
</body>
<script>
var myDate = new Date();
var hrs = myDate.getHours();
var greet;
if (hrs < 12)
greet = 'Good Morning';
else if (hrs >= 12 && hrs <= 17)
greet = 'Good Afternoon';
else if (hrs >= 17 && hrs <= 24)
greet = 'Good Evening';
document.getElementById('lblGreetings').innerHTML =
'<b>' + greet + '</b> and welcome to web techlogies lab';
</script>
</html>
14. a. Write a JavaScript program using switch case?
<html>
<head>
<script>
var day;
switch (new Date().getDay())
{
case 0: day = "Sunday";
break;
case 1: day = "Monday";
break;
case 2: day = "Tuesday";
break;
case 3: day = "Wednesday";
14
break;
case 4: day = "Thursday";
break;
case 5: day = "Friday";
break;
default: day = "Saturday";
}
document.write("today is"+' '+day);
</script>
</head>
</html>
b. Write a JavaScript program to print multiplication table of given number using
loop.
<html>
<head>
<script type='text/javascript'>
var num = prompt("Enter Number", "0") //prompt user to enter the
number
var num = parseInt(num); //parse the num to number
var i = 0;
document.write('<table border="1" cellspacing="0">');
for(i=1;i<10;i++) {
document.write("<tr><td>" + num + " x " + i + " = " + num*i + "</td></tr>");
}
document.write("</table>");
</script>
</head>
<html>
15. a. Write a JavaScript programs using any 5 events.
onclick:
<html>
<head>
<script type = "text/javascript">
function sayHello() {
alert("Hello World")
}
</script>
</head>
<body>
<p>Click the following button and see result</p>
<form>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</form>
15
</body>
</html>
onload:
<html>
<head><title> onload</title>
<script>
function onload()
{
alert("page is loaded");
}
</script>
</head>
<body onload="onload()">
<p>this is onload function</p>
</body>
</html>
onerror:
<html>
<body>
<img src="image.gif" onerror="myFunction()">
<p>A function is triggered if an error occurs when loading the image. The function
shows an alert box with a text</p>
<script>
function myFunction() {
alert('The image could not be loaded.');
}
</script>
</body>
</html>
Mouse over and Mouse out:
<html>
<head>
<script type = "text/javascript">
function over() {
document.write ("Mouse Over");
}
function out() {
document.write ("Mouse Out");
}
</script>
</head>
<body>
<p>Bring your mouse inside the division to see the result:</p>
16
<div onmouseover = "over()" onmouseout = "out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>
b. Write a JavaScript program using JavaScript built in objects.
<html>
<head>
<script type="text/javascript">
document.write(Math.pow(3,2) + "<br />");
document.write(Math.abs(-7.25) + "<br />");
document.write(Math.sin(30) + "<br />");
document.write(Math.sqrt(64) + "<br />");
document.write(Math.PI+"<br />");
var txt = "hello, everyone";
document.write(txt.length+ "<br />");
document.write(txt.slice(7,13)+ "<br />");
document.write(txt.slice(7)+ "<br />");
var d = new Date()
document.write(d.getDate()+"<br />");
document.write(d.getMonth()+"<br />");
var x = 9.656;
document.write(x.toString()+"<br>");
document.write((123).toString()+"<br>");
document.write((100 + 23).toString()+"<br>");
</script>
</head>
</html>
16. Write a JavaScript program to create registration Form with Validations.
<html>
<head>
<script>
function SU COMPUTERS FORUM()
{
var name = document.forms["RegForm"]["Name"];
var email = document.forms["RegForm"]["EMail"];
var phone = document.forms["RegForm"]["Telephone"];
var what = document.forms["RegForm"]["Subject"];
var password = document.forms["RegForm"]["Password"];
var address = document.forms["RegForm"]["Address"];
if (name.value == "")
{
window.alert("Please enter your name.");
17
name.focus();
return false;
}
if (address.value == "")
{
window.alert("Please enter your address.");
name.focus();
return false;
}
if (email.value == "")
{
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (email.value.indexOf("@", 0) < 0)
{
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (email.value.indexOf(".", 0) < 0)
{
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (phone.value == "")
{
window.alert("Please enter your telephone number.");
phone.focus();
return false;
}
if (password.value == "")
{
window.alert("Please enter your password");
password.focus();
return flase;
}
if (what.selectedIndex < 1)
{
alert("Please enter your course.");
what.focus();
18
return false;
}
return true;
}</script>
<style>
SU COMPUTERS FORUM {
margin-left: 70px;
font-weight: bold ;
float: left;
clear: left;
width: 100px;
text-align: left;
margin-right: 10px;
font-family:sans-serif,bold, Arial, Helvetica;
font-size:14px;
}
div {
box-sizing: border-box;
width: 100%;
border: 100px solid black;
float: left;
align-content: center;
align-items: center;
}
form {
margin: 0 auto;
width: 600px;
}</style></head>
<body>
<h1 style="text-align: center"> REGISTRATION FORM </h1>
<form name="RegForm" action="/submit.php" onsubmit="return SU COMPUTERS
FORUM()" method="post">
<p>Name: <input type="text" size=65 name="Name"> </p><br>
<p> Address: <input type="text" size=65 name="Address"> </p><br>
<p>E-mail Address: <input type="text" size=65 name="EMail"> </p><br>
<p>Password: <input type="text" size=65 name="Password"> </p><br>
<p>Telephone: <input type="text" size=65 name="Telephone"></p><br>
<p>SELECT YOUR COURSE </p>
<select type="text" value="" name="Subject">
<option>BTECH</option>
<option>BBA</option>
<option>BCA</option>
<option>B.COM</option>
19
<option>BA</option>
</select></p><br><br>
<p>Comments: <textarea cols="55" name="Comment">
</textarea></p>
<p><input type="submit" value="send" name="Submit">
<input type="reset" value="Reset" name="Reset">
</p>
</form>
</body>
</html>
