Scribd
Upload
342 views

Practical 1: Aim: Design A Webpage Using Different Text Formatting Tags. Code

The document contains details of 10 practical assignments for a Web Technology course. Each practical assignment aims to teach a different HTML/CSS/JavaScript concept. The practical assignments cover topics like using different text formatting tags, marquee tags, links between pages, image maps, tables with CSS, external CSS, frames, JavaScript prompts, and mouse events. Code snippets and expected outputs are provided for each practical assignment.

Uploaded by

viraj2001
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
342 views

Practical 1: Aim: Design A Webpage Using Different Text Formatting Tags. Code

The document contains details of 10 practical assignments for a Web Technology course. Each practical assignment aims to teach a different HTML/CSS/JavaScript concept. The practical assignments cover topics like using different text formatting tags, marquee tags, links between pages, image maps, tables with CSS, external CSS, frames, JavaScript prompts, and mouse events. Code snippets and expected outputs are provided for each practical assignment.

Uploaded by

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

SYBCA

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

Code:<html>

<head>

<title> Practical 1 </title>

</head>

<body<h3>

<p>patkar college(paragraph tag) </p>

<b>patkar college(Bold Tag) </b><br>

<i>patkar college (Italick Tag) </i><br>

<u>patkar college (Underline Tag) </u><br>

<Strong>patkar college (Strong Tag) </strong><br>

<em>patkar college (Emphasise Tag) </em><br>

<sup>patkar college </sup>(Superscript Tag)<br>

<sub>patkar college </sub>(Subscript Tag)<br>

<pre> patkar college (Pre Tag) </pre><br><br>

</h3>

<h1>patkar college (h1)</h1>

<h2>patkar college (h2)</h2>

<h3>patkar college (h3)</h3>

<h4>patkar college (h4)</h4>

<h5>patkar college (h5)</h5>

<h6>patkar college (h6)</h6>

</body>

WEB_TECHNOLOGY
SYBCA

</html>

Output:

WEB_TECHNOLOGY
SYBCA

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>

WEB_TECHNOLOGY
SYBCA

Output:

WEB_TECHNOLOGY
SYBCA

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

Code: prac3_1.html-

<html>

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

<body background="jio.jpg">

<h2><center>

<a href="prac3_1.html">jio</a>&nbsp; || &nbsp;

<a href="prac3_2.html"> airtle </a>&nbsp; || &nbsp;

<a href="prac3_3.html"> idea </a>&nbsp; <br><br></center>

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

<ul>

<li>Reliance Jio Infocomm Ltd (popularly known as Jio), is a mobile network


operator in the country.</li>

<li>It is owned by Reliance Industries, headquartered in Mumbai. </li>

<li>Jio provides 4G LTE services and is the only VoLTE (Voice over LTE)
service provider in India. </li>

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

</body>

</html>

prac3_2.html : <html>

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

<body background="airtel.png">

<h2><center>

<a href="prac3_1.html">jio</a>&nbsp; || &nbsp;

WEB_TECHNOLOGY
SYBCA

<a href="prac3_2.html"> airtle </a>&nbsp; || &nbsp;

<a href="prac3_3.html"> idea </a>&nbsp; <br><br></center>

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

<ul>

<li>JBharti Airtel Limited, also known as Airtel, is an Indian global


telecommunications services company based in Delhi, India.</li>

<li> It operates in 18 countries across South Asia and Africa, and also in the
Channel Islands.</li>

<li>Airtel provides GSM, 3G, 4G LTE, 4G+ mobile services, fixed line
broadband and voice services depending upon the country of operation.</li>

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

</body>

</html>

prac3_3.html : <html>

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

<body background="idea.jpg">

<h2><center>

<a href="prac3_1.html">jio</a>&nbsp; || &nbsp;

<a href="prac3_2.html"> airtle </a>&nbsp; || &nbsp;

<a href="prac3_3.html"> idea </a>&nbsp; <br><br></center>

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

<ul>

<li>Vodafone Idea Limited is an Aditya Birla Group Company, India's first


truly multinational corporation.</li>

<li>In line with the Government’s vision of Digital India, Idea has accelerated
its efforts of building a digital economy. </li>

WEB_TECHNOLOGY
SYBCA

<li>Idea has also set up a fibre network of over 1.50 lakh kms. </li>

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

</body>

</html>Output:

WEB_TECHNOLOGY
SYBCA

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

Code: <html>

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

<body>

<imgsrc="e.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:

WEB_TECHNOLOGY
SYBCA

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:blue;

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

height:500px;

width:700px;

Th {

font-size:25px;

color:purple;

WEB_TECHNOLOGY
SYBCA

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

<td>14/3/99</td>

<td>BCA</td>

<td>malad</td>

<td>[email protected]</td>

</tr>

<tr>

WEB_TECHNOLOGY
SYBCA

<td>2</td>

<td>dilip</td>

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

<td>BCA</td>

<td>goregon</td>

<td>[email protected]</td>

</tr>

<tr>

<td>3</td>

<td>shailesh</td>

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

<td>BCA</td>

<td>andheri</td>

<td>[email protected]</td>

</tr>

<tr>

<td>4</td>

<td>vishu</td>

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

<td>BCA</td>

<td>malad</td>

<td>[email protected]</td>

</tr>

<tr>

<td>5</td>

WEB_TECHNOLOGY
SYBCA

<td>akshay</td>

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

<td>BSC</td>

<td>Andheri</td>

<td>[email protected]</td>

</tr></table>

</b></i>

</center>

</body>

</html>

Output:

WEB_TECHNOLOGY
SYBCA

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

Code:
prac6.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;

WEB_TECHNOLOGY
SYBCA

prac6.html :

<html>

<head>

<title> Table</title>

<link rel="stylesheet" type="text/css" href="prac6.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>viraj</td>

<td>14/3/99</td>

WEB_TECHNOLOGY
SYBCA

<td>BCA</td>

<td>malad</td>

<td>[email protected]</td>

</tr>

<tr>

<td>2</td>

<td>dilip</td>

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

<td>BCA</td>

<td>goregon</td>

<td>[email protected]</td>

</tr>

<tr>

<td>3</td>

<td>shailesh</td>

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

<td>BCA</td>

<td>andheri</td>

<td>[email protected]</td>

</tr>

<tr>

<td>4</td>

<td>vishu</td>

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

<td>BCA</td>

WEB_TECHNOLOGY
SYBCA

<td>malad</td>

<td>[email protected]</td>

</tr>

<tr>

<td>5</td>

<td>akshay</td>

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

<td>BSC</td>

<td>Andheri</td>

<td>[email protected]</td>

</tr></table>

</b></i>

</center>

</body>

</html>

Output:

WEB_TECHNOLOGY
SYBCA

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>

WEB_TECHNOLOGY
SYBCA

Output:

WEB_TECHNOLOGY
SYBCA

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>

WEB_TECHNOLOGY
SYBCA

Output:

WEB_TECHNOLOGY
SYBCA

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='blue '" onmouseout="style.color= 'red' ">


NATURE</h1>

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

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

</body>

</html>

Output:

WEB_TECHNOLOGY
SYBCA

Practical 10
Aim:Design a Webpage which displays the javascript popupboxes:

1. Alert.

2. Confirm.

3. Prompt.

1. Alert Box: (Code:)

<html>

<body>

<h2>Javascript Alert</h2>

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

<script>

function myFunction() {

alert ("this progrom is not working!");

</script>

</body></html>

Output:

WEB_TECHNOLOGY
SYBCA

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

WEB_TECHNOLOGY
SYBCA

Output:

2. 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:", "viraj");
if (person == null || person ==" ")
{
txt="User cancelled the prompt !";
}
else
{
txt="Hello "+ person + "! How are you today?";
}
document.getElementById("demo").innerHTML=txt;
}
</script>
</body>

WEB_TECHNOLOGY
SYBCA

</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() ;

WEB_TECHNOLOGY
SYBCA

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

WEB_TECHNOLOGY
SYBCA

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>

WEB_TECHNOLOGY
SYBCA

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

WEB_TECHNOLOGY
SYBCA

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

WEB_TECHNOLOGY
SYBCA

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

WEB_TECHNOLOGY
SYBCA

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

WEB_TECHNOLOGY
SYBCA

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

WEB_TECHNOLOGY
SYBCA

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

WEB_TECHNOLOGY
SYBCA

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

WEB_TECHNOLOGY
SYBCA

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

WEB_TECHNOLOGY
SYBCA

Practical 14
Aim:Design XML Schema and corresponding XML document.

Code:

Order.xml:

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

<shiporderorderid="889923"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation="shiporder.xsd">

<orderperson>John Smith</orderperson>

<shipto>

<name>Ola Nordmann</name>

<address>Langgt 23</address>

<city>4000 Stavanger</city>

WEB_TECHNOLOGY
SYBCA

<country>Norway</country>

</shipto>

<item>

<title>Empire Burlesque</title>

<note>Special Edition</note>

<quantity>1</quantity>

<price>10.90</price>

</item>

<item>

<title>Hide your heart</title>

<quantity>1</quantity>

<price>9.90</price>

</item>

</shiporder>

shiporder.xsd:

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

<xs:schemaxmlns:xs="http://www.w3.org/2001/XMLSchema">

<xs:element name="shiporder">

<xs:complexType>

<xs:sequence>

<xs:element name="orderperson" type="xs:string"/>

<xs:element name="shipto">

<xs:complexType>

<xs:sequence>

<xs:element name="name" type="xs:string"/>

WEB_TECHNOLOGY
SYBCA

<xs:element name="address" type="xs:string"/>

<xs:element name="city" type="xs:string"/>

<xs:element name="country" type="xs:string"/>

</xs:sequence>

</xs:complexType>

</xs:element>

<xs:element name="item" maxOccurs="unbounded">

<xs:complexType>

<xs:sequence>

<xs:element name="title" type="xs:string"/>

<xs:element name="note" type="xs:string" minOccurs="0"/>

<xs:element name="quantity" type="xs:positiveInteger"/>

<xs:element name="price" type="xs:decimal"/>

</xs:sequence>

</xs:complexType>

</xs:element>

</xs:sequence>

<xs:attribute name="orderid" type="xs:string" use="required"/>

</xs:complexType>

</xs:element>

</xs:schema>

Output:

WEB_TECHNOLOGY
SYBCA

WEB_TECHNOLOGY

You might also like