Student Yuva: BASIC HTML PROGRAMS

Lab Program
1

<!A HTML program to mark up a chosen text by
using header level 1, paragraphs, strong and
emphasis.>

<HTML>

<HEAD> <TITLE> PROGRAM 1
</TITLE> </HEAD>

<BODY>

<H1
ALIGN=justify> Welcome to HTML </H1>

<P>

<STRONG>D</STRONG>dynamic <EM>
HTML </EM>is an extents of <EM> HTML
</EM>

powered
by programming scripts that<BR>

lets
you add that extra bit of interactivity to
your<EM>W</EM>website

was
just not possible with
<BR>plain<EM>HTML</EM>.<STRONG>V</STRONG>

validations are possible
through<EM>DHTML.</EM>

<P>

<STRONG>T</STRONG>here are various
scripting languages that are useful for implementation

of
<EM>D</EM>dynamic<EM>HTML</EM>.</p>

<H1> SCRIPTING LANGUAGES
</H1>

<B> Javascript </B>
<BR>

<I>VBscript</I>
<BR>

</BODY>

</HTML>

Lab Program
3

<!A HTML program to create an web
page using an image (.gif file).>

<HTML>

<HEAD><TITLE> Program
3</TITLE></HEAD>

<BODY BACKGROUND="../GRASS.JPG" >

<H1>

<p><b><u> Demo Program of Images
</u><b></p>

<b> WELCOME TO ANIMAL WORLDS
<B>

<div
align=left> parrot image </div>

<div
align=left> crane image </div>

<div
align=left> Leopard image </div>

</H1>

</BODY>

</HTML>

Lab Program
4

<!A
HTML program to create a Link for popular web
sites>

<HTML>

<HEAD>

<TITLE> CREATION OF LINKS </TITLE>

</HEAD>

<BODY>

<CENTER>

<H1> POPULAR WEB SITES
</H1>

<HR> <H2> REGULARLY VISITED MAILING
ADDRESS </H2>

For
visiting Yahoo mails:

<A
HREF="www.mail.yahoo.com">YahooMail</A>
<BR>

For
visiting Rediff mails:

<A
HREF="www.rediffmail.com">RediffMail</A>

<HR> <H2> Searching Address
</H2>

POPULAR
SEARCH ENGINE:

<A
HREF="www.google.com">GOOGLE</A>

</CENTER>

</BODY>

</HTML>

Lab Program
5

<! A Web page that displays grade of a
Student.>

<HTML>

<HEAD> <TITLE> GRADES OF THE STUDENT
</TITLE> </HEAD>

<BODY>

<CENTER>

<TABLE BORDER="3">

<CAPTION>

<B> <H1> AVERAGE GRADES OF THE STUDENT
BY YEAR </H1> </B>

</CAPTION>

<COLGROUP>

<COLSPAN=5
ALIGN="CENTER">

</COLGROUP>

<TR>

<TH
COLSPAN=5 ALIGN="CENTER" WIDTH="30%"> REPORT CARD
</TH>

</TR>

<TR><TH> SOCIAL <TD> B
<TD> B+ <TD> A <TD> A+
</TR>

<TR><TH> MATHS<TD> A<TD>
A+<TD> A+<TD> A+</TR>

<TR><TH> SCIENCE<TD>
B+<TD> B<TD> A+<TD>
A</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

Lab Program
6

<!A script that
reads three non-zero values entered by the user in prompt dialogs and
determine they could represent the sides of a triangle.>

<HTML>

<HEAD> <TITLE> SIDES OF A TRIANGLE OR
NOT </TITLE>

</HEAD>

<BODY>

var
x,y,z;

{

x=parseInt(window.prompt("ENTER THE SIDE
X","0"));

y=parseInt(window.prompt("ENTER THE SIDE
Y","0"));

z=parseInt(window.prompt("ENTER THE SIDE
Z","0"));

}

while((x<0)||(y<0)||(z<0));

max=Math.max(x,Math.max(y,z));

if(max==x)

if((y+z)>max)

window.alert("TRIANGLE CONSTRUCTION IS
POSSIBLE");

else

window.alert("TRIANGLE CONSTRUCTION IS NOT
POSSIBLE");

if(max==y)

if((x+z)>max)

window.alert("TRIANGLE CONSTRUCTION IS
POSSIBLE");

else

window.alert("TRIANGLE CONSTRUCTION IS NOT
POSSIBLE");

if(max==z)

if((x+y)>max)

window.alert("TRIANGLE CONSTRUCTION IS
POSSIBLE");

else

window.alert("TRIANGLE CONSTRUCTION IS NOT
POSSIBLE");

</SCRIPT>

</BODY>

</HTML>

Lab Program
7

<!A script for
small retail shop.>

<HTML>

<HEAD> <TITLE> RETAIL SHOP
</TITLE>

var
x,pno,quantity,value,totalvalue

pno=-1;

totalvalue=0.0;

document.writeln("<TABLE
BORDER=1><TR>
<TH>Product
No<TH>Price(in RS.)");

document.writeln("<TH>Quantity<TH>Value(in
RS.)</TR><TR>");

while(pno!=0)

{

pno=parseInt(window.prompt("Enter the Product
Number, 0 to quit","0"));

if(pno==0)

break;

quantity=parseInt(window.prompt("Enter the
Quantity sold for one day:","0"));

switch(pno)

{

case 1:
value=3.50;

break;

case 2:
value=4.75;

break;

case 3:
value=6.50;

break;

case 4:
value=7.99;

break;

case 5: value=9.49;

}

x=quantity*value;

totalvalue+=x;

document.writeln("<TD>"+pno+"<TD
align=right>"+value+"<TDalign=right>");

document.writeln("<TD
align=right>"+quantity+"<TD
align=right>"+(Math.floor(x*100+0.5)/100)+"</TR><TR>");

}

document.writeln("<TD colspan=3>Total Retail
Value for the Last week <TD
align=right>");

document.writeln((Math.floor(totalvalue*100+0.5)/100)+"</TR>
</TABLE>”);

</SCRIPT>

</HEAD>

</HTML>

Lab Program
8

<!A function that determines for a pair of
integers whether the second integer is a multiple of the
first.>

<HTML>

<HEAD>

<TITLE>Whether second number is multiple of
first number or not

</TITLE>

function multiple(x,y)

{

if(y%x==0)

return
false;

else

return
true;

}

function check()

{

var
x=parseInt(document.f1.firstnumber.value);

var
y=parseInt(document.f1.secondnumber.value);

if(multiple(x,y))

window.alert("second number is
multiple of first number");

else

window.alert("second number is not
a multiple of first number");

}

</SCRIPT>

</HEAD>

<FORM NAME=f1>

<TABLE BORDER="4">

<CAPTION> USER INPUT
</CAPTION>

<TR>

<TH> First Integer

<TR>

<TH> Second
Integer

<TR>

</TABLE>

</FORM>

</BODY>

</HTML>

Lab program
9

<!A Java script that inputs three integers fro
the user and outputs their sum, average, largest use alert dialog box to
display results.>

<HTML>

<HEAD>

<TITLE>

Finding
the sum, average, largest among the given three
numbers

</TITLE>

var x,y,z,result,data;

x=parseInt(window.prompt("ENTER THE FIRST
NUMBER","0"));

y=parseInt(window.prompt("ENTER THE SECOND
NUMBER","0" ));

z=parseInt(window.prompt("ENTER THE
THIRD NUMBER","0"));

data=x+","+y+","+z;

function sum()

{

result=x+y+z;

window.alert(" SUM OF " + data + "
NUMBERS IS " +
result);

}

function avg()

{

result=((x+y+z)/3);

window.alert(" AVERAGE OF " + data
+ " NUMBERS IS " +
result);

}

function large()

{

result=Math.max(Math.max(x,y),z);

window.alert(" LARGEST OF " + data
+ " NUMBERS IS " +
result);

}

</SCRIPT>

</HEAD>

<BODY>

<FORM>

<TABLE BORDER="2">

<CAPTION> <H3> Sum, Average and
Largest </H3> </CAPTION>

<COLGROUP>

<COLSPAN="2"
ALIGN="right">

</COLGROUP>

<TR><TH> To Sum of those
numbers

<TD><INPUT TYPE="button" VALUE="SUM"

ONCLICK="sum();">
</TR>

<TR><TH> To get Average of those
numbers

<TD><INPUT TYPE="button" VALUE="AVERAGE"

ONCLICK="avg ();">
</TR>

<TR><TH> To find Largest of those
numbers

<TD><INPUT TYPE="button" value="LARGEST"

ONCLICK="large();">
</TR>

</TABLE>

</FORM>

</BODY>

</HTML>

Lab Program
10

<!A script for selection for selection
sort.>

<HTML>

<HEAD>

<TITLE> SELECTION SORT
</TITLE>

var
arr=[9,4,1,5,7];

var
i,j,temp;

document.writeln("Before sorting Array elements
"+arr.join("->"));

n=arr.length;

for(i=n-1;i>0;i--)

{

large=arr[0];

index=0;

for(j=1;j<=i;j++)

{

if(arr[j]>large)

{

large=arr[j];

index=j

}

arr[in
dex]=arr[i];

arr[i]=large;

}

document.writeln("<BR> After sorting Array
elements"+arr.join("->"));

</SCRIPT>

</HEAD>

</HTML>

Lab Program
11

<!A script to write word equivalent of check
amount.>

<HTML>

<HEAD>

<TITLE> WORDS TRANSFORMATIONS
</TITLE>

function dispwords()

{

var
n=0,i=0,temp=0,r="";

var arr= new
Array();

n=parseInt(document.f1.num.value);

temp=n;

while(temp>0)

{

k=temp%10;

arr[i++]=words(k);

temp=Math.floor(temp/10);

}

arr.reverse();

r=arr.join("
");

document.f1.res.value=r;

}

function words(k)

{

switch(k)

{

case 0:return
"ZERO";

case 1:return
"ONE";

case 2:return
"TWO";

case 3:return
"THREE";

case 4:return
"FOUR";

case 5:return
"FIVE";

case 6:return
"SIX";

case 7:return
"SEVEN";

case 8:return
"EIGHT";

case 9:return
"NINE";

}

</SCRIPT>

</HEAD>

<BODY>

<FORM NAME=f1>

NUMBER
<INPUT TYPE=text NAME=num>

<P>

RESULT
<INPUT TYPR+text SIZE=80 NAME=res>

<P>

</FORM>

</BODY>

</HTML>

Lab Program
12

<!A screen object to get the users screen, then
use information to place an image in the middle of the
page.>

<HTML>

<HEAD>

<TITLE> DEMO ON IMAGES
</TITLE>

</HEAD>

<BODY>

var
a,b,l,r;

a=screen.width;

b=screen.height;

l=(a/4);

r=(b/5);

document.writeln("<img src='cookie.jpg'
style='position:absolute; top:"+r+"; left:"+l+"
'>");

document.writeln(c+
"</h1>");

document.writeln(a+"
"+b);

</SCRIPT>

</BODY>

</HTML>

Lab Program
13

<! A CSS program to explain background
attachments.>

<HTML>

<HEAD>

<TITLE> IMAGES AND TEXT
</TITLE>

<STYLE>

body
{

background-image:url(F:\KRISHNA\BHASKAR\bliss.bmp);

background-position:bottom right;

background-repeat: no-repeat;

background-attachmant: fixed;

}

</STYLE>

</HEAD>

<H1>WELCOME<H1>TO<H1>WORLD<H1>OF

<H1>H<H1>T<H1>M<H1>L</H1>

</BODY>

</HTML>

Lab Program
14

<!A CSS program that explains bordering and
filling boxes>

<HTML>

<HEAD>

<TITLE> BOX AND BORDER
</TITLE>

<STYLE>

DIV { background-color:'blue';

padding:2em;

color:white;

border-color:red;

}

</STYLE>

</HEAD>

<BODY>

<div
style="width:30%"> Just for testing in the call for HTML,CSS is
cascading styles are helpful.

</div><P>

Just
for testing in the call for HTML,CSS is cascading styles are
helpful.

</div><P>

Just
for testing in the call for HTML,CSS is cascading styles are helpful.Just
for testing in the call for HTML,CSS is cascading styles are
helpful.

</div><P>

Just
for testing in the call for HTML,CSS is cascading styles are helpful.Just
for testing in the call for HTML,CSS is cascading styles are
helpful.

</div><P>

CSS is
cascading styles are helpful.

</div>

</BODY>

</HTML>

Lab Program
15

<!A function that responds to a click anywhere
on the page.>

<HTML>

<HEAD>

<TITLE> Click any where
</TITLE>

function ondoClick()

{

window.alert("Just
Click");

}

</SCRIPT>

</HEAD>

<BODY bgcolor=tan>

<H1> ERROR TESTING
</H1>

<H3> CLICK ANY WHERE ON THIS DOCUMENT
</H3>

</FORM>

</BODY>

</HTML>

Lab Program 16

<!A script that blurs image and slowly un-blurs
them when they are fully loaded.>

<HTML>

<HEAD> <TITLE> BLUR FILTER
</TITLE>

var
s=1,d=0,f=0;

function start()

{

img.filters("blur").direction=0;

img.filters("blur").strength=1;

img.filters("blur").add=true;

img1.filters("blur").direction=0;

img1.filters("blur").strength=1;

img1.filters("blur").add=false;

}

function run()

{

if(s==35||s==0)

f!=f;

img.filters("blur").strength=(f?
s++:s--);

if(s==0)

img.filters("blur").direction=((d+=45)%360);

img1.filters("blur").strength=s;

if(s==0)

img1.filters("blur").direction=((d)%360);

}

</SCRIPT>

</HEAD>

<H1>BLUR
IMAGE</H1>

</div>

</div>

</BODY>

</HTML>

Lab Program
17

<! Use the path control to simulate the
motion of the text inside a MARQUEE tag.>

<HTML>

<HEAD>

<TITLE> PATH CONTROL
</TITLE>

</HEAD>

<MARQUEE id="h"
style="position:absolute"><H1>WORLD WIDE
WEB</H1></MARQUEE>

</OBJECT>

<FORM>

</FORM>

</BODY>

</HTML>

Lab Program
18

<! Digital clock in a web page.>

<HTML>

<HEAD>

<TITLE> DIGITAL CLOCK
</TITLE>

</HEAD>

function start()

{

window.setInterval("run()",10);

}

function run()

{

var
d=new Date();

hh=d.getHours();

mm=d.getMinutes();

ss=d.getSeconds();

h.innerText=hh+":"+mm+":"+ss

}

</SCRIPT>

<H1> DIGITAL CLOCK

<H1
id=h> WELCOME </H1>

</HTML>

Lab Program
19

<! Write an ASP program to connect to a
database under test dsn and display the data from Sridhar table in a
tabular format of HTML.>

<%@Language="VBScript"%>

Set
db=Server.CreateObject("ADODB.Connection")

call db.Open("test","","")

Set
rs=Server.CreateObject("ADODB.RecordSet")

call rs.Open("select * from CSIT",db)

Response.Write("<BODY
bgcolor='tan'">)

Response.Write("<TABLE border=1
cellspacing=3>">

Response.Write("<TR>")

Response.Write("<TH>ROLL
NUMBER<TH>NAME</TR>")

Response.Write("</TABLE>")

while not rs.EOF

Response.Write("<TR>")

Response.Write("<TD>")

Response.Write(rs.fields(0))

Response.Write("<TD>")

Response.Write(rs.fields(1))

Response.Write("</TR>")

Rs.MoveNext()

wend

Student Yuva

BASIC HTML PROGRAMS

0 comments:

Post a Comment

Tags

Search

JNTUrocks.com

Followers

Blog Archive

Latest Updates