Web Technology

MC404 WEB TECHNOLOGY 3 0 0 100

UNIT I
Web Publishing: A Melding of Technologies Setting up an Extensible Web Publishing
FrameWor!" The Web Publishing Foundation: The function of #TM$ in contemporary
Web Publishing %asic Structural Elements and their usage Traditional text and
formatting Style Sheets Formatting for the future &sing tables for 'rgani(ation and
layouts Ad)anced layout and Positioning *ith style sheets +reating forms *ith
#TM$ Frames and Frame sets using ,mages *ith #TM$ Merging Multimedia-
+ontrols and plug ,ns *ith #TM$"
UNIT II
+lient Side Scripting: Scripting basics +lient Side ,mage Maps ,ntroduction .a)a
Script +reating simple .a)a Scripts &sing .a)a script for forms using .a)a Script
*ith Style Sheets"
UNIT III
Web Publishing With .a)a: W#/ .a)a The .a)a $anguage 0 ,ntroduction to Applet
Programming .a)a %eans .A1S and Safe +omputing ,ntegrating .a)a and .a)a
Script"
UNIT IV
+2, and +ontrolling the Web from the Ser)er: Putting your ser)er to *or! Traditional
+2, programming The Anatomy of a +2, Application Ser)er Specific Technologies
3etscape '3E 4s Microsoft Windo*s 53A Serious Applications for serious Web
Publishing Ser)er ,ndependent Technologies The .A4A Ser)let AP," 6
UNIT V
Engineering A Web Set: &sing the #TM$ 'b7ect Model and +reating 5ynamic #TM$
Pages Manipulating 'b7ects and 1esponding to user ,nteraction Sa)ing &ser
Preferences: +oo!ies and 'ps" Emerging and Alternate Web Technologies: Acti)e08
controls for the ***08M$"
REFERENCES
9" Shelley Po*ers et"al" :5ynamic Web Publishing;- Tech Media- 966<"
=" Achyat"S"2odbole and Atul >ahate- :Web Technologies;- Tata Mc2ra* #ill Pub"
+o"-
5elhi- =??@"
9
Web Technology
UNIT I
CONTENTS
Part I Web Publ!"#$
1% & Mel'#$ () Te*"#(l($e!
About the ,nternet
A Short #istory of #TM$
+omponent Soft*are and the Web
Multimedia Tools
#elper Applications
Electronic Publishing
+% Sett#$ u, a# E-te#!ble Web Publ!"#$ Fra.e/(r0
What is the World Wide Web +onsortium AW@+B
A Cuic! 1e)ie* of Mar!up +oncepts
5esign concepts &nderlying #TM$ D"?
Part II T"e Web Publ!"#$ F(u#'at(#
3% T"e Fu#*t(# () HTML # C(#te.,(rar1 Web Publ!"#$
The WebEs 5efining Frame*or!
Tags and Elements in #TM$
4% Ba!* Stru*tural Ele.e#t! a#' t"er u!a$e
The 5'+T/PE Element
The #TM$ Element
The #EA5 Element
The %'5/ Element
2% Tra't(#al te-t a#' )(r.att#$
5eprecated and 'bsolete Elements
Text $ayout
$ists
=
Web Technology
Text Styles
The F'3T and %ASEF'3T Elements
3% St1le S"eet! F(r.att#$ )(r t"e )uture
+SS9 standard
,ncluding Style Sheets
Applying styles to specific groups of Elements
+reating an o)erall loo! for the *eb page
Modifying Font and Text appearance
+reating %orders Around Elements
+ontrolling the Appearance of $ists and other #TM$ elements
4% U!#$ Table! )(r Or$a#5at(# a#' la1(ut!
What are the #TM$ Table Elements
+ombining the &se of #TM$ Tables and +SS9 Style Sheets
&sing an #TM$ Table to create a $ayout for $in!s
+reating Page +olumns *ith a Table
+ontrolling a Form $ayout *ith a Table
6% &'7a#*e' La1(ut a#' P(!t(##$ /t" !t1le !"eet!
+SS positioning attributes
Positioning images and other elements
+reating page columns and using html Tables and +SS positioning together
+on)erting an Existing Table %ased Web Page
8% Creat#$ )(r.! /t" HTML
What are #tml Forms
The %utton Element
+reating a Selection $ist
Adding 1adio %uttons and +hec! %oxes to a Web Page
&ploading files *ith fileupload
Accessing Text *ith the Text +ontrols
+reating ,nterpage Persistance *ith the hidden element
Submitting and 1esetting the Form *ith submit and reset
@
Web Technology
Wor!ing *ith the ne* #TM$ D"? Form Elements and Extensions
10% Fra.e! a#' Fra.e !et!
+reating and Wor!ing *ith Frames
Accessing External 1eferences from Frames
,nline Frames *ith ,Frame
11% U!#$ I.a$e! /t" HTML
Embedding images *ithin an #tml 5ocument
The image ob7ect and accessing ,mages *ithin Script
,mages and +aching
+reating ,mage 1ollo)er Effects
1+% Mer$#$ Mult.e'a9 C(#tr(l! a#' ,lu$ : I#! /t" HTML
Accessing sound and )ideo in *eb pages
&sing the FembedG tag
3etscapeEs $i)eAudio Plug0,n
The Fob7ectG tag and the future
When and *hen not to use Multimedia
D
Web Technology
1% & Mel'#$ () Te*"#(l($e!
&b(ut t"e I#ter#et
A net*or! of net*or! is called internet" The internet is used to perform the follo*ing
types of tas!s:
Electronic Mail
1esearch
5iscussion
,nteracti)e 2ames
& !"(rt "!t(r1 () HTML
The secret of the internet is the separation of the act of transmission of data from
the display of data" %y separating the processes- transmission could be greatly
speeded because the ser)er did not ha)e to *orry about ho* the data loo!ed at
the other end- since the display *as left to the local recei)ing computer"
The information alongside the data Acalled tagsB tells the recei)ing computer
ho* to display different types of information" These coding methods- called
mar!up languages- tra)el *ith data and are interpreted by the retrie)ing soft*are"
+odes to tell the computer ho* to interpret hypertext documents are called
#ypertext Mar!up $anguage"
#TM$ became the standard *ay to tag pages of information tra)eling o)er the
internet"
Br(/!er! a#' t"e Web
The *eb is simply a *ay of loo!ing at the internet" This )ast net*or! consists of
computers that manage data and the communication lin!s )ia soft*are and
hard*are called ser)er"
Web ser)ers recei)e reHuests for information- go out and find it in t heir
databases- and return the proper pages of data to the reHuesting computer"
I
Web Technology
%ro*sers assisted users in finding information on the *eb and properly
displaying it on computer screens"
#ypertext Transfer Protocol A#TTPB *as de)eloped as a *ay to find information
and retrie)e it o)er telephone lines"
C(.,(#e#t S()t/are a#' t"e Web
+omponents are small programs that can be fit together to form a modular-
customi(ed application in real time" +omponents can be *ritten in cross platform
languages and rapidly complied to *or! on many platforms"
Microsoft depends on the 5istributed +omponent 'b7ect Model A5+'MB
*hereas 3etscape- Apple- ,%M and Sun ha)e agreed upon the +ommon 'b7ect
1eHuest %ro!er Architecture A+'1%AB"
;a7a a#' ;a7aS*r,t
The hottest thing to hit the *eb is the programming language .a)a- *hich Sun
Microsystems introduced to ma!e programs portable"
3etscape created a lighter )ersion of .a)a- *hich lets users customi(e their
bro*sers and create a more interacti)e en)ironment on the *eb" This capability
is called Web0deli)ered scripting- *hich enables you to execute programs *ithin
a bro*ser"
The scripting language based on .a)a is called .a)aScript" .a)a and .a)aScript
pro)ide *eb pages *ith the capability to interact *ith the user"
&*t7e<
Acti)e8 is a set of technologies that lets you create more interacti)e *eb pages" Acti)e8
technologies pro)ide support for programs on both the client and ser)er sides" There are
se)eral Acti)e8 components used to perform different functions"
Acti)e8 +ontrols These are applets that function as ob7ects you can embed in
your #TM$ that pro)ide interacti)e and user controllable functions"
Acti)e8 5ocuments $et you )ie* non0#TM$ documents through a *eb
bro*ser"
J
Web Technology
Acti)e Scripting $ets you integrate the functions of se)eral Acti)e8 controls or
.a)a applets from the bro*ser or ser)er"
Acti)e8 Ser)er Frame*or! Pro)ides *eb ser)er functions such as security-
database access- and others to *eb pages"
Mult.e'a T((l!
We are standing on the edge of the ability to broadcast on0demand )ideo and
)ideo o)er the *eb- such as li)e e)ent" ,n addition- *or!ing in three dimensions in real
time motion A+alled )irtual realityB opens up ne* )istas"
=ataba!e! )(r Mult.e'a
Multimedia databases such as ,llustra ,nformation Technologies automatically
open information sent )ia email and store images- captions and text in separate
fields"
%ecause of gro*ing si(e and number of #TM$ pages- and audio)ideo files that
ma!e up a site- you need databases to manage the storage and use of multimedia
items"
There four types of databases a)ailable for managing *eb sites: traditional
relational databases such as 'racleK ob7ect oriented databases such as
'b7ectstoreK relational0ob7ect hybrid databases such as ,llustraK and specialty
databases such as +inebase"
'racle no* supports multimedia storage )ia its ne* &ni)ersal Ser)er
Enterprise Edition- *hich includes 'racle Spatial 5ata option for storage and
retrie)al of images- the +onText option for full text retrie)al through SC$- and
'racle 4ideo option- *hich ser)es )ideo files to multiple clients"
'b7ect oriented databases are useful for storing images- )ideo and audio because
they use an ob7ect model rather than a tabular model in t he database design" An
ob7ect can be anything"
L
Web Technology
#ybrid mixtures of ob7ect0oriented and relational databases use the benefits of
tabular data and ob7ect0based data"
Specialty databases are built for single purpose- such as Media0'n05emand"
&u'( Br(a'*a!t#$
'ne of the exciting ne* technologies coming out of multimedia de)elopers
*or!shops is the bro*ser capability to play sound data as it is recei)ed" This
technology is based on a data type called M,ME- *here the computer sends the
data pac!et first so that the bro*ser can interpret information as it comes
screaming do*n the *ire"
The problem today is that telecommunications lines are not screaming- but
sputtering 0 there is no such thing as a continuous- error0free flo* of data" So
you ha)e to install a plug0in that buffers some of the information so that lost or
delayed data can be accommodated"
3etscape pro)ide the follo*ing plug0in players"
+rescendo Plus by $i)e&pdate"
,nter4& MPE2 Player by ,nter)u- ,nc"
>oan by Sseyo"
Mac(illa by !no*ledge engineering"
MidPlug by /amaha"
1ealAudio by Progressi)e net*or!s"
StreamWor!s by 8ing Technology"
=$tal V'e(
There are t*o )ideo compression formats )ying for po*er on the *eb:
Cuic!Time and MPE2"
5igital )ideo does not ha)e the picture Huality of broadcast )ideo because
personal computers cannot support the band*idth reHuired to transmit all the data
in)ol)ed"
5igital )ideo is also called animation because the images that comprise a
mo)ing picture are sent one0by0one in a single pass *ithout interlacing and at
half the number of frames per second as broadcast )ideo"
<
Web Technology
3etscape supports the follo*ing plug0ins for )ie*ing and creating digital )ideo
animations:
Action by 'pen=&"
+ineWeb by 5igigami"
+oolFusion by ,terated 5ata Systems"
,nter4& by ,nter4u- ,nc"
Mo)ieStar by ,ntelligence at large"
Cuic!Time for 3etscape by Apple +omputer"
4ie*Mo)ie by ,)an +a)ero %elaunde-
Hel,er &,,l*at(#!
A helper application is basically a program that cooperates *ith 3etscape and
other bro*sers to perform functions such as displaying the contents of files-
*hich the bro*sers cannot do"
Some of the helper applications are:
Mo)ie 4ie*ing A4, 4ideo player for *indo*s
MPE2 Animation )ie*ing 2hostscript
Ele*tr(#* Publ!"#$
,t is one thing to #TM$ to send pictures and text o)er telephone *ires to remote
computers *here a bro*ser interprets arcane codes to display a replica of *hat
*as broadcast"
,t is Huite another to be able to reproduce published documents *ith their
complex layouts- colors and art on a remote computer" The remote computer may
not ha)e the fonts installed that *ere used to produce the document" What is
needed is a *ay to ma!e documents electronically portable"
+% Sett#$ u, a# E-te#!ble Web Publ!"#$ Fra.e/(r0
The extensible means that the specification has to hold and support all of the ne*
technologies dri)ing the *eb"
W"at ! t"e W(rl' W'e Web C(#!(rtu. >W3C?@
6
Web Technology
W@+ *as founded to manage the e)olution of the World Wide Web and its
design components"
W@+ *as founded by combination of hard*are- soft*are- and content pro)iders
to ensure that the internet remains open- meaning that the *eb continues to be
interoperable and has not become the pro)ince of one ma7or pro)ider"
There are currently 9<? commercial and academic members *orld*ide" W@+
members include representati)es from hard*are and soft*are )endors-
telecommunication pro)iders- content de)elopers and go)ernment and academic
users of the internet"
H(/ ! t"e W3C Or$a#5e'@
The W@+ is organi(ed around three domains: &ser ,nterface- Technology and
Society- and Architecture"
The user interface group *or!s on issues dealing *ith *eb content and design"
The technology and society group *or!s on issues dealing *ith security- pri)acy-
copyrights- and intellectual property rights"
The architecture group *or!s on issues dealing *ith infrastructure"
Or$a#5at(# *"art )(r W3C


9?
Ad)isory
+ommittee
&ser ,nterface
5omain
Technology and
Society 5omain
Architecture
5omain
#TM$
Style Sheets
5ocument
'b7ect Model
Wor!ing 2roup
+oordiantion
2roup
Web Technology
W"at ! t"e Ht.l W(r0#$ Gr(u,@
The #tml *or!ing group is the current organi(ation *ithin W@+responsible for
de)eloping #tml specifications and standards"
& Au*0 re7e/ () Mar0u, C(#*e,t!
The goal of mar!up languages is to create a uni)ersal *ay to identify the
structure and content of a document"
S2M$ is the earliest specification for mar!up" S2M$ is based upon the use of a
special file called a 5ocument Type 5escription A5T5Bdocument" The 5T5
describes the structure of a document"
The documentEs basic frame*or! is defined- including types of elements used
and ho* these elements are related to each other"
The contents of a document are labeled *ith tags that identify the documentEs
structure" Each tag has a beginning and ending"
#TM$ *as de)eloped as a subset of S2M$ for handling hypertext lin!"
W"at ! HTML 4%0@
#tml D"? corrects design deficiencies produced by #tml @"=- especially in the
support of forms and tables"
+hanges bet*een #tml @"= and #tml D"?
9" 3e* elements and attributes 0 C- ,3S- %&TT'3- $A%E$- F,E$5SET
=" Modified elements and attributes 0 Table frame and rules attributes
99
Math
2raphics M @5
,nternationali(a
tion
Fonts
%ro*sers
Web Technology
@" 5eprecated Elements 0 applet- center- font- basefont- u
D" 'bsolete Elements 0 8MP- PlainText
5esign +oncepts &nderlying #tml D"?
#TM$ D"? is an extensible *eb frame*or! because it allo*s the specification to
gro* *ith the times"
The *or!ing group used the follo*ing concepts to ensure that their specifications
met that goal:
,nteroperability
,nternationali(ation
Accessibility
Enhanced tables
Style sheets
Scripting enabled
Maintain htmlEs ease of use
3% T"e Fu#*t(# () HTML # C(#te.,(rar1 Web Publ!"#$
#TM$ is a subset of S2M$- Standard 2enerali(ed Mar!up $anguage"
S2M$ is itself a rigorous format meant for designing other mar!up languages"
The basic concept behind #TM$ or any other mar!up languages is to embed
commands that describe ho* different elements *ithin a document should be
interpreted in that document"
T"e WebB! =e)##$ Fra.e/(r0
#TM$ pro)ides Web designers both a matrix and a mechanism"
As a matrix- its purpose is to the basic frame*or! in *hich content is embedded"
As a mechanism- it pro)ides *ays to specify the manner in *hich that content is
presented and- to a limited extent- allo*s )arious options for its functioning"
Paired *ith ne*er de)elopments of scripting languages and style sheets- the true
potential of #TM$ seems about to be fully reali(ed- and the World Wide Web to
really come into flo*er"
9=
Web Technology
Ta$! a#' Ele.e#t! # HTML
Tags are the main resources for #TM$ authors" They define the existence of all
the elements a *eb page contains" ,ndeed- they define the existence of the page
itself" Each element is said to be contained by tags"
When a *eb bro*ser or other client agent parses the #TM$ code in a *eb page-
it loo!s for these defining indicators to tell it ho* to process and display the
elements"
The code structure of elements is a start tag- follo*ed by the contents- if any- and
the end tag"
Most elements ha)e reHuired start and end tags- the function of *hich is to
delimit they beginning and ending of the element"
'ther elements ha)e reHuired start tags- but optional end tags" Still other
elements ha)e only a start tag and no end tag" Each element has its o*n
attributes"
The start of an #TM$ page is defined by the F#TM$G start tag and the end is
defined by F#TM$G tag" The #EA5 and %'5/ elements are *ithin that
#TM$ element"
The material bet*een F#EA5G F#EA5G tags is largely informational-
although this is also *here .a)aScript and style0connection information are
placed" The %'5/ element contains the ma7ority of the other elements"
The elements contained *ithin a Web PageEs body tags are many and )arious"
They include elements for controlling the insertion of images and sounds- tying
in .a)a applets and other ob7ects- setting the appearance and si(e of text- adding
tables and forms"
4% Ba!* Stru*tural Ele.e#t! a#' T"er U!a$e
There are four basic structural elements in #TM$"
The FN5'+T/PEG tag represents the 5ocument Type 5eclaration A5T5B- *hich
defines the )ersion of #TM$ used on the page"
9@
Web Technology
The next is the F#TM$G tag itself- *hich simply states that the page is an
#TM$ document"
The third is the #EA5 element- *hich contains the documentEs title and other
information"
Then there is the %'5/ element- *here the actual *eb page itself is contained"
& ba!* HTML ,a$eC
FN5'+T/PE #TM$ P&%$,+ :0W@+5T5 #TM$ D"? E3;G
F#TM$G
F#EA5G
FT,T$EG PA2E T,T$E 2'ES #E1E FT,T$EG
'PT,'3A$ META 5ATA 2'ES #E1E""
F#EA5G
F%'5/G
WE% PA2E 2'ES #E1EOO"
G%'5/G
F#TM$G
T"e D=OCTYPEE ele.e#t
,ts purpose is to declare to bro*sers exactly *hat )ersion of #TM$ *as used to
create the document" The general 5'+T/PE declaration for #TM$ D"? is
FN 5'+T/PE #TM$ P&%$,+ :0W@+5T5 #TM$ D"? E3;G
The reason for the E3 is that the #TM$ specification has not yet been de)eloped
in any language but English"
,f has not yet been de)eloped in any language but English"
,f you are replacing the %'5/ element *ith F1AMESET- you should use the
follo*ing 5T5"
FN 5'+T/PE #TM$ P&%$,+ :0W@+5T5 #TM$ D"? F1AMESET E3;G
There is another techniHue for supplying the 5'+T/PE declaration" This is
called the System ,dentifier 5T5" A System ,dentifier 5T5 is declared as
follo*s:
FN 5'+T/PE
9D
Web Technology
#TM$
S/STEM
:http: WWW"W@"'rg5T5#TM$ D 0 strict"dtd;G
The difference in this approach is that the 5T5 is referenced not by name- but by
specifying the &1$ *here it is found"
T"e HTML Ele.e#t
,t is the first and last thing in a *eb page- and its absence means that no *eb
bro*ser recogni(es your *or! as an #TM$ page"
#TM$ element must ha)e both start and end tags in order to function properly"
Thus- the document begins *ith F#TM$G and ends *ith F#TM$G"
The #TM$ start tag can ha)e three attributes" The first is )ersion- and it ta!es a
&1$ )alue" The &1$ points to a location that has the 5ocument Type 5efinition
A5T5B for the )ersion of #TM$ in use on that page"
The #TM$ start tag can also contain the lang and dir attributes- *hich
respecti)ely- establish the human language in *hich the *eb page is *ritten and
the direction of the printing"
F#TM$G tag might loo! li!e:
F#TM$ )ersion P http:***"*@"org5T5#TM$D0 strict"dtd langPen dirPrtlG
T"e HE&= Ele.e#t
The #EA5 element is a container for an #TM$ documentsE header information"
,t contains one reHuired element T,T$E and se)eral other optional attributes"
The #EA5 element has both start and end tags- beginning *ith F#EA5G and
ending *ith F#EA5G" A typical #EA5 element loo! li!e this:
F#EA5G
FT,T$EG My #ome Page FT,T$EG
F#EA5G
The text bet*een the T,T$E tags is displayed in the title bar of a )isitorEs *eb
bro*ser"
Meta=ata
9I
Web Technology
,n addition to the title- a head element can contain other elements !no*n as
metadata"
,t is data that is not sho*n to the person )ie*ing the page- but useful to user
agents and search engines"
The currently used elements in this category are:
%ase
$in!
Meta
Script
Style
T"e Ba!e Ele.e#t
The base element establishes a base url from *hich relati)e &1$s referenced in
the html document can be calculated" Example-
Fbase hrefPhttp:***"test"orgG
The result of this declaration is that any relati)e url in the html document is
appended to this base url to achie)e he full url"
Thus- the relati)e url index"html *ould be interpreted as
http:***"test"orgindex"html"
T"e L#0 Ele.e#t
,ts purpose is to establish relationships among different html documents" &sed
only in the head element"
$in! ta!es three main attributes in addition to href: rel- re) and title"
1el defines a for*ard relationship and re) defines a re)erse one"
Example-
Flin! re)P;pre)ious; hrefP;chapter9"html;
Flin! relP;next; hrefP;chapter@"html;G
The title attribute siply gi)es a title to the document referenced by the url"
$in! types are:
Alternate 0 Points to an optional replacement for the current document
Appendix 0 points to an appendix
9J
Web Technology
%oo!mar! 0 Points to a named anchor
+hapter Points to a chapter
+opyright 0 Points to a copyright statement
2lossary 0 Points to s glossary of terms
#elp 0 Points to a help document
,ndex 0 Points to an index
3ext 0 Points to the document that comes after the current one
Pre)ious 0 Points to the document that comes before the current one
Start 0 Points to the beginning document
T"e Meta Ele.e#t
When used *ith the name and content attributes- its main function is to establish
metadata )ariable information for use by *eb search agents"
For example-
Fmeta nameP;*t; contentP;*eb technology;G
T"e !*r,t a#' !t1le ele.e#t!
&sed for including script and style sheet into an html document"
T"e b('1 ele.e#t
The body element is *here the displayable *eb page is found"
A typical body in an html document loo!s li!e:
Fbody bac!groundP;bg"gif;textP;??????; lin!P;????FF;)lin!P;FF<+??;
alin!P;??????;G
Text- images- etc" are found hereO
FbodyG
2% Tra't(#al Te-t a#' F(r.att#$
=e,re*ate' a#' Ob!(lete Ele.e#t!
As #TM$ e)ol)es- the function of some elements is replaced or suppressed by
ne*er"
Some are still fully functional and useful- but can be done more economically or
efficiently"
9L
Web Technology
For example- both the F,M2G and FAPP$ETG tags still *or!- but both perform
similar tas!s embedding particular ob7ect in the #TM$ page"
A single F'%.E+TG element *ould be designed that *ould encompass all
possible embeddable ob7ects"
Thus- both F,M2G and FAPP$ETG are no* deprecated in fa)or of F'%.E+TG
tag"
When an element is deprecated- that means that the W@+ recommends that you
no longer use it- but use- the ne*er solution"
#o*e)er- deprecated elements are still a part of #TM$ specification- and still be
supported by bro*sers"
'bsolete elements- are no longer defined in the #TM$ specification- and W@+
does not reHuire that client agents support them"
Te-t La1(ut
There are = basic types of text affecting elements in html"
The first !ind performs text layout tas!s and the second affects textEs appearance"
T"e P Ele.e#t
The FpG tag is used to denote the beginning of a ne* paragraph"
Although the end tag FPG exists- its use is optional"
,f the end tag is not used- the beginning of the next bloc! le)el element is
interpreted as the end of the paragraph"
The align attribute is used to set the alignment of the paragraph *ith respect to
the page si(e" 4alues are $EFT- 1,2#T- +E3TE1 and .&ST,F/" Example: Fp
alignPQcenterQG
DPE ta$ E-a.,le
FP alignPleftG
This paragraph is $eft Aligned"
FPG
FP alignPcenterG
This paragraph is +entered"
FPG
9<
Web Technology
FP alignPrightG
This paragraph is 1ight Aligned"
FPG
FP alignP7ustifyG
This paragraph is 7ustified"
FPG
T"e BR Ele.e#t
The FbrG tag inserts a single line brea!"
The FbrG tag is an empty tag *hich means that it has no end tag"
When placed after images- the clear attribute controls ho* text is handled *hen
*rapping around those images"
The clear attribute has four possible )alues: none- left- right and all"
T"e CENTER Ele.e#t
The +E3TE1 element causes all text bet*een its start and end tags to be
centered bet*een the margins"
F+E3TE1G Text 2oes #ere" F+E3TE1G
T"e HN Ele.e#t
The highest le)el of heading is represented by F#9G tag- the lo*est by the F#JG
tag"
F#9G This is an #9 heading" F#9G
F#=G This is an #= heading" F#=G
F#@G This is an #@ heading" F#@G
F#DG This is an #D heading" F#DG
F#IG This is an #I heading" F#IG
F#JG This is an #J heading" F#JG
96
Web Technology
T"e HR Ele.e#t
#ori(ontal rules are used to )isually di)ide different segments of *eb pages from
one another"
A simple hori(ontal rule is coded as follo*s:
F#1G
L!t!
'ne of the most popular methods for organi(ing information is by using lists"
#TM$ presents three basic !inds of lists: unordered lists- ordered lists- and
definition lists"
,n unordered lists- the list items are mar!ed *ith bullets"
,n ordered lists- they are mar!ed *ith numbers- 1oman numerals- or letters"
5efinition lists are a little differentK they ha)e a pair of )alues- one for the term-
the other for its definition"
U#(r'ere' L!t!
&nordered lists are specified *ith the F&$G tag"
&nordered lists are used *hen the order of the list items is unimportant"
The type attribute defines the type of bullets used to denote the indi)idual list
items"
=?
Web Technology
The three options are: disc- circle and sHuare"
Example
F&$ typePQdiscQG
F$#G &2 +ourses F$#G
F$,G %E A+SEB F$,G
F$,G %E AE+EB F$,G
F$,G %E AEEEB F$,G
F&$G
F&$ typePQsHuareQG
F$#G P2 +ourses F$#G
F$,G M+A F$,G
F$,G ME A+SEB F$,G
F$,G M%A F$,G
F&$G
Or'ere' L!t!
'rdered lists are specified *ith the F'$G tag"
They are used *hen the order of the list item is significant"
'$ elements ha)e the type and start attributes"
The type attribute selects the !inds of numbering system utili(ed to order the list"
Example
FhtmlG
FbodyG
FhDGAn 'rdered $ist:FhDG
Fol typeP,G
FliG+offeeFliG
FliGTeaFliG
FliGMil!FliG
FolG
FbodyG
FhtmlG
=e)#t(# L!t!
=9
Web Technology
5efinition lists are specified *ith the F5$G tag"
5efinition lists consist of pairs of )alues- the first being the term to be defined-
and the second being the definition of the tem"
Example
F5$G
F5TG Satellite 5ish
F55G Antenna li!e de)ice *hich functions to recei)e and concentrate tele)ision
signals"
Ne!te' L!t!
Any !ind of list ordered- unordered or definition can be nested *ithin another
list"
F&$ typePdiscG
F$,G &2 +'urses F$,G
F'$ typePiG
F$,G %E A+SEB F$,G
F$,G %E AE+EB F$,G
F$,G %E AEEEB F$,G
F'$G
F$,G P2 +'urses F$,G
F'$ typePiG
F$,G ME A+SEB F$,G
F$,G M+A F$,G
F$,G M%A F$,G
F'$G
F&$G
Te-t St1le!
T"e B a#' STRONG Ele.e#t!
&sing the F%G and FST1'32G tags has the effect of rendering text in bold
print"
T"e I a#' EM ele.e#t!
==
Web Technology
&sing the F,G and FEMG tags has the effect of rendering text in italici(ed print"
STRIFE a#' U Ele.e#t!
The ST1,>E element causes text to be struc! through"
The & element underlines the affected text"
T"e BIG9 SM&LL9 SUP a#' SUB ele.e#t!
These four elements actually change the si(e or position of the affected text"
T"e FONT a#' B&SEFONT Ele.e#t!
The F'3T and %ASEF'3T Elements perform the same tas! and use the same
methods for doing so"
The difference bet*een them is the scope of their effect"
%oth set the si(e- color and font face for the text- but the basefont element is
global for all body text in the document- *hereas the F'3T element is strictly
local and affects only the text bet*een its start and end tags"
Example
F%ASEF'3T si(ePD colorP:R??????; faceP:arial;G
FPG
This is body text using the base font si(e"
FPG
FF'3T si(ePS@G This is locally increased font" FF'3TG
3% St1le S"eet! C F(r.att#$ )(r t"e )uture
CSS1 !ta#'ar'
Style sheets are embedded directly into a page- or lin!ed in from an external file-
and pro)ide *eb page de)elopers the ability to redefine the appearance of all
elements of a certain type- or one specific element"
The follo*ing code is a simple style sheet- embedded into the head section of the
*eb page"
FST/$E typeP:textcss;G
#9 T color: redKfont0family: ArialK margin: 9"?in U
FST/$EG
=@
Web Technology
With this style sheet setting- all #9 elements *ithin the document are set to use
the ne* style"
I#*lu'#$ St1le S"eet!
There are D different techniHues to ,nclude style sheet definitions
9" ,ncluding a style sheet in the documentEs head section"
=" $in!ing in a style sheet stored externally"
@" ,mporting in a style sheet stored externally"
D" ,ncluding an inline style sheet definition directly in an html element"
The most common approach is to embed style sheets into the head of the *eb
page and pro)ide settings for all of the elements *ithin the *eb page"
Example
FST/$E typeP:textcss;G
%'5/ T bac!ground0color: aHuaK color: firebric!K
margin: ?"I inU
FST/$EG
A second techniHue is to lin! the style sheet into the *eb page using the lin!
syntax:
F#EA5G FT,T$EG +SS Test +ontent FT,T$EG
F$,3> relPstylesheet typeP:textcss; hrefPstyle"cssG
F#EA5G
Another approach to incorporate style sheets into a page is to import the style
sheet into the file"
The code to import style sheet:
FST/$E typeP:textcss;G
Vimport urlAstyle"cssBK
FST/$EG
A last techniHue to include style sheet settings is to embed them directly into an
element"
The syntax for this is:
FP styleP:color: yello*K font0style: italic;G
&,,l1#$ !t1le! t( S,e*)* Gr(u,! () Ele.e#t!
=D
Web Technology
U!#$ t"e *la!! #a.e !t1le !"eet !ele*t(r
A class name is a *ay to apply style sheet settings to a group of named elements-
using the follo*ing syntax:
Fstyle typeP:textcss;G
P"someclass Tcolor: redK margin0left: 9"I in U
"otherclass Tcolor: greenK font0si(e: 9< pt U
FstyleG
Example:
FhtmlG
FheadG FtitleG css FtitleG
Fstyle typeP:textcss;G
P"someclass Tcolor: redK margin0left: 9"I in U
"otherclass Tcolor: greenK bac!ground0color: yello* U
FstyleG FheadG
FbodyG
Fp classPsomeclassG text9"
Fp classPotherclassG text=
Fh9 class P otherclassG This is heading9"
FbodyG
FhtmlG
Creat#$ a# (7erall l((0 )(r t"e /eb ,a$e
The body tag is the tag specifier to use *hen applying style sheets to an entire
document page"
%ac!ground0color and image and setting the page margins are the common
attributes *ith the body tag"
Example
Fstyle typeP:textcss;G
bodyT margin: ?"@ inK color: *hiteK bac!ground0color: blac!K
bac!ground0image: urlAbac!9"7pgB
bac!ground0repeat: repeat0xK bac!ground0attachment: fixedU
T"e ba*0$r(u#'9 .ar$# a#' *(l(r *!!1 attrbute!
=I
Web Technology
9" %ac!ground
=" %ac!ground0color
@" %ac!ground0image
D" %ac!ground0repeat 0 repeat0x repeat hori(ontally
I" %ac!ground0attachment 0 scroll scroll *ith page
J" %ac!ground0position 0 top center
L" +olor 0 *hite
<" Margin 0 =? px 9? px topbottom set to =? pixels- leftright
margins set to 9? pixels"
6" Margin0left
9?" Margin0right
99" Margin0top
9=" Margin0bottom
M(')1#$ F(#t a#' Te-t &,,eara#*e
Font and text css9 properties
CSS1 attrbute Sa.,le Value
Font ,talic bold 9<pt arial
Font0family :times ne* roman; Arial
Font0si(e $arger
Font0*eight <??
$etter0spacing ?"9 em
Word0spacing 9"Iem
Text0decoration &nderline
Text0transform +apitali(e
Text0align +enter
Text0indent 9?W
Font0style normal X italic X obliHue
Font0)ariant normal X small0caps
Creat#$ B(r'er! &r(u#' Ele.e#t!
=J
Web Technology
There are certain +SS9 attributes that impact the box that surrounds a bloc!
le)el #tml element"
Padding and border +SS9 attributes
CSS1 attrbute Value
%order Thic! groo)e yello*
%order0color /ello* red blue
%order0*idth Thin thic!
%order0style ,nset
%order0top @px solid red A*idth-style-colorB
%order0right /ello*
%order0bottom Ipx solid
%order0left Solid
%order0top0style 1idge
%order0bottom0style 5ouble
%order0left0style 3one
%order0right0style groo)e
%order0top0color RFFFF??
CSS1 attrbute Value
%order0bottom0color %lac!
%order0right0color R????++
%order0left0color %lue
%order0top0*idth Thin
%order0left0*idth Thic!
Padding 9=W 9<px
Padding0left 9< px
Padding0right ?"=I in
Padding0top DW
=L
Web Technology
Padding0bottom Ipx
C(#tr(ll#$ t"e &,,eara#*e () L!t! a#' (t"er HTML ele.e#t!
The classifying and display +SS9 attributes
CSS1 &ttrbute Value
5isplay 3one
White0space Pre
$ist0style SHuare outside
$ist0style0type 5isc
$ist0style0image urlAsomeimage"7pgB
$ist0style0position ,nside
Width 9I? px
#eight =IW
The display attribute can define that an element display as a list item or not
display at all"
The follo*ing example turns off the display of any element using the nodisplay
class:
Fstyle typeP:textcss;G
"nodisplay T display: none U
FstyleG
T"e P!eu'( : Ele.e#t! a#' *la!!e!
A pseudo element is an html elelment in *hich some external factor influences
the presentation of the element"
Style settings can be applied based on this external factor"
The follo*ing code demonstrates the use of this pseudo0class:
A:)isited T color:red U
A:un)isited T color: yello*U
A:acti)e T color: lime U
=<
Web Technology
4% U!#$ Table! )(r Or$a#5at(# a#' La1(ut
W"at are t"e HTML Table Ele.e#t!
#tml tables begin and end *ith the table tags- FtableG and FtableG
They contain ro*s- defined *ith the ro* tags FtrG and FtrG"
+ells defined *ith cell tags- FtdG and FtdG
+aptions for tables are created *ith the begin and end caption tags- FcaptionG
and FcaptionG"
Some cells can be designated as table ro* headers *ith the use of the FthG and
FthG tags"
T"e ba!* Table Ele.e#t!
&ttrbute =e!*r,t(#
Align #o* table aligns *ith other elements"
%gcolor %ac!ground color for table
Width Width of table
+ols 3umber of columns *ithin table"
%order Width in pixels of frame around table"
Frame Which sides of the frame surrounding table are )isible"
1ules Which rules appear bet*een table columns and ro*s
+ellspacing The space bet*een cell border and table frame"
+ellpadding The space bet*een cell border and cell contents"
The frame attribute has se)eral )alues"
i" 4oid no frame
ii" Abo)e top side only
iii" %elo* bottom side only
i)" #sides hori(ontal sides
)" 4sides )ertical sides only
)i" $hs left side only
)ii" 1hs right side only
=6
Web Technology
)iii" %ox all four sides
ix" %order all four sides
The acceptable )alues for the rules attribute
3one no rules
2roups rules appear only bet*een groups
1o*s rules appear bet*een ro*s
+ols rules appear bet*een columns
All rules appear bet*een all elements"
TH a#' T= ele.e#t attrbute!
&ttrbute =e!*r,t(#
3o*rap 5isbale automatic text *rapping
%gcolor %ac!ground color of cell
1o*span 3umbers of ro*s spanned by cell
+olspan 3umber of columns spanned by cell"
C(lu.# Gr(u,#$ /t" COLGROUP a#' COL
The columns of the table can be grouped by using the colgroup element"
'nce grouped- you can apply a *idth to all of the columns included *ithin the
group"
A second element col- can also supply specific *idth and alignment information
for one or more columns *ithin the group"
Example
Ftable borderPQ9QG
Fcolgroup spanPQ@QG
Fcol *idthPQI?QGFcolG
Fcol *idthPQ9??QGFcolG
Fcol *idthPQ=?QGFcolG
FcolgroupG
FtrG
FtdGcol 9FtdG
@?
Web Technology
FtdGcol =FtdG
FtdGcol @FtdG
FtrG
FtableG
R(/ Gr(u,#$ /t" t"ea'9 t)((t a#' tb('1 ele.e#t!
Each table has at least one ro*- and this becomes the default table body"
#o*e)er- the ro*s that ma!e up the body can also be delimited *ith one or more
tbody elements"
The ro*s that ma!e up the table head for a specific ro* grouping can be
delimited *ith the thead element"
The foot of the table ro* grouping can be delimited *ith the tfoot element"
Example
Ftable *idthPJ?W framePborder borderP< rulesPgroups colsP@ cellspacingP@
cellpaddingPI alignPcenterG
FcaptionG This is an example table FcaptionG
Fthead alignPleftG
FtrG
FthG FthG
FthG second 4alue FthG
FthG Third 4alue FthG FtrG
FtfootG
FtrG FtdG Month T*o Subtotals FtdG
FtdG 9DDJ FtdG
FtdG 9<<<6 FtdG
FtrG
FtfootG
FtbodyG
FtrG
Ftd ro*spanP=G Month 'ne 4alues: FtdG
FtdG ?"I FtdG
FtdG "I FtdG
@9
Web Technology
FtrG
FtrGFtdG D"D FtdG
FtdG <6"@ FtdG
FtrG
FtfootG
FtrG
FtdG Month one Subtotals : FtdG
FtdG 9 FtdG
FtdG 9 6D FtdG
FtrG
FtbodyG
FtrG
Ftd ro*spanP=G Month 'ne 4alues: FtdG
FtdG 9"DDD FtdG
FtdG "???I FtdG
FtrG
FtrGFtdG 9DDD"DDD FtdG
FtdG 9<<<6"??@ FtdG
FtrG
FtbodyG
FtableG
@=
Web Technology
C(.b##$ t"e U!e () HTML Table! a#' CSS1 St1le S"eet!
FheadG
Fstyle typeP:textcss;G
Thead T bac!ground0color: redK color: yello*U
Tbody T bac!ground0color:blac! K color: yello*U
Tfoot T bac!ground0color:limeK color: yello*U
Table T border0style: groo)eK border0color:blueK
color: dar!greenK
Th T font0family : fantasy U
FstyleG
@@
Web Technology
U!#$ a# "t.l table t( *reate a La1(ut )(r L#0!
A popular use of html tables is to maintain the layout of a lin!s page or a section
of a page that contains resource lin!s
'ne column table used to control layout of a lin!s list"
Example
FhtmlG
FbodyG
Ftable *idthP<?W cellpaddingP9? cellspacingP9I borderPI framePborder
rulesPnone alignPcenterG
Fcaption alignPbottomG ,nternet Explorer 5ynamic #tml $in!s FcaptionG
@D
Web Technology
FtrG FtdG Fh9G My ,E 5ynamic #tml 1esources Fh9G FtdG FtrG
FtrGFtdG Fa hrefPQhttp:***"*@"orgpub***tr*d0positioningQG W@+
Positioning 5raft FaG FtdGFtrG
FtrGFtdG Fa hrefPQhttp:***"microsoft"comieieD?QG ,nternet Explorer D"?
Platform Pre)ie* FaG FtdGFtrG
FtableG
FbodyG
FhtmlG
Creat#$ Pa$e C(lu.#! /t" a Table
Another popular use of html tables is to create columns *ithin a page"
Ftable *idthP9??W colsP@ cellspacing P9?G
Fcolgroup spanP@G
Fcol *idthP:@?W;G
Fcol *idthP:@IW;G
Fcol *idthP:@IW;G
C(#tr(ll#$ a F(r. La1(ut /t" a Table
With a table- the form elements can be easily aligned"
ExampleO
6% &'7a#*e' La1(ut a#' P(!t(##$ /t" St1le S"eet!
+SS positioning attributes
&ttrbute =e!*r,t(#
Position 5etermines *hether element is positioned explicitly or relati)e to
the natural flo* of *eb page document"
$eft Position of the left side of the rectangular area enclosing the
element"
Top Position of the left side of the rectangular area enclosing the
element"
@I
Web Technology
Width Width of the rectangular area enclosing the element"
#eight Width of the rectangular area enclosing the element"
+lip The clipping shape and dimensions used to control *hat portion
of the element displays"
')erflo* The portion of the element contents that exceeds the bounds of the
rectangular area enclosing the element"
Y0index The stac!ing order of the element if t*o or more elements are
stac!ed on top of each other"
4isibility Whether element is )isible"
P(!t(##$ .a$e! a#' (t"er ele.e#t!
,mages ha)e some positioning capability- *ith the hspace and )space ,M2
attributes- and can be aligned *ith the align attribute"
'ne techniHue *eb de)elopers did not ha)e before ,E D"? is the ability to layer
text and other html elements on images- or to layer images themsel)es"
Also- de)elopers could not exactly position images or any other element"
+SS positioning changes all of this"
With +SS- the position attribute is set to a )alue of absolute- *hich means that
the element is positioned exactly- regardless of ho* any other element is
positioned"
&sing +SS positioning to position three images
FhtmlGFheadGFstyle typePtextcssG
,mg T position: absoluteK *idth:6?Kheight:6?K top 9??U
Rone T left:9??U
Rt*o T left:=?? U
Rthree Tleft:@??U
FstyleG
FheadG
FbodyG
Fimg srcPred"7pg idPoneG
@J
Web Technology
Fimg srcPyello*"7pg idPt*oG
Fimg srcPgreen"7pg idPthreeG
FbodyG FhtmlG
&sing 5,4 bloc!s to position images
FhtmlGFheadG
Fstyle typePtextcssG
5,4 T position: absoluteK top: 9??U
Rone T left:9??U
Rt*o T left:=?? U
Rthree Tleft:@??U
FstyleG
FheadG
FbodyG
Fdi) idPoneG Fimg srcPred"7pgG Fdi)G
Fdi) idPt*oG Fimg srcPyello*"7pg G Fdi)G
Fdi) idPthreeG Fimg srcPgreen"7pgG Fdi)G
FbodyG FhtmlG
/ou can layer html elements- including placing text abo)e images"
'ne !ey to for using layers is to set the (0index +SS positioning attribute to a
higher integer for the element you *ant to display at the top of the stac!"
$ayering text and images *ith (0index ordering
FhtmlGFheadG
Fstyle typeP:textcss;G
%ody T font0family: arialK color:*hiteK font0*eight: boldU
5i) T position: absolute U
Rone T top:=IK left:=?K (0index:9 U
Rt*o T top:9=IK left:=?K (0index:9 U
Rthree T top:==IK left:=?K (0index:9 U
FstyleG
@L
Web Technology
FheadG
FbodyG
Fdi) styleP:top:I?K left:D?K (0index:=;G
Product FbrG 'ne Fdi)G
Fdi) styleP:top:9I?K left:D?K (0index:=;G
Product FbrG t*o Fdi)G
Fdi) styleP:top:=I?K left:D?K (0index:=;G
Product FbrG Three Fdi)G
Fdi) idPoneG Fimg srcPred"7pg *idthP6? heightP6?G Fdi)G
Fdi) idPt*oG Fimg srcPyello*"7pg *idthP6? heightP6?G Fdi)G
Fdi) idPthreeG Fimg srcPgreen"7pg *idthP6? heightP6?G Fdi)G
FbodyG
FhtmlG
Creat#$ ,a$e *(lu.#! a#' u!#$ "t.l Table! a#' CSS ,(!t(##$ t($et"er
Web de)elopers use html tables to create columnar contents"
+SS positioning can be used to create multi column *eb page content"
,n addition html tables and +SS positioning can be used for one *eb page"
C(#7ert#$ a# E-!t#$ Table : Ba!e' Web Pa$e
&sing a table to control page layout isnEt a bad approach- but there are
limitations"
First *ith the menu bar- you should layer the menu bar text on the image itself-
rather than ha)ing to set each text bloc! belo* the image"
A second limitation is that because the text and images alternate- the images tend
to ha)e a large space surrounding them
To con)ert the page using +SS positioning- the first step is to recreate the menu
bar at the top of the page"
A ne* document is started"
5i) bloc!s *ere used- *hich supports positioning directly *ith images"
Menu bar section code:
Fstyle typeP:textcss;G
5,4 T position: absoluteK font0si(e: 9?ptKfont0family:arialKU
@<
Web Technology
Rlogo A position:absoluteK top: I? pxK left: I?pxK (0index: IK *idth:9?IU
Rimage9 T position:absoluteK top:9?pxK left:9<I U
Rimage= T position:absoluteK top:9?pxK left:=6I U
Rimage@ T position:absoluteK top:9?pxK left:@6I U
RimageD T position:absoluteK top:9?pxK left:I?? U
Rtitle9 Tposition:absoluteK top:=?pxK left:=??K (0index:IK height: =?pxK
*idth: <?px U
Rtitle= Tposition:absoluteK top:=?pxK left:@??K (0index:IK height: =?pxK
*idth: <?px U
Rtitle@ Tposition:absoluteK top:=?pxK left:D9?K (0index:IK height: =?pxK
*idth: <?px U
RtitleD Tposition:absoluteK top:=?pxK left:I9?K (0index:IK height: =?pxK
*idth: <?px U
FstyleG FheadG
FbodyG
FN00 set menu images
Fdi) idPlogoG Fimg srcP:logi"gif; *idthP9?D heightP9I@G Fdi)G
Fdi) idPimage9G Fa hrefPhttp:***"yasd"comG
Fimg srcP:menu"7pg; borderP? *idthP9?9 heightP9I@G FaG Fdi)G
Fdi) idPimage=G Fa hrefPhttp:***"yasd"comsamplesG
Fimg srcP:sample"7pg; borderP? *idthP9?9 heightP9I@G FaG Fdi)G
Fdi) idPimage@G Fa hrefPhttp:***"yasd"comsamplesimagesG
Fimg srcP:image"7pg; borderP? *idthP9?9 heightP9I@G FaG Fdi)G
Fdi) idPimageDG Fa hrefPhttp:***"yasd"comsamplesimagesphotomoG
Fimg srcP:photo"7pg; borderP? *idthP9?9 heightP9I@G FaG Fdi)G
FN00 set menu Titles 00 G
Fdi) id Ptitle9G Fa hrefPhttp:***"yasd"comG Main FaG Fdi)G
"
"
"
8% Creat#$ F(r.! /t" HTML
@6
Web Technology
W"at are HTML )(r.!@
An #TM$ form is not a )isual element"
,t is a container and can contain one or more buttons- textboxes or other form
elements"
The form elements can be used to access information from the reader and then
process that information *ithin the *ebpage"
The information can also be sent to a +2, or *eb ser)er application for further
processing"
T"e FORM ObGe*t! a#' t! &ttrbute!
A form is created using the begin and end form tags FF'1MG and FF'1MG"
Though not reHuired - there are form attributes that can control *hat happens to
the information- the method used to deli)er this information and *here feedbac!
deri)ed from the form contents should be sent"
Syntax for +reating Form
FForm nameP:mailForm;
action P :url; MethodPpostG
OO
FFormG
Form attributes are:
i" name Form name"
ii" target $ocation of *indo* *here from responses are sent"
iii" action &1$ of *ebser)er application that process form information"
i)" enctype %y default this attribute has a )alue of application x***0
form0urlencoded- but can be set to multipartform0data if the file
upload
element is used"
)" method A )alue of get or post- *hich determines ho* form information is
sent"
T"e )(r.! arra1
Each form has a separate entry in a built0in array called forms"
D?
Web Technology
This array can be accessed in script through the document ob7ect- *hich contains
this array as a property"
Web ,a$e /t" + )(r.! a#' 4 ele.e#t!
FhtmlG
FheadG
FtitleGformsFtitleG
Fscript languagePQ7a)ascriptQG
FN00
function listZ)aluesAB
T
)ar stringPQQK
forAiP?KiFdocument"forms"lengthKiSSB
T
stringSPQform name: QSdocument"forms[i\"nameSQFbrGQK
forA7P?K7Fdocument"forms[i\"elements"lengthK7SSB
stringSPdocument"forms[i\"elements[7\"nameSQ QK
document"forms[i\"elements[7\")alueS QFbrGQK
stringSPQFpGQK
U
document"*ritelnAstringBK
U
00G
FscriptG
function
FheadG
FbodyG
FN00form 9 00G
FF'1M namePQform9QG
Finput typePtext namePQtextnameQG
Finput typePbutton namePQbutton9Q )aluePQpush meQG
FF'1MG
D9
Web Technology
FN00form =00G
Fform namePQform=QG
Fselect namePQrandom)aluesQG
Foption )aluePQ9QGone
Foption selected )aluePQ=QGT*o
FselectG
Finput typePbutton namePQbutton=Q )aluePQno- push meQ onclic!PQlistZ)aluesABQG
FformG
FbodyG
Fhtm$G
T"e FORM ele.e#t!
The Form elements are : button- chec! box- fileupload- hidden- pass*ord- radio-
reset- select- submit- text and textarea"
Each element has a different loo! and performs a different function"
The ,3P&T tag creates most of these elements" As an example of creating an
element- the follo*ing code creates a text field:
F,3P&T typeP:text; namePsemefieldG
T"e BUTTON Ele.e#t
Probably the most common of the form elements is the button element"
/ou can create a button using the follo*ing code
Finput typeP:button; nameP:somebutton; )alueP:P&S# ME;G
A simple form - button *ith the *ords :push me;
FhtmlG
FheadG
FtitleGbutFtitleG
FheadG
FbodyG
Finput typePQbuttonQ namePQsomebuttonQ )aluePQpush meQG
FbodyG
FhtmlG
D=
Web Technology
&,,l1#$ CSS1 !t1le !"eet! t( !e7eral butt(#!
FhtmlG
FheadG
FtitleG buttonsFtitleG
Fstyle typePQtextcssQG
RoneTcolor: redK font0*eight: boldU
Rt*oTcolor: dar!greenK font0*eight: boldK bac!ground0image:
urlA+:]&sers]Public]Pictures]Sample Pictures]forest"7pegBK *idth:=??K height:9I?U
RthreeTcolor: firebric!K bac!ground0color: i)oryK border0color: firebric!K font0family:
chillerU
RfourTcolor: *hiteK bac!ground0color: blueK border0color: yello*K border0style: groo)eK
border0*idth:9?K *idth:=??U
Rfi)eTtext0decoration: underlineK bac!ground0color: greenK color: limeU
FstyleG
FheadG
FbodyG
FN00form 900G
Fform namePQform9QG
FN00button 900G
Finput idPQ'neQ typePbutton namePQbutton9Q )aluePQpush meQG
FN00button =00G
Finput idPQT*oQ typePbutton namePQbutton9Q )aluePQpush meQG
FN00button @00G
Finput idPQThreeQ typePbutton namePQbutton9Q )aluePQpush meQG
FN00button D00G
Finput idPQFourQ typePbutton namePQbutton9Q )aluePQpush meQG
FN00button I00G
Finput idPQFi)eQ typePbutton namePQbutton9Q )aluePQpush meQG
FN00button J00G
Finput typePbutton namePQbuttonQ )aluePQpush meQG
FformG FbodyG FhtmlG
D@
Web Technology
Creat#$ a SELECTION l!t
A selection list- or drop0do*n list box is really a couple of different element"
The first is the select element- *hich is the box- and the second is one or more
option elements- *hich contain the box entries"
+reating a selection list generates a text0field0si(ed element *ith an arro*"
+lic!ing the do*n arro* in the box next to the list exposes the list elements in a
drop0do*n box big enough to hold all the elements"
Example:
FhtmlG
FheadG
FtitleGbutFtitleG
FheadG
FbodyG
DD
Web Technology
Fselect namePQselectionQG
FoptionG '3E
FoptionG TW'
Foption selectedG T#1EE
FoptionG F'&1
FbodyG
FhtmlG
There are three attributes for the SE$E+T ob7ect:
name element name"
si(e number of options )isible *hen page opens- set to one by default"
multiple specifies that more than one option can be selected"
&,,l1#$ CSS1 attrbute! t( a !ele*t a#' (,t(# ele.e#t!
FhtmlG
FheadG
FtitleGlistFtitleG
Fstyle typePQtextcssQG
option Tbac!ground0color: limeK color: redU
option"t*oTbac!ground0color: blueK color: yello*U
selectTbac!ground0color: redK margin: 9"?inK font0family: algerianK font0*eight:
boldKfont0si(e: 9<ptU
FstyleG
FheadG
FbodyG
FN00form 900G
Fform namePQform9QG
Fselect namePQselectionQG
Foption )alueP9G First selection
Foption classPt*o )alueP=G Second selection
Foption )alueP@ selectedG Third selection
Foption classPt*o )aluePDG Fourth selection
DI
Web Technology
FselectG
FformG
FbodyG
FhtmlG
&''#$ Ra'( Butt(#! a#' C"e*0b(-e! t( a /eb,a$e
The radio button is a *ay to pro)ide a set of mutually exclusi)e choices"
'nly one button can be chec!ed *ith the radio button- and clic!ing one of the
buttons deselects any pre)ious selection"
+hec!boxes- on the other hand - pro)ide a method of selecting se)eral mutually
inclusi)e choices"
/ou can select one box or more of the options represented by the boxes"
FhtmlG
FheadG
FtitleGbutFtitleG
FheadG
FbodyG
FN00radio buttons00G
Finput typePQradioQ namePQthegroupQ )aluePQoneQ chec!edGone
Finput typePQradioQ namePQthegroupQ )aluePQt*oQ Gt*o
Finput typePQradioQ namePQthegroupQ )aluePQthreeQGthree
FpG
FN00chec!boxes00G
Finput typePQchec!boxQ namePQc!hbox9Q )aluePQchec!oneQ
chec!edGchec! one
Finput typePQchec!boxQ namePQc!hbox=Q )aluePQchec!t*oQGT*o
Finput typePQchec!boxQ namePQc!hbox@Q )aluePQchec!threeQGthree
FbodyG
Fhtm$G
U,l(a'#$ )le! /t" )leu,l(a'
The fileupload element pro)ides a means for the *eb page reader to specify a file
for loading to the *eb ser)er"
DJ
Web Technology
When you create one of these controls- a textbox for the filename and a button
labeled bro*seO are created *ithin the *ebpage"
The *eb page reader can type a filename and path into the box or clic! the
bro*se button to select a file"
When the form is submitted- the file is also appended to the form data being sent
to the ser)er"
&**e!!#$ Te-t /t" t"e Te-t C(#tr(l!C te-t9 te-t area a#' ,a!!/(r'
The text- text area and pass*ord input elements are all methods of accessing text
from the *eb page reader"
The text element pro)ides for single0line text )alues such as a name- and text
area pro)ides a control that can accept a bloc! of text se)eral *ords *ide and
se)eral lines long"
The pass*ord element hides the )alues being entered *ith the usual display of
asteris!s"
T"ree HTML #,ut ele.e#t! 9 a te-t *(#tr(l9a te-tarea *(#tr(l a#' a ,a!!/(r'
*(#tr(l
FhtmlG
FheadG
FtitleGtextFtitleG
FheadG
FbodyG
Finput typePQtextQ )aluePQEnter information hereQ namePQtext9Q si(eP<?G
FpG
Ftextarea ro*sP=? colsPI?GFtextareaG
FpG
Finput typePQpass*ordQ si(eP=?G
FbodyG
FhtmlG
Creat#$ I#ter,a$e Per!!te#*e /t" t"e "''e# Ele.e#t
There is a great tric! to use *hen maintaining information persistently bet*een
the *ebser)er application and the *eb pages sho*ing on the client"
DL
Web Technology
This techniHue is accomplished using the hidden form elements"
The hidden form element is an element that contains information stored *ithin
the *eb page but not displayed to the *eb page reader"
Sub.tt#$ a#' Re!ett#$ t"e )(r. /t" !ub.t a#' re!et
These t*o ,3P&T elements submit the form to the form processing application -
or reset the form )alues- respecti)ely"
To create either of these elements- the follo*ing code is used-
F,3P&T T/PEP:submit; 4A$&EP:Send Form;G
F,3P&T T/PEP:reset; 4A$&EP:1eset Form 4alue;G
&sing the submit element submits the form"
An alternati)e approach could be to create some other element - and based on
trapping an element e)ent- issue the form submit method- as sho*n here:
document"forms[?\"submitABK
document"forms[?\"resetABK
W(r0#$ /t" t"e Ne/ HTML 4%0 )(r. Ele.e#t! a#' E-te#!(#!
The #TM$ D"? has se)eral ne* form elements and form element attributes"
$abel- image and fieldset are the three ne* #TM$ D"? form elements"
GG The label element is used to pro)ide a label for a control- such as the text or
text area controls"
GG The image control creates an image0based control that can be clic!ed in a
manner similar to a button"
GG The fieldset control is an element that pro)ides a )isual grouping of other
form
elements-such as radio buttons"
Access!ey- tabindex- disabled and read only are the ne* #TM$ D"? element
attributes"
The access!ey attribute can be used to associate an accelerator !ey *ith a
specific form element"
The disabled attribute disables the focus from an element and pre)ents that same
elementEs )alue from being submitted *ith the form"
The tabindex attribute associates a specific tab order *ith an element"
D<
Web Technology
10% Fra.e! a#' Fra.e!et!
#tml frames slip the *eb page *indo* into separate *indo* )ie*s- each
capable of holding a different html document"
Creat#$ a#' W(r0#$ /t" Fra.e!
Frame *indo*s are made from more than one html file"
'ne file contains the Frameset definition- including *hich source files ma!e up
the frames and ho* much space each *ill occupy"
T"e Fra.e!et Ele.e#t
Main"html
Fframeset ro*sP:<?-^;G
Fframe srcP:top"html;
Fframe srcP:content"html;G
FframesetG
,nstead of creating t*o ro*s- you can also create t*o columns and load the *eb
page contecnts into each"
Fframeset colsP:<?-^;G
Fframe srcP:menu"html;G
Fframe srcP:main"html;G
FframesetG
Ne!te' Fra.e!et
Framesets that contain other framesets"
Example
Fframeset ro*sP:^-=I?;G
Fframe srcP:main"html;G
Fframeset colsP:=??-=??-^;G
Fframe srcProse"7pgG
Fframe srcPlily"7pgG
Fframe srcPtulip"7pgG
FframesetG
FframesetG
D6
Web Technology
Fra.e Ele.e#t &ttrbute!
&ttrbute =e!*r,t(#
3ame Frame name
Src Frame source
Frameborder Setting this )alue to 9- dra*s a border around the frame" ?
remo)es the border"
3oresi(e Turns off frame resi(ing
Margin*idth Frame hori(ontal margin
Marginheight Frame )ertical margin
Scrolling Setting this )alue to auto pro)ides scrolling only *hen frame
content does not fit *ithin the frame space" Setting this )alue
to yes al*ays pro)ides a scroll bar" Setting this )alue to no
al*ays turns off the scroll bar"
Accessing External 1eferences from Frames
'ne of the disad)antage to using frames is that including a hypertext lin! *ithin
a frame page to a *eb page at an external *eb site loads that page into the frame-
rather than directly into the bro*ser *indo*"
This problem can be resol)ed by the target attribute *hich can be used *ith lin!
elements"
There are se)eral different reser)ed !ey*ords that can ser)e as the target
attribute )alue:
%lan! 0 loads page to ne* unnamed *indo*
self 0 loads page to current frame or *indo*
Parent 0 loads page to parent *indo*
Top 0 loads page to original *indo*
,nline Frames *ith ,Frame
#tml D"? created a ne* frame element called the inline frame- *hich uses the
tags FiframeG and FiframeG"
I?
Web Technology
,nline frames ha)e the same attributes regular frames ha)e- except that each
inline frame *indo* is embedded *ithin a *eb page and attributes are specified
directly for the frame *indo*"
Example:
FhtmlG
FbodyG
Fh9G This demonstrate inline frames Fh=G
Fiframe srcP:main"html; heightP9=? *idthP6IWG FiframeG
Fiframe srcP:content"html; heightP@?? *idthP6IWG FiframeG
FbodyG
FhtmlG
11% U!#$ I.a$e! /t" HTML
E.be''#$ .a$e! /t"# a# Ht.l =(*u.e#t
,mages are embedded *ithin a *eb page *ith the use of ,M2 tag"
This tag contains the source of the image file and other information- and does
ha)e an end tag"
T"e .a$e )(r.at!
The 2raphics ,nterface Format A2,FB is the most popular image format in use
*ithin html files"
The 2,F<6a )ersion allo*s for the specification of the number of colors to
include *ithin the image file"
The .oint Photographic Experts 2roup A.PE2B format retains all the imageEs
colors but also supports a compression techniHue that discards data from the
image nonessential to the display"
#igher le)els of compression lead to smaller file si(es- but also decrease the
Huality of the image"
The Portable 3et*or! 2raphics AP32B format is considered a replacement for
the 2,F format"
P32 supports a more efficient compression routine and t*o0dimensional
interlacing- *hich controls ho* an image is displayed *hile it do*nloads"
I9
Web Technology
T"e IMG &ttrbute!
,mages are embedded *ithin a *eb page using the ,M2 tag"
Fimg srcPflo*es"gif *idthP9?? heightP9?? altP:Flo*ers are )ery %eautiful;
hspaceP=?G
Attributes supported for ,M2 tag are:
src &1$ of the image source file
alt 0 alternati)e text
Align ho* image aligns- deprecated
#eight height to reser)e for image- deprecated
Width 0 *idth to reser)e for image- deprecated
%order 0 si(e of border surrounding image- deprecated
#space hori(ontal *hite space on either side of image- deprecated
4space 0 )ertical *hite space on either side of image- deprecated
,d 0 image name
+lass 0 style sheet class
Style 0 style sheet information
Title 0 element title
T"e IMG W't" a#' He$"t &ttrbute!
The *idth and height of the image define the area of the *indo* the image
occupies"
The same image ob7ect *ith different *idths and heights
Fimg srcPlogo"7pg *idthP9?? heightP9??G
Fimg srcPlogo"7pg *idthPI? heightPI?G
FpG
Fimg srcPlogo"7pg *idthP@?? heightP@??G
Fimg srcPlogo"7pg *idthP=?? heightP9I?G
T"e alt &ttrbute
Alt attribute pro)ides alternati)e text for the bro*sers that do not pic! up
images"
Fimg srcPflo*er"7pg altP: Flo*er 1ose;G
T"e .a$e (bGe*t a#' a**e!!#$ .a$e! /t"# !*r,t
I=
Web Technology
The image ob7ect is accessed by creating a ne* image ob7ect or by accessing the
images embedded into the *eb page )ia the image array"
Each img tag *ithin the *eb page is associated *ith one entry in the images
array"
Example
FhtmlG
FheadG
FtitleG ,mages FtitleG
Fscript languageP:7a)ascript;G
Function changeZimageAnumB
T
4ar imgP: :K
ifAnumPP9B
img P :photoL"7pg;K
Else ifAnumPP=B
img P :photo<"7pg;K
Else ifAnumPP@B
img P :photo6"7pg;K
Else
img P :photo9?"7pg;K
5ocument"images[?\"srcPimgK
U
FscriptG
FheadG
FbodyG
Fform namePf9G
Fimg srcP:photoL"7pg;G
Finput typePradio namePr9 )aluePone onclic!P:changeZimageA9B;G one
Finput typePradio namePr9 )aluePone onclic!P:changeZimageA=B;G T*o
Finput typePradio namePr9 )aluePone onclic!P:changeZimageA@B;G Three
Finput typePradio namePr9 )aluePone onclic!P:changeZimageADB;G Four
I@
Web Technology
FformG
FbodyG FhtmlG
T"e .a$e (bGe*t ,r(,erte!9 a**e!!e' 7a .a$e arra1
Src 0 image &1$
Width 0 image *idth
#eight 0 image height
$o*src 0 lo*src imageEs url- first displayed *hen page is opened"
#space 0 hori(ontal space
4space 0 )ertical space
%order 0 border *idth
3ame 0 image name
+omplete 0 *hether image has completed loading"
I.a$e! a#' Ca*"#$
When you access an image for the first time- the image must be do*nloaded
from the ser)er"
After the image is do*nloaded- though- it is cached on the client machine and
subseHuent accesses to the image pull it from the cache rather than the ser)er"
Example
FhtmlG FheadG FtitleG images FtitleG
Fscript languageP7a)ascriptG
imageZarray P ne* arrayADBK
ForAiP?K iFimageZarray"lengthK iSSB
imageZarray[i\ P ne* imageA9??-9I?BK
imageZarray[?\"src P :photoL"7pg;K
imageZarray[9\"src P :photo<"7pg;K
imageZarray[=\"src P :photo6"7pg;K
imageZarray[D\"src P :photo9?"7pg;K
Function changeZimageAnumB
T document"images[?\"src P imageZarray[num\"srcK U
FscriptG
FheadG
ID
Web Technology
FbodyG
Fform namePf9G
Fimg srcP:photoL"7pg;G
Finput typePradio namePr9 )aluePone onclic!P:changeZimageA9B;G one
Finput typePradio namePr9 )aluePone onclic!P:changeZimageA=B;G T*o
Finput typePradio namePr9 )aluePone onclic!P:changeZimageA@B;G Three
Finput typePradio namePr9 )aluePone onclic!P:changeZimageADB;G Four
FformG
FbodyG
FhtmlG
Creat#$ I.a$e R(ll(7er E))e*t!
The most popular use of changing images is to create a rollo)er effect for images
that represent acti)e lin!s"
When the reader mo)es the mouse o)er the image- the image ta!es on a different
appearance- adding a highlight that pro)ides feedbac! to the reader"
1oll o)er *ith mouse do*n and mouse up e)ents
FhtmlG
FheadG FtitleG images FtitleG
Fscript languageP:7a)ascript;G
#ighimage P ne* imageA9?J-9ILBK
$o*image P ne* imageA9?J-9ILBK
$o*image"src P :optnrm"7pg;K
#ighimage"src P :pothigh"7pg;K
Function changeZhighAnumB
T document"images[num\"src P highimage"src" U
Function changeZlo*AnumB
T document"images[num\"src P lo*image"src" U
FscriptG FheadG
FbodyG
Fa hrefP:; onmousedo*nP:changeZhighA?B; onmouseupP:changeZlo*A?B;G Fimg
srcP:optnrm"7pg;*idthP9?J heightP9IL hspaceP9?G FaG
II
Web Technology
Fa hrefP:; onmousedo*nP:changeZhighA9B; onmouseupP:changeZlo*A9B;G Fimg
srcP:optnrm"7pg;*idthP9?J heightP9IL hspaceP9?G FaG
Fa hrefP:; onmousedo*nP:changeZhighA=B; onmouseupP:changeZlo*A=B;G Fimg
srcP:optnrm"7pg;*idthP9?J heightP9IL hspaceP9?G FaG
Fbody"
FhtmlG
1+% Mer$#$ Mult.e'a9 C(#tr(l! a#' Plu$H I#! /t" Ht.l
&**e!!#$ !(u#' a#' 7'e( # /eb ,a$e!
Multimedia *as first used in *eb pages to include sound"
%oth 3etscape 3a)igator and ,nternet Explorer support the use of sound in a *eb
page"
%eginning *ith 3etscapeEs 3a)igator )ersion @"x- the bro*ser used the $i)e0
audio plug0in for sound- and the $i)e4ideo plug0ins for )ideo"
U!#$ t"e DEMBE=E Ta$
The EM%E5 element is a simple0to0use techniHue that includes multimedia in a
*eb page"
%oth ,E and 3a)igator sho* a )isible control in a *eb page if the follo*ing
embedded tag syntax is used:
FEM%E5 srcP:example"mid; controlsPconsole *idthP9DD heightPJ?G
Each bro*ser determines *hat plug0ins are currently installed to support files
*ith the extension type of "mid and the bro*ser then uses the associated plug0in"
3etscape *ill most li!ely use the $i)e0Audio plug0in- and microsoft use the
5irectSho* control"
The EM%E5 element can also be used to support )ideo files"
Net!*a,eB! L7e&u'( Plu$HI#
The $i)eAudio plug0in play files *ith extensions of "*a)- "aiff- "au and "mid"
The $i)eAudio plug0in attributes are:
S1+ 0 Audio Source File &1$
A&T'STA1T 0 Whether file starts playing as soon as it is loaded"
$''P 0 Whether to loop sound file
IJ
Web Technology
Starttime 0 specifying a time in the source code to begin playing-
specified in Minutes:Seconds
EndTime 0 Specifying a time in the source code to end playing
4olume 0 A )alue bet*een ? and 9??- representing percentage of sound
)olume"
Width 0 Width of display
#eight 0 height of display
The methods that can be called from script for the $i)eAudio plugin are the follo*ing:
Play
Stop
Pause
Start0time
End0time
Set)ol
,sready
,splaying
,spaused
2et)olume
T"e DOB;ECTE ta$
The ob7ect element is used for embedding generic content into a *eb page"
The ob7ect element has gained fa)or because of its use of the PA1AM element-
embedded *ithin the beginning and ending Fob7ectG tags- that pro)ides name0
)alue pairs as a method of passing attributes to the embedded element"
T"e attrbute! !,e*)* t( t"e OB;ECT ele.e#t areC
+$ASS,5 0 $ocation of an ob7ectEs implementation
+'5E%ASE 0 Path used to resol)e &1$ references
+'5ET/PE 0 ,nternet media type
5ATA 0 $ocation of data rendered by control
T/PE 0 internet Media type of data
STA35%/ 0 message to display *hile control is do*nloading
T"e attrbute! () P&R&M ele.e#t areC
IL
Web Technology
3ame
4alue
4aluetype
Example
Fob7ect idP:thename; classidP:+$S,5:?II<6FA90+@IJ099+E0%F?90
??AA??III6IA;G
Fparam nameP:filename; )alueP:f"a)i;G
Fob7ectG
E.be''#$ S(u#' a#' V'e( #t( a# Ht.l Pa$e
With 5irectSho*- a multimedia file can be inserted into a page using a hypertext
lin!- embedded into the page using the FembedG tag- or embedded as an Acti)e8
control using the Fob7ectG tag"
Three different techniHues of using 5irectSho* to play a "mid file
FhtmlGFbodyG
Fa hrefP:example"mid;G Song FaG
Fob7ect idP:themusic; classidP:+$S,5:?II<6FA90+@IJ099+E0%F?90
??AA??III6IA;G
Fparam nameP:filename; )alueP:f"a)i;G
Fob7ectG
FEM%E5 S1+P:E8AMP$E"M,5;G
T"e =re*tS"(/ (bGe*t Pr(,erte!9 E7e#t! I Met"('!
Pr(,erte! areC
Filename 0 url of multimedia source file
Allo*#ide+ontrols 0 *hether the *eb page reader can hide or display controls
Appearance *hether the control has an inset border or flat border
Autostart 0 starts the multimedia stream play as soon as the control loads
%ordestyle 0 controls appearance of border
+urrentstate 0 *hether control is stopped- playing or paused"
Enabled 0 *hether the control is enabled
Fullscreenmode 0 to display )ideo fullcreen
I<
Web Technology
Playcount 0 number of times to loop playbac!
1eadystate 0 controls readiness state
4olume controls sound )olume
Met"('!C
About%ox 0 )ersion and copyright information about the control
,sSound+ardEnabled 0 *hether sound card is installed and enabled
Pause 0 pause playbac!
1un 0 run multimedia stream
Stop 0 stop stream playbac!
E7e#t!C
5isplaymodechange 0 *hen display mode property is changed
Error 0 *hen an error occurs
open+omplete 0 *hen source code has finished loading
Position+hange 0 When media position is changed
State+hange 0 player state changes
Timer 0 for timing e)ents
M*r(!()tB! =re*t &#.at(# Te*"#(l($1
5irectAnimation is a set of ob7ects- a set of built0in controls- and an AP, that are
accessible from script- 7a)a- +SS or other code"
With these sets you can integrate the use of scripting- 7a)a and controls"
The 5irectAnimation controls are
Structured 2raphics 0 creates a =5 images
Path controls the mo)ement of any ob7ect
SeHuencer 0 controls and synchroni(es the actions of se)eral different elements
Sprite 0 controls the animation frames and playbac!
I#ter#et E-,l(rer BultHI# Flter!
Microsoft created the css9 style )isual filters to control the appearance of
ordinary #TM$ elements"
The )isual filter effects can do such things as ma!e an element semi0transparent-
rotate an image- remo)e colors- or add specific lighting effects to a page"
I6
Web Technology
V!ual )lter e))e*t!C
2lo* 0 adds a glo* outlining the element
2ray drops the elementEs color palette
$ight 0 creates a light source on a page
Shado* 0 creates solid shado*
W"e# a#' /"e# #(t t( u!e Mult.e'a
There are some limitations to using multimedia"
1estrict do*nload si(es
,f you *ant to include the use of )ideo or sound- such as company theme song-
you might *ant to consider placing these on a separate page so these band*idth0
hogging files do not impede your readerEs access to other information"
+opyright ,nformation
,f you donEt *ant your image- )ideo or song sa)ed and used by another site- you
must ma!e sure that all copyright information on the multimedia file is displayed
prominently on the same page the file is accessed from"
Spea!ing of copyright- do not e)er copy and reuse images- )ideos- or sounds that
are not public domain and that you do not ha)e permission to use"
+ross0 %ro*ser +ompatibility
,f you *ant to use one bro*serEs specific techniHue- but your page is accessed by
both of these popular bro*sers- use the bro*ser0specific techniHue to enhance an
effect- not supply the entire effect"
+ross0 Platform +ompatibility ,ssues
3ot all multimedia files play eHually *ell on all platforms"
The rule of thumb is to deli)er content to the lo*est common denominator
*hat *or!s for all platforms or to pro)ide different lin!s to different
multimedia types- and let the reader choose *hich format to use"
J?