Scribd
Upload
38 views36 pages

Webdesing Lab Part-A&b

Uploaded by

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

Webdesing Lab Part-A&b

Uploaded by

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

Part A Web Programming Lab HTML

WEB PROGRAMMING LAB PART- A


HTML LABORATORY MANUAL

Department of Computer Science , GSC 1


Part A Web Programming Lab HTML

PROGRAM 1

<!-- A Program to illustrate body and pre tags -->

<html>
<head>
<title> body and pre tag </title>
</head>
<body text="red" bgcolor="yellow" background="Desert.jpg">
This is an Illustration of body tag with its properties <pre>

This text uses


pre tag and preserves
nextline and spaces </pre>

This text doesnt uses


pre tag so doesnt preserves
nextline and spaces.. everything
will be printed in the same line
</body>
</html>
OUTPUT

Department of Computer Science , GSC 2


Part A Web Programming Lab HTML

PROGRAM 2

<!-- A Program to illustrate text Font tag -->

<html>
<title> Font tag Example </title>
<body>
<font face="arial" size="1" color="blue"> WELCOME </font> <br>
<font size="2" color="cyan"> WELCOME </font> <br>
<font size="3" color="red"> WELCOME </font> <br>
<font size="4" color="yellow"> WELCOME </font> <br>
<font size="5" color="green"> WELCOME </font> <br>
<font size="6" color="brown"> WELCOME </font> <br>
<font size="7" color="pink"> WELCOME </font> <br>
<font size="20" color="gray"> WELCOME </font> <br>
</body>
</html>
OUTPUT

Department of Computer Science , GSC 3


Part A Web Programming Lab HTML

PROGRAM 3

<!-- A Program to illustrate comment,h1….h6, and div tag -->

<html>
<head>
<title> Illustrating comment, h1...h6 and div tags </title>
</head>
<body>

<!-- THIS IS A COMMENT LINE -->

<div style="color:#00ff00">
<h1 align="center"> This is h1 tag text with center aligned
</h1> <h2 align="left"> This is h2 tag text with left aligned
</h2> <h3 align="right">This is h3 tag text with right aligned
</h3> </div>

<h4> This is h4 tag text without alignment</h4>


<h5> This is h5 tag Text without alignment </h5>
<h6> This is h6 tag text without alignment </h6>

</body>
</html>
OUTPUT

Department of Computer Science , GSC 4


Part A Web Programming Lab HTML

PROGRAM 4

<!-- A Program to illustrate text formatting tags -->

<html>
<head>
<title> Text Tags </title>
</head>
<body>
<center>
<h1 align="center">To illustrate text formatting tags </h1>
<hr color="red">
<P> <marquee behavior="alternate"> This is an alternate Marquee text
</marquee>
<p> This is <i> italized </i> </p>
<p> This is <u> underlined </u> </p>
<p> This is <b> bold </b> </p>
<p> This is <em> emphasized </em> </p>
<p>This is <Strong> Strong Text </strong> </p>
<p> This is <s> striked text </s> </p>
<p> This is <code> computer code </code> </p>
<p> This is <sup> superscript </sup> code </p>
<p> This is <sub> subscript </sub> code </p>
<p> This is <big> big text </big> </p>
<p> This is <small> small text </small> </p>
</center>
</body>
</html>

Department of Computer Science , GSC 5


Part A Web Programming Lab HTML

OUTPUT

Department of Computer Science , GSC 6


Part A Web Programming Lab HTML

PROGRAM 5

<!-- A Program to illustrate Order List tag -->

<html>
<head>
<title> Order List tag </title>
</head>
<body>
<h3 align="center" style="color:red">To illustrate ORDER list tags</h3>
<hr COLOR="RED">
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

<h4>Uppercase Letters list:</h4>


<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

<h4>Lowercase letters list:</h4>


<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

<h4>Roman numbers list:</h4>


<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
Department of Computer Science , GSC 7
Part A Web Programming Lab HTML

</ol>

<h4>Lowercase Roman numbers list:</h4>


<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>
OUTPUT

Department of Computer Science , GSC 8


Part A Web Programming Lab HTML

PROGRAM 6

<!-- A Program to illustrate Unorder List tag -->

<html>
<title> Unorder List </title>
</head>
<body>
<h3 align="center"> To illustrate unorder list tags </h3>
<hr color="red">

<h4>Disc bullets list:</h4>


<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

<h4>Circle bullets list:</h4>


<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

<h4>Square bullets list:</h4>


<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

</body>
</html>

Department of Computer Science , GSC 9


Part A Web Programming Lab HTML

OUTPUT

Department of Computer Science , GSC 10


Part A Web Programming Lab HTML

PROGRAM 7

<!-- A Program to illustrate Nested and Definition tag -->

<html>
<head>
<title> Nested and Definition List <title>
</head>
<body>
<h3 align="center"> To illustrate Nested and Definition List Tags </h3>
<hr color="red">
<h4> An ordered nested List: </h4>
<ol>
<li> Coffee </li>
<li> Tea
<ol type= "a">
<li> Black tea </li>
<li> Green tea </li>
<ol type= "i" >
<li> China </li>
<li> Africa </li>
</ol>
</ol>
<li> Milk </li>
</ol>
<h4> A Definition List: </h4>
<dl>
<dt> Bangalore </dt>
<dd> -Capital City of Karnataka </dd>
<dt> Mumbai</dt>
<dd> -Capital city of Maharashtra </dd>
</dl>
</body>
</html>

Department of Computer Science , GSC 11


Part A Web Programming Lab HTML

OUTPUT

Department of Computer Science , GSC 12


Part A Web Programming Lab HTML

PROGRAM 8

<!-- A Program to illustrate Img tag -->

<html>
<head>
<title> Image Tag </title>
</head>
<body>

<h3 align="center" style="color:red"> To illustrate image tags</h3>


<hr> <p>
<img src="flower.bmp" align="right" height="100" width="100"/>
This image is right aligned with the text </p>

<br><br><br><br><hr>
<p>
<img src="flower.bmp" align="left" height="100" width="100"/>
This image is left aligned with the text </p>

<br><br><br><br><hr>
This image is center aligned with the text.
<img src="flower.bmp" align="middle" height="100" width="100"/>
<br><br><br><br><hr>
This image is bottom aligned with the text.
<img src="flower.bmp" align="bottom" height="100" width="100"/>
<br><br><br><br><hr>
This image is top aligned with the text.
<img src="flower.bmp" align="top" height="100" width="100"/>

</body>
</html>

Department of Computer Science , GSC 13


Part A Web Programming Lab HTML

OUTPUT

Department of Computer Science , GSC 14


Part A Web Programming Lab HTML

PROGRAM 9

<!-- A Program to illustrate Hyper Link tag (Anchor tag) -->

Home.html
<html>
<head>
<title> Link Tag </title>
</head>
<title>
<body>
<h3 align="center" style="color:red">To illustrate link Tags</h3> <hr>
Text as a link/hyperlink to another page : <a href="page1.html "> Click
here!!!</a> <hr>
Image as a link/hyperlink :<a href="page1.html">
<img src="flower.bmp" width="32" height="32" align="bottom"/></a>
<hr>
<p>
<a href="#C8">See also Chapter 8 ( link within a page
)</a> </p>
<h2>Chapter 1</h2>
<p>This chapter explains Pointers</p>
<h2>Chapter 2</h2>
<p>This chapter explains variables</p>
<h2>Chapter 3</h2>
<p>This chapter explains operator</p>
<h2>Chapter 4</a></h2>
<p>This chapter explains structure</p>
<h2>Chapter 5</h2>
<p>This chapter explains arrays</p>
<h2>Chapter 6</h2>
<p>This chapter explains linked list</p>
<h2>Chapter 7</h2>
<p>This chapter explains expressions</p>
<h2><a name="C8">Chapter 8</h2>
<p>This chapter explains Binary
Trees</p> <h2>Chapter 9</h2>
<p>This chapter explains Unordered
trees</p> <h2>Chapter 10</h2>
<p>This chapter explains Statements</p>
<h2>Chapter 11</h2>
<p>This chapter explains searching</p>
<h2>Chapter 12</h2>
Department of Computer Science , GSC 15
Part A Web Programming Lab HTML

<p>This chapter explains sorting</p>


<h2>Chapter 13</h2>
<p>This chapter explains Binary sort</p>
<h2>Chapter 14</h2>
<p>This chapter explains merge sort</p>
<h2>Chapter 15</h2>
<p>This chapter explains heap sort</p>

</body>
</html>

Page1.html

<html>
<head>
<title> Page1.html </title>
</head>
<body>
<h1 align="center"> Hello!!! This is a new chapter </h1>
<a href="home.html"> Go to home </a> </body>

</html>

Department of Computer Science , GSC 16


Part A Web Programming Lab HTML

OUTPUT

After Clicking On Click Me or the Flower image the output is

Department of Computer Science , GSC 17


Part A Web Programming Lab HTML

After Clicking on the See also Chapter 8(link within a page) the output is

Department of Computer Science , GSC 18


Part A Web Programming Lab HTML

PROGRAM 10

<!-- A Program to illustrate Table tag -->

<html>
<head>
<title> Table tag </title>
</head>
<body>
<center>
<h4>Table with border, vertical headers, cellpadding and
cellspacing</h4> <table border="10" cellpadding="10" cellspacing="10">
<tr>
<td></td>
<th>Name</th>
<th>Age</th>
<th>Telephone</th>
</tr>
<tr>
<th>Student 1</th>
<td>Radha Desai</td>
<td>20</td>
<td>123 456 789</td>
</tr>
<tr>
<th>Student 2</th>
<td>Geetha Bharadwaj</td>
<td>21</td>
<td>267 891 281</td>
</tr>
</table>

<hr>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Radha</td>
<td>555 77 854</td>
<td>555 77 855</td>
Department of Computer Science , GSC 19
Part A Web Programming Lab HTML

</tr>
</table>

<hr>
<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Radha</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</center>
</body>
</html> OUTPUT

Department of Computer Science , GSC 20


Part A Web Programming Lab HTML

PROGRAM 11

<!-- A Program to illustrate Frame tag -->


mainframe.html
<html>
<head>
<title> Frame tag </title>
</head>
<head>
<frameset cols="20,60">
<frame src="f1.html">
<frame src="f2.html" name="main">
</frameset>
</frameset>
</head>
</html>
f1.html
<html>
<head>
<title> f1.html </title>
</head>
<body>
<h3> States of karnataka </h3>
<a href="gul.html" target="main"> gulbarga<br></a>
<a href="bid.html" target="main"> Bidar<br> </a>
</body>
</html>
f2.html
<html>
<head>
<title> f2.html </title>
</head>
<body>
<h1> Click on any state to get a welcome message </h2>
</body>
</html>
gulbarga.html
<html>
<head>
<title> Gulbarga.html </title>
</head>
<body bgcolor="green">
<h1> Welcome to gulbarga </h1>

Department of Computer Science , GSC 21


Part A Web Programming Lab HTML

</body>
</html>
bidar.html
<html>
<head>
<title> bidar.html </title>
</head>
<body bgcolor="red">
<h1> Welcome to bidar </h1>
</body>
</html>
OUTPUT

After Clicking On Gulbarga the output is :

After Clicking On Bidar the output is :

Department of Computer Science , GSC 22


Part A Web Programming Lab HTML

PROGRAM 12

<!-- A Program to illustrate Form tag -->

<html>
<head>
<title> form tag </title>
</head>
<body>
<center>
<h3 align="center">To illustrate form based tags</h3> <hr color="red">
<form action="">
<p>This is a text box to enter any text.<input type="text" >
<p>This is a text box to enter password.<input type="password"
> <p>This is a text area to enter large text<textarea> </textarea>
<p>This is a button.<input type="button" Value="Click" >
<p><b><u>Radio Options</u></b><br>
<input type="radio" name="y" checked> yes
<input type="radio" name="n" checked> no
</p> <p><b><u>Checkbox
Options</u></b><br> Sunday<input
type="checkbox" checked > Monday<input
type="checkbox" > Tuesday<input
type="checkbox" > </p>
<p><b><u>Menu driven options </u></b>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select></p>
</form>
</center>
</body>
</html>

Department of Computer Science , GSC 23


Part A Web Programming Lab HTML

OUTPUT

Department of Computer Science , GSC 24


Part A Web Programming Lab HTML

PROGRAM 13

<!-- A Program to illustrate span tag -->

<html>
<head>
<title> span tag </title>
<style type="text/css">
span.blue{ color:lightskyblue; font-weight:bold;}
span.green{ color:darkolivegreen; font-weight:bold;}
</style>
</head>
<body>
<p align="center">
<font size=10>
my mother has <span class="blue"> light blue </span> eyes and
my father has <span class="green"> dark green </span> eyes.
</font>
</p>
</body>
</html>

OUTPUT

Department of Computer Science , GSC 25


Part A Web Programming Lab HTML

PROGRAM 14

<!-- A Program to illustrate CSS (cascading style sheet) -->

<html>
<head>
<title> css demo </title>
<style type="text/css">

body { background-color:red;}

h1 { color:orange; text-align:center;}

p { font-family: "Times new roman "; font-size: 20px;}

</style>
</head>

<body>
<h1> CSS EXAMPLE </h1>
<p> This is a paragraph </p>

</body>
</html>

OUTPUT

Department of Computer Science , GSC 26


Part A Web Programming Lab HTML

PROGRAM 15

<!-- A Program to illustrate Embedded Multimedia -->


<html>
<head>
<title> embedding multimedia </title>
</head>
<body>
<center>
<h1> Here is a video embedded on this webpage
</h1> <br>

<object data="Wildlife.wmv" type="video/msvideo" height=200 width=200


hspace=200 vspace=200>
</object>

</center>
</body>
</html>

OUTPUT

Department of Computer Science , GSC 27


Program:16

<!-- A Program to illustrate Array object -->


<html>
<head>
<script type="text/javascript">
var num1=1,num2=-1,num3=0;
var arr= new Array("positive","negative","zero");

document.write(num1 + " is " + arr[0] + ".<br>");


document.write(num2 + " is " + arr[1] + ".<br>");
document.write(num3 + " is " + arr[2] + ".");
</script>
</head>

</html>
Program:17
<!-- A Program to Reverse the given string -->

<html>
<body>
<script type ="text/javascript">
function reversestr() {
var str=document.entry.Reverse.value;
alert(str);
var newString = " ";
for (var i = str.length - 1; i >= 0; i--) {
newString =newString+str.charAt(i);
}
document.write("The reverse is "+newString);}</script>
</body>
<form name ="entry"><p>Enter the String : <input type="text"
id="Reverse"/></p>
<input type="button" onClick="reversestr()" value="Reverse"/></form>
</html>
Program :18
<!-- A Program to illustrate Event Handling -->

<html>
<head>
<title> nochange.html </title>

<style type = "text/css">


td, th, table {border: thin solid black;}
</style>

<!-- Script for the event handlers -->


<script type = "text/javascript" >
function computeCost() {
var vanila = document.getElementById("vanila").value;
var black = document.getElementById("black").value;
var berry = document.getElementById("berry").value;

// Compute the cost

document.getElementById("cost").value =
totalCost = vanila * 100 + black * 110 +
berry * 100;
} //* end of computeCost

</script>

</head>
<body>
<form action = "">
<h3> Coffee Order Form </h3>

<!-- A bordered table for item orders -->

<table>

<!-- First, the column headings -->

<tr>
<th> Product Name </th>
<th> Price </th>
<th> Quantity </th>
</tr>

<!-- Now, the table data entries -->

<tr>
<th> vanila Vanilla </th>
<td>Rs.100 </td>
<td> <input type = "text" id = "vanila"
size ="2" /> </td>
</tr>
<tr>
<th> Black Forest</th>
<td> Rs.110</td>
<td> <input type = "text" id = "black"
size = "2" /> </td>
</tr>
<tr>
<th> StrawBerry </th>
<td> Rs.100 </td>
<td> <input type = "text" id = "berry"
size = "2" /></td>
</tr>
</table>

<!-- Button for precomputation of the total cost -->

<p>
<input type = "button" value = "Total Cost"
onclick = "computeCost();" />
<input type = "text" size = "5" id = "cost"
onfocus = "this.blur();" />
</p>

<!-- The submit and reset buttons -->

<p>
<input type = "submit" value = "Submit Order" />
<input type = "reset" value = "Clear Order Form" />
</p>
</form>
</body>
</html>
Program : 19
<!-- A Program to validate textboxes -->

<html>
<head>
<title> Illustrate password checking> </title>
<script type = "text/javascript">
function chkPasswords() {
var init = document.getElementById("initial");
var sec = document.getElementById("second");
if (init.value == "") {
alert("You did not enter a password \n" +
"Please enter one now");
return false;
}
if (init.value != sec.value) {
alert("The two passwords you entered are not the same \n" +
"Please re-enter both now");
return false;
} else
return true;
}

</script>
</head>
<body>
<h3> Password Input </h3>
<form id = "myForm" action = "" >
<p>

<label> Your password


<input type = "password" id = "initial"
size = "10" />
</label>
<br /><br />

<label> Verify password


<input type = "password" id = "second"
size = "10" />
</label>
<br /><br />

<input type = "reset" name = "reset" />


<input type = "submit" name = "submit" onClick="chkPasswords()"/>
</p>
</form>
</body>
</html>
Program:20
<!-- A Program to display student MarksCard -->
<html>
<head>
<title>Registration Form</title>
<script type = "text/javascript">
function calc()
{
var m1,m2,m3,avg = 0,total = 0, result = "",grade = "";
m1 = parseInt(document.form1.wp.value);
m2 = parseInt(document.form1.sp.value);
m3 = parseInt(document.form1.cg.value);
total = m1+m2+m3;
avg = total/3;
if( m1 < 35 || m2 < 35 || m3 < 35)
{
result = "fail";
grade = "D";
}
else if(avg >= 75)
{
result = "Distinction";
grade = "A+";
}
else if(avg >= 60 && avg < 75)
{
result = "First class";
grade = "A";
}
else if(avg >= 50 && avg < 60)
{
result = "Second class";
grade = "B";
}
else if(avg >=35 && avg < 50)
{
result = "Pass class";
grade = "C";
}
else if (avg < 35)
{
result = "Fail";
Grade = "D";
}
document.form1.result.value = result;
document.form1.grade.value = grade;
document.form1.total.value = total;
document.form1.average.value = avg;

}
</script>
</head>
<body>
<form name = "form1">
<table border = "1">
<tr>
<td> Student Name</td>
<td><input type = "text" /></td>
</tr>
<tr>
<td colspan = "2" align = "center">Subject Marks</td>
</tr>
<tr>
<td>Web Programming</td>
<td><input type = "text" name = "wp" /></td>
</tr>
<tr>
<td>Theory of Computation</td>
<td><input type = "text" name = "cg" /></td>
</tr>
<tr>
<td>System Programming</td>
<td><input type = "text" name = "sp" /></td>

</tr>
<tr>
<td colspan = "2" align = "center"><input type = "button" onclick = "calc()" value = "calculate"
/></td>
</tr>
<tr>
<td>Total</td>
<td><input type = "text" name = "total"/></td>

</tr>
<tr>
<td>Average</td>
<td><input type = "text" name = "average" /></td>
</tr>
<tr>
<td>Result</td>
<td><input type = "text" name = "result" /></td>
</tr>
<tr>
<td>Grade</td>
<td><input type = "text" name = "grade"/></td>
</tr>

</table>
</form>
</body>
</html>

You might also like