[go: up one dir, main page]
Scribd
Upload
4 views19 pages

Practical Programs Web

The document contains a series of HTML programming exercises for a B.Sc. VI Semester Web Technologies course, covering various topics such as text formatting, presentational elements, lists, forms, frames, and stylesheets. Each section includes code examples demonstrating the use of specific HTML tags and attributes. The exercises aim to provide practical experience in creating web pages with different functionalities and layouts.

Uploaded by

bharathpappula201
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views19 pages

Practical Programs Web

The document contains a series of HTML programming exercises for a B.Sc. VI Semester Web Technologies course, covering various topics such as text formatting, presentational elements, lists, forms, frames, and stylesheets. Each section includes code examples demonstrating the use of specific HTML tags and attributes. The exercises aim to provide practical experience in creating web pages with different functionalities and layouts.

Uploaded by

bharathpappula201
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

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&#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>
<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"+'&nbsp'+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>

You might also like