Post on 01-Jun-2018
8/9/2019 HTMLppt [Autosaved]
1/229
8/9/2019 HTMLppt [Autosaved]
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.
8/9/2019 HTMLppt [Autosaved]
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.
8/9/2019 HTMLppt [Autosaved]
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*
8/9/2019 HTMLppt [Autosaved]
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.
8/9/2019 HTMLppt [Autosaved]
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.
8/9/2019 HTMLppt [Autosaved]
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/9/2019 HTMLppt [Autosaved]
8/229
& airly etaile H,& ,lement)H,& *
)TITL,*7eneral 0##icers o# the 8 &rmy in the (i3il2ar)+TITL,*)LI9: H;, ia.net= ;,1
8/9/2019 HTMLppt [Autosaved]
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;, .
8/9/2019 HTMLppt [Autosaved]
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.
8/9/2019 HTMLppt [Autosaved]
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 .
8/9/2019 HTMLppt [Autosaved]
12/229
)HTML*)H,& *
)TITL,*8sing the atellite I enti#ication an Trackingystem $ IT %)+TITL,*)LI9: ;,1
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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.
8/9/2019 HTMLppt [Autosaved]
15/229
)HTML*)H,& *)TITL,*7eneral 0##icers o# the 8 &rmy in the
(i3il 2ar)+TITL,*)M,T& 9&M,
8/9/2019 HTMLppt [Autosaved]
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.
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
18/229
Teal J J 7ray J J J il3er ( ( (
;e Lime Yellow /lue uchsia &4ua 2hite
8/9/2019 HTMLppt [Autosaved]
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*
8/9/2019 HTMLppt [Autosaved]
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.
8/9/2019 HTMLppt [Autosaved]
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 .
8/9/2019 HTMLppt [Autosaved]
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.
8/9/2019 HTMLppt [Autosaved]
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%.
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
25/229
)H;*)HK &LI79
8/9/2019 HTMLppt [Autosaved]
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 .
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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.
8/9/2019 HTMLppt [Autosaved]
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.
8/9/2019 HTMLppt [Autosaved]
30/229
) 86* The superscript element mo3esthe text higher than the surroun ing textan $i# possible% isplays the text in asmaller siNe #ont.
8/9/2019 HTMLppt [Autosaved]
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 &(,
8/9/2019 HTMLppt [Autosaved]
32/229
)HTML*)H,& *)TITL,* ont election ,xample)+TITL,*
)+H,& *)/0 Y*) 09T &(,
8/9/2019 HTMLppt [Autosaved]
33/229
The IO, &ttribute)HTML*)H,& *)TITL,* ont iNe ,xample)+TITL,*)+H,& *)/0 Y*) 09T IO,
8/9/2019 HTMLppt [Autosaved]
34/229
The (0L0; &ttribute)HTML*)H,& *)TITL,* ont (olor ,xample)+TITL,*)+H,& *)/0 Y*) 09T (0L0;
8/9/2019 HTMLppt [Autosaved]
35/229
The )/& , 09T* Tag)HTML*)H,& *)TITL,*/& , ont ,xample)+TITL,*)+H,& *)/0 Y*This text is be#ore the /& , 09T tag.)/;*)/& , 09T IO,
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
37/229
& ing 7raphics to a 2eb 6age!IM" #$C%&'ilename&()HTML*
)H,& * )TITL,*8sing the IM7 tag)+TITL,*)+H,& *)/0 Y* )6* )IM7 ;(
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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 ;(
8/9/2019 HTMLppt [Autosaved]
40/229
8sing the < &ttribute
)HTML*)H,& * )TITL,*8sing the < attribute)+TITL,*
)+H,& *)/0 Y*)IM7 ;(
8/9/2019 HTMLppt [Autosaved]
41/229
raming an Image with a /or er )HTML*)H,& * )TITL,*8sing the /0; ,; attribute)+TITL,*)+H,& *)/0 Y*)IM7 ;(
8/9/2019 HTMLppt [Autosaved]
42/229
7i3ing an Image pace)HTML*)H,& * )TITL,*8sing the /0; ,; attribute)+TITL,*)+H,& *)/0 Y*)IM7 ;(
8/9/2019 HTMLppt [Autosaved]
43/229
8sing an Image as an &nchor
)& H;,
8/9/2019 HTMLppt [Autosaved]
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,
8/9/2019 HTMLppt [Autosaved]
45/229
(reating a Link to ,-Mail
)& H;, mycom.com=* enme ,-mail)+&*.
8/9/2019 HTMLppt [Autosaved]
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*
8/9/2019 HTMLppt [Autosaved]
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*
8/9/2019 HTMLppt [Autosaved]
48/229
& itional )0L* &ttributes Attribute Description
(0M6&(T ;en ers the list in a more compact #orm TY6,
8/9/2019 HTMLppt [Autosaved]
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.
8/9/2019 HTMLppt [Autosaved]
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.
8/9/2019 HTMLppt [Autosaved]
51/229
The stan ar #ormat o# a e#inition list isas #ollows5
) L*) T*Term) * e#inition o# term
)+ L*
8/9/2019 HTMLppt [Autosaved]
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.
8/9/2019 HTMLppt [Autosaved]
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*
8/9/2019 HTMLppt [Autosaved]
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; ;*
8/9/2019 HTMLppt [Autosaved]
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*
8/9/2019 HTMLppt [Autosaved]
56/229
/0; ,; attribute--the number o# pixelswi e you want the bor er!like this5 /0; , ;
8/9/2019 HTMLppt [Autosaved]
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.
8/9/2019 HTMLppt [Autosaved]
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,%.
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
60/229
The 3alue /0; ,; is inclu e #orbackwar s-compatibility with HTML B.K.)T&/L, ;&M,
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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*
8/9/2019 HTMLppt [Autosaved]
63/229
)HTML*)H,& *)TITL,*Table /or ers)+TITL,*)+H,& *
)/0 Y*)T&/L,* )T;*)T *)IM7 ;(
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
65/229
)H,& *)TITL,*;ow an (olumn panning)+TITL,*)+H,& *)/0 Y*)T&/L, /0; ,;* )T;*)TH (0L 6&9
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
69/229
(ontrolling Table Layout
( t lli g T bl L t
8/9/2019 HTMLppt [Autosaved]
70/229
(ontrolling Table Layout)HTML*)H,& *
)TITL,* ormatting ,xample*)+TITL,*)+H,& *)/0 Y*)T&/L, /0; ,;
8/9/2019 HTMLppt [Autosaved]
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; ,;
8/9/2019 HTMLppt [Autosaved]
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 & *
8/9/2019 HTMLppt [Autosaved]
73/229
)H,&)TITL,* oramtting ,xample)+TITL,*)H,& *)/0 Y*)T&/L, /0; ,; /0; ,;(0L0;
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
75/229
& simple rame
)HTML*)H,& *)+H,& *) ;&M, ,T (0L
8/9/2019 HTMLppt [Autosaved]
76/229
imple rame 7ri)HTML*)H,& *)+H,& *) ;&M, ,T ;02
8/9/2019 HTMLppt [Autosaved]
77/229
(omplex 7ri o# rames)HTML*)H,& *)+H,& *) ;&M, ,T ;02
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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; ,;
8/9/2019 HTMLppt [Autosaved]
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; ,;
8/9/2019 HTMLppt [Autosaved]
81/229
The /0; ,;(0L0; attribute can be usewith the ;&M, ,T tag or with the ;&M,tag. or example-
) ;&M, ,T /0; ,;(0L0;
8/9/2019 HTMLppt [Autosaved]
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, ;(
8/9/2019 HTMLppt [Autosaved]
83/229
8/9/2019 HTMLppt [Autosaved]
84/229
Collecting In ut 2ith orms
8/9/2019 HTMLppt [Autosaved]
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*
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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.
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
90/229
, p
)HTML*
)H,& *)TITL,*T,@T&;,&.HTM)+TITL,*)+H,& *)/0 Y*) 0;M*)T,@T&;,& 9&M,
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
93/229
)HTML*)H,& *)TITL,* ,L,(TC.HTM)+TITL,*)+H,& *)/0 Y*2hat type o# connection5
) 0;M*) ,L,(T 9&M,
8/9/2019 HTMLppt [Autosaved]
94/229
#election 2ith *ther * tion3
8/9/2019 HTMLppt [Autosaved]
95/229
)HTML*)H,& *
)TITL,* ,L,(TB.HTM)+TITL,*)+H,& *)/0 Y*) 0;M*2hat type o# (onnection5) ,L,(T M8LTI6L, 9&M,
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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.
8/9/2019 HTMLppt [Autosaved]
99/229
6& 20; ! a mo i#ie T @T #iel ! isplays type
8/9/2019 HTMLppt [Autosaved]
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,
8/9/2019 HTMLppt [Autosaved]
101/229
$re4uire %!1&L8,! an (H,(:, $which e#aults the check box aschecke %.
)HTML*)H,& *)TITL,*(H,(:/0@.HTM)+TITL,*)+H,& *)/0 Y*
) 0;M*)I968T TY6,
8/9/2019 HTMLppt [Autosaved]
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,
8/9/2019 HTMLppt [Autosaved]
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,
8/9/2019 HTMLppt [Autosaved]
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,
8/9/2019 HTMLppt [Autosaved]
105/229
)HTML*)H,& *
)TITL,* orm Layout an esign)+TITL,*)+H,& *)/0 Y*)HC*9ot 8sing 6;, tags)+HC*) 0;M* 9ame5 )I968T TY6,
8/9/2019 HTMLppt [Autosaved]
106/229
)HTML*)H,& *)TITL,* orm Layout an esign)+TITL,*
)+H,& *)/0 Y*)HC*8sing 6;, tags)+HC*) 0;M* )6;,*
9ame5 )I968T TY6,
8/9/2019 HTMLppt [Autosaved]
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,
8/9/2019 HTMLppt [Autosaved]
108/229
(ont..)T;*)T *)+T *)T *)I968T TY6,
8/9/2019 HTMLppt [Autosaved]
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,
8/9/2019 HTMLppt [Autosaved]
110/229
() L* ) T*(re it (ar ) *)I968T 9&M,
8/9/2019 HTMLppt [Autosaved]
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,
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
117/229
TITL, attribute! which is a3ailable #or use
with all #orm input elements. Zust speci#yTITL,
8/9/2019 HTMLppt [Autosaved]
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 ,@
8/9/2019 HTMLppt [Autosaved]
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;
8/9/2019 HTMLppt [Autosaved]
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.
8/9/2019 HTMLppt [Autosaved]
121/229
)/8TT09 09(LI(:
8/9/2019 HTMLppt [Autosaved]
122/229
con"unction with a new (&6TI09 container togroup #orm elements! as in this example5
) I,L ,T* )(&6TI09 &((, :,Y
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
127/229
)HTML*
)H,& *)TITL,*& ocument)+TITL,*) (;I6T L&978&7,
8/9/2019 HTMLppt [Autosaved]
128/229
)HTML*)H,& *)TITL,*& ocument)+TITL,*)+H,& *)/0 Y*) (;I6T L&978&7,
8/9/2019 HTMLppt [Autosaved]
129/229
)HTML)H,& *
)TITL,*& ocument)+TITL,*) (;I6T L&978&7,
8/9/2019 HTMLppt [Autosaved]
130/229
2orking on use 'ollo2ing scri t3
)HTML*)/0 Y*)HC*Let's criptG)+HC*)H;*) (;I6T L&978&7,
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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*)
8/9/2019 HTMLppt [Autosaved]
134/229
)H,& *)TITL,*& ocument)+TITL,*
) (;I6T L&978&7,
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
137/229
The stan ar math operators #or a ition!
subtraction! multiplication! an i3ision $P! -! ^! +%are built into Za3a cript. Com arison o erators
¬her 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.
8/9/2019 HTMLppt [Autosaved]
138/229
(ontrol tructures
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
141/229
or ,g5
3ar #eb ays < 3ar theYear < CDDBi# $theYear ]
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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 *
8/9/2019 HTMLppt [Autosaved]
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*
8/9/2019 HTMLppt [Autosaved]
146/229
)script language
8/9/2019 HTMLppt [Autosaved]
147/229
)#orm name
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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 !
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
151/229
)H,& *
)TITL,* &rray 6rogram )+TITL,*) (;I6T L&978&7,< Za3a cript=*3ar a
8/9/2019 HTMLppt [Autosaved]
152/229
)script language
8/9/2019 HTMLppt [Autosaved]
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*
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
155/229
)script language
8/9/2019 HTMLppt [Autosaved]
156/229
Test
K.Kp ````````````` Length
8/9/2019 HTMLppt [Autosaved]
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.
8/9/2019 HTMLppt [Autosaved]
158/229
8/9/2019 HTMLppt [Autosaved]
159/229
output59ame
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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!
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
163/229
Methods
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
166/229
There are B e3ents which are particularlyuse#ul when working in a #orm.
on ocus
on/lur on(hange
8/9/2019 HTMLppt [Autosaved]
167/229
) 0;M*)I968T TY6,
8/9/2019 HTMLppt [Autosaved]
168/229
) (;I6T*
#unction get elect$s% return s.optionsXs.selecte In ex .3aluef)+ (;I6T*
) 0;M*) ,L,(T 9&M,
8/9/2019 HTMLppt [Autosaved]
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,
8/9/2019 HTMLppt [Autosaved]
170/229
8/9/2019 HTMLppt [Autosaved]
171/229
Accessing 2indo2 ro ertiesand methods
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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% %
8/9/2019 HTMLppt [Autosaved]
174/229
8/9/2019 HTMLppt [Autosaved]
175/229
)+H,& *)/0 Y*) 0;M*)I968T TY6,
8/9/2019 HTMLppt [Autosaved]
176/229
)HTML )H,& )TITL, win ow. e#ault tatusproperty)+TITL,*
) (;I6T L&978&7,
8/9/2019 HTMLppt [Autosaved]
177/229
0ther win ow metho sK. win ow.alert propertyB. win ow.prompt property
. win ow.con#irm property
)ht l*
8/9/2019 HTMLppt [Autosaved]
178/229
)html*)hea *)script language
8/9/2019 HTMLppt [Autosaved]
179/229
#unction con#$ %
i# $con#irm$'2ish to open another ocument '%%location< test.html=\f)+script*)+hea *)bo y onloa
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
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
8/9/2019 HTMLppt [Autosaved]
185/229
)HTML*)H,& *)TITL,* Text 0b"ect 3alue property )+TITL,*) (;I6T L&978&7,
8/9/2019 HTMLppt [Autosaved]
186/229
)+H,& *)/0 Y*) 0;M on ubmit < =return #alse=*)I968T TY6, < =text= 9&M, < =con3ert= 1&L8,