Vous êtes sur la page 1sur 66

WEB

DESIGNING
BOOK
[HTML & DHTML]
ANIKET MAHAKALKAR

Web Designing Book (HTML & DHTML)

CONTENTS
1.0

HTML (Hyper Text Mark up Language)

1-4

1.1

Properties of HTML

1.2

HTML Elements

1.3

Document Structure Element

1.4

Basic structure of HTML page

2.0

HTML TAGS

5-51

2.1

Study of Tags

2.2

Working with text tags

2.3

To Display Scrolling Text

15

2.4

Entering Paragraph in Web Page

17

2.5

Working with Images Tag

18

2.6

Linking text or Object

20

2.7

Working With Table Tag

26

2.8

Working with Frames

35

2.9

Creating Html Form & Html Controls

41

3.0

DHTML (Dynamic Hypertext Mark-up Language)

52-64

3.1

Introduction

52

3.2

Cascaded Style Sheets

53

3.3

Class

56

3.4

External Style Sheets

57

Web Designing Book (HTML & DHTML)

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.

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.

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.

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>

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
anything. Text & all other element of HTML are place within HTML tag. The
HTML element is container element & hence has opening & closing tag.

Web Designing Book (HTML & DHTML)

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.

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

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>

10

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>

11

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

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>

13

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

14

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>

15

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>

16

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

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>

18

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:
Teli type writer tag is use to display contents with mono space type
write font. This is container tag.
<TT>DEMO PAGE</TT>

19

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>

20

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>

21

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>

22

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>

23

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

24

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

25

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:

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>

26

Web Designing Book (HTML & DHTML)

OUTPUT:

COMPUTER

LAPTOP

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

27

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>

28

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.
<table cellpadding=40>
29

Web Designing Book (HTML & DHTML)

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.

<th colspan=3>
<td rowspan=3>

30

Web Designing Book (HTML & DHTML)

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


1

<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

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

Web Designing Book (HTML & DHTML)

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

32

Web Designing Book (HTML & DHTML)

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


ONE
TWO THREE
A B

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

33

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
Red

2
Blue

3
Green

4
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

34

Web Designing Book (HTML & DHTML)

<HTML>
<BODY>
<TABLE BORDER=1>
<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>

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

Image2
50%

35

Web Designing Book (HTML & DHTML)

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

36

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 wouldnt 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%,>

37

Web Designing Book (HTML & DHTML)

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

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

38

Web Designing Book (HTML & DHTML)

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

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>

39

Web Designing Book (HTML & DHTML)

24. 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>
25. Write a program to create following frameset on the Webpage.

PAGE1.HTML
PAGE2.HTML
PAGE3.HTML

40

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

Web Designing Book (HTML & DHTML)

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
RESIZ=NO></FRAME>
<FRAME SRC=page2.html SCROLLING=NO
RESIZE=NO></FRAME>
<FRAME SRC=page3.html SCROLLING=N0
RESIZ=NO ></FRAME>
</HEAD>
</BODY>
</HTML>

42

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
the form which we are going to create in our HTML script. This tag has two
attributes. METHOD and ACTION.

43

Web Designing Book (HTML & DHTML)

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.
Maxlength: Sets the maximum number of characters that can be entered in
to the text field.
44

Web Designing Book (HTML & DHTML)

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
the web server for more processing. However, more and more forms are

45

Web Designing Book (HTML & DHTML)

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

46

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.

47

Web Designing Book (HTML & DHTML)

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

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


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

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


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

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


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

48

Web Designing Book (HTML & DHTML)

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


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

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


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

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


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

49

Web Designing Book (HTML & DHTML)

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

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


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

50

Web Designing Book (HTML & DHTML)

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

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


<HTML>
<BODY>
<FORM>
<INPUT TYPE=RADIO NAME=SEX />Male<BR>
<INPUT TYPE=RADIO NAME=SEX/>Female<BR>
</FORM>
</BODY>
<HTML>
36. Write a program to create a Text area on the Webpage.
<HTML>
<BODY>
<FORM>
<TEXTAREA ROWS=5 COLS=20>
</TEXTAREA>
</FORM>
</BODY>
</HTML>
51

Web Designing Book (HTML & DHTML)

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


<HTML>
<BODY>
<FORM>
<SELECT>
<OPTION VALUE=1>Tea</OPTION>
<OPTION VALUE=1>Cofee</OPTION>
<OPTION VALUE=1>Cold drink</OPTION>
</SELECT>
</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>Cofee</OPTION>
<OPTION VALUE=1 SELECTED>
Cold drink</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>

52

Web Designing Book (HTML & DHTML)

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


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

53

Web Designing Book (HTML & DHTML)

DHTML
Introduction
3.1 DHTML (Dynamic Hypertext Mark-up Language):
First impression:

Did the initial page grab the attention?

Interface Design: Is the menu interface interactive enough and visually


interesting.
Corporate Mildew: Is the site trapped in a web of corporate look, feel &
canned marketing speak?
Coriolis Effect:

Does the site generate enough current of interest based


on design & content for user to come back?

The above points emphasize the requirements of a good web site.


DHTML is a new and emerging technology that has evolved to meet
the increasing demand for eye-catching and mind-catching web sites.
DHTML combines HTML with cascading Style Sheets (CSS) and
scripting Languages. HTML specifies a web pages element like table, frame,
paragraph, bullet list, etc. Cascading Style Sheets can be used to determine
an elements size, color, position, and a number of features. Scripting
Language (Java script & VB script) can be used to manipulate the web
pages element so that style assigned to them can be change in response to
users input.
54

Web Designing Book (HTML & DHTML)

3.2 Cascaded Style Sheets:


Style sheets are powerful mechanism for adding styles (e.g. fonts,
colors, spacing) to web documents. They enforce standards and uniformity
throughout a web site and provide numerous attributes to create dynamic
effects. With style sheets, text and image formatting properties can be
predefined in a single list. HTML elements on a web page can then be bound
to the style sheet. The advantages of a Style Sheet include the ability to
make global changes to all documents from a single location. Style Sheets
are said to Cascade when they combine to specify the appearance of a page.
The

style

assignment

process

is

accomplished

with

the

<STYLE>...</STYLE> Tags. The syntax for making the assignment is simple.


Between the <STYLE>....</STYLE> HTML tags, specific style attributes are
listed. The <STYLE> </STYLE> tags are written in <HEAD>....</HEAD>tags.
Syntax:
<STYLE TYPE=text/css>
Tag {attribute: value;
attribute: Value ;....}
.
.
</STYLE>
55

Web Designing Book (HTML & DHTML)

The attribute that can be specified to the <STYLE> tags are font
Attributes, color and Background Attributes, Text Attributes, Border
Attribute, Margin Attributes and List Attributes.
3.2.1 Font Attributes:
Attributes
font-family
Font-style

Values
A

comma-delimited

sequence

of

font

family

names(serif, sans-serif, cursive)


Normal, italic or oblique
Normal, bold, bolder, lighter, or one of the nine

Font-weight

numerical values (100, 200, 300, 400, 500, 600, 700,


800, 900)
A term that donates absolute size(xx-small, x-small,

Font-size

small, medium, large, x-large, xx-large), relative size


(larger, smaller) a number(of pixels), percentage(of
the parent elements size)

3.2.2 Color and Background Attribute:


Attributes
Color
Background-color
Background-image

Values
Set an elements text color
A color name or a color code
Specifies the color in an elements background.
A color name or a color code.
Set the background image
A URL or none.
With a background image specified, set up how the

Background-repeat

image repeats through the page.


Repeat-x (repeats horizontally), repeat-y (repeats
56

Web Designing Book (HTML & DHTML)

vertically), repeat(both), no-repeat

3.2.3Text Attributes:
Attributes
Text-decoration

Values
Adds decoration to an elements text
None, underline, overline, line-through, blink
Determines an elements vertical position

Vertical-align

Baseline, sub, super, top, text-top, middle, bottom,


text-bottom, also percentage of the elements height
Applies a transformation to the text

Text-transform

Capitalization(puts

the

text

into

initial

caps),

uppercase, lowercase, or none


Text-align

Text-intent

Aligns text within an element


Left, right, center, or justify
Indents the first an element
A percentage of the elements width, or a length

3.2.4 Border Attributes:


Attributes

Values

Border-style

Solid, double, groove, ridge, inset, outset

Border-color

A color name or color code

Border-width

Thin, medium, thick or length

Border-top-width

Thin, medium, thick or length

Border-bottom-width

Thin, medium, thick or length

Border-left-width

Thin, medium, thick or length

Border-right-width

Thin, medium, thick or length


57

Web Designing Book (HTML & DHTML)

Border-top

Specifies width, color & Style

Border-bottom

Specifies width, color & Style

Border-left

Specifies width, color & Style

Border-right

Specifies width, color & Style

Border

Set all the properties at once

3.2.5 Margin Related Attributes:


Attributes

Values

Margin-top

Percentage, length or auto

Margin-bottom

Percentage, length or auto

Margin-left

Percentage, length or auto

Margin-right

Percentage, length or auto

Margin

Percentage, length or auto

3.3 Class:
The control over page design that style sheet gives is exciting, but
can be heavy handled. Its great to be able to change every paragraph, but
what if only one paragraph, or a few paragraphs need to be changed?
A particular paragraph may to look different from other paragraphs;
its probably because the content of the paragraph is in some way different
from the other paragraph on the page. Think of a question and answer page.
Question in bold, while the answer are in plain text. The appearance of a
paragraph is a function of the content of the paragraph.

58

Web Designing Book (HTML & DHTML)

Style sheet support classes or sets of style changes for a document. A


class can be defined to change the style in a specific way for any element is
applied to, and classes can be used to identify logical sets of style changes
that might be different for different HTML elements. The style changes can
be applied directly to each HTML element or applied to part of a document
with the <SPAN>...</SPAN> tags. If any element is member of a class by
inserting class= className into its opening tab, it conforms to that classs
specification.
3.3.1 <SPAN> Tag:
Span is an HTML element that plays a prominent role in style sheets.
In the body of the document, <SPAN>...</SPAN> is used to set the
boundaries of the rules styling specifications.

3.4 EXTERNAL STYLE SHEETS:


External Style Sheets are composed of Standard text, which consists of a
series of entries, each composed of a selector and a declaration. The
selector indicates the HTML elements affected by the properties in the
direction. These external style sheets are then saved as a file with the
extension .css, which can be linked, to a web page via the <LINK> tag.
<LINK REL= stylesheet HREF=Stylesheet file name>

59

Web Designing Book (HTML & DHTML)

41. Write a HTML program to create CSS Style for the <P> tag.
<HTML>
<HEAD>
<STYLE TYPE=TEXT/CSS>
P
{
Font-family : verdana;
Color : pink;
}
</STYLE>
</HEAD>
<BODY>
<P> THIS IS FIRST LINE<BR>
THIS IS SECOND LINE</P>
</BODY>
</HTML>

42. Write a program to change font name, font size & color of <H1> tag.
<HTML>
<HEAD>
<STYLE TYPE=TEXT/CSS>
H1
{
Font-family : verdana, arial, courier;
Font-size : 20px;
Color : cyan;
}
</STYLE>
</HEAD>
<BODY>
<H1> THIS IS FIRST LINE<BR>
THIS IS SECOND LINE</H1>
</BODY>
</HTML>

60

Web Designing Book (HTML & DHTML)

43. Write a program to change font name, font size, font weight, color of
<H2> tag.
<HTML>
<HEAD>
<STYLE TYPE=TEXT/CSS>
H2
{
Font-family : verdana, arial, courier;
Font-size : 20px;
Color : cyan;
Font-weight : bold;
}
</STYLE>
</HEAD>
<BODY>
<H2> THIS IS FIRST LINE<BR>
THIS IS SECOND LINE</H2>
</BODY>
</HTML>

44. Write a program to change cursor of marquee tag.


<HTML>
<HEAD>
<STYLE TYPE=TEXT/CSS>
MARQUEE
{
Cursor : hand;
}
</STYLE>
</HEAD>
<BODY>
<MARQUEE> WELCOME</MARQUEE>
</BODY>
</HTML>

61

Web Designing Book (HTML & DHTML)

45. Write a program to change the background color & text color of <P> tag.
<HTML>
<HEAD>
<STYLE TYPE=TEXT/CSS>
P
{
Background-color: #000000;
Color :#ffffff;
}
</STYLE>
</HEAD>
<BODY>
<P> THIS IS FIRST LINE<BR>
THIS IS SECOND LINE</P>
</BODY>
</HTML>
46. Write a program to change font-family, font-size, color, backgroundcolor of <TD> tag.
<HTML>
<HEAD>
<STYLE TYPE=TEXT/CSS>
TD
{
Font-family : verdana, arial;
Font-size : 12px;
Background-color : #00ff00;
Color : #ffff00;
}
</STYLE>
</HEAD>
<BODY>
<TABLE BORDER>
<TR>
<TD>ONE</TD>
<TD>TWO</TD>
</TR>
</TABLE>
</BODY>
</HTML>

62

Web Designing Book (HTML & DHTML)

47. Write a program to set border style of <P> tag.


<HTML>
<HEAD>
<STYLE TYPE=TEXT/CSS>
P
{
Border-Style : solid;
Border-left : 2px;
Border-right : 2px;
Border-top: 2px;
Border-bottom : 2px;
}
</STYLE>
</HEAD>
<BODY>
<P> THIS IS FIRST LINE<BR>
THIS IS SECOND LINE<BR>
THIS IS THIRD LINE</P>
</BODY>
</HTML>
48. Write a program to set margin style of <P> tag.
<HTML>
<HEAD>
<STYLE TYPE=TEXT/CSS>
P
{
margin-left : 20px;
margin-right : 40px;
margin-top: 30px;
margin-bottom : 30px;
}
</STYLE>
</HEAD>
<BODY>
<P> THIS IS FIRST LINE<BR>
THIS IS SECOND LINE<BR>
THIS IS THIRD LINE</P>
</BODY>
</HTML>

63

Web Designing Book (HTML & DHTML)

49. Write a program to create a class using css & apply it in <img> tag.
<HTML>
<HEAD>
<STYLE TYPE=TEXT/CSS>
.MY {
Border-Style : solid;
Border-left : 2px;
Border-right : 2px;
Border-top: 2px;
Border-bottom : 2px;
margin-left : 20px;
margin-right : 40px;
margin-top: 30px;
margin-bottom : 30px;
background-color : cyan;
cursor: hand;
}
</STYLE>
</HEAD>
<BODY>
<IMG SRC=IMAGE1.JPG WIDTH=200 HEIGHT=200><BR>
<IMG CLASS=MY SRC=IMAGE1.JPG WIDTH=200 HEIGHT=200>
</BODY>
</HTML>

50. Write a program to create a class using css & apply it in <TD> tag.
<HTML>
<HEAD>
<STYLE TYPE=TEXT/CSS>
.MY {
background-image : url(../image.jpg);
background-repeat: repeat;
}
</STYLE>
</HEAD>

64

Web Designing Book (HTML & DHTML)

<BODY>
<TABLE BORDER>
<TR>
<TD CLASS=MY>ONE</TD>
<TD CLASS=MY>TWO</TD>
<TR>
</TABLE>
</BODY>
</HTML>

51. Write a program to create a class using css & apply it in <P> tag.
& use <SPAN> tag also.
<HTML>
<HEAD>
<STYLE TYPE=TEXT/CSS>
.MYTEXT
{
Font-family : verdana;
Font-size : 12px;
}
.BOLD

{
Font-color : GRAY ;
Text-decoration : underline;
Font-style : italic;
}

</STYLE>
</HEAD>
<BODY>
<P CLASS=MYTEXT>THIS BOOK IS PUBLISHED BY
<SPAN CLASS=BOLD>TATA MC-GRAWHILL</SPAN>
SECOND EDITION 2008 </P>
</BODY>
</HTML>

65

Web Designing Book (HTML & DHTML)

52. Write a program to create an user define border style in a css file & link
the css file & link the css file with html page.
Css file : mySetting.css
.MYBORDER {
Border-Style : solid;
Border-color : cyan;
Border-left : 2px;
Border-right : 2px;
Border-top: 2px;
Border-bottom : 2px;
}

Html file: page1.html


<HTML>
</HEAD>
<LINK REL=STYLESHEET HREF=MYSETTING.CSS
TYPE=TEXT/CSS></LINK>
</HEAD>
<BODY>
<IMG CLASS=MY SRC=IMAGE1.JPG WIDTH=200 HEIGHT=200>
</BODY>
</HTML>

66

Vous aimerez peut-être aussi