om institute of technology & management … om institute of technology & management juglan,...

1

OM INSTITUTE OF TECHNOLOGY & MANAGEMENT

JUGLAN, HISAR-125001

LAB MANUAL

‘Web Designing using HTML’

BCA-247

DEPARTMENT OF COMPUTER SCIENCE & APPLICATIONS

2

Hardware RequirementsAny operating system like UNIX, LINUX

and Windows.

Software RequirementsNotepad, Any web Browser like Internet

Explorer, Goggle Chrome, Mozilla Firefox etc.

3

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,table, list, and hyperlink).

8-12

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 elementsand text level elements.

16-19

6. Wap in html to create a webpage to show various confectionaryitems using ordered list and unordered list.

20-22

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 registrationnaukri.com.

31-34

11. Wap in html to show books in inventory in different tables byusing rowspan and colspan.

35-38

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 AppropriateFormatting Elements.

41-45

14. A Web Page in HTML to show all the Text, Color, Backgroundand Font Elements

46-47

15. Write a Program to Create a Nested List. 48-50

4

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

5

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

6

<INPUT TYPE="RADIO" NAME="RADIO"> B<BR><BR>

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

</H3></FORM>

</FONT>

</BODY>

</HTML>

7

OUTPUT

8

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

9

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

10

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

11

</BODY>

</HTML>

<!-- FRAMES >

<HTML>

<HEAD>

<TITLE>MY FIRST FRAME WINDOW</TITLE>

</HEAD>

<FRAME>

<FRAMESET ROWS="50%,*">

<FRAMESET COLS="50%,*">

<FRAME SRC="P.HTML">

<FRAME SRC="S.HTML">

</FRAMESET>

<FRAMESET COLS="50%,*">

<FRAME SRC="H.HTML">

<FRAME SRC="T.HTML">

</FRAMESET>

</FRAME>

</HTML>

12

OUTPUT

13

Program 3

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

<html>

<head>

<title>CHARACTER ENTITIES</title>

</head>

<body>

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

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

<table border="10" width="80%" align="center"bordercolor="RED">

<tr>

<h1 align="center">

<th>S.No.</th>

<th>Name</th>

<th>Symbol</th>

<th>Description</th>

</tr>

<tr>

<h1 align="center">

<th>1</th>

<th>quot</th>

<th>"&quot</th>

<th>quotation mark</th>

14

</tr>

<tr>

<h1 align="center">

<th>2</th>

<th>amp</th>

<th>&&amp</th>

<th>ampercent mark</th>

</tr>

<tr>

<h1 align="center">

<th>3</th>

<th>lt</th>

<th>&lt</th>

<th>less than mark</th>

</tr>

<tr>

<h1 align="center">

<th>4</th>

<th>gt</th>

<th>&gt</th>

<th>greater than mark</th>

</tr>

<tr>

<h1 align="center">

<th>5</th>

15

<th>copy</th>

<th>&copy</th>

<th>copy mark</th>

</tr>

<tr>

<h1 align="center">

<th>6</th>

<th>trade</th>

<th>&trade</th>

<th>trade mark</th>

</tr>

</body>

</html>

Output :

16

Program:4

<! To Create a Web Page in HTML to Show the Block Level Elements and Text LevelElements >

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

<html>

<head>

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

</head>

<body>

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

<h3>

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

</p> </h3>

<div align="right">

<h1> Division heading </h1>

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

can be effected by div at once. Many paragraphs and other block Elementscan be effected by div at once. Many paragraphs and other block Elements

17

can be effected by div at once. Many paragraphs and other block Elementscan be effected by div at once. </p>

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

</div>

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

</center>

</font>

<h1> <center>2. Logical Elements

18

<! 2. Logical Elements>

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

<strong>This is Strong </strong> text <br>

<dfn> Definition </dfn> text <br>

<cite> Citation </cite> text <br>

<kbd> keystrokes </kbd> text

</body>

</html>

19

Output :

20

Program 5

<! To Create a Web Page in HTML to show varies Confectionary Items using Ordered Listand Unordered List. >

<html>

<head>

<title> ORDERED LIST AND UNORDERED LIST </title>

</head>

<body>

<center>

<h1>ORDERED LIST AND UNORDERED LIST </h1>

<h2> DIFFERENT ITEMS IN YOUR CONFECTIONARY ITEMS</h2>

<h3>

<ol>

<li> DRINKS </li>

<li> SNACKS </li>

</ol>

<h2> ENJOY YOUR DRINKS </h2>

<ol start="1" type="a">

<h2> ORDERED LIST </h2>

<li>PEPSI </li>

<li>COKE</li>

<li>LIMCA</li>

21

</ol>

<h2> ENJOY YOUR SNACKS </h2>

<ul type="disc">

<h2> UNORDERED LIST </h2>

<li type="circle">

UNCLE CHIPS

<li type="square">

KURKURE

<li type="circle">

NAMKEEN

</ul>

</h3>

</center>

</body>

</html>

22

Output :

23

Program-6

<!Create your own page with your favorite hobbies>

<html>

<head>

<title>My Favorite Hobbies Page</title> </head>

<body bgcolor="White"><b>

<h1 align="center">List of My Favorite Hobbies</h1></b>

<pre><b>

Playing Cricket Blogging Reading Books Listening Music Surfing Internet

<img src="C:\Documents and Settings\Administrator\Desktop\index.jpeg" width="100"

height="100" border="3" > <img src="C:\Documents and

Settings\Administrator\Desktop\images.jpeg" width="100" height="100" border="3" > <img

src="C:\Documents and Settings\Administrator\Desktop\indexk.jpeg" width="100" height="100"

border="3" > <img src="C:\Documents and Settings\Administrator\Desktop\indexl.jpeg"

width="100" height="100" border="3" > <img src="C:\Documents and

Settings\Administrator\Desktop\imagesl.jpeg" width="100" height="100" border="3" >

</b></pre>

</body>

</html>

24

Output

25

Program No. 7

AIM: - Create a web page which displays the map of your state link, each city of the image map,such that the respective HTML page of the city is displayed when the user selects an area.

Main page

<html>

<body>

<img src="map1.jpg" width="500" height="600" alt="states" usemap="#countrymap" />

<map name="countrymap">

<area shape="rect" coords="140,145,168,195" alt="HARYANA" href="HARYAN.html" />

<area shape="poly" coords="110,310,210,330,210,370,170,360,88,440,80,350" alt="UTTARPARDES" href="UTTAR.html" />

<area shape="poly" coords="150,480,170,380,215,390,275,380,200,440,200,500,165,500"alt="PUNJAB" href="PUNJAB.html" />

</map>

</body>

</html>

26

HARYANA.HTML

<html>

<body>

<h1>State :- Haryana</h1>

<h1>Capital :- Chandigarh</h1>

<h1>Area :- 44212 km2</h1>

<h1>Established :- 1 November 1966</h1>

<br>

<a href="indiamap.html">Back</a>

</body>

</html>

28

Program:8

<! Create a Web Page in HTML using Style Sheet. >





<html>

<head>

<title>STYLE SHEET EXAMPLE</title>

</head>

<link rel="stylesheet" href="style.css">

<style>

p

29

{

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 pagelayout facilities.</i></b>

</p>

</body>

</html>

http://www.yahoo.com

30

Output:

31

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


</label><br><br>

<label><b>Valid Email : </b>


</label><br><br>

<label><b>Password : </b>

32


</label><br><br>

<label><b>Phone Number : </b>


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

33

<b>Senior Secondary</b><input type="checkbox" name="a1" id="a1"/>

<b>Percentage : </b><input type="text" name="id10" id="id10"size="5"/><br><br>

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


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


<b>MBA</b><input type="checkbox"

name="a1" id="a1"/>


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

34

Output:

35

Program No. :10

<! A Web Page in HTML to show books in inventary in different tables using Row Spanand 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>

36

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

37

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

38

Output:

39

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>

40

</body>

</html>

Output:

41

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: [email protected]</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, problemsolving and interpersonal skills will play key role in achieving Organizational goals. </p>


<tr>

mailto:[email protected]

42

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

43

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

44

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>

45

</body>

</html>

Output:

46

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

47

OUTPUT:

48

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 WinterSeason</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 SummerSeason</dd>

49

</dl>

</li>

<ul type="disc">

<li>Pepsi</li>

<li>Cock</li>

</ul>

</ol>

</body>

</html>

50

OUTPUT :