Scribd
Upload
74 views

IWT Lab Manual

The document provides examples of creating static webpages using HTML table tags, text formatting tags, list tags, forms, images, frames, style sheets, and form field validation. 9 questions are asked with HTML code provided as examples to illustrate different HTML features, including creating tables, lists, forms, adding images, applying stylesheets, and validating form fields with JavaScript.

Uploaded by

riyashrivastav06348
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
74 views

IWT Lab Manual

The document provides examples of creating static webpages using HTML table tags, text formatting tags, list tags, forms, images, frames, style sheets, and form field validation. 9 questions are asked with HTML code provided as examples to illustrate different HTML features, including creating tables, lists, forms, adding images, applying stylesheets, and validating form fields with JavaScript.

Uploaded by

riyashrivastav06348
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 15

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>&lt;B&gt;</td>
<td><B> Bold </B></td>
</tr>
<tr>
<td>&lt;I&gt;</td>
<td><I> Italic </I></td>
</tr>
<tr>
<td>&lt;U&gt;</td>
<td><U> Underline </U></td>
</tr>
<tr>
<td>&lt;EM&gt;</td>
<td><EM> Emphasis </EM></td>
</tr>
<tr>
<td>&lt;STRONG&gt;</td>
<td><STRONG> STRONG </STRONG></td>
</tr>
<tr>
<td>&lt;TELETYPE&gt;</td>
<td><TT> TELETYPE </TT></td>
</tr>
<tr>
<td>&lt;CITE&gt;</td>
<td><CITE> Citation </CITE></td>
</tr>
<tr>
<td>&lt;STRIKE&gt;</td>
<td><STRIKE> strike-through text </STRIKE></td>
</tr>
INTERNET TECHNOLOGY 6
<tr>
<td>&lt;BIG&gt;</td>
<td><BIG> text in a big font </BIG></td>
</tr>
<tr>
<td>&lt;SMALL&gt;</td>
<td><SMALL> text in a small font <SMALL></td>
</tr>
<tr>
<td>&lt;SUB&gt;</td>
<td>a<SUB> b </SUB></td>
</tr>
<tr>
<td>&lt;SUP&gt;</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>&nbsp;<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>

You might also like