Ghidul Programatorului HTML

http://werbach.
com/barebones/
GHIDUL PROGRAMATORULUI HTML

de Kevin Werbach Versiunea 3.0 Formatat -- 21 Iulie 1996
Ultima versiune a acestui document este disponibil la <http://werbach.com/barebones/>. Ghidul prezint toate tag-urile recunoscute de majoritatea browser-elor - versiunile curente. m inclus toate tag-urile din speci!icatia "#$% &.' ( precum si e)tensiile *etscape incluse +n versiuni de p,na la &.-b.. cest ghid este scris ast!el inc,t s !ie c,t mai concis posibil/ mai multe detalii despre "#$% sunt disponibile la 000 "elp 1age. 2omentariile si sugestiile sunt +ntotdeauna binevenite. Cuprins
3. MATERIAL INTRODUCTI Ce es!e unic "a aces! #hid Ce !a#$uri HTML sun! inc"use Cu% es!e &'r%a!a! aces! d'cu%en! 4incluz,nd o descriere a simbolurilor si abreviatiilor5 TAG$URI HTML e"e%en!e de ba() 4!iecare document "#$% ar trebui s le includ5 de&ini!ie s!ruc!ura") 4aparente controlate de pre!erintele browser-ului5 &'r%a! de pre(en!are 4autorul speci!ic aparenta te)tului5 "in*$uri si i%a#ini divi('ri "is!e bac*#r'und$uri si cu"'ri carac!ere specia"e &'r%$uri !abe"e &ra%e$uri +ava %isc I%p'r!an!, 6ac nu v este clar di!erenta +ntre "#$% '.-( "#$% &.-( "#$% &.' si e)tensiile *etscape( v sugerez s cititi declaratia 0&2 asupra limbajului "#$%. Tip d'cu%en! Ti!"u Header C'rp <HTML></HTML> <TITLE></TITLE> <HEAD></HEAD> <BODY></BODY> 4+nceput si s!,rsit !isier5 4trebuie s !ie +n header5 4in!ormatii descriptive( cum ar !i titlul5 4corp pagin5
'.
M)ri%e &'n! M)ri%e cu a"iniere Divi(are Divi(are cu a"iniere Ci!a! Eviden!iere Eviden!iere prin 0n#r'sare
<H?></H?> <H? ALIGN=LEFT|CENTER|RIGHT></H?> -./ <DIV></DIV> <DIV ALIGN=LEFT|RIGHT| CENTER></DIV> <BLOCKQUOTE></BLOCKQUOTE> -./ <EM></EM> <STRONG></STRONG> 3
4spec. de!ineste 7 nivele5
4de obicei deplasat5 4de obicei aplecat5 4de obicei +ngrosat5
Ci!a! C'd E1e%p"u 'u!pu! Inpu! !as!a!ur) ariabi") De&ini!ie Addresa au!'r 2'n! %are 2'n! %ic 3n#r'sa! *&.-b Ap"eca! 4ub"inia! Eviden!ia! *&.-b Eviden!ia! 4ubscrip! 4uperscrip! Masin) de scris Pre&'r%a!are Di%ensiune Cen!ru *3.*3.*&.-b *&.-b *&.-b *&.-b *&.-b *&.-b *&.-b *&.-b *&.-b C"ipire M)ri%e &'n! 4chi%bare %)ri%e &'n! M)ri%e de ba() &'n! Cu"'are &'n! 4e"ec!ie &'n! Te1! pe %ai %u"!e c'"'ane Dis!an!a din!re c'"'ane Di%ensiune c'"'an) Dis!an!are Tip dis!an!are M)ri%e dis!an!are Di%ensiuni dis!an!are A"iniere Lin* c)!re a"! d'cu%en! Lin* c)!re un !ar#e! 2ereas!ra !in!) De&inire !ar#e! 0n d'cu%en! Re"a!ie Re"a!ie invers) 3nc)rcare i%a#ine A"iniere *3.A"iniere
<CITE></CITE> <CODE></CODE> <SAMP></SAMP> <KBD></KBD> <VAR></VAR> <DFN></DFN> <ADDRESS></ADDRESS> <BIG></BIG> <SMALL></SMALL> <B></B> <I></I> <U></U> <STRIKE></STRIKE> <S></S> <SUB></SUB> <SUP></SUP> <TT></TT> <PRE></PRE> <PRE WIDTH=?></PRE> <CENTER></CENTER> -./ <BLINK></BLINK> <FONT SIZE=?></FONT> <FONT SIZE= !|"? ></FONT> <BASEFONT SIZE=?>
4de obicei aplecat5 4pt. listare cod surs5
4nu prea rasp,ndit5
4nu prea rsp,ndit +nc5 4nu prea rsp,ndit +nc5 4nu prea rp,ndit +nca5 4se !oloseste un !ont tipogra!ic5 4nu se ignor spatiile si liniile noi5 4+n caractere5 4pentru te)t si imagini5 4cel mai ocolit tag5 4de la 3 la 85 4de la 3 la 8/ implicit &5
<FONT COLOR= #$$$$$$ ></FONT> <FONT FACE= %%% ></FONT> <MULTICOL COLS=?></MULTICOL> <MULTICOL GUTTER=?></MULTICOL> 4implicit 3- pi)eli5 <MULTICOL WIDTH=?></MULTICOL> <SPACER> <SPACER TYPE=&'()*'+,-.| /0(,)1-.|2.'13> <SPACER SIZE=?> <SPACER WIDTH=? HEIGHT=?> <SPACER ALIGN=.04,|()5&,| 10+,0(> <A HREF= URL ></A> <A HREF= URL#%%% ></A> <A HREF= #%%% ></A> 4+n alt document5 4+n acelasi document5
LINK$ URI 4I GRA2 *'.IC5
<A HREF= URL TARGET= %%%| | 62.-+3|670.4|68-(0+,| 6,'8 ></A> <A NAME= %%% ></A> <A REL= %%% ></A> 4nu prea rsp,ndit5 <A REV= %%% ></A> 4nu prea rsp,ndit5 <IMG SRC= URL > <IMG SRC= URL ALIGN=TOP| BOTTOM|MIDDLE|LEFT|RIGHT> <IMG SRC= URL ALIGN=TE9TTOP| ABSMIDDLE|BASELINE|ABSBOTTOM> '
A"!ernare !e1! Mapare i%a#ine U!i"i(are i%a#ine %apa!) De&inire %apare De&inire re#iune %apa!) Di%ensiuni Chenar 4pa!iu inc'n+ura!'r *3.*3.3 *'.*'.6r'7ser cu re('"u!ie %ic) 2'r!are c"ien! Inserare 'biec! Di%ensiuni 'biec!
<IMG SRC= URL
ALT= %%% >
<IMG SRC= URL ISMAP> <IMG SRC= URL USEMAP= URL > <MAP NAME= %%% ></MAP> <AREA SHAPE= RECT COORDS= ::: HREF= URL | NOHREF> <IMG SRC= URL WIDTH=? HEIGHT=?> <IMG SRC= URL BORDER=?> <IMG SRC= URL HSPACE=? VSPACE=?> <IMG SRC= URL LOWSRC= URL > <META HTTP"EQUIV= R04(07& CONTENT= ?; URL=URL > <EMBED SRC= URL > <EMBED SRC= URL HEIGHT=?> <P></P> -./ WIDTH=?
4dac imaginea nu este incrcat5 4cere un 2G95
4+n pi)eli5 4+n pi)eli5 4+n pi)eli5
4inserare obiect in pagin5
Para#ra&
4de obicei nu e necesar +nchiderea tagului5 4un singur 2:5
A"iniere !e1! Linie n'u) E"i%inare spa!iu din +uru" !e1!u"ui Linie 'ri('n!a") A"iniere Gr'si%e Lun#i%e Lun#i%e pr'cen!ua"a Linie s'"id) Linie !e1! c'n!inu) Trecere "a "inie n'u)
<P ALIGN=LEFT|CENTER|RIGHT></P> -./ <BR> <BR CLEAR=LEFT|RIGHT|ALL> <HR> <HR ALIGN=LEFT|RIGHT|CENTER> <HR SIZE=?> <HR WIDTH=?> <HR WIDTH= < > <HR NOSHADE> <NOBR></NOBR> <WBR>
*3.*3.*3.-
4+n pi)eli5 4+n pi)eli5 4procentaj din ltimea paginii5 4!r aspect &65 4previne trecerea la linie nou5 4unde e nevoie5
LI4
Lis!e nenu%er'!a!e C'%pac!) Tipu" bu""e!$u"ui Lis!e nu%er'!a!e C'%pac!) Tipu" nu%)r)!'rii Nu%)r de 0ncepu! Lis!e de de&ini!ii C'%pac!) Lis!e %enu C'%pac!) <UL><LI></UL> <UL COMPACT></UL> <UL TYPE=DISC|CIRCLE|SQUARE> <LI TYPE=DISC|CIRCLE|SQUARE> <OL><LI></OL> <OL COMPACT></OL> <OL TYPE=A|-|I|)|=> <LI TYPE=A|-|I|)|=> <OL START=?> <LI VALUE=?> <DL><DT><DD></DL> <DL COMPACT></DL> <MENU><LI></MENU> <MENU COMPACT></MENU> & 4<LI> +nainte de !iecare element al listei5 4pentru toat lista5 4acesta si urmtorii5 4<LI> +nainte de !iecare element al listei5 4pentru toat lista5 4acesta si subsecventele sale5 4pentru toat lista5 4acesta si subsecventele sale5 4<DT>=,0(>0+: <DD>;de!initie5 4<LI> +nainte de !iecare element al listei5
Lis!e direc!'ri C'%pac!) I%a#ine &unda" Cu"'are &unda" Cu"'are !e1! Cu"'are "in*$uri Lin*$uri vi(i!a!e Lin* ac!iva! Carac!er specia" 8 9 : ; Marc) 0nre#is!ra!) C'p<ri#h! 4pa!iu nei#n'ra! De&inire &'r% *'.3nc)rcare &isier C)%p inpu! Nu%e c)%p a"'are c=%p Ap)sa!> Di%ensiune c=%p Di%ensiune %a1i%) Lis!) de se"ec!ie Nu%e "is!) Nu%)r de 'p!iuni Op!iuni %u"!ip"e Op!iune
<DIR><LI></DIR> <DIR COMPACT></DIR> <BODY BACKGROUND= URL > <BODY BGCOLOR= #$$$$$$ > -./ <BODY <BODY <BODY <BODY <=>/ ?.,; ?5,; ?->8; ?@A',; ?(05; ?1'8B; ?+278; TE9T= #$$$$$$ > -./ LINK= #$$$$$$ > -./ VLINK= #$$$$$$ > -./ ALINK= #$$$$$$ > -./
4<LI> +nainte de !iecare element al listei5
4ordinea este rosu/verde/albastru5
4unde > este un cod 9?@ AA.B-35
<FORM ACTION= URL METHOD=GET| POST></FORM> <FORM ENCTYPE= >A.,)8-(,/4'(>" C-,- ></FORM> <INPUT TYPE= TE9T|PASSWORD| CHECKBO9|RADIO| IMAGE|HIDDEN| SUBMIT|RESET > <INPUT NAME= %%% > <INPUT VALUE= %%% > <INPUT CHECKED> <INPUT SIZE=?> <INPUT MA9LENGTH=?> <SELECT></SELECT> <SELECT NAME= %%% ></SELECT> <SELECT SIZE=?></SELECT> <SELECT MULTIPLE> <OPTION> <OPTION SELECTED> <TE9TAREA ROWS=? COLS=?></TE9TAREA> <TE9TAREA NAME= %%% ></TE9TAREA> <TE9TAREA WRAP=OFF|VIRTUAL| PHYSICAL></TE9TAREA> <TABLE></TABLE> -./ <TABLE BORDER=?></TABLE> <TABLE CELLSPACING=?> <TABLE CELLPADDING=?> <TABLE WIDTH=?> <TABLE WIDTH= < > <TR></TR> <TR ALIGN=LEFT|RIGHT| CENTER| MIDDLE|BOTTOM VALIGN=TOP|BOTTOM|MIDDLE> <TD></TD> D
4checCbo) si radio5 4+n caractere5 4+n caractere5
4se pot selecta mai multe optiuni5 4elemente ce pot !i selectate5
*'.-
Op!iune i%p"ici!) Di%ensiune &ereas!r) inpu! !e1! Nu%e &ereas!r) 4pa!iere !e1!
De&inire !abe" Chenar !abe" 4pa!iu 0n!re ce"u"e 4pa!iu &a!) de %ar#inea ce"u"ei Di%ensiune d'ri!) Di%ensiune pr'cen!ua") Linie !abe" A"iniere Ce"u") !abe"
4+n pi)eli5 4procentaj din pagin5
4trebuie s apar +n
interiorul unei linii tabel5 A"iniere 2)r) "inii n'i Pe c=!e c'"'ane s) se 0n!ind) Pe c=!e "inii s) se 0n!ind) Di%ensiune d'ri!) Di%ensiune pr'cen!ua") Cu"'are &unda" ce"u") Header !abe" A"iniere 2)r) "inii n'i Pe c=!e c'"'ane s) se 0n!ind) Pe c=!e "inii s) se 0n!ind) Di%ensiune d'ri!) Di%ensiune pr'cen!ua") Cu"'are &unda" Cap!ur) !abe" A"iniere 2eres!re d'cu%en! 3n)"!i%e "inii 3n)"!i%e "inii L)!i%e c'"'ane L)!i%e c'"'ane Di%ensiune %ar#ini Mar#ine Cu"'are %ar#ine De&inire &ereas!r) URL a&isa! 0n &ereas!r) Nu%e &ereas!r) Di%ensiune %ar#ine Di%ensiune %ar#ine 6ar) de&i"are> Neredi%ensi'nabi" Mar#ini Cu"'are %ar#ine C'n!inu! &)r) &eres!re App"e! Nu%e app"e! Para%e!ri L'ca!ie app"e! Iden!i&ica!'r app"e! Te1! a"!erna!iv A"iniere Di%ensiune Dis!an!are <TD ALIGN=LEFT|RIGHT| CENTER| MIDDLE|BOTTOM VALIGN=TOP|BOTTOM|MIDDLE> <TD NOWRAP> <TD COLSPAN=?> <TD ROWSPAN=?> <TD WIDTH=?> <TD WIDTH= < > <TD BGCOLOR= #$$$$$$ > <TH></TH> <TH ALIGN=LEFT|RIGHT| CENTER| MIDDLE|BOTTOM VALIGN=TOP|BOTTOM|MIDDLE> <TH NOWRAP> <TH COLSPAN=?> <TH ROWSPAN=?> <TH WIDTH=?> <TH WIDTH= < > <TH BGCOLOR= #$$$$$$ > <CAPTION></CAPTION> <CAPTION ALIGN=TOP|BOTTOM> <FRAMESET></FRAMESET> <FRAMESET ROWS=:::></FRAMESET> <FRAMESET ROWS=%></FRAMESET> <FRAMESET COLS=:::></FRAMESET> <FRAMESET COLS=%></FRAMESET>
*3.3 *3.3 *&.-b
4+n pi)eli5 4procentaj din tabel5 4apare la !el ca datele din interior dar +ngrosat( pe centru5
*3.3 *3.3 *&.-b
4+n pi)eli5 4procentaj din tabel5 4+nainte/dup tabel5 4+n loc de <BODY>5 4pi)eli sau E5 4F ; dimensiune relativ5 4pi)eli sau E5 4F ; dimensiune relativa5
*'.*'.*'.*'.*'.*&.-b *&.-b *&.-b *'.*'.*'.*'.*'.*'.*'.*&.-b *&.-b *'.-
<FRAMESET BORDER=?> <FRAMESET FRAMEBORDER= B07|+' > <FRAMESET BORDERCOLOR= #$$$$$$ > <FRAME> 4continutul unei !erestre individuale5 <FRAME SRC= URL > <FRAME NAME= %%% |62.-+3|670.4| 68-(0+,|6,'8> <FRAME MARGINWIDTH=?> 4margine st,nga si dreapta5 <FRAME MARGINHEIGHT=?> 4margine de sus si de jos5 <FRAME SCROLLING= YES|NO|AUTO > <FRAME NORESIZE> <FRAME FRAMEBORDER= B07|+' > <FRAME BORDERCOLOR= #$$$$$$ > <NOFRAMES></NOFRAMES> 4pt. browser-e ce nu cunosc !rame-uri5 <APPLET></APPLET> <APPLET <APPLET <APPLET <APPLET CODE= %%% > PARAM NAME= %%% > CODEBASE= URL > NAME= %%% >
<APPLET ALT= %%% > <APPLET ALIGN= LEFT|RIGHT| CENTER > <APPLET WIDTH=? HEIGHT=?> <APPLET HSPACE=? VSPACE=?> .
4pentru re!eriri din alt parte a paginii5 4pt. browser-e non-Gava5 4+n pi)eli5 4+n pi)eli5
C'%en!ariu HTML ?@A Pr'"'# De c)u!a! A&isare Tri%i!ere c)u!are *'.URL &isier curen! Nu%e de ba() &ereas!r) Re"a!ie In&'r%a!ii %e!a 2'i de s!i" 4crip!uri Bava
<D"" %%% ""> 4nea!isat de browser5 <DDOCTYPE HTML PUBLIC "//WEC//DTD HTML EFG//EN > -./ <ISINDE9> 4indic un inde) de cutat5 <ISINDE9 PROMPT= %%% > 4te)t de a!isat la input5 <A HREF= URL?%%% ></-> 4a se !olosi un semn de +ntrebare5 <BASE HREF= URL > 4trebuie s !ie +n header5 <BASE TARGET= %%% > 4trebuie s !ie +n header5 <LINK REV= %%% REL= %%% 4trebuie s !ie +n header5 HREF= URL > <META> 4trebuie s !ie +n header5 <STYLE></STYLE> 4nu prea rsp,ndit +nca5 <SCRIPT></SCRIPT> 4nu prea rsp,ndit +nca5
http://www.worClance.com/htmltutorial/inde).php
Curs de au!'ins!ruire in HTML

1. Ce este HTML ? Unul din primele elemente !undamentale ale 000 4 0orld 0ide 0eb 5 este "#$% 4 "Hperte)t $arCup %anguage 5( care descrie !ormatul primar in care documentele sint distribuite si vazute pe 0eb. $ulte din trasaturile lui( cum ar !i independenta !ata de plat!orma( structurarea !ormatarii si legaturile hiperte)t( !ac din el un !oarte bun !ormat pentru documentele 9nternet si 0eb. 1rimele speci!icatiile de baza ale 0eb-ului au !ost "#$%( "##1 si U:%. "#$% a !ost dezvoltat initial de #im Ierners-%ee la 2J:* in 3BAB. "#$% a !ost vazut ca o posibilitate pentru !izicienii care utilizeaza computere di!erite si schimbe intre ei in!ormatie utilizind 9nternetul. Jrau prin urmare necesare citeva trasaturi , independenta de plat!orma( posibilitati hHperte)t si structurarea documentelor.9ndependenta de plat!orma inseamna ca un document poate !i a!isat in mod asemanator de computere di!erite 4 deci cu !onte( gra!ica si culori di!erite 5( lucru vital pentru o audienta atit de variata. "iperte)t inseamna ca orice cuvint( !raza( imagine sau alt element al documentului vazut de un utilizator 4 client 5 poate !ace re!erinta la un alt document( ceea ce usureaza mult navigarea intre multiple documente sau chiar in interiorul unui aceluiasi document. s?tructurarea riguroasa a documentelor permite convertirea acestora dintr-un !ormat in altul precum si interogarea unor baze de date !ormate din aceste documente. SGML si HTML #im Ierners-%ee a utilizat ca model ?G$% 4 ?tandard Generalized $arCup %anguage 5( un standard international in plina dezvoltare. ?G$% avea avantajul unei structurari avansate si al independentei de plat!orma dar proiectarea lui a avut in vedere mai mult structura semantica a documentului decit modul de !ormatare. Kle)ibil( ?G$% putea !i descris ca o speci!icare pentru descrierea altor !ormate. Utilizatorii puteau crea noi !ormate 46#6( 6ocument #Hpe 6e!initions5 care puteau !i intelese de orice produs so!t ?G$% pur si simplu prin citirea mai intai a de!initiilor noilor !ormate. "#$% este pur si simplu un 6#6( deci o aplicatie a ?G$%. 9n primii ani de evolutie "#$% a crescut lent( in principal pentru ca ii lipseau posibilitatile de a descrie publicatii electronice pro!esionale/ limbajul permitea oarece control asupra !ontelor dar nu permitea inserarea gra!icii. 9n 3B&&( *2? a imbogatit limbajul pentru a permite inserarea gra!icii si au construit primul navigator gra!ic( $osaic. u urmat apoi contributii ad hoc ale diverselor !irme care au adus adaugiri limbajului "#$% 4adaugiri si nu imbogatiri pentru ca unele taguri nu erau in con!ormitate cu principiile generale ale ?G$%5 ast!el incat( prin 3BBD limbajul parea scapat de sub control. 7
Urmarea a !ost ca la prima con!erinta 000 din Geneva 4 Jlvetia 5 s-a constituit un grup 4 "#$% 0orCing Group 5 a carui prima misiune a !ost !ormalizarea "#$% intr-un 6#6 al ?G$%( lucru care s-a concretizat in "#$% %evel ' 4 sau "#$% '.-/ *ivelul 3( deci "#$% 3.-( a !ost proiectat de #im Ierners-%ee 5. 9mportanta actiunii acestui grup consta in !aptul ca( odata standardizat( limbajul poate !i apoi e)tins intr-un mod mai controlat la alte nivele. ?tandardul o!icial "#$% este 0orld 0ide 0eb 2onsortium 40&25( care este a!iliat la 9nternet Jngineering #asC Korce 49J#K5. 0&2 a enuntat cateva versiuni ale speci!icatiei "#$%( printre care si "#$% '.-( "#$% &.-("#$% &.'( "#$% D.- si( cel mai recent( "#$% D.-3. 9n acelasi timp( autorii de browsere( cum ar !i *etscape si $icroso!t( au dezvoltat adesea propriile Le)tensiiL "#$% in a!ara procesului standard si le-au incorporat in browserele lor. 9n unele cazuri( cum ar !i tagul *etscape ( aceste e)tensii au devenit standarde de facto adoptate de autorii de browsere. "#$% '.-( elaborat in 9unie 3BBD( este standardul pe care ar trebui sa-l suporte toate browserele curente -inclusiv cele mod te)t. "#$% '.- re!lecta conceptia originala a "#$% ca un limbaj de marcare independent de obiectele e)istente pentru asezarea lor in pagina( in loc de a spec!ica e)act cum ar trebui sa arate acestea. 6aca doriti sa !iti siguri ca toti vizitatorii vor vedea paginile asa cum trebuie( !olositi tagurile "#$% '.-. ?peci!icatia "#$% &.-( Jnuntata in 3BB.( a incercat sa dezvolte "#$% '.- prin adaugarea unor !acilitati precum tabelele si un mai mare control asupra te)tului din jurul imaginilor. 6esi unele din noutatile "#$% &.- erau deja !olosite de autorii de browsere( multe nu erau inca. 9n unele cazuri( taguri asemanatoare implementate de autorii de browsere au devenit mai raspandite decat tagurile Lo!icialeL. ?peci!icatia "#$% &.- acum a e)pirat( deci nu mai este un standard o!icial. 9n $ai 3BB7( 0&2 a scos pe piata speci!icatia "#$% &.' ( care era proiectata sa re!lecte si sa standardizeze practicile acceptate la scara larga. 6eci( "#$% &.' include tagurile "#$% &.- ce erau adoptate de autorii de browsere ca *etscape si $icroso!t plus e)tensii "#$% raspandite. 9n Iilantul asupra "#$%( 0&2 recomanda ca providerii de in!ormatii sa utilizeze speci!icatia "#$% &.'.Mersiunile curente ale majoritatii browserelor ar trebui sa suporte toate( sau aproape toate aceste taguri. 6e asemenea e)ista e)tensii *etscape si $icroso!t care nu !ac parte din speci!icatia "#$% &.'( ori pentru ca sunt mai putin utilizate( ori au !ost omologate dupa aparitia "#$% &.'. 1entru ca navigatorul *etscape a !ost printre primele browsere care suporta anumite taguri "#$% &.-( iar *etscape detine in jur de 8-E din piata de browsere( multi au crezut eronat ca toate e)tensiile *etscape 4incluzand taguri ca 86LINK9 si !acilitati ca !erestrele5 !ac parte din "#$% &.- sau "#$% &.'. %a momentul aparitiei acestui tutorial( "#$% D.- este larg utilizat si au !ost deja publicate speci!icatiile "#$% D.-3. 6ocumentele "#$% sint documente in !ormat ?299 si prin urmare pot !i create cu orice editor de te)te. u !ost insa dezvoltate editoare specializate care permit editarea intr-un !el de 0N?90NG desi nu se poate vorbi de 0N?90NG atita vreme cit navigatoarele a!iseaza acelasi document oarecum di!erit( in !unctie de plat!orma pe care ruleaza. u !ost de asemenea dezvoltate convertoare care permit !ormatarea "#$% a documentelor generate 4 si !ormatate 5 cu alte editoare. Jvident conversiile nu pot patra decit partial !ormatarile anterioare deoarece limbajul "#$% este inca incomplet.
Li%ba+u" HTML
A@ Pri%ii pasi @rice document "#$% incepe cu notatia <html> si se termina cu notatia </html>. ceste LchestiiL se numesc in literatura de specialitate L# G-uriL.1rin conventie( toate in!ormatiile "#$% incep cu o paranteza unghiulara deschisa L < L si se termina cu o paranteza unghiulara inchisa L > L. #ag-urile intre aceste paranteze transmit comenzi catre browser pentru a a!isa pagina intr-un anumit mod. Unele blocuri prezinta delimitator de s!arsit de bloc( in timp ce pentru alte blocuri acest delimitator este optional sau chiar interzis. 9ntre cele doua marcaje <html> si </html> vom introduce doua sectiuni: -sectiunea de antet <head>...</head> si - corpul documentului <bodH>...</bodH>. Ilocul <bodH>...</bodH> cuprinde continutul propriu-zis al paginii "#$%( adica ceea ce va !i a!isat in !erastra browser-ului. @ eticheta poate !i scris atat cu litere mici( cat si cu litere mari. dica <"#$%> ; <"tm%> ; <html>. 2aracterele LspatiuL si L2:/%KL ce apar intre etichete sunt ignorate de catre browser. 6eci un prim document "#$% ar !i ceva de genul asta: <html> <head> </head> <bodH> 8
</bodH> </html> sa arata primul document "#$%. 2opiati-l !olosind 2opH/1aste intr-un !isier nou si salvati-l ca 1:9$."#$ sau 1:9$."#$%. poi porniti *etscape *avigator sau 9nternet J)plorer( dati 2#:%-@ si introduceti calea spre !isier. 6ati @O si ... nimic. ?a nu disperam ... vom adauga primele elemente la pagina noastra. 9n primul rand( titlul unei pagini se obtine inserand in sectiunea <head>...</head> a urmatoarei linii: <title> ceasta este prima mea pagina de 0eb</title> 9n plus( in sectiunea <bodH>...</bodH> putem scrie te)te cat dorim. 6aca nu intalnim nici un marcaj < sau > atunci interpretorul "#$% le va lua ca te)te simple si le va a!isa pe ecran. ?a vedem o noua versiune a paginii noastre: <html> <head> <title> ceasta este prima mea pagina de 0eb</title> </head> <bodH> Iine ati venit in pagina mea de 0ebP </bodH> </html> vezi acest e)emplu 2ontinutul blocului <title>...</title> va aparea in bara de titlu a !erestrei browser-ului. 6aca acest bloc lipseste intr-o pagina "#$%( atunci in bara de titlu a !erstrei browser-ului va aparea numele !isierului. 6aca introducem mai multe linii intr-o pagina browser-ul va a!isa intr-un singur rand( intrucat caracterele L 2:/%K L sunt ignorate de browser. #recerea pe o linie noua se !ace la o comanda e)plicita( care trebuie sa apara in pagina html. ceasta comanda este marcajul <br> 4 de la L line breaC L - intrerupere de linie 5. Kolosind aceleasi operatii ca mai sus( vizualizati noua paginaP Meti vedea te)tul ce apare in !ereastra navigatorului. 9n plus( pagina dvs. va avea un titlu nou( cel introdus de dvs. <html> <head> <title> titlul paginii</title> </head> <bodH> Iine ati venit in <br> pagina mea de 0ebP </bodH> </html> vezi acest e)emplu 6"'curi pre&'r%a!a!e 1entru ca browser-ul sa interpreteze corect caracterele L spatiu L( L tab L si L 2:/%K L ce apar in cadrul unui te)t( acest te)t trebuie inclus intr-un bloc <pre>...</pre>. <html> <head> <title>bloc pre!ormatat </title> </head> <bodH><pre> 1rima linie doua linie treia linie </pre></bodH> </html> vezi acest e)emplu Cu"'area de &'nd @ culoare poate !i precizata in doua moduri: 1rintr-un nume de culoare.?unt disponibile cel putin 37 nume de culori: aQua( blacC( !uchsia( graH( green lime( maroon( navH( olive( purple( red( silver( teal( white si Hellow. A
1rin constructia L =rrggbb L unde r 4red5( g 4green5( sau b 4blue5 sunt ci!re he)azecimale si pot lua valorile: -( 3( '( &( D( .( 7( 8( A( B( a( ( b( I( c( 2( d( 6( e( J( !( K/ se pot de!ini ast!el 7..&7 de culori. 2uloarea unei pagini se precizeaza prin intermediul unui atribut al etichetei <bodH>. 2uloarea !ondului paginii 0eb se stabileste cu atributul bgcolor al etichetei <bodH>( de e)emplu: <bodH bgcolor ; culoare>. Urmatorul e)emplu realizeaza o pagina cu !ondul de culoare gri. <html> <head> <title>culoare de !ond </title> </head> <bodH bgcolor;graH> @ pagina 0eb cu !ondul G:9P </bodH> </html> vezi acest e)emplu Cu"'area !e1!u"ui cest lucru se !ace prin intermediul atributului te)t al etichetei <bodH> dupa sinta)a <bodH te)t;culoare>. 9n urmatorul e)emplu te)tul are culorea rosie. <html> <head> <title>culoare te)tului </title> </head> <bodH te)t;red> Un te)t de culoare rosie. </bodH> </html> vezi acest e)emplu @ eticheta poate avea mai multe atribute.6e e)emplu ( o eticheta cu trei atribute arata ast!el: <eticheta atribut3 ; valoare3 atribut' ; valoare' atribut& ; valoare&>. Urmatorul e)emplu prezinta o pagina cu !ondul de culoare albastra si te)tul de culoare galbena. <html> <head> <title>atribute multiple </title> </head> <bodH bgcolor;blue te)t;Hellow> Kond de culoare albastra si te)t de culoare galbena. </bodH> </html> vezi acest e)emplu #e)tul a!isat este caracterizat de urmatoarele atribute: $arime 4 size5( 2uloare 4 color 5( Kont 4stHle5. cestea sunt atribute ale etichetei <base!ont>.Jste o eticheta singulara 4!ara delimitator de s!arsit de bloc5. <base!ont size ; numar color ; culoare stHle ; !ont> unde: numar - poate !i 3( '( &( D( .( 7 sau 8/ 4 3 pentru !ontul cel mai mic si 8 pentru !ontul cel mai mare5/ culoare - este o culoare precizata prin nume sau printr-o constructie :GI/ !ont - poate !i un !ont generic ca L seri! L( L san seri! L( L cursive L( L monospace L( L!antasH L sau un !ont speci!ic instalat pe calculatorului clientului( ca L #imes *ew :oman L( L "elvetica L sau L rial L.?e accepta ca valoare si o lista de !onturi separate prin virgula( de e)emplu: L #imes *ew :oman( seri!(monospace L. 6omeniul de valabilitate al caracteristicelor precizate de aceasta eticheta se intinde de la locul in care apare eticheta pana la s!arsitul paginii sau pana la urmataorea eticheta <base!ont>. 6aca acest atribut lipseste atunci te)tul din pagina 0eb are atribute prestabilite sau atribute precizate de browserul utilizat. tributele prestabilite sunt: size ; &( color ; blacC( si stHle ; L #imes *ew :oman L . 1ozitionarea continutului paginii 0eb !ata de marginile !erestrei browserului se poate !ace cu ajutorul a doua atribute ale etichetei <bodH>: le!tmargin 4 stabileste distanta dintre marginea stanga a !erstrei browserului si marginea stanga a continutului paginii 5/ B
topmargin 4 stabileste distanta dintre marginea de sus a !erstrei browserului si marginea de sus a continutului paginii 5/ <html> <head> <title>2on!igurarea te)tului si stabilirea marginii </title> </head> <bodH le!tmargin;L3--L topmargin;L.-L> #e)tul are atribute implicite. <br><base!ont stHle;L rialL color;LblueL size;L7L> #e)tul este scris cu !ontul L rialL( culoare albastru si marime 7. </bodH> </html> vezi acest e)emplu 4!i"uri pen!ru b"'curi"e de !e1! 1entru ca un bloc de te)t sa apara in pagina evidentiat 4cu caractere aldine5( trebuie inclus intre delimitatorii <b>...</b> 4 b vine de la LboldL ; indraznet 5. 1entru ca un te)t sa !ie scris cu carcatere mai mari cu o unitate decat cele curente acesta trebuie inclus intr-un bloc delimitat de etichetele <big>...</big>. 1entru ca un te)t sa !ie scris cu carcatere mai mici cu o unitate decat cele curente acesta trebuie inclus intr-un bloc delimitat de etichetele <small>...</small>. 1entru ca un te)t sa !ie scris cu carcatere cursive acesta trebuie inclus intr-un bloc delimitat de etichetele <i>...</i> 4 i vine de la L italic L5. 1entru a insera secvente de te)t aliniate ca indice 4sub-script5 sau ca e)ponent 4super-script5 ( aceste !ragmente trebuie delimitate de etichetele <sub>...</sub>( respectiv <sup>...</sup>. 1entru a insera un bloc de caractere subliniate se utilizeaza etichetele <u>...</u> 4u vine de la L underline L5. 1entru a insera un bloc de caractere subliniate se utilizeaza etichetele <striCe>...</striCe> sau <s>...</s>. 9n e)emplul urmator vom utiliza toate etichetele mentionate anterior. <html> <head> <title>?tiluri pentru blocuri de te)t </title> </head> <bodH> <b>#e)t scris cu caractere ingrosate.</b> <br> <big>#e)t cu caractere marite cu o unitate <big>mai mare<big> si mai mare<big> si mai mare.</big></big></big></big><br> <small>#e)tul este scris cu caractere micsorate cu o unitate <small>mai mic.</small></small><br> <i>#e)t scris cu caractere italice.</i> <br> 9n aceasta linie <sup>sus</sup> este superscript iar <sub>jos</sub> este subscirpt.<br> <striCe> ceasta linie este in intregime sectionata de o linie orizontala.</striCe> <br> 9n aceasta linie urmatorul cuvant este <u>subliniat</u>( iar cuvantul <s>striCe</s> sectoinat. </bodH> </html> vezi acest e)emplu 4!i"uri &i(ice si "'#ice m prezentat deja A stiluri de scriere a caracterelor unui bloc de te)t( numite si stiluri !izice intrucat nu s-a acordat nici o atentie semni!icatiei in!ormatiei continute de aceste blocuri. 9n continuare sunt prezentate stilurile utilizate la !ormatarea unui bloc. ceste stiluri tin cont de semni!icatia pe care o are blocul in cadrul paginii 0eb. 1entru a pune in evidenta 4 prin silul cursiv 5 !ragmente de te)t se utilizeaza etichetele: <cite>...</cite> 4 L cite L inseamna citat5/ <em>...</em> 4em vine de la L emphasize L ; a evidentia5. 9n locul lor se poate utiliza eticheta echivalenta <i>...</i>. Urmatoarele etichete au e!ecte similare.Jle permit scrierea !ragmentului de te)t cu caractere monospatiate 4 de tipul celor !olosite de o masina de scris 5: <code>...</code> 4 L code L inseamna cod sau sursa5/ <Cbd>...</Cbd> 4 Cbd vine de la L CeHboard L ; tastatura5/ <tt>...</tt> 4 tt vine de la L teletHpe L ; teleprinter5. Jticheta de tip bloc <blinC>...</blinC> delimiteaza !ragmenete de te)t clipitoare. ceasta eticheta !unctioneaza numai in browserul *etscape 2ommunicator. 3-
<html> <head> <title>Ilocuri de caractere monospatiate si clipitoare </title> </head> <bodH> ceasta linie este !ormata din te)t normal.<br> 2odul !unctiei !4)(H5 este: <code>Kunction !4)(H5 Rreturn )SH/T</code><br> #astati urmatoarea comanda comanda 6@?: <Cbd> copH c:UwindowsUF c:Utemp<Cbd><br> <tt> sa scrie un teleprinter</tt><br> cest cuvant clipeste <blinC>IlinC</blinC> </bodH> </html> vezi acest e)emplu J)emplul urmator ilustreaza ca etichetele pot !i imbricate. un !ragment de te)t poate !i scris cu aldine si cursive in acelsi timp/ pentru un !ragment de te)t se pot !olosi simultan stilurile subliniat( e)ponent( marit si cursiv. Ilocul <Q>...</Q> permite inserarea in-line a citatelor. ceste citate sunt a!isate de catre browser cu caractere cursive. L Q L vine de la L in-line Quotation L 4citate inserate in-line5/ ?i blocurile L Q L pot !i imbricate. <html> <head> <title>9mbricarea etichetelor </title> </head> <bodH> ceasta linie este !ormata din te)t normal.<br> *ormal <b>ingrosat <i> ingrosat si italic </i> ingrosat </b>. <br> *ormal <u>subliniat <b> subliniat si ingrosat <big>subliniat( ingrosat si marit.<br> <i>?ubliniat( ingrosat (marit si italic.</i> </big></b></u> </bodH> </html> 3. Fonturi Un !ont este caracterizat de urmatoarele atribute: culoare 4stabilita prin atributul 1'.'(5/ tipul sau stilul 4stabilit prin atributul 4-105/ marimea 4de!inita prin atributul 7)*05/ marimea in puncte tipogra!ice 4stabilita prin atributul 8')+,"7)*05/ grosime 4de!inita prin atributul H0)5&,5. #oate aceste atribute apartin etichetei( care permite inserarea de blocuri de te)te personalizate. Cu"'ri @ culoare poate !i precizata in doua moduri: &. printr-un nume de culoare. D. printr-o constanta con!orm standardului de culoare :GI 4:ed( Green(Ilue5. @ ast!el de constanta se !ormeaza ast!el: =rrggbb( unde r( g si b sunt ci!re he)azecimale. Cu"'rea &'n!u"ui 1entru a scrie un !ragment de te)t cu caractere de o anumita culoare se incadreaza acest !ragment intre delimitatorii @@@ avand stabilit atributul 1'.'( la valoarea necesara. 6e e)emplu: <4'+, 1'.'(=(0C>!ragment de te)t de culoare rosie</4'+,> 2a%i"ia &'n!u"ui 1entru a scrie un te)t intr-o pagina pot !i !olosite mai multe !onturi 4stiluri de caractere5. J)ista cinci !amilii generice de !onturi care sunt de regula disponibile pe toate calculatoarele utilizatorilor: seri!( sans seri!( cursive( monospace si !antasH. #ipul de !ont necesar poate !i stabilit prin atributul 4-10 al etichetei. 1ot !i introduse mai multe !onturi separate prin virgula. <4'+, 4-10= A()-.: 70()4: >'+'78-10 > 9n acest caz browserul va utiliza primul !ont pe care il cunoaste. 33
<&,>.> <&0-C> <,),.0> </&0-C> <2'CB>
2uloarea si !amilia !ontului</,),.0>
ceste linie este scrisa cu caractere normale.

<2(> <4'+, 1'.'(= (0C > ceasta linie este rosie.</4'+,> <2(> ici<4'+, 1'.'(= 5(00+ >!iecare</4'+,> <4'+, 1'.'(= 2.A0 >cuvant</4'+,> <4'+, 1'.'(= B0..'H >are</4'+,> <4'+, 1'.'(= 1B-+ >alta</4'+,> <4'+, 1'.'(= #EIJK4- >culoare.</4'+,> <2(><4'+, 4-10= >'+'78-10 >%inie scrisa cu caractere monospatiate.</4'+,> <2(> <4'+, 4-10= -()-. >%inie scrisa cu caractere arial.</4'+,> </2'CB> </&,>.>
vezi acest exemplu
Mari%ea &'n!u"ui 1enrtu a stabili marimea unui !ont se utilizeaza atributul 7)*0 al etichetei. Malorile acestui atribut pot !i: 3( '( &( D( .( 7( 8 4 3 pentru cel mai mic !ont si 8 pentru cel mai mare5/ S3( S'( etc. pentru a mari dimensiunea !ontului cu 3( '( etc. !ata de valoarea curenta/ -3( -'( etc. pentru a micsora dimensiunea !ontului cu 3( '( etc. !ata de valoarea curenta. $arimea unui !ont poate !i stabilita e)act cu ajutorul atributului 8')+,"7)*0. Malorile acceptate de acest atribut pot !i orice numere naturale pozitive.*umarul ast!el precizat reprezinta marimea !ontului in puncte tipogra!ice. Acest atribut functioneaza numai cu Netsca e !ommunicator. <&,>.> <&0-C> <,),.0> </&0-C> <2'CB>
$arimea !ontului</,),.0>
ceste linie este scrisa cu caractere normale. <2(> <4'+, 7)*0= L >Konturi de marime ..</4'+,> <2(> <2-704'+, 7)*0= I >Konturi de marime D.</4'+,> <2(> <4'+, 7)*0= "E >Konturi de marime 3.</4'+,> <2(> <4'+, 7)*0= !G >Konturi de marime 7.</4'+,> <2(> <4'+, 8')+,"7)*0= EM >Konturi de marime &- pt 4numai cu *etcape 2ommunicator5.</4'+,> <2(> <4'+, 8')+,"7)*0= LM >Konturi de marime .- pt 4numai cu *etcape 2ommunicator5.</4'+,>
</2'CB> </&,>.>
vezi acest exemplu
Gr'si%ea unui &'n! Grosimea unui caracter poate !i de!inita cu ajutorul atributului H0)5&, al etichetei. Malorile posibile pentru acest atribut sunt 3--( '--( &--( D--( .--( 7--( 8--( A-- si B-- 43-- pentru !ontul cel mai subtire si B-- pentru cel mai gros5. <&,>.> <&0-C> <,),.0> </&0-C> <2'CB>
Grosimea !ontului</,),.0>
ceste linie este scrisa cu caractere normale. <2(> <4'+, H0)5&,= =MM >Konturi de grosime 3--.</4'+,> <2(> <4'+, H0)5&,= LMM >Konturi de grosime .--.</4'+,> <2(> <4'+, H0)5&,= NMM >Konturi de grosime B--.</4'+,>
3'
</2'CB> </&,>.> ceste etichete nu se re!era la particularitatiile caracterelor ce compun te)tul( ci la !unctiile pe care le poate avea un bloc de te)t in cadrul paginii 0eb. #oate aceste etichete produc automat trecerea la un rand nou si adaugarea unui spatiu suplimentar. Inserarea unei adrese 6aca intr-o pagina web trebuie inclusa o adresa (atunci putem utiliza !acilitatile o!erite de o eticheta dedicata: 8address9@@@8Caddress9. <&,>.> <&0-C> <,),.0> </&0-C> <2'CB>
dresa</,),.0>
dresa institutiei noastre este :<-CC(077> 2olegiul Universitar<2(> ?tr: Mictor Iabes ( *r:7'/ <2(> Iaia $are :omania </-CC(077>
</2'CB> </&,>.>
vezi acest exemplu
Inden!area unui b"'c 1entru ca un bloc de te)t sa !ie indentat 4 marginea din stanga a te)tului sa !ie deplasata la dreapta la o anumita distanta !ata de marginea paginii 5( acesta trebuie inclus intre etichetele 8b"'c*Du'!e9@@@8Cb"'c*Du'!e9. <&,>.> <&0-C> <,),.0> </&0-C> <2'CB>
9ndentarea unui bloc</,),.0>
#e)tul ce urmeaza este indentat:<2.'13@A',0> ceste etichete nu se re!era la particularitatiile caracterelor ce compun te)tul( ci la !unctiile pe care le poate avea un bloc de te)t in cadrul paginii 0eb. #oate aceste etichete produc automat trecerea la un rand nou si adaugarea unui spatiu suplimentar. </2.'13@A',0>
</2'CB> </&,>.>
vezi acest exemplu
6"'cu" pre&'r%a!a! 9ntr-un bloc 8pre9@@@8Cpre9( semni!icatia marcajelor "#$% se pastreaza. Ilocul 8pre9@@@8Cpre9 este indicat pentru a insera randuri vide 4 spatiu intre randurile succesive 5. 2aracterul L spatiu L poate !i luat in considerare de browser daca este inserat e)plicit prin ?+278;. <&,>.> <&0-C> <,),.0> Iloc </&0-C> <2'CB> @rar:<8(0>
pre!ormatat</,),.0>
@ra/Viua %uni $arti $iercuri A:-- :omana $atematica ?port B:-- Geogra!ie 9storie Kizica </8(0>
</2'CB> </&,>.>
vezi acest exemplu
9ntr-un !isier "#$%( caracterele L8L si L9L au o semni!icatie speciala pentru browser. Jle incadreaza comenzile si atributele de a!isare a elementelor intr-o pagina. 6aca dorim ca un !ragment de te)t sa contina ast!el de caractere( acest !ragment trebuie incadrat de una dintre perechile de etichete: 3&
81%p9@@@8C1%p9 4 A- de caractere pe rand 5/ 8"is!in#9@@@8C"is!in#9 4 3'- de caractere pe rand 5. ceste marcaje interpreteaza corect caracterele L spatiu L( L eticheta L si L2:/%K L. #e)tul a!isat in pagina este monospatiat. <&,>.> <&0-C> <,),.0> </&0-C> <2'CB>
)mp si listing</,),.0>
Un !isier html standard arata ast!el: <O>8> <html> <head> <title> </title> </head> <bodH> @ pagina 0eb ... </bodH> </html> </O>8> </2'CB>
</&,>.>
vezi acest exemplu
6"'curi para#ra& 2u ajutorul etichetei paragra! 8p9 este posibil trecerea la o linie noua si permite: inserarea unui spatiu suplimentar inainte de blocul paragra!/ inserarea unui spatiu suplimentar dupa blocul paragra!( daca se !oloseste delimitatorul 8Cp9 4acesta !iind optional5/ alinierea te)tului cu ajutorul atributului -.)5+( avand valorile posibile L le!t L( L center L sau L right L. <&,>.> <&0-C> <,),.0> </&0-C> <2'CB>
Ilocuri paragra!</,),.0>
1rima linie <8> %ini generata de un paragra! 4implicit paragra!ul este aliniat la stanga5. <8 -.)5+= ()5&, > 1aragra! aliniat la dreapta.1aragra! aliniat la dreapta.1aragra! aliniat la dreapta.1aragra! aliniat la dreapta. 1aragra! aliniat la dreapta.1aragra! aliniat la dreapta.1aragra! aliniat la dreapta. <8 -.)5+= 10+,0( > 1aragra! aliniat in centru.1aragra! aliniat in centru.1aragra! aliniat in centru.1aragra! aliniat in centru. 1aragra! aliniat in centru.1aragra! aliniat in centru.1aragra! aliniat in centru.
</2'CB> </&,>.>
vezi acest exemplu
6"'curi de !i!"u 9ntr-un te)t titlurile 4 headers 5 de capitole pot !i introduse cu ajutorul etichetelor 8hE9F 8hA9F 8h?9F 8hG9F 8hH9F 8hI9. #oate aceste etichete se re!era la un bloc de te)t si trebuie insotite de o eticheta de incheiere similara. ceste etichete accepta atributul -.)5+ pentru alinierea titlului blocului de te)t la stanga 4in mod prestabilit 5 ( in centru si la dreapta. #ag-ul 8hE9 permite scrierea unui titlu cu caractere mai mari si aldine( pe cand 8hI9 !oloseste caracterele cele mai mici. <&,>.> <&0-C> <,),.0> Ilocuri de titlu</,),.0> </&0-C> <2'CB> <&= -.)5+= 10+,0( > #itlu de marime 3 aliniat in centru </&=> <&G -.)5+= ()5&, > #itlu de marime ' aliniat la dreapta. </&G> <&I> #itlu de marime D aliniat la stanga 4implicit5 </&I> 3D
</2'CB> </&,>.>
vezi acest exemplu
Linii 'ri('n!a"e 9ntr-o pagina 0eb pot !i inserate linii orizontale.acest lucru se !ace cu ajutorul etichetei 8hr9. 1entru a con!igura o linie orizontala se utilizeaza urmatorele atribute ale etichetei 8hr9: -.)5+ permite alinierea liniei orizontala. Malorile posibile sunt L le!t L (L center L si L right L/ H)C,& permite alegerea lungimii liniei/ 7)*0 permite alegerea grosimii liniei/ +'7&-C0 cand este prezent de!ineste o linie !ara umbra/ 1'.'( permite de!inirea culorii liniei. <&,>.> <&0-C> <,),.0> %inii orizontale</,),.0> </&0-C> <2'CB> <&= -.)5+= 10+,0( > #ipuri de linii
orizontale </&=> @ linie implicita alinierea stanga(
latime 3--E( grosime ' cu umbra.

<&(>
Urmeaza o linie aliniata in centru ( de latime .-E( grosime . pi)eli ( !ara umbra. <&( -.)5+= 10+,0( H)C,&= LM< 7)*0= L +'7&-C0> Urmeaza o linie aliniata la dreapta ( de latime 3.- de pi)eli( grosime 3' pi)eli ( de culoare rosie.
<&( -.)5+= ()5&, </2'CB> </&,>.> 6"'curi 8cen!er9 Ilocul introdus de etichetele 8cen!er9@@@8Ccen!er9 aliniaza centrat toate elementele pe care le contine. <&,>.> <&0-C> <,),.0> %inii orizontale</,),.0> </&0-C> <2'CB> <10+,0(> <&( H)C,&==M<> <&( H)C,&=IM<> <&( H)C,&=JM<> <&( H)C,&==MM<> <&( H)C,&=JM<> <&( H)C,&=IM<> <&( H)C,&==M<> </10+,0(> </2'CB> </&,>.>
vezi acest exemplu
H)C,&==LM 7)*0==G 1'.'(= (0C >
vezi acest exemplu
6"'curi 8n'br9 Ilocul de te)t cuprins intre etichetele 8n'br9@@@8Cn'br9 va !i a!isat pe o singura linie. <&,>.> <&0-C> <,),.0> Ilocul <nobr></,),.0> </&0-C> <2'CB> <+'2(> @ singura linie.@ singura linie.@
singura linie.@ singura linie.@ singura linie. @ singura linie.@ singura linie.@ singura linie.@ singura linie.@ singura linie. @ singura linie.@ singura linie.@ singura linie.@ singura linie.@ singura linie.
</+'2(> </2'CB> </&,>.> 6"'curi 8div9 $odalitatea cea mai e!icienta de delimitare si de !ormatare a unui bloc de te)t este !olosirea delimitatorilor 8div9@@@8Cdiv9. Un parametru !oarte !oarte util pentru stabilirea caracteristicilor unui bloc 8div9 4 diviziune 5 este 3.
vezi acest exemplu
-.)5+ 4 aliniere 5. Malorile posibile ale acestui parametru sunt: L le!t L 4 aliniere la stanga 5/ L center L 4 aliniere centrala 5/ L right L 4 aliniere la dreapta 5. Un bloc 8div9@@@8Cdiv9 poate include alte subblocuri. 9n acest caz ( alinierea precizata de atributul -.)5+ al blocului are e!ect asupra tuturor subblocurilor incluse in blocul 8div9/ Un bloc 8div9@@@8Cdiv9 admite atributul L nowrap L care interzice intreruperea randurilor de catre browser. <&,>.> <&0-C> <,),.0> </&0-C> <2'CB>
Ilocul <div></,),.0>
<C)/ -.)5+= ()5&, >
ceasta linie este o linie normala.Urmatorul bloc este aliniat la dreapta.
@ singura linie.@ singura linie.@ singura linie.@ singura linie.<2(> @ singura linie.@ singura linie.@ singura linie.@ singura linie.<2(> @ singura linie.@ singura linie.@ singura linie.@ singura linie.<2(>
</C)/> <C)/ -.)5+= 10+,0( >
Iloc aliniat pe centru.Iloc aliniat pe centru.<2(> Iloc aliniat pe centru.Iloc aliniat pe centru.<2(> Iloc aliniat pe centru.Iloc aliniat pe centru.<2(>
</C)/> </2'CB> </&,>.>
5. Imagini Imaginile sunt stocate in fisiere cu diverse formate. Formatele acceptat de browsere pentru fisierele imagine sunt: GIF (Graphics Interchange Format) cu extensia .gif; J !G (Joint hotographic !xperts Group) cu extensia ."peg sau ."pg; # $ (# ix$ap) cu extensia .xmp; #%$ (# %it$ap) cu extensia .xbm; %$ (%it$ap) cu extensia .bmp (numai cu Internet !xplorer); &IFF (&agged Image File Format) cu extensia .tif sau .tiff; 'ele mai raspandite formate sunt GIF((biti pentru o culoare) *+, culori posibile) si J !G (*-biti pentru o culoare) .,///*., de culori posibile). Adresa URL a unei imagini 012 ( 30niform 1esourse 2ocator3 4 identificator unic al resursei ) este un standard folosit in identificarea unica a unei resurse in Internet. &oate imaginile cu care vom lucra vor avea adresa 012 exprimata in functie de directorul ce contine documentul 5&$2 care face referire la imagine. entru a insera o imagine intr6o pagina) se utili7ea7a eticheta <img> (de la 3image34imagine). entru a putea fi identifica imaginea care va fi inserata) se utili7ea7a un atribut al etichetei <img> si anume 7(1 (de la 3source34sursa). 8aca imaginea se afla in acelasi director cu fisierul 5&$2 care face referire la imagine) atunci adresa 012 a imaginii este formata numai din numele imaginii) inclusiv extensia. 9 pagina care contine o imagine <)>5 7(1= HEF5)4 > &ext dupa imagine.
vezi acest exemplu
Chenarul si dimensionarea unei imagini 8aca doriti sa adaugati un chenar in "urul imaginii) folositi atributul 2'(C0( al etichetei <img>. :alorile acestor atribute sunt numere intregi po7itive. 9 imagine are anumite dimensiuni pe ori7ontala si verticala) stabilite in momentul crearii ei. 37
8aca nu se cere altfel ) aceste dimensiuni sunt respectate in momentul afisarii ei in pagina ;eb. 8imensiuniile prestabilite ale unei imagini pot fi modificate prin intermediul atributelor H)C,& si &0)5&,. 9 imagine cu chenar si de *<< pixeli # .+ = <)>5 7(1= HEF5)4 2'(C0(= L H)C,&= ELM
&0)5&,= GL< > &ext dupa imagine.

vezi acest exemplu
Alinierea unei imagini >linierea unei imagini se poate face prin intermediul atributului -.)5+ care poate lua urmatorele valori: 3 left 3 6 aliniere la stanga; celelalte componente sunt dispuse pe in partea dreapta; 3 right 3 6 aliniere la dreapta; celelalte componente sunt dispuse pe in partea stanga; 3 top 3 6 aliniere deasupra; partea de sus a imaginii se alinia7a cu partea de sus a textului ce precede imaginea; 3 middle 3 6 aliniere la mi"loc; mi"locul imaginii se alinia7a cu linia de ba7a a textului ce precede imaginea. 3 bottom 3 6 aliniere la ba7a; partea de "os a imaginii se alinia7a cu linia de ba7a a textului. >linieri: e verticala: <)>5 7(1= HEF5)4 -.)5+= ,'8 > 2a mi"loc: <)>5 7(1= HEF5)4 -.)5+= 10+,0( > Jos: <)>5 7(1= HEF5)4 -.)5+= 2',,'> > &ext dupa imagine.
vezi acest exemplu
Alinierea textului in jurul imaginii >tributele &78-10 si /78-10 preci7ea7a distanta in pixeli pe ori7ontala ) respectiv pe verticala) dintre imagine si restul elementelor din pagina. >tributul -., admite ca valoare un text care va fi afisat in locul imaginii. Imagine aliniat la stanga inconjurata de text la distanta de ! de "ixeli# &ext inainte de imagine.&ext inainte de imagine.&ext inainte de imagine.&ext inainte de imagine. &ext inainte de imagine.&ext inainte de imagine.&ext inainte de imagine.&ext inainte de imagine. <)>5 7(1= HEF5)4 -.)5+= .04, &78-10= EM /78-10= EM -.,= U+)/0(7),-,0- C0 N'(C B-)- M-(0 > &ext dupa imagine.&ext dupa imagine.&ext dupa imagine.&ext dupa imagine.&ext dupa imagine. &ext dupa imagine.&ext dupa imagine.&ext dupa imagine.&ext dupa imagine.&ext dupa imagine.
vezi acest exemplu
Imagini "entru $ondul unei "agini 9 imagine poate fi utili7ata pentru a stabili fondul unei pagini ;eb. In acest scop se foloseste atributul 2-135('A+C al etichetei <%od&>) avand ca valoare adresa 012 a imaginii. Imaginea se multiplica pe ori7ontala si pe verticala pana umple intregul ecran. <2'CB 2-135('A+C= HEF5)4 > . * ? + , / ( @ </2'CB>
vezi acest exemplu
38
Imagini $olosite ca legaturi 9 legatura (linA) introduce in pagina ;eb o 7ona activa. !fectuand clicA cu butonul mouse6ului pe aceasta 7ona in browser se va incarca o alta pagina. entru a utili7a imaginea 3ubm.."pg3 drept legatura catre pagina index.html utili7am sintaxa: <- &(04 = )+C0O"GF&,>. ><)>5 7(1= HEF5)4 ></-> In mod prestabilit imaginea utili7ata pe post de 7ona activa este incon"urata de un chenar avand culoarea unei legaturi. 8aca stabilim pentru atributul 2'(C0( al etichetei <img> < acest chenar dispare. <BODY Imagini $olosite ca legaturi &ext inainte de imagine.<- &(04= )+C0O"GF&,>. ><)>5 7(1= HEF5)4 ></-> &ext dupa imagine.
vezi acest exemplu
Utili'ari s"eciale ale imaginilor Imaginile pot fi utili7ate pentru a obtine efecte deosebite intr6o pagina web. rintre aceste utili7ari speciale putem enumera: +. 2inii ori7ontale formate cu a"utorul imaginilor . 7. Bimboluri speciale pentru elementele unei liste neordonate ( ve7i ). 7. %egaturi %agaturile 4linC-urile5 reprezinta partea cea mai importanta a unei pagini 0eb. Jle trans!orma un te)t obisnuit in hiperte)t sau hiperlegatura( care premite trecerea rapida de la o in!ormatie a!lata pe un anumit server la alta in!ormatie memorata pe un alt server a!lat oriunde in lume. %egaturile sunt zone active intr-o pagina 0eb( adica zone de pe ecran sensibile la apasarea butonului stang al mouse-ului. @ legatura catre o pagina a!lata in acelasi director @ legatura catre o pagina a!lata in acelasi director se !ormeaza cu ajutorul etichetei <a> 4de la LanchorL;ancora5. 1entru a preciza pagina indicata de legatura se utilizeaza un atribut al etichetei <a> numit hre!( care ia valoare numele !isierului "#$% a!lat in acelasi director. Vona activa care devina sensibila la apasarea butonului stang al mouse-ului este !ormata din te)tul cuprins intre etichetele <a>...</a>. 1rezenta etichtetei de s!arsit </a> este obligatorie. <html> <head> <title> 2omutarea intre doua pagini</title> </head> <bodH> <h&>1agina 3 </h&> <a hre!;LlegWe)'.htmlL> %inC catre pagina ' </a> </bodH> </html> vezi acest e)emplu <html> <head> <title> 2omutarea intre doua pagini</title> </head> <bodH> <h&>1agina ' </h&> <a hre!;LlegWe)3.htmlL> %inC catre pagina 3 </a> </bodH> </html> vezi acest e)emplu @ legatura catre o pagina a!lata pe acelasi disc local 3A
6aca pagina re!erita se a!la pe acelasi disc local( dar intr-un alt director atunci pentru a preciza pozitia ei in structura de directoare se poate !olosi adresarea relativa. <html> <head> <title> 2omutarea intre doua pagini a!late pe acelasi disc local</title> </head> <bodH> <h&>1agina & </h&> <a hre!;L../../e)emple/list/liste)W33.htmlL> %inC catre o pagina cu liste </a> </bodH> </html> vezi acest e)emplu @ legatura catre un site particular 9n e)emplul urmator se utilizeaza adresa U:% www.netscape.com care incarca pagina de start din site-ul !irmei *etscape 2orporation. <html> <head> <title> %inC catre site-ul !irmei *etscape</title> </head> <bodH> <h&>%inC catre site-ul !irmei *etscape </h&> <a hre!;Lhttp://www.netscape.comL> *etscape 2orporation </a> </bodH> </html> vezi acest e)emplu ncore 9ntr-o pagina !oarte lunga pot e)ista puncte de reper catre care se de!inesc legaturi. @ ancora se de!ineste de asemenea prin eticheta <a>. 1entru a de!ini ancora se utilizeaza atributul name care primeste ca valoare un nume atribuit ancorei 4de e)emplu Lleg3L5. 1entru a insera o legatura catre Lleg3L de!inita in aceeasi pagina se utilizeaza eticheta <a> avand atributul hre! de valoare L=leg3L. 1entru a introduce o legatura catre o ancora de!inita in alt document 4alta pagina5 a!lat in acelasi director( atributul hre! primeste o valoare de !orma LnumeW!isier.html=numeWancoraL. <html> <head> <title> ncore de!inite in acelasi document si in alt doocument</title> </head> <bodH> <h&> ncore de!inite in acelasi document si in alt document </h&> <a hre!;L=ancora3L> %inC catre ancora 3 </h&> <a hre!;L../../legaturi.php=ancL> %inC catre o ancora din alt document </a> <br> 3<br>'<br>&<br>D<br> .<br>7<br>8<br>A<br> B<br>3-<br>33<br>3'<br> 3&<br>3D<br>3.<br>37<br> 38<br>3A<br>3B<br>'-<br> '3<br>''<br>'&<br>'D<br> <a name;Lancora3L>ancora 3 </bodH> </html> vezi acest e)emplu ncore de!inite prin atributul id tributul id este un atribut universal (adica poate !i atasat oricarui element al unei pagini 0eb. cest atribut va inlocui complet atributul name( care putea !i atasat numai anumitor elemente. tributul id primeste ca valoare un nume 4de e)emplu Lid3L5 care identi!ica in mod unic un element. tributul id poate !i utilizat pe post de ancora intr-o pagina 0eb con!orm sinta)ei: <eticheta id ; Lid3L> ... </eticheta> <a hre! ; L=id3L >%inC catre elementul Lid3L </a> unde LetichetaL poate !i orice element . 3B
J)emplul anterior arata ast!el cu eticheta id. legerea culorilor pentru legaturi 9n mod prestabilit se utilizeaza trei culori pentru legaturi: o culoare pentru legaturile nevizitate 4nu s-a e!ectuat nici un clic pe ele5 o culoare pentru legaturile vizitate 4s-a e!ectuat cel putin un clic pe ele5 o culoare pentru legaturile active 4deasupra carora se a!la mouse-ul la un moment dat5. ceste atribute pot !i stabilite cu ajutorul a trei atribute ale etichetei <bodH>: linC pentru legaturile nevizitate/ vlinC pentru legaturile vizitate/ alinC pentru legaturile active. Malorile pe care le pot lua aceste atribute sunt culori de!inite prin nume sau con!orm standardului :GI. <html> <head> <title> 2ulori pentru lagaturi</title> </head> <bodH linC;LblueL vlinC;LgreenL alinC;LredL> <h&>?etarea culorilor pentru linC-uri:<br>rosu pentru legaturi active( verde pentru legaturi vizitate si albastru pentru legaturi nevizitate </h&> <a hre!;legWe)3.html> %inC catre pagina 3 <br> <a hre!;legWe)'.html> %inC catre pagina ' <br> <a hre!;legWe)A.html> %inC catre pagina 33 </a> </bodH> </html> vezi acest e)emplu Utilizarea postei electronice 9ntr-o pagina 0eb se poate a!la legaturi care permit lansarea in e)ecutie a aplicatiei de e)pediere a mesajelor electronice. 1entru aceasta se utilizeaza in constructia adresei U:% serviciul 9nternet mailto: urmat de o adresa e-mail valida. 1entru ca e)emplul urmator sa !unctioneze trebuie ca: pe calculator sa !ie instalat o aplicatie de e)pediere a mesajelor electrionice 4@utlooC J)press pe calc. 0indows ( 1ine pe calc. Uni)5/ adresa sa !ie valida si calculatorul sa !ie conectat la 9nternet. <html> <head> <title> J)pediere de mesaje electronice</title> </head> <bodH> <h&>J)pediere de mesaje electronice</h&><br> <a hre!;Lmailto:aWbszXHahoo.comL> $esaje catre autorul paginii </bodH> </html> vezi acest e)emplu %egaturi catre !isiere oarecare @ pagina 0eb poate contine legaturi catre orice tip de !isiere a!late pe orice servere din 9nternet. 1entru aceasta se utilizeaza eticheta <a> avand valoarea atributului hre! egala cu adresa U:% a !isierului destinatie. tunci cand se e!ectueaza clic pe legatura din e)emplul urmator browserul se deschide o caseta de dialog - Kile download - care va permite: sa salvati pe discul local !isierul sa lansati in e)ecutie aplicatia capabila sa interpreteze corect !isierele de tipul respectiv <html> <head> <title> %egaturi catre !isiere oarecare</title> </head> <bodH> '-
<h&>%egaturi catre !isiere oarecare</h&><br> <a hre!;L!isier.zipL> %inC catre !isierul !isier.zip </bodH> </html> vezi acest e)emplu tributul title tributul title apartine etichetei <a> si comanda aparitia unei mici !erestre in pagina 0eb cand mouse-ul se a!la pe o legatura( !ereastra in care este a!isata valoarea data acestui atribut. cest atribut are ast!el menirea de a !urniza in!ormatii suplimentare despre semni!icatia unei legaturi. <html> <head> <title> tributul title</title> </head> <bodH> <h&> tributul title</h&><br> <a hre!;Lmailto:aWbszXHahoo.comL title;Ladresa mea de e-mailL> $esaje catre autorul paginii </bodH> </html> vezi acest e)emplu %egaturi catre !isiere de sunet ?unetele pot !i stocate in !isiere in diverse !ormate: U/m-law cu e)tensia .au/ 9KK/ 9K2 cu e)tensiile .ai!!( .ai!/ 0 MJ/0 M cu e)tensia .wav/ $1JG udio cu e)tensia .mpeg'( sau .mp'/ $969 cu e)tensia .mid sau .midi/ @ legatura catre un !isier de sunet se realizeaza !olosind eticheta <a> destinata legaturilor catre orice tip de !isiere( unde atributul hre! va avea valoarea egala cu adresa U:% a !isierului de sunet. 6e e)emplu: <a hre!;Lnume!isier.auL>%inC catre !isierul de sunet</a> %egaturi catre !isiere videoclipuri Mideoclipurile sunt stocate in !isiere diverse !ormate.Kormatele si e)tensiile corespunazatoare pentru !isierele utilizabile in paginile 0eb sunt urmatoarele: $1JG cu e)tensia .mpeg sau mpg/ YuicC#ime cu e)tensia .mov/ M9 cu e)tensia .avi. @ legatura catre un !isier de sunet se realizeaza !olosind eticheta <a> destinata legaturilor catre orice tip de !isiere( unde atributul hre! va avea valoarea egala cu adresa U:% a !isierului videoclip. 6e e)emplu: <a hre!;Lnume!isier.aviL>%inC catre !isierul videoclip</a> Z 2e este "#$% > Z 1rimii pasi Z Konturi Z Ilocuri de te)t Z 9magini Z %egaturi Z %iste Z #abele Z Z Kerestre in "#$% Z Kormulare Z 7. Liste 0nul din cele mai obisnuite elemente din documentele cu mai multe pagini este un set de definitii) referinte sau indexuri. Glosarele sunt exemple clasice in acest sens; cuvintele sunt listate in ordine alfabetica) urmate de definitii ale termenilor respectivi. In 5&$2) intreaga sectiune a unui glosar va fi gestoinata printr6o lista de definitii) care este inclusa intr6o pereche de marca"e de lista de definitii: <dl>###<(dl> (de la 3definition list3 4 lista de definitii). Observatii: -Un termen al listei este initiat de eticheta <dt> (de la "definition term" = termen definit); -Definitia unui termen este initiata de eticheta <dd> (de la "definition description" = descrierea definitiei); '3
-Definitia unui termen incepe pe o linie noua si este indentata; <&,>.> <&0-C><,),.0>listexC.</,),.0></&0-C> <2'CB><&= -.)5+= 10+,0( >9 lista de definitii</&=><&(> <C.> Glosar de termeni de ;orld ;ide ;eb <C,><2>hDpertext</2> <CC>6 o interconectare ;eb de informatii de tip text) in care orice cuvant sau fra7a poate face legatura catre un alt punct din document sau catre un alt document <C,><2>date</2> <CC>6 fluxul nesfarsit de materiale care apar pe Internet) spre deosebire de informatii care sunt date cu un anumit inteles sau valoare <C,><2>informatie</2> <CC>6 sub6setul de date care are efectiv semnificatie si care este util la momentul curent </C.> </2'CB> </&,>.>
vezi acest exemplu
Liste neordonate 9 lista neordonata este un bloc de text delimitat de etichetele corespondente <ul>###<(ul> (3 ul 3 vine de la 3 unordered list 3 4 lista neordonata). Fiecare element al listei este initiat de eticheta <li> (list item). 2ista va fi indentata fata de restul paginii ;eb si fiecare element al listei incepe pe un rand noua. <&,>.> <&0-C><,),.0>listexC*</,),.0></&0-C> <2'CB><&= -.)5+= 10+,0( >9 lista neordonata</&=><&(> Glosar de termeni de ;orld ;ide ;eb <A.>'ulori u7uale disponibile prin nume <.)>%lacA <.)>;hite <.)>1ed <.)>Green <.)>%lue <.)>Eellow <.)> urple <.)>>Fua </A.> </2'CB> </&,>.>
vezi acest exemplu
&ag6urile <ul> si <li> pot avea un atribut ,B80 care stabileste caracterul afisat in fata fiecarui element al listei. :alorile posibile al acestui atribut sunt: 3circle3 (cerc) 3disc3 (disc plin) (valoarea prestabilita); 3sFuare3 (patrat)
2istele neordonate pot fi imbricate pe mai multe niveluri <&,>.> <&0-C><,),.0>listexC?</,),.0></&0-C> <2'CB><&= -.)5+= 10+,0( >9 lista neordonata de liste neordonate</&=><&(> Glosar de termeni de ;orld ;ide ;eb <A.>!lemente si atribute a unei pagini 5&$2 <.)>Frameset <A.>>tribute: <.)>cols <.)>rows <.)>border </A.> <.)>Frame <A.>>tribute: <.)>src <.)>name <.)>scrolling </A.> </A.> </2'CB> </&,>.> ''
vezi acest exemplu
Liste ordonate 9 lista ordonata de elemente este un bloc de text delimitat de etichetele corespondente <ol>###<(ol> (3 ol 3 vine de la 3 ordered list 3 4 lista ordonata). Fiecare element al listei este initiat de eticheta <li> (list item). 2ista va fi indentata fata de restul paginii ;eb si fiecare element al listei incepe pe un rand noua. <&,>.> <&0-C><,),.0>listexC-</,),.0></&0-C> <2'CB><&= -.)5+= 10+,0( >9 lista ordonata</&=><&(> <'.>'ulori u7uale disponibile prin nume <.)>%lacA <.)>;hite <.)>1ed <.)>Green <.)>%lue <.)>Eellow <.)> urple <.)>>Fua </'.> </2'CB> </&,>.>
vezi acest exemplu
&ag6urile <ol> si <li> pot avea un atribut ,B80 care stabileste tipul de caractere utili7ate pentru ordonarea listei.:alorile posibile sunt: 3 > 3 pentru ordonare de tipul > ) % ) ' ) 8 etc. ( litere mari ); 3 a 3 pentru ordonare de tipul a ) b ) c ) d etc. ( litere mici ); 3 I 3 pentru ordonare de tipul I ) II ) III ) I: etc. ( cifre romane mari ); 3 i 3 pentru ordonare de tipul i ) ii ) iii ) iv etc. ( cifre romane mici ); 3 . 3 pentru ordonare de tipul . ) * ) ? ) - etc. ( cifre arabe 6 optiune prestabilita );
0rmatorul exemplu este o lista ordonata cu cifre romane <&,>.> <&0-C><,),.0>listexC+</,),.0></&0-C> <2'CB><&= -.)5+= 10+,0( >9 lista ordonata cu cifre romane</&=><&(> <'. ,B80= I >'ulori u7uale disponibile prin nume <.)>%lacA <.)>;hite <.)>1ed <.)>Green <.)>%lue <.)>Eellow <.)> urple <.)>>Fua </'.> </2'CB> </&,>.>
vezi acest exemplu
&ag6ul <ol> poate avea un atribut 7,-(, care stabileste valoarea initiala a secventei de ordonare.:aloarea acestui atribut trebuie sa fie un numar intreg po7itiv. 0rmatorul exemplu este o lista ordonata cu litere mari) incepand de la valoarea '. <&,>.> <&0-C><,),.0>listexC,</,),.0></&0-C> <2'CB><&= -.)5+= 10+,0( >9 lista ordonata cu litere mari) incepand de la valoarea '</&=><&(> <'. ,B80= A 7,-(,= E >'ulori u7uale disponibile prin nume <.)>1ed <.)>Green <.)>%lue <.)>Eellow <.)> urple <.)>>Fua </'.> </2'CB> </&,>.> '&
vezi acest exemplu
&ag6ul <li> poate avea un atribut /-.A0 care satileste valoare pentru elementul respectiv al listei. :aloarea acestui atribut trebuie sa fie un numar intreg po7itiv (ve7i urmatorul exemplu). <&,>.> <&0-C><,),.0>listexC/</,),.0></&0-C> <2'CB><&= -.)5+= 10+,0( >9 lista ordonata avand itemi setati individual</&=><&(> <'. 7,-(,= E >1epetati urmatorii pasi ai algoritmului <.)>salvati fisierul; <.) /-.A0= P >incarcati fisierul in browser; <.)>schimbati browserul utili7at <.)>incarcati din nou fisierul </'.> </2'CB> </&,>.>
vezi acest exemplu
2istele ordonate pot fi imbricate intre ele sau cu liste neordonate) ca in exemplul urmator. <&,>.> <&0-C><,),.0>listexC(</,),.0></&0-C> <2'CB><&= -.)5+= 10+,0( >9 lista ordonata de liste ordonate si neordonate</&=><&(> <'.>0n sistem informatic include: <.)>5ardware: <'.> <.)>placa de ba7a <.)>procesor <.)>memorie <.)>harddisA </'.> <.)>Boftware: <A.> <.)>2inux <.)>;indows <.)>9BG* <.)>0nix </A.> <.)>Boftware de aplicatie: <A. ,B80= C)71 > <.)>:isual'HH <.)>Java <.)>BI2 <.)>'orel8raw </A.> </'.> </2'CB> </&,>.>
vezi acest exemplu
9 lista de meniuri este un bloc delimitat de etichete corespondente <menu>###<(menu>. Fiecare element al listei este initiat de eticheta <li> ( list item ). 'ele mai multe browsere afisea7a lista de meniuri ca pe o lista neordonata. 9 lista de directoare este un bloc delimitat de etichete corespondente <dir>###<(dir> (de la 3 director 3). Fiecare element al listei este initiat de eticheta <li> ( list item ). 'ele mai multe browsere afisea7a lista de directoare ca pe o lista neordonata. (Nu se recomanda utilizarea acestori tipuri de liste). 'D
Utili'ari s"eciale ale listelor 8aca intr6o lista) in loc de elementele acesteia introduse prin <li>) se inserea7a un bloc de text) aceasta va fi indentat ( intocmai ca elementele unei liste). <&,>.> <&0-C><,),.0>listexC@</,),.0></&0-C> <2'CB><&=>0n bloc de text indentat</&=><&(> <'.> 0n bloc de text indentat. 0n bloc de text indentat. 0n bloc de text indentat. 0n bloc de text indentat. 0n bloc de text indentat. 0n bloc de text indentat. 0n bloc de text indentat. 0n bloc de text indentat. 0n bloc de text indentat. </'.> </2'CB> </&,>.>
vezi acest exemplu
In exemplul urmator lista de definitii are itemii <dt> si <dd> multipli. <&,>.> <&0-C><,),.0>listexC.<</,),.0></&0-C> <2'CB><&= -.)5+= 10+,0( >9 lista de definitii speciala</&=><&(> <C.> rogram <C,><2>2uni</2> <C,><2>$arti</2> <C,><2>$iercuri</2> <CC><)>9ra @.<<.</)>Insciere <CC><)>9ra ...<<.</)>>udieri <CC><)>9ra .?.?<.</)>1aspunsuri </C.> </2'CB> </&,>.>
vezi acest exemplu
0ltimul exemplu este o lista neordonata personali7ata care utili7ea7a pe post de elemente imagini si texte. <&,>.> <&0-C><,),.0>listexC..</,),.0></&0-C> <2'CB><&=>9 lista personali7ata</&=><&(> <A.>&ipuri de masini :olAswagen sunt:<2(> <)>5 7(1= )>-507/(0CC',F5)4 >Golf<2(> <)>5 7(1= )>-507/(0CC',F5)4 >Jetta<2(> <)>5 7(1= )>-507/(0CC',F5)4 > assat<2(> <)>5 7(1= )>-507/(0CC',F5)4 >%ora<2(> <)>5 7(1= )>-507/(0CC',F5)4 >'orrado<2(> <)>5 7(1= )>-507/(0CC',F5)4 >&ransporter<2(> </2'CB> </&,>.> . Ta!ele #abelele ne permit sa cream o retea dreptunghiulara de domenii( !iecare domeniu avand propriile optiuni pentru culoarea !ondului( culoarea te)tului( alinierea te)tului etc. 1entru a insera un tabel se !olosesc etichetele corespondente 8!ab"e9@@@8C!ab"e9. Un tabel este !ormat din randuri. 1entru a insera un rand intr-un tabel se !olosesc etichetele 8!r9@@@8C!r9 4 de la L table row L; rand de tabel 5.Kolosirea etichetei de s!arsit 8C!r9 este optionala. Un rand este !ormat din mai multe celule ce contin date. @ celula de date se introduce cu eticheta 8!d9@@8C!d9. <&,>.> <&0-C><,),.0>tabele)W3</,),.0></&0-C> <2'CB><&= -.)5+=10+,0(>Un tabel simplu !ormat '.
din D linii si ' coloane</&=><&(>
<,-2.0> <,(> <,C>cell <,(> <,C>cell <,(> <,C>cell <,(> <,C>cell </,-2.0> </2'CB> </&,>.>
33</,C> <,C>cell 33</,C></,(> '3</,C> <,C>cell ''</,C></,(> &3</,C> <,C>cell &'</,C></,(> D3</,C> <,C>cell D'</,C></,(>
vezi acest exemplu
9n mod prestabilit( un tabel nu are chenar. pentru a adauga un chenar unui tabel( se utilizeaza un atribut al etichetei 8!abe"9 numit 2'(C0(. cest atribut poate primi ca valoare orice numar intreg 4 inclusiv - 5 si reprezinta grosimea in pi)eli a chenarului tabelului. 6aca atributul 2'(C0( nu este urmata de o valoare atunci tabelul va avea o grosime prestabilita egala cu 3 pi)el( o valoare egala cu - a grosimii semni!ica absenta chenarului. 2and atributul 2'(C0( are o valoare nenula chenarul unui tabel are un aspect tridimensional. <&,>.> <&0-C><,),.0>tabele)W'</,),.0></&0-C> <2'CB><&= -.)5+=10+,0(>Un tabel simplu cu chenar</&=><&(> <,-2.0 2'(C0(= I > <,(> <,C>cell 33</,C> <,C>cell 33</,C></,(> <,(> <,C>cell '3</,C> <,C>cell ''</,C></,(> <,(> <,C>cell &3</,C> <,C>cell &'</,C></,(> <,(> <,C>cell D3</,C> <,C>cell D'</,C></,(> </,-2.0> </2'CB> </&,>.>
vezi acest exemplu
A"inierea !abe"u"ui 1entru a alinia un tabel intr-o pagina 0eb se utilizeaza atributul -.)5+ al etichetei 8!ab"e9( cu urmatoarele valori posibile: L le!t L 4 valoarea prestabilita 5( L center L si Lright L. linierea este importanta pentru te)tul ce inconjoara tabelul. st!el : daca tabelul este aliniat stanga 4 <,-2.0 -.)5+= .04, > 5( atunci te)tul care urmeaza dupa punctul de inserare al tabelului va !i dispus in partea dreapta a tabelului. daca tabelul este aliniat dreapta 4 <,-2.0 -.)5+= ()5&, > 5( atunci te)tul care urmeaza dupa punctul de inserare al tabelului va !i dispus in partea stanga a tabelului. daca tabelul este aliniat pe centru 4 <,-2.0 -.)5+= 10+,0( > 5( atunci te)tul care urmeaza dupa punctul de inserare al tabelului va !i a!isat pe toata latimea paginii( imediat sub tabel. <&,>.> <&0-C><,),.0>tabele)W&</,),.0></&0-C> <2'CB><&= -.)5+=10+,0(>Un tabel aliniat la
dreapta</&=><&(> #e)t inainte de tabel. #e)t inainte de tabel. #e)t inainte de tabel. #e)t inainte de tabel. #e)t inainte de tabel. #e)t inainte de tabel. #e)t inainte de tabel. #e)t inainte de tabel. #e)t inainte de tabel. #e)t inainte de tabel. #e)t inainte de tabel. #e)t inainte de tabel. #e)t inainte de tabel. #e)t inainte de tabel. #e)t inainte de tabel. #e)t inainte de tabel. #e)t inainte de tabel. #e)t inainte de tabel. #e)t inainte de tabel. #e)t inainte de tabel. #e)t inainte de tabel. #e)t inainte de tabel. #e)t inainte de tabel. #e)t inainte de tabel. #e)t inainte de tabel. #e)t inainte de tabel. #e)t inainte de tabel. #e)t inainte de tabel.
<,-2.0 2'(C0(= M -.)5+= ()5&, > <,(> <,C>cell 33</,C> <,C>cell 33</,C></,(> <,(> <,C>cell '3</,C> <,C>cell ''</,C></,(> </,-2.0>
#e)t dupa tabel.#e)t dupa tabel.#e)t dupa tabel.#e)t dupa tabel.#e)t dupa tabel.#e)t dupa tabel. #e)t dupa tabel.#e)t dupa tabel.#e)t dupa tabel.#e)t dupa tabel.#e)t dupa tabel.#e)t dupa tabel. #e)t dupa tabel.#e)t dupa tabel.#e)t dupa tabel.#e)t dupa tabel.#e)t dupa tabel.#e)t dupa tabel. #e)t dupa tabel.#e)t dupa tabel.#e)t dupa
'7
tabel.#e)t dupa tabel.#e)t dupa tabel.#e)t dupa tabel. #e)t dupa tabel.#e)t dupa tabel.#e)t dupa tabel.#e)t dupa tabel.#e)t dupa tabel.#e)t dupa tabel. #e)t dupa tabel.#e)t dupa tabel.#e)t dupa tabel.#e)t dupa tabel.#e)t dupa tabel.#e)t dupa tabel.
</2'CB> </&,>.>
vezi acest exemplu
6aca schimbam alinierea tabelului la centru atunci e)emplul anterior va arata asa sau la stanga atunci va arata asa. 6istanta dintre tabel si celelalte elemente din pagina 0eb poate !i stabilita cu ajutorul atributelor &78-10 si /78-10 al etichetei 8!ab"e9. Maloarea atributului &78-10 poate !i orice numar pozitiv( inclusiv -( si reprezinta distanta pe orizontala dintre tabel si celelalte elemente ale paginii 0eb. Maloarea atributului /78-10 poate !i orice numar pozitiv( inclusiv -( si reprezinta distanta pe verticala dintre tabel si celelalte elemente ale paginii 0eb. ceste atribute !unctioneaza numai cu *etscape 2ommunicator. J)emplul cu aceste atribute gasiti aici. De&inirea cu"'ri"'r de &'nd pen!ru un !abe" 2uloarea de !ond se stabileste cu ajutorul atributului 251'.'(( care poate !i atasat intregului tabel prin eticheta 8!ab"e9( unei linii prin eticheta 8!r9 sau celule de date prin eticheta 8!d9. Malorile pe care le poate primi 251'.'( sunt cele cunoscute pentru o culoare. 6aca in tabel sunt de!inite mai multe atribute 251'.'(( atunci prioritatea este urmatoarea: 8!d9( 8!r9( 8!ab"e9 4 cu prioritate cea mai mica 5. <&,>.> <&0-C><,),.0>tabele)WD</,),.0></&0-C> <2'CB><&= -.)5+=10+,0(>Un tabel simplu colorat</&=><&(> <,-2.0 2'(C0(= E 251'.'(= 5(00+ > <,(> <,C>verde 33</,C> <,C 251'.'(= (0C >rosu 33</,C></,(> <,( 251'.'(= 2.A0 > <,C>albastru '3</,C> <,C 251'.'(= B0..'H >galben ''</,C></,(> <,( 251'.'(= 1B-+ > <,C>cell &3</,C> <,C>cell &'</,C></,(> <,(> <,C>cell D3</,C> <,C 251'.'(= H&),0 >cell D'</,C></,(> </,-2.0> </2'CB> </&,>.>
vezi acest exemplu
2uloarea te)tului din !iecare celula se pote stabili cu ajutorul e)presiei: <4'+, 1'.'(= /-.'-(0 >FFF</4'+,>. Di%ensi'narea ce"u"ei unui !abe" 6istanta dintre doua celule vecine se de!ineste cu ajutorul atributului 10..78-1)+5 al etichetei 8!ab"e9.Malorile acestui atribut pot !i numere intregi pozitive( inclusiv -( si reprezinta distanta in pi)eli dintre doua celule vecine. Malorea prestabilita a atributului 10..78-1)+5 este '. <&,>.> <&0-C><,),.0>tabele)W.</,),.0></&0-C> <2'CB><&= -.)5+=10+,0(>Un tabel !ara chenar de celule alipite</&=><&(> <,-2.0 10..78-1)+5= M > <,(> <,C 251'.'(= 5(-B >gri 33</,C> <,C 251'.'(= (0C >rosu 3'</,C></,(> <,( 251'.'(= 2.A0 > <,C>albastru '3</,C> <,C 251'.'(= B0..'H >galben ''</,C></,(> </,-2.0> </2'CB> </&,>.>
vezi acest exemplu
6istanta dintre marginea unei celule si continutul ei poate !i de!inita cu ajutorul atributului 10..8-CC)+5 al etichetei 8!ab"e9.Malorile acestui atribut pot !i numere intregi pozitive( si reprezinta distanta in pi)eli dintre celule si continutul ei. Malorea prestabilita a atributului 10..8-CC)+5 este 3. '8
<&,>.> <&0-C><,),.0>tabele)W7</,),.0></&0-C> <2'CB><&= -.)5+=10+,0(>Un tabel de celule mari</&=><&(> <,-2.0 2'(C0(= M 10..8-CC)+5= GM > <,(> <,C>gri 33</,C> <,C>rosu 3'</,C></,(> <,(> <,C>albastru '3</,C> <,C>galben ''</,C></,(> </,-2.0> </2'CB> </&,>.>
vezi acest exemplu
Di%ensi'narea unui !abe" 6imensiunile unui tabel - latimea si inaltimea - pot !i stabilite e)act prin intermediul a doua atribute( H)C,& si &0)5&,( ale etichetei 8!ab"e9. Malorile acestor atribute pot !i: numere intregi pozitive reprezentand latimea respectiv inaltimea in pi)eli a tabelului/ numere intregi intre 3 si 3--( urmate de semnul E( reprezentand !ractiunea din latimea si inaltimea totala a paginii. <&,>.> <&0-C><,),.0>tabele)W8</,),.0></&0-C> <2'CB><&= -.)5+=10+,0(>Un tabel de de '-- pi)eli <,-2.0 2'(C0(= M H)C,&= GMM &0)5&,= LM< > <,(> <,C>cell 33</,C> <,C>cell 3'</,C></,(> <,(> <,C>cell '3</,C> <,C>cell ''</,C></,(> </,-2.0> </2'CB> </&,>.>
[ .- E</&=><&(>
vezi acest exemplu
9n e)emplul urmator se utilizeaza un truc care permite a!isarea intr-o pagina 0eb a unui te)t pozitionat in centrul paginii. <&,>.> <&0-C><,),.0>tabele)WA</,),.0></&0-C> <2'CB><&= -.)5+=10+,0(>Un te)t centrat intr-o <,-2.0 H)C,&= =MM< &0)5&,= =MM< > <,(> <,C -.)5+= 10+,0( > <&G>#e)t centrat.</&G> </,-2.0> </2'CB> </&,>.> Ti!"u" unui !abe" Unui tabel i se poate atasa un titlu cu ajutorul etichetei 8cap!i'n9 4 de la Ltable captionL ; titlu tabel 5. ceasta eticheta trebuie plasata in interiorul etichetelor 8!ab"e9@@@8C!ab"e9( dar nu in interiorul etichetelor 8!r9 sau 8!d9 #itlul unui tabel poate !i aliniat cu ajutorul atributului -.)5+ al etichetei 8cap!i'n9 care poate lua una dintre valorile: L bottom L 4 sub tabel 5/ L top L 4 deasupra tabelului 5/ L le!t L 4 la stanga tabelului 5/ L right L 4 la dreapta tabelului 5. <&,>.> <&0-C><,),.0>tabele)WB</,),.0></&0-C> <2'CB><&= -.)5+=10+,0(>Un tabel cu titlu</&=> <,-2.0 2'(C0(= M ><1-8,)'+ -.)5+= ,'8 >$asini <,(><,C>$ercedes </,C><,C>2itroen </,C><,C>Gaguar </,C></,(> <,(><,C>I$0 </,C><,C>Molvo </,C><,C>:enault </,C></,(> </,-2.0> </2'CB> 'A
pagina</&=>
vezi acest exemplu
</&,>.>
vezi acest exemplu
Cap de !abe" Un tabel poate avea celule cu semni!icatia de cap de tabel. ceste celule sunt introduse de eticheta 8!h9 4 de la L tabel header L ; cap de tabel 5 in loc de 8!d9. #oate atribute care pot !i atasate etichetei 8!d9 pot !i de asemenea atasate etichetei 8!h9. 2ontinutul celulelor de!inite cu 8!h9 este scris cu caractere aldine si centrat. <&,>.> <&0-C><,),.0>tabele)W3-</,),.0></&0-C> <2'CB><&= -.)5+=10+,0(>Un tabel cu titlu si cap de tabel</&=> <,-2.0 2'(C0(= M ><1-8,)'+ -.)5+= 2',,'> >1returile masinii <,(><,&>1ret</,&> <,&>2itroen</,&> <,&>Gaguar</,&> <,&>I$0</,&> <,&>Molvo</,&></,(> <,(><,&>9n dolari</,&> <,C>.---</,C> <,C>3-----</,C> <,C>.----</,C> <,C>A----</,C></,(> <,(><,&>9n lei</,&> <,C>3.---</,C> <,C>&-----</,C> <,C>3.----</,C> <,C>'D----</,C></,(> </,-2.0> </2'CB> </&,>.>
vezi acest exemplu
A"inierea c'n!inu!u"ui unei ce"u"e linierea pe orizontala a continutului unei celule se !ace cu ajutorul atributului -.)5+ care poate lua valorile: L le!t L 4 la stanga 5/ L center L 4 centrat ( valoarea prestabilita 5/ L right L 4 la dreapta 5/ L char L 4 alinierea se !ace !ata de un caracter 5. linierea pe verticala a continutului unei celule se !ace cu ajutorul atributului /-.)5+ care poate lua valorile: L baseline L 4 la baza 5/ L bottom L 4 jos 5/ L middle L 4 la mijloc( valoarea prestabilita 5/ L top L 4 sus 5. ceste atribute pot !i atasate atat etichetei 8!r9 pentru a de!ini tuturor elementelor celulelor unui rand( cat si etichetelor 8!d9 si 8!h9 pentru a stabili alinierea te)tului intr-o singura celula. <&,>.> <&0-C><,),.0>tabele)W33</,),.0></&0-C> <2'CB><&= -.)5+=10+,0(>Un tabel avand continutul celulelor aliniate</&=> <,-2.0 2'(C0(= M H)C,&= LM< &0)5&,= LM< > <,( -.)5+= ()5&, ><,C> ici</,C> <,C>alinierea</,C><,C>este centru</,C><,C>dreapta</,C></,(> <,(> <,C -.)5+= .04, >stanga</,C> <,C -.)5+= 10+,0( >centru</,C><,C /-.)5+= ,'8 >sus</,C> <,C /-.)5+= 2',,'> >jos</,C></,(> <,( -.)5+= .04, ><,C>aici</,C><,C>alinierea</,C> <,C>este 'B
centru</,C><,C>stanga 4implicita5</,C></,(> </,-2.0>

</2'CB> </&,>.>
vezi acest exemplu
Di%ensi'narea e1ac!a a ce"u"e"'r unui !abe" 6imensiunea unei celule de tip 8!d9 sau de tip 8!h9 pot !i stabilite e)act cu ajutorul a doua atribute ale acestor etichete: H)C,& pentru latime si &0)5&, pentru inaltime. Malorile posibile ale acestor atribute sunt: numere intregi pozitive 4 inclusiv - 5 reprezentand dimensiunea in pi)eli a latimii( respectiv a inaltimii unei celule/ procente din latimea ( respectiv inaltimea tabelului. <&,>.> <&0-C><,),.0>tabele)W3'</,),.0></&0-C> <2'CB><&= -.)5+=10+,0(>Un tabel cu celule de 3--)3.- de pi)eli</&=><&(> <,-2.0 2'(C0(= M > <,(> <,C H)C,&= =MM &0)5&,= =LM >cell 33</,C> <,C H)C,&= =MM &0)5&,= =LM >cell 33</,C></,(> <,(> <,C H)C,&= =MM &0)5&,= =LM >cell '3</,C> <,C H)C,&= =MM &0)5&,= =LM >cell ''</,C></,(> </,-2.0> </2'CB> </&,>.>
vezi acest exemplu
Tabe"e de &'r%e 'arecare Un tabel trebuie privit ca o retea dreptunghiulara de celule.2u ajutorul a doua atribute ale etichetelor 8!d9 si 8!h9( o celula se poate e)tinde peste celule vecine. st!el: e)tinderea unei celule peste celulele din dreapta ei se !ace cu ajutorul atributului 1'.78-+( a carui valoare determina numarul de celule care se uni!ica. e)tinderea unei celule peste celulele dedesubt se !ace cu ajutorul atributului ('H78-+( a carui valoare determina numarul de celule care se uni!ica. ?unt posibile e)tinderi simultane ale unei celule pe orizontala si pe verticala. 9n acest caz ( in etichetele 8!d9 si 8!h9 vor !i prezente ambele atribute 1'.78-+ si ('H78-+. <&,>.> <&0-C><,),.0>tabele)W3&</,),.0></&0-C> <2'CB><&= -.)5+=10+,0(>Un tabel simplu cu chenar</&=><&(> <,-2.0 2'(C0(= M > <,(> <,C ('H78-+= E >cell 33</,C><2(>cell '3<br>cell &3</,C> <,C>cell 3'</,C><,C 1'.78-+= G ('H78-+= E >cell 3& (cell 3D</,C><2(>cell '&( cell 'D<2(>cell &&( cell &D</,C></,(> <,(> <,C>cell ''</,C></,(> <,(> <,C>cell &'</,C></,(> <,(> <,C>cell D3</,C> <,C 1'.78-+= E >cell D'(cell D&(cell DD</,C></,(> </,-2.0> </2'CB> </&,>.>
vezi acest exemplu
A!ribu!u" ; n'7rap ; tributul +'H(-8 apartine elementelor 8!d9 si 8!h9 / el interzice intreruperea unei linii de te)t. st!el ( in tabel pot aparea coloane cu o latime oricat de mare. <&,>.> <&0-C><,),.0>tabele)W3D</,),.0></&0-C> <2'CB><&= -.)5+=10+,0(>Un tabel cu celule <,-2.0 2'(C0(= M > &-
de latime mare</&=><&(>
<,(> <,C>cell 33</,C> <,C>cell 3'</,C></,(> <,(> <,C +'H(-8>cell '3</,C> <,C>cell '' este !oarte lata.</,C></,(> </,-2.0> </2'CB> </&,>.> Ce"u"e vide a"e unui !abe"
lata(aceasta celula este !oaret
vezi acest exemplu
daca un tabel are celule vide( atunci aceste celule vor aparea in tabel !ara un chenar de delimitare. 9n scopul de a a!isa un chenar pentru celule vide se utilizeaza urmatoarele trucuri: dupa 8!d9 se pune :nbspJ/ dupa 8!d9 se pune 8br9. 2aracterul :nbspJ 4 no breaC space 5 este de !apt caracterul spatiu.Un spatiu introdus prin imUntermediul acestui caracter nu va !i ignorat de browser. <&,>.> <&0-C><,),.0>tabele)W3.</,),.0></&0-C> <2'CB><&= -.)5+=10+,0(>Un tabel cu celule vide</&=><&(> <,-2.0 2'(C0(= M > <,(> <,C>cell 33<,C> <,C>cell 3'</,C><,C>cell 3&</,C></,(> <,(> <,C><nbsp/</,C> <,C></,C></,(> </,-2.0> </2'CB> </&,>.>
vezi acest exemplu
A!ribu!e In!erne! E1p"'rer pen!ru !abe"e Urmatoarele atribute ale etichetei 8!ab"e9 !unctioneaza cu 9nternet J)plorer D.- ( ..-( dar nu cu *etscape 2ommunicator D..: 2-135('A+C permite stabilirea unei imagini pentru !ondul unui tabel.1rimeste ca valoare adresa U:% a imaginii !olosite pentru !ond/ 2'(C0(1'.'( permite stabilirea culorii pentru chenarul unui tabel/ 2'(C0(1'.'(.)5&, permite stabilirea culorii pentru chenarul &6 al unui tabel/ 2'(C0(1'.'(C-(3 permite stabilirea culorii pentru chenarul &6 al unui tabel/ <&,>.> <&0-C><,),.0>tabele)W37</,),.0></&0-C> <2'CB><&= -.)5+=10+,0(> tribute L9nternet J)plorerL</&=><&(> <,-2.0 2'(C0(= L 2-135('A+C= FFF/)>-507/A2>=FQ85 10..78-1)+5==L 2'(C0(1'.'(= >-(''+ 2'(C0(1'.'C-(3= (0C > <,( 251'.'(= B0..'H > <,C>cell 33</,C> <,C>cell 3'</,C><,C>cell 3&</,C></,(> <,( 251'.'(= B0..'H > <,C><nbsp/</,C><,C></,C> <,C></,C></,(> </,-2.0> </2'CB> </&,>.>
vezi acest exemplu
Grupuri de c'"'ane Ilocul 8c'"#r'up9@@@8Cc'"#r'up9 permite de!inirea unui grup de coloane. tributele acceptate de 8c'"#r'up9 sunt: 78-+ determina numarul de coloane dintr-un grup/ H)C,& determina o latime unica pentru coloanele din grup/ -.)5+ determina un tip unic de aliniere pentru coloanele din grup. J)emplu: <1'.5('A8 78-+= E H)C,&= =MM ></1'.5('A8> 9ntr-un bloc 8c'"#r'up9( coloanele pot avea con!igurari di!erite daca se utilizeaza elementul 8c'"9( care admite atributele: 78-+ identi!ica acea coloana din grup pentru care se !ace con!igurarea.6aca lipseste( atunci coloanele &3
sunt con!igurate in ordine/ H)C,& determina o latime pentru coloana identi!icata prin 78-+/ -.)5+ determina o aliniere pentru coloana identi!icata prin 78-+.
<&,>.> <&0-C><,),.0>tabele)W38</,),.0></&0-C> <2'CB><&= -.)5+=10+,0(>Grupuri de coloane</&=><&(> <,-2.0 H)C,&= IMM 10..78-1)+5==M> <1'.5('A8> <1'. H)C,&= =MM -.)5+=()5&,> <1'. H)C,&= =MM -.)5+=10+,0(> <1'. H)C,&= GMM -.)5+=()5&,> </1'.5('A8> <,(> <,C /-.)5+=,'8>#e)t in prima coloana.#e)t in prima coloana.#e)t in prima coloana. #e)t in prima coloana.</,C> <,C /-.)5+=,'8>#e)t in coloana doua.#e)t in coloana doua.#e)t in coloana doua.#e)t in coloana doua.</,C> <,C /-.)5+=,'8>#e)t
in coloana a treia.#e)t in coloana a treia.#e)t in coloana a treia.#e)t in coloana a treia.</,C></,(>

</,-2.0> </2'CB> </&,>.>
vezi acest exemplu
A!ribu!e"e frame si rules tributul 4(->0 al etichetei 8!ab"e9 permite speci!icarea partilor din chenarul unui tabel care vor !i a!isate. Malorile posibile ale acestui atribut sunt: void - elimina toate muchiile e)terioare ale tabelului/ above - a!iseaza o muchie in partea superioara a cadrului tabelului/ below - a!iseaza o muchie in partea in!erioara a cadrului tabelului/ hsides - a!iseaza cate o muchie in partea superioara si in!erioara cadrului tabelului/ lhs - a!iseaza o muchie in partea din stanga a cadrului tabelului/ rhs - a!iseaza o muchie in partea din dreapta a cadrului tabelului/ vsides - a!iseaza o muchie in partea din stanga si din dreapta a cadrului tabelului/ bo) - a!iseaza o muchie pe toate laturile cadrului tabelului/ border - a!iseaza o muchie pe toate laturile cadrului tabelului/ tributul (A.07 al etichetei 8!ab"e9permite alegerea unor delimitatori pentru celulele unui tabel. Malorile posibile sunt: none - elimina toate muchiile interioare ale tabelului/ groups - a!iseaza muchii orizontale intre toate grupurile din tabel.Grupurile sunt speci!icate prin elementele 8!head9F 8!b'd<9F 8!&''!9si 8c'"#r'up9. rows - a!iseaza muchii orizontale intre toate liniile tabelului/ cols - a!iseaza muchii verticale intre toate coloanele tabelului/ all - a!iseaza muchii intre toate liniile si coloanele/ <&,>.> <&0-C><,),.0>tabele)W3A</,),.0></&0-C> <2'CB><&= -.)5+=10+,0(> tributele !rames si rules</&=> <,-2.0 H)C,&= IMM 4(->0=2'O (A.07=('H7 10..78-1)+5==M> <,(> <,C>cell 33</,C> <,C>cell 3'</,C><,C>cell 3&</,C></,(> <,(> <,C>cell '3</,C> <,C>cell ''</,C><,C>cell '&</,C></,(> </,-2.0> </2'CB> </&,>.>
vezi acest exemplu
4ubb"'curi"e unui !abe" 9n speci!icatiile "#$% D.-( continutul unui tabel poate !i impartit in subblocuri prin elementele: 8!head98!r98!d9@@@8C!head9 4 un singur rand 5/ 8!&''!98!r98!d9@@@8C!&''!9 4 un singur rand 5/ 8!b'd<98!r98!d9@@@8C!b'd<9 4 oricate randuri 5/ 9ntr-un tabel e)ista un singur subbloc de tipul 8!head9 si un singur subbloc de tipul 8!&''!9( dar pot e)ista mai multe subblocuri de tip 8!b'd<9. &'
". Ferestre in HTML Ferestrele sau (cadrele) ne permit sa definim in fereastra browserului subferstre in care sa fie incarcate documente 5&$2 diferite. Ferestrele sunt definite intr6un fisier 5&$2 special ) in care blocul <%od&>...<(%od&> este inlocuit de blocul <$rameset>...<($rameset>. In interiorul acestui bloc) fiecare cadru este introdus prin eticheta <$rame>. 0n atribut obligatoriu al etichetei <$rame> este 7(1) care primeste ca valoare adresa 012 a documentului 5&$2 care va fi incarcat in acel frame. 8efinirea cadrelor se face prin impartirea ferstrelor (si a subferestrelor) in linii si coloane: impartirea unei ferstre intr6un numar de subferestre de tip coloana se face cu a"utorul atributului 1'.7 al etichetei <$rameset> ce descrie acea fereastra; impartirae unei ferestre intr6un numar de subferestre de tip linie se face cu a"utorul atributului ('H7 al etichetei <$rameset> ce descrie acea fereastra; valoare atributelor 1'.7 si ('H7 este o lista de elmente separate prin virgula ) care descriu modul in care se face impartirea. !lementele listei pot fi: /. un numar intreg de pixeli; (. procente din dimensiunea ferestrei (numar intre . si @@ terminat cu =); @. nJ care inseamna n parti din spatiul ramas; !xemplu .: cols4*<<)J)+<=)J inseamna o impartire in - subferestre ) dintre care prima are *<< pixeli ) a treia ocupa "umatate din spatiul total disponibil )iar a doua si a patra ocupa in mod egal restul de spatiu ramas disponibil. !xemplu *: cols4*<<).J)+<=)*J inseamna o impartire in - subferestre ) dintre care prima are *<< pixeli ) a treia ocupa "umatate din spatiul total disponibil iar a doua si a patra ocupa in mod egal restul de spatiu ramas disponibil) care se imparte in trei parti egale ) a doua fereastra ocupand o parte ) iar a patra ocupand * parti. Observatii: 6daca mai multe elemente din lista sun configurate cu * , atunci spatiul disponibil ramas pentru ele se va imparti in mod egal. 6o subfereastra poate fi un cadru (folosind <frame>)in care se va incarca un document HTML sau poate fi impartita la randul ei la alte subfereste (folosind <frameset>). <&,>.> <&0-C><,),.0>ferexC.</,),.0></&0-C> <4(->070, 1'.7= %:% > <4(->0 7(1= 8=F&,>. > <4(->0 7(1= 8GF&,>. > </4(->070,> </&,>.>
vezi acest exemplu
In exemplul urmator este creata o pagina ;eb cu trei cadre ori7ontale. entru al doilea cadru valoarea atributului 7(1 este adresa 012 a unei imagini. <&,>.> <&0-C><,),.0>ferexC*</,),.0></&0-C> <4(->070, ('H7= =MM:%:=M< > <4(->0 7(1= 8=F&,>. > <4(->0 7(1= ,).0CF5)4 > <4(->0 7(1= 8EF&,>. > </4(->070,> </&,>.>
vezi acest exemplu
In exemplul urmator este creata o matrice de - cadre (* x *). entru a reali7a acest lucru) se folosesc simultan cele doua atribute 1'.7 si ('H7. <&,>.> &&
<&0-C><,),.0>ferexC?</,),.0></&0-C> <4(->070, ('H7= %:% 1'.7= %:% > <4(->0 7(1= 8=F&,>. > <4(->0 7(1= 8GF&,>. > <4(->0 7(1= 8EF&,>. > <4(->0 7(1= 8IF&,>. > </4(->070,> </&,>.>
vezi acest exemplu
In exemplul urmator este creata o pagina ;eb cu trei cadre mixte. entru a o crea se procedea7a din aproape in aproape. $ai intai) pagina este impartita in doua subferestre de tip coloana) dupa care a doua subfereastra este impartita in doua subferestre de tip linie. <&,>.> <&0-C><,),.0>ferexC-</,),.0></&0-C> <4(->070, 1'.7= GM<:% > <4(->0 7(1= 8=F&,>. > <4(->070, ('H7= %:% > <4(->0 7(1= 8GF&,>. > <4(->0 7(1= 8EF&,>. > </4(->070,> </4(->070,> </&,>.>
vezi acest exemplu
Culori "entru chenarele cadrelor si dimensionarea chenarului unui cadru entru a stabili culoarea chenarului unui cadru se utili7ea7a atributul 2'(C0(1'.'(. >cest atribut primeste ca valoare un nume de culoare sau o culoare definita in conformitate cu modelul de culoare 1G%.>tributul 2'(C0(1'.'( poate fi atasat atat etichetei <$rameset> pentru a stabili culoarea tuturor chenarelor cadrelor incluse)cat si etichetei pentru a stabili culoarea chenarului pentru un cadru individual. >tributul 2'(C0( al etichetei <$rameset> permite configurarea latimii chenarelor tuturor cadrelor la un numar dorit de pixeli. :aloarea prestabilita a atributului 2'(C0( este de + pixeli. 9 valoare de < pixeli va defini un cadru fara chenar. <&,>.> <&0-C><,),.0>ferexC+</,),.0></&0-C> <4(->070, 1'.7= GM<:% 2'(C0(1'.'(= 5(00+ 2'(C0(= =L > <4(->0 7(1= 8=F&,>. > <4(->070, ('H7= %:% > <4(->0 7(1= 8GF&,>. 2'(C0(1'.'(= 2.A0 > <4(->0 7(1= 8EF&,>. > </4(->070,> </&,>.>
vezi acest exemplu
entru a obtine cadre fara chenar se utili7ea7a border43<3. In mod prestabilit) chenarul unui cadru este afisat si are aspect tridimensional.>fisarea chenarului unui cadru se poate de7activata daca se utili7ea7a atributul 4(->02'(C0( cu valoare 3no3. >cest atribut poate fi atasat atat etichetei <$rameset> (de7activarea fiind valabila pentru toate cadrele incluse) cat si etichetei <$rame> (de7activarea fiind valabila numai pentru un singur cadru). :alorile posibile ale atributului 4(->02'(C0( sunt: 3Des3 6echivalent cu .; 3no3 6echivalent cu <; <&,>.> <&0-C><,),.0>ferexC+C.</,),.0></&0-C> <4(->070, 1'.7= GM<:% 2'(C0(= M > <4(->0 7(1= 8=F&,>. > <4(->070, ('H7= %:% > <4(->0 7(1= 8GF&,>. > <4(->0 7(1= 8EF&,>. > </4(->070,> </&,>.> &D
vezi acest exemplu
<&,>.> <&0-C><,),.0>ferexC+C*</,),.0></&0-C> <4(->070, 1'.7= GM<:% 4(->02'(C0(= +' > <4(->0 7(1= 8=F&,>. > <4(->070, ('H7= %:% > <4(->0 7(1= 8GF&,>. > <4(->0 7(1= 8EF&,>. > </4(->070,> </&,>.>
vezi acest exemplu
)are de de$ilare >tributul 71('..)+5 al etichetei <$rame> este utili7at pentru a adauga unui cadru o bara de derulare care permite navigarea in interiorul documentului afisat in interiorul cadrului. :alorile posibile sunt: 3Des3 6 barele de derulare sunt adaugate intotdeauna; 3no3 6 barele de derulare nu sunt utili7abile; 3auto3 6 barele de derulare sunt vi7ibile atunci cand este necesar <&,>.> <&0-C><,),.0>ferexC,</,),.0></&0-C> <4(->070, 1'.7= %:%:% > <4(->0 7(1= 8F&,>. 71('..)+5= B07 +'(07)*0> <4(->0 7(1= 8F&,>. 71('..)+5= +' +'(07)*0> <4(->0 7(1= 8F&,>. 71('..)+5= -A,' +'(07)*0> </4(->070,> </&,>.>
vezi acest exemplu
>tributul +'(07)*0 al etichetei <$rame> (fara nici o valoare suplimentara) daca este pre7ent) inhiba posibilitatea prestabilita a utili7atorului de a redimensiona cadrul cu a"utorul mouse6ului. *o'itionarea documentului intr+un cadru >tributele >-(5)+&0)5&, si >-(5)+H)C,& ale etichetei <$rame> permit stabilirea distantei in pixeli dintre continutul unui cadru si marginile verticale) respectiv ori7ontale ale cadrului. :alori posibile: 6numar de pixeli; 6procent din latimea) respectiv din inaltimea cadrului; <&,>.> <&0-C><,),.0>ferexC/</,),.0></&0-C> <4(->070, 1'.7= %:%:% > <4(->0 7(1= 8F&,>. > <4(->0 7(1= 8F&,>. >-(5)+&0)5&,=GM> <4(->0 7(1= 8F&,>. >-(5)+H)C,&=GM> </4(->070,> </&,>.>
vezi acest exemplu
!xista browsere care nu suporta cadre pentru aceasta se utili7ea7a in interiorul blocului <$rameset> eticheta <no$rames>. 8aca programul de navigare stie sa interprete7e cadre) va ignora ce se gaseste in aceasta portiune) iar daca nu) materialul cuprins in 7ona <no$rames>###<(no$rames> va fi singurul care va fi inteles si afisat. 8e preci7at este faptul ca intre <no$rames> ### <(no$rames> se pot introduce orice alte tag6uri 5&$2 (inclusiv imagini) hiperlinA6uri) tabele). Cadre interne 0n cadru intern este specificat prin intermediul blocului <i$rame>###<(i$rame>. 0n cadru intern se inserea7a intr6o pagina ;eb in mod asemanator cu o imagine sau in modul in care se specifica marca"ul <$rame>) asa cum re7ulta din urmatorul exemplu: <)4(->0 7(1= 40(0O6KF&,>. &0)5&,=IM< H)C,&=LM<> </)4(->0> In acest ca7) am specificat ca doresc o fereastra de cadru intern care are -<=din inaltimea si +<= din latimea paginii curente. >tributele aceptate de eticheta <i$rame> sunt in parte preluate de la etichetele <$rame> si &.
<$rameset>)cum ar fi: 7(1:2'(C0(:4(->02'(C0(:2'(C0(1'.'(:>-(5)+&0)5&,: >-(5)+H)C,&:71('..)+5:+->0:+'(07)*0; sau de la eticheta <img> /78-10:&78-10:-.)5+:H)C,&:&0)5&,; <&,>.> <&0-C><,),.0>ferexC(</,),.0> </&0-C> <2'CB> <- &(04= 8=F&,>. ,-(50,= )1-C > Fisierul.</-><2(> <- &(04= 8GF&,>. ,-(50,= )1-C > Fisierul*</-><2(> <- &(04= 8EF&,>. ,-(50,= )1-C > Fisierul?</-><2(> <- &(04= 8F&,>. ,-(50,= )1-C > 5ome</-><2(> <10+,0(><)4(->0 H)C,&= PM< &0)5&,= LM< 2'(C0(=G 2'(C0(1'.'(=(0C +->0= )1-C 7(1= 8F&,>. > 8aca vedeti acest text inseamna ca browserul dumnevoastranu suporta cadre interne. >r fi preferabil sa reveniti) folosind Ketscape Kavigator versiune -.< (Gulterioara) sau I.!xplorer -.<. (Gulterioara) <- &(04= 8MF&,>. > agina fara cadre interne</-> </)4(->0></10+,0(> </2'CB> </&,>.>
vezi acest exemplu
Tinte "entru legaturi In mod prestabilit) la efectuarea unui clic pe o legatura noua pagina (catre care indica legatura) o inlocuieste pe cea curenta in aceeasi fereastra (acelasi acdru). >cest comportament se poate schimba in doua moduri: prin plasarea in blocul <head>###<(head> a unui element LbaseM care preci7ea7a)prin atributul ,-(50, numele ferestrei (cadrului) in care se vor incarca toate paginile noi referite de legaturile din pagina curenta conform sintaxei: <2-70 ,-(50,= +A>0640(-7,(-/4(->06C062-*- > prin plasarea in eticheta <a> a atributului ,-(50,) care preci7ea7a numele ferestrei (cadrului) in care se va incarca pagina nou referita de legatura) conform sintaxei: <- &(04= .05-,A(- ,-(50,= +A>0640(0-7,(-/4(->0 >FFF</-> Observatie: 6daca este prezent atat un atribut ,-(50, in <base> cat si un atribut ,-(50, in <a>, atunci cele precizate de atributul ,-(50, din <a> sunt prioritare. Kumele unui cadru este stabilit prin atributul +->0 al etichetei <$rame> conform sintaxei: <4-(>0 +->0= +A>064(->0 > In exemplul urmator este pre7entata o pagina ;eb cu doua cadre.&oate legaturile din cadrul . incarca paginile in cadrul *. <&,>.> <&0-C><,),.0>ferexC@Cframes</,),.0></&0-C> <4(->070, 1'.7= GM<:% > <4(->0 7(1= .04,F&,>. +->0= .04, > <4(->0 7(1= 8F&,>. +->0= >-)+ > </4(->070,> </&,>.> <&,>.> <&0-C><,),.0>ferexC@Cleft</,),.0> </&0-C> <2'CB> <- &(04= 8=F&,>. ,-(50,= >-)+ > Fisierul.</-><2(> <- &(04= 8GF&,>. ,-(50,= >-)+ > Fisierul*</-><2(> <- &(04= 8EF&,>. ,-(50,= >-)+ > Fisierul?</-><2(><2(> <- &(04= 8=F&,>. ,-(50,= 62.-+3 > Fis. intr6o fereastra noua</-><2(><2(> <- &(04= 8=F&,>. ,-(50,= 670.4 > Fis. in fereastra curenta</-><2(><2(> <- &(04= 8F&,>. ,-(50,= >-)+ > 5ome</-><2(> </2'CB> </&,>.>
vezi acest exemplu
,alori "entru atri%utul target >tributul ,-(50, al etichetei<$rame> accepta anumite valori predefinite de o valoare deosebita pentru &7
creatorii de pagini ;eb.aceste valori sunt: 3670.43 (incarcarea noii pagini are loc in cadrul curent); 362.-+33 (incarcarea noii pagini are loc intr6o fereastra noua anonima); 368-(0+,3 (incarcarea noii pagini are loc in cadrul parinte al cadrului curent daca acesta exista) altfel are loc in fereastra browserului curent); 36,'83 (incarcarea noii pagini are loc in fereastra browserului ce contine cadrul curent); 1#. Formulare 0n formular este un ansamblu de 7one active alcatuit din butoane )casete de selectie)campuri de editare etc. Formularele va asigura construirea unori pagini ;eb care permit utili7atorilor sa introduca efectiv informatii si sa le transmita serverului.Formularele pot varia de la o simpla caseta de text )pentru introducerea unui sir de caractere pe post de cheie de cautare 6 element caracteristic tuturor motoarelor de cautaredin ;eb 6 pana la o structura complexa )cu multiple sectiuni )care ofera facilitati puternice de transmisie a datelor. 9 sesiune cu o pagina web ce contine un formular cuprinde urmatoarele etape: -# 0tili7atorul completea7a formularul si il expediea7a unui server. .# 9 aplicatie dedicata de pe server anali7ea7a formularul completat si (daca este necesar) stochea7a datele intr6o ba7a de date. # 8aca este necesar serverul expediea7a un raspuns utili7atorului. 0n formular este definit intr6un bloc delimitat de etichetele corespondente <$orm> si <($orm>.
Atri%ute esentiale ale elementului <$orm> !xista doua atribute esentiale ale elementului <$orm>. -# >tributul -1,)'+ preci7ea7a ce se va intampla cu datele formularului odata ce acestea a"ung la destinatie.8e regula )valoarea atributului -1,)'+ este adresa 012 a unui script aflat pe un srver ;;; care primeste datele formularului )efectuea7a o prelucrare a lor si expediea7a catre utili7ator un raspuns. <4'(> -1,)'+= &,,8R//HHHFB-&''F1'>/15)"2)+/+A>064)7F15) >F Bcript6urile pot fi scrise in limba"ele erl)') 5 )0nix shell. .# >tributul >0,&'C preci7ea7a metoda utili7ata de browser pentru expedierea datelor formularului.Bunt posibile urmatoarele valori: 50, (valoarea implicita).In acest ca7 )datele din formular sunt adaugate la adresa 012 preci7ata de atributul -1,)'+; 6 nu sunt permise cantitati mari de date (maxim . Nb) 6 intre adresa 012 si date este inserat un 3O3. 8atele sunt adaugate conform sintaxei: +A>061->8 = /-.'-(061->8. Intre diferite seturi de date este introdus un 3P3. !xemplu: &,,8R//HHHFB-&''F1'>/15)"2)+/+A>064)7F15)?+A>0= = /-.'-(0=?+A>0G = /-.'-(0G ; 8'7, In acest ca7 datele sunt expediate separat. Bunt permise cantitati mari de date (ordinul $%) entru ca un formular sa fie functional) trebuie preci7at ce se va intampla cu el dupa completarea si expediere. 'el mai simplu mod de utili7are a unui formular este expedierea acestuia prin posta electronica (e6mail). entru aceasta se foloseste un atribut al etichetei <$orm> si anume -1,)'+ care primeste ca valoare 3 mailto: 3 concatenat cu o adresa valida de e6mail catre care se va expedia formularul completat. Un $ormular cu un cam" de editare si un %uton de ex"ediere $a"oritatea elementelor unui formular sunt definite cu a"utorul etichetei <in"ut>. entru a preci7a tipul elementului se foloseste atributul ,B80 al etichetei <in"ut>. entru un camp de editare) acest atribut primeste valoarea 3text3. >lte atribute pentru un element <in"ut> sunt: atributul +->0 )permite atasarea unui nume fiecarui element al formularului. atributul /-.A0 )care permite atribuirea unei valori initiale unui element al formularului. 0n buton de expediere al unui formular se introduce cu a"utorul etichetei <in"ut>) in care atributul ,B80 este configurat la valoarea 3submit3.>cest element poate primi un nume prin atributul +->0. e buton apare scris 3Bubmit IuerD3 sau valoarea atributului /-.A0 )daca aceasta valoare a fost stabilita. <&,>.> <&0-C><,),.0>Form!xC. </,),.0></&0-C> &8
<2'CB><&=> 0n formular cu un camp de editare si un buton de expediere </&=> <&(> <4'(> -1,)'+= >-).,'ROOOOOSOOOF1'> >0,&'C= 8'7, > Kumele:<)+8A, ,B80= ,0O, +->0= +A>0.0 /-.A0= NA>0.0 7) 8(0+A>0.0 ><2(> <)+8A, ,B80= 7A2>), /-.A0= 0O80C)0-*- > </4'(>></2'CB> </&,>.>
vezi acest exemplu
entru elementul LinputM de tipul camp de editare (tDpe 4 3text3) ) alte doua atribute pot fi utile: atributul 7)*0 specifica latimea campului de editare depaseste aceasta latime )atunci se executa automat o derulare acestui camp; atributul >-O.0+5,& specifica numarul maxim de caractere pe care le poate primi un camp de editare; caracterele tastate peste numarul maxim sunt ignorate. Observatii: 6daca atributul ,B80 lipseste intr-un element <input> , atunci campul respectiv este considerat in mod prestabilit ca fiind de tip "text". 6formularele cu un singur camp (de tip text) nu au nevoie de un buton de expediere, datele sunt expediate automat dupa completarea si apasareatastei ENTER. )utonul Reset 8aca un element de tip <in"ut> are atributul ,B80 configurat la valoarea 3reset3 )atunci in formular se introduce un buton pe care scrie 31eset3. 2a apasarea acestui buton )toate elementele dinn formular primesc valorile prestabilite (definita odata cu formularul )) chiar daca aceste valori au fost modificate de utili7ator. 0n buton 1eset poate primi un nume cu a"utorul atributului +->0 si o valoare printr6un atribut /-.A0. 0n asemenea buton afisea7a textul 31eset3 daca atributul /-.A0 lipseste) respectiv valoarea acestui atribut in ca7 contar. <&,>.> <&0-C><,),.0>formexC*</,),.0></&0-C> <2'CB><&=>0n formular cu un buton reset</&=> <&(> <4'(> -1,)'+= >-).,'ROOOOOSOOOF1'> >0,&'C= 8'7, > Introduceti numele:<)+8A, ,B80= ,0O, +->0= +A>0 /-.A0= NA>0.0 ><2(> Introduceti prenumele:<)+8A, ,B80= ,0O, +->0= 8(0+A>0 /-.A0= P(0+A>0.0 ><2(> <)+8A, ,B80= (070, /-.A0= 7,0(50 > <)+8A, ,B80= 7A2>), > </4'(>></2'CB> </&,>.>
vezi acest exemplu
Cam" de editare de ti" /"ass0ord/ 8aca se utili7ea7a eticheta <in"ut> avand atributul ,B80 configurat la valoarea 3password3 ) atunci in formular se intDroduce un element asemanator cu un camp de editare obisnuit (introdus prin tDpe43text3). &oate atributele unui camp de editare raman valabile. Bingura deosebire consta in faptul ca acest camp de editare nu afisea7a caracterele in clar)ci numai caractere 1)care ascund de privirile altui utili7ator aflat in apropiere valoarea introdusa intr6un asemenea camp. 2a expedierea formularului insa) valoarea tastata intr6un camp de tip 3password3 se transmite in clar. <&,>.> <&0-C><,),.0>formexC?</,),.0></&0-C> <2'CB><&=>0n formular cu un buton reset</&=> <&(> <4'(> -1,)'+= >-).,'ROOOOOSOOOF1'> >0,&'C= 8'7, > Kume:<)+8A, ,B80= ,0O, +->0= +A>0 /-.A0= NA>0.0 ><2(> renume:<)+8A, ,B80= ,0O, +->0= 8(0+A>0 /-.A0= P(0+A>0.0 ><2(> assword:<)+8A, ,B80= 8-77H'(C +->0= 8-('.- ><2(> <)+8A, ,B80= (070, /-.A0= 7,0(50 > <)+8A, ,B80= 7A2>), /-.A0= ,()>),0 > </4'(>></2'CB> </&,>.> &A
vezi acest exemplu
)utoane radio %utoanele radio permit alegerea )la un moment dat ) aunei singure variante din mai multe posibile. %utoanele radio se introduc prin eticheta <in"ut> cu atributul ,B80 avand valoarea 3radio3. <&,>.> <&0-C><,),.0>formexC-</,),.0></&0-C> <2'CB><&=>0n formular cu butoane radio</&=> <&(> <4'(> -1,)'+= >-).,'ROOOOOSOOOF1'> >0,&'C= 8'7, > >legeti sexul:<)+8A, ,B80= (-C)' +->0= 70O /-.A0= 2 ><2(> Femeiesc:<)+8A, ,B80= (-C)' +->0= 70O /-.A0= 4 ><2(> <)+8A, ,B80= (070, > <)+8A, ,B80= 7A2>), > </4'(>></2'CB> </&,>.>
vezi acest exemplu
2a expedierea formularului se va transmite una dintre perechile 3sex4b3 sau 3sex4f3)in functie de alegerea facuta de utili7ator. Casete de 2alidare 9 caseta de validare (checAbox)permite selectarea sau deselctarea unei optiuni. entru inserarea unei casete de validare se utili7ea7a eticheta <in"ut> cu atributul ,B80 configurat la valoarea 3checAbox3. Observatii: 6 fiecare caseta poate avea un nume definit prin atributul +->0. fiecare caseta poate avea valoarea prestabilita "selectat" definita prin atributul 1&0130C. <&,>.> <&0-C><,),.0>formexC+</,),.0></&0-C> <2'CB><&=>0n formular cu casete checAbox</&=> <&(> <4'(> -1,)'+= >-).,'ROOOOOSOOOF1'> >0,&'C= 8'7, > >legeti meniul:<2(> i77a <)+8A, ,B80= 1&0132'O +->0= 8)**- /-.A0= ' 8'(,)0 > Kectar <)+8A, ,B80= 1&0132'O +->0= +01,-( /-.A0= A+ 8-&-( > %ere <)+8A, ,B80= 1&0132'O +->0= 20(0 /-.A0= ' 7,)1.- > 'afea <)+8A, ,B80= 1&0132'O +->0= 1-40- /-.A0= ' 10-71- ><2(> <)+8A, ,B80= (070, > <)+8A, ,B80= 7A2>), > </4'(>></2'CB> </&,>.>
vezi acest exemplu
Casete de $isiere Intr6o pereche 3name 4 value3 a unui formular se poate folosi intregul continut al unui fisier pe post de valoare. entru aceasta se inserea7a un element <in"ut> intr6un formular ) cu atributul LMavand valoarea 3file3 (fisier). >tributele pentru un element de tip caseta de fisiere: atributul +->0 permite atasarea unui nume atributul /-.A0 primeste ca valoare adresa 012 a fisierului care va fi expediat o data cu formularul. >ceasta valoare poate fi atribuita direct atributului /-.A0) se poate fi tastata intr6un camp de editare ce apare o data cu formularul sau poate fi selectata prin intermediul unei casete de tip File 0pload sau 'hoose File care apare la apasarea butonului %rowse... din formular; atributul 0+1,B80 preci7ea7a metoda utili7ata la criptarea fisierului de expediat.:aloarea acestui atribut este 3multipartGform6data3. <&,>.> <&0-C><,),.0>formexC,</,),.0></&0-C> <2'CB><&=>0n formular cu caseta de fisiere</&=> <&(> <4'(> -1,)'+= >-).,'ROOOOOSOOOF1'> >0,&'C= 8'7, > >legeti fisierul:<)+8A, ,B80= 4).0 +->0= 4)7)0( 0+1,B80= >A.,)8-(,/4'(>" &B
C-,- ><2(> <)+8A, ,B80= (070, > <)+8A, ,B80= 7A2>), > </4'(>></2'CB> </&,>.>
vezi acest exemplu
Liste de selectie 9 lista de selectie permite utili7atorului sa aleaga unul sau mai multe elemente dintr6o lista finita. 2ista de selectie este inclusa in formular cu a"utorul etichetelor corespondente <select>si <(select>. 9 lista de selectie poate avea urmatoarele atribute: atributul +->0) care atasea7a listei un nume (utili7at in perechile 3name4value3 expediat serverului); atributul 7)*0) care preci7ea7a (printr6un numar intreg po7itiv ) valoarea prestabilita fiind .) cate elemente din lista sunt vi7ibile la un moment dat pe ecran (celelalte devenind vi7ibile prin actionarea barei de derulare atasate automat listei). !lementele unei liste de selectie sunt incluse in lista cu a"utorul etichetei <o"tion>. 8oua atribute ale etichetei option se dovedesc utile: atributul /-.A0 primeste ca valore un text care va fi expediat server6ului in perechea 3name4value3; daca acest atribut lipseste )atunci catre server va fi expediat textul ce urmea7a dupa <o"tion>; atributul 70.01,0C (fara alte valori) permite selectarea prestabilita a unui elem)ent al listei. <&,>.> <&0-C><,),.0>formexC/</,),.0></&0-C> <2'CB><&=>0n formular cu o lista de selectie</&=> <&(> <4'(> -1,)'+= >-).,'ROOOOOSOOOF1'> >0,&'C= 8'7, > 0niversitatea absolvita:<2(><2(> <70.01, +->0= A+)/0(7),-,0 7)*0= E > <'8,)'+ /-.A0= B > 0niversitatea din 'lu" <'8,)'+ /-.A0= UNBM 70.01,0C> 0niversitatea de Kord %aia $are <'8,)'+ /-.A0= UTT > 0niversitatea &echnica din &imisoara <'8,)'+ /-.A0= UTB > 0niversitatea &echnica din %rasov </70.01,><2(><2(> <)+8A, ,B80= (070, > <)+8A, ,B80= 7A2>), > </4'(>></2'CB> </&,>.>
vezi acest exemplu
8aca atributul 7)*0 este egal cu . atunci lista de selectie arata asa. Lista de selectie cu selectii multi"le 9 lista de selectie ce permite selectii multiple se creea7a intocmai ca o lista de selectie obisnuita. In plus ) eticheta <select> are un atribut >A.,)8.0 (fara alte valori). 'and formularul este expediat catre server pentru fiecare element selectat al listei care este se inserea7a cate o pereche 3name4value3 unde +->0 este numele listei. <&,>.> <&0-C><,),.0>formexC(</,),.0></&0-C> <2'CB><&=>0n formular cu o lista de selectie ce accepta selectii multiple </&=> <&(> <4'(> -1,)'+= >-).,'ROOOOOSOOOF1'> >0,&'C= 8'7, > 2imbi straine cunoscute:<2(><2(> <70.01, +->0= .)>2) 7,(-)+0 7)*0= L > <'8,)'+ /-.A0= 0 > !ngle7a <'8,)'+ /-.A0= 4 70.01,0C> France7a <'8,)'+ /-.A0= 7 > Bpaniola <'8,)'+ /-.A0= ) > Italiana <'8,)'+ /-.A0= ( > 1usa <'8,)'+ /-.A0= 5 > Germana </70.01,><2(><2(> <)+8A, ,B80= (070, > <)+8A, ,B80= 7A2>), > </4'(>></2'CB> </&,>.>
vezi acest exemplu
D-
Cam"uri de editare multilinie Intr6un formular campuri de editare multilinie pot fi incluse cu a"utorul etichetei <textarea>. !ticheta are urmatoarele atribute: atributul 1'.7) care specifica numarul de caractere afisate intr6o linie; atributul ('H7) care specifica numarul de linii afisate simultan; atributul +->0) care permite atasarea unui nume campului de editare multilinie; atributul H(-8) (de la 3word wrap34trecerea cuvintelor pe randul urmator<) care determina determina comportamentul campului de editare fata de sfarsitul de linie. >cest atribut poate primi urmatoarele valori: a) 3 off 3; in acest ca7: intreruperea cuvintelor la marginea dreapta a editorului se produce numai cand doreste utili7atorul; caracterul de sfarsit de linie este inclus in textul transmis serverului o data cu formularul; b) 3 hard 3; in acest ca7: se produce intreruperea cuvintelor la marginea dreapta a editorului ; caracterul de sfarsit de linie este inclus in textul transmis serverului o data cu formularul; c) 3 soft 3; in acest ca7: se produce intreruperea cuvintelor la marginea dreapta a editorului ; nu se include caracterul de sfarsit de linie in textul transmis serverului o data cu formularul; <&,>.> <&0-C><,),.0>formexC@</,),.0></&0-C> <2'CB><&=>0n formular cu un camp de editare multilinie</&=> <&(> <4'(> -1,)'+= >-).,'ROOOOOSOOOF1'> >0,&'C= 8'7, > <,0O,-(0- +->0= ,0O, >A.,).)+)0 1'.7= EM ('H7= L H(-8= '44 > rima linie din textul initial. > doua linie din textul initial. </,0O,-(0-> <)+8A, ,B80= (070, > <)+8A, ,B80= 7A2>), > </4'(>></2'CB> </&,>.>
vezi acest exemplu
Un $ormular com"lex In exemplul urmator este pre7entat un formular continand elemente pre7entate anterior. 'ampurile formularului sunt incluse in celule unui tabel pentru a obtine o aliniere dorita. <&,>.> <&0-C><,),.0>formexC.<</,),.0></&0-C> <2'CB><&=>0n formular complex</&=> <&(> <10+,0(><,-2.0 251'.'(= '(-+50 > <4'(> -1,)'+= >-).,'ROOOOOSOOOF1'> >0,&'C= 8'7, > <1-8,)'+ -.)5+= ,'8 >$!KI0</1-8,)'+> <,( -.)5+=.04,><,&>Kumele: <,C><)+8A, ,B80= ,0O, +->0= +A>0.0 > <,( -.)5+=.04,><,&> reumele: <,C><)+8A, ,B80= ,0O, +->0= 8(0+A>0.0 > <,( -.)5+=.04,><,&>&elefonul: <,C><)+8A, ,B80= ,0O, +->0= ,0.04'+A. > <,( -.)5+=.04,><,&>>legeti pi77a: <,C><)+8A, ,B80= 1&0132'O +->0= 1)A80(1) >cu ciuperci <)+8A, ,B80= 1&0132'O +->0= >0O)1-+- >mexicana <)+8A, ,B80= 1&0132'O +->0= 0A('80-+- >europeana <,( -.)5+=.04,><,&>>legeti plata:<,C> <A. 7,B.0= 2-135('A+C"1'.'(R.)5&,2.A0; > <.)><)+8A, ,B80= (-C)' +->0= 8.-,- >cash <.)><)+8A, ,B80= (-C)' +->0= 8.-,- >card </A.> <,( -.)5+=.04,><,&>'omentarii: <,C> <,0O,-(0- +->0= 1'>0+,-()) 1'.7= EM ('H7= L H(-8= '44 > Inserati aici aprecierile dumneavoastra legate de calitatea serviciilor noastre </,0O,-(0-> <,( -.)5+=.04, /-.)5+=,'8><,C> <)+8A, ,B80= (070, /-.A0= 7,0(50 ><,C> <)+8A, ,B80= 7A2>), /-.A0= 0O80C)0-*- > D3
EE@ 4!i"uri ?tilurile pun la dispozitia creatorilor de site-uri noi posibilitati de personalizare a paginilor 0eb. Un stil reprezinta un mod de a scrie un bloc de te)t 4 adica anumite valori pentru !ont( marime culoare( aliniere( distante !ata de margini etc5. J)ista doua modalitati de a de!ini un stil: sinta)a 2?? 42ascading ?tHle ?heets5/ sinta)a Gavascript. 2ascading ?tHle ?heets inseamna L!oi in stilul cascadaL. ?tiluri dedicate ceste stiluri se aplica blocurilor de te)t pentru care sunt de!inite. 6e e)emplu: <stHle> h3 Rte)t-align:center/ color:red/T </stHle> #oate titlurile care apar in !gisier ca !iind de marime 3 vor !i de culoare rosie si centrate. 6aca dorim ca acelasi stil sa !ie utilizat de catre mai multe elemente 4de e). Lh3L( Lh'L( si LpL5 atunci se utilizeaza o lista acestor elemente( separate prin virgula: <stHle> h3( h'( p Rte)t-align:center/ color:red/T </stHle> 2lase de stiluri ceste stiluri permit de!inirea unui stil general si !olosirea lui oriunde este necesar. J)emplu: 6e!inim o clasa de stiluri LacL 4albastru si centrat5 in interiorul blocului <stHle>...</stHle>( a!lat la randul lui in blocul <head>...</head>: <stHle> all.ac Rte)t-align:center/ color:blue/T </stHle> 6aca dorim ca un titlu de marimea ' sa !oloseasca clasa de stiluri LacL atunci scriem: <h' class ; ac> cesta este un header de marime ' albastru si centrat</h'> - LallL a!lat in !ata clasei de stiluri LacL indica !aptul ca aceasta clasa este aplicabila tuturor blocurilor de te)t( atunci cand acest lucru este necesar. %a utilizarea clasei de stiluri in cadrul unui element se !oloseste atributul class avand ca valoare numele clasei de stil. cesta este un atribut universal adica este aplicabila tuturor elementelor. @bservatii: 9n interiorul unui bloc <stHle>...</stHle>( comentariile sunt blocuri delimitate de /F si F/ 4 ca in 2( 2SS( Gava si Gavascript5. 6aca dorim ca o clasa de stiluri sa !ie aplicabila numai pentru anumite elemente ale documentului 4de e)emplu LpL5 atunci in consturctia va aparea acest element 4 de e)emplu Lp.rcL5. <html> <head><title>clasa de stiluri dedicata</title> <stHle> p.ac Rte)t-align:center/ color:blue/T </stHle> </head> <bodH> <p> cesta este un paragra! normal <br> <p class;ac> cesta este un paragra! albastru si centrat </bodH> </html> vezi acest e)emplu ?tiluri L identi!icate L #oate elementele unui document admite un atribut universal numit id. tributul id poate identi!ica stilul utilizat de un element. 1entru a utiliza un stil Lidenti!icatL procedati ast!el: in blocul <stHle>...</stHle> introduceti de!initia stilului con!orm sinta)ei: <stHle> =rosu R color: red T </stHle> D'
in elementul in care se doreste utilizarea locala a acestui stil ( !olositi atributul id care primeste valoare numele stilului de!init anterior. 6aca dorim ca un stil L identi!icat L sa !ie aplicabil numai pentru anumite elemente ale documentului 4 de e)emplu Lh'L5 atunci in constructia selectorului va aparea acest element 4de e)emplu Lh'=acL5. ?tiluri in-line ?tilurile in-line sunt de!inite chiar in eticheta ce initiazablocul in care dorim sa se aplice aceste stiluri. 1entru aceasta se utilizeaza atributul universal stHle 4comun practic tuturor etichetelor ce par intr-un document "#$%5. Maloarea data atributului stHle este tocmai descrierea stilului( cuprinsa nu intre acolade R..T ci intre ghilimele L...L. 6e e)emplu: <h' stHle ; L color: red/ te)t-align: center/L> cest header de marimea ' este de culoare rosie si este centrat.</h'> 6aca dorim utilizarea unui anumit stHle pentru un !ragment de te)t( atunci includem acest te)t intr-un bloc cu ajutorul delimitatorilor <span>...</span>( dupa care utilizam atributul stHle pentru eticheta <span>. ?tiluri de!inite in !isiere e)terne ?tilurile de!inite in interiorul unui bloc <stHle>...</stHle> pot !i trans!erate intr-un !isier e)tern e)istand ast!el posibilitatea utilizarii lor in mai multe !isiere "#$%. 1entru a utiliza un stil de!init intr-un !isier e)tern se procedeaza ast!el: ?e creaza un !isier care sa contina numai descrierea stilurilor si se salveaza cu e)tensia .css sau .html. 2ontinutul acestui !isier coincide cu continutul unui bloc <stHle>...</stHle> ( !ara ca acesti delimitatori sa !ie inclusi. 9n !isierul "#$% care utilizeaza stilurile de!inite in !isierul creat la punctul 3 ( se include in blocul <head>...</head> o eticheta <linC>avand trei atribute. atributul relcu valoarea LstHlesheetL atributul hre! avand ca valoare adresa U:% a !isierului creat la punctul 3 / atributul tHpe cu valoarea Lte)t/cssL. ?e utilizeaza titlurile de!inite in !isierul e)tern ca si cum ar !i de!inite in !isierul "#$% curent intr-un bloc <stHle>...</stHle>. 1seudoclase 1seudoclasele se utilizeaza pentru personalizarea legaturilor. Jle se de!inesc in blocul <stHle>...</stHle> sau intr-un !isier e)tern( con!orm sinta)ei: a: linC Rcolor: blacC/ !ont-size: '-ptT a: activate Rcolor: blue/ !ont-stHle: italicT a: visited Rcolor: cHan/ te)t-decoration: noneT 1entru ca numai anumite legaturi sa utilizeze un stil se pot !olosi urmatoarele doua metode: a: linC.2% ? 3 R...T combinat cu <a class ; 2% ? 3 hre!;L L> ...</a> a: linC=963 R...T combinat cu <a id ; 963 hre!;L L> ...</a> tentiePPP acest e)emplu lucreaza doar cu browsere 9nternet J)plorer D.) sau .P 9n browsere cursorul mouse-ului are in general o !orma simpla( luaind pe parcursul vizionarii paginii respective ma)imum doua in!atisari di!erite: $ana - atunci cand este pozitinat pe o legatura Iara verticala - atunci cand este pozitionat pe alt obiect decat o legatura. cestea insa sunt !ormele implicite. 6esigur e)ista cazuri in care am dori ca browser-ul sa aiba o alta !orma decat una dintre acestea. %a !el ca multe alte probleme care privesc modul in care o pagina arata si aceasta isi gaseste rezolvarea in !olosirea 2??( ca limbaj de descriere a !ormei unui document. 1roprietatea care gestioneaza !orma cursorului se numeste simplu: cursor si poate !i introdusa in orice element stHle al unui tag html. 6e e)emplu pentru obtinerea unei imagini a cursorului de tipul unei sageti orientata Jst-Mest la trecerea mouse-ului peste un linC iata codul ce va trebui !olosit: < a hre!;L !isier.htmlL stHle;L cursor :e-resizeL L %egatura< /a> 9ata deci cum va arata 4doar pentru 9J D.) sau mai mare5: %egatura *u este( insa singurul e)emplu( in continuare aveti toate codurile pentru !ormele de cursor pe care le puteti !olosi: auto utilizeaza setarile implicite ale utilizatorului crosshair creeaza o cruce de!ault setarile implicite ale browserului e-resize sageata Jst-Mest D&
hand mana help semnul intrebarii move cruce cu sageti la capete n-resize sageata sud-nord ne-resize sageata ?udMest - *ordJst nw-resize sageata ?udJst - *ordMest pointer mana s-resize sageata *ord - ?ud se-resize sageata *ordMest - ?udJst sw-resize sageata *ordJst - ?udMest te)t bara verticala din campurile de introducere a datelor w-resize sageata Jst-Mest wait clepsidra 1$. %avascript Javascript este un limba" de programare simplu ) de tip script) pentru definirea comportamentului elementelor dintr6o pagina ;eb. Ku este acelasi lucru cu mult mai complexul limba" de programare Java. Javascript poate specifica ) in mod obisnuit in doar cateva randuri ) raspunsurile la actiuni sau evenimente cum ar fi deschiderea unei pagini) deplasarea mouse6ului intr6un anumit punct sau stergerea unui anumit camp dintr6un formular. 'ea mai simplas aplicatie Javscript este aceea care determina apariria si derularea unui mesa": <&,>.> <&0-C><71()8, .-+5A-50= T-/-71()8, > LQ66 alert (3 >pasati 9N Q 3) 66M </71()8,></&0-C> <2'CB> 9 fereastra cu mesa" QQQ </2'CB> </&,>.>
vezi acest exemplu
Bcriptul este incadrat de marca"ele <scri"t>###<(scri"t> si totul este inglobat intr6un comentariu astfel incat programele de navigare care nu interpretea7a Javascript nu sunt derutate de scriptul in sine. $ulte evenimente pot fi gestionate cu Javascript. 32e nime nt blur clicA chan ge focu s load Handler de e2eniment on%lur on'licA on'hange onFocus on2oad
Se des$asoara atunci cand utili7atorul elimina controlul de intare de pe un element al unui formular utili7atorul executa un clicA pe un element al unui formular sau pe o legatura utili7atorul modifica valoarea unui text 7ona de text sau element de selectie utili7atorul atribuie unui element de formular control de intrare utili7atorul incarca pagina in progarmul de navigare
mou utili7atorul deplasea7a indicatorul mouse6ului on$ouseov seov deasupra unei legaturi sau a unei ancore er er selec utili7atorul selectea7a campul de intare al unui onBelect t element de formular sub utili7atorul transmite un formular onBubmit mit unlo utili7atorul abandonea7a pagina on0nload ad In urmatorul exemplu folosim evenimentul click. <4'(>> <)+8A, ,B80= 2A,,'+ /-.A0= A8-7-D '+C.)13= -.0(,UVH0..'DVW > </4'(>>
>pasa
>cest exemplu citeste numele si il saluta. DD
0n alt exemplu care modifica culoarea de fond a paginii. In exemplul urmator modificam o imagine atunci cand cursorul este po7itionat pe aceasta. !lementul cheie este acela ca exista doua versiuni alle fiecarei imagini: imaginea 3on3 (corespun7atoare cursorului po7itionat deasupra imaginii) si o imagine 3off3 (corespun7atoare cursorului po7itionat in exteriorul imaginii). Incercati acest exemplu. !lementul esential in acest exemplu este modul in care se pun in corespondenta evenimentele de activare si de7activare cu evenimentele specifice: 9n$ouse9ver si 9n$ouse9ut. rimul invoca procedura Javascript activate atunci cand mouse6ul este plasat deasupra imaginii) iar cel de6al al doilea comuta imaginea la situatia initiala atunci cand mouse6ul este in exteriorul acesteia. 0rmatoarele exemple sunt putin mai complicate. rimul este un ceas digital.>l doilea un fisier cu meniuri popup
13. Tag&uri Marca+e de ba(a 8HTML9 8CHTML9 8efineste un fisier in format ;eb 8HEAD9 8CHEAD9 >ntetul documentului 8TITLE9 8CTITLE9 &ilul documentului 86ODK9 8C6ODK9 'orpul paginii 5&$2 IG2@%@: ; culoare 'uloarea de fond a paginii #J[#;culoare 'uloarea textului pe paginii %9*O;culoare 'uloarea legaturiilor nevi7itate din paginii M%9*O;culoare 'uloarea legaturiilor vi7itate din paginii %9*O;culoare 'uloarea legaturiilor pe durata clicului exacutat de utili7ator I 2OG:@U*6 ; url Imaginea de fond pentru pagina 8P9 aragraf 8Hn9 8Hn9 Kivel de subtitlu al documentului (n 4 .6,) 82ONT9 8C2ONT9 Bpecifica atribute ale textului incadrat ?9VJ;n 8imensiunea textului este .6/ K 2J;"a#b" Bpecifica fontul: a) daca este disponibil) sau b 2@%@:;s 'uloarea textului: fie un nume de culoare ) fie o valoare 1G% 86R9 2inie noua 8PRE9 8CPRE9 Informatie preformatata 8L$$ $$9 'omenatriu 5&$2 8CENTER9 8CCENTER9 'entrea7a materialul in pagina 8HR9 1igla ori7ontala ?9VJ;$ Inaltimea riglei in pixeli 096#";$ 2atimea riglei in pixeli sau in procente *@?" 6J 8e7activea7a afisarea umbrei pentru rigla ori7ontala %9G*;$ >linierea riglei ori7ontala in pagina (left) center) right) 2@%@:;$ 'uloarea riglei ori7ontale(numai pentru I!) 8A9 8CA9 $arca" de tip ancora ":JK;url 1eferinta hipertext ":JK;%nume 1eferinta catre o ancora interna *ame;nume 8efinitia unei ancore interne
Marca+e pen!ru "is!e 8DD9 8escriere definitie 8DL9 8CDL9 2ista de tip definitie 8DT9 &ermen de definitie 8LI9 !lement de lista 8OL 2ista ordonata (numerotata) #N1J;ti &ipul numerotarii. :alori posibile: >) a) I) i) . ?# :#;$ Kumarul de inceput al listei ordonate 8UL 2ista neordonata (marcata) #N1J;forma Forma marca"ului. :alori posibile: circle) sFuare) disc.
2'r%a!area carac!ere"'r <)> <()> >fisea7a text cu caractere aldine 8I9 8CI9 >fisea7a text cu caractere cursive 8U9 8CU9 >fisea7a text subliniat 8TT9 8CTT9 &ext cu font monospatiu 8CITE9 8CCITE9 'itare bibliogarfica 8CODE9 8CCODE9 2isting de program 8EM9 8CEM9 Btil logic de evidentiere 8K6D9 8CK6D9 &ext de la tastatura 84TRONG9 8C4TRONG9 !videntiere logica puternica 8 AR9 8C AR9 rogram sau variabila 86A4E2ONT ?9VJ ; n> Bpecifica dimensiunea implicita a fontului din pagina
Marca+e pen!ru cadre 82RAME4ET9 8C2RAME4ET9 8efinirea redactarii paginii 2@%?;$ Kumarul si marimea relativa a coloanelor :@0?;$ Kumarul si marimea relativa a liniilor I@:6J:;$ Bpecifica starea 3on3 (activa) sau 3off3 (inactiva) pentru chenarul cadrului F1>$!B!& (. sau <) K: $JI@:6J: ; $ Bpecifica marimea chenarului K: $J?1 29*G ; $ $arimea spatiului dintre doua cadre adiacente 82RAME9 8efinitia unui anumit cadru ?:2;url 0126ul sursa pentru cadru * $J;nume Kumele cadrului (utili7at impreuna cu &>1G!&4nume ca parte componenta a marca"ului de tip ancora LaM ?2:@%%9*G; scrl 8efineste optiunea barei de derulare.:alori posibile: on(activa)) off(inactiva)) auto (automat) K: $JI@:6J:;$ $arimea chenarului din "urul cadrului $ :G9*"J9G"#;$ Bpatiul suplimentar de deasupra si dedesubtul unui anumit cadru $ :G9*096#";$ Bpatiu suplimetar la stanga si la dreapta unui anumit cadru 8NO2RAME49 8CNO2RAME49 Bectiunea de pagina afisata pentru utili7atorii care nu pot vedea un cadru 8I2RAME9 'adru intern (numai pentru (I!) ?:2;url Bursa cadrului * $J;s Kumele ferestrei (util pentru &>1G!&) "J9G"#;$ Inaltimea cadrului inglobat 096#";$ 2atimea cadrului inglobat D.
Marca+e pen!ru !abe"e 8TA6LE9 8CTA6LE9 &abel 5&$2 I@:6J:;$ 'henarul tabelului 2J%%1 669*G; $ Bpatiul suplimentar in cadrul celulelor tabelului 2J%%?1 29*G;$ Bpatiul suplimentar intre celulele tabelului 096#";$ 2atimea impusa tabelului K: $J;&aloare >"ustarea fina a tabelului :U%J?;&aloare >"ustarea fina a riglelor tabelului I@:6J:2@%@: ; culoare Bpecifica culoarea chenarului tabelului I@:6J:2@%@:%9G"# ; culoare 'ea mai deschisa culoare din cele doua culori specificate I@:6J:2@%@:6 :O ; culoare 'ea mai inchisa culoare din cele doua culori specificate %9G*;left >linia7a tabelul la marginea din stanga a paginii) iar textul curge in partea dreapta %9G*;ri'(t >linia7a tabelul la marginea din dreapta a paginii) iar textul curge in partea stanga "?1 2J;$ Bpatiu suplimetar pe ori7ontala in "urul tabelului M?1 2J;$ Bpatiu suplimetar pe verticala in "urul tabelului 2@%?;$ Bpecifica numarul de coloane ale unui tabel 8COLGROUP9 8CCOLGROUP9 8efineste un set de definitii de coloane cu a"utorul marca"ului LcolM 8COL 096#";$> 8efineste latimea unei coloane exprimata in pixeli 8THEAD9 8CTHEAD9 8efineste titlul tabelului 86ODK9 8CT6ODK9 8efineste corpul tabelului 8TR 8CTR9 2inie de tabel IG2@%@:;culoare Bpecifica culoarea de fond pentru intreaga linie %9G*;aliniere >linierea celulelor de pe linia curenta (left) center) right) 8TD 8CTD9 'elula de date a tabeluluiGfontM IG2@%@:;culoare Bpecifica culoarea de fond pentru celula de date 2@%?1 *;$ Kumarul de coloane pe care se intinde celula curenta de date :@0?1 *;$ Kumarul de linii pe care se intinde celula curenta de date %9G*;aliniere >linierea materialului din cadrul celulei de date.:alori posibile: (left) right) center) M %9G*;aliniere >linierea pe verticala a materialului din cadrul celulei de date.:alori posibile: (top) bottom) middle) I 2OG:@U*6;url Bpecifica imaginea de fond pentru celula tabelului *@0: 1 Ku permite despartirea textului pe linii in cadrul unei celule %9G*;baseline >linia7a celule de date cu linia de ba7a a textului adiacent %9G*;caracter >linia7a o coloana fata de un anumit carcater (caracterul prestabilit este 3.3) %9G*;)ustif* >linia7a atat marginea din stanga cat si marginea din dreapta a unui text Adau#area i%a#ini"'r 8IMG $arca"ul de introducere a imaginilor ?:2;url Bursa fisierului grafic %#;te$t &extul alternativ de afisat) daca este necesar %9G*;aliniere >linierea imaginii in pagina. :alori posibile: top (sus)) middle(in mi"loc)) bottom ("os)) left (in stanga)) right (la dreapta) "J9G"#;$ Inaltimea imaginii (in pixeli) 096#";$ 2atimea imaginii I@:6J:;$ 'henarul din "urul imaginii) atunci cand aceasta este utili7ata ca hiperlegatura "?1 2J;$ Bpatiul suplimentar pe ori7ontala din "urul imaginii (in pixeli) M?1 2J;$ Bpatiul suplimentar pe verticala din "urul imaginii (in pixeli) Marca+e pen!ru &'r%u"are 82ORM9 8C2ORM9 Formular 5&$2 activ 2#9@*;url rogramul 'GI de pe serverul care receptionea7a datele $J#"@6;metoda $odul in care datele sunt transmise serverului(G!& sau 9B&) 8INPUT 'amp de text sau alte date de intrare #N1J;o tiune &ipul campului de intrare LIK 0&M. :alori posibile: text)password)checAbox)hidden)file) radio)submit)reset)image. * $J;nume Kumele simbolic al valorii campului M %UJ;&aloare 'ontinutul prestabilit al campului de text 2"J2OJ6; o tiune %utonGcaseta marcata in mod prestabilit ?9VJ;$ Kumarul de caractere al unui camp de text ?9VJ;$ Kumarul maxim de caractere acceptate 84ELECT9 8C4ELECT9 Grup de casete de validare * $J;nume Kumele simbolic al valorii campului ?9VJ;$ Kumarul de articole de meniu care se afisea7a odata (prestabilit4.) $U%#91%J; $ ermite selectia unor articole de meniu multiple 8OPTION >legerea particulara intr6un domeniu LB!2!'&M M %UJ;&aloare :aloarea re7ultanta a acestei selectii din meniu 8TEMTAREA9 8CTEMTAREA9 'amp de intare de tip text pe linii multiple * $J;nume Kumele simbolic al valorii campului :@0?;$ Kumarul de linii al casetei de text 2@%?;$ Kumarul de coloane (caractere) pe linie al casetei de text 82IELD4ET9 8C2IELD4ET9 Imparte formularul in parti logice 8LEGEND9 8CLEGEND9 Kumele asociat setului de campuri (fieldset) %9G*;s Bpecifica alinierea legendei (explicatiei) afisate (top)bottom)left)right) # I9*6J[;$ Bpecifica ordinea elementelor atunci cand utili7atorul apasa tasta &ab 22J?OJN;c Bpecifica tasta care asigura comanda rapida de la tastatura asociata unui anumit element 69? I%J6 !lementul este inactiv) dar este afisat pe ecran :J 6@*%N !lementul este afisat pe ecran dar nu poate fi editat Carca!ere specia"e : Pamp; ampersand N tilda < mai mic (less than) > mai mare (greater than) \ simbolul de copDright ] simbolul pentru marca inregistrata ^ a mic cu accent ascutit (acute) , a mic cu accent circiumflex _ n mic cu tilda ` o mic barat (slash)
HTML avansa! 84TKLE9 8C4TKLE9 Bpecifica informatii referitoare modelul de stiluri #N1J;&al &ipul modelului de stiluri. 8e regula 3textGcss3 84CRIPT9 8C4CRIPT9 Include un script de regula Javascript) in pagina ;eb % *GU GJ;limba) 2imba"ul utili7at JMJ*#;e&eniment !veniment care declansea7a executia unor scripturi specifice K@:;numeobiect Kumele obiectului din pagina asupra caruia actionea7a D7
scriptul
D8

Ghidul Programatorului HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Ghidul Programatorului HTML

Încărcat de

Drepturi de autor:

Formate disponibile

http://werbach.

GHIDUL PROGRAMATORULUI HTML

4spec. de!ineste 7 nivele5

4de obicei deplasat5 4de obicei aplecat5 4de obicei +ngrosat5

4de obicei aplecat5 4pt. listare cod surs5

4nu prea rasp,ndit5

LINK$ URI 4I GRA2 *'.IC5

<IMG SRC= URL

ALT= %%% >

4dac imaginea nu este incrcat5 4cere un 2G95

4+n pi)eli5 4+n pi)eli5 4+n pi)eli5

4inserare obiect in pagin5

4de obicei nu e necesar +nchiderea tagului5 4un singur 2:5

4<LI> +nainte de !iecare element al listei5

4ordinea este rosu/verde/albastru5

4unde > este un cod 9?@ AA.B-35

4checCbo) si radio5 4+n caractere5 4+n caractere5

4se pot selecta mai multe optiuni5 4elemente ce pot !i selectate5

4+n pi)eli5 4procentaj din pagin5

*3.3 *3.3 *&.-b

*3.3 *3.3 *&.-b

*'.*'.*'.*'.*'.*&.-b *&.-b *&.-b *'.*'.*'.*'.*'.*'.*'.*&.-b *&.-b *'.-

Curs de au!'ins!ruire in HTML

<&,>.> <&0-C> <,),.0> </&0-C> <2'CB>

2uloarea si !amilia !ontului</,),.0>

ceste linie este scrisa cu caractere normale.

9ndentarea unui bloc</,),.0>

orizontale </&=> @ linie implicita alinierea stanga(

latime 3--E( grosime ' cu umbra.

H)C,&==LM 7)*0==G 1'.'(= (0C >

vezi acest exemplu

vezi acest exemplu

<C)/ -.)5+= ()5&, >

ceasta linie este o linie normala.Urmatorul bloc este aliniat la dreapta.

&0)5&,= GL< > &ext dupa imagine.

vezi acest exemplu

vezi acest exemplu

din D linii si ' coloane</&=><&(>

vezi acest exemplu

vezi acest exemplu

vezi acest exemplu

centru</,C><,C>stanga 4implicita5</,C></,(> </,-2.0>

lata(aceasta celula este !oaret

vezi acest exemplu

in coloana a treia.#e)t in coloana a treia.#e)t in coloana a treia.#e)t in coloana a treia.</,C></,(>

vezi acest exemplu

vezi acest exemplu

>cest exemplu citeste numele si il saluta. DD

S-ar putea să vă placă și

3.3 3.3 *&.-b

3.3 3.3 *&.-b

'.'.'.'.'.&.-b &.-b &.-b '.'.'.'.'.'.'.&.-b &.-b '.-