html notes.doc

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


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


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


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


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


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


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


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


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:


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.


12/34


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$


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


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


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:


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+


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


19/34


Defines 'ertica" spacing between ce""s in a tab"e.

ce""spacing @ A,A


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


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


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 .


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.


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+


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:


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


26/34

Output:


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


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 +


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.


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.


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.


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 %


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.


34/34

html notes.doc

Documents

Transcript of html notes.doc