You are on page 1of 78

WEEK -1

1.Write a html program with all basic tags<h1>,<h2>,<h3>,<h4>,<h5>,<h6> and


display it.

<html>
<head>
<title> Header tags</title>
</head>
<body>
<h1> web technologies</h1>
<h2> web technologies</h2>
<h3>web technologies</h3>
<h4>web technologies</h4>
<h5>web technologies</h5>
<h6>web technologies</h6>
</body>
</html>

Output:
2.Write a html program with Paragraph Tag,Line Break Tag,Centering
content,Horizontal Lines,Preserve Formatting.

<html>

<head>

<title>Example of tags</title>

</head>

<body>

<center>

<p>This text is in the center.</p>

</center>

<p>Here is a first paragraph of text.</p>

<p>Hello<br />

You delivered your assignment on time.

<br />

Thanks<br />

</p>

<pre>

S.no Name Qualification

1 Pratap Employee

2 Akshay Student

</pre>

<p>This is paragraph one and should be on top</p>


</hr >

</body>

</html>

Output:
3.Write a html formatting program using Bold Text,Italic Text,Underlined Text and
Strike Text.

<html>

<head>

<title><h1>Example of font attributes</h1></title></head>

<body bgcolor="blue" text="white" >

<p>This is <b>an Apple</b></p>

<p>This is <i>very Rich Fruit</i> </p>

<p>It is <u>in Red Color</u> </p>

<p>This is<s>Healthy Fruit </s> </p>

</body>

</html>

Output:
WEEK-2

1.Write a html program to format the text to Superscrpit, Subscript and Inserted
Text.

<html>

<head>

<title>Example of formatting the text</title></head>

<body bgcolor="red">

<p>The formula is =(a+b) <sup>2</sup> </br></p>

<p>The chemical is=H<sub>2</sub>O<sub>2</sub></br></p>

<p>The formula is =(a+b <ins>+c)</ins><sup>2</sup></p>

</body>

</html>

Output:
3. Write a html program using HTML Comments single line and Multiline.

<html>

<head> <!-- Document Header Starts -->

<title>This is document title</title></head>

<body><p>Paragraph starts here.....</p>

<!--

This is a multiline comment and it can

span through as many as lines you like.-->

<p>Paragraph starts here.....</p>

</body>

</html>

Output:
4.Write a html program for displaying HTML Images.

<html>

<body>

<h2> Image Tag</h2>

<img src="5mavuy.jpg" width="100"

height="100" alt="image not found"/>

</body>

</html>

Output:
WEEK- 3

1.Write a html program on tables with Cellpadding, spacing Attributes.

<html>

<body bgcolor="green">

<table border="3" cellpadding="3" cellspacing="3">

<caption align="bottom">this is the table caption</caption>

<tr>

<th>tic</th>

<th>tac</th>

<th>toe</th>

</tr>

<tr>

<th>x</th>

<th>y</th>

<th>z</th>

</tr>

<tr>

<th>y</th>

<th>x</th>

<th>z</th>

</tr>

<tr>

<th>z</th>
<th>x</th>

<th>y</th>

</tr>

</table>

</body>

</html>

Output:
2. Write a html program on tables with Rowspan Attribute.

<html>

<body bgcolor="orange">

<table border="2" >

<tr>

<th rowspan="4" >Tic Tac Toe</th>

</tr>

<tr>

<td>x</td>

<td>y</td>

<td>z</td>

</tr>

<tr>

<td>y</td>

<td>z</td>

<td>x</td>

</tr>

<tr>

<td>z</td>

<td>x</td>

<td>y</td>

</tr>

</table>
</body>

</html>

Output:
4. . Write a html program on tables with Colspan Attribute.

<html>

<body bgcolor="orange">

<table border="2" >

<tr>

<th colspan="3" >Tic Tac Toe</th>

</tr>

<tr>

<td>x</td>

<td>y</td>

<td>z</td>

</tr>

<tr>

<td>y</td>

<td>z</td>

<td>x</td>

</tr>

<tr>

<td>z</td>

<td>x</td>

<td>y</td>

</tr>

</table>
</body>

</html>

Output:
3.Write a html program to display Unordered List

<html>

<body bgcolor="yellow" text="purple">

<h1>HERO HONDA</h1>

<ul style="list-style-type:disc">

<li>KARIZMA</li>

<li>CBZ</li>

<li>SPLENDER</li>

<li>GLAMOUR</li>

<li>HUNK</li>

<li>PASSION</li>

<li>DISCOVERY</li>

<li>CD110</li>

<li>ACTIVA</li>

<li>SHINE</li>

<li>DIO</li>

</ul>

</body>

</html>
Output:
4. Write a html program to display ordered List

<html>

<body bgcolor="violet" text="white">

<center>

<h1>MOBILE PHONES</h1>

</center>

<ul>

<ol style="list-style-type:disc">

<li><h3>SONY ERICSSON</h3></li>

</ul>

<ol type="I">

<li>SONY EXPERIA T3</li>

<li>SONY XPERIA ARC S Lt18i</li>

<li> SONY XPERAI T2 Ultra</li>

<li> SONY XPERAI E1</li></ol>

<ul>

<li><h3>NOKIA</h3></li>

</ul>

<ol type="I">

<li>NOKIA ASHA 501</li>

<li>NOKIA LUMIA 625</li>

<li>NOKIA E63</li>

<li>NOKIA 208 MAGENTA</li></ol>


<ul>

<li><h3>SAMSUNG</h3></li>

</ul>

<ol type="I">

<li>SAMSUNG GALAXY On7</li>

<li>SAMSUNG GALAXY CORE</li>

<li>SAMSUNG GALAXY On5</li>

<li>SAMSUNG TIZEN Z38</li>

</ol></body>

</html>

Output:
WEEK- 4

1.Write a html program to use Hyperlinks using Text and establish link to a page
Section in same Page

<html>

<head>

<title>Hyperlink Example</title>

</head>

<body>

<p>Click following link</p>

<a href="formatting.html" target="_self">click here</a>

</body>

</html>
Output:
2.Write a html program for setting Link Colors

<html>

<head>

<title>Hyperlink Example</title>

</head>

<body alink="red" link="blue" vlink="green">

<p>Click following link</p>

<a href="orderedlist.html" target="_blank" >mobiles</a>

</body>

</html>

Output:
3.Write a html program to use Image as Links.

<html>

<head>

<title>Hyperlink Example</title>

</head>

<body bgcolor="skyblue">

<h1>Click on the image</h1>

<a href="font.html" ><img src="5mavuy.jpg" height="100"

width="100"></a>

</body>

</html>

Output:
4.Write a html program to display HTML Marquees.

<html>

<head>

<title>HTML marquee Tag</title></head>

<body bgcolor="black">

<marquee behaviour="alternate" bgcolor="cream" direction="left">WELCOME


TO VAAGDEVI GROUP OF INSTITUTIONS</marquee>

</body>

</html>

Output:
WEEK- 5

1.Write a html program on Frames vertical and horizontal.

<html>

<head>

<title> Frames in HTML</title></head>

<frameset rows="200,200">

<frameset cols="40%,60%">

<frame src="unordered.html">

<frame src="ordered.html">

</frameset>

<frame src="font.html"></frameset>

</html>

Output:
2.Write a html program using the Font tag.

<html>

<body>

<font size="3" color="red">Hai</font></br>

<font size="2" color="blue">Hello</font></br>

<font face="bold" color="black">Welcome to WT lab</font>

</body>

</html>

Output:
WEEK -6

1.Write a html program on Form Controls for Creating a user registration form
containing all the form.

<html>

<head>

<title>STUDENT REGISTRATIONFORM</title>

</head>

<body>

<center><h1>REGISTRATION FORM</h1>

<form>

<table>

<tr>

<td>FIRST NAME</td>

<td><input type="text"/></td>

</tr><br/>

<tr>

<td>LAST NAME</td>

<td><input type="text"/></td>

</tr><br/>

<tr>

<td>GENDER</td>

<td><input type="radio" name="sex" value="male"/>Male<br/>

<input type="radio" name="sex" value="Female"/>Female


</td>

</tr>

<tr>

<td>HALL TICKET NO</td>

<td><input type="text"/></td>

</tr>

<br/>

<tr>

<td>BRANCH</td>

<td><select name="branch">

<option>CSE</option>

<option>IT</option>

<option>ECE</option>

<option>EEE</option>

<option>MECH</option>

<option>CIVIL</option>

</td>

</tr>

<tr>

<td></select>

<td>HOBBIES</td>

<td>

<input type="checkbox" name="Reading" value="Reading"/>Reading<br/>


<input type="checkbox" name="Playing" value="Playing"/>Playing<br/>

<input type="checkbox" name="Others" value="Others"/>Others

</td>

</tr>

</br>

<tr>

<td>GOAL</td>

<td><textarea rows="2" cols="20"></textarea></td>

</tr>

<tr>

<td align="right"><input type="button" value="submit"/></td>

<td align="left"><input type="button" value="clear"/></td>

</tr>

</table>

</form>

</center>

</body>

</html>
Output:
WEEK- 7

1.Write a html program on Stylesheet using External Style sheet,Internal Style


sheet,Inline Style sheet.

Style.css

body

background-color:pink;

h1

color:red;

font-size:30

color:grey;

font-style:italic

a:visited{color:green}

a:hover{color:yellow}
External style sheet:

<html>

<head>

<title>External Style Sheet</title>

<link href="style.css" rel="stylesheet"/>

</head>

<body>

<a href="form.html">click here</a>

<h1>have a nice day</h1>

<p>paragraph text</p>

</body>

</html>

Output:
Internal Style sheet:

<html>

<head>

<title>Internal Style Sheet</title>

<style type="text/css">

body

background-color:pink;}

h1{font-size:36p;color:red;}

p{font-style:italic;color:grey:}

a:visited{color:green;}

a:active{color:blue;}

a:hover{color:yellow;}

</style>

<body>

<center>

<a href="fonttags.html">click here</a>

<h1>HELLO</h1>

<p>Have a nice day</p>

</center>

</body>

</html>
Output:
Inline Style Sheet:

<html>

<body bgcolor="green">

<h1 style="color:pink">Archana</h1>

<h1 style="font-style:italic;color:red">Anitha</h1>

</body>

</html>

Output:
WEEK-8

Write html program on layers.

<html>

<head>

<title>HTML layer Tag</title>

</head>

<body>

<layer id="layer1" top="250" left="50" width="200" height="200" bgcolor="red">

<p>layer 1</p>

</layer>

<layer id="layer2" top="350" left="50" width="200" height="200"

bgcolor="green">

<p>layer 2</p>

</layer>

<layer id="layer3" top="450" left="250" width="200"

height="200" bgcolor="green">

<p>layer 3</p>

</layer>

</body>

</html>
Output:
WEEK-9

1.Write a javaScript to display hello world using write method.

<html>

<head>

<title>javascript example</title>

<script type="text/javascript">

document.write("hello world")

</script>

</head>

</html>

Output:
2.Write a Javascript using function and display alert message.

<html>

<head>

<title>javascript example with alert()</title>

<script type="text/javascript">

window.alert("Hello world");

</script>

</head>

<body>WELCOME TO JAVASCRIPT</body>

</html>

Output:
WEEK-10

1.Write a javascript to read two values using prompt and display sum of two
numbers.

<html>

<script type="text/javascript">

var a1,a2,b1,b2,sum;

a1=window.prompt("enter first number");

a2=window.prompt("enter second number");

b1=parseInt(a1);

b2=parseInt(a2);

sum=b1+b2;

document.writeln("sum="+sum);

</script>

</html>
Output:
2.Write a javaScript to display factorial of a number.

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<script type="text/javascript">

var a1,b1;

a1=window.prompt("enter the number");

b1=parseInt(a1);

for(var i=1;i< a1;i++)

b1 = i*b1;

document.write(b1);

</script>

</body>

</html>
Output:
WEEK-11

1.write a javascript on single dimension array for search program.

<html>

<head>

<title> Linear Searching using Arrays </title>

</head>

<body>

<script language="Javascript">

a=new Array(20,30,10,50,40,70,60);

document.write("<h3> contents of array </h3>");

n=a.length;

for(var i=0;i<n;i++)

document.writeln(a[i]+"&nbsp&nbsp&nbsp");

var element=window.prompt("enter the element to be search","0");

document.write("<br><br><br>the element to be searched


is::"+element+"<br><br>");

i=0;

while(a[i]!=element && i<n)

i++;

}
if(i<n)

document.writeln("element found at: a["+i+"] position");

else

document.write("element not found");

</script>

</body>

</html>

output:
2.Write a javascript for sorting and array of elements.

<html>

<head>

<title> Linear Search </title>

</head>

<body>

<script language="Javascript">

a=new Array(20,50,40,10,30,40,70,15);

document.write("<h3> contents of array </h3>");

for(var i=0;i<a.length;i++)

document.writeln(a[i]+"&nbsp&nbsp&nbsp");

// document.wtiteln("<br> reversing the array:::"+a.reverse());

document.writeln("<br> <br>");

document.writeln("<br> sorted contents of array::"+a.sort());

document.writeln("<br> <br>");

document.write("<br>"+ a.toString());

document.write("<h3> This is Javascript </h3>");

</script>

</body>

</html>
output:
WEEK-12

2.Write a javascript on multidimentional array Eg.Matrix Addition

<html>

<head>

<title>Array Addition</title>

<script language="javascript">

var a,n,i,j,b,c;

a=[[],[]];

b=[[],[]];

c=[[],[]];

n=parseInt(window.prompt("Enter the array size"," "));

window.alert("Enter the elements in the first array");

for (i=0;i<n;i++)

for (j=0;j<n;j++)

a[i][j]=parseInt(window.prompt("Enter the element",""));

window.alert("Enter the elements in the second array");

for (i=0;i<n;i++)

for (j=0;j<n;j++)
{

b[i][j]=parseInt(window.prompt("Enter the element",""));

document.writeln("<br>The elements of Ist Matrix are..");

for (i=0;i<n;i++)

for (j=0;j<n;j++)

document.writeln(a[i][j]);

document.writeln("<br>The elements of IInd Matrix are..");

for (i=0;i<n;i++)

for (j=0;j<n;j++)

document.writeln(b[i][j]);

for (i=0;i<n;i++)

for (j=0;j<n;j++)
{

c[i][j]=a[i][j]+b[i][j];

document.writeln("<br>The addition of matrices is:");

for (i=0;i<n;i++)

for (j=0;j<n;j++)

document.writeln(c[i][j]);

</script>

</head>

</html>

output:
WEEK-13

Wirte javascript to validate the following fields of the above registration page

a. Name(Name should contains alphabets and the length should not be less than 6
character).

b. Password(Password should not be less than 6 characters length).

c. E-mail_id(should not contain any invalid and must follow the standard pattern
name@domain.com)

d. Phone number(Phone numbe should contain 10 digits only).

<html>

<title>Validation</title>

<head>

<script language="javascript">

var aa=0;

function verify()

if(name()&&password()&&email()&&phone())

alert("Validation Successfull")

function name()

var name=f1.n.value

if(name.length<6)

alert("name should contain 6 characters")


else

return true

function password()

var password=f1.p.value

if(password.length<6)

alert("Password should contain 6 character")

else

return true

function email()

var email=f1.em.value

if(email.indexOf("@")<0)

alert("Enter valid email id")

else

return true

function phone()

var phone=f1.pn.value

if(phone.length<10)
alert("Enter 10 digits")

else

return true

</script>

</head>

<body>

<form name="f1" onClick="verify()">

Name: <input type="text" name="n"><br>

Password: <input type="password" name="p"><br>

E-mail: <input type="text" name="em"><br>

Phone No.: <input type="text" name="pn"><br>

<input type="submit" value="OK">

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

</form>

</body>

</html>
output:
catalog.dtd

<!-- Document type definition -->

<?xml version="1.0" encoding="UTF-8"?>

<!ELEMENT catalog (book)*>

<!ELEMENT book (title,author,publication,edition,isbn,price)>

<!ELEMENT title (#PCDATA)>

<!ELEMENT author (#PCDATA)>

<!ELEMENT publication (#PCDATA)>

<!ELEMENT edition (#PCDATA)>

<!ELEMENT isbn (#PCDATA)>

<!ELEMENT price (#PCDATA)>


catalog.css

<!-- CSS -->

catalog

font-family:arial;

font-size:16pt;

book

disply:block;

font-family:times new roman;

font-size:13pt;

title

font-family:arial;

color:maroon;

font-size:12pt;

author

font-family:arial;

}
publication,edition,isbn,price

disply:block;

font-family:arial;

color:black;

font-size:10pt;

margin-left:20pt;

}
catalog.xml

<!-- XML -->

<?xml version="1.0" encoding="UTF-8"?>

<?xml-stylesheet type="text/css" href="library.css"?>

<?xml-stylesheet type="text/xsl" href="catalog.xsl"?>

<!DOCTYPE catalog SYSTEM "catalog.dtd">

<catalog>

<book>

<title>xml</title>

<author>witson</author>

<publication>willy</publication>

<edition>5</edition>

<isbn>1234</isbn>

<price>200</price>

</book>

<book>

<title>xAI</title>

<author>russel</author>

<publication>prinston</publication>

<edition>6</edition>

<isbn>2345</isbn>

<price>300</price>

</book>
<book>

<title>java2</title>

<author>waston</author>

<publication>bpb</publication>

<edition>3</edition>

<isbn>3456</isbn>

<price>400</price>

</book>

<book>

<title>html</title>

<author>bates</author>

<publication>sam</publication>

<edition>4</edition>

<isbn>4567</isbn>

<price>500</price>

</book>

</catalog>
catalog.html

<!-- XSL -->

<?xml version="1.0"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

<center>

<h1>book information</h1>

<table border="1">

<tr bgcolor="gray">

<th>title</th>

<th>author</th>

<th>publication</th>

<th>edition</th>

<th>isbn</th>

<th>price</th>

</tr>

<xsl:for-each select="catalog/book">

<tr>

<td><xsl:value-of select="title"/></td>

<td><b> <xsl:value-of select="translate(author,

'abcdefghijklmnopqrstuvwxyz','ABCDEFGHIJKLMNOPQRSTUVWXYZ')"/>

</b></td>
<td><xsl:value-of select="publication"/></td>

<td><xsl:value-of select="edition"/></td>

<td><xsl:value-of select="isbn"/></td>

<td><xsl:value-of select="price"/></td>

</tr>

</xsl:for-each>

</table>

</center>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

output: