ifcTION -III: Dynamic Hyper Text Markup
_,,, Language
. oYNAMIC HTML
12 Did the initial page grab attention?
first Jmpressi_on - Is the menu int~rface interactive enough and visually interesting'?
1,,,erJace Design ls the site trapped in a web of corporate look, feel and cannerl marketing speak?
Corporate Mildew - Does the site generate enough currents of interest based on design and content for
Coriolis Effect the user to comeback?
The above points emphasize the requirements of a good web site.
DHTML is a new and emerging technology that has evolved lo meet the increasing demand for eye-
catching and mind-catching web sites.
DHTML combines HTML with Cascading Style Sheets (CSSs) and Scripting Languages. HTrv!L specifies
aweb page's elements like table, frame, paragraph, bulleted list, etc. Cascading Style Sheets can be used to /
determine an element's size, color, position and a number of other features. Scripting Languages
(Ja,aScript and VBScript) can be used to manipulate the web page's elements so that styles assigned lo
them can change in response to a user's input.
CASCADING STYLE SHEETS
~le Sheets are powerful mechanism for adding styles (e.g. fonts, colors, spacing) to Web documents.
d ey e_nforce standards and uniformity throughout a web site and provide numerous attributes to create
J;~~c effects. With Style Sheets, text and image formatting properties can be predefined in a single list.
i elements on a web page can then be bound to the style sheet. The advantages of a Style Sheet
t Iudes the ability to make o\obal changes to all documents from a single location. Style Sheets are said to
ascade wh en they combineoto specify the appearance of a page.
The ·
Style assignment . the <STYLE> ...</STYL E> tags. Tl,e s) · t'01·
· ·ntax
rnak· process is accomplished with
ingthe · TM ·t- I 'b t
•~ h,t d assignment is simple. Between the <STYLE>...</STYLE> H L tags. spw ic sty e attn u es
. e . The <STYLE>... </STYLE> tags are written within the <HEAD>... </HEAD> tags.
Syntax:
<STYLE
t Type="text/css">
ag {attribute:value; attribute:value ... }
</STVLE>
~- ~~iiiiiiiiiiiiiii.iiiiii____.ijiiii
In the <STYLE> t
CSS
h
ag, t e exp! ess1on
iiiiiiiiijiiiiiiiiiiii~~~~~~~~
. . "Tvpe == text/css"
.1
indicates that the style sheet conforms to
syntax
, PAGE 214 CWAD USING HTML, JAVASCRIPT, DHTML AND PHP
The attributes that can be specified to the <STYLE> tag are Font Attributes. Color and 8
Attributes. Text Attributes. Border Attributes, Margin Attributes and List Attributes. ac
Font Attributes
Attributes Values
font-famih A comma-delimited sequence of font family names (serif, sans-serif, cursi\eJ ---------.
font-st, le Normal, italic or oblique
font-\\ eight Normal. bold, bolder, lighter, or one of the nine numerical \ alues (J 00, 200, 300, 400 .
600. 700.800,900) y
font-size A term that denotes absolute size (xx-small, x-small, small, medium, large. x-larze
large). relative size (larger. smaller). a number (of pixels), percentage (of the ~pa,
element's size)
Table 12.1
Use Of Font Attributes
Example l: (Refer to diagram 12. I)
<HTML>
<HEAD><TITLE> Working with . Silicon Chip Technologies
St) le Sheets using Font
Anributes < TITLE> . Thew=nof ,;,p
<STYLE Type= "text/css''> al · ,:.eir ✓--fi ' •
HI {font-family:arial, helvetica}
P.ecrw. r«.2 'ne
•
P{font-size: I2pt; font-style: italic}
</STYLE>< HEAD>
<BODY>
<Hl>Silicon Chip
Technologies<Hl>
<P>Silicon Chip Technologies. a Diagram 12.1
private limited company. was
founded in December 1989.
<P>The vision of this company is to provide any corporate client a single entit~ \\ hich addr,~:),.._
all their Software De\elopment. Technical and User Documentation. Training and \1anPo"·
Recruitment needs.
I ,..,/HTML>
'-· ____________________________________,
/ BODY>
·
Color And Background Attributes
Attributes Values
color Sets an element's text-color. A color name or a color code
b:~·~k---;---;--t::S~e~ci~fi:--es--:-th.:.:.e.:..:.c.:.:.o-;-lo..:..r~in:.:..a-=.n.::.:e:.::l:..:.em...:.:...:en::.:t::.:.'s:::.:b_:a:.:::ck::::g~ro:...:u~n~d~.:.'.A~c~o'.._lo~r~n~a-n_e_o_r_a_c_o_lo-,-c-o-:de-
1
back Sets the background image. A l,RL or none
background-repeat With a background image specified. set:, up hO\\ the ,ma!!e repeat, rhroL ghout
page. repeat-x(repeats horizontall: ). repl'at-v(repeat:, ~ ert1call\ ). 1 £ ix,
------~n..:..o:...-. :..:re:i.:.J:.:.e=.: at~-----;:~-:--:-: --:-----------~
Table 12.2
_,,, Language
. oYNAMIC HTML
12 Did the initial page grab attention?
first Jmpressi_on - Is the menu int~rface interactive enough and visually interesting'?
1,,,erJace Design ls the site trapped in a web of corporate look, feel and cannerl marketing speak?
Corporate Mildew - Does the site generate enough currents of interest based on design and content for
Coriolis Effect the user to comeback?
The above points emphasize the requirements of a good web site.
DHTML is a new and emerging technology that has evolved lo meet the increasing demand for eye-
catching and mind-catching web sites.
DHTML combines HTML with Cascading Style Sheets (CSSs) and Scripting Languages. HTrv!L specifies
aweb page's elements like table, frame, paragraph, bulleted list, etc. Cascading Style Sheets can be used to /
determine an element's size, color, position and a number of other features. Scripting Languages
(Ja,aScript and VBScript) can be used to manipulate the web page's elements so that styles assigned lo
them can change in response to a user's input.
CASCADING STYLE SHEETS
~le Sheets are powerful mechanism for adding styles (e.g. fonts, colors, spacing) to Web documents.
d ey e_nforce standards and uniformity throughout a web site and provide numerous attributes to create
J;~~c effects. With Style Sheets, text and image formatting properties can be predefined in a single list.
i elements on a web page can then be bound to the style sheet. The advantages of a Style Sheet
t Iudes the ability to make o\obal changes to all documents from a single location. Style Sheets are said to
ascade wh en they combineoto specify the appearance of a page.
The ·
Style assignment . the <STYLE> ...</STYL E> tags. Tl,e s) · t'01·
· ·ntax
rnak· process is accomplished with
ingthe · TM ·t- I 'b t
•~ h,t d assignment is simple. Between the <STYLE>...</STYLE> H L tags. spw ic sty e attn u es
. e . The <STYLE>... </STYLE> tags are written within the <HEAD>... </HEAD> tags.
Syntax:
<STYLE
t Type="text/css">
ag {attribute:value; attribute:value ... }
</STVLE>
~- ~~iiiiiiiiiiiiiii.iiiiii____.ijiiii
In the <STYLE> t
CSS
h
ag, t e exp! ess1on
iiiiiiiiijiiiiiiiiiiii~~~~~~~~
. . "Tvpe == text/css"
.1
indicates that the style sheet conforms to
syntax
, PAGE 214 CWAD USING HTML, JAVASCRIPT, DHTML AND PHP
The attributes that can be specified to the <STYLE> tag are Font Attributes. Color and 8
Attributes. Text Attributes. Border Attributes, Margin Attributes and List Attributes. ac
Font Attributes
Attributes Values
font-famih A comma-delimited sequence of font family names (serif, sans-serif, cursi\eJ ---------.
font-st, le Normal, italic or oblique
font-\\ eight Normal. bold, bolder, lighter, or one of the nine numerical \ alues (J 00, 200, 300, 400 .
600. 700.800,900) y
font-size A term that denotes absolute size (xx-small, x-small, small, medium, large. x-larze
large). relative size (larger. smaller). a number (of pixels), percentage (of the ~pa,
element's size)
Table 12.1
Use Of Font Attributes
Example l: (Refer to diagram 12. I)
<HTML>
<HEAD><TITLE> Working with . Silicon Chip Technologies
St) le Sheets using Font
Anributes < TITLE> . Thew=nof ,;,p
<STYLE Type= "text/css''> al · ,:.eir ✓--fi ' •
HI {font-family:arial, helvetica}
P.ecrw. r«.2 'ne
•
P{font-size: I2pt; font-style: italic}
</STYLE>< HEAD>
<BODY>
<Hl>Silicon Chip
Technologies<Hl>
<P>Silicon Chip Technologies. a Diagram 12.1
private limited company. was
founded in December 1989.
<P>The vision of this company is to provide any corporate client a single entit~ \\ hich addr,~:),.._
all their Software De\elopment. Technical and User Documentation. Training and \1anPo"·
Recruitment needs.
I ,..,/HTML>
'-· ____________________________________,
/ BODY>
·
Color And Background Attributes
Attributes Values
color Sets an element's text-color. A color name or a color code
b:~·~k---;---;--t::S~e~ci~fi:--es--:-th.:.:.e.:..:.c.:.:.o-;-lo..:..r~in:.:..a-=.n.::.:e:.::l:..:.em...:.:...:en::.:t::.:.'s:::.:b_:a:.:::ck::::g~ro:...:u~n~d~.:.'.A~c~o'.._lo~r~n~a-n_e_o_r_a_c_o_lo-,-c-o-:de-
1
back Sets the background image. A l,RL or none
background-repeat With a background image specified. set:, up hO\\ the ,ma!!e repeat, rhroL ghout
page. repeat-x(repeats horizontall: ). repl'at-v(repeat:, ~ ert1call\ ). 1 £ ix,
------~n..:..o:...-. :..:re:i.:.J:.:.e=.: at~-----;:~-:--:-: --:-----------~
Table 12.2
