Scribd
Upload
218 views

HTML (By Aniket)

The document provides information about HTML including its introduction, properties, advantages, disadvantages and elements. It discusses the basic structure of an HTML document and various tags used in HTML like HTML, HEAD, BODY, heading, paragraph tags. It also provides examples of using these tags.

Uploaded by

Aniket Mahakalkar
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
218 views

HTML (By Aniket)

The document provides information about HTML including its introduction, properties, advantages, disadvantages and elements. It discusses the basic structure of an HTML document and various tags used in HTML like HTML, HEAD, BODY, heading, paragraph tags. It also provides examples of using these tags.

Uploaded by

Aniket Mahakalkar
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 50

HTML

INTRODUCTION

1. HTML (Hyper Text Mark up Language)

HTML is the standard which is used by World Wide Web document. It

is use to add extra features like formatting multimedia images & symbols.

HTML is the Language with its own syntax & rules it is used only for

documentation on the web, so it is not a programming language but it is

mark up language. This language is used to perform communication

between two machines connected in a network or internet.

Internet is the widest network in the world. It is main source of

information exchange. This information is stored on web document. These

web documents are made up of WebPages. HTML is the language i.e. used to

describe structure of WebPages.

These WebPages are view using a special program called browser.

The entire browser (Internet Explorer, Netscape Navigator, Mozilla Firefox,

Opera & Google Chrome) are inbuilt with the interpreter of HTML.

1.1 Properties of HTML:-

 It is case Insensitive Language.

 It is free from language.

1
Web Designing Book (HTML & DHTML)

 Compiler is not available for HTML, only Interpreter is used to

interpret the instruction of HTML.

 It is simple ASCII file format.

 Extension of HTML file should be .HTML, .HTM

1.1.1 Advantages of HTML:-

For HTML requirement is only a text editor or notepad no special software is

required.

HTML pages can view any where independent of hardware & text editor

HTML has specific structure of web page so it is very easy to write.

Error finding is very easy.

No license software is required it is free of cost.

Need not to depend on specific program it can work independently.

It is very easy to learn & understand.

1.1.2 Disadvantages of HTML:

It is not a programming language.

Calculation cannot be done in HTML

Interactive pages cannot be build in the HTML

For programming script language is used in HTML.

HTML pages behave like application

HTML pages do not have their own interface.

2
Web Designing Book (HTML & DHTML)

1.2 HTML Elements:

HTML is used to describe structure of webpage. Web pages has some

common attributes like heading, paragraph, title & etc. Also have specific

time of using these attributes. HTML file have an extension .html & .htm.

There are various elements that can be used to construct the HTML pages.

These elements are called as HTML tags. HTML tags comprises left angular

bracket followed by name of tag & close by right angular bracket. (<HTML>).

HTML element categorised as

1. Container element:

These elements must have starting & ending tag. End tags have

slash (/) within the bracket.

E.g. <HTML>......</HTML>

2. Empty element:

Empty element does not have closing tag. It does not contain

any text.

e.g. <BR>

1.3 Document Structure Element:

There are three HTML elements that for basic document structure of

web page. They are HTML, HEAD, and BODY.

3
Web Designing Book (HTML & DHTML)

1. HTML Element:

The first tag of every HTML document is <HTML>. It indicates that the

content of file is in HTML. Because of this element the explorer

interpreter can distinguish the given data is in the form of HTML

language & start interpreting the page information. It is container

element. Hence it has opening & closing tag.

2. HEAD Element:

The title tells about document. To provide title to HTML page.

We have to use <HEAD> tag. The <TITLE> place within HEAD

tag.

3. BODY Element:

Other than <HTML> & <HEAD> all the other tags & text of HTML

page is placed within the <BODY> tag. This tag specifies body

of HTML page. We can specify background, image, colour,

font, text colour, etc using body tag.

1.4 Basic structure of HTML page

<HTML>
<HEAD>
<TITLE> Basic structure of HTML Page</TITLE>
</HEAD>
<BODY>
-----------------
-----------------

</BODY>
</HTML>

4
Web Designing Book (HTML & DHTML)

2.1 Study of Tags:

Tags define the different part of document. Tags are required for

creating every HTML page. They are set of symbol with special meaning.

Tags are used to make a block of text in HTML. An HTML tag comprises left

angular bracket followed by name of tag & closed by Right angular bracket.

For e.g. <HTML>.....</HTML>

Some tag can be nested within each other. These tags start earlier

ends later.

<U><B>XYZ</B></U>

Some tags have different attributes. Attributes gives various effect to

the tags. Attribute is separated by space after the tag name within angular

bracket. Any attribute which is unknown for tag is not giving any effect &

ignore without giving any error.

e.g. <BODY BG COLOR = “RED”>

----------------

----------------

</BODY>

<HTML> Tag:

This is the first tag in every HTML document. This tag indicates that

contents of file are in HTML. This tag is mandatory. If it is not use browser

will not identify following text as HTML & will not display properly or

5
Web Designing Book (HTML & DHTML)

anything. Text & all other element of HTML are place within HTML tag. The

HTML element is container element & hence has opening & closing tag.

For e.g. <HTML>

-----------

-----------

</HTML>

<HEAD> tag:

Title of any document tells about contents of document. We can provide

title of HTML page with in <HEAD> tag. Enable to provide titled for HTML page.

<TITLE> Tag:

This tag is use in the <HEAD> tag to provide the title to the page.

<TITLE> tag is container tag.

e.g. <HTML>

<HEAD>

<TITLE>EXAMPLE 1</TITLE>

</HEAD>

</HTML>

<BODY> Tag:

Other than HTML & HEAD tag all other tags and entire text is place

within body tag. This tag is a container tag. The body tag forms the body of

HTML page. The body contain various attribute.

6
Web Designing Book (HTML & DHTML)

 BACKGROUND

This attribute is used to print an image file that will be titled

across the browser window providing background for the

document.

<body background=”../foldername/image1.jpg”>

 BGCOLOR

This attribute is use to set the background colour of web page. To

set the background colour red following statement is used.

<body bgcolor=”red”>......</body>

There are 16 colours in HTML. Black, Silver, Grey, White, Maroon,

Red, Purple, Fuchsia, Green, Lime, Olive, Yellow, Navy-blue,

Teal, Aqua, Brown. Instead of colour name we can also use RGB

colour code i.e. 6 digits no. Which use hexadecimal number

system prefix with # sign. The first two digits are from red, next

two form green & the last two forms blue.

E.g. for blue colour we can write colour code #0000FF.

All FF is white & all 00 is black.

<body bgcolor=”#1241EE”>

 TEXT

This attribute is used to change the colour of text in the web page.

Colour can be given simply colour name or 6 digit RGB colour code.

<body text=”red”>, <body text=”#330033”>

7
Web Designing Book (HTML & DHTML)

1. Write a HTML program to generate “HELLO” massage on the body area

also show a message on the title bar of browser.

<HTML>

<HEAD>

<TITLE>Hello</TITLE>

</HEAD>

<BODY>

HELLO

</BODY>

</HTML>

2. Write a HTML program to change the background colour & text colour of

webpage.

<HTML>

<BODY BGCOLOR=”GREY” TEXT=”#FF00EE”>

This is Demo page

</BODY>

</HTML>

3. Write a HTML program to apply an image as Background.

<HTML>

<BODY BACKGROUND=”../image1.jpg”>

This is Demo Page.

</BODY>

</HTML>

8
Web Designing Book (HTML & DHTML)

2.2 Working with text tags:

HEADING Tag:

The font style can be change using heading tag. HTML defines six

level of heading. The highest level of heading is <H1> followed by <H2>,

<H3>, <H4>, <H5>, <H6>. This is a container tag.

E.g <H1>Heading</H1>

Output: HEADING

The heading can be align with align attribute which can take left, right,

center as value. For making heading center align, right align, left align. The

default heading is left.

<H1 align=”right”>DEMO</H1>

4. Write a program to display Hello World massage in various Heading tag.

<HTML>
<HEAD>
<TITLE>DEMO PAGE</TITLE>
</HEAD>
<BODY>
<H1>HELLO WORLD</H1>
<H2>HELLO WORLD</H2>
<H3>HELLO WORLD</H3>
<H4>HELLO WORLD</H4>
<H5>HELLO WORLD</H5>
<H6>HELLO WORLD</H6>
</BODY>
</HTML>

9
Web Designing Book (HTML & DHTML)

<B> tag:

Bold face element: this tag specified that enclose text should be

display in bold face. This is container tag.

<B>My page </B>

<U> tag:

Underline element: this tag specified that enclose text should be

display underline. <U> tag is container tag. It is use to underline the text.

<U>My page</U>

<I> tag:

This tag specified that text should be display in italic. This is

container tag. This is represented by letter I.

<I>My page</I>

<BIG> tag:

This tag is use to display text in big size compare to default size. This

is container tag.

<big>My page</big>

<SMALL> Tag:

This tag is use to display text in small size compare to default size.

This is container tag.

<small>My page</small>

10
Web Designing Book (HTML & DHTML)

<SUP> tag:

This tag is use to display text in super script format. This is container tag.

<sup>degree</sup>

<SUB> tag:

This tag is use to display text in sub script format. This is container tag.

<sub>demo</sub>

<EM> Tag:

This tag is used emphasis the text. This result is a italic text. This is

container tag.

Eg. <EM>DEMO PAGE </EM>

O/P DEMO PAGE

<STRONG> Tag:

This tag is used to strong emphasis the text. It displays bold text. It is

container tag.

Eg. <STRONG>DEMO PAGE</STRONG>

o/p: DEMO PAGE

5. Write a program to generate following output.

This is a chemical called as H2SO4. This chemical is at 4th position.

<HTML>
<BODY>
This is a <B>chemical</B> called as <I> H<SUB>2</SUB>
SO<SUB>4</SUB>.</I>
<U>This chemical is at 4<SUP>th</SUP>position.</U>
</BODY>
</HTML>

11
Web Designing Book (HTML & DHTML)

<PRE> Tag:

The <PRE> Tag is the container tag & is most common & useful for

PRE formatting text. Any text formatting element can be used inside <PRE>

tag.

<STRIKE> Tag:

This tag is used to draw Horizontal line through the middle of the

text. This is container tag.

<STRIKE>DEMO PAGE</STRIKE>

<BR> Tag:

The line break element enables you to insert a line break or to move

the cursor in next line. It is represented by BR tag. This tag inserts line

break between two pieces of text. This is empty tag.

E.g. Demo<BR>Page

O/p Demo

Page

<Font> tag:

This tag is used to change the font, size & alignment of text. This is

the container tag. This tag having several Attributes & these attributes are,

Face: This Attribute is use to display text on the screen provided that type

face is already install in the machine.

<FONT FACE=”VERDANA”>Demo Page</FONT>

O/p: Demo Page

12
Web Designing Book (HTML & DHTML)

Size: this attribute is represented as Font size. the valid range 1 to 7 &

default size is 3. The value of size can have (+) or (-) sign in front of font. If

the font size above server or below 1 the value of 7 and 1 will be used.

<FONT SIZE=”4”> DEMO PAGE </FONT>

<FONT SIZE =”-1”>Demo Page</FONT>

Color: It changes the colour of text that will appear on the screen. The

colour can be set by given value as #RRGGBB. It is a hexadecimal colour for

each colour or it can be set by giving colour name.

<FONT COLOR= #ABCDEF>DEMO PAGE</FONT>

<FONT COLOR= “Aqua”>DEMO PAGE</FONT>

Align: This attribute is used to align the text right, center & left.

<FONT ALIGN=”RIGHT”>Demo Page</FONT>

Horizontal Ruler:

<HR> Tag:

Horizontal rule tag specifies a horizontal to be draw across the page. The

tag used for specifying horizontal rule is <HR>. The tag has following

attribute.

Size: this attribute determine the thickness of horizontal rule. The value

given is in pixel. This is the empty tag.

Eg. <HR size=4>

13
Web Designing Book (HTML & DHTML)

Color: color attribute is used to specify color of horizontal rule this can be

set as follows.

<HR COLOR=#RRGGBB>

Width: The default horizontal rule is always as wide as the page. The width

attribute can specify an exact width in the pixel or relative width as

percentage of document width.

Eg. <HR width=50%>

It will display horizontal with width i.e. 50% of page width.

Align: If horizontal rule is not equal the width of page then alignment of

rule can be set. The alignment can be left right or center. The default align

is left.

<HR Align=”center”>

Noshade: if solid bar is required a shade attribute specifies that the

horizontal rule should no shade at all.

<HR NOSHADE>

6. Write a program to change the font face, size & color of text.

<HTML>
<HEAD>
<TITLE>DEMO PAGE</TITLE>
</HEAD>
<BODY>
<FONT FACE=”VERDANA” SIZE=2 COLOR=RED>THIS IS A DEMO
PAGE</FONT>
</BODY>
</HTML>

14
Web Designing Book (HTML & DHTML)

2.3 To Display Scrolling Text:

<Marquee> Tag:

HTML provides marquee tag to make text scrolling horizontally &

vertically. This is container tag. Marquee tag has following attributes.

Behaviour: this attribute set movement of marquee. This attribute have any

of following value.

1. Scroll: move text from one margin across to other margin completing

& starts again from same margin.

2. Slide: Move text from the one margin & bounce back as soon as text

touches the other margin.

3. Alternate: bounces the text back & forth between the margins.

BGCOLOR: This attribute specified the background colour of the margin. It

is used RGB coding system or the colour name.

Direction: This attribute specify the direction of the text. The direction can

be specifying either left or right. The default marquee move from right of

the screen to left.

Height: This attribute is specifying the height of marquee area. This value

can be specified either in pixel or as % of screen height.

Loop: This attribute specified the no of time marquee is displayed in HTML

page.

15
Web Designing Book (HTML & DHTML)

Eg. <MARQUEE LOOP=4>HTML</MARQUEE>

It will display text four times.

If we want marquee to be display as long as page is open the loop attribute

with have value=-1 or infinite.

Width: This attribute specify width of marquee area. This value can be

specified either in pixel or as percentage of screen.

Scroll Amount: To specify the no of pixel between each successive of

marquee of text to display no of pixel.

Scroll Delay: this attribute enables you to specify no of milliseconds

between each successive drawn of marquee text.

7. Write a program to scroll the text in the webpage.

<HTML>
<HEAD>
<TITLE>DEMO PAGE</TITLE>
</HEAD>
<BODY>
<MARQUEE DIRECTION=LEFT>HELLO</MARQUEE>
<MARQUEE DIRECTION=RIGHT>HELLO</MARQUEE>
<MARQUEE DIRECTION=UP>HELLO</MARQUEE>
<MARQUEE DIRECTION=DOWN>HELLO</MARQUEE>
</BODY>
</HTML>

16
Web Designing Book (HTML & DHTML)

2.4 Entering Paragraph in Web Page:

<P>Tag:

Technically text type in HTML page should be in another container

tag. I.e. paragraph tag<p>. This tag is used to show what text in document

constitutes the paragraph. I.e. all the text between <P> tags is single

paragraph when we start new paragraph browser will insert & align between

to paragraph. In <P> tag browser will ignore more than one space & any no.

of written.

<P> I am Developer</p>

COMMENT Tag:

This tag is allow to create a massage ie. Intended to remind something

for to help those who view HTML document.

<!.. this is comment>

<TT> Tag:

Teletype writer tag is use to display contents with mono space type

write font. This is container tag.

<TT>DEMO PAGE</TT>

17
Web Designing Book (HTML & DHTML)

2.5 Working with Images Tag:

Images are used to enhance appearance of homepage. There are many

image format are available such us gif, Jpeg, pcx, wmr, bmp, etc. Jpeg &

gif format support wide in line of body text so called as inline images.

<IMG>Tag:

The image tag incorporate graphics into HTML document. Image tag is an

empty tag. The image tag has following attributes.

1. SRC: The SRC attribute is used to specify the image to be inserted in

the page. The SRC is mandatory attribute. <IMG SRC=”Image1.jpg”>

Above statement insert image1.jpg image in the page.

2. ALIGN: The align attribute is used to determine of text adjacent to

image it can have left, right, center align horizontally & top, Bottom

& middle align vertically.

<img src=”image.jpg” align=right>

3. ALT: The ALT attribute is used to specify alternate text. That can be

display in place of image. This is required when user need to stop

display of image while retrieving document in order to make retrieval

faster.

<IMG SRC=”image.jpg” alt=”image”>

18
Web Designing Book (HTML & DHTML)

4. Width: This attribute is used to set the width of the image. The width

can be specifying in terms of pixels.

5. Height: This attribute is used to set the height of the image. The

height can be specifying in terms of pixels.

<img src=”image.jpg” width=400 height=400>

6. Border: By default browser display image with border around it. The

border attribute of IMG tag can be set by providing value for border

thickness in the pixel.

<img src=”image.jpg” border=2>

8. Write a program to display an image on the web page.

<HTML>
<HEAD>
<TITLE>DEMO PAGE</TITLE>
</HEAD>
<BODY>
<IMG SRC=”IMAGE1.JPG” WIDTH=300 HEIGHT=250 ALT=”IMAGE1”>
</BODY>
</HTML>

19
Web Designing Book (HTML & DHTML)

2.6 Linking text or Object:

<A> Tag:

The hyper linking is an associated between two pieces of text or object

HTML provide an anchor element. To mark text as a link the <A> tag use.

This is a container tag. Anchor tag have HREF attribute. This is mandatory

attribute. HREF attribute specifies the path of next page.

<A HREF=”PAGE2.HTML”>Click Here</A>

Also image can be uses as anchor for the hypertext line it can be uses as

follows

<A HREF=”Page2.html”><img src=”image.jpg”></A>

9. Write a program to link one web page to another webpage.

<HTML>
<HEAD>
<TITLE>DEMO PAGE</TITLE>
</HEAD>
<BODY>
<A HREF=”demopage1.html”>Click here</A>
<A HREF=”www.google.com”>Google</A>
</BODY>
</HTML>

10.Write a program to give a link to an Image.

<HTML>

<HEAD>
<TITLE>DEMO PAGE</TITLE>
</HEAD>
<BODY>
<A HREF=”www.yahoo.com” ><IMG SRC=”IMAGE2.JPG”></A>
</BODY>
</HTML>

20
Web Designing Book (HTML & DHTML)

2.6.1 LIST ELEMENTS:

HTML supports several type of list element that should be including

within the body tag. Some of commonly used list items are

1. Directory list

2. Ordered list

3. Unordered list

4. Menu list

5. Definition list

1. Directory list:

A directory list element is used to present list of item containing up to

20 characters each. Item in directory list may be arranged in column. The

directory list beginning with <DIR> tag & followed by <LH> tag for list

heading & <LI> tag for list item.

E.g.

11.Write a program to show content using directory list.

<HTML>
<HEAD>
<TITLE>DEMO PAGE</TITLE>
</HEAD>
<BODY>
<DIR>
<LH>PERIFERALS </LH>
<LI>MOUSE</LI>
<LI>KEYBOARD</LI>
<LI>PEN DRIVE</LI> </DIR>
</DIR>
</BODY>
</HTML>

21
Web Designing Book (HTML & DHTML)

Output:

PERIFERALS

 MOUSE

 KEYBOARD

 PEN DRIVE

2. Ordered list

The ordered list element is used to present the numbered list of the

item. In the ordered list begin with <OL> & followed by <LH> & <LI> tag.

12.Write a program to display ordered list.

<HTML>
<BODY>
<OL>
<LH>WEEKDAYS</LH>
<LI>SUNDAY</LI>
<LI>MONDAY</LI>
<LI>TUESDAY</LI>
</OL>
</BODY>
<HTML>

Output:

WEEKDAYS

1. SUNDAY

2. MONDAY

3. TUESDAY

22
Web Designing Book (HTML & DHTML)

Attributes of <OL> tag:

1. Type: This attribute provides the various types number to the list

following are the values of which can be assign with type to different

output.

<OL TYPE=”A”>: List mark to upper case.

<OL TYPE=”a”>: List mark to lower case.

<OL TYPE=”I”>: List mark to upper case roman number.

<OL TYPE=”i”>: List mark to lower case roman number.

<OL TYPE=”1”>: Set of no.

2. Start: Beginning value item can be set in the current list.

3. Compact: The list displayed is compact.

Unordered List:

The unordered list element is used to present list of item mark by

bullet. Unordered list start with <UL> followed by <LI> tag. The type

attributes of <UL> & <LI>has following values.

1. Circle

2. Disc

3. Square

23
Web Designing Book (HTML & DHTML)

13.Write a program to display unordered list.

<HTML>
<HEAD>
<TITLE>DEMO PAGE</TITLE>
</HEAD>
<BODY>
<UL TYPE=”SQUARE”>
<LI TYPE=”CIRCLE”>MOUSE</LI>
<LI>KEYBOARD</LI>
<LI>MONITOR</LI>
</BODY>
</HTML>

OUTPUT:

o MOUSE

 KEYBOARD

 MONITOR

Menu list:

The menu list element display list of item of on item per line it is

more compact than unordered list menu list begin <menu> tag & followed

by <LI> tag.

14.Write a program display menu list.


<HTML>
<HEAD>
<TITLE>DEMO PAGE</TITLE>
</HEAD>
<BODY>
<MENU>
<LI>COMPUTER</LI>
<LI>LAPTOP</LI>
</MENU>
</BODY>
</HTML>

24
Web Designing Book (HTML & DHTML)

OUTPUT:

 COMPUTER

 LAPTOP

Definition List:

This list are also called glosser list. This list have format similar to

directory list <DL>, <DT> & <DD> are the tags used to define Definition tag.

<DL> tag provides beginning as well as end of line break.

<DT> tag mark the term.

<DD> tag defines the paragraph.

15.Write a program display menu list.

<HTML>
<BODY>
<DL>
<DT>CPU
<DD>The control processing unit
</DL>
</BODY>
</HTML>

OUTPUT:

CPU
The control processing unit

25
Web Designing Book (HTML & DHTML)

2.7 Working With Table Tag:

Table are use to present data in tabular format. Data is easier to read

when presented using table. We can display paragraph within the data cell.

So tables are very popular ways of presenting data in web page.

Tag Required To Create The Table:

Table are use to display in tabular form. HTML provides a table

element to create a table. Some basic tag which are required for creating a

table are as follows.

1. <Table> tag:

The table tag is used for creating the table. It is a container tag.

Table element starts with <table> tag & ends with </table> tag.

2. <TR> tag:

This tag is used to specify table row. This is container tag. The

contents of row are placed within <TR> ----- </TR> tag.

3. <TH> tag:

This is stand for table header by default header cell is in bold &

center aligns. Table header should be enclose with in <TH> & </TH>

26
Web Designing Book (HTML & DHTML)

4. <TD> tag:

It is used to define table data. The data must be written within

<TD>&</TD> tag.

5. <CAPTION> tag:

To specify the caption of the table <CAPTION> tag is used the caption

tag is a container tag. By default it is center align. It is used in the

<TABLE> tag.

Attributes:

The table tag has certain attribute. These are as follows:

1. Border: Border attribute draws border around the entire table cell.

By default table show without border. The size of border can be

specify by using

<table border=3>

2. Cell Spacing: The space between cells in the table can be specified

using cell spacing attribute. The value of cell spacing should be

defined in pixels.

<table cellspacing=30>

3. Cell padding: The space between cell data & cell wall in the table

can be specifying cell padding were value should be in pixels.

27
Web Designing Book (HTML & DHTML)

<table cellpadding=40>

4. Align: this attribute is used to align the table to the left, right &

center of the page. Default alignment of table is left.

<table align=”right”>

5. Valign: This attribute is use to align the table vertically at top,

center & bottom. The default is center align.

<table valign=”top”>

6. BGcolor: the bgcolor attribute allows you to set the background

colour of the table. Either it can specify by color name or by

#RRGGBB hexadecimal code.

7. Border color: This attribute is use to set the border colour of the

table. The color can be specifying by name or RGB color code.

8. Rowspan & colspan: To span row 7 column in the table attribute

rowspan & colspan are used. These attributes can appear with in any

table cell. The rowspan specifies the no. of rows the cell can span.

The default span of any cell is one. The colspan specified no. of

column the cell can span. The default cell span for any cell is one.

Eg. <td colspan=3>

<td rowspan=3>

28
Web Designing Book (HTML & DHTML)

16.Write a program to create following table on webpage.

1 2

3 4
<HTML>
<BODY>
<TABLE BORDER=1>
<TR>
<TD>1</TD>
<TD>2<TD>
</TR>

<TR>

<TD>3</TD>
<TD>4</TD>
</TR>
</TABLE>
</BODY>
</HTML>

17.Write a program to create following table on webpage.

A B C D

E F G H
<HTML>
<BODY>
<TABLE BORDER=1>
<TR>
<TD>A</TD>
<TD>B<TD>
<TD>C</TD>
<TD>D<TD>

</TR>
<TR>

29
Web Designing Book (HTML & DHTML)

<TD>E</TD>
<TD>F</TD>

<TD>G</TD>
<TD>H<TD>
</TR>

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

18.Write a program to create following table on webpage.

NE

TWO THREE

<HTML>
<BODY>
<TABLE BORDER=1>
<TR>
<TD COLSPAN=2 ALIGN= CENTER> ONE</TD>

</TR>
<TR>
<TD>TWO</TD>
<TD>THREE</TD>
</TR>
</TABLE>
</BODY>
</HTML>

30
Web Designing Book (HTML & DHTML)

19.Write a program to create following table on webpage.

ONE
TW
THREE
O
A B C D

<HTML>
<BODY>
<TABLE BORDER=1>
<TR>
<TD COLSPAN=4 ALIGN= CENTER> ONE</TD>
</TR>
<TR>
<TD COLSPAN=2 ALIGN=CENTER>TWO</TD>
<TD COLSPAN=2 ALIGN=CENTER>THREE</TD>
</TR>

<TR>
<TD>A</TD>

<TD>B<TD>
<TD>C</TD>
<TD>D<TD>

</TR>

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

31
Web Designing Book (HTML & DHTML)

20.Write a program to create following table on webpage & set the


background color as follows in the table.

1 2
Red Blue
3 4
Green cyan
<HTML>
<BODY>
<TABLE BORDER=1>

<TR>
<TD BGCOLOR=”RED”>1</TD>
<TD BGCOLOR=”BLUE”>2<TD>
</TR>

<TR>

<TD BGCOLOR=”GREEN”>3</TD>
<TD BGCOLOR=”CYAN”>4</TD>
</TR>
</TABLE>
</BODY>
</HTML>

21.Write a program to create following table on webpage & set the image in
the table cell as follows. Consider width & height=100 pixels

Image1 Image2

Image3 Image4

<HTML>
<BODY>
<TABLE BORDER=1>
32
Web Designing Book (HTML & DHTML)

<TR>
<TD>
<IMG SRC=”IMAGE1.JPG WIDTH=100 HEIGHT=100 ”>
</TD>

<TD>
<IMG SRC=”IMAGE2.JPG WIDTH=100 HEIGHT=100 ”>
</TD>
</TR>

<TR>
<TD>
<IMG SRC=”IMAGE3.JPG WIDTH=100 HEIGHT=100 ”>
</TD>

<TD>
<IMG SRC=”IMAGE4.JPG WIDTH=100 HEIGHT=100 ”>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

33
Web Designing Book (HTML & DHTML)

22.Write a program to create following table on webpage & set the image in
the table cell as follows. Consider width=100% & HEIGHT=200px.

Image1 Image2
50% 50%

<HTML>
<BODY>
<TABLE BORDER=1 WIDTH=100% HEIGHT=200>
<TR>
<TD WIDTH=50%>
<IMG SRC=”IMAGE1.JPG WIDTH=100 HEIGHT=100 ”>
</TD>
<TD WIDTH=50%>
<IMG SRC=”IMAGE2.JPG WIDTH=100 HEIGHT=100 ”>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

34
Web Designing Book (HTML & DHTML)

2.8 Working with Frames:

Frames are one of the most powerful aspects of HTML programming,

& as such, many people have rigid opinions about them. In fact many people

hate them but some wouldn’t create a website without them.

The give you the ability to split the browser window into vertical &

horizontal, or both vertically and horizontal, sections. You can load

different pages into the various frames in the browser, creating a multipage

display. With frames, you have a significant amount of added control over

the browser layout.

<FRAMESET> Tag:

This tag is used to configure the frames. This tag is written inside the

body tag to display the frame. This is a container tag. <FRAMESET> tag

contains two attribute these are:

ROWS: this attribute is used to create horizontal frame & set the no. of

rows. The rows attribute accept value in the form of pixels & percentage of

the total page height.

<FRAMESET ROWS=”50%,50%”>

COLS: This attribute is used to create vertical frames & to set the no. of

column. The cols attribute accept value in the form of pixel & percentage of

the page width.

<FRAMESET COLS=”50%,50%”>

Eg. <FRAMESET COLS=”30%,50%,”>

Here use can use an asterisk () to represent the rest of space available in

the window.

35
Web Designing Book (HTML & DHTML)

<FRAME> tag:

Frame tag is used to create the actual frame in the web page. This is a

empty tag. This has SRC attribute which is mandatory with frame tag. In src

attribute we have to give the path of the web page which we want to

display.

<Frame src=”page1.html”>

Attributes:

FRAMESPACING: Set the spacing between frames. The frame spacing can be

set using pixel.

BORDER: This attribute is used in the outermost FRAMESET tag to set the

border thickness for all frames within the FRAMESET. Set to positive integers

indicating the pixel space between frames; set to 0 set the FRAMEBORDER

to NO.

FRAMEBORDER: set whether or not border surround the frame. For

Netscape navigator set to yes and no; for internet explorer lists, set to 1

and 0.

BORDERCOLOR: Sets the color used for frame border. This setting overrides

the color specified in the surrounding <FRAMESET> element. Set to an RGB

triplet color value or predefined color name.

SCROLLING: Determines scrollbar action; possible values: AUTO (the

default; lets the browser decide when to display scrollbars), YES (always

show a scrollbar), or NO (never show a scrollbar).

36
Web Designing Book (HTML & DHTML)

NORESIZE: Stand-alone attribute indicating that the frame may not be

resized. The default is that frames may be resized by dragging the border.

23.Write a program to create following frameset on the Webpage.

PAGE1.HTML PAGE2.HTML

PAGE3.HTML PAGE4.HTML

<HTML>
<HEAD>
<FRAMESET ROWS=”50%,50%” COLS=”50%,50%”>
<FRAME SRC=”page1.html”></FRAME>
<FRAME SRC=”page2.html”></FRAME>
<FRAME SRC=”page3.html”></FRAME>
<FRAME SRC=”page4.html”></FRAME>
</HEAD>
</BODY>
</HTML>

24.Write a program to create following frameset on the Webpage.

PAGE1.HTML

PAGE2.HTML

PAGE3.HTML

37
Web Designing Book (HTML & DHTML)

<HTML>
<HEAD>
<FRAMESET COLS=”100%”>
<FRAMESET ROWS=”30%,30%,”>
<FRAME SRC=”page1.html”></FRAME>
<FRAME SRC=”page2.html”></FRAME>
<FRAME SRC=”page3.html”></FRAME>
</HEAD>
</BODY>
</HTML>

25.Write a program to create following frameset on the Webpage.

PAGE1.HTML

PAGE2.HTML

PAGE3.HTML

<HTML>
<HEAD>
<FRAMESET COLS=”100%”>
<FRAMESET ROWS=”30%,30%,”>
<FRAME SRC=”page1.html”></FRAME>
<FRAME SRC=”page2.html”></FRAME>
<FRAME SRC=”page3.html”></FRAME>
</HEAD>
</BODY>
</HTML>

38
Web Designing Book (HTML & DHTML)

26.Write a program to create following frameset on the Webpage.

PAGE1.HTML
HEIGHT=150

PAGE2.HTML
HEIGHT=150

PAGE3.HTML

<HTML>
<HEAD>
<FRAMESET COLS=”100%”>
<FRAMESET ROWS=”150,150,”>
<FRAME SRC=”page1.html”></FRAME>
<FRAME SRC=”page2.html”></FRAME>
<FRAME SRC=”page3.html”></FRAME>
</HEAD>
</BODY>
</HTML>

39
Web Designing Book (HTML & DHTML)

27.Write a program to create following frameset on the Webpage.

PAGE1.HTML

PAGE2.HTML

PAGE3.HTML

<HTML>
<HEAD>
<FRAMESET COLS=”100%” FRAMESPACING=0 FRAMEBORDER=0
BORDER=0>
<FRAMESET ROWS=”30%,30%,” FRAMESPACING=0
FRAMEBORDER=0 BORDER=0>
<FRAME SRC=”page1.html” SCROLLING=N0
NORESIZE></FRAME>
<FRAME SRC=”page2.html” SCROLLING=NO
NORESIZE></FRAME>
<FRAME SRC=”page3.html” SCROLLING=N0
NORESIZE ></FRAME>
</HEAD>
</BODY>
</HTML>

40
Web Designing Book (HTML & DHTML)

2.9 CREATING HTML FORM & HTML CONTROLS:

HTML form is nothing but a webpage which allows the user to enter

the data. The simplest example of the form is the feedback from which

available on the web. We need to fill these forms, & submit them. The form

may contain the information like name of the user, Email address if any

feedback text etc, and we will be provided with the command buttons push

buttons like submit, cancel, etc.

When we are dealing with the form we are using the different objects

like text items, static texts, radio buttons, check boxes, selection lists, push

buttons etc. Before using form we should know the working of the form i.e.

internally how the processes are performed. In the form we should have a

submit button. After pressing this button the data entered by the user is

delivered to the server, where the processing of the data is done.

When the data is entered in the form, some validation process can be

carried out, for these validation processes we can make use of different

script languages like java script or VB script. These scripts are even used to

navigate through the form by usage of different keystrokes. Once the data is

transferred, the server should have the program to process the data.

Creating the form is a very easy task. We need to use some tags like

<FORM>, <INPUT> & etc. To start with we need to use the tag browser about

41
Web Designing Book (HTML & DHTML)

the form which we are going to create in our HTML script. This tag has two

attributes. METHOD and ACTION.

METHOD indicates the type of work the form is going to do. This

METHOD is normally POST. Which means that the inputs of the form are to

be stored in the form is to be stored in the form of document. In some cases

the METHOD could be GET, in which METHOD submits the result as a part of

URL header. For example GET is sometimes used when submitting queries to

the search engines form a web page. This method is normally used when a

script writer is expert in the CGI scripting.

The action attribute indicates the address of the program or script of

the server computer that will process the information entered by the user.

This address is available with your ISP (internet service provider) as the

person who is maintaining web services. The script can be written in any

language on the sever side. Normally this is written in java script or VB

script.

2.9.1 HTML Controls

There are plenty of controls available in HTML, and as you might

except. Many HTML controls are created with the <INPUT> element. Using

different value for the TYPE attribute to create the various controls.

<INPUT TYPE=”TEXT”>: this type of control creates the text field on the

web page. In this text field user can give input.

Attribute:

Value: Holds the initial text in the text field.

Size: Sets the size of the text field in characters. Set to positive integer.

42
Web Designing Book (HTML & DHTML)

Maxlength: Sets the maximum number of characters that can be entered in

to the text field.

Name: Gives the element a name. Set to alphanumeric character.

Readonly: Indicates that the content of the text field may not be modified.

<INPUT TYPE=”PASSWORD”>: this type of control creates the password

field. In this field user can give password. The password can be shown in the

form of asterisk () or dot ().

Attribute:

Value: Holds the initial text in the text field.

Size: Sets the size of the text field in characters. Set to positive integer.

Maxlength: Sets the maximum number of characters that can be entered in

to the text field.

Name: Gives the element a name. Set to alphanumeric character.

<INPUT TYPE=”BUTTON”>: Are a standard clickable buttons you see on

many web pages today.

Attribute:

Value: Gives this button another label besides the default, Reset.

Size: Sets the size of the control. Set to positive integer.

Name: Gives the element a name. Set to alphanumeric character.

<INPUT TYPE=”SUBMIT”>: used to be most important control in forms

because when you clicked this button, all the data in the form was sent to

43
Web Designing Book (HTML & DHTML)

The web server for more processing. However, more and more forms are

appearing that handle all the processing they need without sending anything

to a web server, and the submit button is omitted.

Attribute:

Value: Gives this button another label besides the default, submit query.

Size: Sets the size of the control. Set to positive integer.

Name: Gives the element a name. Set to alphanumeric character.

<INPUT TYPE=”RESET”>: Allows the user to clear all the data they’ve

entered and start over. When the user clicks the reset button, all the

controls in the form are returned to their original state, displaying the data

they had when they first appeared. Great of complex forms.

Attribute:

Value: Gives this button another label besides the default, Reset.

Size: Sets the size of the control. Set to positive integer.

Name: Gives the element a name. Set to alphanumeric character.

<INPUT TYPE=”RADIO”>: this type of control Display usually as a circle,

which when selected, displays a dot in the middle. These controls act much

like checkboxes except that they work in mutually exclusive groups in which

only one radio button may be selected at a time.

Attribute:

Name: Gives the element a name. Set to alphanumeric character.

44
Web Designing Book (HTML & DHTML)

<INPUT TYPE=”CHECKBOX”>: Display usually as a small box with a

checkmark in it. The user can toggle the checkmark on or off by clicking the

checkbox.

Attribute:

Name: Gives the element a name. Set to alphanumeric character.

<TEXTAREA>: Are two dimensional text fields, allowing the user to enter

more than one line of text. Text areas can also support text wrapping. Rows

& cols are two attributes use to set the dimension of text area.

Attribute:

Name: Gives the element a name. Set to alphanumeric character.

Rows: Specifies the number of rows in the control. Set to positive integer.

Cols: Specifies the number of columns in the control. Set to positive

integer.

Readonly: Indicates that the content of the text area may not be modified.

<SELECT>: Displays a select control, much like a drop-down list box which

further called combo box. In combo box user can select only one option.

Attribute:

Size: Gives the number of items visible in the list. Set to positive integer.

Name: Gives the element a name. Set to alphanumeric character.

<OPTION>: Specifies a list item in the list of SELECT control.

Attribute:

Value: Holds the value to be sent to the server if the item is chosen. The

default is the content of the option element. Set to an alphanumeric string.

45
Web Designing Book (HTML & DHTML)

<SELECT MULTIPLE>: Display a multiple selection control, much like a list

box. In this user can select multiple choices from the list.

28.Write a program to create text field on the webpage.

<HTML>
<BODY>
<FORM>
<INPUT TYPE=”TEXT” SIZE=25></INPUT>
</FORM>
</BODY>

<HTML>

29.Write a program to create Password field on the webpage.

<HTML>
<BODY>
<FORM>

<INPUT TYPE=”PASSWORD”></INPUT>
</FORM>
</BODY>

<HTML>

30.Write a program to create a button on the webpage.

<HTML>
<BODY>
<FORM>
<INPUT TYPE=”BUTTON” VALUE=”OK”></INPUT>
</FORM>
</BODY>

<HTML>

31.Write a program to create a submit button on the webpage.

46
Web Designing Book (HTML & DHTML)

<HTML>
<BODY>
<FORM>
<INPUT TYPE=”SUBMIT” ></INPUT>
</FORM>
</BODY>

<HTML>

32.Write a program to create a reset button on the webpage.

<HTML>
<BODY>
<FORM>
<INPUT TYPE=”RESET” ></INPUT>
</FORM>

</BODY>

<HTML>

33.Write a program to create a Login form on the webpage.

<HTML>
<BODY>
<FORM>
Username:<INPUT TYPE=”TEXT” SIZE=20 ></INPUT>
<BR>
Password:<INPUT TYPE=”PASSWORD” SIZE=20 ></INPUT>
<BR>
<INPUT TYPE=”BUTTON” VALUE=”Login”></INPUT>
<INPUT TYPE=”RESET”></INPUT>

</FORM>
</BODY>
<HTML>

34.Write a program to create a Login form on the webpage.

<HTML>

47
Web Designing Book (HTML & DHTML)

<BODY>
<FORM>
<TABLE>
<TR>
<TD> Username:</TD>
<TD><INPUT TYPE=”TEXT” SIZE=20 /><TD>
</TR>
<TR>
<TD>Password:</TD>
<TD> <INPUT TYPE=”PASSWORD” SIZE=20 /><TD>
</TR>
<TR>

<TD>&nbsp;</TD>
<TD><INPUT TYPE=”BUTTON” VALUE=”Login”/>
<INPUT TYPE=”RESET”/></TD>
</TABLE>
</FORM>
</BODY>
<HTML>

35.Write a program to create a Check box on the webpage.

<HTML>
<BODY>
<FORM>
<INPUT TYPE=”CHECKBOX” />Windows><BR>
<INPUT TYPE=”CHECKBOX” />Linux<BR>
<INPUT TYPE=”CHECKBOX” />Solaris><BR>
</FORM>

</BODY>
<HTML>

36.Write a program to create a Check box on the webpage.

<HTML>
<BODY>
<FORM>

48
Web Designing Book (HTML & DHTML)

<INPUT TYPE=”RADIO” NAME=”SEX” />Male<BR>


<INPUT TYPE=”RADIO” NAME=”SEX”/>Female<BR>
</FORM>
</BODY>
<HTML>

37.Write a program to create a Text area on the Webpage.


<HTML>
<BODY>
<FORM>
<TEXTAREA ROWS=”5” COLS=”20”>
</TEXTAREA>
</FORM>
</BODY>
</HTML>

38.Write a program to create a combo box on the Webpage.


<HTML>
<BODY>
<FORM>
<SELECT>
<OPTION VALUE=”1”>Tea</OPTION>
<OPTION VALUE=”1”>Coffee</OPTION>
<OPTION VALUE=”1”>Cold drink</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>

39.Write a program to create a combo box on the Webpage.


<HTML>
<BODY>
<FORM>

49
Web Designing Book (HTML & DHTML)

<SELECT>
<OPTION VALUE=”1”>Tea</OPTION>
<OPTION VALUE=”1”>Coffee</OPTION>
<OPTION VALUE=”1” SELECTED>
Cold drink</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>

40.Write a program to create a list box on the Webpage.


<HTML>
<BODY>
<FORM>
<SELECT MULTIPLE>
<OPTION VALUE=”1”>Tea</OPTION>
<OPTION VALUE=”1”>Coffee</OPTION>
<OPTION VALUE=”1”>Cold drink</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>

50

You might also like