html notes.doc
TRANSCRIPT
-
8/14/2019 html notes.doc
1/34
Chapter Two
Web Design Using HTML
-------------------------------------------------
HTML is an acronym for Hypertext Markup Language. HTML ocuments! the
founation of a"" content appearing on the Wor" Wie Web#WWW$! consist of two
essentia" parts% information content an a set of instructions that te""s a computer how to
isp"ay that content. &t is not a programming "anguage in the traitiona" sense! but rather a
setoff instructions about how to isp"ay content. The computer app"ication that trans"ates
this escription is ca""e a Web browser. &ea""y! on"ine content shou" a"ways "ook the
same regar"ess of the browser use or the operating system on which it resies! but thegoa" of p"atform inepenence is achie'e on"y approximate"y in practice.
( basic HTML ocument re)uires a minimum e"ements%
*htm"+ , *htm"+
*hea+ , *hea+
*tit"e+ , *tit"e+
*boy+ , *boy+
These e"ements efine the essentia" parts of an HTML ocument% the ocument itse"f! a
heaing section! a tit"e section! an a boy. ach of the e"ements is efine by two tags/
a start tag an an en tag. Tags are a"ways enc"ose in ang"e brackets% *,+. n tags
start with a s"ash #$.
( typica" first goa" in "earning any programming "anguage is to isp"ay a simp"e message.
With HTML! this is tri'ia""y simp"e% 0ust type the message in the boy of the ocument!
as shown in Document 1.2
-
8/14/2019 html notes.doc
2/34
Document 1.2 #He""oWor"HTML.htm$
3irst HTML Document
He""o! wor"4
Output:
1.2 HTML 5asic
2.1.1 Documents, Elements, Attributes, and Values
( basic HTML ocument consists of four sections efine by four sets of
e"ements! arrange as fo""ows%
*htm"+
*hea+
*tit"e+ , *tit"e+
,
*hea+
*boy+
,
*boy+
*htm"+
-
8/14/2019 html notes.doc
3/34
ach of these e"ements has a start tag an an en tag. Tags are a"ways enc"ose in ang"e
brackets *,+ an the en tag a"ways inc"ues a forwar s"ash before the e"ement name.
The boy e"ement supports attributes that can be use to contro" the o'era"" appearance of
an HTML ocument. Documents! e"ements! attributes! an 'a"ues are organi6e in a
specific hierarchy%
HTML document elements attributes values
*tit"e+ , *tit"e+
The tit"e e"ement contains the text that wi"" be isp"aye in the
browser7s tit"e bar. 'ery HTML ocument shou" ha'e a tit"e! inc"ue
as the first e"ement insie the hea e"ement.
Attributes% none "ements exist within a ocument. "ements can ha'e attributes an
attributes #usua""y$ ha'e 'a"ues. 3o""owing is a brief escription of the four e"ements that
wi"" be part of e'ery HTML ocument. (s se'era" e"ements can share common attributes!
attributes an their 'a"ues are "iste separate"y!
fo""owing the "ist of e"ements.
*htm"+ , *htm"+
The htm" e"ement surrouns the entire ocument. ("" other HTML e"ements are neste
within this e"ement.
Attributes% none
*hea+ , *hea+
The hea e"ement contains information about the ocument. The hea e"ement must
contain a tit"e e"ement an uner 8HTML ru"es! the tit"e must be the first e"ement after
hea. 3rom our perspecti'e! the other important e"ement to be inc"ue in hea is script!
which wi"" contain 0a'a9cript coe.
Attributes% none
-
8/14/2019 html notes.doc
4/34
*boy+ , *boy+
The boy e"ement contains the HTML ocument content! a"ong with whate'er e"ements
are re)uire to format! access! an manipu"ate the content.
Attributes% backgroun! bgco"or! text
2!2 "ome Other #mportant $lements
The four basic e"ements iscusse abo'e constitute no more than a b"ank temp"ate for an
HTML ocument. :ther e"ements are neee to isp"ay an contro" the appearance of
content within the ocument. 3o""owing are some important e"ements that you wi"" use
o'er an o'er again in your HTML ocuments!
*a+ , *a+The a #for ;anchor
-
8/14/2019 html notes.doc
5/34
*center+ , *center+
The center e"ement causes isp"aye text to be centere on the computer screen.
Attributes% none
*em+ , *em+
This is a ;"ogica" e"ement< that wi"" typica""y cause text to be isp"aye in ita"ics! but it
can be reefine to prouce ifferent resu"ts in ifferent en'ironments. 3or most
purposes! em an i are interchangeab"e. 9ee the i e"ement be"ow.
Attributes% none
*font+ , *font+
The font e"ement contro"s the appearance of text. The two most common"y use attributes
contro" the si6e an co"or of the text.
Attributes% size! color! face
*hr + or *hr+
The hori6onta" ru"e e"ement raws a shae hori6onta" "ine across the screen. &t oes not
ha'e an en tag. ( c"osing s"ash #after a space$ is re)uire in 8HTML. ( noshae
attribute isp"ays the ru"e as a so"i co"or! rather than shae.
Attributes% a"ign! co"or! noshae! si6e! with
*hn+ , *hn+
Up to six "e'e"s of heaings #for n ranging from 2 to =$ can be efine! with ecreasing
font si6es as n increases from 2 to =.
Attributes% a"ign
*i+ , *i+
i is a ;physica" e"ement< that forces the inc"ue text to be isp"aye in ita"ics. The actua"
appearance may epen on the browser an computer use. Compare with the em
e"ement abo'e.
Attributes% none
-
8/14/2019 html notes.doc
6/34
*img +
The img e"ement pro'ies a "ink to an image to be isp"aye within a ocument. The
image is store in a separate fi"e! perhaps e'en at another Web aress! the "ocation of
which is pro'ie by the src attribute.
Attributes% a"ign! borer! height! src! 'space! with
*p+ , *p+
The p e"ement marks the beginning an en of a paragraph of text content. >ote that
HTML oes not automatica""y inent paragraphs. ?ather! it separates paragraphs with an
empty "ine! with a"" the text a"igne "eft. &t is common to see on"y the start tag use in
HTML ocuments! without the corresponing en tag. Howe'er! the use of the en tag is
enforce by 8HTML! an this is the sty"e that shou" be fo""owe.
Attributes% none
*pre+ , *pre+
The efau"t beha'ior of HTML is to co""apse mu"tip"e spaces! "ine fees! an tabs to a
sing"e space. This estroys some of the text formatting that you may wish to preser'e in a
ocument! such as tabs at the beginning of paragraphs. The pre e"ement forces HTML to
recogni6e mu"tip"e spaces! "ine fees! an tabs embee in text. The efau"t action for
pre is to use a monospace font such as Courier. This may not a"ways be appropriate! but
as "ine fees an other text p"acement con'entions are recogni6e! pre is 'ery usefu" for
embeing programming coe examp"es within an HTML ocument.
Attributes% none
*strong+ , *strong+
strong is a ;"ogica" e"ement< that typica""y causes text to be isp"aye in a bo" font! but it
can be reefine to prouce ifferent resu"ts in ifferent en'ironments. 3or most
purposes! b an strong are interchangeab"e. Compare this with the b tag abo'e.
Attributes% none
-
8/14/2019 html notes.doc
7/34
Description of attributes%These escriptions may not inc"ue a"" possib"e 'a"ues. 3or a comp"ete
"isting! consu"t an HTML reference manua".
a"ign @ A,A
Values% A"eftA! ArightA! or AcenterA
("igns text hori6onta""y.
backgroun @ A,A
Value% the U?L of a gif- or Bpeg-format graphics fi"e 9etting the backgroun attribute
isp"ays the specifie image as the backgroun behin a isp"aye HTML ocument
page. Depening on the image si6e #in pixe"s$! backgroun images may automatica""y be;ti"e!< resu"ting in a repeating image that can be 'isua""y istracting. &t is not necessary
to use backgroun images! an they shou" be use with care.
bgco"or @ A,A
Values% 5ackgroun co"ors can be set either by name or by specifying the intensity of the
re! green! an b"ue co"ors.
borer@A,A
Value% The with! in pixe"s! of a borer surrouning an image
co"or @ A,A
Values% Text co"ors can be set either by name or by irect"y specifying the intensity of the
re! green! an b"ue co"ors.
face @ A,A
Values% 3ont typefaces can be set either generica""y! with cursi'e! monospace! sans-serif!
or serif! or with specific font names supporte by the user7s computer.
-
8/14/2019 html notes.doc
8/34
height @ A,A
Value% The height! in pixe"s! of an image.
href @ A,A
Value: The U?L of an externa" or interna" Web resource or the name of an interna"
ocument reference.
hspace @ A,A
Value: The hori6onta" space! in pixe"s! between an image an the surrouning text.
name @ A,A
Value: The name assigne to an interna" ocument reference through an ;a< e"ement.
si6e @ A,A
Values% (n unsigne integer from 2 to or a signe number from 2 to = or E2 to E=.
(n unsigne integer is an abso"ute font si6e! which may be system-epenent. The
efau"t 'a"ue is F. ( signe integer is a font si6e re"ati'e to the current font si6e! "arger for
positi'e 'a"ues an sma""er for negati'e 'a"ues. 3or the hr e"ement! si6e is the 'ertica"
height of the hori6onta" ru"e! in pixe"s.
src @ A,A
Value% The U?L of a graphics fi"e. 3or "oca" use! images an their HTML ocument are
usua""y store in the same fo"er.
text @ A,A
Values% The text attribute! use with the boy e"ement! se"ects the co"or of text in a
ocument! which pre'ai"s un"ess o'errien by a font attribute .
-
8/14/2019 html notes.doc
9/34
vspace = ""
Value: The 'ertica" space! in pixe"s! between an image an the surrouning text.
width = ""
Values% The with of an image or hori6onta" ru"e! in pixe"s or as a percent of tota" screen
with. 3or examp"e! width="80" is interprete as a with of G pixe"s! but
width="80%" is a with e)ua" to G percent of the tota" screen with.
2.1.3 HTML Syntax and Style( genera" characteristic of programming "anguages is that they ha'e 'erystrict syntax
ru"es. HTML is ifferent in that regar! as it is not high"y stanari6e. The positi'e spin
on this situation is to ca"" HTML an ;open stanar!< which means that se"f-escribebearers of the stanar can treat the "anguage as they see fit! subBect on"y to usefu"ness
an market acceptance. HTML has an estab"ishe syntax! but it is 'ery forgi'ing about
how that syntax is use.
9ome of the sty"e ru"es use are "iste be"ow.
2. 9pe"" the names of HTML e"ements in "owercase "etters.
1. Use the pre e"ement to enforce text "ayout whene'er it is reasonab"e to use a
monospace font #such as Courier$.
F. >est e"ements proper"y.
2..1. !sin" t#e script Element
The script e"ement usua""y #but not a"ways$ appears insie the hea e"ement! after the tit"e
e"ement. 3o""owing is a escription of script a"ong with its essentia" attributes%
*script "anguage@ABa'ascriptA type@AtextBa'ascriptA+
. . . . .. . . . ,,,..
*script+
Attributes% "anguage! type! src
-
8/14/2019 html notes.doc
10/34
2.2 $ascadin" Style S#eets(s you create more Web pages! you may wish to impose a consistent "ook for a"" of your
pages or for groups of re"ate pages. &t is teious to insert e"ements for a"" the
characteristics you may wish to rep"icate/font si6e! font co"or! backgroun co"or! an so
forth. 9ty"e sheets make it much easier to rep"icate "ayout information in mu"tip"e
ocuments..
Document 1.1 #sty"e.htm$
*htm"+
*hea+
*tit"e+9ty"e 9heets*tit"e+
*sty"e tit"e@AC99 IageA type@AtextcssA+
boy.bright Jbackgroun% reK font% 2=pt serifK
co"or% b"ueK font-sty"e% ita"icK font-weight% bo"
*sty"e+
*hea+
*boy c"ass@AbrightA+
Here is the boy.
*boy+
*htm"
Output:
-
8/14/2019 html notes.doc
11/34
The sty"e e"ement has an optiona" tit"e attribute an a type attribute set e)ua" to AtextcssA!
where the css stans for cascaing sty"e sheet.
>ote the use of the ot notation to assign a class name to the style rule%s& estab"ishe for
the e"ement! an the use of the name "ater #c"ass@AbrightA$ with the c"ass attribute in
the *boy+ tag. ach sty"e ru"e is terminate with a semico"on. 9o! for examp"e! the "ine
'(ont: !)pt serif* color:b"ue*+
&n summary! sty"e specifications fo""ow a hierarchy%
style element other HTML elements[.class name] properties value%s&
where the c"ass name #without the brackets$ is optiona".
C99s can be use to moify the appearance of any HTML e"ement that enc"oses content.
3o""owing are some properties that can be specifie in sty"e sheets.
Background properties
backgroun-co"or %
When use in a boy e"ement! backgroun-co"or sets the backgroun co"or for an entire
ocument. &t can a"so be use to high"ight a paragraph! for examp"e! when use with a p
e"ement.
backgroun-image
This property is use with a U?L to se"ect an image fi"e #gif or Bpeg$ that wi"" appear as a
backgroun. Typica""y! this is use with a boy e"ement! but it can a"so be use with
other e"ements! such as p. 3or other backgroun properties that can be use to contro" the
appearance of a backgroun image! consu"t an HTML reference text.
backgroun
This a""ows you to set a"" backgroun properties in a sing"e ru"e.
-
8/14/2019 html notes.doc
12/34
-
8/14/2019 html notes.doc
13/34
:f the many text properties! Bust three that may be usefu" are shown be"ow.
text-a"ign
This is use in b"ock e"ements such as p. &t is simi"ar in effect to the HTML a"ign
attribute. The choices are "eft! right! center! an Bustify. With "arge font si6es! Bustify may
prouce o-"ooking resu"ts.
xamp"e% text-a"ign% centerK
text-inent
?eca"" that paragraphs create with the p e"ement o not inent the first wor in the
paragraph. This property a""ows you to set inentation using type setting notation or
actua" measurements. & suggest the use of actua" ng"ish or metric measurements/inches
#in$! mi""imeters #mm$! or centimeters #cm$. xamp"e% text-inent% .QinK
white-space
The 'a"ue of this property is that you can pre'ent spaces from being ignore. ou can use
the HTML pre e"ement by itse"f! instea! but this causes the text to be isp"aye in a
monospace font such as Courier. The examp"e gi'en here retains white space regar"ess
of the typeface being use.
xamp"e% white-space% pre
ou can create sty"e sheets as separate fi"es an then uti"i6e them whene'er you wish to
use a particu"ar sty"e on a Web page. This makes it easy to impose a uniform appearance
on mu"tip"e Web pages.
Document 1.1 #boy.css$
-
8/14/2019 html notes.doc
14/34
boy Jbackgroun% si"'erK co"or% whiteK font%1Opt Times
h2 Jco"or% reK font%2Gpt &mpactK
h1 Jco"or% b"ueK font%2=pt CourierK
Document 1.Ob #style2.htm$*htm"+
*hea+
*tit"e+9ty"e 9heet xamp"e*tit"e+
*"ink [email protected] re"@Asty"esheetA
type@AtextcssA +
*hea+
*boy+*h2+Heaing 2*h2+
*h1+Heaing 1*h1+
Here is some text.
*boy+
*htm"+
output:
1.F HTML Tab"es! 3orms! an Lists
-
8/14/2019 html notes.doc
15/34
2.3.1 T#e table Element(n easy way to gain some contro" is to create a tab"e! using the table e"ement. Then the
re"ati'e "ocations of text an graphics can be estab"ishe by entering them into ce""s of
the tab"e. Within the start an en tags! ! rows an ce""s are
efine with the tr #;tab"e row
-
8/14/2019 html notes.doc
16/34
*htm"+
*hea+
*tit"e+?aon Tab"e*tit"e+
*hea+
*boy+
*h2+?esu"ts of raon testing*h2+
*tab"e borer@AFA+
*tr bgco"or@Asi"'erA+
*t+Location*t+*t+Ra"ue! pCiL*t+
*t+Comments*t+*tr+
*tr+
*t+D5Ss house! basement*t+*t+2Q.=*t+
*t bgco"or@ApinkA+(ction shou" be taken4*t+*tr+
*tr+
*t+&DSs house! 1n f"oor beroom*t+*t+F.*t+
*t bgco"or@Aye""owA+9hou" be reteste.*t+*tr+
*tr+
*t+ 30Ss house! 2st f"oor "i'ing room*t+*t+ .P*t+
*t bgco"or@A"ight greenA+>o action re)uire.*t+*tr+
*tr+
*t+ M5Ss house! 1n f"oor beroom*t+*t+1.P*t+
*t bgco"or@A"ight greenA+>o action re)uire.*t+*tr+
*tab"e+
*boy+
*htm"+
Output:
-
8/14/2019 html notes.doc
17/34
(
summary
of some
tab"ere"ate e"ements an their attributes is gi'en be"ow. ("" the e"ements except tab"e
itse"f shou" appear on"y insie a tab"e e"ement.
*caption+ , *caption+
Attributes% a"ign
Disp"ays the specifie text as a caption for a tab"e. ar"ier 'ersions of HTML support
on"y AtopA #the efau"t 'a"ue$ or AbottomA for the 'a"ue of the a"ign attribute. 9ome
browsers may a""ow AcenterA as a 'a"ue for a"ign! which is worth noting because this
might often be the a"ignment of choice for a tab"e caption.
*tab"e+ , *tab"e+
Attributes% borer! borerco"or! ce""paing! ce""spacing! with
Contains tab"e-re"ate an other e"ements.
*t+ , *t+
Attributes% a"ign! bgco"or! co"span! nowrap! rowspan! with
Does not contain other tab"e-re"ate e"ements.
*th+ , *th+
-
8/14/2019 html notes.doc
18/34
Attributes% a"ign! bgco"or! co"span! nowrap! rowspan! 'a"ign! with
The th e"ement works Bust "ike the t e"ement except it automatica""y isp"ays text in bo"
font! ser'ing as heaings for tab"e co"umns. &t oes not contain other e"ements.
*tr+ , *tr+
Attributes% a"ign! bgco"or! 'a"ign
Contains t or th e"ements.
Description o attributes:
a"ign @ A,A
Values% A"eftA! ArightA! or AcenterA("igns text hori6onta""y. When a"ign is specifie in a tr e"ement! its 'a"ue wi"" be
o'errien if it is specifie again within a t e"ement in that row.
bgco"or @ A,A
Values% co"or names or hexaecima" 'a"ues A!!""BBA
9ets the backgroun co"or for a ce"" or row. When bgco"or is specifie in a tr e"ement! its
'a"ue wi"" be o'errien if it is specifie again within a t e"ement in that row.
borer @ A,A
Values% an integer number of pixe"s
(s a borer to the tab"e an its ce""s. ( 'a"ue is optiona". &f it is inc"ue! an aitiona"
co"ore borer is ae aroun the outer bounary of the tab"e.
borerco"or @ A,A
Values% co"or names or hexaecima" 'a"ues A!!""BBA
9ets the co"or of a tab"e borer.
ce""paing @ A,A
-
8/14/2019 html notes.doc
19/34
Values% an integer number of pixe"s
Defines 'ertica" spacing between ce""s in a tab"e.
ce""spacing @ A,A
Values% an integer number of pixe"s
Defines hori6onta" spacing between ce""s in a tab"e.
co"span @ A,A
Values% an integer
Defines how many co"umns a ce"" wi"" span.
nowrap
Ire'ents text from being automatica""y wrappe within a ce"". &t oes not ha'e a 'a"ue.
rowspan @ A,A
Values% an integer
Defines how many rows a ce"" wi"" span.
'a"ign @ A,A
Values% AtopA! Ami"eA! or AbottomA
("igns text 'ertica""y. When 'a"ign is specifie in a tr e"ement! its 'a"ue wi"" be
o'errien if it is specifie again within a t e"ement in that row.
with @ A,A
Values% a number or a percentage
9pecifies tab"e or ce"" with in pixe"s #with@A2OA$ or as a percentage of the winow or
tab"e heaer with #with@AGNA$.
1.F.1 The form $lement
-
8/14/2019 html notes.doc
20/34
:ne of the most important app"ications of HTML ocuments is to pro'ie the Web page
e)ui'a"ent of a paper form. &n some cases! a form Bust he"ps to organi6e user input to a
Web page. :ften! an on"ine form inc"ues pro'isions for sening a comp"ete form back
to the author of the Web page.
HTML forms are efine by the form e"ement! using start an en tags% *form+ ,
*form+ tags. The attributes of the form e"ement are%
action @ A,A
Value% a programmer-supp"ie U?L that ientifies a processing script or mai"to% fo""owe
by an e-mai" aress.3or examp"e!
action@Ayahoomai".comA.
enctype@A,A
Value% here! use on"y enctype@Atextp"ainA. &n combination with metho@ApostA! this wi""
transmit form ata with the name of the form fie" fo""owe by an ;@< sign an the 'a"ue
of the fie"! which makes it easy to interpret the contents of a form that has been
submitte.
metho @ A,A
Values% AgetA! ApostA
The metho attribute contro"s how ata from a form is sent to the U?L or e-mai" aress
ientifie in the action attribute. Here use the ApostA 'a"ue because it is the easiest way to
transmit form ata in an easi"y reaab"e format.
name @ A,A
Value% a programmer-se"ecte name that is use to ientify the form. The name attribute
is neee on"y if a ocument contains more than one form
-
8/14/2019 html notes.doc
21/34
3orms contain one or more input (ields ientifie by *input + Tags .The most important
attribute of input is its type. There are se'era" fie" types that ha'e we""-efine efau"t
beha'iors in HTML .The possib"e 'a"ues are "iste in Tab"e .
-
8/14/2019 html notes.doc
22/34
3o""owing is a "ist of attributes for the input e"ement%
checke
Value% none
(pp"ies to type@AraioA an type@AcheckboxA on"y.
max"ength@A,A
Value% Maximum number of characters that can be entere in the fie".
This 'a"ue can be greater than the 'a"ue gi'en for the si6e attribute.
name@A,A
Value% ( programmer-supp"ie name for the fie".
reaon"y
Value% none
Ire'ents fie" 'a"ues in type@AtextA or text@ApassworA from being change.
si6e@A,A
Value% with of the isp"aye fie"! in characters.
'a"ue@A,A
Value% a programmer-supp"ie efau"t 'a"ue that wi"" be isp"aye in the
fie". This 'a"ue can be o'errien by user input un"ess the reaon"y
attribute is a"so specifie.
-
8/14/2019 html notes.doc
23/34
*HTML+
*5:D bgco"or@ApinkA+
>ame *input type@AtextA name @At2A+*br+*br+
(ress*Textarea rows@1 co"s@2Q+*Textarea+*br+*br+
Contact >o.*input type@AtextA name @At1A+*br+ *br+
Dt of 5irth*br+
Date*se"ect+
*option+2*option+
*option+1*option+
,,,,,
*option+F2*option+
*se"ect+
Month*se"ect+
*option+0an*option+
*option+3eb*option+
,,,,,,,...
*option+Dec*option+
*se"ect+
ear*se"ect+
*option+2PG*option+
*option+2PG2*option+
,,,,,,
*option+1*option+
*se"ect+ *br+*br+
ener *input type@AraioA name @Ar2A+Ma"e
*input type@AraioA name @Ar2A+3ema"e *br+*br+
Hobbies*input type@AcheckboxA name @Ach2A+?eaing*br+
-
8/14/2019 html notes.doc
24/34
*input type@AcheckboxA name @Ach2A+9wimming*br+
*input type@AcheckboxA name @Ach2A+9inging*br+*br+
*input type@AsubmitA name @A9ubmitA 'a"ue@A9ubmitA+
*input type@AresetA name @A?esetA 'a"ue@A?esetA+
*3orm+
*boy+
*htm"+
Output:
-
8/14/2019 html notes.doc
25/34
2.3.3 Creating Pull-Down Lists
( common feature on Web pages that use forms is a pu""-own "ist! which pro'ies
another way to "imit the input choices a user can make on a form. The imp"ementation
escribe here is simi"ar to a group of raio buttons in the sense that on"y one item can be
se"ecte from a "ist. 3or examp"e! creating a pu""-own "ist of the months of the year
e"iminates the nee for a user to type #an perhaps to mistype$ the name of a month.
Document 1.F.F #se"ect.htm$
*htm"+
*hea+
*tit"e+Iu""-Down List*tit"e+
*hea+
*boy+
9e"ect a month from this menu%
*se"ect name@AtestingA+
*option 'a"ue@A2A se"ecte+0anuary*option+
*option 'a"ue@A1A+3ebruary*option+
*option 'a"ue@AFA+March*option+
*option 'a"ue@AOA+(pri"*option+
*option 'a"ue@AQA+May*option+
*option 'a"ue@A=A+0une*option+
*option 'a"ue@AA+0u"y*option+
*option 'a"ue@AGA+(ugust*option+
*option 'a"ue@APA+9eptember*option+
*option 'a"ue@A2A+:ctober*option+
*option 'a"ue@A22A+>o'ember*option+*option 'a"ue@A21A+December*option+
*se"ect+
*boy+
*htm"+
-
8/14/2019 html notes.doc
26/34
Output:
-
8/14/2019 html notes.doc
27/34
1.O Mu"timeia 9ystem
1.O.2 Graphics
You place graphics onto a Web page for the same reasons you include
pictures in a brochure or magazineto help the readers gain a better
understanding of hat you are trying to say. !e"t alone cannot con#ey
as much information as te"t combined ith a fe ell$chosen images.
When you use descripti#e te"t% hoe#er ell$ritten% you must rely on
the reader&s imagination to construct an image of hat you are
describing. 'on#ersely% hen you use te"t and add pictures for
emphasis% your readers can see e"actly hat you ha#e in mind.
,nderstanding #mage -ile -ormats
!he three most common file formats for Web graphics are ()*G
+pronounced ,-$peg
it uses a lossy compression scheme de#eloped by (oint )hotographic
*"perts Group0% Graphic 1nterchange ormat +G10% and )ortable
3etor4 Graphic +)3G0. 5oth G1 and )3G file formats use a lossless
compression scheme to reduce file size. !he smaller the graphics file&ssize% the faster the Web broser can donload and display the picture
on the Web page. !herefore% compressing graphics files reduces the
long ait times normally associated ith Web pages that ha#e large
images. 6f the three formats% the
()*G format is used primarily for photographs% hereas the G1 format
is most often used for clip art% illustrations% and draings.
Placing Web Graphics into a Web PageI"acing images into a Web page re)uires a graphics image fi"e an the HTML *img+ tag.
3or examp"e! the fo""owing *img+ tag instructs the Web browser to "oa an isp"ay a
graphics fi"e name image.Bpg%
*img [email protected]+
-
8/14/2019 html notes.doc
28/34
Within the *img+ tag! thesrc attribute te""s the Web browser the source of the graphics
image #that is! the name of the fi"e$ the browser is to isp"ay.
To insert pictures onto a Web page! create an *img+ tag for each picture between the
start an en boy tags #*boy+*boy+$. The Web browser wi"" isp"ay images on the
Web page in the orer in which the *img+ tags appear with the HTML ocument. 3or
examp"e! the fo""owing coe te""s the Web browser to isp"ay two graphics images%
*htm"+
*hea+*tit"e+xamp"e of three image tags*tit"e+*hea+
*boy+
*img [email protected] +
*img [email protected] +
*boy+
*htm"+
"peci(ying #mage .imensions ithin an #mage Tag
ou "earne that the *img+ tag instructs the Web browser to "oa an isp"ay a graphics
fi"e on the Web page. 3or examp"e! the fo""owing HTML shows an *img+ tag in which
thesrc attribute instructs the Web browser to retrie'e an isp"ay the picture store in the
fi"e "anscape.Bpg! using a with of 1 pixe"s an a height of G pixe"s%
*img src@A"anscape.BpgA with@A1A height@AGA +
-
8/14/2019 html notes.doc
29/34
1.O.1 (nimation! 9oun! an Rieo
0rowsing the &nternet toay without encountering Web pages that contain some form of
animation! soun! 'ieo! or a combination of a"" three is a"most impossib"e. 3rom simp"e
animate &3s! to 3"ash mo'ies! an e'en fu""-screen interacti'e images with soun an
motion! aing animations toWeb pages has the potentia" to en"i'en your esigns.
Unfortunate"y! the o'eruse of animation an soun can be annoying an a istraction to
your 'isitors. Two opposing goa"s ri'e a'ances on the &nternet%
V Web authors trying to p"ease 'isitors want to transmit increasing"y e"aborate types of
content #soun! animation! an 'ieo$ o'er the Web.
V To reach Web site 'isitors! the fi"e si6e for content must be sma"" enough to "oa
)uick"y! or the 'isitors grow impatient an mo'e on to other sites.
,nderstanding 1nimations 3ole in eb .esign
The primary ro"e of Web animation is to raw the attention of 'isitors to your Web site.
Howe'er! Web animation can a"so entertain an inform. oung chi"ren #especia""y thosethat are Bust beginning to rea$ "o'e mo'ement an ten to focus on it. Therefore! you can
use animation to grab an focus a young chi"7s attention for an extene perio on a
concept you are trying to con'ey. &n aition! a Web page can use animation an soun
to exp"ain the steps in a comp"icate proceure or process.
-
8/14/2019 html notes.doc
30/34
Working with GIF Animation
raphic &nterchange 3ormat #&3$ animation is the most popu"ar form of animation on
the &nternet toay. 9e'era" reasons account for its popu"arity%
V "#Fs are easy to create ou can create &3 animation from a score of image- an Web
esignEapp"ications! such as Macromeia 3ireworks an (obe &mage?eay.
to own"oa shareware programs that create animate &3 fi"es from existing images.
V "#Fs re$uire no special browser sotware ("most a"" Web browsers p"ay &3
animations! which means that the browser re)uires no specia" software or p"ug-ins.
V "#Fs are a standard %eb ile ormat ("" browsers that support graphics images wi""
isp"ay &3 fi"es. &n rare cases where the browser oes not support &3 animation! the
browser wi"" sti"" isp"ay a static 'ersion of the animation #typica""y the first frame in the
animation se)uence within the &3 fi"e$.
V "#Fs use streaming When a Web browser begins own"oaing the &3 animation! the
browser isp"ays the frames as it recei'es them. The 'isitor is not force to wait unti" the
browser finishes own"oaing the fi"e before seeing the animation.
or4ing 5ith Macromedia -lash
3"ash is a mu"timeia e'e"opment too" create by the Macromeia Corporation that "ets
you create fu""-screen animations! incorporating soun an interacti'ity using 'ery sma""
fi"e si6es. 3"ash keeps the fi"e si6es sma"" through the use of 'ector images. Rector
images are sma""er than traitiona" bitmap images because they use math to escribe the
graphics instea of pixe"s. When you sa'e a traitiona" bitmap image #&3 or 0I$! the
fi"e has to recor an store information within the graphics fi"e that escribes each an
e'ery pixe"! which creates "arge fi"es.
-
8/14/2019 html notes.doc
31/34
Using 3"ash o'er traitiona" &3 animation offers se'era" a'antages%
VFlas& uses small image ile si'es 9ma""er fi"e si6es for 'ector images trans"ates into
fast-"oaing animations.
VFlas& en(oys cross)platorm browser support Whether you use Microsoft xp"orer or
>etscape >a'igator! or the Macintosh or Winows p"atform! oes not matter. The p"ug-in
that runs 3"ash animation is free an is a'ai"ab"e for most Web browsers.
VFlas& lets you resi'e images during animation Rector images resi6e with ease! creating
images that "ook great at any si6e you ecie to use.
VFlas& uses streaming tec&nology When a 'isitor own"oas a 3"ash animation! they o
not
ha'e to wait for the entire fi"e to own"oa. The animation wi"" start as soon as the
'isitor7s
Web browser recei'es enough of the 3"ash ata to begin the animation.
VFlas& is interacti*e 3"ash "ets you create interacti'e menus an na'igation bars without
prior experience in programming "anguages.
VFlas& incorporates +a*a,cript 3"ash is fu""y compatib"e with 0a'a9cript. 5ecause a""
browsers uni'ersa""y accept the 0a'a9cript "anguage! you can create e'en more
comp"icate
interaction between your page an its 'isitors.
VFlas& incorporates sound 3"ash works seam"ess"y with soun fi"es! "etting you create
mo'ement an auio in the same animation.
,nderstanding hen and hen 6ot to ,se 1nimation
(s pre'ious"y iscusse! animation attracts attention! it entertains! an it informs.
Howe'er! as wonerfu" as animation is! there are concerns to using animation on a Web
page%
V -se animation to attract attention. but don/t o*erdo it (nimation is an attention rabber!
but too much animation can be a prob"em. &f you create animation to attract your 'isitor7s
attention! refrain from using more than one! or possib"y two animations on each page.
-
8/14/2019 html notes.doc
32/34
V -se animation to en&ance t&e message o t&e %eb page. but make sure t&at it adds
*alue (ttempt to use animation that re"ates to the other static information on the page.
3or examp"e! is that rotating "ogo in the upper-"eft corner of the browser winow
contributing to the o'era"" esign an message of the page! or i you p"ace it there
simp"y to pro'e you cou" o it
VDo not use animation w&en it becomes distracting ('oi animation on Web pages that
contain "arge boies of text. (nimation impacts the 'isitor7s concentration an istracts
from the reaing of the text. (nimation attracts attentionK too much animation keeps the
'isitor from focusing.
VDo not use animation or animation/s sake 5ecause animation fi"es ha'e "arger fi"e
si6es! an conse)uent"y take "onger for the Web browser to own"oa an isp"ay! use
animation on"y when it contributes to the page.
or4ing 5ith "ound on the #nternet
&n competition with ?ea"(uio is (pp"e7s XuickTime! which functions in a simi"ar way
to ?ea"(uio. Many Web sites exp"oit both the ?ea"(uio an XuickTime formats an
most users ha'e pre'ious"y own"oae the corresponing p"ug-ins. Here are some
guie"ines for using soun on the &nternet%
V Use soun to communicate ieas through the use of ia"og an narration.
V Use soun to impro'e a Web site7s na'igation. 3or examp"e! use a c"icking soun in
conBunction with a ro""o'er button.
V Use backgroun music #where appropriate$ to set the moo for the Web page. 3or
examp"e! to set the moo on a Web site ea"ing with "ife in the ocean! p"ay the soun of
surf gent"y ro""ing against the shore"ine.
V Use soun to generate on"ine re'enue by the sa"e of auio an music c"ips. 3or examp"e!
"et 'isitors p"ay a portion of a new song! before purchasing.
(ing 9oun to a Web Iage %
-
8/14/2019 html notes.doc
33/34
To a a simp"e backgroun soun to a Web page! you can p"ace the *bgsoun+ tag
within the page7s heaer section! or you can use the *embe+ tag within the Web page
boy section as shown here%
*hea+
*bgsoun [email protected] +
*hea+
*boy+
*embe [email protected] autostart@AtrueA+*embe+
*boy+
These tags represent the minima" way of inserting a soun fi"e into an HTML-base Web
page. 5ecause the *embe+ tag wi"" p"ay in both >etscape >a'igator an &nternet
xp"orer! you may want to use it to p"ace the soun fi"e within your Web page. &n the
pre'ious examp"es! the fi"e name music.au wou" p"ay once an not repeat. To instruct
the soun to continua""y repeat! a the fo""owing attributes to the *bgsoun+ an
*embe+ tags #&idden! loop! autostart$ as shown here%
*hea+
*bgsoun [email protected] hien@AtrueA "oop@AtrueA autostart@AtrueA+
*hea+
*embe [email protected] hien@AtrueA "oop@AtrueA autostart@AtrueA+*embe+
3or anything more than a simp"e p"ayback of a soun fi"e! 'isitors to your site wi"" nee a
p"ug-inE base so"ution such as 3"ash! XuickTime! or ?ea"(uio . The HTML
specification states that the preferre way to embe soun in a Web page is through the
use of the *obBect+ tag. Howe'er! unti" a"" maBor browsers support the *obBect+ tag! you
may simp"y want to continue to use the *embe+ tag.
-
8/14/2019 html notes.doc
34/34