Prac 1
Aim : Implement basic HTML tags to learn HTML
Code :
<html>
<head>
<title>prac1</title>
</head>
<body>
<form>
name:<input type="text" name="name"><br>
Gender:male <input type="radio" name="g" value="male"><br> female <input type="radio" name="g"
value="female"><br>
city : <select>
<option>ahmedabad</option>
<option>mumbai</option>
<option>surat</option>
<option>mehsana</option>
</select>
</form>
<hr>
<ol type="i">
<li>abc</li>
<li>xyz</li>
<li>mno</li>
</ol> <br>
<ul type="disc">
<li>abc</li>
<li>xyz</li>
<li>mno</li>
</ul>
<p>this is p tag</p><br>
<b>this is b tag</b><br>
<i>this is i tag</i><br>
<u>this is u tag</u><br>
<strong>strong</strong><br>
<del>del tag</del><br>
<ins>ins tag</ins><br>
h<sub>2</sub>0<br>
a<sup>2</sup><br>
<a href="">this is "a" tag with href</a><br>
<h1>h1 tag</h1><br>
<h2>h2 tag</h2><br>
<h3>h3 tag</h3><br>
<h4>h4 tag</h4><br>
<h5>h5 tag</h5><br>
<h6>h6 tag</h6><br>
<img src="img.jpg"><br>
</body>< /html>
Prac 2
Aim : Create table structure as given in image using table. Also Create 5 page structures for your
website.
Code :
<html>
<body>
<table border="1">
<tr><th colspan="3">HOSTEL</th></tr>
<tr>
<td>CATEGORY</td>
<td>Registration Fee</td>
<td>Annual/500 hrs <br> Whichever is earlier</td>
</tr>
<tr>
<td>Students</td>
<td>Rs 50</td>
<td>Rs 500</td>
</tr>
<tr>
<td>General</td>
<td>Rs 500</td>
<td>Rs 5000</td>
</tr>
<tr><th colspan="3">SERVICE</th></tr>
<tr>
<td>Students</td>
<td>Not Offered</td>
<td>Not Offered</td>
</tr>
<tr>
<td>General</td>
<td>Rs 500</td>
<td>Rs 15000</td>
</tr>
</table>
</body>
</html>
Prac 3
Aim: Create structure of website as given in image using div and external css. Also Create 5
page structures for your website using div and external css.
Code :
STYLESHEET.CSS
div
{
float:left;
border:1px solid black;
}
.c
{
clear:left;
}
.head
{
text-align:center;
width:604px;
font-weight:bold;
}
.field
{
width:200px;
}
.an
{
height:40px;
}
prac3.html
<html>
<head>
<title>Prc3</title>
<link rel="stylesheet" type="text/css" href="STYLESHEET.css">
</head>
<body>
<div>
<div class="head">HOSTEL</div>
<div class="c field an">CATEGORY</div>
<div class="field an">Registration Fee</div>
<div class="field an">Annual/500 hrs <br> Whichever is earlier</div> <div class="c
field">Students</div> <div class="field">Rs 50</div>
<div class="field">Rs 500</div>
<div class="c field">General</div>
<div class="field">Rs 500</div>
<div class="field">Rs 5000</div>
<div class="c head">SERVICE</div>
<div class="c field">Students</div>
<div class="field">Not Offered</div>
<div class="field">Not Offered</div>
<div class="c field">General</div>
<div class="field">Rs 500</div>
<div class="field">Rs 100</div>
</div>
</body>
</html>
Prac 4
Aim:Implement use of <ul>, <ol>, <li> tag to create navigation (menu) in your website.
Also make your website attractive by adding images and colors in website.
Code:
<html>
<head>
<title>Prc4</title>
<style>
.c1{
float:left;
list-style-type: none;
width:75px;
text-align: center;
background-color: buttonface;
margin: 2px;
}
.a{
text-decoration: none;
}
</style>
</head>
<body>
<ul>
<div style="background-color: darkred;border: 1px solid black;height: 22px;"> <div
class="c1"><li><a href="" class="a">Home</a></li></div> <div class="c1"><li><a href=""
class="a">HTML</a></li></div>
<div class="c1"><li><a href="" class="a">CSS</a></li></div>
<div class="c1"><li><a href="" class="a">JavaScript</a></li></div>
<div class="c1"><li><a href="" class="a">About Us</a></li></div>
<div class="c1"><li><a href="" class="a">Contact Us</a></li></div>
<div class="c1"><li><a href="" class="a">more...</a></li></div>
</div>
</ul>
</body>
</html>
Prac 5
Aim: Create a registration form and give proper validations.
Code:
<html>
<head><title>Prc5_Validation</title><script>
function Vfn(){
var nam=document.getElementById("name");
var em=document.getElementById("email");
var pwd=document.getElementById("pass");
var ad=document.getElementById("add");
var z=document.getElementById("zip");
var testem=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(em.value);
if(nam.value=="")
{
alert("Please Enter Name");
}
else if(testem==false)
{
alert("Enter Valid Email");
}
else if(pwd.value.length<8)
{
alert("Password is too short");
}
else if(pwd.value.length>16)
{
alert("Password is too large");
}
else if(ad.value=="")
{
alert("please Enter Address");
}
else if(isNaN(z.value))
{
alert("Zip Must be in number");
}
else
{
if(z.value.length!=6)
{
alert("please Enter 6 Digit zipcode");
} }
alert("Registration Successful");
}
</script>
</head>
<body>
<form>
Enter name : <input type="text" name="name" id="name"><br> Email : <input type="text"
name="email" id="email"><br>
Password : <input type="password" name="pass" id="pass"><br> Address : <input type="text"
name="add" id="add"><br>
Zip Code : <input type="text" name="zip" id="zip"><br> <input type="button" value="submit"
onclick="Vfn()">
</form>
</body>
</html>
Prac 6
Aim: Implement event handling in JavaScript.
Code:
<html>
<head>
<style>
div
{
margin-left: 50px;
margin-top: 50px;
}
</style>
</head>
<body>
<div>
First name: <input type="text" id="fname" onfocus="myFunction(this.id)"><br>
<p>Select a color from the list.</p>
<select id="mySelect" onchange="main()">
<option value="Red">Red
<option value="Green">Green
<option value="Blue">Blue
</select>
<p id="clr"></p>
<input type="text" onkeydown="main1()">
<p>Click the button to display the date.</p>
<button onclick="displayDate()">The time is?</button>
<p id="CDT"></p>
<h1 onmouseover="style.color='red'" onmouseout="style.color='black'">Mouse over this
text</h1>
<body style="margin:0px;">
<div id="coordiv" style="width:199px;height:99px;border:1px solid"
onmousemove="myFunction(event)" onmouseout="clearCoor()"></div>
<p>Mouse over the rectangle above, and get the coordinates of your mouse pointer.</p>
<p id="demo"></p>
</div>
</body>
<script>
function myFunction(x) {
document.getElementById(x).style.background = "yellow";
}
function main() {
var x = document.getElementById("mySelect").value;
document.getElementById("clr").innerHTML = "You selected: " + x;
}
function main1() {
alert("You pressed a key inside the input field");
}
function displayDate() {
document.getElementById("CDT").innerHTML = Date();
}
function myFunction(e) {
x = e.clientX;
y = e.clientY;
coor = "Coordinates: (" + x + "," + y + ")";
document.getElementById("demo").innerHTML = coor
}
function clearCoor() {
document.getElementById("demo").innerHTML = "";
}
</script>
</body>
</html>
Prac 7
Aim: Create an XML file which will display the Book information and Create a Document
Type Definition (DTD) to validate the XMLFile.
*Create XML schemas XSL and CSS for the same.
Code:
bookstore1.xml
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="bookstore.xsl"?>
<bookstore>
<book>
<title>Developing Webapplication</title>
<author>M. T. Savaliya</author>
<year>2012</year>
<price>350.00</price>
</book>
<book>
<title>System Programming</title>
<author>D. M. Dhamdhre</author>
<year>2011</year>
<price>275.50</price>
</book>
<book>
<title>Complete Reference JAVA</title>
<author>Herbert Schildt</author>
<year>2013</year>
<price>439.95</price>
</book>
</bookstore>
bookstore.xsl
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/">
<html>
<body>
<h2> My Books collection</h2>
<table border="1">
<tr bgcolor="red">
<th align="left">Title</th>
<th align="left">Author</th>
<th align="left">Year</th>
<th align="left">Price</th>
</tr>
<xsl:for-each select="bookstore/book">
<tr>
<td><xsl:value-of select="title"/></td>
<xsl:choose>
<xsl:when test="price > 400">
<td><xsl:value-of select="author"/></td>
<td><xsl:value-of select="year"/></td>
<td bgcolor="yellow"><xsl:value-of select="price"/></td> </xsl:when>
<xsl:when test="price > 200">
<td><xsl:value-of select="author"/></td>
<td><xsl:value-of select="year"/></td>
<td bgcolor="pink"><xsl:value-of select="price"/></td> </xsl:when>
<xsl:otherwise>
<td><xsl:value-of select="author"/></td> </xsl:otherwise>
</xsl:choose>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Comments