HTML

2. Primii pasi Orice document HTML incepe cu notatia <html> si se termina cu notatia </html>.
Aceste "chestii" se numesc in literatura de specialitate "TAG-uri".Prin conventie, toate informatiile HTML incep cu o paranteza un hiulara deschisa "<" si se termina cu o paranteza un hiulara inchisa ">". Ta -urile intre aceste paranteze transmit comenzi catre !ro"ser pentru a afisa pa ina intr-un anumit mod. #nele !locuri prezinta delimitator de sfarsit de !loc, in timp ce pentru alte !locuri acest delimitator este optional sau chiar interzis. $ntre cele doua marca%e <html> si </html> vom introduce doua sectiuni& -sectiunea de antet <head>...</head> si - corpul documentului <body>...</body>. 'locul <body>...</body> cuprinde continutul propriu-zis al pa inii HTML, adica ceea ce va fi afisat in ferastra !ro"ser-ului. O eticheta poate fi scris atat cu litere mici, cat si cu litere mari. Adica <HTML> = <HtmL> = <html>. (aracterele "spatiu" si "()*L+" ce apar intre etichete sunt i norate de catre !ro"ser. ,eci un prim document HTML ar fi ceva de enul asta&
<html> <head> </head> <body> </body> </html>
Asa arata primul document HTML. (opiati-l folosind (op-*Paste intr-un fisier nou si salvati-l ca P)$M.HTM sau P)$M.HTML. Apoi porniti Mozilla +irefo. sau $nternet /.plorer, dati (T)L-O si introduceti calea spre fisier. ,ati O0 si ... nimic. 1a nu disperam ... vom adau a primele elemente la pa ina noastra. $n primul rand, titlul unei pa ini se o!tine inserand in sectiunea <head>...</head> a urmatoarei linii&
<title>Aceasta
este prima mea pa ina de 2e!</title>
$n plus, in sectiunea <body>...</body> putem scrie te.te cat dorim. ,aca nu intalnim nici un marca% < sau > atunci interpretorul HTML le va lua ca te.te simple si le va afisa pe ecran. 1a vedem o noua versiune a pa inii noastre&
<html> <head> <title>Aceasta </head> <body> </body> </html>
este prima mea pa ina de 2e!</title>
'ine ati venit in pa ina mea de 2e!3
vezi acest e.emplu (ontinutul !locului <title>...</title> va aparea in !ara de titlu a ferestrei !ro"ser-ului. ,aca acest !loc lipseste intr-o pa ina HTML, atunci in !ara de titlu a ferstrei !ro"ser-ului va aparea numele fisierului. ,aca introducem mai multe linii intr-o pa ina !ro"ser-ul va afisa intr-un sin ur rand, intrucat caracterele " ()*L+ " sunt i norate de !ro"ser. Trecerea pe o linie noua se face la o comanda e.plicita, care tre!uie sa apara in pa ina html. Aceasta comanda este marca%ul <br> 4 de la " line !rea5 " - intrerupere de linie 6. +olosind aceleasi operatii ca mai sus, vizualizati noua pa ina3 7eti vedea te.tul ce apare in fereastra navi atorului. $n plus, pa ina dvs. va avea un titlu nou, cel introdus de dvs.
<html> <head> <title> </head> <body> </body> </html>
titlul pa inii</title>
'ine ati venit in <br> pa ina mea de 2e!3 vezi acest e.emplu
Blocuri preformatate
Pentru ca !ro"ser-ul sa interpreteze corect caracterele " spatiu ", " ta! " si " ()*L+ " ce apar in cadrul unui te.t, acest te.t tre!uie inclus intr-un !loc <pre>...</pre>.
<html> <head> <title>!loc preformatat </title> </head> <body><pre>
</pre></body> </html>
Prima linie A doua linie A treia linie
vezi acest e.emplu

uloarea de fo!d
O culoare poate fi precizata in doua moduri&
Printr-un nume de culoare.1unt disponi!ile cel putin 89 nume de culori& a:ua, !lac5, fuchsia, ra-, reen lime, maroon, nav-, olive, purple, red, silver, teal, "hite si -ello".
Prin constructia " ;rr !! " unde r 4red6, 4 reen6, sau ! 4!lue6 sunt cifre he.azecimale si pot lua valorile& <, 8, =, >, ?, @, 9, A, B, C, a, A, !, ', c, (, d, ,, e, /, f, +D se pot defini astfel 9@@>9 de culori.
(uloarea unei pa ini se precizeaza prin intermediul unui atri!ut al etichetei <body>. (uloarea fondului pa inii 2e! se sta!ileste cu atri!utul bgcolor al etichetei <body>, de e.emplu& <body bgcolor = culoare>. #rmatorul e.emplu realizeaza o pa ina cu fondul de culoare ri.
<html> <head> <title>culoare de fond </title> </head> <body bgcolor=gray>
O pa ina 2e! cu fondul G)$3

</body> </html>
vezi acest e.emplu

uloarea te"tului
Acest lucru se face prin intermediul atri!utului text al etichetei <body> dupa sinta.a <body text=culoare>. $n urmatorul e.emplu te.tul are culorea rosie.
<html> <head> <title>culoare te.tului </title> </head> <body text=red>
#n te.t de culoare rosie.

</body> </html>
vezi acest e.emplu O eticheta poate avea mai multe atri!ute.,e e.emplu , o eticheta cu trei atri!ute arata astfel& Eeticheta atri!ut8 F valoare8 atri!ut= F valoare= atri!ut> F valoare>G. #rmatorul e.emplu prezinta o pa ina cu fondul de culoare al!astra si te.tul de culoare al!ena.
<html> <head> <title>atri!ute multiple </title> </head> <body bgcolor=blue text=yellow>
+ond de culoare al!astra si te.t de culoare al!ena.

</body> </html>
vezi acest e.emplu
Te.tul afisat este caracterizat de urmatoarele atri!ute& Marime 4size6, (uloare 4color6, +ont 4style6. Acestea sunt atri!ute ale etichetei <basefo!t>./ste o eticheta sin ulara 4fara delimitator de sfarsit de !loc6.
<basefont size = numar color = culoare style = font>
unde&

numar - poate fi 8, =, >, ?, @, 9 sau AD 48 pentru fontul cel mai mic si A pentru fontul cel mai mare6D culoare - este o culoare precizata prin nume sau printr-o constructie )G'D font - poate fi un font eneric ca " serif ", " san serif ", " cursive ", " monospace ", "fantas- " sau un font specific instalat pe calculatorului clientului, ca " Times He" )oman ", " Helvetica " sau " Arial ".1e accepta ca valoare si o lista de fonturi separate prin vir ula, de e.emplu& " Times He" )oman, serif,monospace ".
,omeniul de vala!ilitate al caracteristicelor precizate de aceasta eticheta se intinde de la locul in care apare eticheta pana la sfarsitul pa inii sau pana la urmataorea eticheta <basefo!t>. ,aca acest atri!ut lipseste atunci te.tul din pa ina 2e! are atri!ute presta!ilite sau atri!ute precizate de !ro"serul utilizat. Atri!utele presta!ilite sunt& size F >, color F !lac5, si st-le F " Times He" )oman " . Pozitionarea continutului pa inii 2e! fata de mar inile ferestrei !ro"serului se poate face cu a%utorul a doua atri!ute ale etichetei <body>&

4sta!ileste distanta dintre mar inea stan a a ferstrei !ro"serului si mar inea stan a a continutului pa inii6D topmargin 4sta!ileste distanta dintre mar inea de sus a ferstrei !ro"serului si mar inea de sus a continutului pa inii6D
leftmargin
<html> <head> <title>(onfi urarea te.tului si sta!ilirea mar inii </title> </head> <body leftmargin="100" topmargin="50"> Te.tul are atri!ute implicite. <br><basefont style=" rial" color="blue" size="!"> Te.tul este scris cu fontul "Arial", culoare al!astru si marime 9. </body> </html>
vezi acest e.emplu

#tiluri pe!tru blocurile de te"t
Pentru ca un !loc de te.t sa apara in pa ina evidentiat 4cu caractere aldine6, tre!uie inclus intre delimitatorii <b>...</b> 4! vine de la "!old" F indraznet6. Pentru ca un te.t sa fie scris cu carcatere mai mari cu o unitate decat cele curente acesta tre!uie inclus intr-un !loc delimitat de etichetele <bi$>...</bi$>.
Pentru ca un te.t sa fie scris cu carcatere mai mici cu o unitate decat cele curente acesta tre!uie inclus intr-un !loc delimitat de etichetele <small>...</small>. Pentru ca un te.t sa fie scris cu carcatere cursive acesta tre!uie inclus intr-un !loc delimitat de etichetele <i>...</i> 4i vine de la " italic "6. Pentru a insera secvente de te.t aliniate ca indice 4su!-script6 sau ca e.ponent 4super-script6 , aceste fra mente tre!uie delimitate de etichetele <sub>...</sub>, respectiv <sup>...</sup>. Pentru a insera un !loc de caractere su!liniate se utilizeaza etichetele <u>...</u> 4u vine de la " underline "6. Pentru a insera un !loc de caractere su!liniate se utilizeaza etichetele <stri%e>...</stri%e> sau <s>...</s>. $n e.emplul urmator vom utiliza toate etichetele mentionate anterior.
<html> <head> <title>1tiluri pentru !locuri de te.t </title> </head> <body> <b>Te.t scris cu caractere in rosate.</b> <br> <big>Te.t cu caractere marite cu o unitate <big>mai mare<big> si mai mare<big> si mai mare.</big></big></big></big><br> <small>Te.tul este scris cu caractere micsorate cu o unitate <small>mai mic.</small></small><br> <i>Te.t scris cu caractere italice.</i> <br> $n aceasta linie <sup>sus</sup> este superscript iar <sub>%os</sub> este su!scirpt.<br> <stri"e>Aceasta linie este in intre ime sectionata de o linie orizontala.</stri"e> <br> $n aceasta linie urmatorul cuvant este <u>su!liniat</u>, iar cuvantul <s>stri5e</s> sectoinat. </body> </html>
vezi acest e.emplu

#tiluri fi&ice si lo$ice
Am prezentat de%a B stiluri de scriere a caracterelor unui !loc de te.t, numite si stiluri fizice intrucat nu s-a acordat nici o atentie semnificatiei informatiei continute de aceste !locuri. $n continuare sunt prezentate stilurile utilizate la formatarea unui !loc. Aceste stiluri tin cont de semnificatia pe care o are !locul in cadrul pa inii 2e!. Pentru a pune in evidenta 4prin silul cursiv6 fra mente de te.t se utilizeaza etichetele&

<cite>...</cite> 4" cite " inseamna citat6D <em>...</em> 4em vine de la " emphasize " F a evidentia6.
$n locul lor se poate utiliza eticheta echivalenta <i>...</i>.
#rmatoarele etichete au efecte similare./le permit scrierea fra mentului de te.t cu caractere monospatiate 4de tipul celor folosite de o masina de scris6&

<code>...</code> 4"code" inseamna cod sau sursa6D <%bd>...</%bd> 45!d vine de la " 5e-!oard " F tastatura6D <tt>...</tt> 4tt vine de la " telet-pe " F teleprinter6.
/ticheta de tip !loc <bli!%>...</bli!%> delimiteaza fra menete de te.t clipitoare. Aceasta eticheta functioneaza numai in !ro"serul Hetscape (ommunicator.
<html> <head> <title>'locuri </head> <body>
de caractere monospatiate si clipitoare </title>
Aceasta linie este formata din te.t normal.E!rG (odul functiei f4.,-6 este& <code>+unction f4.,-6 Ireturn .J-DK</code><br> Tastati urmatoarea comanda comanda ,O1& <"bd> cop- c&L"indo"sLM c&Ltemp<"bd><br> <tt>Asa scrie un teleprinter</tt><br> Acest cuvant clipeste <blin">'lin5</blin">
</body> </html>
vezi acest e.emplu /.emplul urmator ilustreaza ca etichetele pot fi im!ricate.

un fra ment de te.t poate fi scris cu aldine si cursive in acelsi timpD pentru un fra ment de te.t se pot folosi simultan stilurile su!liniat, e.ponent, marit si cursiv.
'locul <'>...</'> permite inserarea in-line a citatelor.Aceste citate sunt afisate de catre !ro"ser cu caractere cursive. " ' " vine de la " in-line :uotation " 4citate inserate in-line6D 1i !locurile " ' " pot fi im!ricate.
<html> <head> <title>$m!ricarea etichetelor </title> </head> <body> Aceasta linie este formata din te.t normal.E!rG Hormal <b>in rosat <i> in rosat si italic </i> in rosat </b>. <br> Hormal <u>su!liniat <b> su!liniat si in rosat <big>su!liniat, <i>1u!liniat, in rosat ,marit si italic.</i> </big></b></u> </body> </html>
in rosat si marit.<br>
(. )o!turi #n font este caracterizat de urmatoarele atri!ute&

culoare 4sta!ilita prin atri!utul color6D tipul sau stilul 4sta!ilit prin atri!utul face6D marimea 4definita prin atri!utul size6D marimea in puncte tipo rafice 4sta!ilita prin atri!utul point#size6D rosime 4definita prin atri!utul weight6.
Toate aceste atri!ute apartin etichetei, care permite inserarea de !locuri de te.te personalizate.
ulori
O culoare poate fi precizata in doua moduri& 8. printr-un nume de culoare. =. printr-o constanta conform standardului de culoare )G' 4)ed, Green,'lue6. O astfel de constanta se formeaza astfel& ;rr !!, unde r, si ! sunt cifre he.azecimale.
ulorea fo!tului
Pentru a scrie un fra ment de te.t cu caractere de o anumita culoare se incadreaza acest fra ment intre delimitatorii ... avand sta!ilit atri!utul color la valoarea necesara. ,e e.emplu&
<font color=red>fra )amilia fo!tului
ment de te.t de culoare rosie</font>
Pentru a scrie un te.t intr-o pa ina pot fi folosite mai multe fonturi 4stiluri de caractere6. /.ista cinci familii enerice de fonturi care sunt de re ula disponi!ile pe toate calculatoarele utilizatorilor& serif, sans serif, cursive, monospace si fantas-. Tipul de font necesar poate fi sta!ilit prin atri!utul face al etichetei. Pot fi introduse mai multe fonturi separate prin vir ula.
<font face=" rial$ serif$ monospace">
$n acest caz !ro"serul va utiliza primul font pe care il cunoaste.

<html> <head> <title> </head>
(uloarea si familia fontului</title>
<body>
Aceste linie este scrisa cu caractere normale. <br> <font color="red">Aceasta linie este rosie.</font> <br>Aici<font color="green">fiecare</font> <font color="blue">cuvant</font> <font color="yellow">are</font> <font color="cyan">alta</font> <font color="%&'()fa">culoare.</font> <br><font face="monospace">Linie scrisa cu caractere monospatiate.</font> <br> <font face="arial">Linie scrisa cu caractere arial.</font>
</body> </html>
vezi acest e.emplu

Marimea fo!tului
Penrtu a sta!ili marimea unui font se utilizeaza atri!utul size al etichetei. 7alorile acestui atri!ut pot fi&

8, =, >, ?, @, 9, A 4 8 pentru cel mai mic font si A pentru cel mai mare6D J8, J=, etc. pentru a mari dimensiunea fontului cu 8, =, etc. fata de valoarea curentaD -8, -=, etc. pentru a micsora dimensiunea fontului cu 8, =, etc. fata de valoarea curenta.
Marimea unui font poate fi sta!ilita e.act cu a%utorul atri!utului point#size. 7alorile acceptate de acest atri!ut pot fi orice numere naturale pozitive.Humarul astfel precizat reprezinta marimea fontului in puncte tipo rafice. Acest atribut functioneaza numai cu Netscape Communicator.
<html> <head> <title> </head> <body>
Marimea fontului</title>
Aceste linie este scrisa cu caractere normale. <br> <font size="5">+onturi de marime @.</font> <br> <basefont size="'">+onturi de marime ?.</font> <br> <font size="#&">+onturi de marime 8.</font> <br> <font size="*+">+onturi de marime 9.</font> <br> <font point#size="&0">+onturi de marime >< pt 4numai cu Hetcape (ommunicator6.</font>
<br> <font point#size="50">+onturi </body> </html>
de marime @< pt 4numai cu Hetcape (ommunicator6.</font>
vezi acest e.emplu

*rosimea u!ui fo!t
Grosimea unui caracter poate fi definita cu a%utorul atri!utului weight al etichetei. 7alorile posi!ile pentru acest atri!ut sunt 8<<, =<<, ><<, ?<<, @<<, 9<<, A<<, B<< si C<< 48<< pentru fontul cel mai su!tire si C<< pentru cel mai ros6.
Grosimea fontului</title>
Aceste linie este scrisa cu caractere normale. <br> <font weight="100">+onturi de rosime 8<<.</font> <br> <font weight="500">+onturi de rosime @<<.</font> <br> <font weight=",00">+onturi de rosime C<<.</font>
</body> </html>
+. Blocuri de te"t Aceste etichete nu se refera la particularitatiile caracterelor ce compun te.tul, ci la functiile pe care le poate avea un !loc de te.t in cadrul pa inii 2e!. Toate aceste etichete produc automat trecerea la un rand nou si adau area unui spatiu suplimentar.
,!serarea u!ei adrese
,aca intr-o pa ina "e! tre!uie inclusa o adresa ,atunci putem utiliza facilitatile oferite de o eticheta dedicata& <address>...</address>.
Adresa</title>
Adresa institutiei noastre este &<address> (ole iul #niversitar<br> 1tr& 7ictor 'a!es , Hr&9=*A <br> 'aia Mare )omania </address>
</body> </html>
vezi acest e.emplu

,!de!tarea u!ui bloc
Pentru ca un !loc de te.t sa fie indentat 4 mar inea din stan a a te.tului sa fie deplasata la dreapta la o anumita distanta fata de mar inea pa inii 6, acesta tre!uie inclus intre etichetele <bloc%'uote>...</bloc%'uote>.
<html> <head>
<title> </head> <body>
$ndentarea unui !loc</title>
Te.tul ce urmeaza este indentat&<bloc"-uote> Aceste etichete nu se refera la particularitatiile caracterelor ce compun te.tul, ci la functiile pe care le poate avea un !loc de te.t in cadrul pa inii 2e!. Toate aceste etichete produc automat trecerea la un rand nou si adau area unui spatiu suplimentar. </bloc"-uote>
</body> </html>
vezi acest e.emplu

Blocul preformatat
$ntr-un !loc <pre>...</pre>, semnificatia marca%elor HTML se pastreaza. 'locul <pre>...</pre> este indicat pentru a insera randuri vide 4 spatiu intre randurile succesive 6. (aracterul " spatiu " poate fi luat in considerare de !ro"ser daca este inserat e.plicit prin .nbsp/.
<html> <head> <title> 'loc </head> <body> Orar&<pre>
preformatat</title>
Ora*Niua B&<< C&<<

</body> </html>
Luni
Marti
Miercuri
)omana Matematica 1port Geo rafie $storie +izica </pre>
vezi acest e.emplu $ntr-un fisier HTML, caracterele "<" si ">" au o semnificatie speciala pentru !ro"ser. /le incadreaza comenzile si atri!utele de afisare a elementelor intr-o pa ina. ,aca dorim ca un fra ment de te.t sa contina astfel de caractere, acest fra ment tre!uie incadrat de una dintre perechile de etichete&

<"mp>...</"mp> 4 B< de caractere pe rand 6D <listi!$>...</listi!$> 4 8=< de caractere pe rand 6.
Aceste marca%e interpreteaza corect caracterele " spatiu ", " eticheta " si "()*L+ ". Te.tul afisat in pa ina este monospatiat.
.mp si listin </title>
#n fisier html standard arata astfel& <xmp> <html>
<head> <title> </title> </head> <body>
O pa ina 2e! ... E*!od-G E*htmlG </xmp> </body>

</html>
vezi acest e.emplu

Blocuri para$raf
(u a%utorul etichetei para raf <p> este posi!il trecerea la o linie noua si permite&

inserarea unui spatiu suplimentar inainte de !locul para rafD inserarea unui spatiu suplimentar dupa !locul para raf, daca se foloseste delimitatorul </p> 4acesta fiind optional6D alinierea te.tului cu a%utorul atri!utului align, avand valorile posi!ile " left ", " center " sau " ri ht ".
'locuri para raf</title>
Prima linie <p> Lini enerata de un para raf 4implicit para raful este aliniat la stan a6. <p align="right"> Para raf aliniat la dreapta.Para raf aliniat la dreapta.Para raf aliniat la dreapta.Para raf aliniat la dreapta. Para raf aliniat la dreapta.Para raf aliniat la dreapta.Para raf aliniat la dreapta. <p align="center"> Para raf aliniat in centru.Para raf aliniat in centru.Para raf aliniat in centru.Para raf aliniat in centru. Para raf aliniat in centru.Para raf aliniat in centru.Para raf aliniat in centru.
</body> </html>
vezi acest e.emplu

Blocuri de titlu
$ntr-un te.t titlurile 4 headers 6 de capitole pot fi introduse cu a%utorul etichetelor <h->. <h2>. <h(>. <h+>. <h/>. <h0>. Toate aceste etichete se refera la un !loc de te.t si tre!uie insotite de o eticheta de incheiere similara. Aceste etichete accepta atri!utul align pentru alinierea titlului !locului de te.t la stan a 4in mod presta!ilit 6 , in centru si la dreapta. Ta -ul <h-> permite scrierea unui titlu cu caractere mai mari si aldine, pe cand <h0> foloseste caracterele cele mai mici.
<html> <head> <title> 'locuri de titlu</title> </head> <body> <h1 align="center"> Titlu de marime 8 aliniat in centru </h1> <h+ align="right"> Titlu de marime = aliniat la dreapta. </h+> <h'> Titlu de marime ? aliniat la stan a 4implicit6 </h'> </body> </html>
vezi acest e.emplu

Li!ii ori&o!tale
$ntr-o pa ina 2e! pot fi inserate linii orizontale.acest lucru se face cu a%utorul etichetei <hr>. Pentru a confi ura o linie orizontala se utilizeaza urmatorele atri!ute ale etichetei <hr>&

permite alinierea liniei orizontala. 7alorile posi!ile sunt " left " ," center " si " ri ht "D width permite ale erea lun imii linieiD
align size
permite ale erea rosimii linieiD cand este prezent defineste o linie fara um!raD
noshade color
permite definirea culorii liniei.
<html> <head> <title> Linii orizontale</title> </head> <body> <h1 align="center"> Tipuri de linii
orizontale </h1> O linie implicita alinierea stan a, latime
8<<O, rosime = cu um!ra.

<hr>
#rmeaza o linie aliniata in centru , de latime @<O, rosime @ pi.eli , fara um!ra. <hr align="center" width="500" size="5" noshade> #rmeaza o linie aliniata la dreapta , de latime 8@< de pi.eli, rosime 8= pi.eli , de culoare rosie.
<hr align="right" width=150 size=1+ color="red"> </body> </html>
vezi acest e.emplu

Blocuri <ce!ter>
'locul introdus de etichetele <ce!ter>...</ce!ter> aliniaza centrat toate elementele pe care le contine.
<html> <head> <title> Linii orizontale</title> </head> <body> <center> <hr width=100> <hr width='00> <hr width=(00> <hr width=1000> <hr width=(00> <hr width='00> <hr width=100> </center> </body> </html>
vezi acest e.emplu

Blocuri <!obr>
'locul de te.t cuprins intre etichetele <!obr>...</!obr> va fi afisat pe o sin ura linie.
<html> <head> <title> 'locul Eno!rG</title> </head> <body> <nobr> O sin ura linie.O sin ura linie.O
sin ura linie.O sin ura linie.O sin ura linie. O sin ura linie.O sin ura linie.O sin ura linie.O sin ura linie.O sin ura linie. O sin ura linie.O sin ura linie.O sin ura linie.O sin ura linie.O sin ura linie.
</nobr> </body> </html>
vezi acest e.emplu

Blocuri <di1>
Modalitatea cea mai eficienta de delimitare si de formatare a unui !loc de te.t este folosirea delimitatorilor <di1>...</di1>. #n parametru foarte foarte util pentru sta!ilirea caracteristicilor unui !loc <di1> 4 diviziune 6 este align 4 aliniere 6. 7alorile posi!ile ale acestui parametru sunt&

" left " 4 aliniere la stan a 6D " center " 4 aliniere centrala 6D " ri ht " 4 aliniere la dreapta 6.
#n !loc <di1>...</di1> poate include alte su!!locuri. $n acest caz , alinierea precizata de atri!utul align al !locului are efect asupra tuturor su!!locurilor incluse in !locul <di1>D #n !loc <di1>...</di1> admite atri!utul " no"rap " care interzice intreruperea randurilor de catre !ro"ser.
'locul EdivG</title>
Aceasta linie este o linie normala.#rmatorul !loc este aliniat la dreapta.

<di1 align="right">
O sin ura linie.O sin ura linie.O sin ura linie.O sin ura linie.<br> O sin ura linie.O sin ura linie.O sin ura linie.O sin ura linie.<br> O sin ura linie.O sin ura linie.O sin ura linie.O sin ura linie.<br>
</di1> <di1 align="center">
'loc aliniat pe centru.'loc aliniat pe centru.<br> 'loc aliniat pe centru.'loc aliniat pe centru.<br> 'loc aliniat pe centru.'loc aliniat pe centru.<br>
</di1> </body> </html>
/. ,ma$i!i $ma inile sunt stocate in fisiere cu diverse formate. +ormatele acceptat de !ro"sere pentru fisierele ima ine sunt&

G$+ 4Graphics $nterchan e +ormat6 cu e.tensia . ifD PP/G 4Point Photo raphic /.perts Group6 cu e.tensia .%pe sau .%p D QPM 4Q Pi.Map6 cu e.tensia ..mpD Q'M 4Q 'itMap6 cu e.tensia ..!mD 'MP 4'itMap6 cu e.tensia .!mp 4numai cu $nternet /.plorer6D T$++ 4Ta ed $ma e +ile +ormat6 cu e.tensia .tif sau .tiffD
(ele mai raspandite formate sunt G$+4B!iti pentru o culoare, =@9 culori posi!ile6 si PP/G 4=?!iti pentru o culoare, 89AAA=89 de culori posi!ile6.
2dresa 34L a u!ei ima$i!i
#)L 4 "#niform )esourse Locator" F identificator unic al resursei 6 este un standard folosit in identificarea unica a unei resurse in $nternet. Toate ima inile cu care vom lucra vor avea adresa #)L e.primata in functie de directorul ce contine documentul HTML care face referire la ima ine. Pentru a insera o ima ine intr-o pa ina, se utilizeaza eticheta <im$> 4de la "ima e"Fima ine6. Pentru a putea fi identifica ima inea care va fi inserata, se utilizeaza un atri!ut al etichetei <im$> si anume src 4de la "source"Fsursa6. ,aca ima inea se afla in acelasi director cu fisierul HTML care face referire la ima ine, atunci adresa #)L a ima inii este formata numai din numele ima inii, inclusiv e.tensia.
<html> <head><title>
O pa ina cu ima ine</title></head> <body> O pa ina care contine o Te.t dupa ima ine.
ima ine
<img src="w&2gif"> </body> </html>
vezi acest e.emplu

he!arul si dime!sio!area u!ei ima$i!i
,aca doriti sa adau ati un chenar in %urul ima inii, folositi atri!utul border al etichetei <im$>. 7alorile acestor atri!ute sunt numere intre i pozitive. O ima ine are anumite dimensiuni pe orizontala si verticala, sta!ilite in momentul crearii ei. ,aca nu se cere altfel , aceste dimensiuni sunt respectate in momentul afisarii ei in pa ina 2e!. ,imensiuniile presta!ilite ale unei ima ini pot fi modificate prin intermediul atri!utelor width si height.
<html> <head><title>
$ma ine cu chenar si marit</title></head> <body> O ima ine cu chenar si de =<< pi.eli Q 8@ O <img src="w&2gif" border="5" width="&50" height="+50"> Te.t dupa ima ine.
</body> </html>
vezi acest e.emplu

2li!ierea u!ei ima$i!i
Alinierea unei ima ini se poate face prin intermediul atri!utului align care poate lua urmatorele valori&

" left " - aliniere la stan aD celelalte componente sunt dispuse pe in partea dreaptaD " ri ht " - aliniere la dreaptaD celelalte componente sunt dispuse pe in partea stan aD " top " - aliniere deasupraD partea de sus a ima inii se aliniaza cu partea de sus a te.tului ce precede ima ineaD " middle " - aliniere la mi%locD mi%locul ima inii se aliniaza cu linia de !aza a te.tului ce precede ima inea. " !ottom " - aliniere la !azaD partea de %os a ima inii se aliniaza cu linia de !aza a te.tului. Alinieri&
<html> <head><title> Alinierea unei ima ini</title></head> <body> <br> Pe verticala& <img src="w&2gif" align="top">
La mi%loc& <img src="w&2gif" align="center"> Pos& <img src="w&2gif" align="bottom"> Te.t dupa ima ine.
</body> </html>
vezi acest e.emplu

2li!ierea te"tului i! 5urul ima$i!ii
Atri!utele hspace si 1space precizeaza distanta in pi.eli pe orizontala , respectiv pe verticala, dintre ima ine si restul elementelor din pa ina. Atri!utul alt admite ca valoare un te.t care va fi afisat in locul ima inii.
<html> <head> <title>
Alinierea te.tului</title></head> <body> <h5>$ma ine aliniat la stan a incon%urata de te.t la distanta de >< de pi.eli. </h5><p> Te.t inainte de ima ine.Te.t inainte de ima ine.Te.t inainte de ima ine.Te.t inainte de ima ine. Te.t inainte de ima ine.Te.t inainte de ima ine.Te.t inainte de ima ine.Te.t inainte de ima ine.
<img src="w&2gif" align="left" hspace="&0" 1space="&0" alt="3ni1ersitatea de 4ord 5aia 6are">
Te.t dupa ima ine.Te.t dupa ima ine.Te.t dupa ima ine.Te.t dupa ima ine.Te.t dupa ima ine. Te.t dupa ima ine.Te.t dupa ima ine.Te.t dupa ima ine.Te.t dupa ima ine.Te.t dupa ima ine.
</body> </html>
vezi acest e.emplu

,ma$i!i pe!tru fo!dul u!ei pa$i!i
O ima ine poate fi utilizata pentru a sta!ili fondul unei pa ini 2e!. $n acest scop se foloseste atri!utul bac"ground al etichetei <body>, avand ca valoare adresa #)L a ima inii. $ma inea se multiplica pe orizontala si pe verticala pana umple intre ul ecran.
<html> <head><title> Pa ina cu ima ine de fond</title></head> <body bac"ground="w&2gif"> 8<br>=<br>><br>?<br> @<br>9<br>A<br>B<br> C<br> </body> </html>
vezi acest e.emplu

,ma$i!i folosite ca le$aturi
O le atura 4lin56 introduce in pa ina 2e! o zona activa. /fectuand clic5 cu !utonul mouse-ului pe aceasta zona in !ro"ser se va incarca o alta pa ina. Pentru a utiliza ima inea "u!m8.%p " drept le atura catre pa ina inde..html utilizam sinta.a&
<a href ="index#+2html"><img src= "w&2gif"></a>
$n mod presta!ilit ima inea utilizata pe post de zona activa este incon%urata de un chenar avand culoarea unei le aturi. ,aca sta!ilim pentru atri!utul border al etichetei <im$> < acest chenar dispare.
<html> <head><title> $ma ini folosite ca le aturi</title></head> <body><h5>$ma folosite ca le aturi</h5> Te.t inainte de ima ine.<a href="index#+2html"><img src="w&2gif"></a>
ini
Te.t dupa ima ine.

</body> </html>
vezi acest e.emplu

3tili&ari speciale ale ima$i!ilor
$ma inile pot fi utilizate pentru a o!tine efecte deose!ite intr-o pa ina "e!. Printre aceste utilizari speciale putem enumera& 8. Linii orizontale formate cu a%utorul ima inilor . =. 1im!oluri speciale pentru elementele unei liste neordonate 4 vezi 6.
0. Le$aturi La aturile 4lin5-urile6 reprezinta partea cea mai importanta a unei pa ini 2e!. /le transforma un te.t o!isnuit in hipertext sau hiperlegatura, care premite trecerea rapida de la o informatie aflata pe un anumit server la alta informatie memorata pe un alt server aflat oriunde in lume. Le aturile sunt zone active intr-o pa ina 2e!, adica zone de pe ecran sensi!ile la apasarea !utonului stan al mouse-ului.
6 le$atura catre o pa$i!a aflata i! acelasi director
O le atura catre o pa ina aflata in acelasi director se formeaza cu a%utorul etichetei <a> 4de la "anchor"Fancora6. Pentru a preciza pa ina indicata de le atura se utilizeaza un atri!ut al etichetei <a> numit href, care ia valoare numele fisierului HTML aflat in acelasi director. Nona activa care devina sensi!ila la apasarea !utonului stan al mouse-ului este formata din te.tul cuprins intre etichetele <a>...</a>. Prezenta etichtetei de sfarsit </a> este o!li atorie.
<html> <head> <title> (omutarea intre doua pa </head> <body> <h&>Pa ina 8 </h&> <a href="leg7ex+2html">
ini</title>
Lin5 catre pa ina = </a>

</body> </html>
vezi acest e.emplu

<html> <head> <title> (omutarea intre doua pa </head> <body> <h&>Pa ina = </h&> <a href="leg7ex12html"> Lin5 catre pa ina 8 </a> </body> </html>
ini</title>
vezi acest e.emplu

6 le$atura catre o pa$i!a aflata pe acelasi disc local
,aca pa ina referita se afla pe acelasi disc local, dar intr-un alt director atunci pentru a preciza pozitia ei in structura de directoare se poate folosi adresarea relativa.
<html> <head> <title> (omutarea intre doua pa ini aflate pe acelasi </head> <body> <h&>Pa ina > </h&> <a href="22/exemple/list/listex7112html"> Lin5 catre o pa ina cu liste </a> </body> </html>
disc local</title>
vezi acest e.emplu

6 le$atura catre u! site particular
$n e.emplul urmator se utilizeaza adresa #)L www2netscape2com care incarca pa ina de start din site-ul firmei Hetscape (orporation.
<html> <head> <title> Lin5 catre site-ul firmei Hetscape</title> </head> <body> <h&>Lin5 catre site-ul firmei Hetscape </h&> <a href="http8//www2netscape2com"> Hetscape (orporation </a> </body> </html>
vezi acest e.emplu
2!core
$ntr-o pa ina foarte lun a pot e.ista puncte de reper catre care se definesc le aturi. O ancora se defineste de asemenea prin eticheta <a>. Pentru a defini ancora se utilizeaza atri!utul name care primeste ca valoare un nume atri!uit ancorei 4de e.emplu "le 8"6. Pentru a insera o le atura catre "le 8" definita in aceeasi pa ina se utilizeaza eticheta <a> avand atri!utul href de valoare ";le 8". Pentru a introduce o le atura catre o ancora definita in alt document 4alta pa ina6 aflat in acelasi director, atri!utul href primeste o valoare de forma "numeRfisier.html;numeRancora".
<html> <head> <title> Ancore definite in acelasi document si in alt doocument</title> </head> <body> <h&>Ancore definite in acelasi document si in alt document </h&> <a href="%ancora1"> Lin5 catre ancora 8 </h&> <a href="22/22/legaturi2php%anc"> Lin5 catre o ancora din alt document </a> <br> 8<br>=<br>><br>?<br> @<br>9<br>A<br>B<br> C<br>8<<br>88<br>8=<br> 8><br>8?<br>8@<br>89<br> 8A<br>8B<br>8C<br>=<<br> =8<br>==<br>=><br>=?<br> <a name="ancora1">ancora 8 </body> </html>
vezi acest e.emplu

2!core defi!ite pri! atributul id
Atri!utul id este un atri!ut universal ,adica poate fi atasat oricarui element al unei pa ini 2e!. Acest atri!ut va inlocui complet atri!utul name, care putea fi atasat numai anumitor elemente. Atri!utul id primeste ca valoare un nume 4de e.emplu "id8"6 care identifica in mod unic un element. Atri!utul id poate fi utilizat pe post de ancora intr-o pa ina 2e! conform sinta.ei&
<eticheta id = "id1"> 222 </eticheta> <a href = "%id1" >Lin5 catre elementul "id8" </a>
unde "eticheta" poate fi orice element . /.emplul anterior arata astfel cu eticheta id.
2le$erea culorilor pe!tru le$aturi
$n mod presta!ilit se utilizeaza trei culori pentru le aturi&
o culoare pentru le aturile nevizitate 4nu s-a efectuat nici un clic pe ele6
o culoare pentru le aturile vizitate 4s-a efectuat cel putin un clic pe ele6 o culoare pentru le aturile active 4deasupra carora se afla mouse-ul la un moment dat6.
Aceste atri!ute pot fi sta!ilite cu a%utorul a trei atri!ute ale etichetei <body>& o lin" pentru le aturile nevizitateD o 1lin" pentru le aturile vizitateD
o alin"
pentru le aturile active.
7alorile pe care le pot lua aceste atri!ute sunt culori definite prin nume sau conform standardului )G'.
<html> <head> <title> (ulori pentru la aturi</title> </head> <body lin"="blue" 1lin"="green" alin"="red"> <h&>1etarea culorilor pentru lin5-uri&<br>rosu pentru le vizitate si al!astru pentru le aturi nevizitate </h&> <a href=leg7ex12html> Lin5 catre pa ina 8 <br> <a href=leg7ex+2html> Lin5 catre pa ina = <br> <a href=leg7ex)2html> Lin5 catre pa ina 88 </a> </body> </html>
aturi active, verde pentru le aturi
vezi acest e.emplu

3tili&area postei electro!ice
$ntr-o pa ina 2e! se poate afla le aturi care permit lansarea in e.ecutie a aplicatiei de e.pediere a mesa%elor electronice. Pentru aceasta se utilizeaza in constructia adresei #)L serviciul $nternet mailto8 urmat de o adresa e-mail valida. Pentru ca e.emplul urmator sa functioneze tre!uie ca&

pe calculator sa fie instalat o aplicatie de e.pediere a mesa%elor electrionice 4Outloo5 /.press pe calc. 2indo"s , Pine pe calc. #ni.6D adresa sa fie valida si calculatorul sa fie conectat la $nternet.
<html> <head> <title> /.pediere de mesa%e electronice</title> </head> <body> <h&>/.pediere de mesa%e electronice</h&><br> <a href="mailto8a7bsz9yahoo2com">
Mesa%e catre autorul pa inii

</body> </html>
vezi acest e.emplu

Le$aturi catre fisiere oarecare
O pa ina 2e! poate contine le aturi catre orice tip de fisiere aflate pe orice servere din $nternet. Pentru aceasta se utilizeaza eticheta <a> avand valoarea atri!utului href e ala cu adresa #)L a fisierului destinatie. Atunci cand se efectueaza clic pe le atura din e.emplul urmator !ro"serul se deschide o caseta de dialo - +ile do"nload - care va permite&

sa salvati pe discul local fisierul sa lansati in e.ecutie aplicatia capa!ila sa interpreteze corect fisierele de tipul respectiv
<html> <head> <title> Le aturi catre fisiere oarecare</title> </head> <body> <h&>Le aturi catre fisiere oarecare</h&><br> <a href="fisier2zip">
Lin5 catre fisierul fisier.zip

</body> </html>
vezi acest e.emplu

2tributul title
Atri!utul title apartine etichetei <a> si comanda aparitia unei mici ferestre in pa ina 2e! cand mouse-ul se afla pe o le atura, fereastra in care este afisata valoarea data acestui atri!ut. Acest atri!ut are astfel menirea de a furniza informatii suplimentare despre semnificatia unei le aturi.
<html> <head> <title> Atri!utul title</title> </head> <body> <h&>Atri!utul title</h&><br> <a href="mailto8a7bsz9yahoo2com" title="adresa mea de e#mail">
Mesa%e catre autorul pa inii

</body> </html>
vezi acest e.emplu
Le$aturi catre fisiere de su!et
1unetele pot fi stocate in fisiere in diverse formate&

A#*m-la" cu e.tensia .auD A$++*A$+( cu e.tensiile .aiff, .aifD 2A7/*2A7 cu e.tensia ."avD MP/G Audio cu e.tensia .mpe =, sau .mp=D M$,$ cu e.tensia .mid sau .midiD
O le atura catre un fisier de sunet se realizeaza folosind eticheta <a> destinata le aturilor catre orice tip de fisiere, unde atri!utul href va avea valoarea e ala cu adresa #)L a fisierului de sunet. ,e e.emplu&
<a href="numefisier2au">Lin5 Le$aturi catre fisiere 1ideoclipuri
catre fisierul de sunet</a>
7ideoclipurile sunt stocate in fisiere diverse formate.+ormatele si e.tensiile corespunazatoare pentru fisierele utiliza!ile in pa inile 2e! sunt urmatoarele&

MP/G cu e.tensia .mpe sau mp D Suic5Time cu e.tensia .movD A7$ cu e.tensia .avi.
O le atura catre un fisier de sunet se realizeaza folosind eticheta <a> destinata le aturilor catre orice tip de fisiere, unde atri!utul href va avea valoarea e ala cu adresa #)L a fisierului videoclip. ,e e.emplu&
<a href="numefisier2a1i">Lin5
catre fisierul videoclip</a>
7. Liste #nul din cele mai o!isnuite elemente din documentele cu mai multe pa ini este un set de definitii, referinte sau inde.uri. Glosarele sunt e.emple clasice in acest sensD cuvintele sunt listate in ordine alfa!etica, urmate de definitii ale termenilor respectivi. $n HTML, intrea a sectiune a unui losar va fi estoinata printr-o lista de definitii, care este inclusa intr-o pereche de marca%e de lista de definitii& <dl>...</dl> 4de la "definition list" F lista de definitii6.
O!servatii& - #n termen al listei este initiat de eticheta <dt> 4de la "definition term" F termen definit6D - ,efinitia unui termen este initiata de eticheta <dd> 4de la "definition description" F descrierea definitiei6D - ,efinitia unui termen incepe pe o linie noua si este indentataD
<html> <head><title>liste.R8</title></head> <body><h1 align="center">O lista de definitii</h1><hr> <dl>
Glosar de termeni de 2orld 2ide 2e! <dt><b>h-perte.t</b> <dd>- o interconectare 2e! de informatii de tip te.t, in care orice cuvant sau fraza poate face le atura catre un alt punct din document sau catre un alt document <dt><b>date</b> <dd>- flu.ul nesfarsit de materiale care apar pe $nternet, spre deose!ire de informatii care sunt date cu un anumit inteles sau valoare <dt><b>informatie</b> <dd>- su!-setul de date care are efectiv semnificatie si care este util la momentul curent
</dl> </body> </html>
vezi acest e.emplu

Liste !eordo!ate
O lista neordonata este un !loc de te.t delimitat de etichetele corespondente <ul>...</ul> 4" ul " vine de la " unordered list " F lista neordonata6. +iecare element al listei este initiat de eticheta <li> 4list item6. Lista va fi indentata fata de restul pa inii 2e! si fiecare element al listei incepe pe un rand noua.
<html> <head><title>liste.R=</title></head> <body><h1 align="center">O lista neordonata</h1><hr>
Glosar de termeni de 2orld 2ide 2e! <ul>(ulori uzuale disponi!ile prin nume <li>'lac5 <li>2hite <li>)ed <li>Green <li>'lue <li>Tello" <li>Purple <li>A:ua
</ul> </body> </html>
vezi acest e.emplu Ta -urile <ul> si <li> pot avea un atri!ut type care sta!ileste caracterul afisat in fata fiecarui element al listei. 7alorile posi!ile al acestui atri!ut sunt&
o
"circle" 4cerc6
"disc" 4disc plin6 4valoarea presta!ilita6D "s:uare" 4patrat6
Listele neordonate pot fi im!ricate pe mai multe niveluri

<html> <head><title>liste.R></title></head> <body><h1 align="center">O lista neordonata
de liste neordonate</h1><hr> Glosar de termeni de 2orld 2ide 2e! <ul>/lemente si atri!ute a unei pa ini HTML <li>+rameset <ul>Atri!ute& <li>cols <li>ro"s <li>!order </ul> <li>+rame <ul>Atri!ute& <li>src <li>name <li>scrollin </ul>
</ul> </body> </html>
vezi acest e.emplu

Liste ordo!ate
O lista ordonata de elemente este un !loc de te.t delimitat de etichetele corespondente <ol>...</ol> 4" ol " vine de la " ordered list " F lista ordonata6. +iecare element al listei este initiat de eticheta <li> 4list item6. Lista va fi indentata fata de restul pa inii 2e! si fiecare element al listei incepe pe un rand noua.
<html> <head><title>liste.R?</title></head> <body><h1 align="center">O lista ordonata</h1><hr> <ol>(ulori uzuale disponi!ile prin nume <li>'lac5 <li>2hite <li>)ed <li>Green <li>'lue <li>Tello" <li>Purple <li>A:ua </ol> </body> </html>
vezi acest e.emplu Ta -urile <ol> si <li> pot avea un atri!ut type care sta!ileste tipul de caractere utilizate pentru ordonarea listei.7alorile posi!ile sunt&

" A " pentru ordonare de tipul A , ' , ( , , etc. 4 litere mari 6D " a " pentru ordonare de tipul a , ! , c , d etc. 4 litere mici 6D " $ " pentru ordonare de tipul $ , $$ , $$$ , $7 etc. 4 cifre romane mari 6D " i " pentru ordonare de tipul i , ii , iii , iv etc. 4 cifre romane mici 6D " 8 " pentru ordonare de tipul 8 , = , > , ? etc. 4 cifre ara!e - optiune presta!ilita 6D
#rmatorul e.emplu este o lista ordonata cu cifre romane
<html> <head><title>liste.R@</title></head> <body><h1 align="center">O lista ordonata cu cifre romane</h1><hr> <ol type=":">(ulori uzuale disponi!ile prin nume <li>'lac5 <li>2hite <li>)ed <li>Green <li>'lue <li>Tello" <li>Purple <li>A:ua </ol> </body> </html>
vezi acest e.emplu Ta -ul <ol> poate avea un atri!ut start care sta!ileste valoarea initiala a secventei de ordonare.7aloarea acestui atri!ut tre!uie sa fie un numar intre pozitiv. #rmatorul e.emplu este o lista ordonata cu litere mari, incepand de la valoarea (.
<html> <head><title>liste.R9</title></head> <body><h1 align="center">O lista ordonata cu litere mari, incepand (</h1><hr> <ol type=" " start="&">(ulori uzuale disponi!ile prin nume <li>)ed <li>Green <li>'lue <li>Tello" <li>Purple <li>A:ua </ol> </body> </html>
de la valoarea
vezi acest e.emplu Ta -ul <li> poate avea un atri!ut 1alue care satileste valoare pentru elementul respectiv al listei. 7aloarea acestui atri!ut tre!uie sa fie un numar intre pozitiv 4vezi urmatorul e.emplu6.
<html> <head><title>liste.RA</title></head> <body><h1 align="center">O lista ordonata avand itemi <ol start="&">)epetati urmatorii pasi ai al oritmului <li>salvati fisierulD <li 1alue="!">incarcati fisierul in !ro"serD <li>schim!ati !ro"serul utilizat <li>incarcati din nou fisierul </ol> </body> </html>
setati individual</h1><hr>
vezi acest e.emplu Listele ordonate pot fi im!ricate intre ele sau cu liste neordonate, ca in e.emplul urmator.
<html> <head><title>liste.RB</title></head> <body><h1 align="center">O lista ordonata
de liste ordonate si neordonate</h1><hr>
<ol>#n sistem informatic include& <li>Hard"are& <ol> <li>placa de !aza <li>procesor <li>memorie <li>harddis5 </ol> <li>1oft"are& <ul> <li>Linu. <li>2indo"s <li>O1*= <li>#ni. </ul> <li>1oft"are de aplicatie& <ul type="disc"> <li>7isual(JJ <li>Pava <li>1SL <li>(orel,ra" </ul> </ol> </body> </html>
vezi acest e.emplu O lista de meniuri este un !loc delimitat de etichete corespondente <me!u>...</me!u>. +iecare element al listei este initiat de eticheta <li> 4 list item 6. (ele mai multe !ro"sere afiseaza lista de meniuri ca pe o lista neordonata. O lista de directoare este un !loc delimitat de etichete corespondente <dir>...</dir> 4de la " director "6. +iecare element al listei este initiat de eticheta <li> 4 list item 6. (ele mai multe !ro"sere afiseaza lista de directoare ca pe o lista neordonata.
4Hu se recomanda utilizarea acestori tipuri de liste6. 3tili&ari speciale ale listelor
,aca intr-o lista, in loc de elementele acesteia introduse prin <li>, se insereaza un !loc de te.t, aceasta va fi indentat 4 intocmai ca elementele unei liste6.
<html> <head><title>liste.RC</title></head> <body><h1>#n !loc de te.t indentat</h1><hr> <ol> #n !loc de te.t indentat. #n !loc de te.t indentat.
#n !loc de te.t indentat. #n !loc de te.t indentat. #n !loc de te.t indentat. #n !loc de te.t indentat. #n !loc de te.t indentat. #n !loc de
te.t indentat. #n !loc de te.t indentat.

</ol> </body> </html>
vezi acest e.emplu $n e.emplul urmator lista de definitii are itemii <dt> si <dd> multipli.
<html> <head><title>liste.R8<</title></head> <body><h1 align="center">O lista de definitii <dl>Pro ram <dt><b>Luni</b> <dt><b>Marti</b> <dt><b>Miercuri</b> <dd><i>Ora C.<<.</i>$nsciere <dd><i>Ora 88.<<.</i>Audieri <dd><i>Ora 8>.><.</i>)aspunsuri </dl> </body> </html>
speciala</h1><hr>
vezi acest e.emplu #ltimul e.emplu este o lista neordonata personalizata care utilizeaza pe post de elemente ima ini si te.te.
<html> <head><title>liste.R88</title></head> <body><h1>O lista personalizata</h1><hr> <ul>Tipuri de masini 7ol5s"a en sunt&<br> <img src="images/reddot2gif">Golf<br> <img src="images/reddot2gif">Petta<br> <img src="images/reddot2gif">Passat<br> <img src="images/reddot2gif">'ora<br> <img src="images/reddot2gif">(orrado<br> <img src="images/reddot2gif">Transporter<br> </body> </html>
8. Tabele Ta!elele ne permit sa cream o retea dreptun hiulara de domenii, fiecare domeniu avand propriile optiuni pentru culoarea fondului, culoarea te.tului, alinierea te.tului etc. Pentru a insera un ta!el se folosesc etichetele corespondente <table>...</table>. #n ta!el este format din randuri. Pentru a insera un rand intr-un ta!el se folosesc etichetele <tr>...</tr> 4 de la
" ta!le ro" "F rand de ta!el 6.+olosirea etichetei de sfarsit </tr> este optionala. #n rand este format din mai multe celule ce contin date. O celula de date se introduce cu eticheta <td>..</td>.
<html> <head><title>ta!ele.R8</title></head> <body><h1 align=center>#n ta!el simplu format <table> <tr> <td>cell 88</td> <td>cell 88</td></tr> <tr> <td>cell =8</td> <td>cell ==</td></tr> <tr> <td>cell >8</td> <td>cell >=</td></tr> <tr> <td>cell ?8</td> <td>cell ?=</td></tr> </table> </body> </html>
din ? linii si = coloane</h1><hr>
vezi acest e.emplu $n mod presta!ilit, un ta!el nu are chenar. pentru a adau a un chenar unui ta!el, se utilizeaza un atri!ut al etichetei <tabel> numit border. Acest atri!ut poate primi ca valoare orice numar intre 4 inclusiv < 6 si reprezinta rosimea in pi.eli a chenarului ta!elului. ,aca atri!utul border nu este urmata de o valoare atunci ta!elul va avea o rosime presta!ilita e ala cu 8 pi.el, o valoare e ala cu < a rosimii semnifica a!senta chenarului. (and atri!utul border are o valoare nenula chenarul unui ta!el are un aspect tridimensional.
<html> <head><title>ta!ele.R=</title></head> <body><h1 align=center>#n ta!el simplu cu chenar</h1><hr> <table border="'"> <tr> <td>cell 88</td> <td>cell 88</td></tr> <tr> <td>cell =8</td> <td>cell ==</td></tr> <tr> <td>cell >8</td> <td>cell >=</td></tr> <tr> <td>cell ?8</td> <td>cell ?=</td></tr> </table> </body> </html>
vezi acest e.emplu

2li!ierea tabelului
Pentru a alinia un ta!el intr-o pa ina 2e! se utilizeaza atri!utul align al etichetei <table>, cu urmatoarele valori posi!ile& " left " 4 valoarea presta!ilita 6, " center " si "ri ht ". Alinierea este importanta pentru te.tul ce incon%oara ta!elul. Astfel &
daca ta!elul este aliniat stan a 4 <table align="left"> 6, atunci te.tul care urmeaza dupa punctul de inserare al ta!elului va fi dispus in partea dreapta a ta!elului.
daca ta!elul este aliniat dreapta 4 <table align="right"> 6, atunci te.tul care urmeaza dupa punctul de inserare al ta!elului va fi dispus in partea stan a a ta!elului. daca ta!elul este aliniat pe centru 4 <table align="center"> 6, atunci te.tul care urmeaza dupa punctul de inserare al ta!elului va fi afisat pe toata latimea pa inii, imediat su! ta!el.
<html> <head><title>ta!ele.R></title></head> <body><h1 align=center>#n ta!el aliniat la
dreapta</h1><hr> Te.t inainte de ta!el. Te.t inainte de ta!el. Te.t inainte de ta!el. Te.t inainte de ta!el. Te.t inainte de ta!el. Te.t inainte de ta!el. Te.t inainte de ta!el. Te.t inainte de ta!el. Te.t inainte de ta!el. Te.t inainte de ta!el. Te.t inainte de ta!el. Te.t inainte de ta!el. Te.t inainte de ta!el. Te.t inainte de ta!el. Te.t inainte de ta!el. Te.t inainte de ta!el. Te.t inainte de ta!el. Te.t inainte de ta!el. Te.t inainte de ta!el. Te.t inainte de ta!el. Te.t inainte de ta!el. Te.t inainte de ta!el. Te.t inainte de ta!el. Te.t inainte de ta!el. Te.t inainte de ta!el. Te.t inainte de ta!el. Te.t inainte de ta!el. Te.t inainte de ta!el.
<table border="0" align="right"> <tr> <td>cell 88</td> <td>cell 88</td></tr> <tr> <td>cell =8</td> <td>cell ==</td></tr> </table>
Te.t dupa ta!el.Te.t dupa ta!el.Te.t dupa ta!el.Te.t dupa ta!el.Te.t dupa ta!el.Te.t dupa ta!el. Te.t dupa ta!el.Te.t dupa ta!el.Te.t dupa ta!el.Te.t dupa ta!el.Te.t dupa ta!el.Te.t dupa ta!el. Te.t dupa ta!el.Te.t dupa ta!el.Te.t dupa ta!el.Te.t dupa ta!el.Te.t dupa ta!el.Te.t dupa ta!el. Te.t dupa ta!el.Te.t dupa ta!el.Te.t dupa ta!el.Te.t dupa ta!el.Te.t dupa ta!el.Te.t dupa ta!el. Te.t dupa ta!el.Te.t dupa ta!el.Te.t dupa ta!el.Te.t dupa ta!el.Te.t dupa ta!el.Te.t dupa ta!el. Te.t dupa ta!el.Te.t dupa ta!el.Te.t dupa ta!el.Te.t dupa ta!el.Te.t dupa ta!el.Te.t dupa ta!el.
</body> </html>
vezi acest e.emplu ,aca schim!am alinierea ta!elului la centru atunci e.emplul anterior va arata asa sau la stan a atunci va arata asa. ,istanta dintre ta!el si celelalte elemente din pa ina 2e! poate fi sta!ilita cu a%utorul atri!utelor hspace si 1space al etichetei <table>. 7aloarea atri!utului hspace poate fi orice numar pozitiv, inclusiv <, si reprezinta distanta pe orizontala dintre ta!el si celelalte elemente ale pa inii 2e!. 7aloarea atri!utului 1space poate fi orice numar pozitiv, inclusiv <, si reprezinta distanta pe verticala dintre ta!el si celelalte elemente ale pa inii 2e!. Aceste atri!ute functioneaza numai cu Hetscape (ommunicator. /.emplul cu aceste atri!ute asiti aici.
9efi!irea culorilor de fo!d pe!tru u! tabel
(uloarea de fond se sta!ileste cu a%utorul atri!utului bgcolor, care poate fi atasat intre ului ta!el prin eticheta <table>, unei linii prin eticheta <tr> sau celule de date prin eticheta <td>.
7alorile pe care le poate primi bgcolor sunt cele cunoscute pentru o culoare. ,aca in ta!el sunt definite mai multe atri!ute bgcolor, atunci prioritatea este urmatoarea& <td>, <tr>, <table> 4 cu prioritate cea mai mica 6.
<html> <head><title>ta!ele.R?</title></head> <body><h1 align=center>#n ta!el simplu colorat</h1><hr> <table border="&" bgcolor="green"> <tr> <td>verde 88</td> <td bgcolor="red">rosu 88</td></tr> <tr bgcolor="blue"> <td>al!astru =8</td> <td bgcolor="yellow"> <tr bgcolor="cyan"> <td>cell >8</td> <td>cell >=</td></tr> <tr> <td>cell ?8</td> <td bgcolor="white">cell ?=</td></tr> </table> </body> </html>
al!en ==</td></tr>
vezi acest e.emplu (uloarea te.tului din fiecare celula se pote sta!ili cu a%utorul e.presiei& <font color="1aloare">222</font>.
9ime!sio!area celulei u!ui tabel
,istanta dintre doua celule vecine se defineste cu a%utorul atri!utului cellspacing al etichetei <table>.7alorile acestui atri!ut pot fi numere intre i pozitive, inclusiv <, si reprezinta distanta in pi.eli dintre doua celule vecine. 7alorea presta!ilita a atri!utului cellspacing este =.
<html> <head><title>ta!ele.R@</title></head> <body><h1 align=center>#n ta!el fara chenar de celule alipite</h1><hr> <table cellspacing="0"> <tr> <td bgcolor="gray"> ri 88</td> <td bgcolor="red">rosu 8=</td></tr> <tr bgcolor="blue"> <td>al!astru =8</td> <td bgcolor="yellow"> al!en ==</td></tr> </table> </body> </html>
vezi acest e.emplu ,istanta dintre mar inea unei celule si continutul ei poate fi definita cu a%utorul atri!utului cellpadding al etichetei <table>.7alorile acestui atri!ut pot fi numere intre i pozitive, si reprezinta distanta in pi.eli dintre celule si continutul ei. 7alorea presta!ilita a atri!utului cellpadding este 8.
<html> <head><title>ta!ele.R9</title></head> <body><h1 align=center>#n ta!el de celule <table border="0" cellpadding="+0">
mari</h1><hr>
<tr> <td> ri 88</td> <td>rosu 8=</td></tr> <tr> <td>al!astru =8</td> <td> al!en ==</td></tr> </table> </body> </html>
vezi acest e.emplu

9ime!sio!area u!ui tabel
,imensiunile unui ta!el - latimea si inaltimea - pot fi sta!ilite e.act prin intermediul a doua atri!ute, width si height, ale etichetei <table>. 7alorile acestor atri!ute pot fi&

numere intre i pozitive reprezentand latimea respectiv inaltimea in pi.eli a ta!eluluiD numere intre i intre 8 si 8<<, urmate de semnul O, reprezentand fractiunea din latimea si inaltimea totala a pa inii.
<html> <head><title>ta!ele.RA</title></head> <body><h1 align=center>#n ta!el de de =<< pi.eli <table border="0" width="+00" height="500"> <tr> <td>cell 88</td> <td>cell 8=</td></tr> <tr> <td>cell =8</td> <td>cell ==</td></tr> </table> </body> </html>
Q @< O</h1><hr>
vezi acest e.emplu $n e.emplul urmator se utilizeaza un truc care permite afisarea intr-o pa ina 2e! a unui te.t pozitionat in centrul pa inii.
<html> <head><title>ta!ele.RB</title></head> <body><h1 align=center>#n te.t centrat intr-o <table width="1000" height="1000"> <tr> <td align="center"> <h+>Te.t centrat.</h+> </table> </body> </html>
pa ina</h1>
vezi acest e.emplu

Titlul u!ui tabel
#nui ta!el i se poate atasa un titlu cu a%utorul etichetei <captio!> 4 de la "ta!le caption" F titlu ta!el 6. Aceasta eticheta tre!uie plasata in interiorul etichetelor <table>...</table>, dar nu in interiorul
etichetelor <tr> sau <td> Titlul unui ta!el poate fi aliniat cu a%utorul atri!utului align al etichetei <captio!> care poate lua una dintre valorile&

" !ottom " 4 su! ta!el 6D " top " 4 deasupra ta!elului 6D " left " 4 la stan a ta!elului 6D " ri ht " 4 la dreapta ta!elului 6.
<html> <head><title>ta!ele.RC</title></head> <body><h1 align=center>#n ta!el cu titlu</h1> <table border="0"><caption align="top">Masini <tr><td>Mercedes </td><td>(itroen </td><td>Pa uar </td></tr> <tr><td>'M2 </td><td>7olvo </td><td>)enault </td></tr> </table> </body> </html>
vezi acest e.emplu

ap de tabel
#n ta!el poate avea celule cu semnificatia de cap de ta!el. Aceste celule sunt introduse de eticheta <th> 4 de la " ta!el header " F cap de ta!el 6 in loc de <td>. Toate atri!ute care pot fi atasate etichetei <td> pot fi de asemenea atasate etichetei <th>. (ontinutul celulelor definite cu <th> este scris cu caractere aldine si centrat.
<html> <head><title>ta!ele.R8<</title></head> <body><h1 align=center>#n ta!el cu titlu si cap de ta!el</h1> <table border="0"><caption align="bottom">Preturile masinii <tr><th>Pret</th> <th>(itroen</th> <th>Pa uar</th> <th>'M2</th> <th>7olvo</th></tr> <tr><th>$n dolari</th> <td>@<<<</td> <td>8<<<<<</td> <td>@<<<<</td> <td>B<<<<</td></tr> <tr><th>$n lei</th> <td>8@<<<</td> <td>><<<<<</td> <td>8@<<<<</td> <td>=?<<<<</td></tr>
</table> </body> </html>
vezi acest e.emplu

2li!ierea co!ti!utului u!ei celule
Alinierea pe orizontala a continutului unei celule se face cu a%utorul atri!utului align care poate lua valorile&

" left " 4 la stan a 6D " center " 4 centrat , valoarea presta!ilita 6D " ri ht " 4 la dreapta 6D " char " 4 alinierea se face fata de un caracter 6.
Alinierea pe verticala a continutului unei celule se face cu a%utorul atri!utului 1align care poate lua valorile&

" !aseline " 4 la !aza 6D " !ottom " 4 %os 6D " middle " 4 la mi%loc, valoarea presta!ilita 6D " top " 4 sus 6.
Aceste atri!ute pot fi atasate atat etichetei <tr> pentru a defini tuturor elementelor celulelor unui rand, cat si etichetelor <td> si <th> pentru a sta!ili alinierea te.tului intr-o sin ura celula.
<html> <head><title>ta!ele.R88</title></head> <body><h1 align=center>#n ta!el avand continutul celulelor aliniate</h1> <table border="0" width="500" height="500"> <tr align="right"><td>Aici</td> <td>alinierea</td><td>este centru</td><td>dreapta</td></tr> <tr> <td align="left">stan a</td> <td align="center">centru</td><td 1align="top">sus</td> <td 1align="bottom">%os</td></tr> <tr align="left"><td>aici</td><td>alinierea</td> <td>este centru</td><td>stan 4implicita6</td></tr> </table> </body> </html>
vezi acest e.emplu

9ime!sio!area e"acta a celulelor u!ui tabel
,imensiunea unei celule de tip <td> sau de tip <th> pot fi sta!ilite e.act cu a%utorul a doua atri!ute ale acestor etichete& width pentru latime si height pentru inaltime. 7alorile posi!ile ale acestor atri!ute sunt&

numere intre i pozitive 4 inclusiv < 6 reprezentand dimensiunea in pi.eli a latimii, respectiv a inaltimii unei celuleD procente din latimea , respectiv inaltimea ta!elului.
<html> <head><title>ta!ele.R8=</title></head> <body><h1 align=center>#n ta!el cu celule de 8<<.8@< de pi.eli</h1><hr> <table border="0"> <tr> <td width="100" height="150">cell 88</td> <td width="100" height="150">cell 88</td></tr> <tr> <td width="100" height="150">cell =8</td> <td width="100" height="150">cell ==</td></tr> </table> </body> </html>
vezi acest e.emplu

Tabele de forme oarecare
#n ta!el tre!uie privit ca o retea dreptun hiulara de celule.(u a%utorul a doua atri!ute ale etichetelor <td> si <th>, o celula se poate e.tinde peste celule vecine. Astfel&

e.tinderea unei celule peste celulele din dreapta ei se face cu a%utorul atri!utului colspan, a carui valoare determina numarul de celule care se unifica. e.tinderea unei celule peste celulele dedesu!t se face cu a%utorul atri!utului rowspan, a carui valoare determina numarul de celule care se unifica.
1unt posi!ile e.tinderi simultane ale unei celule pe orizontala si pe verticala. $n acest caz , in etichetele <td> si <th> vor fi prezente am!ele atri!ute colspan si rowspan.
<html> <head><title>ta!ele.R8></title></head> <body><h1 align=center>#n ta!el simplu cu chenar</h1><hr> <table border="0"> <tr> <td rowspan="&">cell 88</td><br>cell =8E!rGcell >8</td> <td>cell 8=</td><td colspan="+" rowspan="&">cell 8> ,cell 8?</td><br>cell =>, cell =?<br>cell >>, cell >?</td></tr> <tr> <td>cell ==</td></tr> <tr> <td>cell >=</td></tr> <tr> <td>cell ?8</td> <td colspan="&">cell ?=,cell ?>,cell ??</td></tr> </table>
</body> </html>
vezi acest e.emplu

2tributul " !o:rap "
Atri!utul nowrap apartine elementelor <td> si <th> D el interzice intreruperea unei linii de te.t.Astfel , in ta!el pot aparea coloane cu o latime oricat de mare.
<html> <head><title>ta!ele.R8?</title></head> <body><h1 align=center>#n ta!el cu celule de latime mare</h1><hr> <table border="0"> <tr> <td>cell 88</td> <td>cell 8=</td></tr> <tr> <td nowrap>cell =8</td> <td>cell == este foarte lata,aceasta celula lata.</td></tr> </table> </body> </html>
este foaret
vezi acest e.emplu

elule 1ide ale u!ui tabel
daca un ta!el are celule vide, atunci aceste celule vor aparea in ta!el fara un chenar de delimitare. $n scopul de a afisa un chenar pentru celule vide se utilizeaza urmatoarele trucuri&

dupa <td> se pune ;!bsp<D dupa <td> se pune <br>.
(aracterul ;!bsp< 4 no !rea5 space 6 este de fapt caracterul spatiu.#n spatiu introdus prin imLntermediul acestui caracter nu va fi i norat de !ro"ser.
<html> <head><title>ta!ele.R8@</title></head> <body><h1 align=center>#n ta!el cu celule vide</h1><hr> <table border="0"> <tr> <td>cell 88<td> <td>cell 8=</td><td>cell 8></td></tr> <tr> <td>Un!spD</td> <td></td></tr> </table> </body> </html>
vezi acest e.emplu

2tribute ,!ter!et ="plorer pe!tru tabele
#rmatoarele atri!ute ale etichetei <table> functioneaza cu $nternet /.plorer ?.< , @.<, dar nu cu Hetscape (ommunicator ?.@&
permite sta!ilirea unei ima ini pentru fondul unui ta!el.Primeste ca valoare adresa #)L a ima inii folosite pentru fondD bordercolor permite sta!ilirea culorii pentru chenarul unui ta!elD
bac"ground bordercolorlight bordercolordar"
permite sta!ilirea culorii pentru chenarul >, al unui ta!elD
permite sta!ilirea culorii pentru chenarul >, al unui ta!elD
<html> <head><title>ta!ele.R89</title></head> <body><h1 align=center>Atri!ute "$nternet /.plorer"</h1><hr> <table border="5" bac"ground="22/22/images/cauta2gif" cellspacing=15 bordercolor="maroon" bordercolodar"="red"> <tr bgcolor="yellow"> <td>cell 88</td> <td>cell 8=</td><td>cell 8></td></tr> <tr bgcolor="yellow"> <td>Un!spD</td><td></td> <td></td></tr> </table> </body> </html>
vezi acest e.emplu

*rupuri de coloa!e
'locul <col$roup>...</col$roup> permite definirea unui rup de coloane. Atri!utele acceptate de <col$roup> sunt&
span determina numarul de coloane dintr-un rupD width determina o latime unica pentru coloanele din align
rupD
determina un tip unic de aliniere pentru coloanele din rup.
/.emplu& <colgroup span="&" width="100"></colgroup> $ntr-un !loc <col$roup>, coloanele pot avea confi urari diferite daca se utilizeaza elementul <col>, care admite atri!utele&

identifica acea coloana din rup pentru care se face confi urarea.,aca lipseste, atunci coloanele sunt confi urate in ordineD width determina o latime pentru coloana identificata prin spanD
span align
determina o aliniere pentru coloana identificata prin span.
<html> <head><title>ta!ele.R8A</title></head> <body><h1 align=center>Grupuri de coloane</h1><hr> <table width="'00" cellspacing=10> <colgroup> <col width="100" align=right> <col width="100" align=center> <col width="+00" align=right> </colgroup> <tr> <td 1align=top>Te.t in prima coloana.Te.t in prima coloana.Te.t in prima coloana.
Te.t in prima coloana.</td> <td 1align=top>Te.t in coloana doua.Te.t in coloana doua.Te.t in coloana doua.Te.t in coloana doua.</td> <td 1align=top>Te.t in coloana a treia.Te.t in coloana a treia.Te.t in coloana a treia.Te.t in coloana a treia.</td></tr>
</table> </body> </html>
vezi acest e.emplu

2tributele frame si rules
Atri!utul frame al etichetei <table> permite specificarea partilor din chenarul unui ta!el care vor fi afisate. 7alorile posi!ile ale acestui atri!ut sunt&

void - elimina toate muchiile e.terioare ale ta!eluluiD a!ove - afiseaza o muchie in partea superioara a cadrului ta!eluluiD !elo" - afiseaza o muchie in partea inferioara a cadrului ta!eluluiD hsides - afiseaza cate o muchie in partea superioara si inferioara cadrului ta!eluluiD lhs - afiseaza o muchie in partea din stan a a cadrului ta!eluluiD rhs - afiseaza o muchie in partea din dreapta a cadrului ta!eluluiD vsides - afiseaza o muchie in partea din stan a si din dreapta a cadrului ta!eluluiD !o. - afiseaza o muchie pe toate laturile cadrului ta!eluluiD !order - afiseaza o muchie pe toate laturile cadrului ta!eluluiD
Atri!utul rules al etichetei <table>permite ale erea unor delimitatori pentru celulele unui ta!el. 7alorile posi!ile sunt& none - elimina toate muchiile interioare ale ta!eluluiD roups - afiseaza muchii orizontale intre toate rupurile din ta!el.Grupurile sunt specificate prin elementele <thead>. <tbody>. <tfoot>si <col$roup>.

ro"s - afiseaza muchii orizontale intre toate liniile ta!eluluiD cols - afiseaza muchii verticale intre toate coloanele ta!eluluiD all - afiseaza muchii intre toate liniile si coloaneleD
<html> <head><title>ta!ele.R8B</title></head> <body><h1 align=center>Atri!utele frames si rules</h1> <table width="'00" frame=box rules=rows cellspacing=10> <tr> <td>cell 88</td> <td>cell 8=</td><td>cell 8></td></tr>
<tr> <td>cell </table> </body> </html>
=8</td> <td>cell ==</td><td>cell =></td></tr>
vezi acest e.emplu

#ubblocurile u!ui tabel
$n specificatiile HTML ?.<, continutul unui ta!el poate fi impartit in su!!locuri prin elementele&

<thead><tr><td>...</thead> 4 un sin ur rand 6D <tfoot><tr><td>...</tfoot> 4 un sin ur rand 6D <tbody><tr><td>...</tbody> 4 oricate randuri 6D
$ntr-un ta!el e.ista un sin ur su!!loc de tipul <thead> si un sin ur su!!loc de tipul <tfoot>, dar pot e.ista mai multe su!!locuri de tip <tbody>.
>. )erestre i! HTML +erestrele sau 4cadrele6 ne permit sa definim in fereastra !ro"serului su!ferstre in care sa fie incarcate documente HTML diferite. +erestrele sunt definite intr-un fisier HTML special , in care !locul <body>...</body> este inlocuit de !locul <frameset>...</frameset>. $n interiorul acestui !loc, fiecare cadru este introdus prin eticheta <frame>. #n atri!ut o!li atoriu al etichetei <frame> este src, care primeste ca valoare adresa #)L a documentului HTML care va fi incarcat in acel frame. ,efinirea cadrelor se face prin impartirea ferstrelor 4si a su!ferestrelor6 in linii si coloane&

impartirea unei ferstre intr-un numar de su!ferestre de tip coloana se face cu a%utorul atri!utului cols al etichetei <frameset> ce descrie acea fereastraD impartirae unei ferestre intr-un numar de su!ferestre de tip linie se face cu a%utorul atri!utului rows al etichetei <frameset> ce descrie acea fereastraD valoare atri!utelor cols si rows este o lista de elmente separate prin vir ula , care descriu modul in care se face impartirea.
/lementele listei pot fi& 8. un numar intre de pi.eliD =. procente din dimensiunea ferestrei 4numar intre 8 si CC terminat cu O6D >. nM care inseamna ! parti din spatiul ramasD
/.emplu 8& colsF=<<,M,@<O,M inseamna o impartire in ? su!ferestre , dintre care prima are =<< pi.eli , a treia ocupa %umatate din spatiul total disponi!il ,iar a doua si a patra ocupa in mod e al restul de spatiu ramas disponi!il. /.emplu =& colsF=<<,8M,@<O,=M inseamna o impartire in ? su!ferestre , dintre care prima are =<< pi.eli , a treia ocupa %umatate din spatiul total disponi!il iar a doua si a patra ocupa in mod e al restul de spatiu ramas disponi!il, care se imparte in trei parti e ale , a doua fereastra ocupand o parte , iar a patra ocupand = parti. O!servatii& - daca mai multe elemente din lista sun confi urate cu ? , atunci spatiul disponi!il ramas pentru ele se va imparti in mod e al. - o su!fereastra poate fi un cadru 4folosind EframeG6in care se va incarca un document HTML sau poate fi impartita la randul ei la alte su!fereste 4folosind EframesetG6.
<html> <head><title>fere.R8</title></head> <frameset cols=";$;"> <frame src="p12html"> <frame src="p+2html"> </frameset> </html>
vezi acest e.emplu $n e.emplul urmator este creata o pa ina 2e! cu trei cadre orizontale.Pentru al doilea cadru valoarea atri!utului src este adresa #)L a unei ima ini.
<html> <head><title>fere.R=</title></head> <frameset rows="100$;$100"> <frame src="p12html"> <frame src="tiled2gif"> <frame src="p&2html"> </frameset> </html>
vezi acest e.emplu $n e.emplul urmator este creata o matrice de ? cadre 4= . =6.Pentru a realiza acest lucru, se folosesc simultan cele doua atri!ute cols si rows.
<html> <head><title>fere.R></title></head> <frameset rows=";$;" cols=";$;"> <frame src="p12html"> <frame src="p+2html"> <frame src="p&2html"> <frame src="p'2html">
</frameset> </html>
vezi acest e.emplu $n e.emplul urmator este creata o pa ina 2e! cu trei cadre mi.te.Pentru a o crea se procedeaza din aproape in aproape. Mai intai, pa ina este impartita in doua su!ferestre de tip coloana, dupa care a doua su!fereastra este impartita in doua su!ferestre de tip linie.
<html> <head><title>fere.R?</title></head> <frameset cols="+00$;"> <frame src="p12html"> <frameset rows=";$;"> <frame src="p+2html"> <frame src="p&2html"> </frameset> </frameset> </html>
vezi acest e.emplu

ulori pe!tru che!arele cadrelor si dime!sio!area che!arului u!ui cadru
Pentru a sta!ili culoarea chenarului unui cadru se utilizeaza atri!utul bordercolor. Acest atri!ut primeste ca valoare un nume de culoare sau o culoare definita in conformitate cu modelul de culoare )G'.Atri!utul bordercolor poate fi atasat atat etichetei <frameset> pentru a sta!ili culoarea tuturor chenarelor cadrelor incluse,cat si etichetei <frame> pentru a sta!ili culoarea chenarului pentru un cadru individual. Atri!utul border al etichetei <frameset> permite confi urarea latimii chenarelor tuturor cadrelor la un numar dorit de pi.eli. 7aloarea presta!ilita a atri!utului border este de @ pi.eli. O valoare de < pi.eli va defini un cadru fara chenar.
<html> <head><title>fere.R@</title></head> <frameset cols="+00$;" bordercolor="green" border="15"> <frame src="p12html"> <frameset rows=";$;"> <frame src="p+2html" bordercolor="blue"> <frame src="p&2html"> </frameset> </html>
vezi acest e.emplu Pentru a o!tine cadre fara chenar se utilizeaza !orderF"<". $n mod presta!ilit, chenarul unui cadru este afisat si are aspect tridimensional.Afisarea chenarului unui cadru se poate dezactivata daca se utilizeaza atri!utul frameborder cu valoare "no". Acest atri!ut poate fi atasat atat etichetei <frameset> 4dezactivarea fiind vala!ila pentru toate cadrele incluse6 cat si etichetei <frame> 4dezactivarea fiind vala!ila numai pentru un sin ur cadru6.
7alorile posi!ile ale atri!utului frameborder sunt& "-es" -echivalent cu 8D "no" -echivalent cu <D
<html> <head><title>fere.R@R8</title></head> <frameset cols="+00$;" border="0"> <frame src="p12html"> <frameset rows=";$;"> <frame src="p+2html"> <frame src="p&2html"> </frameset> </html>
vezi acest e.emplu

<html> <head><title>fere.R@R=</title></head> <frameset cols="+00$;" frameborder="no"> <frame src="p12html"> <frameset rows=";$;"> <frame src="p+2html"> <frame src="p&2html"> </frameset> </html>
vezi acest e.emplu

Bare de defilare
Atri!utul scrolling al etichetei <frame> este utilizat pentru a adau a unui cadru o !ara de derulare care permite navi area in interiorul documentului afisat in interiorul cadrului. 7alorile posi!ile sunt&

"-es" - !arele de derulare sunt adau ate intotdeaunaD "no" - !arele de derulare nu sunt utiliza!ileD "auto" - !arele de derulare sunt vizi!ile atunci cand este necesar
<html> <head><title>fere.R9</title></head> <frameset cols=";$;$;"> <frame src="p2html" scrolling="yes" noresize> <frame src="p2html" scrolling="no" noresize> <frame src="p2html" scrolling="auto" noresize> </frameset> </html>
vezi acest e.emplu Atri!utul noresize al etichetei <frame> 4fara nici o valoare suplimentara6 daca este prezent, inhi!a posi!ilitatea presta!ilita a utilizatorului de a redimensiona cadrul cu a%utorul mouse-ului.
Po&itio!area docume!tului i!tr@u! cadru
Atri!utele marginheight si marginwidth ale etichetei <frame> permit sta!ilirea distantei in pi.eli dintre continutul unui cadru si mar inile verticale, respectiv orizontale ale cadrului. 7alori posi!ile& -numar de pi.eliD -procent din latimea, respectiv din inaltimea cadruluiD
<html> <head><title>fere.RA</title></head> <frameset cols=";$;$;"> <frame src="p2html"> <frame src="p2html" marginheight=+0> <frame src="p2html" marginwidth=+0> </frameset> </html>
vezi acest e.emplu /.ista !ro"sere care nu suporta cadre pentru aceasta se utilizeaza in interiorul !locului <frameset> eticheta <!oframes>. ,aca pro ramul de navi are stie sa interpreteze cadre, va i nora ce se aseste in aceasta portiune, iar daca nu, materialul cuprins in zona <!oframes>...</!oframes> va fi sin urul care va fi inteles si afisat. ,e precizat este faptul ca intre <!oframes> ... </!oframes> se pot introduce orice alte ta -uri HTML 4inclusiv ima ini, hiperlin5-uri, ta!ele6.
adre i!ter!e
#n cadru intern este specificat prin intermediul !locului <iframe>...</iframe>. #n cadru intern se insereaza intr-o pa ina 2e! in mod asemanator cu o ima ine sau in modul in care se specifica marca%ul <frame>, asa cum rezulta din urmatorul e.emplu&
<iframe src="ferex7)2html" height='00 width=500> </iframe>
$n acest caz, am specificat ca doresc o fereastra de cadru intern care are ?<Odin inaltimea si @<O din latimea pa inii curente. Atri!utele aceptate de eticheta <iframe> sunt in parte preluate de la etichetele <frame> si <frameset>,cum ar fi& src$border$frameborder$bordercolor$marginheight$
marginwidth$scrolling$name$noresize/ sau de la eticheta <im$> 1space$hspace$align$width$height/ <html> <head><title>fere.RB</title> </head> <body> <a href="p12html" target="icad"> +isierul8</a><br> <a href="p+2html" target="icad">
+isierul=</a><br> <a href="p&2html" target="icad"> +isierul></a><br> <a href="p2html" target="icad"> Home</a><br> <center><iframe width="!00" height="500" border=+ bordercolor=red name="icad" src="p2html"> ,aca vedeti acest te.t inseamna ca !ro"serul dumnevoastranu suporta cadre interne. Ar fi prefera!il sa reveniti, folosind Hetscape Havi ator versiune ?.< 4*ulterioara6 sau $./.plorer ?.<. 4*ulterioara6 <a href="p02html">Pa ina fara cadre interne</a> </iframe></center>
</body> </html>
vezi acest e.emplu

Ti!te pe!tru le$aturi
$n mod presta!ilit, la efectuarea unui clic pe o le atura noua pa ina 4catre care indica le atura6 o inlocuieste pe cea curenta in aceeasi fereastra 4acelasi acdru6. Acest comportament se poate schim!a in doua moduri&
prin plasarea in !locul <head>...</head> a unui element E!aseG care precizeaza,prin atri!utul target numele ferestrei 4cadrului6 in care se vor incarca toate pa inile noi referite de le aturile din pa ina curenta conform sinta.ei&
<base target="nume7ferastra/frame7de7baza"> prin plasarea in eticheta <a> a atri!utului target, care
precizeaza numele ferestrei 4cadrului6 in care se va incarca pa ina nou referita de le atura, conform sinta.ei&
<a href="legatura" target="nume7fereastra/frame">222</a>
O!servatie& - daca este prezent atat un atri!ut target in <base> cat si un atri!ut target in <a>, atunci cele precizate de atri!utul target din <a> sunt prioritare. Humele unui cadru este sta!ilit prin atri!utul name al etichetei <frame> conform sinta.ei&
<farme name="nume7frame">
$n e.emplul urmator este prezentata o pa ina 2e! cu doua cadre.Toate le aturile din cadrul 8 incarca pa inile in cadrul =.
<html> <head><title>fere.RCRframes</title></head> <frameset cols="+00$;"> <frame src="left2html" name="left"> <frame src="p2html" name="main"> </frameset> </html> <html> <head><title>fere.RCRleft</title> </head> <body> <a href="p12html" target="main"> +isierul8</a><br> <a href="p+2html" target="main">
+isierul=</a><br> <a href="p&2html" target="main"> +isierul></a><br><br> <a href="p12html" target="7blan""> +is8 intr-o fereastra noua</a><br><br> <a href="p12html" target="7self"> +is8 in fereastra curenta</a><br><br> <a href="p2html" target="main"> Home</a><br>
</body> </html>
vezi acest e.emplu

Aalori pe!tru atributul tar$et
Atri!utul target al etichetei<frame> accepta anumite valori predefinite de o valoare deose!ita pentru creatorii de pa ini 2e!.aceste valori sunt&

"7self" 4incarcarea noii pa ini are loc in cadrul curent6D "7blan"" 4incarcarea noii pa ini are loc intr-o fereastra noua anonima6D "7parent" 4incarcarea noii pa ini are loc in cadrul parinte al cadrului curent daca acesta e.ista, altfel are loc in fereastra !ro"serului curent6D "7top" 4incarcarea noii pa ini are loc in fereastra !ro"serului ce contine cadrul curent6D
-B. )ormulare #n formular este un ansam!lu de zone active alcatuit din !utoane ,casete de selectie,campuri de editare etc. +ormularele va asi ura construirea unori pa ini 2e! care permit utilizatorilor sa introduca efectiv informatii si sa le transmita serverului.+ormularele pot varia de la o simpla caseta de te.t ,pentru introducerea unui sir de caractere pe post de cheie de cautare - element caracteristic tuturor motoarelor de cautaredin 2e! - pana la o structura comple.a ,cu multiple sectiuni ,care ofera facilitati puternice de transmisie a datelor. O sesiune cu o pa ina "e! ce contine un formular cuprinde urmatoarele etape& -. #tilizatorul completeaza formularul si il e.pedieaza unui server. 2. O aplicatie dedicata de pe server analizeaza formularul completat si 4daca este necesar6 stocheaza datele intr-o !aza de date. (. ,aca este necesar serverul e.pedieaza un raspuns utilizatorului. #n formular este definit intr-un !loc delimitat de etichetele corespondente <form> si </form>.
2tribute ese!tiale ale eleme!tului <form>
/.ista doua atri!ute esentiale ale elementului <form>.
-. Atri!utul action precizeaza ce se va intampla cu datele formularului odata ce acestea a%un la destinatie.,e re ula ,valoarea atri!utului action este adresa #)L a unui script aflat pe un srver 222 care primeste datele formularului ,efectueaza o prelucrare a lor si e.pedieaza catre utilizator un raspuns.
<form action="http8//www2yahoo2com/cgi#bin/nume7fis2cgi">2
1cript-urile pot fi scrise in lim!a%ele Perl,(,PHP,#ni. shell. 2. Atri!utul method precizeaza metoda utilizata de !ro"ser pentru e.pedierea datelor formularului.1unt posi!ile urmatoarele valori&
4valoarea implicita6.$n acest caz ,datele din formular sunt adau ate la adresa #)L precizata de atri!utul actionD
get
- nu sunt permise cantitati mari de date 4ma.im 8 0!6 - intre adresa #)L si date este inserat un "V". ,atele sunt adau ate conform sinta.ei& nume7camp = 1aloare7camp. $ntre diferite seturi de date este introdus un "U". /.emplu& "http8//www2yahoo2com/cgi#bin/nume7fis2cgi<nume1 = 1aloare1.nume+ = 1aloare+"D
$n acest caz datele sunt e.pediate separat. 1unt permise cantitati mari de date 4ordinul M'6
post
Pentru ca un formular sa fie functional, tre!uie precizat ce se va intampla cu el dupa completarea si e.pediere. (el mai simplu mod de utilizare a unui formular este e.pedierea acestuia prin posta electronica 4e-mail6. Pentru aceasta se foloseste un atri!ut al etichetei <form> si anume action care primeste ca valoare " mailto& " concatenat cu o adresa valida de e-mail catre care se va e.pedia formularul completat.
3! formular cu u! camp de editare si u! buto! de e"pediere
Ma%oritatea elementelor unui formular sunt definite cu a%utorul etichetei <i!put>. Pentru a preciza tipul elementului se foloseste atri!utul type al etichetei <i!put>. Pentru un camp de editare, acest atri!ut primeste valoarea "te.t". Alte atri!ute pentru un element <i!put> sunt&

atri!utul name ,permite atasarea unui nume fiecarui element al formularului. atri!utul 1alue ,care permite atri!uirea unei valori initiale unui element al formularului.
#n !uton de e.pediere al unui formular se introduce cu a%utorul etichetei <i!put>, in care atri!utul type este confi urat la valoarea "su!mit".Acest element poate primi un nume prin
atri!utul name. Pe !uton apare scris "1u!mit Suer-" sau valoarea atri!utului 1alue ,daca aceasta valoare a fost sta!ilita.
<html> <head><title>+orm/.R8 </title></head> <body><h1> #n formular cu un camp de editare si un !uton de e.pediere</h1> <hr> <form action="mailto8xxxxx9xxx2com" method="post"> Humele&<input type="text" name="numele" 1alue="4umele si prenumele"><br> <input type="submit" 1alue="expedieaza"> </form></body> </html>
vezi acest e.emplu Pentru elementul EinputG de tipul camp de editare 4t-pe F "te.t"6 , alte doua atri!ute pot fi utile&

atri!utul size specifica latimea campului de editare depaseste aceasta latime ,atunci se e.ecuta automat o derulare acestui campD atri!utul maxlength specifica numarul ma.im de caractere pe care le poate primi un camp de editareD caracterele tastate peste numarul ma.im sunt i norate.
O!servatii& - daca atri!utul type lipseste intr-un element <i!put> , atunci campul respectiv este considerat in mod presta!ilit ca fiind de tip "te.t". - formularele cu un sin ur camp 4de tip te.t6 nu au nevoie de un !uton de e.pediere, datele sunt e.pediate automat dupa completarea si apasarea tastei /HT/).
Buto!ul 4eset
,aca un element de tip <i!put> are atri!utul type confi urat la valoarea "reset" ,atunci in formular se introduce un !uton pe care scrie ")eset". La apasarea acestui !uton ,toate elementele dinn formular primesc valorile presta!ilite 4definita odata cu formularul 6, chiar daca aceste valori au fost modificate de utilizator. #n !uton )eset poate primi un nume cu a%utorul atri!utului name si o valoare printr-un atri!ut 1alue. #n asemenea !uton afiseaza te.tul ")eset" daca atri!utul 1alue lipseste, respectiv valoarea acestui atri!ut in caz contar.
<html> <head><title>forme.R=</title></head> <body><h1>#n formular cu un !uton reset</h1> <hr> <form action="mailto8xxxxx9xxx2com" method="post"> $ntroduceti numele&<input type="text" name="nume" 1alue="4umele"><br> $ntroduceti prenumele&<input type="text" name="prenume" 1alue="=renumele"><br> <input type="reset" 1alue="sterge"> <input type="submit">
</form></body> </html>
vezi acest e.emplu

amp de editare de tip "pass:ord"
,aca se utilizeaza eticheta <i!put> avand atri!utul type confi urat la valoarea "pass"ord" , atunci in formular se int-roduce un element asemanator cu un camp de editare o!isnuit 4introdus prin t-peF"te.t"6. Toate atri!utele unui camp de editare raman vala!ile. 1in ura deose!ire consta in faptul ca acest camp de editare nu afiseaza caracterele in clar,ci numai caractere ?,care ascund de privirile altui utilizator aflat in apropiere valoarea introdusa intr-un asemenea camp. La e.pedierea formularului insa, valoarea tastata intr-un camp de tip "pass"ord" se transmite in clar.
<html> <head><title>forme.R></title></head> <body><h1>#n formular cu un !uton reset</h1> <hr> <form action="mailto8xxxxx9xxx2com" method="post"> Hume&<input type="text" name="nume" 1alue="4umele"><br> Prenume&<input type="text" name="prenume" 1alue="=renumele"><br> Pass"ord&<input type="password" name="parola" ><br> <input type="reset" 1alue="sterge"> <input type="submit" 1alue="trimite"> </form></body> </html>
vezi acest e.emplu

Butoa!e radio
'utoanele radio permit ale erea ,la un moment dat , aunei sin ure variante din mai multe posi!ile. 'utoanele radio se introduc prin eticheta <i!put> cu atri!utul type avand valoarea "radio".
<html> <head><title>forme.R?</title></head> <body><h1>#n formular cu !utoane radio</h1> <hr> <form action="mailto8xxxxx9xxx2com" method="post"> Ale eti se.ul&<input type="radio" name="sex" 1alue="b"><br> +emeiesc&<input type="radio" name="sex" 1alue="f"><br> <input type="reset"> <input type="submit"> </form></body> </html>
vezi acest e.emplu La e.pedierea formularului se va transmite una dintre perechile "se.F!" sau "se.Ff",in functie de ale erea facuta de utilizator.
asete de 1alidare
O caseta de validare 4chec5!o.6permite selectarea sau deselctarea unei optiuni. Pentru inserarea unei casete de validare se utilizeaza eticheta <i!put> cu atri!utul type confi urat la valoarea "chec5!o.". O!servatii& - fiecare caseta poate avea un nume definit prin atri!utul name. fiecare caseta poate avea valoarea presta!ilita "selectat" definita prin atri!utul chec"ed.
<html> <head><title>forme.R@</title></head> <body><h1>#n formular cu casete chec5!o.</h1> <hr> <form action="mailto8xxxxx9xxx2com" method="post"> Ale eti meniul&<br> Pizza <input type="chec"box" name="pizza" 1alue="o portie"> Hectar <input type="chec"box" name="nectar" 1alue="un pahar"> 'ere <input type="chec"box" name="bere" 1alue="o sticla"> (afea <input type="chec"box" name="cafea" 1alue="o ceasca"><br> <input type="reset"> <input type="submit"> </form></body> </html>
vezi acest e.emplu

asete de fisiere
$ntr-o pereche "name F value" a unui formular se poate folosi intre ul continut al unui fisier pe post de valoare. Pentru aceasta se insereaza un element <i!put> intr-un formular , cu atri!utul type avand valoarea "file" 4fisier6. Atri!utele pentru un element de tip caseta de fisiere&

atri!utul name permite atasarea unui nume atri!utul 1alue primeste ca valoare adresa #)L a fisierului care va fi e.pediat o data cu formularul. Aceasta valoare poate fi atri!uita direct atri!utului 1alue, se poate fi tastata intr-un camp de editare ce apare o data cu formularul sau poate fi selectata prin intermediul unei casete de tip +ile #pload sau (hoose +ile care apare la apasarea !utonului 'ro"se... din formularD atri!utul enctype precizeaza metoda utilizata la criptarea fisierului de e.pediat.7aloarea acestui atri!ut este "multipart*form-data".
<html> <head><title>forme.R9</title></head> <body><h1>#n formular cu caseta de fisiere</h1> <hr> <form action="mailto8xxxxx9xxx2com" method="post"> Ale eti fisierul&<input type="file" name="fisier" enctype="multipart/form# data"><br>
<input type="reset"> <input type="submit"> </form></body> </html>
vezi acest e.emplu

Liste de selectie
O lista de selectie permite utilizatorului sa alea a unul sau mai multe elemente dintr-o lista finita. Lista de selectie este inclusa in formular cu a%utorul etichetelor corespondente <select>si </select>. O lista de selectie poate avea urmatoarele atri!ute&

atri!utul name, care ataseaza listei un nume 4utilizat in perechile "nameFvalue" e.pediat serverului6D atri!utul size, care precizeaza 4printr-un numar intre pozitiv , valoarea presta!ilita fiind 86 cate elemente din lista sunt vizi!ile la un moment dat pe ecran 4celelalte devenind vizi!ile prin actionarea !arei de derulare atasate automat listei6.
/lementele unei liste de selectie sunt incluse in lista cu a%utorul etichetei <optio!>. ,oua atri!ute ale etichetei option se dovedesc utile&
atri!utul 1alue primeste ca valore un te.t care va fi e.pediat server-ului in perechea "nameFvalue"D daca acest atri!ut lipseste ,atunci catre server va fi e.pediat te.tul ce urmeaza dupa <optio!>D atri!utul selected 4fara alte valori6 permite selectarea presta!ilita a unui elem,ent al listei.
<html> <head><title>forme.RA</title></head> <body><h1>#n formular cu o lista de selectie</h1> <hr> <form action="mailto8xxxxx9xxx2com" method="post"> #niversitatea a!solvita&<br><br> <select name="uni1ersitate" size="&"> <option 1alue="5"> #niversitatea <option 1alue="3456" selected> #niversitatea de Hord 'aia Mare <option 1alue="3>>"> #niversitatea Technica din Timisoara <option 1alue="3>5"> #niversitatea Technica din 'rasov </select><br><br> <input type="reset"> <input type="submit"> </form></body> </html>
din (lu%
vezi acest e.emplu ,aca atri!utul size este e al cu 8 atunci lista de selectie arata asa.
Lista de selectie cu selectii multiple
O lista de selectie ce permite selectii multiple se creeaza intocmai ca o lista de selectie o!isnuita. $n plus , eticheta <select> are un atri!ut multiple 4fara alte valori6. (and formularul este e.pediat catre server pentru fiecare element selectat al listei care este se insereaza cate o pereche "nameFvalue" unde name este numele listei.
<html> <head><title>forme.RB</title></head> <body><h1>#n formular cu o lista de selectie ce accepta selectii multiple</h1> <hr> <form action="mailto8xxxxx9xxx2com" method="post"> Lim!i straine cunoscute&<br><br> <select name="limbi straine" size="5"> <option 1alue="e"> /n leza <option 1alue="f" selected> +ranceza <option 1alue="s"> 1paniola <option 1alue="i"> $taliana <option 1alue="r"> )usa <option 1alue="g"> Germana </select><br><br> <input type="reset"> <input type="submit"> </form></body> </html>
vezi acest e.emplu

ampuri de editare multili!ie
$ntr-un formular campuri de editare multilinie pot fi incluse cu a%utorul etichetei <te"tarea>. /ticheta are urmatoarele atri!ute&

atri!utul cols, care specifica numarul de caractere afisate intr-o linieD atri!utul rows, care specifica numarul de linii afisate simultanD atri!utul name, care permite atasarea unui nume campului de editare multilinieD atri!utul wrap, 4de la ""ord "rap"Ftrecerea cuvintelor pe randul urmator<, care determina determina comportamentul campului de editare fata de sfarsitul de linie. Acest atri!ut poate primi urmatoarele valori& a6 " off "D in acest caz&
o
intreruperea cuvintelor la mar inea dreapta a editorului se produce numai cand doreste utilizatorulD caracterul de sfarsit de linie este inclus in te.tul transmis serverului o data cu formularulD
!6 " hard "D in acest caz&

o
se produce intreruperea cuvintelor la mar inea dreapta a editorului D
caracterul de sfarsit de linie este inclus in te.tul transmis serverului o data cu formularulD
c6 " soft "D in acest caz&

o o
se produce intreruperea cuvintelor la mar inea dreapta a editorului D nu se include caracterul de sfarsit de linie in te.tul transmis serverului o data cu formularulD
<html> <head><title>forme.RC</title></head> <body><h1>#n formular cu un camp de editare multilinie</h1> <hr> <form action="mailto8xxxxx9xxx2com" method="post"> <textarea name="text multilinie" cols="&0" rows="5" wrap="off">
Prima linie din te.tul initial. A doua linie din te.tul initial. </textarea>
<input type="reset"> <input type="submit"> </form></body> </html>
vezi acest e.emplu

3! formular comple"
$n e.emplul urmator este prezentat un formular continand elemente prezentate anterior. (ampurile formularului sunt incluse in celule unui ta!el pentru a o!tine o aliniere dorita.
<html> <head><title>forme.R8<</title></head> <body><h1>#n formular comple.</h1> <hr> <center><table bgcolor="orange"> <form action="mailto8xxxxx9xxx2com" method="post"> <caption align="top">M/H$#</caption> <tr align=left><th>Humele& <td><input type="text" name="numele"> <tr align=left><th>Preumele& <td><input type="text" name="prenumele"> <tr align=left><th>Telefonul& <td><input type="text" name="telefonul"> <tr align=left><th>Ale eti pizza& <td><input type="chec"box" name="ciuperci">cu ciuperci <input type="chec"box" name="mexicana">me.icana <input type="chec"box" name="europeana">europeana <tr align=left><th>Ale eti plata&<td> <ul style="bac"ground#color8lightblue/"> <li><input type="radio" name="plata">cash <li><input type="radio" name="plata">card </ul> <tr align=left><th>(omentarii& <td> <textarea name="comentarii" cols="&0" rows="5" wrap="off"> $nserati aici aprecierile dumneavoastra le ate de calitatea serviciilor noastre </textarea> <tr align=left 1align=top><td> <input type="reset" 1alue="sterge"><td> <input type="submit"
1alue="expedieaza"> </form></table></body> </html>
vezi acest e.emplu

Butoa!e
$ntr-un formular pot fi afisate !utoane.(and utilizatorul apasa un !uton, se lanseaza in e.ecutie o functie de tratare a acestui eveniment. lim!a%ul HTML nu permite scrierea unor astfel de functii 4acest lucru este posi!il daca se utilizeaza lim!a%ele Pavascript sau Pava6. Pentru a insera un !uton intr-un formular , se utilizeaza eticheta <i!put> avand atri!utul type confi urat la valoarea "!utton". Alte doua atri!ute ale elementului "!utton" sunt&

atri!utul name, care permite atasarea unui nume !utonului atri!utul 1alue, care primeste ca valoare te.tul ce va fi afisat pe !uton.
#n !uton pentru lansarea in e.ecutie a unei actiuni poate fi introdus intr-un formular prin elementul <i!put> avand atri!utul type confi urat la valoarea "!utton", asa cum s-a vazut mai inainte. /.ista o a doua modalitate de a introduce intr-o pa ina 2e! un !uton de apasat, si anume prin intermediul !locului <butto!>...</butto!>. #n astfel de !uton poate fi inserat intr-un formular, in acest caz declansand actiuni le ate de acel formular, sau poate fi introdus oriunde in pa ina pentru initierea unor actiuni independente de formulare. Atri!utele posi!ile ale elementului "!utton" sunt&
name acorda elementului un numeD 1alue precizeaza te.tul care va fi afisat type
pe !utonD
precizeaza actiunea ce se va e.ecuta la apasarea !utonului daca acesta este inclus intr-un formular.7alorile posi!ile pentru acest atri!ut sunt& -"!utton" , -"su!mit" ,-"reset".
$n corpul !locului <butto!>...</butto!> se poate afla un te.t sau un marca% de inserare a unei ima ini. O!servatii finale& - elementul <form> poate avea un atri!ut target, care primeste ca valoare numele unei ferestre a !ro"serului in care va fi incarcat raspunsul trimis serverului 222 la e.pedierea unui formular. - toate elementele cuprinse intr-un formular pot avea un atri!ut disabled care permite dezactivarea respectivului element. - toate elementele de tip te.t cuprinse intr-un formular pot avea un atri!ut readonly care interzice modificarea continutului acestor elemente.
--. #tiluri 1tilurile pun la dispozitia creatorilor de site-uri noi posi!ilitati de personalizare a pa inilor 2e!. #n stil reprezinta un mod de a scrie un !loc de te.t 4 adica anumite valori pentru font, marime culoare, aliniere, distante fata de mar ini etc6. /.ista doua modalitati de a defini un stil&

sinta.a (11 4(ascadin 1t-le 1heets6D sinta.a Pavascript.
(ascadin 1t-le 1heets inseamna "foi in stilul cascada".

#tiluri dedicate
Aceste stiluri se aplica !locurilor de te.t pentru care sunt definite. ,e e.emplu&
<style> h1 ?text#align8center/ color8red/@ </style>
Toate titlurile care apar in f isier ca fiind de marime 8 vor fi de culoare rosie si centrate. ,aca dorim ca acelasi stil sa fie utilizat de catre mai multe elemente 4de e.. "h8", "h=", si "p"6 atunci se utilizeaza o lista acestor elemente, separate prin vir ula&
<style> h1$ h+$ p ?text#align8center/ color8red/@ </style> lase de stiluri
Aceste stiluri permit definirea unui stil eneral si folosirea lui oriunde este necesar. /.emplu& ,efinim o clasa de stiluri "ac" 4al!astru si centrat6 in interiorul !locului <style>...</style>, aflat la randul lui in !locul <head>...</head>&
<style> all2ac ?text#align8center/ color8blue/@ </style>
,aca dorim ca un titlu de marimea = sa foloseasca clasa de stiluri "ac" atunci scriem&
<h+ class = ac>Acesta
este un header de marime = al!astru si centrat</h+>
- "all" aflat in fata clasei de stiluri "ac" indica faptul ca aceasta clasa este aplica!ila tuturor !locurilor de te.t, atunci cand acest lucru este necesar. La utilizarea clasei de stiluri in cadrul unui element se foloseste atri!utul class avand ca valoare
numele clasei de stil. Acesta este un atri!ut universal adica este aplica!ila tuturor elementelor. O!servatii& In interiorul unui bloc <style>...</style>, comentariile sunt blocuri delimitate de /* si */ ( ca in C, C++, ava si avascript!" ,aca dorim ca o clasa de stiluri sa fie aplica!ila numai pentru anumite elemente ale documentului 4de e.emplu "p"6 atunci in consturctia va aparea acest element 4 de e.emplu "p.rc"6.
<html> <head><title>clasa de stiluri dedicata</title> <style> p2ac ?text#align8center/ color8blue/@ </style> </head> <body> <p>Acesta este un para raf normal <br> <p class=ac>Acesta este un para raf al!astru si centrat </body> </html>
vezi acest e.emplu

#tiluri " ide!tificate "
Toate elementele unui document admite un atri!ut universal numit id. Atri!utul id poate identifica stilul utilizat de un element. Pentru a utiliza un stil "identificat" procedati astfel&
in !locul <style>...</style> introduceti definitia stilului conform sinta.ei&

<style> %rosu ? color8 red @ </style>
in elementul in care se doreste utilizarea locala a acestui stil , folositi atri!utul id care primeste valoare numele stilului definit anterior. ,aca dorim ca un stil " identificat " sa fie aplica!il numai pentru anumite elemente ale documentului 4 de e.emplu "h="6 atunci in constructia selectorului va aparea acest element 4de e.emplu "h=;ac"6.
#tiluri i!@li!e
1tilurile in-line sunt definite chiar in eticheta ce initiaza!locul in care dorim sa se aplice aceste stiluri. Pentru aceasta se utilizeaza atri!utul universal style 4comun practic tuturor etichetelor ce par intr-un document HTML6. 7aloarea data atri!utului style este tocmai descrierea stilului, cuprinsa nu intre acolade I..K ci intre hilimele "...". ,e e.emplu&
<h+ style = " color8 red/ text#align8 center/">
Acest header de marimea = este de culoare rosie si este centrat.</h+> ,aca dorim utilizarea unui anumit st-le pentru un fra ment de te.t, atunci includem acest te.t intr-un !loc cu a%utorul delimitatorilor <spa!>...</spa!>, dupa care utilizam atri!utul style pentru eticheta <spa!>.
#tiluri defi!ite i! fisiere e"ter!e
1tilurile definite in interiorul unui !loc <style>...</style> pot fi transferate intr-un fisier e.tern e.istand astfel posi!ilitatea utilizarii lor in mai multe fisiere HTML. Pentru a utiliza un stil definit intr-un fisier e.tern se procedeaza astfel& 8. 1e creaza un fisier care sa contina numai descrierea stilurilor si se salveaza cu e.tensia "css sau "html. (ontinutul acestui fisier coincide cu continutul unui !loc <style>...</style> , fara ca acesti delimitatori sa fie inclusi. =. $n fisierul HTML care utilizeaza stilurile definite in fisierul creat la punctul 8 , se include in !locul <head>...</head> o eticheta <li!%>avand trei atri!ute.
o o o
atri!utul relcu valoarea "st-lesheet" atri!utul href avand ca valoare adresa #)L a fisierului creat la punctul 8 D atri!utul type cu valoarea "te.t*css".
1e utilizeaza titlurile definite in fisierul e.tern ca si cum ar fi definite in fisierul HTML curent intr-un !loc <style>...</style>.
Pseudoclase
Pseudoclasele se utilizeaza pentru personalizarea le aturilor. /le se definesc in !locul <style>...</style> sau intr-un fisier e.tern, conform sinta.ei&
a8 lin" ?color8 blac"/ font#size8 +0pt@ a8 acti1ate ?color8 blue/ font#style8 italic@ a8 1isited ?color8 cyan/ text#decoration8 none@
Pentru ca numai anumite le aturi sa utilizeze un stil se pot folosi urmatoarele doua metode&

a& lin5.(LA1A8 I...K com!inat cu Ea class F (LA1A8 hrefF" "G ...E*aG a& lin5;$,8 I...K com!inat cu Ea id F $,8 hrefF" "G ...E*aG
Atentie333 acest e.emplu lucreaza doar cu !ro"sere $nternet /.plorer ?.. sau mai mare3 $n !ro"sere cursorul mouse-ului are in eneral o forma simpla, luaind pe parcursul vizionarii pa inii respective ma.imum doua infatisari diferite& 8. Mana - atunci cand este pozitinat pe o le atura
=. 'ara verticala - atunci cand este pozitionat pe alt o!iect decat o le atura. Acestea insa sunt formele implicite. ,esi ur e.ista cazuri in care am dori ca !ro"ser-ul sa ai!a o alta forma decat una dintre acestea. La fel ca multe alte pro!leme care privesc modul in care o pa ina arata si aceasta isi aseste rezolvarea in folosirea (11, ca lim!a% de descriere a formei unui document. Proprietatea care estioneaza forma cursorului se numeste simplu& cursor si poate fi introdusa in orice element style al unui ta html. ,e e.emplu pentru o!tinerea unei ima ini a cursorului de tipul unei sa eti orientata /st-7est la trecerea mouse-ului peste un lin5 iata codul ce va tre!ui folosit&
< a href=" fisier2html" style=" cursor 8e#resize" " Aegatura< /a>
$ata deci cum va arata 4doar pentru $/ ?.. sau mai mare6& Le atura Hu este, insa sin urul e.emplu, in continuare aveti toate codurile pentru formele de cursor pe care le puteti folosi&
auto default e-resize hand help move n-resize
utilizeaza setarile implicite ale utilizatorului setarile implicite ale !ro"serului sa eata /st-7est mana semnul intre!arii cruce cu sa eti la capete sa eata sud-nord
crosshair creeaza o cruce
ne-resize sa eata 1ud7est - Hord/st n"-resize sa eata 1ud/st - Hord7est pointer s-resize mana sa eata Hord - 1ud
se-resize sa eata Hord7est - 1ud/st s"-resize sa eata Hord/st - 1ud7est te.t "-resize "ait !ara verticala din campurile de introducere a datelor sa eata /st-7est clepsidra
-(. Ta$@uri
Marca5e de ba&a
<HTML> </HTML> <H=29> </H=29> <T,TL=> </T,TL=> <B69C> </B69C> 'G(OLO) F culoare T/QTFculoare L$H0Fculoare 7L$H0Fculoare AL$H0Fculoare 'A(0G)O#H, F url <P> <Hn> <Hn> <)6DT> </)6DT> 1$N/Fn +A(/F#a,b# (OLO)Fs <B4> <P4=> </P4=> <E@@ @@> < =DT=4> </ =DT=4> <H4> 1$N/Fx
,efineste un fisier in format 2e! Antetul documentului Tilul documentului (orpul pa inii HTML (uloarea de fond a pa inii (uloarea te.tului pe pa inii (uloarea le aturiilor nevizitate din pa inii (uloarea le aturiilor vizitate din pa inii (uloarea le aturiilor pe durata clicului e.acutat de utilizator $ma inea de fond pentru pa ina Para raf Hivel de su!titlu al documentului 4n F 8-96 1pecifica atri!ute ale te.tului incadrat ,imensiunea te.tului este 8-A 1pecifica fontul& a, daca este disponi!il, sau b (uloarea te.tului& fie un nume de culoare , fie o valoare )G' Linie noua $nformatie preformatata (omenatriu HTML (entreaza materialul in pa ina )i la orizontala $naltimea ri lei in pi.eli
2$,THFx HO1HA,/ AL$GHFx (OLO)Fx <2> </2> H)/+Furl H)/+F$nume HameFnume
Latimea ri lei in pi.eli sau in procente ,ezactiveaza afisarea um!rei pentru ri la orizontala Alinierea ri lei orizontala in pa ina 4left, center, ri ht6 (uloarea ri lei orizontale4numai pentru $/6 Marca% de tip ancora )eferinta hiperte.t )eferinta catre o ancora interna ,efinitia unei ancore interne
Marca5e pe!tru liste
<99> <9L> </9L> <9T> <L,> <6L TTP/Ftip 1TA)TFx <3L TTP/Fforma
,escriere definitie Lista de tip definitie Termen de definitie /lement de lista Lista ordonata 4numerotata6 Tipul numerotarii. 7alori posi!ile& A, a, $, i, 8 Humarul de inceput al listei ordonate Lista neordonata 4marcata6 +orma marca%ului. 7alori posi!ile& circle, s:uare, disc.
)ormatarea caracterelor
<B> </B> <,> </,> <3> </3> <TT> </TT> < ,T=> </ ,T=> < 69=> </ 69=>
Afiseaza te.t cu caractere aldine Afiseaza te.t cu caractere cursive Afiseaza te.t su!liniat Te.t cu font monospatiu (itare !i!lio arfica Listin de pro ram
<=M> </=M> <FB9> </FB9> <#T46D*> </#T46D*> <A24> </A24> <B2#=)6DT 1$N/ F nG
1til lo ic de evidentiere Te.t de la tastatura /videntiere lo ica puternica Pro ram sau varia!ila 1pecifica dimensiunea implicita a fontului din pa ina
Marca5e pe!tru cadre
<)42M=#=T> </)42M=#=T> (OL1Fx )O21Fx 'O),/)Fx +)AM/'O),/) F x +)AM/1PA($HG F x <)42M=> 1)(Furl HAM/Fnume 1()OLL$HGFscrl +)AM/'O),/)Fx MA)G$HH/$GHTFx MA)G$H2$,THFx <D6)42M=#> </D6)42M=#> <,)42M=> 1)(Furl
,efinirea redactarii pa inii Humarul si marimea relativa a coloanelor Humarul si marimea relativa a liniilor 1pecifica starea "on" 4activa6 sau "off" 4inactiva6 pentru chenarul cadrului +)AM/1/T 48 sau <6 1pecifica marimea chenarului Marimea spatiului dintre doua cadre adiacente ,efinitia unui anumit cadru #)L-ul sursa pentru cadru Humele cadrului 4utilizat impreuna cu TA)G/TFnume ca parte componenta a marca%ului de tip ancora EaG ,efineste optiunea !arei de derulare.7alori posi!ile& on4activa6, off4inactiva6, auto 4automat6 Marimea chenarului din %urul cadrului 1patiul suplimentar de deasupra si dedesu!tul unui anumit cadru 1patiu suplimetar la stan a si la dreapta unui anumit cadru 1ectiunea de pa ina afisata pentru utilizatorii care nu pot vedea un cadru (adru intern 4numai pentru 4$/6 1ursa cadrului
HAM/Fs H/$GHTFx 2$,THFx
Humele ferestrei 4util pentru TA)G/T6 $naltimea cadrului in lo!at Latimea cadrului in lo!at
Marca5e pe!tru tabele
<T2BL=> </T2BL=> 'O),/)Fx (/LLPA,,$HGFx (/LL1PA($HGFx 2$,THFx +)AM/Fvaloare )#L/1Fvaloare 'O),/)(OLO) F culoare 'O),/)(OLO)L$GHT F culoare 'O),/)(OLO),A)0 F culoare AL$GHFleft AL$GHFright H1PA(/Fx 71PA(/Fx (OL1Fx < 6L*463P> </ 6L*463P> < 6L 2$,THFxG <TH=29> </TH=29> <B69C> </TB69C>
Ta!el HTML (henarul ta!elului 1patiul suplimentar in cadrul celulelor ta!elului 1patiul suplimentar intre celulele ta!elului Latimea impusa ta!elului A%ustarea fina a ta!elului A%ustarea fina a ri lelor ta!elului 1pecifica culoarea chenarului ta!elului (ea mai deschisa culoare din cele doua culori specificate (ea mai inchisa culoare din cele doua culori specificate Aliniaza ta!elul la mar inea din stan a a pa inii, iar te.tul cur e in partea dreapta Aliniaza ta!elul la mar inea din dreapta a pa inii, iar te.tul cur e in partea stan a 1patiu suplimetar pe orizontala in %urul ta!elului 1patiu suplimetar pe verticala in %urul ta!elului 1pecifica numarul de coloane ale unui ta!el ,efineste un set de definitii de coloane cu a%utorul marca%ului EcolG ,efineste latimea unei coloane e.primata in pi.eli ,efineste titlul ta!elului ,efineste corpul ta!elului
<T4 </T4> 'G(OLO)Fculoare AL$GHFaliniere <T9 </T9> 'G(OLO)Fculoare (OL1PAHFx )O21PAHFx AL$GHFaliniere 7AL$GHFaliniere 'A(0G)O#H,Furl HO2)AP AL$GHFbaseline AL$GHFcaracter AL$GHF%ustif&
Linie de ta!el 1pecifica culoarea de fond pentru intrea a linie Alinierea celulelor de pe linia curenta 4left, center, ri ht6 (elula de date a ta!elului 1pecifica culoarea de fond pentru celula de date Humarul de coloane pe care se intinde celula curenta de date Humarul de linii pe care se intinde celula curenta de date Alinierea materialului din cadrul celulei de date.7alori posi!ile& 4left, ri ht, center6 Alinierea pe verticala a materialului din cadrul celulei de date.7alori posi!ile& 4top, !ottom, middle6 1pecifica ima inea de fond pentru celula ta!elului Hu permite despartirea te.tului pe linii in cadrul unei celule Aliniaza celule de date cu linia de !aza a te.tului adiacent Aliniaza o coloana fata de un anumit carcater 4caracterul presta!ilit este "."6 Aliniaza atat mar inea din stan a cat si mar inea din dreapta a unui te.t
2dau$area ima$i!ilor
<,M* 1)(Furl ALTFtext AL$GHFaliniere H/$GHTFx
Marca%ul de introducere a ima inilor 1ursa fisierului rafic Te.tul alternativ de afisat, daca este necesar Alinierea ima inii in pa ina. 7alori posi!ile& top 4sus6, middle4in mi%loc6, !ottom 4%os6, left 4in stan a6, ri ht 4la dreapta6 $naltimea ima inii 4in pi.eli6
2$,THFx 'O),/)Fx H1PA(/Fx 71PA(/Fx
Latimea ima inii (henarul din %urul ima inii, atunci cand aceasta este utilizata ca hiperle atura 1patiul suplimentar pe orizontala din %urul ima inii 4in pi.eli6 1patiul suplimentar pe verticala din %urul ima inii 4in pi.eli6
Marca5e pe!tru formulare
<)64M> </)64M> A(T$OHFurl M/THO,Fmetoda <,DP3T TTP/Foptiune HAM/Fnume 7AL#/Fvaloare (H/(0/,F optiune 1$N/Fx 1$N/Fx <#=L= T> </#=L= T> HAM/Fnume 1$N/Fx M#LT$PL/Fx <6PT,6D 7AL#/Fvaloare <T=GT24=2> </T=GT24=2>
+ormular HTML activ Pro ramul (G$ de pe serverul care receptioneaza datele Modul in care datele sunt transmise serverului4G/T sau PO1T6 (amp de te.t sau alte date de intrare Tipul campului de intrare E$HP#TG. 7alori posi!ile& te.t,pass"ord,chec5!o.,hidden,file, radio,su!mit,reset,ima e. Humele sim!olic al valorii campului (ontinutul presta!ilit al campului de te.t 'uton*caseta marcata in mod presta!ilit Humarul de caractere al unui camp de te.t Humarul ma.im de caractere acceptate Grup de casete de validare Humele sim!olic al valorii campului Humarul de articole de meniu care se afiseaza odata 4presta!ilitF86 Permite selectia unor articole de meniu multiple Ale erea particulara intr-un domeniu E1/L/(TG 7aloarea rezultanta a acestei selectii din meniu (amp de intare de tip te.t pe linii multiple
HAM/Fnume )O21Fx (OL1Fx <),=L9#=T> </),=L9#=T> <L=*=D9> </L=*=D9> AL$GHFs TA'$H,/QFx A((/10/TFc ,$1A'L/, )/A,OHLT
Humele sim!olic al valorii campului Humarul de linii al casetei de te.t Humarul de coloane 4caractere6 pe linie al casetei de te.t $mparte formularul in parti lo ice Humele asociat setului de campuri 4fieldset6 1pecifica alinierea le endei 4e.plicatiei6 afisate 4top,!ottom,left,ri ht6 1pecifica ordinea elementelor atunci cand utilizatorul apasa tasta Ta! 1pecifica tasta care asi ura comanda rapida de la tastatura asociata unui anumit element /lementul este inactiv, dar este afisat pe ecran /lementul este afisat pe ecran dar nu poate fi editat
arcatere speciale
; H E G W X Y Z [ \
UampD ampersand tilda mai mic 4less than6 mai mare 4 reater than6 sim!olul de cop-ri ht sim!olul pentru marca inre istrata a mic cu accent ascutit 4acute6 a mic cu accent circiumfle. n mic cu tilda o mic !arat 4slash6
HTML a1a!sat
<#TCL=> </#TCL=> TTP/Fval
1pecifica informatii referitoare modelul de stiluri Tipul modelului de stiluri. ,e re ula "te.t*css"
<# 4,PT> </# 4,PT> $nclude un script de re ula Pavascript, in pa ina 2e! LAHG#AG/Flimba% /7/HTFeveniment +O)Fnumeobiect Lim!a%ul utilizat /veniment care declanseaza e.ecutia unor scripturi specifice Humele o!iectului din pa ina asupra caruia actioneaza scriptul

HTML

Încărcat de

Informații document

Titlu original

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

HTML

Încărcat de

Drepturi de autor:

Formate disponibile

2. Primii pasi Orice document HTML incepe cu notatia <html> si se termina cu notatia </html>.

este prima mea pa ina de 2e!</title>

este prima mea pa ina de 2e!</title>

'ine ati venit in pa ina mea de 2e!3

Prima linie A doua linie A treia linie

vezi acest e.emplu

O culoare poate fi precizata in doua moduri&

O pa ina 2e! cu fondul G)$3

vezi acest e.emplu

#n te.t de culoare rosie.

+ond de culoare al!astra si te.t de culoare al!ena.

vezi acest e.emplu

vezi acest e.emplu

vezi acest e.emplu

$n locul lor se poate utiliza eticheta echivalenta <i>...</i>.

de caractere monospatiate si clipitoare </title>

vezi acest e.emplu /.emplul urmator ilustreaza ca etichetele pot fi im!ricate.

(. )o!turi #n font este caracterizat de urmatoarele atri!ute&

ment de te.t de culoare rosie</font>

$n acest caz !ro"serul va utiliza primul font pe care il cunoaste.

(uloarea si familia fontului</title>

vezi acest e.emplu

de marime @< pt 4numai cu Hetcape (ommunicator6.</font>

vezi acest e.emplu

vezi acest e.emplu

<title> </head> <body>

$ndentarea unui !loc</title>

vezi acest e.emplu

Ora*Niua B&<< C&<<

)omana Matematica 1port Geo rafie $storie +izica </pre>

<"mp>...</"mp> 4 B< de caractere pe rand 6D <listi!$>...</listi!$> 4 8=< de caractere pe rand 6.

.mp si listin </title>

#n fisier html standard arata astfel& <xmp> <html>

<head> <title> </title> </head> <body>

O pa ina 2e! ... E*!od-G E*htmlG </xmp> </body>

vezi acest e.emplu

<html> <head> <title> </head> <body>

'locuri para raf</title>

vezi acest e.emplu

vezi acest e.emplu

permite definirea culorii liniei.

orizontale </h1> O linie implicita alinierea stan a, latime

8<<O, rosime = cu um!ra.

vezi acest e.emplu

vezi acest e.emplu

vezi acest e.emplu

Aceasta linie este o linie normala.#rmatorul !loc este aliniat la dreapta.

vezi acest e.emplu

vezi acest e.emplu

vezi acest e.emplu

vezi acest e.emplu

vezi acest e.emplu

Te.t dupa ima ine.

vezi acest e.emplu

Lin5 catre pa ina = </a>

vezi acest e.emplu

vezi acest e.emplu

vezi acest e.emplu

vezi acest e.emplu

vezi acest e.emplu

$n mod presta!ilit se utilizeaza trei culori pentru le aturi&

pentru le aturile active.

aturi active, verde pentru le aturi

O pa ina 2e! ... E!od-G EhtmlG </xmp> </body>