Scribd
Upload
6 views

Web technologies program

The document contains a series of HTML programming exercises for a B.Sc. VI Semester Web Technologies practical course. Each exercise includes code examples for various HTML elements and structures, such as text formatting, lists, tables, forms, and multimedia integration. The exercises aim to teach students how to create web pages using different HTML features and styles.

Uploaded by

khanshoiab376
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
6 views

Web technologies program

The document contains a series of HTML programming exercises for a B.Sc. VI Semester Web Technologies practical course. Each exercise includes code examples for various HTML elements and structures, such as text formatting, lists, tables, forms, and multimedia integration. The exercises aim to teach students how to create web pages using different HTML features and styles.

Uploaded by

khanshoiab376
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/ 25

1

B.Sc. VI Semester- Web


Technologies
Practical Solutions
1.. 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>

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 fivestar cafe</marquee>
<h2 align="center">FIVESTAR 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>

OUTPUT:-
2
3.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>

OUTPUT:-

4.Write a HTML program using phrase element tags


<blockquote>, <cite>, <abbr>,
<acronym>, <kbd>, <address>
<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>
3
</html>
OUTPUT:-

5. 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>
OUTPUT:-
4

6. Write a HTML page that displays ingredients and


instructions to prepare a recipe.
<html>
<head><title>Project: Recipe book</title></head>
<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>
5
<td>oil </td>
<td>1 cup</td>
</tr>
</table>
If you like this recipe follow us, donot forget to subscribe </body>
<html>

OUTPUT:-

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

8. Write a HTML Menu page for Example cafe site.


<html>
<head>
<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&#37;; 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>
7
<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>
</div>
<div class="clear"></div>
</div></body></html>

OUTPUT:-

9. 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>
OUTPUT:-
8

10. 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>web technologies</td>
<td>maths</td>
<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>web technologies</td>
<td>maths</td>
<td>web<br>

<td>phy/stats<br>
<td>chem<br>
9
</tr>
<td align="center">WEDNESDAY</td>
<td>web technologies</td>
<td>maths</td>
<td>web<br>
<td>phy/stats<br>
<td>chem<br>
</tr>
<td align="center">THURSDAY</td>
<td>web technologies</td>
<td>maths</td>
<td>web<br>
<td>phy/stats<br>
<td>chem<br>
</tr>
<td align="center">FRIDAY</td>
<td>web technologies</td>
<td>maths</td>
<td>web<br>
<td>phy/stats<br>
<td>chem<br>
</tr>
<td align="center">SATURDAY</td>
<td>web technologies</td>
<td>maths</td>
<td>web<br>
<td>phy/stats<br>
<td>chem<br>
</tr>
</body>
</html>

OUTPUT:-

11.Write a HTML program to create a form using text


10
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>
</body>
</html>

OUTPUT:-
11

12.Write a HTML program to create frames and


links between frames.
<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>
</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>

OUTPUT:-
12

13.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>
</html>
external style sheet:
13
<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;
}

14.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 {
14
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>

15.Write a HTML program to create your college web


site using multi column layouts.
<html>
<head>
<style>
body {
15
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>GNANODAYA DEGREE AND P.G EDUCATIONAL INSTITUTIONS</h1>
</div>
<p>It is one of the top reputed college, having great faculties </p>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>DEGREE</h2>
<ol>
<li>BSC(MPCS/MCCS)</li>
<li>BCOM</li>
<li>BZC/MZC</li>
<li>BACA</li>
</li>
</ol>
</div>
<div class="column" style="background-color:#bbb;">
<h2>PG</h2>
16
<ol>
<li>MSC(COMPUTERS)</li>
<li>MCOM</li>
</li>
</ol>
</div>
</body>
</html>

17.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">
</form></body>
</html>

OUTPUT:-

18.Write a JavaScript program to calculate area of


rectangle using function.
<html>
<head>
<title>Area of Rectangle</title>
17
</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'>")
document.write(" The Area of Rectangle is " + solving_area + "</font>");
document.write("<h3> End of Program </h3>");
</script>
</body>
</html>
OUTPUT:-

19.Write a JavaScript program to wish good morning,


good afternoon, good evening
depending on the current time.
<html>
<head>
18
<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').innerHTM
L = '<b>' + greet + '</b> and welcome to web
techlogies lab';
</script>
</html>
OUTPUT:-
Good Afternoon and welcome to web techlogies lab

20. Write a JavaScript program using switch case?


<html>
<head></head>
<BODY>
<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"; break;
case 4: day = "Thursday"; break;
case 5: day = "Friday";
break;
default: day = "Saturday";
}
19
document.write("today is"+'&nbsp'+day);
</script>
</BODY>
</html>

OUTPUT:-
today is Saturday

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

OUTPUT:-

22. Write a JavaScript programs using


any 5 events. onclick:
<html>
<head>
<script type = "text/javascript">
function sayHello() {
alert("Hello World")
}
</
20
script>
</head>
<body>
<p>Click the following button and see result</p>
<form>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</form>
</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>
onerr
or:
<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");
21
}
function out() {
document.write ("Mouse Out");
}
</script>
</head>
<body>
<p>Bring your mouse inside the division to see the result:</p>
<div onmouseover = "over()" onmouseout = "out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>
23.Write a JavaScript program using JavaScript built in
objects.
<html>
<head></head>
<body>
<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>
</body>
22
</html>

OUTPUT:-
9
7.25
-0.9880316240928618
8
3.141592653589793
15
everyo
everyone
10
1
9.656
123
123

24.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.");
name.focus();
return false;
}
if (address.value == "")
{
23
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();
return false;
}
return true;
}</script>
<style>
GNANODAYA DEGREE COLLEGE {
margin-left:
70px; font-
24
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>
<option>BA</option>
</select></p><br><br>
<p>Comments: <textarea cols="55" name="Comment">
25
</textarea></p>
<p><input type="submit" value="send" name="Submit">
<input type="reset" value="Reset" name="Reset">
</p>
</form>
</body>
</html>

You might also like