VCE WT Manual

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>
</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> 
<title>This is document title</title></head>
<body><p>Paragraph starts here.....</p>

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

<?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

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 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>
<isbn>2345</isbn>
<price>300</price>
</book>
<book>
<title>java2</title>
<author>waston</author>
<publication>bpb</publication>
<isbn>3456</isbn>
<price>400</price>
</book>
<book>
<title>html</title>
<author>bates</author>
<publication>sam</publication>
<isbn>4567</isbn>
<price>500</price>
</book>
</catalog>
catalog.html

<?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:

VCE WT Manual

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

VCE WT Manual

Uploaded by

Copyright:

Available Formats

WEEK -1

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

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

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

You delivered your assignment on time.

S.no Name Qualification

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

<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>

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

<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>

<head>

<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>

<h2> Image Tag</h2>

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

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

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

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

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

<table border="2" >

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

<table border="2" >

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

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

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

<li>SONY EXPERIA T3</li>

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

<li> SONY XPERAI T2 Ultra</li>

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

<li>NOKIA ASHA 501</li>

<li>NOKIA LUMIA 625</li>

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

<li>SAMSUNG GALAXY On7</li>

<li>SAMSUNG GALAXY CORE</li>

<li>SAMSUNG GALAXY On5</li>

<li>SAMSUNG TIZEN Z38</li>

<p>Click following link</p>

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

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

<p>Click following link</p>

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

<h1>Click on the image</h1>

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

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

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

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

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

<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>

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

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

<td>HALL TICKET NO</td>