HTMLppt [Autosaved]

8/9/2019 HTMLppt [Autosaved]

1/229


2/229

What HTML Is

It isn't a programming language. HTML is exactly what it claims to be--a markup

language.

You use HTML to mark up a text ocument! "ustas you woul i# you were an e itor with a repencil.

The marks you use in icate which #ormat $orpresentation style% shoul be use when

isplaying the marke text. It is a tag-oriente text markup language that

works with stan ar & (II text.


3/229

Creating Basic HTML Documents

The entire ocument is enclose in the)HTML*)+HTML* container tags.

The #irst part o# the ocument isencapsulate in the )H,& *)+H,& *container! which itsel# contains a)TITL,*)+TITL,* container.

inally! the bo y o# the page is containein a )/0 Y*)+/0 Y* container.


4/229

The implest HTML ocument

)HTML*)H,& *)TITL,*& 1ery /asic HTML ocument)+TITL,*)+H,& *)/0 Y*This is where the text o# the ocument woul be.)+/0 Y*)+HTML*


5/229

The )+HTML* en tag is "ust as importantas the start tag. It is becoming possible toinclu e HTML ocuments within e-mailmessages an news postings. 2ithout the)+HTML*! the 3iewer oes not know whento stop interpreting the text as HTML co e.


6/229

The ocument Hea ing

The ocument hea container is not a re4uireelement! but a proper hea can greatly increasethe use#ulness o# a ocument.

The purpose o# the hea is to pro3i ein#ormation to the application that is interpretingthe ocument.

2ith the exception o# the TITL, element! therea er o# the ocument oes not see theelements within the hea element.


7/229

,lements within the hea elemento the #ollowing5

6ro3i e a title #or the ocument. Lay out the relationships between multiple

ocuments. Tell a browser to create a search #orm. 6ro3i e a metho #or sen ing special

messages to a speci#ic browser or other3iewer.


8/229

& airly etaile H,& ,lement)H,& *

)TITL,*7eneral 0##icers o# the 8 &rmy in the (i3il2ar)+TITL,*)LI9: H;, ia.net= ;,1


9/229

The /& , element is use to speci#y the #ull

original 8;L o# the ocument. This allows relati3e links to work! e3en i# a

ocument has been mo3e to another irectory$or e3en to another machineG%.

In this way! a /& , element allows the 3iewingso#tware to #in a ocument link! e3en when

irecte #rom a parent in a i##erent location.

The /& , element has a single re4uireattribute! which pro3i es the #ull 8;L o# the

ocument5 H;, .


10/229

The LI9: ,lement - I# the /& , elementallows a browser to locate a ocument!there still exists the 4uestion o# what the

relationship between two ocuments mightbe. To connect ocuments together logically!

HTML inclu es the LI9: element.


11/229

Table5 LI9: &ttributes an Theirunctions

&ttribute unction H;, 6oints to the 8;L o# the other

ocument. ;,L e#ines the relationship between the

current ocument an persons who ha3econtribute to its existence.

;,1 e#ines the relationship between anotherHTML ocument an the current ocument.

TY6, peci#ies the type an parameters #or alinke style sheet .


12/229

)HTML*)H,& *

)TITL,*8sing the atellite I enti#ication an Trackingystem $ IT %)+TITL,*)LI9: ;,1


13/229

The M,T& element allows a ocument author toe#ine in#ormation that is outsi e o# HTML

,xample o# how the M,T& element can be useto ha3e the browser per#orm an action.

)M,T& HTT6-,A8I1


14/229

M,T& &ttributes an Their unctions

&ttribute unction HTT6-,A8I1 e#ines the property #or the

element.

9&M, 6ro3i es an a itional escriptiono# the element. I# this attribute ismissing! it is assume to be thesame as HTT6-,A8I1.

8;L e#ines a target ocument #or theproperty.

(09T,9T 6ro3i es the response 3alue #or theproperty.


15/229

)HTML*)H,& *)TITL,*7eneral 0##icers o# the 8 &rmy in the

(i3il 2ar)+TITL,*)M,T& 9&M,


16/229

/0 Y &ttributes an Their unctions &ttribute unction &LI9: e#ines the color o# an acti3e link. /&(:7;089 6oints to the 8;L o# an image to use

#or the ocument backgroun . /7(0L0; e#ines the color o# the ocument

backgroun . /76;06,;TI, I# this is set to I@, ! the backgroun

image oes not scroll. L, TM&;7I9 ets the wi th o# the le#t margin in

pixels. LI9: e#ines the color o# an un3isite link. T,@T e#ines the color o# the text. T06M&;7I9 ets the wi th o# the top margin in

pixels. 1LI9: e#ines the color o# an alrea y 3isite link.


17/229

(olor e#initions

(olors are e#ine in HTML using a hexa ecimalco ing system.

CF tan ar (olors an Their 1alue5

Color Value /lack Maroon J 7reen J

0li3e J J 9a3y J 6urple J J


18/229

Teal J J 7ray J J J il3er ( ( (

;e Lime Yellow /lue uchsia &4ua 2hite


19/229

The Address Element

)HTML*)H,& *)TITL,*&mateur &stronomy on the 2orl 2i e

2eb)+TITL,*

)+H,& *)/0 Y *)& ;, *(reate by ;obert Meegan)/;*

Last Mo i#ie on CF ec K E)+& ;, *)+/0 Y*)+HTML*


20/229

Breaking Text into Paragra hs

6lace a paragraph start tag! )6*! at thebeginning o# each new paragraph! an the3iewer knows to separate the paragraphs.

& ing a paragraph en tag! )+6*! is optional!as it is normally implie by the next start tag thatcomes along.

The paragraph element has one attribute that issupporte by both 9etscape 9a3igator anMicroso#t Internet ,xplorer. This is the &LI79attribute.


21/229

&ttribute unctionL, T &ligns the text with the le#t margin

o# the 3iewer. The right e ge isragge .

(,9T,; (enters the text between the3iewer margins.

;I7HT &ligns the text with the rightmargin o# the 3iewer. The le#te ge is ragge .


22/229

& ing an 6re3enting Line /reaks

8se the line break tag! )/;*! to en a linewhere you want.

I# you think you might nee a break insi ea )90/;* element! you can suggest abreaking point with a )2/;* tag $so#t linebreak%. The 3iewer will only use the

)2/;* i# it nee s it. the line break element is not a container! itoes not ha3e an en tag.


23/229

(reating a Text 0utline

& ing Hea ings The hea ing element is a container an

must ha3e a start tag $)HC*% an an entag $)+HC*%.

HTML has six le3els o# hea ings5 HC $themost important%! HK! HB! H ! H ! HF $theleast important%.


24/229

& ing HoriNontal LinesYou can create a horiNontal line using the

horiNontal rule element! )H;*.)HTML*)H,& *)TITL,*Manne pace (ra#t)+TITL,*)+H,& *)/0 Y*)HC &LI79


25/229

)H;*)HK &LI79


26/229

)H;* &ttributes an Their unctions &ttribute unction &LI79 (an be set to L, T! (,9T,;! or

;I7HT.2I TH (an be entere in pixels or as a

percentage o# the 3iewer win owwi th. I# a percentage is esire ! a apercent time to the number.

IO, The height o# the rule line in pixels. 90 H& , I# this attribute is present! the

3iewer oes not use a three- imensionale##ect.

(0L0; peci#ies the color o# the rule line. &n ;7/hexa ecimal 3alue or a stan ar color namecan be use .


27/229

The ) I1*)+ I1* container $ I1 stan s #or i3ision% canbe use to enclose an e#ine the alignment #or an entireblock o# page elements. It supports the &LI79 attribute!so you coul use it to align a block o# text an graphicsto (,9T,;! as in this example5

) I1 &LI79


28/229

6hysical ormat ,lements This is in )/*bol )+/* text.

This is in )I*italic)+I* text. )TT* The teletype element isplays the

contents with a monospace typewriter

#ont. )8* The un erline element causes text tobe un erline in the 3iewer.

) T;I:,* The strikethrough elementraws a horiNontal line through the mi leo# the text.


29/229

)/I7* The big print element uses a larger#ont siNe to isplay the text.

) M&LL* The small print elementisplays the text in a smaller #ont siNe.

) 8/* The subscript element mo3es thetext lower than the surroun ing text an $i#possible% isplays the text in a smaller siNe#ont.


30/229

) 86* The superscript element mo3esthe text higher than the surroun ing textan $i# possible% isplays the text in asmaller siNe #ont.


31/229

The 09T ,lement The 09T element is a container that is opene

with the ) 09T* start tag an close with the)+ 09T* en tag.)HTML*)H,& *

)TITL,* ont election ,xample)+TITL,*)+H,& *)/0 Y*) 09T &(,


32/229

)HTML*)H,& *)TITL,* ont election ,xample)+TITL,*

)+H,& *)/0 Y*) 09T &(,


33/229

The IO, &ttribute)HTML*)H,& *)TITL,* ont iNe ,xample)+TITL,*)+H,& *)/0 Y*) 09T IO,


34/229

The (0L0; &ttribute)HTML*)H,& *)TITL,* ont (olor ,xample)+TITL,*)+H,& *)/0 Y*) 09T (0L0;


35/229

The )/& , 09T* Tag)HTML*)H,& *)TITL,*/& , ont ,xample)+TITL,*)+H,& *)/0 Y*This text is be#ore the /& , 09T tag.)/;*)/& , 09T IO,


36/229

(reating pecial (haracters

Entity Symbols Qcent! Qpoun ! Qyen R! ! S Qcopy! Qreg ! U

Q eg V Q#racC ! Q#racCK! Q#racB C+K ! C+B! B + Q i3i e W Qpi X6i

Qle! Qge ) * Qamp Q Q agger X agger

& ing 7raphics to a 2eb 6age


37/229

& ing 7raphics to a 2eb 6age!IM" #$C%&'ilename&()HTML*

)H,& * )TITL,*8sing the IM7 tag)+TITL,*)+H,& *)/0 Y* )6* )IM7 ;(


38/229

1alues #or the &LI79 &ttributeValue DescriptionT06 &ligns the text with the top o# the imageMI L, &ligns the text with the mi le o# the image/0TT0M &ligns the text with the bottom o# the imageL, T isplays image on le#t si e an

surroun ing content #lows aroun the image;I7HT isplays image on the right si e o# the

win ow an surroun ing content #lows arounthe image


39/229

8sing H,I7HT an 2I TH to 7i3eiNe Hints

)HTML*)H,& * )TITL,*8sing H,I7HT an 2I TH to gi3e siNe

hints)+TITL,*)+H,& *)/0 Y*)IM7 ;(


40/229

8sing the &LT &ttribute

)HTML*)H,& * )TITL,*8sing the &LT attribute)+TITL,*

)+H,& *)/0 Y*)IM7 ;(


41/229

raming an Image with a /or er )HTML*)H,& * )TITL,*8sing the /0; ,; attribute)+TITL,*)+H,& *)/0 Y*)IM7 ;(


42/229

7i3ing an Image pace)HTML*)H,& * )TITL,*8sing the /0; ,; attribute)+TITL,*)+H,& *)/0 Y*)IM7 ;(


43/229

8sing an Image as an &nchor

)& H;,


44/229

Internal Links

irst! you must create an anchor in the HTML #ilethat in icates the location to which you're linking.

)& 9&M,


45/229

(reating a Link to ,-Mail

)& H;, mycom.com=* enme ,-mail)+&*.


46/229

(reating an 0r ere List)HTML*)H,& *)TITL,*or ere List ,xample)+TITL,*)+H,& *)/0 Y*)0L*

)LH*),M*(olors o# the pectrum5)+,M*)/;* )LI*;e )LI*0 range )LI*Yellow )LI*7reen

)LI*/lue )LI*In igo )LI*1iolet)+0L*)+/0 Y*

)+HTML*


47/229

9este 0r ere List ,xample)0L* )LH*),M*6lanets o# the olar ystem5)+,M*)/;*

)LI*Mercury )0L* )LI* E.D million kilometers #rom the sun )LI*no satellites )+0L* )LI*1enus )0L * )LI*C J million kilometers #rom the sun )LI*9o satellites )+0L*)LI*Mars )0L* )LI*KKE.D million kilometers #rom the sun )LI*two satellites )0L* )LI*6hobos )LI* eimos )+0L )+0L*)+0L*


48/229

& itional )0L* &ttributes Attribute Description

(0M6&(T ;en ers the list in a more compact #orm TY6,


49/229

(reating an 8nor ere List

You use the TY6, attribute to change thebullet use in the list. Its 3alue can be oneo# isc! s4uare! or circle.


50/229

(reating e#inition Lists

The ) L* element pro3i es both abeginning an en ing line break.

In the ) L* container! the ) T* tagmarks the term an

the ) * tag e#ines the paragraph.


51/229

The stan ar #ormat o# a e#inition list isas #ollows5

) L*) T*Term) * e#inition o# term

)+ L*


52/229

ormatting (ontent with Tables

The )T&/L,* element is the container #orthe table's ata an layout.

HTML tables are compose row by row5you in icate a new row with the )T;*$table row% tag! an

you separate the ata with either the)TH* $table hea er% or )T * $table ata%tags.


53/229

The basic HTML tags are)T&/L,*)+T&/L,*--These HTML tags are the containers

#or the rest o# the table ata.

)T;*)+T;*--,ach row in the table is containe by thesetags. You can optionally lea3e o## the closing )+T;* tag.

)T *)+T *-- e#ines a cell. Table ata is containe withinthese tags. You can also nest a itional tables within asingle cell. You can optionally lea3e o## the closing )+T *tag.

)TH*)+TH*--These table hea er tags are use to e#inehea ers! usually in the #irst row or column o# the table.You can optionally lea3e o## the closing )+TH* tag.

)HTML*


54/229

)HTML*)H,& *)TITL,*/asic Table ,xamples)+TITL,*

)+H,& *)/0 Y*)T&/L, /0; ,;* )T;*)TH*(olors)+TH*)TH*0#)+TH*)TH*The ;ainbow)+TH*)T;*)T *;e )+T *)T *0range)+T *)T *Yellow)+T *)+T;*)T;*

)T *7reen)+T *)T */lue)+T *)T *1iolet)+T *)+T;*)+T&/L,*)H;*

)T&/L /0; ;*


55/229

)T&/L, /0; ,;* )(&6TI09*My a3orite 7roups)+(&6TI09* )T;*)TH*;ock)+TH*

)T *6ink loy )+T *

)T *Le Oepplin)+T * )T *The obbie /rothers)+T * )+T;* )T;*)TH* o#t)+TH*

)T * imon an 7ar#unkel)+T *

)T *6eter! 6aul! Q Mary)+T * )T *9eil Young)+T * )+T;* )T;*)TH*9ew &ge)+TH*)T *,nya)+T * )T *(lanna )+T *

)T * teamroller)+T * )+T;*)+T&/L,*)+/0 Y*)+HTML*


56/229

/0; ,; attribute--the number o# pixelswi e you want the bor er!like this5 /0; , ;


57/229

&ligning Table ,lements &LI79 an 1&LI79 attributes! can be

use to align table elements within theircells in many i##erent ways.

These attributes can be applie in 3arious

combinations to the )(&6TI09*! )T;*!)TH*! an )T * )(&6TI09*--The &LI79 attribute can be

speci#ie #or this element with possible3alues o# T06 an /0TT0M $the e#ault isT06%\ this places the table caption abo3eor below the table.


58/229

)T;*--The &LI79 attribute can be speci#ie #orthis element with possible 3alues o# L, T!;I7HT! an (,9T,; $the e#ault is L, T #or

table ata elements an (,9T,; #or tablehea er elements%! an the 1&LI79 attribute can be speci#ie with

possible 3alues o# T06! /0TT0M! MI L,! an/& ,LI9, $the e#ault is MI L,%.


59/229

2orking with & 3ance TablesThe ;&M, attribute speci#ies which si es o# a

#rame to ren er. It has the #ollowing possible3alues5

10I ----- 9o rame &/01, -----Top i e /,L02 ----- /ottom i e H I , ------ HoriNontal i es LH ------ Le#t-Han i e

;H ----- ;ight-Han i e 1 I , ---- 1ertical i es /0@ or /0; ,; ---- &ll our i es


60/229

The 3alue /0; ,; is inclu e #orbackwar s-compatibility with HTML B.K.)T&/L, ;&M,


61/229

Here are the 3alues #or ;8L, ! an their meanings5

909, 9o rules 7;086 HoriNontal rule between all row groups an a

3ertical rule between all column groups ;02 7;086 rulings! plus horiNontal rules

between all rows (0L 7;086 rulings! plus 3ertical rules between

all columns

&LL ;ules between all rows an all columns


62/229

)HTML*)H,& *)TITL,*Table /or ers)+TITL,*)+H,& *)/0 Y*)T&/L, /0; ,;* )T;*)TH* ;8IT )+TH*)TH*1,7,T&/L, )+TH*)TH*2H0L,

7;&I9 )+TH*)+T;* )T;*)T *&pple)+T *)T */roccoli)+T *)T */arley)+T *)+T;*

)T;*)T *0range)+T *)T *(auli#lower)+T *)T *2eat/erries)+T *)+T;* )T;*)T *:iwi)+T *)T * ugar nap

6ea)+T *)T *Millet)+T *)+T;* )T;*)T *6ineapple)+T *)T */ell

pepper)+T *)T *Auinoa)+T *)+T;*)+T&/L,*)+/0 Y*)+HTML*

)HTML*


63/229

)HTML*)H,& *)TITL,*Table /or ers)+TITL,*)+H,& *

)/0 Y*)T&/L,* )T;*)T *)IM7 ;(


64/229

panning ;ows an (olumns To span two a "acent cells on a row! use

the ;02 6&9 attribute with )TH* or)T *! as #ollows5)T ;02 6&9


65/229

)H,& *)TITL,*;ow an (olumn panning)+TITL,*)+H,& *)/0 Y*)T&/L, /0; ,;* )T;*)TH (0L 6&9


66/229

7rouping ;ows an (olumns (0L7;086 assigns wi th an alignment attributes #or a

group o# columns. or example! i# you ha a table with six columns an you

wante each o# the #irst three columns to be pixelswi e an le#t-aligne ! each o# the secon two columns to

be C pixels wi e an character-aligne on a ecimalpoint! an the last column to take up the remain er o#the screen wi th an right-aligne ! you coul accomplishall o# this #ormatting with "ust the #ollowing three lines o#HTML5

)(0L7;086 2I TH


67/229

T/0 Y! TH,& ! an T 00T per#orm#unctions similar to (0L7;086! but they

group rows instea o# columns. TH,& an T 00T e#ine a group o#

rows to #orm a hea er or #ooter #or a table!

respecti3ely. T/0 Y is use to group rowsin the bo y o# the table. ,ach is a container--that is! it is ma e up

o# correspon ing begin an en tags! as in)T/0 Y*)+T/0 Y*--but the en tags #orTH,& an T 00T are optional! as longas a T/0 Y tag imme iately #ollows.

)T&/L, (,LL6& I97


68/229

) , (, ) ) ; , @!THEAD( )T;* )TH*2eek ay)+TH* )TH* ate)+TH*

)TH*Manager)+TH* )TH*Aty)+TH* )+T;* !+THEAD( !TB*D,(

)T;* )T *Mon)+T * )T * D+CC)+T * )T *:elsey)+T *)T *FBD)+T * )+T;* )T;* )T *Tue)+T * )T * D+CK)+T * )T *Lin sey)+T *

)T * DF)+T * )+T;* )T;* )T *2e )+T * )T * D+CB)+T * )T *;an y)+T *

)T *CCB )+T * )+T;*

)T;* )T *Thu)+T * )T * D+C )+T * )T * usan)+T *)T *C K)+T * )+T;* )T;* )T * ri)+T * )T * D+C )+T * )T *;an y)+T *

)T *D J)+T * )+T;* )T;* )T * at)+T * )T * D+CF)+T * )T *Lin sey)+T *

)T *BEC)+T * )+T;*

)T;* )T * un)+T * )T * D+CE)+T * )T * usan)+T *)T *KEK)+T * )+T;* !+TB*D,( !T-**T( )T;* )TH &LI79


69/229

(ontrolling Table Layout

( t lli g T bl L t


70/229

(ontrolling Table Layout)HTML*)H,& *

)TITL,* ormatting ,xample*)+TITL,*)+H,& *)/0 Y*)T&/L, /0; ,;


71/229

The attributes are as #ollows52I TH attribute--This enables you to speci#y the wi th o#

the table! either in pixels or as a percentage o# the wi th

o# the browser win ow. You can also use this attributewith in i3i ual cells. H,I7HT attribute--This enables you to speci#y the height

o# the table! either in pixels or as a percentage o# theheight o# the browser win ow. You can also use this

attribute with in i3i ual cells. /0; ,; attribute--This attribute puts a bor er arounthe table. You speci#y the wi th o# the bor er in pixels!like this5

/0; ,;


72/229

8sing (olor in Tables You use the /7(0L0; attribute to

change the color o# a cell's backgroun !be#ore any text or images are place intothe cell.

You use the /0; ,;(0L0; attribute tochange the color o# the bor er aroun thecell. /oth 9etscape an Internet ,xplorer

support these attributes.

)HTML*)H & *


73/229

)H,&)TITL,* oramtting ,xample)+TITL,*)H,& *)/0 Y*)T&/L, /0; ,; /0; ,;(0L0;


74/229

The rameset (ontainer5 rames are containe in a structure calle

a ;&M, ,T! which takes the place o#the /0 Y container on a #rames-#ormatte page.

&n HTML ocument that contains a;&M, ,T e#inition has no /0 Y

section in its HTML co e! an a page witha /0 Y section cannot use the) ;&M, ,T* tag.

-raming ,our We. #ite

& i l


75/229

& simple rame

)HTML*)H,& *)+H,& *) ;&M, ,T (0L


76/229

imple rame 7ri)HTML*)H,& *)+H,& *) ;&M, ,T ;02


77/229

(omplex 7ri o# rames)HTML*)H,& *)+H,& *) ;&M, ,T ;02


78/229

Mo i#ying a rame s Look an eel

-rame Margins The ;&M, attributes M&;7I92I TH anM&;7I9H,I7HT gi3e you control o3er the wi tho# the #rame's interior margins.

) ;&M, M&;7I9H,I7HT


79/229

-rame Borders You use the /0; ,;! ;&M,/0; ,;!

an /0; ,;(0L0; attributes to set thelook an #eel o# the bor ers #or your#rameset.

The /0; ,; attribute is use only withthe ) ;&M, ,T* tag.

It is assigne a 3alue in pixels!

like this5 ) ;&M, ,T /0; ,;


80/229

The ;&M,/0; ,; attribute can be

use with either the ) ;&M, ,T* or) ;&M,* tag. It has two legitimate 3alues! Y, an 90. I# ;&M,/0; ,;


81/229

The /0; ,;(0L0; attribute can be usewith the ;&M, ,T tag or with the ;&M,tag. or example-

) ;&M, ,T /0; ,;(0L0;


82/229

Targeted H0 erlinks

1aming and Targeting -rames The 9&M, attribute assigns a name to a #rame

that can be use to link to the #rame! #or eg. ) ;&M, ;(


83/229


84/229

Collecting In ut 2ith orms


85/229

Collecting In ut 2ith -orms

There are three types o# tags #or creating#iel s5 )T,@T&;,&*!

) ,L,(T*! an )I968T*. You can put any number o# these tags

between the ) 0;M* an )+ 0;M*container tags.

) 0;M*


86/229

) 0;MThe ) 0;M* tag comes at the beginning

o# any #orm.2hen you create a ) 0;M* tag! you alsoe#ine the script it uses an how it sen sata using the &(TI09 an M,TH0

attributes5 ) 0;M M,TH0


87/229

(This attribute points the #orm to an 8;L that willaccept the #orm's in#ormation an o something

with it.I# you on't speci#y an &(TI09! it sen s thein#ormation back to the same 8;L the pagecame #rom.

M,TH0This attribute tells the #orm how to sen itsin#ormation back to the script. The mostcommon metho is 60 T! which sen s all thein#ormation #rom the #orm separately #rom the8;L. The other option #or M,TH0 is 7,T!which attaches the in#ormation #rom the #orm tothe en o# the 8;L.


88/229

2ith )T,@T&;,&*! you can pro3i e a

#iel #or someone to enter multiple lines o#in#ormation. /y e#ault! a )T,@T&;,&* #orm shows a

blank #iel #our rows long an characters wi e.

The options #or the )T @T&; &* tag are as


89/229

The options #or the )T,@T&;,&* tag are as#ollows5

9&M, This is re4uire . It e#ines the name #or the ata.

;02 This sets the number o# rows in the #iel . (0L This sets the wi th o# the #iel in characters. e#ault text

&ny text between the )T,@T&;,&* an)+T,@T&;,&* tags is use as e#ault text anshows up insi e the #iel .

,xample5


90/229

, p

)HTML*

)H,& *)TITL,*T,@T&;,&.HTM)+TITL,*)+H,& *)/0 Y*) 0;M*)T,@T&;,& 9&M,


91/229

The ) ,L,(T element shows a list o#choices in either a pop-up menu or a

scrolling list. It's set up as an opening an closing tag

with a number o# choices liste in

between.

The options #or the ) ,L,(T* element are as #ollows5


92/229

p ) , ,( 9&M, This is re4uire . It e#ines the name #or the ata. IO, This attribute etermines how many choices to show.

[ I# you omit IO, or set it to C! the choices are shown as arop- own list.

[ I# you set it to K or higher! it shows the choices in a scroll box. [ I# you set IO, larger than the number o# choices you ha3e

within ) ,L,(T*! a nothing choice is a e . 2hen the enuser chooses this! it's returne as an empty #iel .

M8LTI6L,

This allows multiple selections. I# you speci#y multiple!a scrolling win ow isplays--regar less o# the number o#choices or the setting o# IO,.

Exam le o' #election3


93/229

)HTML*)H,& *)TITL,* ,L,(TC.HTM)+TITL,*)+H,& *)/0 Y*2hat type o# connection5

) 0;M*) ,L,(T 9&M,


94/229

#election 2ith *ther * tion3


95/229

)HTML*)H,& *

)TITL,* ,L,(TB.HTM)+TITL,*)+H,& *)/0 Y*) 0;M*2hat type o# (onnection5) ,L,(T M8LTI6L, 9&M,


96/229

)

)I968T*! unlike )T,@T&;,&* an) ,L,(T*! is a single tag option #orgathering in#ormation.

)I968T* contains all o# the other options#or ac4uiring in#ormation! inclu ing simpletext #iel s! passwor #iel s! ra io buttons!

check boxes! an the buttons to submitan reset the #orm.

The attributes #or the )I968T* tag are the# ll i 5


97/229

#ollowing5 9&M,

This e#ines the name #or the ata. This #iel isre4uire #or all the types o# input except ubmitan (lear.

IO, This is the siNe o# the input #iel in number o#characters #or text or passwor .

M&@L,97TH

This speci#ies the maximum number o#characters to be allowe #or a text or passwor#iel .

1&L8


98/229

1&L8, or a text or passwor #iel ! it e#ines the

e#ault text isplaye . or a check box or ra iobutton! it speci#ies the 3alue that is returne tothe ser3er i# the box or button is selecte . orthe ubmit an ;eset buttons! it e#ines the textinsi e the button.

(H,(:, This sets a check box or ra io button to on. It

has no meaning #or any other type o# )I968T*tag.

TY6, This sets the type o# input #iel you want to

isplay.


99/229

6& 20; ! a mo i#ie T @T #iel ! isplays type


100/229

6& 20; ! a mo i#ie T,@T #iel ! isplays typecharacters as bullets instea o# the characters actuallytype .

)HTML*)H,& *)TITL,*I968TK.HTM)+TITL,*)+H,& *)/0 Y*) 0;M*,nter the secret wor 5 )I968T TY6,


101/229

$re4uire %!1&L8,! an (H,(:, $which e#aults the check box aschecke %.

)HTML*)H,& *)TITL,*(H,(:/[email protected])+TITL,*)+H,& *)/0 Y*

) 0;M*)I968T TY6,


102/229

6ossible attributes to inclu e with the TY6, textinclu e 9&M, $re4uire %! 1&L8,! an (H,(:, .

)HTML*)H,& *)TITL,*;& I0C.HTM)+TITL,*)+H,& *)/0 Y*) 0;M*

)I968T TY6,


103/229

clearing all the ata in the #orm to its original 3alue. You can use the 1&L8, attribute with the ;, ,T tag to

pro3i e text other than ;eset $the e#ault% #or the button.

)HTML*)H,& *)TITL,*;, ,T.HTM)+TITL,*)+H,& *

)/0 Y*) 0;M* )I968T TY6,


104/229

p yscript.

You can use the 1&L8, attribute with 8/MIT to pro3i e text otherthan ubmit Auery $the e#ault% #or the button.

)HTML*)H,& *)TITL,* 8/MIT.HTM)+TITL,*)+H,& *)/0 Y*

) 0;M* )I968T TY6,


105/229

)HTML*)H,& *

)TITL,* orm Layout an esign)+TITL,*)+H,& *)/0 Y*)HC*9ot 8sing 6;, tags)+HC*) 0;M* 9ame5 )I968T TY6,


106/229

)HTML*)H,& *)TITL,* orm Layout an esign)+TITL,*

)+H,& *)/0 Y*)HC*8sing 6;, tags)+HC*) 0;M* )6;,*

9ame5 )I968T TY6,


107/229

)HTML*)H,& *)TITL,* orm Layout an esign)+TITL,*)+H,& *)/0 Y*)HC*8sing HTML Tables)+HC*

) 0;M* )T&/L,* )T;*)T *9ame5)+T *)T *)I968T TY6,


108/229

(ont..)T;*)T *)+T *)T *)I968T TY6,


109/229

)HTML*)H,& *)TITL,* orm Layout an esign)+TITL,*)+H,& *)/0 Y*)HC* escripti3e List Tags)+HC*) 0;M* ) L* ) T*How woul you like to pay #or this

) *)I968T 9&M,


110/229

() L* ) T*(re it (ar ) *)I968T 9&M,


111/229

)HTML*)H,& *

)TITL,* orm Layout an esign)+TITL,*)+H,& *)/0 Y*)HC*(heckboxes an ;a io /uttons)+HC*) 0;M*

2hat siNe woul you like )/;* )I968T 9&M,


112/229

y 2hen you're creating #orms! it's always a goo i ea to

keep the #orm on a single page. I# your #orm is 3ery short! keep it un er C lines. This

ensures that it will #it on one page in most browsers. It oesn't always work! but it oes create a compact

page that's easy #or most people to see. & goo trick #or keeping the pages compact is using

) ,L,(T* tags with the siNe set to C $to show a pop-upmenu% or B or $#or a small scrolling win ow #ormultiple choices% instea o# ha3ing large numbers o#check boxes an ra io buttons.

I# your #orm is large $more than two pages on anybrowser%! on't put the ubmit or ;eset buttons in themi le o# the #orm.

9ew Tag &ttributes


113/229

g &((, :,Y is a new attribute #or use

with the L&/,L! &! an (&6TI09 tags.2ith it! you can e#ine a single case-insensiti3e hotkey #or acti3ating a #orms

element. or example! )L&/,L &((, :,Y


114/229

The new I &/L, attribute #or I968T!T,@T&;,&! ,L,(T! 06TI09! 0/Z,(T!

L&/,L! an /8TT09 turns o## an elementan grays it out on the screen. $Theelement is also skippe when tabbingbetween elements.%

It shoul be use when a #orm element iscurrently inappropriate or i# you want toskip a #iel #or some reason.

0nce I &/L, ! the only way to turn anelement back on is by using an associatescript! such as Za3a cript.

The T,@T&;,& tag an the I968T tag's


115/229

,@ ;, g gT,@T an 6& 20; types ha3e a new

;,& 09LY attribute that can be use toprohibit user input in those #iel s. I# you want to pass back some ata that

you'3e preset #or a user! this is one way too it.

&t the same time! you're making sure thatata is known to the en user but is not

mo i#iable by him. &gain! you can use ascript to change this state ynamically i#you wish.

09(LI(:! 09 0(8 ! 09/L8;! 09 ,L,(T!an 09(H&97 are new attributes that


116/229

an 09(H&97, are new attributes that#unction as placehol ers #or scripts that run

when each o# the in icate e3ents occurs. [ The 09(LI(: script runs when a mouse click occurso3er an element!

[ 09 0(8 when it becomes the input #ocus!

[ 09/L8; when the #ocus mo3es away #rom theelement! [ 09 ,L,(T when chosen! an [ 09(H&97, when ata in the #iel has change . [ These exciting new attributes open up a worl o# new

possibilities. &gain! the speci#ics o# theirimplementation await browsers that can interpretthese new attributes.

9ow you'll be able to! thanks to the new


117/229

TITL, attribute! which is a3ailable #or use

with all #orm input elements. Zust speci#yTITL,


118/229

p#or tabbing through elements.

You hit the Tab key an the #orm's input #ocusa 3ance to whate3er element was next in lineby 3irtue o# where it appeare in the HTMLsource.

The new HTML . T&/I9 ,@ attribute!T&/I9 ,@


119/229

label with a #orm element. It is use#ul #orcreating a user inter#ace #or selecting a#orm control. or example!

)L&/,L 0;


120/229

ubmit an ;eset buttons.

HTML . #orms impro3e on this with auser- e#inable /8TT09 element. The /8TT09 tag works in con"unction

with the new 09(LI(: attribute! whichassociates clicking the button withexecuting a script.

The I &/L, ! T&/I9 ,@! 09 0(8 !an 09/L8; attributes are alsosupporte by /8TT09.


121/229

)/8TT09 09(LI(:


122/229

con"unction with a new (&6TI09 container togroup #orm elements! as in this example5

) I,L ,T* )(&6TI09 &((, :,Y


123/229

What is 5a4a#cri t6

Za3ascript is an easy-to-use scriptinglanguage that can be embe e in thehea er o# your web pages.

It can enhance the ynamics aninteracti3e #eatures o# your page byallowing you to per#orm calculations! check#orms! write interacti3e games! a special

e##ects! customiNe graphics selections!create security passwor s an more.

The !#C$IPT( tag


124/229

( g To assist the browser in recogniNing lines

o# co e in an HTML ocument asbelonging to a script! you surroun lines o#script co e with a ) (;I6T*...)+ (;I6T*

tag set. This is common usage in HTML! where

start an en tags encapsulate content

controlle by that tag! whether the tag setbe #or a #orm or a bol #ont.

epen ing on the browser! the ) (;I6T*t h 3 i t # tt ib t t


125/229

tag has a 3ariety o# attributes you can setthat go3ern the script.

0ne attribute share by 9a3igator anInternet ,xplorer is the L&978&7,attribute.

This attribute is essential because eachbrowser bran an 3ersion accepts a

i##erent set o# scripting languages.

0ne setting that all scriptable browsersaccept is the Za3a cript language! as in

Tag ositions


126/229

2here o these tags go within a

ocument &nywhere they re nee e in the ocument. ometimes it makes sense to inclu e thetags neste within the )H,& *...)+H,& *tag set\other times it is essential that the script be

roppe into a 3ery speci#ic location in the)/0 Y*...)+/0 Y* section.

#cri ts in the Head


127/229

)HTML*

)H,& *)TITL,*& ocument)+TITL,*) (;I6T L&978&7,


128/229

)HTML*)H,& *)TITL,*& ocument)+TITL,*)+H,& *)/0 Y*) (;I6T L&978&7,


129/229

)HTML)H,& *

)TITL,*& ocument)+TITL,*) (;I6T L&978&7,


130/229

2orking on use 'ollo2ing scri t3

)HTML*)/0 Y*)HC*Let's criptG)+HC*)H;*) (;I6T L&978&7,


131/229

Za3a cript statement you write oessomething with a chunk o# in#ormation d

ata. The chunk o# ata may be text in#ormation

isplaye on the screen by a Za3a criptstatement or the on+o## setting o# a ra iobutton in a #orm.

,ach single piece o# in#ormation inprogramming is also calle a 3alue.

1ariables


132/229

The most con3enient way to work withata in a script is to #irst assign the ata to

what is calle a 3ariable.

It s usually easier to think o# a 3ariable asa basket that hol s in#ormation.

Creating a 4aria.le


133/229

8se the var keywor ! #ollowe by the nameyou want to gi3e that 3ariable.

,x5var age

orvar age=25 or

var ageage=25

,xample C5)HTML*)


134/229

)H,& *)TITL,*& ocument)+TITL,*

) (;I6T L&978&7,


135/229

parseInt$ % an parse loat$ % built-in

#unctions are use .,xample 5parseInt$= K=% ++result < K

parseInt$= K.BB=% ++result < KBPBP=B= ++result < =FB=BPBPparseInt$=B=% ++result < D

parse loat$= K=% ++result < Kparse loat$= K.BB=% ++result < K.BB


136/229

Con4erting num.ers to strings3

/y a ing an empty string to a number!you con3ert the number to its stringe4ui3alent5

$== P K % ++result < =K =$== P K %.length ++result <

Arithmetic * erators3


137/229

The stan ar math operators #or a ition!

subtraction! multiplication! an i3ision $P! -! ^! +%are built into Za3a cript. Com arison o erators

&nother category o# operator helps youcompare 3alues in scripts d whether two 3aluesare the same! #or example.These kin s o# comparisons return a 3alue o#

the /oolean type d true or #alse.


138/229

(ontrol tructures


139/229

I# constructionsif (c !"iti !# $ %tate&e!t'% if tr)e

*+ r eg,if (- )rAge < ./# $

a0ert(1S rr- - ) ca!! t v te3# *

I' 7 7 7 else constructions


140/229

The #ormal syntax e#inition #or an i#...else

construction is as #ollows5if (c !"iti !# $ %tate&e!t'% if tr)e

*e0%e $ %tate&e!t'% if fa0%e

*

or g5


141/229

or ,g5

3ar #eb ays < 3ar theYear < CDDBi# $theYear ]


142/229

f r ('i!itia0 e4pre%%i ! 'c !"iti ! ')p"ate

e4pre%%i ! # $ %tate&e!t'% i!%i"e 0 p

*

The #ollowing example isplays numbersbetween C to C .

#or $ count


143/229

& #unction is a e#inition o# a set o#e#erre actions.

unctions are in3oke by e3ent han lersor by statements elsewhere in the script.

2hene3er possible! goo #unctions areesigne to be reusable in otherocuments.

& #unction is capable o# returning a 3alueto the statement that in3oke it! but this isnot a re4uirement.

ormal syntax #or a #unction is as #ollows5


144/229

f)!cti ! f)!cti !Na&e ( 'para&eter. 333' para&eterN # $ %tate&e!t'%

*

+ r Eg,

f)!cti ! get6a0f(i!c &i!gPara&eter# $ ret)r! i!c &i!gPara&eter:2 *


145/229

; 8 " c)&e!t3 rite(96a0f t?e !)&@er f . 3B

i%, 9 get6a0f(. 3B# 99# " c)&e!t3 rite(96a0f t?e !)&@er f .23

i%, 9 get6a0f(.23 ##

8 !e3

)html*)hea *)title* ,xample 2in ow)+title*


146/229

)script language


147/229

)#orm name


148/229

The Za3a cript array is one o# the most use#ul

ata constructions a3ailable to you. The structure o# a basic array resembles that o# a

single-column sprea sheet. ,ach row o# the column hol s a istinct piece o#

ata! an each row is numbere . 9umbers assigne to rows are in strict numerical

se4uence! starting with Nero as the #irst row.

This row number is calle an in ex. To access anitem in an array! you nee to know the name o#the array an the in ex #or the row.

Creating an Arra0


149/229

3ar 8 tates < new &rray $ C%8 tates - name o# the 3ariablenew - keywor

&rray$ C%- how many elements e3entually willoccupy the memory.

[ The #irst row o# the 8 tates array isa resse as 8 tatesX

&n to assign the string name o# the #irst# h l h b h !


150/229

state o# the alphabet to that row! use a

simple assignment operator58 tatesX < &labama

To #ill in the rest o# the rows! inclu e a

statement #or each row58 tatesXC < &laska8 tatesXK < &riNona

8 tatesXB < &rkansas...8 tatesX < 2yoming

,xample C


151/229

)H,& *

)TITL,* &rray 6rogram )+TITL,*) (;I6T L&978&7,< Za3a cript=*3ar a


152/229

)script language


153/229

3ar arrC < new &rray $CK! !KK! %\

3ar arrK < new &rray $ !K%\3ar arrB < new &rray $K%\

ocument.write$=)br* um o# arrC < = P go$arrC%%\

ocument.write$=)br* um o# arrK < = P go$arrK%%\ocument.write$=)br* um o# arrB < = P go$arrB%%\

)+script*


154/229

out ut3um o# arrC < JJum o# arrK < E

um o# arrB < 9a9 ++9ot a 9umber

Arra0s 2ith Mixed Element T0 es)script language


155/229

)script language


156/229

Test

K.Kp ````````````` Length


157/229

or the case where the element is a string!boolean! or non-integer numeric! you canassociate another 3ariable or ob"ect with

that element an access that new 3ariableor ob"ect using the name o# the originalarray an the 3alue store in the element.


158/229


159/229

output59ame


160/229

my&rray < new &rray$=Tom=! = ick=! =Harry=! = ue=%\

ocument.write$= isplay my&rray)/;*=%\ #or$cnt < \ cnt ) my&rray.length \ cntPP% ocument.write$=,lement = P cnt P = < = P my&rrayXcnt

P=)/;*=%\

ocument.write$=)/;* ort an isplay the array)/;*=%\ my&rray.sort$%\ ++sort$% is the built in metho #or$cnt < \ cnt ) my&rray.length \ cntPP% ocument.write$=,lement = P cnt P = < = P my&rrayXcnt

P=)/;*=%\ )+ (;I6T* )+H,& * )/0 Y* )+/0 Y*)+HTML*

0utput


161/229

isplay my&rray

,lement < Tom,lement C < ick,lement K < Harry,lement B < ue

ort an isplay the array,lement < ick,lement C < Harry

,lement K < ue,lement B < Tomone.

*.8ects and Pro erties Your web page ocument is an ob"ect. &ny table!


162/229

#orm! button! image! or link on your page is also anob"ect. ,ach ob"ect has certain properties$in#ormation about the ob"ect%. or example! thebackgroun color o# your ocument is writtendocument7.gcolor . You woul change the color o#your page to re by writing the line5" c)&e!t3@gc 0 r=9re"9

The contents $or 3alue% o# a textbox name=passwor = in a #orm name =entry#orm= is" c)&e!t3e!tr-f r&3pa%% r"3va0)e3

Document Object Model


163/229

Methods


164/229

Most ob"ects ha3e a certain collection o# things that theycan do . i##erent ob"ects can o i##erent things! "ust as a

oor can open an close! while a light can turn on ano##. & new ocument is opene with the methodocument7o en9: You can write =Hello 2orl = into a

ocument by typing " c)&e!t3 rite(96e00 D r0"9# .o en9: an 2rite9: are both &et? "% o# the ob"ect5ocument.

or example5" c)&e!t3@gc 0 r=9re"9 is a property because I'm

changing the existing etails about the ocument.a0ert(96e00 T?ere9# is a metho because it createssomething new! an alert box.

E4ents


165/229

,3ents are how we trigger our #unctions torun. The easiest example is a button!whose e#inition inclu es the wor s

!C0ic =9r)!F&-Ff)!cti !(#93 The on(lick

e3ent! as its name implies! will run the#unction when the user clicks on thebutton. 0ther e3ents inclu e

0nMouse03er! 0nMouse0ut! 0n ocus!0n/lur! 0nLoa ! an 0n8nloa .

EVE1T# I1 A -*$M


166/229

There are B e3ents which are particularlyuse#ul when working in a #orm.

on ocus

on/lur on(hange


167/229

) 0;M*)I968T TY6,


168/229

) (;I6T*

#unction get elect$s% return s.optionsXs.selecte In ex .3aluef)+ (;I6T*

) 0;M*) ,L,(T 9&M,


169/229

)bo y) (;I6T*#unction get elect$s%

ocument.write$s.selecte In exP=)br*=Ps.optionsXs.selecte In ex .3alue%\f)+ (;I6T*) 0;M*

) ,L,(T 9&M,


170/229


171/229

Accessing 2indo2 ro ertiesand methods


172/229

cript re#erences to properties anmetho s o# the win ow ob"ect can bewor e in se3eral ways. The most logicalan common way to compose suchre#erences inclu es the win ow ob"ect inthe re#erence5

win ow. pr pert-Na&e win ow.&et? "Na&e('para&eter% #

& win ow ob"ect also has a synonym when the

script oing the re#erencing is pointing to the


173/229

win ow that houses the ocument. The synonym is %e0f . ;e#erence syntax then

becomes

sel#. pr pert-Na&e

sel#.&et? "Na&e $X para&eter% %


174/229


175/229

)+H,& *)/0 Y*) 0;M*)I968T TY6,


176/229

)HTML )H,& )TITL, win ow. e#ault tatusproperty)+TITL,*

) (;I6T L&978&7,


177/229

0ther win ow metho sK. win ow.alert propertyB. win ow.prompt property

. win ow.con#irm property

)ht l*


178/229

)html*)hea *)script language


179/229

#unction con#$ %

i# $con#irm$'2ish to open another ocument '%%location< test.html=\f)+script*)+hea *)bo y onloa


180/229

Most interacti3ity between a 2eb pagean the user takes place insi e a #orm.

That s where text #iel s! buttons!

checkboxes! option lists! an so on arepresent.

The -orm *.8ect


181/229

& #orm ob"ect can be re#erence either by itsposition in the array o# #orms containe by aocument or by name $i# you assign a name to

the #orm in the ) 0;M* tag%. ,3en i# only one #orm appears in the ocument!

it is a member o# a one-element array! an isre#erence as #ollows5

" c)&e!t3f r&%' ;)t if - ) a%%ig! a !a&e t t?e f r& %i&p0- p0)g

t?e f r& % !a&e i!t t?e refere!ce," c)&e!t3f r&Na&e


182/229

orms are create entirely #rom stan arHTML tags in the page. You can setattributes #or 9&M,! T&;7,T! &(TI09

an M,TH0 ." c)&e!t3f r&%' 3acti !" c)&e!t3f r&Na&e3acti !

'orm7elements;< ro ert0


183/229

In a ition to keeping track o# each type o#element insi e a #orm! the browser alsomaintains a list o# all elements within a

#orm. This list is another array! with items listeaccor ing to the or er in which their HTMLtags appear in the source co e.

cript to ,mpty the text boxes


184/229

3ar #orm < win ow. ocument.#ormsX#or $3ar i < \ i ) #orm.elements.length\ iPP% i# $#orm.elementsXi .type < text %

#orm.elementsXi .3alue < f

Text 0b"ects


185/229

)HTML*)H,& *)TITL,* Text 0b"ect 3alue property )+TITL,*) (;I6T L&978&7,


186/229

)+H,& *)/0 Y*) 0;M on ubmit < =return #alse=*)I968T TY6, < =text= 9&M, < =con3ert= 1&L8,

HTMLppt [Autosaved]

Documents

Transcript of HTMLppt [Autosaved]