Académique Documents
Professionnel Documents
Culture Documents
DESIGNING
BOOK
[HTML & DHTML]
ANIKET MAHAKALKAR
CONTENTS
1.0
1-4
1.1
Properties of HTML
1.2
HTML Elements
1.3
1.4
2.0
HTML TAGS
5-51
2.1
Study of Tags
2.2
2.3
15
2.4
17
2.5
18
2.6
20
2.7
26
2.8
35
2.9
41
3.0
52-64
3.1
Introduction
52
3.2
53
3.3
Class
56
3.4
57
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.
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.
2. Empty element:
Empty element does not have closing tag. It does not contain
any text.
e.g. <BR>
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.
<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.
<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.
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>
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>
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>
10
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>
11
<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
<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
13
<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
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
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%>
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>
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
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.
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
Width: This attribute specify width of marquee area. This value can be
specified either in pixel or as percentage of screen.
18
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
<IMG>Tag:
The image tag incorporate graphics into HTML document. Image tag is an
empty tag. The image tag has following attributes.
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
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>
21
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>
22
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.
23
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
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
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.
26
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.
CPU
The control processing unit
27
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.
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
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
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:
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.
<th colspan=3>
<td rowspan=3>
30
<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
<TD>G</TD>
<TD>H<TD>
</TR>
</TABLE>
</BODY>
</HTML>
<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
<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
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
<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
<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
37
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
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
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
<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
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
43
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.
45
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.
46
<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
48
49
50
52
53
DHTML
Introduction
3.1 DHTML (Dynamic Hypertext Mark-up Language):
First impression:
style
assignment
process
is
accomplished
with
the
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
Font-weight
Font-size
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
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
Text-transform
Capitalization(puts
the
text
into
initial
caps),
Text-intent
Values
Border-style
Border-color
Border-width
Border-top-width
Border-bottom-width
Border-left-width
Border-right-width
Border-top
Border-bottom
Border-left
Border-right
Border
Values
Margin-top
Margin-bottom
Margin-left
Margin-right
Margin
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
59
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
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>
61
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
63
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
<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
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;
}
66