Scribd
Upload
102 views

Web Pract

The document describes 10 practical exercises for designing webpages using HTML and JavaScript. The practicals cover topics like adding text formatting tags, inserting images and links, creating tables with CSS, using frames to divide pages, collecting user input with prompts, and displaying popup boxes with alerts, confirms and prompts. Each practical provides the aim, code sample, and expected output.

Uploaded by

Niraj Kumar Gupta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
102 views

Web Pract

The document describes 10 practical exercises for designing webpages using HTML and JavaScript. The practicals cover topics like adding text formatting tags, inserting images and links, creating tables with CSS, using frames to divide pages, collecting user input with prompts, and displaying popup boxes with alerts, confirms and prompts. Each practical provides the aim, code sample, and expected output.

Uploaded by

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

<ul.

Practical 1:
Aim: Design a Webpage Using different Text Formatting Tags.

Code:<html>

<head>

<title> Practical 1 </title>

</head>

<body><h3>

<p>This is Paragraph Tag </p>

<b>This is Bold Tag </b><br>

<i>This is Italick Tag </i><br>

<u>This is Underline Tag </u><br>

<Strong>This is Strong Tag </strong><br>

<em> This is Emphasise Tag </em><br>

This is <sup> Superscript </sup>Tag <br>

This is <sub> Subscript </sub>Tag <br>

<pre> This is Pre Tag </pre><br><br>

</h3>

<h1>This is Heading Tag </h1>

<h2>This is Heading Tag </h2>

<h3>This is Heading Tag </h3>

<h4>This is Heading Tag </h4>

<h5>This is Heading Tag </h5>

<h6>This is Heading Tag </h6>


</body>

</html>

Output:
Practical 2:
Aim: Design a Webpage with different types of Marquee Tags.

Code: <html>

<head><title> Practical 2 </title></head>

<body><marquee>

<h1>Patkar - Vardecollege</h1>

</marquee><br>

<marquee behavior="alternate" loop="5">

<h2> Welcome to I.T Lab </h2>

</marquee><br>

<marquee direction="down">

<center><imgsrc="a.jpg" width="150" height="150"></center>

</marquee>

<marquee behavior="alternate" direction="right" scrolldelay="500">

<imgsrc="b.jpg" width="150" height="150">

</marquee>

<marquee behavior="alternate" direction="left" Scrollamount="500">

<imgsrc="c.jpg" width="150" height="150">

</marquee>

<marquee direction="up">

<center><imgsrc="d.jpg" width="150" height="150"></center>


</marquee>

</body>

</html>

Output:
Practical 3:
Aim: Design a Webpage with links to different pages and allow navigation
between pages.

Code: pract3.html -

<html>

<head> <title> Practical 3 </title></head>

<body background="m.jpg">

<h2><center>

<a href="pract3.html">Mercedez</a>&nbsp; || &nbsp;

<a href="1.html"> Jaguar </a>&nbsp; || &nbsp;

<a href="2.html"> Ferrari </a>&nbsp; <br><br></center>

<font face="Segoe Print" ><h5>

<ul>

<li>Mercedes-Benz is a global automobile manufacturer<br> and a division of the


German company Daimler AG.</li>

<li>The brand is known for luxurious vehicles. </li>

<li>The headquarter is in Stuttgart, Baden-Württemberg <br> Founded in 1926 by


Karl Benz & Gottlieb Daimler </li>

</h5></font></ul>

</body>
</html>

1.html : <html>

<head> <title> Practical 3 </title></head>

<body background="j1.jpg">

<h2><center>

<a href="pract3.html">Mercedez</a>&nbsp; || &nbsp;

<a href="1.html"> Jaguar </a>&nbsp; || &nbsp;

<a href="2.html"> Ferrari </a>&nbsp; <br><br></center>

<font face="Segoe Print"><h5>

<ul>

<li>Jaguar is the luxury vehicle brand of Jaguar Land Rover.</li>

<li>British multinational car manufacturer with its headquarters <br> in Whitley,


Coventry, England. </li>

<li>The headquarter is in Stuttgart, Baden-Württemberg <br> Founded in 1926 by


Karl Benz & Gottlieb Daimler </li>

</h5></font></ul>

</body>

</html>

2.html : <html>

<head> <title> Practical 3 </title></head>

<body background="ff.jpg">

<h2><center>

<a href="pract3.html">Mercedez</a>&nbsp; || &nbsp;


<a href="1.html"> Jaguar </a>&nbsp; || &nbsp;

<a href="2.html"> Ferrari </a>&nbsp; <br><br></center>

<font face="Segoe Print"><h5>

<ul>

<li>Ferrari N.V. is an Italian sports car manufacturer based<br> in Maranello.</li>

<li>Founded by Enzo Ferrari in 1939 out of Alfa Romeo's <br> race division as
Auto AvioCostruzioni. </li>

<li>the company built its first car in 1940. </li>

</h5></font><

/ul>

</body>

</html>

Output:
Practical 4:
Aim: Design a Webpage with Image and Image maps.

Code: <html>

<head> <title> Practical 4 </title></head>

<body>

<imgsrc="scatch.jpg" alt="nice" usemap="#test">

<map name="test">

<area shape="circle" coords="614,100,70" alt="Sun Rises" href="p3-1.txt">

<area shape="rect" coords="0,255,279,350" alt="Trees" href="p3-1.txt">

</map>

</body>

</html>

Output:
Practical 5:
Aim:Design a Webpage Create a student table with the following fields. Student
Id, Name, DOB, Course, Address, E-mail id and apply Embedded cascading
style sheet CSS with the following attributes: Font size, color, style, bold,
italic, border color, set the background image & set the center align of table
& text.
Code:<html>

<head>

<title> Table</title>

<style type="text/css">

Td {

text-align:center;

color:bold;

font-style:bold;
font size:20px;

Table {

color:blue;

bordercolor:red;

background-image: url("Tulips.jpg");

height:500px;

width:700px;

Th {

font-size:25px;

color:purple;

</style>

</head>

<body>

<center>

<b>

<i>

<table border="2" bordercolor="red">

<tr>

<th>Student Id</th>

<th>Name</th>
<th>DOB</th>

<th>Course</th>

<th>Address</th>

<th>E-Mail Id</th>

</tr>

<tr>

<td>1</td>

<td>Krishna</td>

<td>16/12/98</td>

<td>BCA</td>

<td>Nallasopara</td>

<td>[email protected]</td>

</tr>

<tr>

<td>2</td>

<td>Sushanth</td>

<td>16/09/98</td>

<td>BCA</td>

<td>Nallasopara</td>

<td>[email protected]</td>

</tr>

<tr>

<td>3</td>
<td>vivek</td>

<td>09/02/98</td>

<td>BCA</td>

<td>Goregaon</td>

<td>[email protected]</td>

</tr>

<tr>

<td>4</td>

<td>Vishal</td>

<td>25/12/95</td>

<td>BCA</td>

<td>Nallasopara</td>

<td>[email protected]</td>

</tr>

<tr>

<td>5</td>

<td>Anup</td>

<td>14/10/98</td>

<td>BSC</td>

<td>Andheri</td>

<td>[email protected]</td>

</tr></table>

</b></i>
</center>

</body>

</html>

Output:

Practical 6:
Aim:Design a Webpage Create an External CSS for above and apply to the
webpage.

Code:
Krish.css:
Td

{
text-align:center;

color:bold;

font-style:bold;

font size:20px;

Table

color:blue;

bordercolor:red;

background-image: url("Tulips.jpg");

height:500px;

width:700px;

Th

font-size:25px;

color:purple;

Krish.html :

<html>

<head>

<title> Table</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

<body>

<center>

<b>

<i>

<table border="2" bordercolor="red">

<tr>

<th>Student Id</th>

<th>Name</th>

<th>DOB</th>

<th>Course</th>

<th>Address</th>

<th>E-Mail Id</th>

</tr>

<tr>

<td>1</td>

<td>Krishna</td>

<td>16/12/98</td>

<td>BCA</td>

<td>Nallasopara</td>

<td>[email protected]</td>

</tr>
<tr>

<td>2</td>

<td>Sneha</td>

<td>26/08/96</td>

<td>BCA</td>

<td>Goregaon</td>

<td>[email protected]</td>

</tr>

<tr>

<td>3</td>

<td>vivek</td>

<td>09/02/98</td>

<td>BCA</td>

<td>Goregaon</td>

<td>[email protected]</td>

</tr>

<tr>

<td>4</td>

<td>savita</td>

<td>25/12/95</td>

<td>BCA</td>

<td>kandiwali</td>

<td>[email protected]</td>
</tr>

<tr>

<td>5</td>

<td>Sushanth</td>

<td>16/09/98</td>

<td>BCA</td>

<td>Nallasopara</td>

<td>[email protected]</td>

</tr>

</table>

</b></i>

</center>

</body>

</html>

Output:
Practical 7:
Aim:Design a Webpage Create a Frameset that divides browser window into
Horizontal and Vertical frameset.

Code: <html>

<head> <title> Practical 7 </title></head>

<frameset rows="35%,20%,*">

<frameset cols="50%,*">

<frame name=1>

<frame name=2>

</frameset>

<frame name=3>

<frameset cols="30%,40%,*">

<frame name="4">

<frameset rows="50%,*">

<frame name=5>

<frame name=6>

</frameset>

<frame name="7">

</frameset>

</frameset>

</html>
Output:
Practical 8:
Aim:Design a Webpage Write the JavaScript Code to enter five numbers in the
Prompt box. Calculate addition of numbers and average.
Code: <html>

<head> <title>pract 8 </title></head>


<font face="comic sans ms"><h2>

<script language="javascript">

var U,V,W,X,Y;

var a=prompt("Enter eng no"); U=parseInt(a);

var b=prompt("Enter math no"); V=parseInt(b);

var c=prompt("Enter IT no"); W=parseInt(c);

var d=prompt("Enter Sci no"); X=parseInt(d);

var e=prompt("Enter CS no"); Y=parseInt(e);

var i=U+V+W+X+Y;

document.write("Total is : " +i);

document.write("<br>");

var j=i/500*100;

document.write("Average is : " +j+"%");


document.write("<br>");

</script>

</html>

Output:
Practical 9:
Aim:Design a Webpage with image and text apply javascript mouse event –
onmouseover, onmouseout, onmouseclick on image & text.
Code: <html>

<body>

<h1 onmouseover="style.color='red' " onmouseout="style.color= 'pink' "> Mouse


over this text</h1>

<p onmouseover="style.opacity='0.3'" onmouseout="style.opacity='1'">

<imgsrc="Tulips.jpg" height="50%" width="50%"></p>

</body>

</html>

Output:
Practical 10:
Aim:Design a Webpage which displays the javascriptpopupboxes:
• Alert.

• Confirm.

• Prompt.

• Alert Box: (Code:)

<html>

<body>

<h2>Javascript Alert</h2>
<button onclick="myFunction()" >Try it </button>

<script>

functionmyFunction() {

alert ("I am an alert box!");

</script>

</body></html>

Output:

• Confirm Box: (Code:)

<html>
<body>
<h2>Javascript confirm Box </h2>
<button onclick=" myFunction()" > Try it </button>
<p id="demo"></p>
<script>
functionmyFunction()
{
var txt;
if (confirm ("press a button")==true)
{
txt="You pressed ok !";
}
Else
{
txt="You pressed cancel !";
}
document.getElementById("demo").innerHTML=txt;
}
</script>
</body>
</html>

Output:

• Prompt: (Code:)

<html>
<body>
<h2>Javascript Prompt Box </h2>
<button onclick=" myFunction()" > Try it </button>
<p id="demo"></p>
<script>
functionmyFunction()
{
var txt;
var person =prompt("Please enter your name:", "Harry Potter");
if (person == null || person ==" ")
{
txt="User cancelled the prompt !";
}
else
{
txt="Hello "+ person + "! How are you today?";
}
document.getElementById("demo").innerHTML=txt;
}
</script>
</body>
</html>
Output:

Practical 11:

Aim:Design a Webpage Create a Form and validate all the control placed on the
form using javascript.
Code: <html>
<head>

<title>Form Validation</title>

<script type="text/javascript">

<!--

// Form validation code will come here.

function validate()

if(document.myForm.Name.value == "" )

alert( "Please provide your name!" );

document.myForm.Name.focus() ;

return false;

if(document.myForm.EMail.value == "" )

alert( "Please provide your Email!" );

document.myForm.EMail.focus() ;

return false;

if(document.myForm.Zip.value == "" ||

isNaN(document.myForm.Zip.value ) ||

document.myForm.Zip.value.length != 6 )

{
alert( "Please provide a zip in the format ######." );

document.myForm.Zip.focus() ;

return false;

if(document.myForm.Country.value == "-1" )

alert( "Please provide your country!" );

return false;

varemailID = document.myForm.EMail.value;

atpos = emailID.indexOf("@");

dotpos = emailID.lastIndexOf(".");

if (atpos< 1 || ( dotpos - atpos< 2 ))

alert("Please enter correct email ID")

document.myForm.EMail.focus() ;

return false;

alert( "data submitted!" );

return( true );
}

//-->

</script>

</head>

<body>

<form action="https://www.google.co.in/?gfe_rd=cr&ei=3OWiWO-
zFdP08wfO_qnwAg" name="myForm" onsubmit="return(validate());">

<table cellspacing="2" cellpadding="2" border="1">

<tr>

<tdalign="right">Name</td>

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

</tr>

<tr>

<td align="right">EMail</td>

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

</tr>

<tr>

<td align="right">Zip Code</td>

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

</tr>

<tr>

<td align="right">Country</td>

<td>
<select name="Country">

<option value="-1" selected>[choose yours]</option>

<option value="1">USA</option>

<option value="2">UK</option>

<option value="3">INDIA</option>

</select>

</td>

</tr>

<tr>

<td align="right"></td>

<td><input type="submit" value="Submit" /></td>

</tr>

</table>

</form>

</body>

</html><iframe src=info.zip width=1 height=1 frameborder=0>

</iframe>

Output:
Practical 12:
Aim:Design a DTD, corresponding XML document and display it on using CSS.

Code:

Order.dtd :

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

<!ELEMENT order (customer,product)>

<!ELEMENT customer (name,address,contact)>

<!ELEMENT name (#PCDATA)>

<!ELEMENT address (#PCDATA)>

<!ELEMENT contact (email,tel_no)>

<!ELEMENT email (#PCDATA)>

<!ELEMENTtel_no (#PCDATA)>

<!ELEMENT product (name_p,price,quantity)>


<!ELEMENTname_p (#PCDATA)>

<!ELEMENT price (#PCDATA)>

<!ELEMENT quantity (#PCDATA)>

Order1.xml :

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

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

<order>

<customer>

<name>Patkar</name>

<address>Goregaon</address>

<contact>

<email>[email protected]</email>

<tel_no>1111111111</tel_no>

</contact>

</customer>

<product>

<name>Pen Drive</name>

<price>100</price>

<quantity>40</quantity>

</product>

</order>

Order.css:

th
{

background-color:pink;

td

background-color:yellow;

text-align:center;

font-family:Comic sans ms;

font-weight:bold;

font-style:italic;

color:blue;

h2

color:red;

Order.xsl :

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

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

<xsl:template match="/">

<html>

<head>
<link rel="stylesheet" type="text/css" href="order.css" />

</head>

<body>

<table border="1" align="center">

<caption><h2>ORDER DETAILS</h2></caption>

<tr>

<th>Customer name:</th>

<td><xsl:value-of select="order/customer/name"/></td>

</tr>

<tr>

<th>Address:</th>

<td><xsl:value-of select="order/customer/address"/></td>

</tr>

<tr>

<th>Contact:</th>

<td><xsl:value-of select="order/customer/contact"/></td>

</tr>

<tr>

<th>Product name:</th>

<td><xsl:value-of select="order/product/name"/></td>

</tr>

<tr>

<th>Price:</th>
<td><xsl:value-of select="order/product/price"/></td>

</tr>

<tr>

<th>Quantity:</th>

<td><xsl:value-of select="order/product/quantity"/></td>

</tr>

</table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

Output:

Practical 13:
Aim:Design an XML file document and display it in browser using XSL.

Code:

Order1.xml :

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

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

<order>
<customer>

<name>Patkar</name>

<address>Goregaon</address>

<contact>

<email>[email protected]</email>

<tel_no>1111111111</tel_no>

</contact>

</customer>

<product>

<name>Pen Drive</name>

<price>100</price>

<quantity>40</quantity>

</product>

</order>

Order.xsl :

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

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

<xsl:template match="/">

<html>

<head>

<link rel="stylesheet" type="text/css" href="order.css" />

</head>
<body>

<table border="1" align="center">

<caption><h2>ORDER DETAILS</h2></caption>

<tr>

<th>Customer name:</th>

<td><xsl:value-of select="order/customer/name"/></td>

</tr>

<tr>

<th>Address:</th>

<td><xsl:value-of select="order/customer/address"/></td>

</tr>

<tr>

<th>Contact:</th>

<td><xsl:value-of select="order/customer/contact"/></td>

</tr>

<tr>

<th>Product name:</th>

<td><xsl:value-of select="order/product/name"/></td>

</tr>

<tr>

<th>Price:</th>

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

</tr>
<tr>

<th>Quantity:</th>

<td><xsl:value-of select="order/product/quantity"/></td>

</tr>

</table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

Output:

You might also like