Web Designing Lab Manual

OM INSTITUTE OF TECHNOLOGY & MANAGEMENT
JUGLAN, HISAR-125001
LAB MANUAL
‘Web Designing using HTML’
BCA-247
DEPARTMENT OF COMPUTER SCIENCE & APPLICATIONS
1
Hardware Requirements
Any operating system like UNIX, LINUX
and Windows.
Software Requirements
Notepad, Any web Browser like Internet
Explorer, Goggle Chrome, Mozilla Firefox etc.
2
INDEX
‘Web designing using HTML’
BCA-247
Sr.No Program Name Page No.

1. Introduction to Web Design. 4
2. Wap in html to design a Bio-Data.. 5-7
3. Wap in html to create a webpage with four frames (Picture, 8-12
table, list, and hyperlink).
4. Wap in html to show all character elements in html. 13-15
5. Wap in html to create a webpage to show the block level elements 16-19
and text level elements.
6. Wap in html to create a webpage to show various confectionary 20-22
items using ordered list and unordered list.
7. Wap in html to create a webpage to show different hobbies. 23-24
8. Wap in html to show India map. 25-27
9. Wap in html to create a web page using style sheet. 28-30
10. Wap in html to create a web page to show registration 31-34
naukri.com.
11. Wap in html to show books in inventory in different tables by 35-38
using rowspan and colspan.
12. Create a Web Page in HTML to show Admission form in OITM 39-40
13. A Web Page in HTML to show your resume using Appropriate 41-45
Formatting Elements.
14. A Web Page in HTML to show all the Text, Color, Background 46-47
and Font Elements
15. Write a Program to Create a Nested List. 48-50
3
Introduction to Web Design
1. Introduction - You are here.

2. HTML - An introduction to the computer language which forms the heart of web pages.
Although it's not absolutely necessary to know this stuff, you should still read this page to
get an idea of how it works.
3. Editors - Tools you can use to help create websites.
4. Hosting - How to find a home (host server) for your website.
5. Publish! - How to upload your site to the internet so that other people can visit it.
4
Program 1
Design A Bio-Data Form.
<HTML>
<HEAD>
<TITLE> MY BIO-DATA FORM </TITLE>
</HEAD>
<BODY BGCOLOR="ORANGE">
<FONT FACE="Courier New">
<H1 ALIGN="CENTER">FORM</H1>
<FORM>
<H3>Type The Password : <INPUT TYPE="TEXT" NAME="T1"><br><br>
Employee Code : <INPUT TYPE="TEXT" NAME="T2">
Employee Name : <INPUT TYPE="TEXT" NAME="T3"><br><br>
City : <INPUT TYPE="TEXT" NAME="T4"><br><br>
Benifits <INPUT TYPE="checkbox" NAME="c1" checked>
Daily <INPUT TYPE="checkbox" NAME="c2" ><BR><BR>
Department:<BR>
<SELECT NAME="S2" SIZE=4 MULTIPLE>
<OPTION>Sales
<OPTION>Accts.
<OPTION>Mkt.
<OPTION>HRD.
<OPTION>ADV.
</SELECT><BR><BR>
Grade <INPUT TYPE="RADIO" NAME="RADIO"> A
5
<INPUT TYPE="RADIO" NAME="RADIO"> B<BR><BR>
<INPUT TYPE="BUTTON" NAME="B1" VALUE=" OK " SIZE=8 ALIGN="CENTER">
</H3></FORM>
</FONT>
</BODY>
</HTML>
6
OUTPUT
7
Program 2
Create a Web Page With Four Frame(Picture,Table,List,Hyperlink).
<!- - PICTURE>
<HTML>
<HEAD>
<TITLE>PICTURE</TITLE>
</HEAD>
<BODY BGCOLOR="SKIN">
<H1 ALIGN="CENTER"><FONT COLOR="WHITE">PICTURE</FONT></H1>
<IMG SRC="C:\Documents and Settings\Milan shoes\Desktop\101.JPG" ALIGN="CENTER">
</BODY>
</HTML>
<!—LIST>
<HTML>
<HEAD>
<TITLE>SYLLABUS</TITLE>
</HEAD>
<BODY BGCOLOR="PINK">
<H1 ALIGN="CENTER">SYLLABUS</H1>
<H3>
<UL>
<LI>DATA COMMUNICATION
<OL>
<LI>INTRODUCTION & ENCODING
8
<LI>DTE&DCE INTERFACE
<LI>MULTIPLEXING
<LI>SATELLITE COMMUNICATION SYSTEM
</OL>
<LI>OPERATING SYSTEM
<OL>
<LI>PROCESS MGT.
<LI>FILE & DEVICE MGT.
<LI>DISTRIBUTED SYSTEM
<LI>MEMORY MGT.
</OL>
</UL>
</H3></BODY></HTML>
<! - - TABLE>
<HTML>
<HEAD>
<TITLE>TABLE</TITLE>
</HEAD>
<BODY BGCOLOR="RED">
<H1 ALIGN="CENTER">TABLE</H1>
<TABLE BORDER=2 CELLPADDING=1 ALIGN="CENTER">
<TR> <TH>NAME</TH>
<TH>ROLL NO</TH>
<TH>MARKS</TH>
9
</TR> <TR>
<TD>AMIT</TD>
<TD>5909302</TD>
<TD>85</TD>
</TR> <TR>
<TD>MANOJ</TD>
<TD>5908211</TD>
<TD>75</TD>
</TR> <TR>
<TD>DEEPAK</TD>
<TD>5909316</TD>
<TD>80</TD>
</TR>
</TABLE>
</BODY></HTML>
<! - - HYPERLINK>
<HTML>
<HEAD>
<TITLE>HYPERLINK</TITLE>
</HEAD>
<BODY BGCOLOR="LIME">
<H1 ALIGN="CENTER">HYPERLINK</H1>
<A HREF="F.HTML">CLICK ON ME AND OPEN FRAME WINDOW
</A>
10
</BODY>
</HTML>


<html>
<head>
<title>STYLE SHEET EXAMPLE</title>
</head>
<link rel="stylesheet" href="style.css">
<style>
28
{
text-indent: 0.5in;
margin-left: 50px;
margin-right: 50px;
color: blue;
font-size: 40pt;
</style>
</head>
<body style="background-color:white;">
<h1><center>HTML WITH STYLE</center></h1>
<p><b><i>
Cascading Style Sheets 1 as defined by the
<a style="color:green; text-decoration:underline;"
href="http://www.yahoo.com">YAHOO!</a> provides powerful page

layout facilities.</i></b>
</p>
</body>
</html>
29
Output:
30
Program:9
<! Create a Web Page in HTML to show Registration NAUKRI.COM. >
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<h1 align="center">NAUKARI.COM<sub>India's biggest job

site</sub></h1>
<h2 align="center"><u>REGISTRATION FORM</u></h2>
<form name="form1" id="form">
<label><b>First Name : </b>
<input type="text" name="id1" id="id1" size="30"

maxlength="20"/>
</label><br><br>
<label><b>Last Name : </b>

maxlength="20"/>
</label><br><br>
<label><b>Valid Email : </b>

maxlength="50"/>
</label><br><br>
<label><b>Password : </b>
31
maxlength="10"/>
</label><br><br>
<label><b>Phone Number : </b>

maxlength="11"/>
</label><br><br>
<strong>Sex : </strong><br>
<b>Male:</b><input type="radio" name="gender" id="r1"

value="male"/><br>
<b>Female:</b><input type="radio" name="gender" id="r1"

value="female"/><br><br>
<strong>Date of Birth : </strong><br>
<label><b>D: </b>
<input type="text" name="id6" id="id6" size="5" maxlength="2"/>
</label><br>
<label><b>M: </b>
</label><br>
<label><b>Y:</b>
</label><br><br>
<b>Qualifications : </b></br>
<b>Metric</b><input type="checkbox" name="a1" id="a1"/>
<b>Percentage : </b><input type="text" name="id9" id="id9"

size="5"/>
</label><br><br>
32
<b>Senior Secondary</b><input type="checkbox" name="a1" id="a1"/>

size="5"/><br><br>
<b>Graduation</b><input type="checkbox" name="a1" id="a1"/>

size="5"/><br><br>
<b>MCA</b><input type="checkbox" name="a1" id="a1"/>

size="5"/><br><br>
<b>MBA</b><input type="checkbox"
name="a1" id="a1"/>

size="5"/><br><br>
<b>Experience</b>
<select name="sc1" id="sc1" size="1">
<option>0-1 Year</option>
<option>More than 5 Year</option>
</select><br><br>
<center>
<input type="button" value="Submit" onclick=
"alert('Your Application have been Submitted');"/>
<input type="button" value="Cancel" onclick=
"alert('Your Application isnot Submitted');"/></center>
</body>
</html>
33
Output:
34
Program No. :10
<! A Web Page in HTML to show books in inventary in different tables using Row Span
and Column Span.>
<html>
<head>
<title>Book Inventary</title>
</head>
<body>
<table bordercolor="red" border="8" cellpadding="5"

cellspacing="2">
<tr>
<th colspan="5">
BOOK INVENTARY
</th>
</tr>
<tr>
<th>SR. NO.</th>
<th>BOOKS</th>
<th>AUTHOR</th>
<th>PRICE</th>
</tr>
<tr>
<td rowspan="2">1</td>
<td bgcolor="white">LET US C</td>
35
<td>YASHWANT KANETKER</td>
<td>250</td>
</tr>
<tr>
<td bgcolor="white">HTML</td>
<td>WILLIAM</td>
<td>420</td>
</tr>
<tr>
<td bgcolor="white">ARTIFICIAL INTELLIGENCE</td>
<td>PETERSONS</td>
<td>205</td>
</tr>
<tr>
<td bgcolor="white">STATISTICS</td>
<td>S.P. GUPTA</td>
<td>240</td>
</tr>
<tr>
<td bgcolor="white">COMPUTER NETWORK</td>
<td>TANONBAUM</td>
<td>200</td>
</tr>
36
<tr>
<td bgcolor="white">COMPUTER GRAPHICS</td>
<td>BAKER</td>
<td>340</td>
</tr>
<tr>
<td bgcolor="white">TURBO PROLOG</td>
<td>CARL TOWNSEND</td>
<td>260</td>
</tr>
<tr>
<td bgcolor="white">COMPILER</td>
<td>ALFRED V. AHO</td>
<td>240</td>
</tr>
</table>
</body>
</html>
37
Output:
38
Program No. :11
<! Create a Web Page in HTML to show Admission form in OITM >
<html>
<body bgcolor="pink">
<center><b>OM INSTITUTE OF COMPUTER SCIENCES<hr>
<h1><u>ADMISSION FORM</b></u></h1></center>
<form><hr><pre>
Name : <input type="text">
Father Name : <input type="text">
DOB : <input type="text">
Class : <input type="text">
Roll No. : <input type="text">
</pre>
<b>Gender</b>
</br>
<input type="radio" name=sex value="Male">Male
<input type="radio" name=sex value="Female">Female
</br>
<center>
<input type="submit">
<a href="E:\html\form1.html">submit</a>
<input type="reset">
</center>
</form>
39
</body>
</html>
Output:
40
Program No. :12
<! A Web Page in HTML to show your resume using Appropriate Formatting Elements. >
<html>
<head>
<title>Resume</title>
</head>
<body>
<center><h2>CURRICULAM VITAE</u></h2></center><br>
Vandana<br>
Mob.9034453983<br>
E-mail id: vandana.verma@gmail.com</br>
<hr><br>
<table border="3" width="100%">
<tr>
<td colspan="4">
<center><b>Objective</b></center>
</tr>
</table>
<p>Seeking challenging position in Software design and
development with the state-of-the-art technology where my technical, analytical, problem

solving and interpersonal skills will play key role in achieving Organizational goals. </p>
<tr>
41
<td colspan="5">
<center><b>Educational Qualification</b></center>
</tr>
</table>
<h3><b><u>Professional:</u></b></h3>
M.C.A. (Master of Computer Application) from KUK
Sirsa(Haryana) .
<center><br>
<tr>
<th>Class</th>
<th>Year of Passing</th>
<th>%age</th>
</tr>
<tr>
<th>MCA 1st Sem</th>
<th>Dec. 2007</th>
<th>__%</th>
</tr>
<tr>
<th>MCA 2nd Sem</th>
<th>May 2008</th>
<th>__%</th>
</tr>
<tr>
42
<th>MCA 3rd Sem</th>
<th>Dec. 2008</th>
<th>__%</th>
</tr>
<tr>
<th>MCA 4th Sem</th>
<th>May 2009</th>
<th>__%</th>
</tr>
</table>
</center><br>
<h3><u>Academic:</u></h3>
<pre>
Bachelor of Computer Application From K.U.K.
Senior Secondary From H.B.S.E.
Matric From H.B.S.E.
</pre>
<tr>
<td colspan="5">
<center><b>Technical Skills<b></center>
</tr>
</table><br>
<pre>
43
Data Structures, Database Programming, Software Engineering, Operating Systems,
Computer Networks, Programming Languages, Visual Basic, Computer Organization,
Visual C++, Computer Algorithms, D.M.S., N.A., Digital Design, Computer Architecture,
Artificial Intelligence, DBMS, ADBMS.
</pre>
<tr>
<td colspan="5">
<center><b>Personal Details<b></center>
</tr>
</table><br>
<ul type="disc">
<pre>
Name Vandana
Father’s Name Sh. Mohan lal
Date Of Birth 22June, 1990
Sex Female
Marital Status Single
Nationality Indian
Languages known Hindi, English
Hobbies Watching T.V.
</pre><br>
<pre>
Date:______________
Place:_____________
</pre>
44
</body>
</html>
Output:
45
Program:13
<! A Web Page in HTML to show all the Text, Color, Background and Font Elements. >
<html>
<head>
<title>Text,Color & Font Elements</title>
</head>
<body background="C:\Documents and

Settings\WELCOME\MyDocuments\My Pictures\a4216394562.jpg">
<font color="RED"><b>HELLO<br>STUDY TIME
END!!!!!</b></font>
<font color="GREEN" size="+2" face="arial"><b><br>STOP
ORKUTTING</b></font>
<font color="BLUE" size="+3" face="arial"><b><br>TEXT
COLOR,BACKGROUND AND FONT ELEMENTS</b></font>
<font color="RED" size="+4" face="arial black"><b><br>TEXT IN
ARIAL BLACK.</b></font>
<font color="RED" size="+4" face="times new
roman"><b><br>TEXT IN TIMES NEW ROMAN.</b></font>
<font color="GREEN" size="+6" face="courier"><b><br>TEXT IN
COURIER.</b></font>
<font color="BLUE" size="+7" face="monotype corsiva">
<b><br>TEXT IN MONOTYPE CORSIVA.</b></font>
</body>
</html>
46
OUTPUT
:
47
Program-14
<! Write a Program to Create a Nested List. >
<html>
<head>
<title>Nested List</title>
</head>
<body>
<p> Drink</p>
<ol>
<li>
<dl>
<dt>Hot Drinks</dt>
<dd>Drinks that are used mostly in Winter

Season</dd>
</dl>
</li>
<ul type="Square">
<li>Tea</li>
<li>Coffee</li>
</ul>
<li>
<dl>
<dt>Cold Drinks</dt>
<dd>Drinks that are used mostly in Summer

Season</dd>
48
</dl>
</li>
<ul type="disc">
<li>Pepsi</li>
<li>Cock</li>
</ul>
</ol>
</body>
</html>
49
OUTPUT :
50

Web Designing Lab Manual

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Designing Lab Manual

Uploaded by

Copyright:

Available Formats

OM INSTITUTE OF TECHNOLOGY & MANAGEMENT

‘Web Designing using HTML’

DEPARTMENT OF COMPUTER SCIENCE & APPLICATIONS

‘Web designing using HTML’

Sr.No Program Name Page No.

1. Introduction - You are here.

Design A Bio-Data Form.

<TITLE> MY BIO-DATA FORM </TITLE>

<FONT FACE="Courier New">

<H3>Type The Password : <INPUT TYPE="TEXT" NAME="T1"><br><br>

Employee Code : <INPUT TYPE="TEXT" NAME="T2">

Employee Name : <INPUT TYPE="TEXT" NAME="T3"><br><br>

City : <INPUT TYPE="TEXT" NAME="T4"><br><br>

Benifits <INPUT TYPE="checkbox" NAME="c1" checked>

Daily <INPUT TYPE="checkbox" NAME="c2" ><BR><BR>

<SELECT NAME="S2" SIZE=4 MULTIPLE>

Grade <INPUT TYPE="RADIO" NAME="RADIO"> A

<INPUT TYPE="BUTTON" NAME="B1" VALUE=" OK " SIZE=8 ALIGN="CENTER">

Create a Web Page With Four Frame(Picture,Table,List,Hyperlink).

<H1 ALIGN="CENTER"><FONT COLOR="WHITE">PICTURE</FONT></H1>

<IMG SRC="C:\Documents and Settings\Milan shoes\Desktop\101.JPG" ALIGN="CENTER">

<LI>INTRODUCTION & ENCODING

<LI>SATELLITE COMMUNICATION SYSTEM

<LI>FILE & DEVICE MGT.

<TABLE BORDER=2 CELLPADDING=1 ALIGN="CENTER">

<A HREF="F.HTML">CLICK ON ME AND OPEN FRAME WINDOW

<!-- FRAMES >

<TITLE>MY FIRST FRAME WINDOW</TITLE>

<! Write a Program to show all Character Entities. >

<h1 align="center">CHARACTER ENTITIES</h1>

<hr width="350" height="50" color="BLUE"> <br>

<table border="10" width="80%" align="center"

<th>less than mark</th>

<th>greater than mark</th>

<! Block level elements : paragraph,alignment,break,division >

<title> Block Level and text Level Elements </title>

<h1><center><u> Block Level Elements </u></center> </h1>

<p> Simple:This is First Paragraph. </p>

<p align = "center">center: This is Second Paragraph. </p>

<p align = "right"> right: This is third Paragraph.</p>

<p align = "left"> left: This is four Paragraph. </p>

<p align = "justify"> justify: This is five Paragraph. </p>

<p> break: This paragraph <br />

shows the concept of break </br>

it puts the cursor to next line. <br />

<h1> Division heading </h1>

<h3><p> Many paragraphs and other block Elements

<p> Notice all the paragraphs are right aligned.</p> </h3>

<! Text Level Elements : 1. Physical elements 2. Logical Elements >

<h1><center><u> Text Level Elements </u></center> </h1>

<! 1. Physical Elements >

<h1> <center>1. Physical Elements

<font color = red size= 4><br>

<b> use of bold </b><br>

<i> use of italic </i><br>

<u> use of underline </u><br>

<tt> use of typed </tt><br>

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

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

<strike>This is Strikethrough </strike> text <br>

<big>This is Bigger font</big> text <br>

<small>This is small font</small> text <br>

<h1> <center>2. Logical Elements