Index

S.No.

Practical Name

1
2
3

Introduction To HTML
Structure Of HTML Document
Write a program to illustrate the
general syntax of html.
FORMATTING TEXT
Write a program to illustrate the use of
Inline Elements Italic; Bold; Underline
Text.
Write a program to illustrate the use of
Inline Elements Subscript Text.
Write a program to illustrate the use of
Inline Elements Superscript Text.
Write a program to illustrate the use of
Inline Elements Strike; Small; Big Text.
Write a program to illustrate the use of
Block Level Elements Headings Tag.
Write a program to illustrate the use of
Block Level Elements Paragraph Tag.
Write a program to illustrate the use of
Block Level Elements Line Break Tag.
Write a program to illustrate the use of
Block Level Elements Horizontal Rule
Tag.
Write a program to illustrate the use of
Block Level Elements Address Tag.

4
5

6
7
8
9
10
11
12

13

Signature

Index
S.No.

Practical Name

14

Write a program to illustrate the use of

Font Tag.
Write a program to illustrate the use of

15

Signature

17
18
19
20
21
23
24
25
26

27

Align Tag.
Write a program to illustrate the use of
Marquee Tag.
Write a program to illustrate the use of
Bulleted or Unordered Lists.
Write a program to illustrate the use of
Numbered or Ordered Lists.
Write a program to illustrate the use of
Definition Lists.
Hyperlinks and Anchor Tag
Write a program to illustrate the use of
Hyperlink Tag.
Write a program to illustrate the use of
Image Tag.
Write a program to illustrate the use of
Image Tags Attributes.
Write a program to illustrate the use of
Image Tags Attributes H Space and V
Space.
Table

Index
S.No.

Practical Name

28

Write a program to illustrate the Table

using Caption Attribute.
Write a program to illustrate the Table
using Border and Align Attributes.
Write a program to illustrate the Table
using Cellpadding Attribute.
Write a program to illustrate the Table
using Data as Image.
Write a program to illustrate the syntax
of Login ID Webpage.

29
30
31
32

Signature

33

Write a program to illustrate the syntax

of Login ID Webpage using attributes.

Practical 1
Introduction To HTML
HTML stands for Hypertext Markup Language. It was created by
Tim Berners-Lee in Geneva. It is a special formatting language
that defines the appearance and contents of a webpage. Its
specific syntax rules allows you to define the placement and
format of text, graphics, sound and videos on the webpage. It is
one of the most commonly used interface language used now a
days for the web.
Each word in Hypertext Markup Language (HTML) has a special
meaning.
The word Hypertext refers to the text which act as a link. You
can jump to any webpage on the internet by simply clicking
at the text which act as a link.

 The word Markup refers to the symbols or sequence of

characters added to the ordinary text to define the structure
of the text. It can also specify links to other documents. The
symbols used for markup tell the browser how to display the
text and are often called Tags.
The word Language refers to the syntax that is similar to any
other language.
So, HTML is a method where ordinary text can be converted into
hypertext using a special set of symbols to control the layout and
appearance .

Practical 2
Structure Of HTML Document
The basic HTML document structure as follow:
< HTML >
< HEAD >
<!--This section contains title and supplementary information
about the page -->
< /HEAD >
< BODY >
<!--This section contains the document content -->
< /BODY >
< /HTML >
We shall examine each section individually.

 < HTML >: It specifies the document as a webpage that can

be seen in the web browser. The entire document is enclosed
within < HTML > and < /HTML > tags.
< HEAD>: The Head section specifies descriptive information
about the web documents. It is marked by an opening tag <
HEAD > and < /HEAD >. It consists of information such as
the title of the webpage.
< TITLE >: The title element contains the title of HTML
document that appears on the title bar of the browsers
window when the webpage is loaded. It is enclosed between
<TITLE> and </TITLE> tags.
< BODY >: The body element contains the actual contents of
your HTML document that can be seen by the end user,
when the page is loaded in the browsers window. It contains
any valid HTML contents such as text, images, forms, special
characters etc. These contents are always enclosed between
<BODY> and </BODY> tags.

Practical 3

Write a program to illustrate the general syntax of

html.
<HTML>
<HEAD>
<TITLE> First Web Page </TITLE>
</HEAD>
<BODY>
Welcome TO HTML Document
</BODY>
</HTML>

output

Practical 4
FORMATTING TEXT
HTML uses a number of elements to format the text. You can
change the heading styles, make paragraphs, add lists, change
font color and size etc. The elements that are available to perform
such formatting are classified into following categories.
Inline Elements
Block-Level Elements

Inline Elements

These are those elements that are used

to format some words, single word or even a single character in a
sentence on a web page. They do not have a line break before
and after them.

Block-Level Elements -

Block-Level Elements render any

applicable formatting and insert an additional line break or
carriage return before and after the block i.e. they all start on
their own new line.

Practical 5
Write a program to illustrate the use of Inline
Elements Italic ; Bold ; Underline Text.
<HTML>

<HEAD>
<TITLE> INLINE ELEMENTS </TITLE>
</HEAD>
<BODY >
<P><H1><U><I>Welcome TO HTML Document</I></U></P>
<P><B>Inline Elements</B></H1></P>
</BODY>
</HTML>

output

Practical 6
Write a program to illustrate the use of Inline
Elements Subscript Text.
<HTML>
<HEAD>

<TITLE> INLINE ELEMENTS </TITLE>

</HEAD>
<BODY>
<H1>THE CHEMICAL FORMULA OF WATER IS H<SUB>2</SUB>O
</H1></BODY>
</HTML>

output

Practical 7
Write a program to illustrate the use of Inline
Elements Superscript Text.
<HTML>
<HEAD>

<TITLE> INLINE ELEMENTS </TITLE>

</HEAD>
<BODY><H1>
THE FORMULA OF RIGHT PARABOLA IS Y<SUP>2</SUP>=4AX
</H1></BODY>
</HTML>

output

Practical 8
Write a program to illustrate the use of Inline
Elements Strike ; Small ; Big Text.
<HTML>
<HEAD>
<TITLE> INLINE ELEMENTS </TITLE>
</HEAD>
<BODY>
<H1><P><STRIKE>Welcome TO HTML
Document</STRIKE></P>
<P>The Working of striking in inline element is given above</P>
<P><SMALL>Something Unique items in our
class</SMALL></P>
<P><BIG>Inline functins</BIG></P>
</H1></BODY>
</HTML>

output

Practical 9

Write a program to illustrate the use of Block Level

Elements Headings Tag.
<HTML>
<HEAD>
<TITLE> Applying Headings </TITLE>
</HEAD>
<BODY>
<H1> Heading 1 </H1>
<H2> Heading 2 </H2>
<H3> Heading 3 </H3>
<H4> Heading 4 </H4>
<H5> Heading 5 </H5>
<H6> Heading 6 </H6>
</BODY>
</HTML>

output

Practical 10

Write a program to illustrate the use of Block Level

Elements Paragraph Tag.
<HTML>
<HEAD>
<TITLE> About Paragraph </TITLE>
</HEAD>
<BODY><H1>
<P> Dreams and hopes are what drive us on in life and there is a
world where dreams are sold.</P>
<P ALIGN="RIGHT"> If you think that you are able to handle
animation softwares , you can play very important role in the
television.</P>
<P ALIGN="JUSTIFY"> The television are increasingly looking
towards animation to mould viewers thinking .</P>
</H1>
</BODY>
</HTML>

output

Practical 11
Write a program to illustrate the use of Block Level
Elements Line Break Tag.
<HTML>
<HEAD>

<TITLE> About Break </TITLE>

</HEAD>
<BODY>
<H1>
Family members are --<BR>
Anshuman Sharma <BR>
Ankur Sharma <BR>
Vikram Sharma <BR>
</H1>
</BODY>
</HTML>

output

Practical 12
Write a program to illustrate the use of Block Level
Elements Horizontal Rule Tag.
<HTML>
<HEAD>

<TITLE> Horizontal Line </TITLE>

</HEAD>
<BODY>
<H1>
<P> Line of width 150 and size 3 </P>
<HR WIDTH="150"size="3">
<P> Line center aligned,width =50% and noshade </P>
<HR ALIGN="CENTER"WIDTH="50%"NOSHADE>
</H1>
</BODY>
</HTML>

output

Practical 13
Write a program to illustrate the use of Block Level
Elements Address Tag.
<HTML>
<HEAD>
<TITLE> About Address </TITLE>
</HEAD>
<BODY>
<H1>
<ADDRESS>
Aarushi Animation LTD. <BR>
15, Industrial Area <BR>
Hyderabad <BR>
</ADDRESS>

</H1></BODY>
</HTML>

output

Practical 14
Write a program to illustrate the use of Font Tag.
<HTML>
<HEAD>
<TITLE> FONT TAG </TITLE>
</HEAD>
<BODY>
<FONT FACE="ALGERIAN"COLOR="BLACK" SIZE="28">
HTML stands for Hypertext Markup Language. It was created by
Tim Berners-Lee in Geneva. It is a special formatting language
that defines the appearance and contents of a webpage. Its
specific syntax rules allows you to define the placement and
format of text, graphics, sound and videos on the webpage. It is
one of the most commonly used interface language used now a
days for the web.
</FONT>
</BODY>
</HTML>

output

Practical 15
Write a program to illustrate the use of Align Tag.
<HTML>
<HEAD>
<TITLE> ALIGN TAG </TITLE>

</HEAD>
<BODY><H1 ALIGN="CENTER">
<FONT FACE="ALGERIAN"COLOR="BLACK" SIZE="28">
Importance Of HTML For Web Page</H1></FONT>
HTML uses a number of elements to format the text. You can
change the heading styles, make paragraphs, add lists, change
font color and size etc. The elements that are available to perform
such formatting are classified into following categories.
Inline Elements
Block-Level Elements
</BODY>
</HTML>

output

Practical 16
Write a program to illustrate the use of Marquee
Tag.
<HTML>
<HEAD>
<TITLE> ALIGN TAG </TITLE>
</HEAD>
<BODY>
<MARQUEE>
<H1 ALIGN="CENTER">
<FONT FACE="ALGERIAN"COLOR="BLACK" SIZE="28">
This site is only for general use.</H2>
</MARQUEE>
</FONT>
</BODY>

</HTML>

output

Practical 17
Write a program to illustrate the use of Margin Tag.
<HTML>
<HEAD>
<TITLE> Margin Tag </TITLE>
</HEAD>
<BODY
TOPMARGIN="225%"LEFTMARGIN="225%"RIGHTMARGIN="225%
"BOTTOMMARGIN="225%"MARGINHEIGHT="28"MARGINWIDTH="
18">
<H1>Effect of applying Margins on the web page</H1>
</BODY>

</HTML>

output

Practical 18

Write a program to illustrate the use of Bulleted or

Unordered Lists.
<HTML>
<HEAD>
<TITLE> Unordered List </TITLE>
</HEAD>
<BODY>
<H1><B>Input Devices Are <BR>
<UL>
<LI>Keyboard=It is an input device of a computer.
<LI>Mouse=It is a pointer device of a computer.
<LI>Scanner=it is a input device of a computer.
</B></UL></H1>
</BODY>
</HTML>

output

Practical 19
Write a program to illustrate the use of Numbered
or Ordered Lists.
<HTML>

<HEAD>
<TITLE> Ordered List </TITLE>
</HEAD>
<BODY>
<H1><B><MARQUEE>Connected companies with our Campus
</MARQUEE>
<OL>
<LI>Infosys
<LI>Wipro
<LI>TCS</B>
</OL></H>
</BODY>
</HTML>

output

Practical 20
Write a program to illustrate the use of Numbered
or Ordered Lists using Attributes.
<HTML>

<HEAD>
<TITLE> Ordered List </TITLE>
</HEAD>
<BODY>
<H1><B>Input Devices Are <BR>
<OL>
<LI TYPE="a">Keyboard
<LI TYPE="a">Mouse
<LI TYPE="a">Scanner</B>
</OL></H1>
</BODY>
</HTML>

output

Practical 21
Write a program to illustrate the use of Definition
Lists.
<HTML>

<HEAD>
<TITLE> Definition List </TITLE>
</HEAD>
<BODY>
<H1><B>
<DL>
<DT> Domain Name System
<DD> Internet service used to look up a computer's name and
find its IP address
<DT> JPEG
<DD> Joint Photographic Experts Group
</DL></H1>
</BODY>
</HTML>

output

Practical 22
Hyperlinks
Hyperlink (or links in short) is one of the most powerful feature of
HTML. Usually a website consists of a number of webpages and

hyperlinks provides away to establish link between these

webpages so that users can easily navigate from one page of the
website to another.

ANCHOR Tag
The anchor tag <a> is used to create a hyperlink on a webpage.
It is always specified in the body of the webpages code. It
actually tells the browser where the link starts. The closing tag
</a> indicates the end of the link. The href stands for hypertext
reference that contains the URL of the destination page to which
link will move to . The URL address specified can point to any type
of file on the webpage such as HTML documents, images, sounds ,
movies etc . The general format for using <a> tag is
<a href = URL>Hyperlinked text</a>

Practical 23
Write a program to illustrate the use of Hyperlink
Tag.
<HTML>
<HEAD>
<TITLE> College Website </TITLE>
</HEAD>
<BODY>

<HR>
<a href="about.html">About College</a><BR>
<a href="course.html">Course</a><BR>
<a href="placement.html">Placement</a><BR>
<a href="help.html">Help</a><BR>
</HR>
</BODY>
</HTML>

output

Practical 24
Write a program to illustrate the use of Image Tag.
<HTML>
<HEAD>
<TITLE> Image </TITLE>
</HEAD>
<BODY>
<IMG SRC="SUN_RISE.JPG">

</BODY>
</HTML>

output

Practical 25
Write a program to illustrate the use of Image Tags
Attributes.
<HTML>
<HEAD>
<TITLE> Image </TITLE>
</HEAD>
<BODY>
<IMG SRC="SUN_RISE.JPG" ALIGN="Right" WIDTH="900"
HEIGHT="400">
</BODY>
</HTML>

output

Practical 26

Write a program to illustrate the use of Image Tags

Attributes H Space and V Space.
<HTML>
<HEAD>
<TITLE> Image </TITLE>
</HEAD>
<BODY>
<IMG SRC="SUN_RISE.JPG" HSPACE="250" VSPACE="100">
</BODY>
</HTML>

output

Practical 27
Table
Introduction =

In order to create a table in HTML, <TABLE>

element is used. Every table begins with <TABLE> tag and ends
with a </TABLE> tag. Inside the <TABLE> element sequence of
rows are defined.
Each row in a table begins with a <TR> tag which stands for Table
Row , followed by table data or table header element . A row must
contain at least one table data element. A table row ends with
a</TR> tag that is optional.
As each row of the table is a collection of cells so in order to
define a cell , you must use <TD> tag. The <TD> tag stands for
Table Data and is used to begin a new cell. After the appropriate
cell entry, an optional </TD> tag is used to end the cell. A data
cell can contain text, images, nested table, hyperlinks, tags etc.

Table headers =

Each header cell starts with <TH> tag

and ends with </TH> tag. These tags should always be placed
inside <TR> element. The main difference between <TH> and
<TD> element is that the text in the <TH> element is usually
rendered bold and centered vertically and horizontally by the
browser but in case of <TD> element it remain as a simple text

Practical 28
Write a program to illustrate the Table using
Caption Attribute.
<HTML>

<HEAD>
<TITLE> Table Wth Headers </TITLE>
<BODY>
<H1>
<TABLE>
<CAPTION ALIGN="CENTER"><H1> Class : CSE
</H1></CAPTION>
<TR>
<TH> RollNo. </TH>
<TH> Name </TH>
<TH> Percentage </TH>
</TR>
<TR>
<TD> 11522 </TD>
<TD> Vikas Bansal </TD>
<TD> 75% </TD>
</TR>
<TR>
<TD> 11519 </TD>
<TD> Vaibhav Sharma </TD>
<TD> 75% </TD>
</TR>
</TABLE>

</H1>
</BODY>
</HTML>

output

Practical 29
Write a program to illustrate the Table using Border
and Align Attributes.
<HTML>
<HEAD>
<TITLE> Table Wth Headers </TITLE>
<BODY>
<TABLE BORDER="10" ALIGN="CENTER">
<CAPTION ALIGN="CENTER"><H1> Class : CSE
</H1></CAPTION>
<TR>
<TH> RollNo. </TH>
<TH> Name </TH>
<TH> Percentage </TH>
</TR>
<TR>
<TD> 11522 </TD>
<TD> Vikas Bansal </TD>

<TD> 75% </TD>

</TR>
<TR>
<TD> 11519 </TD>
<TD> Vaibhav Sharma </TD>
<TD> 75% </TD>
</TR>
</TABLE>
</BODY>
</HTML>

output

Practical 30

Write a program to illustrate the Table using

Cellpadding Attribute.
<HTML>
<HEAD>
<TITLE> Table Wth Headers </TITLE>
<BODY>
<TABLE BORDER="10" ALIGN="CENTER" CELLPADDING="50%">
<CAPTION ALIGN="CENTER"><H1> Class : CSE
</H1></CAPTION>
<TR>
<TH> RollNo. </TH>
<TH> Name </TH>
<TH> Percentage </TH>
</TR>
<TR>
<TD> 11522 </TD>
<TD> Vikas Bansal </TD>
<TD> 75% </TD>
</TR>
<TR>
<TD> 11519 </TD>
<TD> Vaibhav Sharma </TD>
<TD> 75% </TD>

</TR>
</TABLE>
</BODY>
</HTML>

output

Practical 31
Write a program to illustrate the Table using Data
as Image.
<HTML>
<HEAD>
<TITLE> Table With Images </TITLE>
<BODY>
<TABLE BORDER="10" ALIGN="CENTER" CELLPADDING="50%">
<CAPTION ALIGN="CENTER"><H1> Image Frame
</H1></CAPTION>
<TR>
<TD> <Image Src="SpiderMan_3.jpg" Height="400"
Width="400"> </TD>
<TD> <Image Src="SUN_RISE.jpg" Height="400" Width="400">
</TD>
</TR>
</TABLE>
</BODY>

</HTML>

output

Practical 32

Write a program to illustrate the syntax of Login ID

Webpage.
<HTML>
<HEAD>
<TITLE> Login Form </TITLE>
</HEAD>
<BODY BGCOLOR="Cream">
<FORM ACTION ="Login.asp" METHOD="Post">
<TABLE ALIGN="CENTER">
<CAPTION ALIGN="Center"><H1> Login Form
</H1></CAPTION>
<TR>
<TD> User ID </TD>
<TD> <INPUT TYPE="Text" NAME="User ID"VALUE=""> </TD>
</TR>
<TR>
<TD> Password </TD>
<TD> <INPUT TYPE="Password" NAME="Password" VALUE="">
</TD>
</TR>
<TR>
<TD> <INPUT TYPE="Submit" VALUE="Submit"> </TD>
<TD> <INPUT TYPE="Reset" VALUE="Reset"> </TD>

</TR>
</BODY>
</HTML>

output

Practical 33
Write a program to illustrate the syntax of Login ID
Webpage using attributes.
<HTML>
<HEAD>
<TITLE> Login Form </TITLE>
</HEAD>
<BODY BACKGROUND="SMALL_SEA.jpg">
<FORM ACTION ="Login.asp"METHOD="Post">
<TABLE ALIGN="Center">
<CAPTION ALIGN="CENTER"><H1> ADMISSION FORM
</H1></CAPTION>

<TR>
<TH> User ID </TH>
<TD> <INPUT TYPE="Text" NAME="User ID"VALUE="" SIZE="30"
MAXLENGTH="30"> </TD>
</TR>
<TR>
<TH> Password </TH>
<TD> <INPUT TYPE="Password" NAME="Password" VALUE=""
SIZE="30" MAXLENGTH="30"> </TD>
</TR>
<TR>
<TH> Sex </TH>
<TD><INPUT TYPE="Radio" NAME="Sex" VALUE="Male"
CHECKED> Male
<INPUT TYPE="Radio" NAME="Sex" VALUE="Female"> Female
</TD>
</TR>
<TR>
<TH> Country </TH>
<TD> <SELECT NAME="Country">
<OPTION VALUE="India">India
<OPTION VALUE="America"SELECTED>America
<OPTION VALUE="Newzealand">Newzealand
<OPTION VALUE="China">China

</SELECT> </TD>
</TR>
<TR>
<TD> <INPUT TYPE="Submit" VALUE="Submit"> </TD>
<TD> <INPUT TYPE="Reset" VALUE="Reset"> </TD>
</TR>
</BODY>
</HTML>

output