Scribd
Upload
128 views20 pages

Web Technologies Practical

Web technology how to use how many wbd technology have

Uploaded by

kramanji336
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
128 views20 pages

Web Technologies Practical

Web technology how to use how many wbd technology have

Uploaded by

kramanji336
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/ 20

1. Write a HTML program to implement Formatting tags .

<html>
<head>
<title>demo on formatting tags</title>
</head>
<body bgcolor = "yellow" text = "red">
html<b> is a hypertext markup</b>language<br>
html<i> is a hypertext markup</i>language<br>
html<u> is a hypertext markup</u>language<br>
html<em> is a hypertext markup</em>language<br>
html<small> is a hypertext markup</small>language<br>
html<strong> s a hypertext markup</strong>language<br>
H<sub>2</sub>O<br>
a<sup>2</sup><br>
html<strike> is a hypertext markup</strike>language<br>
My favorite <ins> color</ins> is red. <br>
My favorite color is <del> blue</del> red<br>
HTML <mark> Marked</mark> Formatting<br>
html<marquee> is a hypertext markup</marquee>language<br>
</body>
</html>

Output:

3
2. Write a HTML program to implement all Header tags.
<html>
<head>
<title>header tags</title>
</head>
<body>
<h1>this is header 1</h1>
<h2>this is header 2</h2>
<h3>this is header 3</h3>
<h4>this is header 4</h4>
<h5>this is header 5</h5>
<h6>this is header 6</h6>
</body>
</html>

Output:

3. Write a HTML program to illustrate Anchor tag along with all its attributes.
<html>
<head>
<title>anchor tag</title>
</head>
<body>
<a href="1.html"> formatting tags </a><br>
<a href="web technology.pdf">web technology lab syllabus</a>
<p> click on the image to download the image <br>
<a href="charles-babbage.jpg" download>
<img src="charles-babbage.jpg" height=100 width=150/></a>
</body>
</html>

4
Output:

4. Write a HTML program to implement Font tags along with its attributes.
<html>
<head>
<title>font variations in html</title>
</head>
<body base font =6>
font with base font 6 <br>
<font face= "arial black" size=+2 color= "red">
Font with arial with size 8 and color red</font><br>
<font face= "tahoma" size=10 color= "blue">
Font with tahoma with size 10 and color blue</font><br>
<font face= "verdana" size=12 color= "green">
Font with verdana with size 12 and color green</font><br>
<font face= "monotype corsiva" size=14 color= "orange">
Font with monotype corsiva with size 14 and color orange</font>
</body> </html>

Output:

5
5. Write a HTML program to illustrate List formatting tags for the streams
available in College :
a. Ordered list b. Unordered list c. Menu List. d. Definition List .
<html> <head>
<title> lists </title>
</head>
<body bgcolor = “blue” text = “white”>
<h1> ORDERED LIST </h1>
the courses offered by this college are:
<ol type="A">
<li>b.com<br>
<li>b.sc<br>
<li>b.a<br>
</ol>
<h1> UNORDERED LIST </h1>
the courses offered by this college are:
<ul>
<li>b.com<br>
<li>b.sc<br>
<li>b.a<br>
</ul>
<h1> MENU LIST </h1>
the courses offered by this college are:
<MENU>
<li>b.com<br>
<li>b.sc<br>
<li>b.a<br>
</MENU>
<h1> DEFINATION LIST </h1>
<dl>
<dt>html
<dd> the language used to develop web pages
</dl>
</body> </html>

Output

6
6. Create a Web Page to display ordered list, unordered list on the subjects
available in Fifth semester .
<html>
<head>
<title> lists </title>
</head>
<body bgcolor = “green” text = “yellow”>
<h1> ORDERED LIST </h1>
the subjects in V semester:
<ol type="A">
<li>cost a/c
<li>business law
<li>BTP
<li>computerised a/c
<li>web technologies
<li>excel foundation
</ol>
<h1> UNORDERED LIST </h1>
the subjects in V semester:
<ul>
<li>cost a/c
<li>business law
<li>BTP
<li>computerised a/c
<li>web technologies
<li>excel foundation
</ul>
</body>
</html>

Output

7
7. create a Table with Four rows and Four columns in HTML .
<html> <head>
<title> table</title>
</head>
<body bgcolor = “pink” text = “green”>
<center>
<h1> table with four rows and four coloumns</h1>
<table border="2">
<tr>
<th>coloumn1</th>
<th>coloumn2</th>
<th>coloumn3</th>
<th>coloumn4</th>
</tr>
<tr>
<td>row 2</td>
<td>row 2</td>
<td>row 2</td>
<td>row 2</td>
</tr>
<tr>
<td>row 3</td>
<td>row 3</td>
<td>row 3</td>
<td>row 3</td>
</tr>
<tr>
<td>row 4</td>
<td>row 4</td>
<td>row 4</td>
<td>row 4</td>
</tr>
</table> </body> </html>

Output

8
8. Write a HTML program to create a Time-table of your College using necessary
options such as Cellpadding, Cellspacing , colspan , rowspan .
<html>
<head>
<title> time table</title>
</head>
<body bgcolor = “red” text = “yellow”>
<center><br><p><br><p>
<table border=3 cellpadding=3 cellspacing=2>
<tr>
<th>Day</th>
<th>1st<br>hour</th>
<th>2nd<br>hour</th>
<th>3rd<br>hour</th>
<th rowspan=7>B <BR>R<BR>E<BR>A<BR>K</th>
<th>4th<br>hour</th>
<th>5th<br>hour</th>
<th>6th<br>hour</th>
</tr>
<tr>
<td> Mon </td>
<td>cost a/c</td>
<td>principle of insurance</td>
<td>business law</td>
<td>BTP</td>
<td>web-technology</td>
<td>Excel Foundation</td>
</tr>
<tr>
<td> Tue </td>
<td>cost a/c</td>
<td>principle of insurance</td>
<td>business law</td>
<td>BTP</td>
<td>web-technology</td>
<td>Excel Foundation</td>
</tr>
<tr>
<td> Wed </td>
<td>cost a/c</td>
<td>principle of insurance</td>
<td>business law</td>
<td>BTP</td>
<td>web-technology</td>
<td>Excel Foundation</td>
</tr>
<tr>
<td> Thur </td>
<td>cost a/c</td>
<td>principle of insurance</td>
<td>business law</td>
9
<td>BTP</td>
<td>web-technology</td>
<td>Excel Foundation</td>
</tr>
<tr>
<td> Fri </td>
<td>cost a/c</td>
<td>principle of insurance</td>
<td>business law</td>
<td>BTP</td>
<td>web-technology</td>
<td>Excel Foundation</td>
</tr>
<tr>
<td> Sat </td>
<td>cost a/c</td>
<td>principle of insurance</td>
<td>business law</td>
<td>BTP</td>
<td>web-technology</td>
<td>Excel Foundation</td>
</tr>
</table>
</center>
</body>
</html>

Output:

10
9. Create a Web Page in which the text " WEB TECHNOLOGY " should scroll in
different directions for four times .
<html> <head>
<title> marquee</title>
</head>
<body text = “blue”>
<marquee direction=left>WEB - TECHNOLOGY </marquee>
<marquee direction=right>WEB - TECHNOLOGY </marquee>
<marquee direction=up>WEB - TECHNOLOGY </marquee>
<marquee direction=down>WEB - TECHNOLOGY </marquee>
</body> </html>

Output:

10. Create a table using all its attributes and sub tags to execute the following
Information .

<html>
<head>
<title>table</title>
</head>
<body bgcolor = “pink” text = “blue”>
<center><br><p><br><p>
<table border=1 cellspacing=0>
<tr>
<th>S.No</th>
<th>Name</th>
<th>Specialization</th>
</tr>
<tr>
<td>1</td>
<td>Ada Lovelace</td>
<td>She is World's first Computer Programmer.</td>
</tr>
<tr>
<td>2</td>
<td>Adam Osborne</td>
11
<td> Creator of the first commercially available Portable Computer.</td>
</tr>
<tr>
<td>3</td>
<td>Abhay Bhushan</td>
<td>Author of the File Transfer Protocol.</td>
</tr>
<tr>
<td>4</td>
<td>Alan Cooper</td>
<td> Father of Visual Basic.</td>
</tr>
<tr>
<td>5</td>
<td>Alan Emtage</td>
<td>Developer of “Archie” which is considered to be the first search engine.</td>
</tr>
<tr>
<td>6</td>
<td>Alan Schaaf</td>
<td>Founder of “Imgur” which is the world’s largest image hosting site.</td>
</tr>
<tr>
<td>7</td>
<td>Alexander Douglas</td>
<td>Created the first graphical Computer game, OXO.</td>
</tr>
<tr>
<td>8</td>
<td>Andreas Bechtolsheim</td>
<td> Co-founder of Sun Microsystems.</td>
</tr> </table> </body> </html>

Output:

12
11. Write a program to create Pull down menu on the universities available in
Telangana State.
<html> <head>
<title>pull down menu</title>
</head>
<body>
<center><br><p><br><p>
the universities available in telangana
<br><br>
<select>
<option>Osmania university
<option>Kakathiya university
<option>Palamuru university
<option>Mahatma Gandhi university
<option>Telangana university
</select> </center> </body> </html>

Output:

13
12. Create a Web Page of student information form, when the information is
submitted message should be displayed.
<HTML>
<HEAD>
<TITLE>
FORMS
</TITLE>
</HEAD>
<BODY BGCOLOR="PINK" TEXT="BLUE">
<CENTER>
<H2><U>STUDENT APPLICATION FORM</U></H2>
<FORM>
STUDENT NAME:<INPUT TYPE="TEXT" NAME="CGFG" VALUE=" ">
<BR>
FATHER'S NAME:<INPUT TYPE="TEXT" NAME="FDF" VALUE=" ">
<BR>
ADDRESS:<TEXTAREA ROWS="3" COLS="20" MAXLENGTH="300">ENTER UR TEXT
</TEXTAREA>
<BR>
COURSES:<SELECT NAME="COURSES">
<OPTION>B.COM
<OPTION>B.SC
<OPTION>B.A
</SELECT>
COMBINATION:<SELECT NAME="COMBINATION">
<OPTION>REG.
<OPTION>VOCATION
<OPTION>COMP
</SELECT>
<BR>
GENDER:<INPUT TYPE="RADIO" NAME="MALE" >MALE
<INPUT TYPE="RADIO" NAME="FEMALE" >FEMALE
<BR>
QUALIFICATION:
<TABLE BORDER=3 BORDERCOLOR="OLIVE">
<TR>
<TH>YEAR</TH>
<TH>QUALIFICATION</TH>
<TH>PERCENTAGE</TH>
<TH>MARKS</TH>
</TR>
<TR> <TD><input type=text></TD>
<TD><input type=text></TD>
<TD><input type=text></TD>
<TD><input type=text></TD>
</TR>
<TR> <TD><input type=text></TD>
<TD><input type=text></TD>
<TD><input type=text></TD>
<TD><input type=text></TD>
</TR> </TABLE> <BR>
SPORTS INTRESTED IN
<BR><INPUT TYPE="CHECKBOX" NAME="TENNIS">TENNIS
<INPUT TYPE="CHECKBOX" NAME="CRICKET">CRICKET
<INPUT TYPE="CHECKBOX" NAME="FOOTBALL">FOOTBALL
<INPUT TYPE="CHECKBOX" NAME="LONGJUMP">LONGJUMP
<BR> <INPUT TYPE="SUBMIT" value="SUBMIT">
<INPUT TYPE="RESET" NAME="RESET">
</FORM><MARQUEE>
14
<H2>STUDENTS CAN SUBMIT THEIR FORMS BEFORE 31-11-2018.WITH LATE FEE
THEY CAN SUBMIT THEIR FORMS BEFORE
5-11-2018 </H2></MARQUEE>
</CENTER> </BODY> </HTML>

Output:

13. Write a HTML program to create Four Horizontal Frames .


<html>
<head>
<title>horizantal frames</title>
</head>
<frameset rows="20%,20%,20%,*">
<frame name=1>
<frame name=2>
<frame name=3>
<frame name=4>
</frameset>
</html>

Output:

15
14. Write a HTML program to create Four Vertical Frames .
<html>
<head>
<title>vertical frames</title>
</head>
<frameset cols="20%,20%,20%,*">
<frame name=1>
<frame name=2>
<frame name=3>
<frame name=4>
</frameset>
</html>

Output:

15. Write a DHTML program to demonstrate External Style Sheets.


CSS file with name “test.css”:
body{background-color:gray;}
p{color:blue;}
h3{color:white;}
Html file:
<html>
<head>
<title>external style sheet</title>
<link rel="stylesheet" type="text/css" href="test.css"/>
</head> <body>
<h3> a white header </h3>
<p> this paragraph has a blue font.the background color of this page is gray
because we changed it with css</p>
</body> </html>
Output:

16
16. Write a DHTML program to demonstrate Embedded Style Sheets.
<html>
<head>
<title>embedded style sheet</title>
<style type="text/css">
body{background-color:gray;}
p{color:blue;}
h3{color:white;}
</style> </head> <body>
<h3> a white header </h3>
<p> this paragraph has a blue font. the background color of this page is gray
because we changed it with css</p>
</body> </html>
Output:

17. Write a DHTML program to illustrate Id and Class Selectors using CSS.
<html>
<head>

<title>class selectors</title>
<style>
.fred{ color:red;
background-color:yellow;
border: blue; }
</style>
</head>
<body>
<h1 class="fred"> a simple heading </h1>
<p class="fred"> Applying the style fred to a paragraph of text</p>
</body>
</html>

Output:

a simple heading
Applying the style fred to a paragraph of text

17
18. Write a DHTML program to demonstrate Filters .
<html>
<head>
<title> filters </title>
<style>
h1{width:30%}
</style>
</head>
<body>
<h1 style="filter:glow()">web</h1>
<h1 style="filter:blur()">web</h1>
<h1 style="filter:flipv()">web</h1>
<h1 style="filter:fliph()">web</h1>
<h1 style="filter:dropshadow()">web</h1>
<h1 style="filter:shadow()">web</h1>
<h1 style="filter:wave(strength=2)">web</h1>
</body>
</html>

19. Write a Java Script program to print Odd numbers using while loop.
<html>
<head>
<title>odd numbers</title>
<script language= "javascript">
var i=1;
var n=prompt("enter range");
document.writeln("the odd numbers upto"+n+"are"+"<br>");
while(i<=n)
{
if(i%2==1)
{
document.writeln(i);
}
i++;
}
</script>
</head>
</html>
Output:
the odd numbers upto10are
13579

18
20. Write a Java Script program to demonstrate multiplication table .
<html>
<head>
<title>multiplication table</title>
<script language="javascript">
var i,n=prompt("enter a number");
for(i=1;i<=10;i++)
document.write(n+"X"+i+"="+n*i+"<br>");
</script>
</head>
</html>

Output:

21. Write a Java Script program to print N-natural numbers using For loop.
<html>
<head>
<title>natural numbers</title>
<script language= "javascript">
var i=1;
var n=prompt("enter range");
document.writeln("the natural numbers upto"+n+"are"+"<br>");
while(i<=n)
{
document.writeln(i+"");
i++;
}
</script> </head> </html>

Output:
the natural numbers upto15are
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

19
22. Write a Java Script program to print Factorial of a given number .

<html>
<head>
<title>factorial</title>
<script language= "javascript">
function fact()
{ var n=prompt("enter number to find factorial");
var i,f=1;
if(n==1)
alert("the factorial of given number is 1");
else
{ for(i=n;i>1;i--)
{ f=f*i;
} }
alert("the facorial of"+n+"is"+f);
} </script> </head>
<body onload="fact()">
</body> </html>

Output

23. Create a Web page with an image, when the mouse is doubled clicked new
image should replace the existing.
<html>
<head>
<title>doubleclick</title>
</head>
<body>
double click on the image to get new image <br>
<img src="penguins.jpg"
width="150" ondblclick="this.src='winter.jpg'"/>
</body>
</html>

Output:

20
24. Create a Web page and apply mouse effects to change text color, size, family
etc on the text.
<html>
<head>
<title>mouse events</title>
</head>
<p> click on the below text to change color, size and family of the text
<br>
<h1 onclick="this.style.color='red'">bcom computers</h1>
</body>
</html>

Output:
click on the below text to change color, size and family of the text

bcom computers

25. Create a Web page which displays a line of text, when you click on the text a
new line of text should overwrite the existing text.
<html>
<head>
<title> overwriting the text</title>
<script language="javascript">
function but_onclick()

{
var s="BEST OF LUCK";
but.innerText=s;
}
</script>
</head>
<body bgcolor="cyan">
<font face="monotype corsiva" size=30 id="but" onclick="but_onclick()">
HELLO BCom STUDENTS
</font>
</body>
</html>

Output:
HELLO BCom STUDENTS
BEST OF LUCK

21
26. Create a program on the event onkeypress.
<html>
<head>
<title>keyboard events</title>
<script language="javascript">
function keypress()
{
alert("key pressed");
}
</script>
</head>
<body>
<input type="text" onkeypress="keypress()">
</body>
</html>

Output

22

You might also like