IWT Lab Manual
Q1.Create a static webpage using table tags of HTML
<html>
<body>
<TABLE BORDER="1" CELLPADDING="2">
<CAPTION ALIGN="Top"><b>Specification Table with Hours
and Marks<CAPTION>
<TR>
<TH ROWSPAN="2">Unit No.</TH>
<TH ROWSPAN="2">Unit Title</TH>
<TH ROWSPAN="2">Teaching Hours</TH>
<TH Colspan="4">Distribution of Theory Marks</TH>
</TR>
<TR>
<TD>R Level </TD>
<TD>U Level </TD>
<TD>A Level </TD>
<TD>Total Marks </TD>
</TR>
<TR>
<TD> <center>I </TD>
<TD>Introduction to Internet Technology</TD>
<TD><center>2</TD>
<TD><center>4</TD>
<TD><center>4</TD>
<TD><center>0</TD>
<TD><center>8</TD>
</TR>
<TR>
<TD> <center>II </TD>
<TD>Basics of HTML & CSS</TD>
<TD><center>6</TD>
<TD><center>0</TD>
<TD><center>2</TD>
<TD><center>6</TD>
<TD><center>8</TD>
</TR>
<TR>
<TD> <center>III </TD>
<TD>Active Server Pages 3.0</TD>
<TD><center>6</TD>
<TD><center>4</TD>
<TD><center>8</TD>
<TD><center>0</TD>
<TD><center>12</TD>
</TR>
<TR>
<TD> <center>IV </TD>
<TD>Server Side Coding with VBScript and XML</TD>
<TD><center>8</TD>
<TD><center>2</TD>
<TD><center>4</TD>
<TD><center>8</TD>
INTERNET TECHNOLOGY 4
<TD><center>14</TD>
</TR>
<TR>
<TD> <center>V </TD>
<TD>ASP Objects & Components</TD>
<TD><center>10</TD>
<TD><center>4</TD>
<TD><center>4</TD>
<TD><center>6</TD>
<TD><center>14</TD>
</TR>
<TR>
<TD> <center>VI </TD>
<TD>Accessing database with ASP & ADO</TD>
<TD><center>10</TD>
<TD><center>4</TD>
<TD><center>4</TD>
<TD><center>6</TD>
<TD><center>14</TD>
</tr>
<TR>
<TD> </TD>
<TD><center><b>Total</TD>
<TD><center><b>42</TD>
<TD><center><b>18</TD>
<TD><center><b>26</TD>
<TD><center><b>26</TD>
<TD><center><b>70</TD>
</tr>
</TABLE>
</body>
</html>
Q2. Create a static web page which defines all text formatting tags of HTML in tabular format
<html>
<body>
<center>
<table border=1>
<caption align="top"><font size="+2" color="red">Text
Formatting Tags</font> </caption>
<tr>
<th>HTML Tag</th>
<th>Output</th>
</tr>
<tr>
<td>normal text</td>
<td>hello world</td>
</tr>
<tr>
<td>Font & its attributes</td>
<td><FONT SIZE="+2" COLOR="#RRGGBB"> hello world
</FONT></td>
</tr>
<tr>
<td><B></td>
<td><B> Bold </B></td>
</tr>
<tr>
<td><I></td>
<td><I> Italic </I></td>
</tr>
<tr>
<td><U></td>
<td><U> Underline </U></td>
</tr>
<tr>
<td><EM></td>
<td><EM> Emphasis </EM></td>
</tr>
<tr>
<td><STRONG></td>
<td><STRONG> STRONG </STRONG></td>
</tr>
<tr>
<td><TELETYPE></td>
<td><TT> TELETYPE </TT></td>
</tr>
<tr>
<td><CITE></td>
<td><CITE> Citation </CITE></td>
</tr>
<tr>
<td><STRIKE></td>
<td><STRIKE> strike-through text </STRIKE></td>
</tr>
INTERNET TECHNOLOGY 6
<tr>
<td><BIG></td>
<td><BIG> text in a big font </BIG></td>
</tr>
<tr>
<td><SMALL></td>
<td><SMALL> text in a small font <SMALL></td>
</tr>
<tr>
<td><SUB></td>
<td>a<SUB> b </SUB></td>
</tr>
<tr>
<td><SUP></td>
<td>a<SUP> b</SUP></td>
</tr>
</table>
</body>
</html>
Q3. Create webpage using list tags of HTML
<html>
<body>
<b> HTML List: Ordered, Unordered & Definition List</b>
<hr>
Following is the list of proposed student activities like:
<OL type=1>
<li>Develop programs related with unit vice topics in
computer laboratory.</li>
<li>Develop any module of to be useful in real life
application.</li>
<li>Multimedia presentation of module developed by
students.</li>
</OL>
<hr>
List of Software/Learning Websites
<UL>
<li><u>ASP Tutorial - W3Schools</u><br>
<a href=http://www.w3schools.com/asp/>
www.w3schools.com/asp</a></li>
<li><u>Classic ASP Tutorials & Articles - Web Wiz</u><br>
<a href="http://www.webwiz.co.uk">www.webwiz.co.uk -
Knowledgebase</a></li>
<li><u>HTML Tutorial - W3Schools</u><br>
<a href="http://www.w3schools.com/html/">
www.w3schools.com/html</a></li>
<li><u>CSS Tutorial</u><br>
<a href="http://www.csstutorial.net/">
www.csstutorial.net</a></li>
<li><u>VBScript Tutorial - Tutorials Point</u><br>
<a
href="http://www.tutorialspoint.com/vbscript/index.htm">
www.tutorialspoint.com/vbscript/index.htm</a></li>
<li><u>ADO Tutorial - W3Schools</u><br>
<a href="http://www.w3schools.com/ADO/default.asp">
www.w3schools.com/ADO/default.asp</a></li>
</UL>
<hr>
<DL>
<DT>HTML</DT>
<DD>Hyper Text Markup Language</DD>
<DT>XML</DT>
<DD>eXtensible Markup Language</DD>
</DL>
</body>
</html>
Q4. Create employee registration webpage using HTML form objects
<html>
<body>
<Center>
<img src="employee_icon.png" height=52 width=52>
<Font size="+3" color=red>Employee Registration Form</font>
<form method=post action="prac.html">
<table>
<tr>
<td></td>
<td><input type=radio name=initial checked>Mr.
<input type=radio name=initial>Mrs.
<input type=radio name=initial>Ms.</td>
</tr><tr>
<td>First Name</td>
<td><input type=text name=fn placeholder="First Name"></td>
</tr><tr>
<td>Last Name</td>
<td><input type=text name=ln placeholder="Last Name"></td>
</tr> <tr>
<td>Mail Address1</td>
<td><input type=text name=add1></td>
</tr><tr>
<td>Mail Address2</td>
<td><input type=text name=add2></td>
</tr><tr>
<td>City</td>
<td><input type=text name=ct></td>
</tr><tr>
<td>State</td>
<td><select name=state>
<option value="Gujarat">Gujarat
<option value="Maharastra">Maharastra
<option value="Karnataka">Karnataka
<option value="Delhi">Delhi
</select>
</td>
</tr><tr>
<td>Zip</td>
<td><input type=text name=zp></td>
</tr><tr>
<td>Upload Photo</td>
<td><input type=file name=photo></td>
</tr><tr>
<td>E-Mail</td>
<td><input type=text name=email size=30></td>
</tr><tr>
<td>Mobile</td>
<td><input type=text name=mob placeholder="+91"></td>
</tr><tr>
<td>Languages known</td>
<td><input type=checkbox name=lk value=Gujarati
checked>Gujarati</td>
INTERNET TECHNOLOGY 11
</tr><tr>
<td></td>
<td><input type=checkbox name=lk value=Hindi
checked>Hindi</td>
</tr><tr>
<td></td>
<td><input type=checkbox name=lk value=English
checked>English</td>
</tr><tr>
<td></td>
<td><input type=checkbox name=lk value=Marathi >Marathi</td>
</tr><tr>
<td>Additional Information</td>
<td><textarea name=add rows=3 cols=20 placeholder="Optional"
wrap></textarea></td>
</tr><tr>
<td></td>
<td><input type=submit value=submit> <input type=reset
value=reset></td>
</table>
</form>
</body>
</html>
Q5. Writ a Program to illustrate Img tag in html
<html>
<head>
<title> Image Tag </title>
</head>
<body>
<h3 align="center" style="color:red"> To illustrate image tags</h3> <hr>
<p>
<img src="flower.bmp" align="right" height="100" width="100"/>
This image is right aligned with the text
</p>
<br><br><br><br><hr>
<p>
<img src="flower.bmp" align="left" height="100" width="100"/>
This image is left aligned with the text
</p>
<br><br><br><br><hr>
This image is center aligned with the text.
<img src="flower.bmp" align="middle" height="100" width="100"/>
<br><br><br><br><hr>
This image is bottom aligned with the text.
<img src="flower.bmp" align="bottom" height="100" width="100"/>
<br><br><br><br><hr>
This image is top aligned with the text.
<img src="flower.bmp" align="top" height="100" width="100"/>
</body>
</html>
Q6. Create a web page to illustrate Frame tag
mainframe.html
<html>
<head>
<title> Frame tag </title>
</head>
<head>
<frameset cols="20,60">
<frame src="f1.html">
<frame src="f2.html" name="main">
</frameset>
</frameset>
</head>
</html>
f1.html
<html>
<head>
<title> f1.html </title>
</head>
<body>
<h3> States of karnataka </h3>
<a href="gul.html" target="main"> gulbarga<br></a>
<a href="bid.html" target="main"> Bidar<br> </a>
</body>
</html>
f2.html
<html>
<head>
<title> f2.html </title>
</head>
<body>
<h1> Click on any state to get a welcome message </h2>
</body>
</html>
gulbarga.html
<html>
<head>
<title> Gulbarga.html </title>
</head>
<body bgcolor="green">
<h1> Welcome to gulbarga </h1>
Part A Web Design Lab HTML
Dept. Of CS & IS, Govt. Polytechnic, Gulbarga 22
</body>
</html>
bidar.html
<html>
<head>
<title> bidar.html </title>
</head>
<body bgcolor="red">
<h1> Welcome to bidar </h1>
</body>
</html>
Q7. Apply style sheet in Web page. [inline, embedded and linked]
ext.css
hr
{
color:sienna;
}
p
{
margin-left:20px;
}
body
{
background-image:url("sheet.jpg");
}
stylesheet.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext.css">
<style>
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h2>Internal, External & Inline Style!</h1>
<div>Text inside a div element.
<p>paragraph background color</p>
still in the div element.
</div>
<p style="color:red;margin-left:20px;">Hello world.</p>
</body>
</html>
Q8. Apply CSS box model in a web page.
<head>
<title>CSS Box Model</title>
<style>
.main {
font-size:36px;
font-weight:bold;
Text-align:center;
}
.gfg {
margin-left:60px;
border:50px solid #009900;
width:300px;
height:200px;
text-align:center;
padding:50px;
}
.gfg1 {
font-size:42px;
font-weight:bold;
color:#009900;
margin-top:60px;
background-color:#c5c5db;
}
.gfg2 {
font-size:18px;
font-weight:bold;
background-color:#c5c5db;
}
</style>
</head>
<body>
<div class = "main">CSS Box-Model Property</div>
<div class = "gfg">
<div class = "gfg1">GeeksforGeeks</div>
<div class = "gfg2">A computer science portal for geeks</div>
</div>
</body>
</html>
Q9. Apply form field validation using java script
<html>
<head>
<script>
function GEEKFORGEEKS()
{
var name = document.forms["RegForm"]["Name"];
var email = document.forms["RegForm"]["EMail"];
var phone = document.forms["RegForm"]["Telephone"];
var what = document.forms["RegForm"]["Subject"];
var password = document.forms["RegForm"]["Password"];
var address = document.forms["RegForm"]["Address"];
if (name.value == "")
{
window.alert("Please enter your name.");
name.focus();
return false;
}
if (address.value == "")
{
window.alert("Please enter your address.");
name.focus();
return false;
}
if (email.value == "")
{
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (email.value.indexOf("@", 0) < 0)
{
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (email.value.indexOf(".", 0) < 0)
{
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (phone.value == "")
{
window.alert("Please enter your telephone number.");
phone.focus();
return false;
}
if (password.value == "")
{
window.alert("Please enter your password");
password.focus();
return false;
}
if (what.selectedIndex < 1)
{
alert("Please enter your course.");
what.focus();
return false;
}
return true;
}</script>
<style>
GEEKFORGEEKS {
margin-left: 70px;
font-weight: bold ;
float: left;
clear: left;
width: 100px;
text-align: left;
margin-right: 10px;
font-family:sans-serif,bold, Arial, Helvetica;
font-size:14px;
}
div {
box-sizing: border-box;
width: 100%;
border: 100px solid black;
float: left;
align-content: center;
align-items: center;
}
form {
margin: 0 auto;
width: 600px;
}</style></head>
<body>
<h1 style="text-align: center"> REGISTRATION FORM </h1>
<form name="RegForm" action="/submit.php" onsubmit="return GEEKFORGEEKS()"
method="post">
<p>Name: <input type="text" size=65 name="Name"> </p><br>
<p> Address: <input type="text" size=65 name="Address"> </p><br>
<p>E-mail Address: <input type="text" size=65 name="EMail"> </p><br>
<p>Password: <input type="text" size=65 name="Password"> </p><br>
<p>Telephone: <input type="text" size=65 name="Telephone"> </p><br>
<p>SELECT YOUR COURSE
<select type="text" value="" name="Subject">
<option>BTECH</option>
<option>BBA</option>
<option>BCA</option>
<option>B.COM</option>
<option>GEEKFORGEEKS</option>
</select></p><br><br>
<p>Comments: <textarea cols="55" name="Comment"> </textarea></p>
<p><input type="submit" value="send" name="Submit">
<input type="reset" value="Reset" name="Reset">
</p>
</form>
</body>
</html>
Q10. Create a web page using XML code.
<?xml version="1.0" encoding="UTF-8"?>
<breakfast_menu>
<food>
<name>Belgian Waffles</name>
<price>$5.95</price>
<description>
Two of our famous Belgian Waffles with plenty of real maple syrup
</description>
<calories>650</calories>
</food>
<food>
<name>Strawberry Belgian Waffles</name>
<price>$7.95</price>
<description>
Light Belgian waffles covered with strawberries and whipped cream
</description>
<calories>900</calories>
</food>
<food>
<name>Berry-Berry Belgian Waffles</name>
<price>$8.95</price>
<description>
Belgian waffles covered with assorted fresh berries and whipped cream
</description>
<calories>900</calories>
</food>
<food>
<name>French Toast</name>
<price>$4.50</price>
<description>
Thick slices made from our homemade sourdough bread
</description>
<calories>600</calories>
</food>
<food>
<name>Homestyle Breakfast</name>
<price>$6.95</price>
<description>
Two eggs, bacon or sausage, toast, and our ever-popular hash browns
</description>
<calories>950</calories>
</food>
</breakfast_menu>
