Limbajul HTML PDF

19.10.
2015
HTML
1. Structura documentului HTML
2. Formatarea caracterelor, organizarea textului
3. Blocuri de text
4. Liste. Noiuni i marcaje utilizate
5. Tabele. Noiuni si marcaje utilizate
6. Operarea cu obiecte. Inserarea imaginilor, sunetelor i videoclipurilor
7. Referine. Referine interne i externe.
8. Documentarea unei pagini WEB.
9. Operarea cu formulare. Marcaje utilizate
10. Ferestre in HTML. Comenzi de construire a ferestrelor(cadrelor)
Ce este HTML ?
Unul din primele elemente fundamentale ale WWW ( World Wide Web ) este HTML ( Hypertext Markup Language ), care descrie formatul
primar in care documentele sunt distribuite si vzute pe Web. Multe din trasaturile lui, cum ar fi independenta fata de platforma,
structurarea formatrii si legaturile hypertext, fac din el un foarte bun format pentru documentele Internet si Web.
Primele specificaiile de baza ale Webului au fost HTML, HTTP si URL.
HTML a fost dezvoltat initial de Tim BernersLee la CERN in 1989. HTML a fost vazut ca o posibilitate pentru fizicienii care utilizeaza
computere diferite si schimbe ntre ei informaie utilizind Internetul. Erau prin urmare necesare citeva trasaturi: independenta de
platforma, posibiliti hypertext si structurarea documentelor.Independenta de platforma nseamn ca un document poate fi afiat in
mod asemntor de computere diferite ( deci cu fonte, grafica si culori diferite ), lucru vital pentru o audienta att de variata.
Hipertext nseamn ca orice cuvnt, fraza, imagine sau alt element al documentului vzut de un utilizator ( client ) poate face referina la
un alt document, ceea ce uureaz mult navigarea intre multiple documente sau chiar in interiorul unui aceluiasi document. Structurarea
riguroasa a documentelor permite convertirea acestora dintrun format in altul precum si interogarea unor baze de date formate din
aceste documente.
Standardul oficial HTML este World Wide Web Consortium (W3C), care este afiliat la Internet Engineering Task Force (IETF). W3C a enunat
cteva versiuni ale specificaiei HTML, printre care si HTML 2.0, HTML 3.0,HTML 3.2, HTML 4.0 si, cel mai recent, HTML 4.01. In acelai
timp, autorii de browsere, cum ar fi Netscape si Microsoft, au dezvoltat adesea propriile "extensii" HTML in afara procesului standard si le
au incorporat in browserele lor. In unele cazuri, cum ar fi tagul Netscape , aceste extensii au devenit standarde de facto adoptate de
autorii de browsere.
HTML 2.0, elaborat in Iunie 1994, este standardul pe care ar trebui sal suporte toate browserele curente inclusiv cele mod text. HTML
2.0 reflecta concepia originala a HTML ca un limbaj de marcare independent de obiectele existente pentru aezarea lor in pagina, in loc
de a specifica exact cum ar trebui sa arate acestea. Dac dorii sa fii siguri ca toi vizitatorii vor vedea paginile aa cum trebuie, folosii
tagurile HTML 2.0.
Specificaia HTML 3.0, Enunata in 1995, a ncercat sa dezvolte HTML 2.0 prin adugarea unor faciliti precum tabelele si un mai mare
control asupra textului din jurul imaginilor. Dei unele din noutile HTML 3.0 erau deja folosite de autorii de browsere, multe nu erau
nc. In unele cazuri, taguri asemntoare implementate de autorii de browsere au devenit mai rspndite dect tagurile "oficiale".
Specificaia HTML 3.0 acum a expirat, deci nu mai este un standard oficial.
In Mai 1996, W3C a scos pe piaa specificaia HTML 3.2, care era proiectata sa reflecte si sa standardizeze practicile acceptate la scara
larga. Deci, HTML 3.2 include tagurile HTML 3.0 ce erau adoptate de autorii de browsere ca Netscape si Microsoft plus extensii HTML
rspndite. In Bilanul asupra HTML, W3C recomanda ca providerii de informaii sa utilizeze specificaia HTML 3.2.Versiunile curente ale
majoritii browserelor ar trebui sa suporte toate, sau aproape toate aceste taguri.
De asemenea exista extensii Netscape si Microsoft care nu fac parte din specificaia HTML 3.2, ori pentru ca sunt mai puin utilizate, ori
au fost omologate dup apariia HTML 3.2. Pentru ca navigatorul Netscape a fost printre primele browsere care suporta anumite taguri
HTML 3.0, iar Netscape deine in jur de 70% din piaa de browsere, muli au crezut eronat ca toate extensiile Netscape (incluznd taguri ca
si facilitai ca ferestrele) fac parte din HTML 3.0 sau HTML 3.2.
La momentul aparitiei acestui tutorial, HTML 4.0 este larg utilizat si au fost deja publicate specificatiile HTML 4.01.
Documentele HTML sint documente in format ASCII si prin urmare pot fi create cu orice editor de texte. Au fost insa dezvoltate editoare
specializate care permit editarea intrun fel de WYSIWYG desi nu se poate vorbi de WYSIWYG atita vreme cit navigatoarele afieaz acelasi
document oarecum diferit, in functie de platforma pe care ruleaza. Au fost de asemenea dezvoltate convertoare care permit formatarea
HTML a documentelor generate ( si formatate ) cu alte editoare. Evident conversiile nu pot patra decit partial formatarile anterioare
deoarece limbajul HTML este inca incomplet.
1. Structura documentului HTML.

1/42
19.10.2015 LimbajulHTML
Orice document HTML ncepe cu notaia <html> si se termina cu notaia </html>. Aceste "chestii" se numesc in literatura de specialitate
"TAGuri".Prin convenie, toate informaiile HTML ncep cu o paranteza unghiulara deschisa " < " si se termina cu o paranteza unghiulara
nchisa " > ".
Tagurile intre aceste paranteze transmit comenzi ctre browser pentru a afia pagina intrun anumit mod. Unele blocuri prezint
delimitator de sfrit de bloc, in timp ce pentru alte blocuri acest delimitator este opional sau chiar interzis.
Intre cele doua marcaje <html> si </html> vom introduce doua seciuni:
sectiunea de antet <head>...</head> si corpul documentului <body>...</body>. Blocul <body>...</body> cuprinde coninutul propriu
zis al paginii HTML, adic ceea ce va fi afiat in fereastra browserului.
O eticheta poate fi scris att cu litere mici, cat si cu litere mari.

Adic <html> = <HTML> = <Html>. Caracterele "spaiu" si "CR/LF" ce apar intre etichete sunt ignorate de ctre browser.
Deci un prim document HTML ar fi ceva de genul asta:
1 <html>
2 <head></head>
3 <body>
4 </body>
5 </html>
Aa arata primul document HTML. Copiail folosind Copy/Paste ntrun fiier nou i salvail ca PRIM.HTM sau PRIM.HTML. Apoi pornii
Internet Explorer sau Google Crome, dai CTRLO si introducei calea spre fiier. Dai OK si ... nimic.
S nu disperam ... vom aduga primele elemente la pagina noastr. n primul rnd, titlul unei pagini se obine insernd n seciunea
<head>...</head> a urmtoarei linii:
<title>Aceasta este prima mea pagina de Web</title>

n plus, n seciunea <body>...</body> putem scrie texte ct dorim. Daca nu ntlnim nici un marcaj < sau > atunci interpretorul HTML le
va lua ca texte simple si le va afia pe ecran. Sa vedem o noua versiune a paginii noastre:
1 <html>
2 <head>
3 <title>AceastaesteprimameapaginadeWeb</title>
4 </head>
5 <body>
6 BineativenitinpaginameadeWeb!
7 </body>
8 </html>
Coninutul blocului <title>...</title> va aprea in bara de titlu a ferestrei browserului.

Daca acest bloc lipsete ntro pagina HTML, atunci n bara de titlu a ferestrei browserului va aprea numele fiierului.
Daca introducem mai multe linii intro pagina browserul va afia intrun singur rnd, ntruct caracterele " CR/LF " sunt ignorate de
browser. Trecerea pe o linie noua se face la o comanda explicita, care trebuie sa apar n pagina html.
Aceasta comand este marcajul <br> ( de la " line break " ntrerupere de linie ).
Folosind aceleai operaii ca mai sus, vizualizai noua pagina! Vei vedea textul ce apare n fereastra navigatorului. n plus, pagina dvs. va
avea un titlu nou, cel introdus de dvs.
1 <html>
2 <head>
3 <title>Titlulpaginii</title>
4 </head>
5 <body>
6 Bineativenitin<br>paginameadeWeb!
7 </body>
8 </html>
Blocuri preformatate
Pentru ca browserul s interpreteze corect caracterele " spaiu ", " tab " si " CR/LF " ce apar n cadrul unui text, acest text trebuie inclus
intrun bloc <pre>...</pre>.
2/42
1 <html>
2 <head>
3 <title>Blocpreformatat</title>
4 </head>
5 <body>
6 <pre>
7 Primalinie
8 Adoualinie
9 Atreialinie
10 </pre>
11 </body>
12 </html>
Culoarea de fond
O culoare poate fi precizata n dou moduri:
Printrun nume de culoare. Sunt disponibile cel puin 16 nume de culori: aqua, black, fuchsia, gray, green lime, maroon, navy, olive, purple, red,
silver, teal, white si yellow.
Prin construcia " #rrggbb " unde r (red), g (green), sau b (blue) sunt cifre hexazecimale si pot lua valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c,
C, d, D, e, E, f, F; se pot defini astfel 65536 de culori.
Culoarea unei pagini se precizeaz prin intermediul unui atribut al etichetei <body>.
Culoarea fondului paginii Web se stabilete cu atributul bgcolor al etichetei <body>, de exemplu: <body bgcolor = culoare>.
Urmtorul exemplu realizeaz o pagin cu fondul de culoare gri.
1 <html>
2 <head>
3 <title>Culoaredefond</title>
4 </head>
5 <bodybgcolor="gray">
6 OpaginaWebcufondulGRI!
7 </body>
8 </html>
Culoarea textului
Acest lucru se face prin intermediul atributului text al etichetei <body> dup sintaxa <body text=culoare>. n urmtorul exemplu textul
are culoarea roie.
1 <html>
2 <head>
3 <title>culoaretextului</title>
4 </head>
5 <bodytext="red">
6 Untextdeculoarerosie.
7 </body>
8 </html>
O eticheta poate avea mai multe atribute. De exemplu , o eticheta cu trei atribute arata astfel: <eticheta atribut1 = valoare1 atribut2 =
valoare2 atribut3 = valoare3>. Urmtorul exemplu prezint o pagina cu fondul de culoare albastra si textul de culoare galben.
1 <html>
2 <head>
3 <title>atributemultiple</title>
4 </head>
5 <bodybgcolor="blue"text="yellow">
6 Fonddeculoarealbastrasitextdeculoaregalbena.
7 </body>
8 </html>
Textul afiat este caracterizat de urmtoarele atribute: Mrime ( size), Culoare ( color ), Font (style).
Acestea sunt atribute ale etichetei <basefont>.Este o eticheta singulara (fr delimitator de sfrit de bloc).
<basefont size = numar color = culoare style = font>
unde:
numar poate fi 1, 2, 3, 4, 5, 6 sau 7; ( 1 pentru fontul cel mai mic si 7 pentru fontul cel mai mare);
culoare este o culoare precizata prin nume sau printro construcie RGB;
font poate fi un font generic ca " serif ", " san serif ", " cursive ", " monospace ", "fantasy " sau un font specific instalat pe calculatorului clientului, ca
" Times New Roman ", " Helvetica " sau " Arial ".Se accepta ca valoare si o lista de fonturi separate prin virgula, de exemplu:
" Times New Roman, serif, monospace ".
Domeniul de valabilitate al caracteristicilor precizate de aceasta eticheta se ntinde de la locul in care apare eticheta pana la sfaritul
paginii sau pana la urmtoarea eticheta <basefont>.
Daca acest atribut lipsete atunci textul din pagina Web are atribute prestabilite sau atribute precizate de browserul utilizat.
3/42
Atributele prestabilite sunt: size = 3, color = black, i style = " Times New Roman " .
Poziionarea coninutului paginii Web fata de marginile ferestrei browserului se poate face cu ajutorul a dou atribute ale etichetei
<body>:
leftmargin ( stabilete distanta dintre marginea stnga a ferestrei browserului si marginea stng a coninutului paginii );
topmargin ( stabilete distanta dintre marginea de sus a ferestrei browserului si marginea de sus a coninutului paginii );
1 <html>
2 <head>
3 <title>Configurareatextuluisistabilireamarginii</title>
4 </head>
5 <bodyleftmargin="100"topmargin="50">
6 Textulareatributeimplicite.<br>
7 <basefontstyle="Arial"color="blue"size="6">Textulestescriscufontul"Arial",culoarealbastrusimarime6.
8 </body>
9 </html>
Stiluri pentru blocurile de text
Pentru ca un bloc de text sa apar in pagina evideniat (cu caractere aldine), trebuie inclus intre delimitatorii <b>...</b> ( b vine de la
"bold" = ndrzne).
Pentru ca un text sa fie scris cu caractere mai mari cu o unitate dect cele curente acesta trebuie inclus intrun bloc delimitat de
etichetele <big>...</big>.
Pentru ca un text sa fie scris cu caractere mai mici cu o unitate dect cele curente acesta trebuie inclus intrun bloc delimitat de
etichetele <small>...</small>.
Pentru ca un text sa fie scris cu caractere cursive acesta trebuie inclus intrun bloc delimitat de etichetele <i>...</i> ( i vine de la " italic
").
Pentru a insera secvene de text aliniate ca indice (subscript) sau ca exponent (superscript) , aceste fragmente trebuie delimitate de
etichetele <sub>...</sub>, respectiv <sup>...</sup>.
Pentru a insera un bloc de caractere subliniate se utilizeaz etichetele <u>...</u> (u vine de la " underline ").
Pentru a insera un bloc de caractere tiate se utilizeaz etichetele <strike>...</strike> sau <s>...</s>.
n exemplul urmtor vom utiliza toate etichetele menionate anterior.
1 <html>
2 <head>
3 <title>Stiluripentrublocuridetext</title>
4 </head>
5 <body>
6 <b>Textscriscucaractereingrosate.</b><br/>
7 <big>Textcucaracteremaritecuounitate<big>maimare<big>simaimare<big>simaimare.</big></big></big></big>
8 <br><small>Textulestescriscucaracteremicsoratecuounitate<small>maimic.</small></small><br>
9 <i>Textscriscucaractereitalice.</i>
10 <br>Inaceastalinie<sup>sus</sup>estesuperscriptiar<sub>jos</sub>estesubscirpt.<br>
11 <strike>Aceastalinieesteinintregimesectionatadeolinieorizontala.</strike><br>
12 Inaceastalinieurmatorulcuvanteste<u>subliniat</u>,iarcuvantul<s>strike</s>sectoinat.
13 </body>
14 </html>
Stiluri fizice si logice
Am prezentat deja 8 stiluri de scriere a caracterelor unui bloc de text, numite si stiluri fizice intrucat nu sa acordat nici o atentie
semnificatiei informatiei continute de aceste blocuri.
In continuare sunt prezentate stilurile utilizate la formatarea unui bloc.
Aceste stiluri tin cont de semnificatia pe care o are blocul in cadrul paginii Web.
Pentru a pune in evidenta ( prin silul cursiv ) fragmente de text se utilizeaza etichetele:
<cite>...</cite>( " cite " inseamna citat);

<em>...</em>(em vine de la " emphasize " = a evidentia).
n locul lor se poate utiliza eticheta echivalenta<i>...</i>.
Urmatoarele etichete au efecte similare. Ele permit scrierea fragmentului de text cu caractere monospatiate (de tipul celor folosite de o
main de scris):
<code>...</code>( " code " inseamna cod sau surs);

<kbd>...</kbd>( kbd vine de la " keyboard " = tastatura);
<tt>...</tt>( tt vine de la " teletype " = teleprinter).
Eticheta de tip bloc <blink>...</blink> delimiteaz fragmente de text clipitoare. Aceasta eticheta funcioneaz numai in browserul
Netscape Communicator.
1 <html>
2 <head> Top
3 <title>Blocuridecaracteremonospatiatesiclipitoare</title>
4 </head>
5 <body>
6 Aceastalinieesteformatadintextnormal.<br>
7 Codulfunctieif(x,y)este:<code>Functionf(x,y){returnx+y;}</code><br>
8 TastatiurmatoareacomandacomandaDOS:
4/42
8 TastatiurmatoareacomandacomandaDOS:
9 <kbd>copyc:\windows\*c:\temp</kbd><br>
10 <tt>Asascrieunteleprinter</tt><br>
11 Acestcuvantclipeste<blink>Blink</blink>
12 </body>
13 </html>
Exemplul urmtor ilustreaz c etichetele pot fi imbricate.
Un fragment de text poate fi scris cu aldine i cursive in acelai timp.
Pentru un fragment de text se pot folosi simultan stilurile subliniat, exponent, mrit si cursiv.
1 <html>
2 <head>
3 <title>Imbricareaetichetelor</title>
4 </head>
5 <body>
6 Aceastalinieesteformatadintextnormal.<br/>
7 Normal<b>ingrosat<i>ingrosatsiitalic</i>ingrosat</b>.<br/>
8 Normal<u>subliniat<b>subliniatsiingrosat<big>subliniat,ingrosatsimarit.<br>
9 <i>Subliniat,ingrosat,maritsiitalic.</i></big></b></u>
10 </body>
11 </html>
Blocul <q>...</q> permite inserarea inline a citatelor. Brouwserul afieaz citatele n ghilimele.
" q " vine de la " inline quotation " (citate inserate inline).
i blocurile " q " pot fi imbricate.
Exemplu(de sine stttor).
&consecutiviti
Simbolurile "<"
i ">" sunt percepute de sistemele browser ca nceputuri
i sfr
ituri de HTMLtaguri. Apare ntrebarea, cum sreprezentm
aceste simboluri pe ecran?
n limbajul HTML aceasta se poate realiza cu ajutorul & consecutivitilor (ele se mai numesc obiecte simbolice sau
escapeconsecutiviti).
Exist mai multe consecutiviti de acest tip:
"<" <
">" >
"&" (ampersand) &
Ghilimelele(") se codific "
Pentru escapeconsecutiviti sunt dou restricii suplimentare:
1. Fiecare consecutivitate se scrie numai cu minuscule

2. Sfr
itul fiec
rei consecutivit
!i este marcat de
n general, asemenea consecutiviti exist pentru toate simbolurile cu codurile ASCII mai mari dect 127. Motivul este c unele servere
nu susin transmiterea datelor cte 8 bii.
Exist mai multe metode de a include semnele diacritice romne n documentele HTML. Cea mai simpl este codificarea direct a lor prin
&consecutiviti:
Ă
ă
Î
î
Ş
ş
Ţ
ţ
Â
â
Exemplu:
1 <html>
2 <head>
3 <title>Codificareasemnelordiacriticeromâneştiîn
4 limbajulHTML</title>
5 </head>
6 <h3>Codificareasemnelordiacriticeromâneştiîn
7 limbajulHTML</h3>
8 <p><b>Ă</b>Ă</p>
9 <p><b>ă</b>ă</p>
5/42
9 <p><b>ă</b>ă</p>
10 <p><b>Î</b>Î</p>
11 <p><b>î</b>î</p>
12 <p><b>Ş</b>Ş</p>
13 <p><b>ş</b>ş</p>
14 <p><b>Ţ</b>Ţ</p>
15 <p><b>ţ</b>ţ</p>
16 <p><b>Â</b>Â</p>
17 <p><b>â</b>â</p>
18 </body>
19 </html>
Comentarii
Sistemele browser ignor reproducerea oricrui text situat ntre <!

i >. Este o opiune special pentru introducerea n textul
documentului HTML a unor comentarii, ce nu for fi afi
ate pe ecran.
<!Acesta e un comentariu >
2. Formatarea caracterelor, organizarea textului.
Un font este caracterizat de urmtoarele atribute:
culoare (stabilita prin atributul color);

tipul sau stilul (stabilit prin atributul face);
mrimea (definita prin atributul size);
mrimea in puncte tipografice (stabilita prin atributul pointsize);
grosime (definita prin atributul weight).
Toate aceste atribute aparin etichetei <font>, care permite inserarea de blocuri de texte personalizate.
Culori
O culoare poate fi precizata n dou moduri:
printrun nume de culoare.

printro constant conform standardului de culoare RGB (Red, Green, Blue). O astfel de constant se formeaz astfel: #rrggbb, unde r, g si b sunt
cifre hexazecimale.
Culoarea fontului
Pentru a scrie un fragment de text cu caractere de o anumit culoare se ncadreaz acest fragment ntre delimitatorii <font>...</font>
avnd stabilit atributul color la valoarea necesara. De exemplu:
<font color=red>fragment de text de culoare rosie</font>
Familia fontului
Pentru a scrie un text intro pagin pot fi folosite mai multe fonturi (stiluri de caractere). Exist cinci familii generice de fonturi care sunt
de regul disponibile pe toate calculatoarele utilizatorilor: serif, sans serif, cursive, monospace i fantasy.
Tipul de font necesar poate fi stabilit prin atributul face al etichetei <font>.
Pot fi introduse mai multe fonturi separate prin virgula.
<font face = " Arial, serif, monospace ">
n acest caz browserul va utiliza primul font pe care l cunoate.
1 <html>
2 <head>
3 <title>Culoareasifamiliafontului</title>
4 </head>
5 <body>
6 Acestelinieestescrisacucaracterenormale.<br/>
7 <fontcolor="red">Aceastalinieesterosie.</font><br/>
8 Aici<fontcolor="green">fiecare</font>
9 <fontcolor="blue">cuvant</font>
10 <fontcolor="yellow">are</font>
11 <fontcolor="cyan">alta</font>
12 <fontcolor="#3478fa">culoare.</font><br/>
13 <fontface="monospace">Liniescrisacucaracteremonospatiate.</font><br/>
14 <fontface="arial">Liniescrisacucaracterearial.</font>
15 </body>
16 </html>
Mrimea fontului
Pentru a stabili mrimea unui font se utilizeaz atributul size al etichetei <font>. Valorile acestui atribut pot fi:
1, 2, 3, 4, 5, 6, 7 ( 1 pentru cel mai mic font si 7 pentru cel mai mare);

+1, +2, etc. pentru a mari dimensiunea fontului cu 1, 2, etc. fata de valoarea curenta;
1, 2, etc. pentru a micora dimensiunea fontului cu 1, 2, etc. fata de valoarea curenta.
Mrimea unui font poate fi stabilita exact cu ajutorul atributului pointsize. Valorile acceptate de acest atribut pot fi orice numere
6/42
naturale pozitive. Numrul astfel precizat reprezint mrimea fontului n puncte tipografice.
Acest atribut funcioneaz numai cu Netscape Communicator.
1 <html>
2 <head>
3 <title>Marimeafontului</title>
4 </head>
5 <body>
6 Acestelinieestescrisacucaracterenormale.<br/>
7 <fontsize="5">Fonturidemarime5.</font><br/>
8 <basefontsize="4">Fonturidemarime4.</font><br/>
9 <fontsize="3">Fonturidemarime1.</font><br/>
10 <fontsize="+2">Fonturidemarime6.</font><br/>
11 <fontpointsize="30">Fonturidemarime30pt(numaicuNetcapeCommunicator).</font><br/>
12 <fontpointsize="50">Fonturidemarime50pt(numaicuNetcapeCommunicator).</font>
13 </body>
14 </html>
Grosimea unui font
Grosimea unui caracter poate fi definit cu ajutorul atributului weight al etichetei <font>.
Valorile posibile pentru acest atribut sunt 100, 200, 300, 400, 500, 600, 700, 800 si 900 (100 pentru fontul cel mai subire si 900 pentru cel
mai gros).
1 <html>
2 <head>
3 <title>Grosimeafontului</title>
4 </head>
5 <body>
6 Acestelinieestescrisacucaracterenormale.<br>
7 <fontweight="100">Fonturidegrosime100.</font><br>
8 <fontweight="500">Fonturidegrosime500.</font><br>
9 <fontweight="900">Fonturidegrosime900.</font>
10 </body>
11 </html>
3. Blocuri de text
Aceste etichete nu se refera la particularitatiile caracterelor ce compun textul, ci la functiile pe care le poate avea un bloc de text in
cadrul paginii Web.
Toate aceste etichete produc automat trecerea la un rand nou si adaugarea unui spatiu suplimentar.
Inserarea unei adrese
Daca intro pagina web trebuie inclusa o adresa ,atunci putem utiliza facilitatile oferite de o eticheta dedicata:<address>...</address>.
1 <html>
2 <head>
3 <title>Adresa</title>
4 </head>
5 <body>
6 Adresainstitutieinoastreeste:<address>ColegiuldeInformaticdinChiinu<br>
7 Str:Sarmizegetusa48<br>
8 ChiinuMoldova</address>
9 </body>
10 </html>
Indentarea unui bloc
Pentru ca un bloc de text sa fie indentat ( marginea din stanga a textului sa fie deplasata la dreapta la o anumita distanta fata de
marginea paginii ), acesta trebuie inclus intre etichetele<blockquote>...</blockquote>.
1 <html>
2 <head>
3 <title>Indentareaunuibloc</title>
4 </head>
5 <body>
6 Textulceurmeazaesteindentat:<blockquote>Acesteetichetenusereferalaparticularitatiilecaracterelorcecompuntextul, ci la functii
7 </body>
8 </html>
Blocul preformatat
Intrun bloc<pre>...</pre>, semnificatia marcajelor HTML se pastreaza.

Blocul<pre>...</pre>este indicat pentru a insera randuri vide ( spatiu intre randurile succesive ). Caracterul " spatiu " poate fi luat in
7/42
considerare de browser daca este inserat explicit prin .
1 <html>
2 <head>
3 <title>Blocpreformatat</title>
4 </head>
5 <body>
6 Orar:
7 <pre>
8 Ora/ZiuaLuniMarti Miercuri
9
10 8:00 Romana Matematica Sport
11 9:00 GeografieIstorie Fizica
12 </pre>
13 </body>
14 </html>
ntrun fiier HTML, caracterele "<"i ">" au o semnificaie special pentru browser. Ele incadreaza comenzile i atributele de afiare a
elementelor intro pagina. Dac dorim ca un fragment de text s conin astfel de caractere, acest fragment trebuie incadrat de una
dintre perechile de etichete:
<xmp>...</xmp>( 80 de caractere pe rand );

<listing>...</listing>( 120 de caractere pe rand ).
Aceste marcaje interpreteaza corect caracterele " spatiu ", " eticheta "i "CR/LF ". Textul afiat n pagina este monospaiat.
1 <html>
2 <head>
3 <title>xmpsilisting</title>
4 </head>
5 <body>
6 Unfisierhtmlstandardarataastfel:
7 <xmp>
8 <html>
9 <head>
10 <title></title>
11 </head>
12 <body>
13 OpaginaWeb...
14 </body>
15 </html>
16 </xmp>
17 </body>
18 </html>
Blocuri paragraf
Cu ajutorul etichetei paragraf<p>este posibil trecerea la o linie noua si permite:
inserarea unui spatiu suplimentar inainte de blocul paragraf;

inserarea unui spatiu suplimentar dupa blocul paragraf, daca se foloseste delimitatorul</p>(acesta fiind optional);
alinierea textului cu ajutorul atributuluialign, avand valorile posibile " left ", " center " sau " right ".
1 <html>
2 <head>
3 <title>Blocuriparagraf</title>
4 </head>
5 <body>
6 Primalinie
7 <p>Linigeneratadeunparagraf(implicitparagrafulestealiniatlastanga).
8 <palign="right">Paragrafaliniatladreapta.Paragrafaliniatladreapta.Paragrafaliniatladreapta.Paragrafaliniatladreapta. Paragraf
9 <palign="center">Paragrafaliniatincentru.Paragrafaliniatincentru.Paragrafaliniatincentru.Paragrafaliniatincentru. Paragraf al
10 </body>
11 </html>
12
Blocuri de titlu
Intrun text titlurile ( headers ) de capitole pot fi introduse cu ajutorul etichetelor<h1>. <h2>, <h3>, <h4>, <h5>, <h6>.
Toate aceste etichete se refera la un bloc de text si trebuie insotite de o eticheta de incheiere similara.
Aceste etichete accepta atributulalignpentru alinierea titlului blocului de text la stanga (in mod prestabilit ) , in centru si la dreapta.
Tagul<h1>permite scrierea unui titlu cu caractere mai mari si aldine, pe cand<h6>foloseste caracterele cele mai mici.
1 <html>
2 <head>
3 <title>Blocuridetitlu</title>
4 </head>
5 <body>
6 <h1align="center">Titludemarime1aliniatincentru</h1>
8/42
6 <h1align="center">Titludemarime1aliniatincentru</h1>
7 <h2align="right">Titludemarime2aliniatladreapta.</h2>
8 <h4>Titludemarime4aliniatlastanga(implicit)</h4>
9 </body>
10 </html>
11
Linii orizontale
Intro pagina Web pot fi inserate linii orizontale.acest lucru se face cu ajutorul etichetei<hr>. Pentru a configura o linie orizontala se
utilizeaza urmatorele atribute ale etichetei<hr>:
alignpermite alinierea liniei orizontala. Valorile posibile sunt " left " ," center " si " right ";
widthpermite alegerea lungimii liniei;
sizepermite alegerea grosimii liniei;
noshadecand este prezent defineste o linie fara umbra;
colorpermite definirea culorii liniei.
1 <html>
2 <head>
3 <title>Liniiorizontale</title>
4 </head>
5 <body>
6 <h1align="center">Tipurideliniiorizontale</h1>Olinieimplicitaaliniereastanga,latime100%,grosime2cuumbra.
7 <hr>
8 Urmeazaoliniealiniataincentru,delatime50%,grosime5pixeli,faraumbra.
9 <hralign="center"width="50%"size="5"noshade>Urmeazaoliniealiniataladreapta,delatime150depixeli,grosime12pixeli , de culo
10 <hralign="right"width=150size=12color="red">
11 </body>
12 </html>
13
Blocuri<center>
Blocul introdus de etichetele<center>...</center>aliniaza centrat toate elementele pe care le contine.
1 <html>
2 <head>
3 <title>Liniiorizontale</title>
4 </head>
5 <body>
6 <center><hrwidth=10%><hrwidth=40%><hrwidth=70%><hrwidth=100%><hrwidth=70%><hrwidth=40%><hrwidth=10%></center>
7 </body>
8 </html>
9
Blocuri <nobr>
Blocul de text cuprins intre etichetele<nobr>...</nobr>va fi afisat pe o singura linie.
1 <html>
2 <head>
3 <title>Blocul<nobr></title>
4 </head>
5 <body>
6 <nobr>Osinguralinie.Osinguralinie.Osinguralinie.Osinguralinie.Osinguralinie.Osinguralinie.Osinguralinie.Osingura linie.O s
7 </nobr>
8 </body>
9 </html>
10
Blocuri <div>
Modalitatea cea mai eficienta de delimitare si de formatare a unui bloc de text este folosirea delimitatorilor<div>...</div>. Un parametru
foarte foarte util pentru stabilirea caracteristicilor unui bloc<div>( diviziune ) estealign( aliniere ).
Valorile posibile ale acestui parametru sunt:
left " ( aliniere la stanga );

center " ( aliniere centrala );
right " ( aliniere la dreapta ).
Un bloc <div>...</div> poate include alte subblocuri. In acest caz , alinierea precizata de atributul align al blocului are efect asupra
tuturor subblocurilor incluse in blocul<div>;
Un bloc<div>...</div>admite atributul " nowrap " care interzice intreruperea randurilor de catre browser.
9/42
1 <html>
2 <head>
3 <title>Blocul<div></title>
4 </head>
5 <body>
6 Aceastalinieesteolinienormala.Urmatorulblocestealiniatladreapta.
7 <divalign="right">
8 Osinguralinie.Osinguralinie.Osinguralinie.Osinguralinie.<br>
11 </div>
12 <divalign="center">
13 Blocaliniatpecentru.Blocaliniatpecentru.<br>
16 </div>
17 </body>
18 </html>
19
4. Liste. Noiuni i marcaje utilizate.
Unul din cele mai obinuite elemente din documentele cu mai multe pagini este un set de definiii, referine sau indexuri. Glosarele sunt
exemple clasice n acest sens; cuvintele sunt listate n ordine alfabetic, urmate de definiii ale termenilor respectivi. n HTML, ntreaga
seciune a unui glosar va fi gestionat printro lista de definiii, care este inclusa ntro pereche de marcaje de lista de definiii: <dl>...
</dl> (de la "definition list" = lista de definiii).
Observaii:
Un termen al listei este iniiat de eticheta <dt> (de la "definition term" = termen definit);
Definitia unui termen este iniiata de eticheta <dd> (de la "definition description" = descrierea definiiei);
Definitia unui termen ncepe pe o linie noua si este indentat;
1 <html>
2 <head>
3 <title>Liste_ex1</title>
4 </head>
5 <body><h1align="center">Olistadedefinitii</h1><hr>
6 <dl>
7 GlosardetermenideWorldWideWeb
8 <dt><b>hypertext</b>
9 <dd>ointerconectareWebdeinformatiidetiptext,incareoricecuvantsaufrazapoatefacelegaturacatreunaltpunct din document
10 <dt><b>date</b>
11 <dd>fluxulnesfarsitdematerialecareaparpeInternet,spredeosebirede<em>informatii</em>caresuntdatecuunanumit inteles sau v
12 <dt><b>informatie</b>
13 <dd>subsetuldedatecareareefectivsemnificatiesicareesteutillamomentulcurent
14 </dl>
15 </body>
16 </html>
Liste neordonate
O lista neordonata este un bloc de text delimitat de etichetele corespondente <ul>...</ul> (" ul " vine de la " unordered list " = lista
neordonata). Fiecare element al listei este iniiat de eticheta <li> (list item).
Lista va fi intentata fata de restul paginii Web si fiecare element al listei ncepe pe un rnd noua.
1 <html>
2 <head>
4 </head>
5 <body><h1align="center">Olistaneordonata</h1><hr>
7 <ul>Culoriuzualedisponibileprinnume
8 <li>Black
9 <li>White
10 <li>Red
11 <li>Green
12 <li>Blue
13 <li>Yellow
14 <li>Purple
15 <li>Aqua
16 </ul>
17 </body>
18 </html>
Tagurile <ul> si <li> pot avea un atribut type care stabilete caracterul afiat n faa fiecrui element al listei. Valorile posibile al acestui
atribut sunt:
"circle" (cerc)
"disc" (disc plin) (valoarea prestabilita);
"square" (ptrat)
10/42
Listele neordonate pot fi imbricate pe mai multe niveluri
1 <html>
2 <head>
4 </head>
5 <body>
6 <h1align="center">Olistaneordonatadelisteneordonate</h1>
7 <hr>
9 <ul>ElementesiatributeauneipaginiHTML
10 <li>Frameset
11 <ul>Atribute:
12 <li>cols
13 <li>rows
14 <li>border
15 </ul>
16 <li>Frame
17 <ul>Atribute:
18 <li>src
19 <li>name
20 <li>scrolling
21 </ul>
22 </ul>
23 </body>
24 </html>
Liste ordonate
O list ordonat de elemente este un bloc de text delimitat de etichetele corespondente <ol>...</ol> (" ol " vine de la " ordered list " =
lista ordonat). Fiecare element al listei este iniiat de eticheta <li> (list item).
Lista va fi identat fa de restul paginii Web i fiecare element al listei ncepe pe un rnd nou.
1 <html>
2 <head>
3 <title>listex_4</title>
4 </head>
5 <body>
6 <h1align="center">Olistaordonata</h1>
7 <hr>
8 <ol>Culoriuzualedisponibileprinnume
9 <li>Black
10 <li>White
11 <li>Red
12 <li>Green
13 <li>Blue
14 <li>Yellow
15 <li>Purple
16 <li>Aqua
17 </ol>
18 </body>
19 </html>
Tagurile <ol> si <li> pot avea un atribut type care stabilete tipul de caractere utilizate pentru ordonarea listei. Valorile posibile sunt:
" A " pentru ordonare de tipul A , B , C , D etc. ( litere mari );

" a " pentru ordonare de tipul a , b , c , d etc. ( litere mici );
" I " pentru ordonare de tipul I , II , III , IV etc. ( cifre romane mari );
" i " pentru ordonare de tipul i , ii , iii , iv etc. ( cifre romane mici );
" 1 " pentru ordonare de tipul 1 , 2 , 3 , 4 etc. ( cifre arabe opiune prestabilita );
Urmtorul exemplu este o lista ordonata cu cifre romane:
1 <html>
2 <head>
4 </head>
5 <body>
6 <h1align="center">Olistaordonatacucifreromane</h1>
7 <hr>
8 <oltype="I">Culoriuzualedisponibileprinnume
9 <li>Black
10 <li>White
11 <li>Red
12 <li>Green
13 <li>Blue
14 <li>Yellow
15 <li>Purple
16 <li>Aqua
17 </ol>
18 </body>
19 </html>
11/42
Tagul <ol> poate avea un atribut start care stabilete valoarea iniiala a secvenei de ordonare. Valoarea acestui atribut trebuie sa fie un
numar ntreg pozitiv.
Urmtorul exemplu este o lista ordonata cu litere mari, ncepnd de la valoarea C.
1 <html>
2 <head>
4 </head>
5 <body>
6 <h1align="center">Olistaordonataculiteremari,ncepnddelavaloareaC</h1>
7 <hr>
8 <oltype="A"start="3">Culoriuzualedisponibileprinnume
9 <li>Red
10 <li>Green
11 <li>Blue
12 <li>Yellow
13 <li>Purple
14 <li>Aqua
15
16 </ol>
17 </body>
18 </html>
Tagul <li> poate avea un atribut value care stabilete valoare pentru elementul respectiv al listei. Valoarea acestui atribut trebuie sa fie
un numar ntreg pozitiv (vezi urmtorul exemplu):
1 <html>
2 <head>
4 </head>
5 <body>
6 <h1align="center">Olistaordonataavanditemisetatiindividual</h1>
7 <hr>
8 <olstart="3">Repetatiurmatoriipasiaialgoritmului
9 <li>salvatifisierul;
10 <livalue="6">incarcatifisierulinbrowser;
11 <li>schimbatibrowserulutilizat
12 <li>incarcatidinnoufisierul
13 </ol>
14 </body>
15 </html>
Listele ordonate pot fi imbricate intre ele sau cu liste neordonate, ca n exemplul urmtor:
1 <html>
2 <head><title>listex_8</title></head>
3 <body><h1align="center">Olistaordonatadelisteordonatesineordonate</h1><hr>
4 <ol>Unsisteminformaticinclude:
5 <li>Hardware:
6 <ol>
7 <li>placadebaza
8 <li>procesor
9 <li>memorie
10 <li>harddisk
11 </ol>
12 <li>Software:
13 <ul>
14 <li>Linux
15 <li>Windows
16 <li>OS/2
17 <li>Unix
18 </ul>
19 <li>Softwaredeaplicatie:
20 <ultype="disc">
21 <li>VisualC++
22 <li>Java
23 <li>SQL
24 <li>CorelDraw
25 </ul>
26 </ol>
27 </body>
28 </html>
O lista de meniuri este un bloc delimitat de etichete corespondente <menu>...</menu>. Fiecare element al listei este initiat de eticheta
<li> ( list item ). Cele mai multe browsere afieaz lista de meniuri ca pe o lista neordonata.
O lista de directoare este un bloc delimitat de etichete corespondente <dir>...</dir> (de la " director "). Fiecare element al listei este
iniiat de eticheta <li> (list item). Cele mai multe browsere afieaz lista de directoare ca pe o lista neordonata.
(Nu se recomanda utilizarea acestori tipuri de liste).
Utilizri speciale ale listelor
Dac ntro list, n loc de elementele acesteia introduse prin <li>, se insereaz un bloc de text, aceasta va fi identat ( ntocmai ca
12/42
elementele unei liste), exemplu:
1 <html>
2 <head>
4 </head>
5 <body>
6 <h1>Unblocdetextindentat</h1><hr>
7 <ol>Unblocdetextindentat.Unblocdetextindentat.Unblocdetextindentat.Unblocdetextindentat.
8 Unblocdetextindentat.Unblocdetextindentat.Unblocdetextindentat.Unblocdetextindentat.Unblocdetextindentat.
9 </ol>
10 </body>
11 </html>
n exemplul urmtor lista de definiii are itemii <dt> si <dd> multipli:
1 <html>
2 <head>
4 </head>
5 <body><h1align="center">Olistadedefiniiispeciala</h1>
6 <hr>
7 <dl>Program
8 <dt><b>Luni</b>
9 <dt><b>Marti</b>
10 <dt><b>Miercuri</b>
11 <dd><i>Ora9.00.</i>Insciere
12 <dd><i>Ora11.00.</i>Audieri
13 <dd><i>Ora13.30.</i>Raspunsuri
14 </dl>
15 </body>
16 </html>
Ultimul exemplu este o lista neordonata personalizat care utilizeaz pe post de elemente imagini si texte.
1 <html>
2 <head>
4 </head>
5 <body><h1>Olistapersonalizata</h1><hr>
6 <ul>TipuridemasiniVolkswagensunt:<br/>
7 <imgsrc="images/reddot.gif">Golf<br/>
8 <imgsrc="images/reddot.gif">Jetta<br/>
9 <imgsrc="images/reddot.gif">Passat<br/>
10 <imgsrc="images/reddot.gif">Bora<br/>
11 <imgsrc="images/reddot.gif">Corrado<br/>
12 <imgsrc="images/reddot.gif">Transporter<br/>
13 </body>
14 </html>
5. Tabele. Noiuni i marcaje utilizate.
Tabelele ne permit s cream o reea dreptunghiular de domenii, fiecare domeniu avnd propriile opiuni pentru culoarea fondului,
culoarea textului, alinierea textului etc.
Pentru a insera un tabel se folosesc etichetele corespondente <table>...</table>. Un tabel este format din rnduri. Pentru a insera un
rnd intrun tabel se folosesc etichetele <tr>...</tr> ( de la " table row "= rnd de tabel ).Folosirea etichetei de sfrit </tr> este
opional.
Un rnd este format din mai multe celule ce conin date.
O celula de date se introduce cu eticheta <td>..</td>, exemplu:
1 <html>
2 <head>
3 <title>Tabel_ex1</title>
4 </head>
5 <body>
6 <h1align="center">Untabelsimpluformatdin4liniisi2coloane</h1>
7 <hr>
8 <table>
9 <tr><td>cell11</td><td>cell11</td></tr>
13 </table>
14 </body>
15 </html>
13/42
n mod prestabilit, un tabel nu are chenar. Pentru a aduga un chenar unui tabel, se utilizeaz un atribut al etichetei <tabel> numit
border.
Acest atribut poate primi ca valoare orice numar ntreg ( inclusiv 0 ) si reprezint grosimea n pixeli a chenarului tabelului.
Dac atributul border nu este urmat de o valoare atunci tabelul va avea o grosime prestabilit egal cu 1 pixel, o valoare egal cu 0 a
grosimii semnific absenta chenarului.
Cnd atributul border are o valoare nenul chenarul unui tabel are un aspect tridimensional, exemplu:
1 <html>
2 <head>
4 </head>
5 <body>
6 <h1align="center">Untabelsimplucuchenar</h1>
7 <hr>
8 <tableborder="4">
13 </table>
14 </body>
15 </html>
Alinierea tabelului
Pentru a alinia un tabel intro pagin Web se utilizeaz atributul align al etichetei <table>, cu urmtoarele valori posibile:
"left " ( valoarea prestabilita );

"center ";
"right ".
Alinierea este important pentru textul ce nconjoar tabelul. Astfel :
daca tabelul este aliniat stanga ( <table align="left"> ), atunci textul care urmeaz dup punctul de inserare al tabelului va fi dispus in partea
dreapta a tabelului.
daca tabelul este aliniat dreapta ( <table align="right"> ), atunci textul care urmeaz dup punctul de inserare al tabelului va fi dispus in partea
stanga a tabelului.
daca tabelul este aliniat pe centru ( <table align="center"> ), atunci textul care urmeaz dup punctul de inserare al tabelului va fi afiat pe toata
limea paginii, imediat sub tabel.
1 <html>
2 <head>
4 </head>
5 <body>
6 <h1align="center">Untabelaliniatladreapta</h1>
7 <hr>
8 Textinaintedetabel.Textinaintedetabel.Textinaintedetabel.Textinaintedetabel.Textinaintedetabel.Textinainte de tabel.
9 <tableborderalign="right">
12 </table>
13 Textduptabel.Textduptabel.Textduptabel.Textduptabel.Textduptabel.Textduptabel.Textduptabel.Textduptabel.Text dup
14 </body>
15 </html>
Distanta dintre tabel i celelalte elemente din pagina Web poate fi stabilit cu ajutorul atributelor hspace si vspace al etichetei <table>.
Valoarea atributului hspace poate fi orice numar pozitiv, inclusiv 0, si reprezint distanta pe orizontala dintre tabel si celelalte elemente
ale paginii Web.
Valoarea atributului vspace poate fi orice numar pozitiv, inclusiv 0, si reprezint distanta pe verticala dintre tabel si celelalte elemente
ale paginii Web.
Aceste atribute funcioneaz numai cu Netscape Communicator.
Definirea culorilor de fond pentru un tabel
Culoarea de fond se stabilete cu ajutorul atributului bgcolor, care poate fi atasat ntregului tabel prin eticheta <table>, unei linii prin
eticheta <tr> sau celule de date prin eticheta <td>.
Valorile pe care le poate primi bgcolor sunt cele cunoscute pentru o culoare.
Dac n tabel sunt definite mai multe atribute bgcolor, atunci prioritatea este urmtoarea: <td>, <tr>, <table>(cu prioritate cea mai
mica).
1 <html>
2 <head>
4 </head>
5 <body>
6 <h1align="center">Untabelsimplucolorat</h1>
7 <hr>
8 <tableborder="3"bgcolor="green">
9 <tr><td>verde11</td><tdbgcolor="red">rosu12</td></tr>
u 14/42
9 <tr><td>verde11</td><tdbgcolor="red">rosu12</td></tr>
10 <trbgcolor="blue"><td>albastru21</td><tdbgcolor="yellow">galben22</td></tr>
11 <trbgcolor="cyan"><td>cell31</td><td>cell32</td></tr>
12 <tr><td>cell41</td><tdbgcolor="white">cell42</td></tr>
13 </table>
14 </body>
15 </html>
Culoarea textului din fiecare celula se poate stabili cu ajutorul expresiei:

<font color="valoare">...</font>.
Dimensionarea celulei unui tabel
Distanta dintre doua celule vecine se definete cu ajutorul atributului cellspacing al etichetei <table>. Valorile acestui atribut pot fi
numere ntregi pozitive, inclusiv 0, si reprezint distanta in pixeli dintre doua celule vecine.
Valoarea prestabilita a atributului cellspacing este 2.
1 <html>
2 <head>
4 </head>
5 <body>
6 <h1align="center">Untabelfarachenardecelulealipite</h1>
7 <hr>
8 <tablecellspacing="0">
9 <tr><tdbgcolor="gray">gri11</td><tdbgcolor="red">rosu12</td></tr>
10 <trbgcolor="blue"><td>albastru21</td><tdbgcolor="yellow">galben22</td></tr>
11 </table>
12 </body>
13 </html>
Distanta dintre marginea unei celule si coninutul ei poate fi definita cu ajutorul atributului cellpadding al etichetei <table>. Valorile
acestui atribut pot fi numere ntregi pozitive, si reprezint distanta in pixeli dintre celule si coninutul ei.
Valoarea prestabilita a atributului cellpadding este 1.
1 <html>
2 <head>
3 <title>tabelex_6</title>
4 </head>
5 <body><h1align=center>Untabeldecelulemari</h1>
6 <hr>
7 <tablebordercellpadding="20">
8 <tr><td>gri11</td><td>rosu12</td></tr>
9 <tr><td>albastru21</td><td>galben22</td></tr>
10 </table>
11 </body>
12 </html>
Dimensionarea unui tabel
Dimensiunile unui tabel latime si nlimea pot fi stabilite exact prin intermediul a doua atribute, width i height, ale etichetei
<table>.
Valorile acestor atribute pot fi:
numere ntregi pozitive reprezentnd latime respectiv nlimea in pixeli a tabelului;

numere ntregi intre 1 si 100, urmate de semnul %, reprezentnd fraciunea din latime si nlimea totala a paginii.
1 <html>
2 <head>
4 </head>
5 <body>
6 <h1align="center">Untabeldede200pixeliX50%</h1>
7 <hr>
8 <tableborderwidth="200"height="50%">
11 </table>
12 </body>
13 </html>
n exemplul urmtor se utilizeaz un truc care permite afiarea intro pagin Web a unui text poziionat n centrul paginii.
1 <html>
2 <head>
4 </head>
5 <body>
6 <h1align="center">Untextcentratintropagina</h1>
u h.md/lectii_view.php?id=1 15/42
6 <h1align="center">Untextcentratintropagina</h1>
7 <tablewidth="100%"height="100%">
8 <tr><tdalign="center"><h2>Textcentrat.</h2></td></tr>
9 </table>
10 </body>
11 </html>
Titlul unui tabel
Unui tabel i se poate ataa un titlu cu ajutorul etichetei <caption> ( de la "table caption" = titlu tabel ).
Aceasta eticheta trebuie plasata in interiorul etichetelor <table>...</table>, dar nu in interiorul etichetelor <tr> sau <td> Titlul unui
tabel poate fi aliniat cu ajutorul atributului align al etichetei <caption> care poate lua una dintre valorile:
" bottom " ( sub tabel );

" top " ( deasupra tabelului );
" left " ( la stanga tabelului );
" right " ( la dreapta tabelului ).
1 <html>
2 <head>
4 </head>
5 <body>
6 <h1align="center">Untabelcutitlu</h1>
7 <tableborder><captionalign="top">Masini
8 <tr><td>Mercedes</td><td>Citroen</td><td>Jaguar</td></tr>
9 <tr><td>BMW</td><td>Volvo</td><td>Renault</td></tr>
10 </table>
11 </body>
12 </html>
Cap de tabel
Un tabel poate avea celule cu semnificaia de cap de tabel. Aceste celule sunt introduse de eticheta <th> ( de la " tabel header " = cap de
tabel ) n loc de <td>.
Toate atribute care pot fi ataate etichetei <td> pot fi de asemenea ataate etichetei <th>. Coninutul celulelor definite cu <th> este
scris cu caractere aldine si centrat.
1 <html>
2 <head>
4 </head>
5 <body>
6 <h1align="center">Untabelcutitlusicapdetabel</h1>
7 <tableborder><captionalign="bottom">Preturilemasinii
8 <tr><th>Pret</th><th>Citroen</th><th>Jaguar</th><th>BMW</th><th>Volvo</th></tr>
9 <tr><th>Indolari</th><td>5000</td><td>100000</td><td>50000</td><td>80000</td></tr>
10 <tr><th>Inlei</th><td>2000000</td><td>2000000000</td><td>2000000</td><td>16000000</td></tr>
11 </table>
12 </body>
13 </html>
Alinierea coninutului unei celule
Alinierea pe orizontala a coninutului unei celule se face cu ajutorul atributului align care poate lua valorile:
"left" ( la stanga );
"center" ( centrat , valoarea prestabilita );
"right" ( la dreapta );
"char" ( alinierea se face fata de un caracter ).
Alinierea pe verticala a coninutului unei celule se face cu ajutorul atributului valign care poate lua valorile:
"baseline" ( la baza );
"bottom" ( jos );
"middle" ( la mijloc, valoarea prestabilita );
"top" ( sus ).
Aceste atribute pot fi ataate att etichetei <tr> pentru a defini tuturor elementelor celulelor unui rnd, cat si etichetelor <td> si <th>
pentru a stabili alinierea textului intro singura celula.
1 <html>
2 <head>
4 </head>
5 <body>
6 <h1align="center">Untabelavandconinutulceluleloraliniate</h1>
7 <tableborderwidth="50%"height="50%">
8 <tralign="right"><td>Aici</td><td>alinierea</td><td>estecentru</td><td>dreapta</td></tr>
9 <tr><tdalign="left">stanga</td><tdalign="center">centru</td><tdvalign="top">sus</td><tdvalign="bottom">jos</td></tr>
9 <tr><tdalign="left">stanga</td><tdalign="center">centru</td><tdvalign="top">sus</td><tdvalign="bottom">jos</td></tr>
10 <tralign="left"><td>aici</td><td>alinierea</td><td>estecentru</td><td>stanga(implicita)</td></tr></table>
11 </body>
12 </html>
Dimensionarea exacta a celulelor unui tabel
Dimensiunea unei celule de tip <td> sau de tip <th> pot fi stabilite exact cu ajutorul a dou atribute ale acestor etichete: width pentru
latime i height pentru nlime.
Valorile posibile ale acestor atribute sunt:
numere intregi pozitive ( inclusiv 0 ) reprezentand dimensiunea in pixeli a latimii, respectiv a inaltimii unei celule;
procente din latime , respectiv inaltimea tabelului.
1 <html>
2 <head>
4 </head>
5 <body><h1align=center>Untabelcucelulede100x150depixeli</h1>
6 <hr>
7 <tableborder>
8 <tr><tdwidth="100"height="150">cell11</td><tdwidth="100"height="150">cell11</td></tr>
9 <tr><tdwidth="100"height="150">cell21</td><tdwidth="100"height="150">cell22</td></tr>
10 </table>
11 </body>
12 </html>
Tabele de forme oarecare
Un tabel trebuie privit ca o retea dreptunghiulara de celule. Cu ajutorul a doua atribute ale etichetelor <td> si <th>, o celula se poate
extinde peste celule vecine.
Astfel:
extinderea unei celule peste celulele din dreapta ei se face cu ajutorul atributului colspan, a crui valoare determin numarul de celule care se
unific.
extinderea unei celule peste celulele dedesubt se face cu ajutorul atributului rowspan, a carui valoare determin numarul de celule care se unific.
Sunt posibile extinderi simultane ale unei celule pe orizontala si pe verticala. In acest caz , in etichetele <td> si <th> vor fi prezente
ambele atribute colspan i rowspan.
1 <html>
2 <head>
4 </head>
5 <body>
6 <h1align="center">Untabelsimplucuchenar</h1>
7 <hr>
8 <tableborder="3">
9 <tr><tdrowspan="3">cell11<br>cell21<br>cell31</td><td>cell12</td><tdcolspan="2"rowspan="3">cell13,cell14<br>cell23, cell 24<
10 <tr><td>cell22</td></tr>
11 <tr><td>cell32</td></tr>
12 <tr><td>cell41</td><tdcolspan="3">cell42,cell43,cell44</td></tr>
13 </table>
14 </body>
15 </html>
Atributul " nowrap "
Atributul nowrap apartine elementelor <td> si <th> ; el interzice ntreruperea unei linii de text.Astfel , n tabel pot aprea coloane cu o
lime orict de mare.
1 <html>
2 <head>
4 </head>
5 <body>
6 <h1align="center">Untabelcuceluledelatimemare</h1>
7 <hr>
8 <tableborder>
10 <tr><tdnowrap>cell21</td><td>cell22estefoartelata,aceastacelulaestefoaretlata.</td></tr>
11 </table>
12 </body>
13 </html>
Celule vide ale unui tabel
17/42
Dac un tabel are celule vide, atunci aceste celule vor aparea n tabel far un chenar de delimitare.
n scopul de a afia un chenar pentru celule vide se utilizeaz urmatoarele trucuri:
dupa <td> se pune ;

dupa <td> se pune <br>.
Caracterul ( no break space ) este de fapt caracterul spatiu. Un spaiu ntrodus prin intermediul acestui caracter nu va fi ignorat de
browser.
1 <html>
2 <head>
4 </head>
5 <body>
6 <h1align="center">Untabelcucelulevide</h1>
7 <hr>
8 <tableborder>
9 <tr><td>cell11<td><td>cell12</td><td>cell13</td></tr>
10 <tr><td> </td><td></td></tr>
11 </table>
12 </body>
13 </html>
Atribute Internet Explorer pentru tabele
Urmatoarele atribute ale etichetei <table> functioneaza cu Internet Explorer 4.0 , 5.0, dar nu cu Netscape Communicator 4.5:
background permite stabilirea unei imagini pentru fondul unui tabel.Primeste ca valoare adresa URL a imaginii folosite pentru fond;
bordercolor permite stabilirea culorii pentru chenarul unui tabel;
bordercolorlight permite stabilirea culorii pentru chenarul 3D al unui tabel;
bordercolordark permite stabilirea culorii pentru chenarul 3D al unui tabel;
1 <html>
2 <head>
4 </head>
5 <body>
6 <h1align="center">Atribute"InternetExplorer"</h1><hr>
7 <tableborder="5"background="Taj_Mahal.jpg"cellspacing="15"bordercolor="maroon"bordercolordark="red">
8 <trbgcolor="yellow"><td>cell11</td><td>cell12</td><td>cell13</td></tr>
9 <trbgcolor="yellow"><td> </td><td></td><td></td></tr>
10 </table>
11 </body>
12 </html>
Grupuri de coloane
Blocul <colgroup>...</colgroup> permite definirea unui grup de coloane. Atributele acceptate de <colgroup> sunt:
span determina numarul de coloane dintrun grup;

width determina o latime unica pentru coloanele din grup;
align determina un tip unic de aliniere pentru coloanele din grup.
Exemplu:
<colgroup span="3" width="100"></colgroup>
ntrun bloc <colgroup>, coloanele pot avea configurri diferite dac se utilizeaz elementul <col>, care admite atributele:
span identifica acea coloan din grup pentru care se face configurarea. Dac lipsete, atunci coloanele sunt configurate n ordine;
width determina o latime pentru coloana identificata prin span;
align determina o aliniere pentru coloana identificata prin span.
1 <html>
2 <head>
4 </head>
5 <body>
6 <h1align="center">Grupuridecoloane</h1>
7 <hr>
8 <tablewidth="400"cellspacing="10">
9 <colgroup><colwidth="100"align="right"><colwidth="100"align="center"><colwidth="200"align="right"></colgroup>
10 <tr><tdvalign="top">Textinprimacoloana.Textinprimacoloana.Textinprimacoloana.Textinprimacoloana.</td><tdvalign
11 </table>
12 </body>
13 </html>
Atributele frame si rules
Atributul frame al etichetei <table> permite specificarea parilor din chenarul unui tabel care vor fi afiate.
18/42
Valorile posibile ale acestui atribut sunt:
void elimina toate muchiile exterioare ale tabelului;

above afieaz o muchie in partea superioara a cadrului tabelului;
below afieaz o muchie in partea inferioara a cadrului tabelului;
hsides afieaz cate o muchie in partea superioara si inferioara cadrului tabelului;
lhs afieaz o muchie in partea din stanga a cadrului tabelului;
rhs afieaz o muchie in partea din dreapta a cadrului tabelului;
vsides afieaz o muchie in partea din stanga si din dreapta a cadrului tabelului;
box afieaz o muchie pe toate laturile cadrului tabelului;
border afieaz o muchie pe toate laturile cadrului tabelului;
Atributul rules al etichetei <table>permite alegerea unor delimitatori pentru celulele unui tabel. Valorile posibile sunt:
none elimina toate muchiile interioare ale tabelului;

groups afieaz muchii orizontale intre toate grupurile din tabel.Grupurile sunt specificate prin elementele <thead>, <tbody>, <tfoot>si
<colgroup>.
rows afieaz muchii orizontale intre toate liniile tabelului;
cols afieaz muchii verticale intre toate coloanele tabelului;
all afieaz muchii intre toate liniile si coloanele;
1 <html>
2 <head>
4 </head>
5 <body>
6 <h1align="center">Atributeleframessirules</h1>
7 <tablewidth="400"frame="box"rules="rows"cellspacing="10">
8 <tr><td>cell11</td><td>cell12</td><td>cell13</td></tr>
9 <tr><td>cell21</td><td>cell22</td><td>cell23</td></tr>
10 </table>
11 </body>
12 </html>
Subblocurile unui tabel
n specificatiile HTML 4.0, continutul unui tabel poate fi mprit n subblocuri prin elementele:
<thead><tr><td>...</thead> ( un singur rand );

<tfoot><tr><td>...</tfoot> ( un singur rand );
<tbody><tr><td>...</tbody> ( oricate randuri );
ntrun tabel exista un singur subbloc de tipul <thead> i un singur subbloc de tipul <tfoot>, dar pot exista mai multe subblocuri de tip
<tbody>.
6. Operarea cu obiecte. Inserarea imaginilor, sunetelor i videoclipurilor.
6.1.Inserarea imaginilor
Folosirea imaginilor sporete atractivitatea i designul paginii, duce la o mai bun inelegere a mesajului, dar trebuie luat n consideraie
i faptul c excesul de imagini va duce la ncrcarea greoaie a siteului. Exist numeroase formate grafice, dar cele mai rspndite sunt:
GIF (Graphics Interchange Format) introdus de Compuserve

JPEG (Joint Photographic Expert Group)
PNG (Portable Network Graphic Format Grafic portabil n reea)
Aceste formate sunt dependente de platform. Imaginile grafice sunt construite din pixeli, care sunt puncte distincte de informaie de
imagine. Fiecare pixel necesit un bit de culoare. Principalele caracteristici ale formatelor de imagine sunt: numrul de culori, compresia,
transparena, ntreeserea i animaia. Asemnrile i deosebirile dintre cele trei formate grafice sunt:
Imaginile GIF pot utiliza doar 256 de culori, avnd nevoie de 8 bii, n timp ce formatele JPEG i PNG pot utiliza milioane de culori, avnd 24 de bii
de culoare, respectiv 32 de bii /pixeli de culoare. Ceea ce face formatul GIF att de utilizat nu este numai paleta mic de culori (256), dar i
posibilitatea reducerii numrului de culori, astfel, dac este nevoie doar de 2 culori, se utilizeaz numai un bit, ceea ce reduce dimensiunea
fiierului de 8 ori.
Toate aceste trei formate grafice pot comprima imaginea pentru a reduce dimensiunile fiierelor. Comprimarea se poate face, n mod diferit, pentru
fiecare format, i, din aceste motive, ele pot avea dimensiuni mai mici ntrun format dect n altul.
Formatele GIF i PNG admit culoarea transparent, n timp ce formatul JPEG nu admite transparena.
Formatele GIF i PNG admit animaia, n timp ce, cu formatul JPEG, nu se poate obine animaie. De exemplu, pentru a obine animaie pentru
imagini GIF se poate folosi pentru Windows pachetul GIF Construction Set, iar pentru Macintosh pachetul soft GIFBuilder.
Toate cele trei formate accept ntreeserea. De exemplu, cnd se vizualizeaz o pagin web, se pot observa imaginile care apar linie cu linie, de la
forma brut pn la redarea final, aceasta reprezint ntreeserea. Dei dimensiunea fiierelor crete cu pn la 10%, cu ajutorul acestei
ntreeseri, vizitatorul poate si fac o imagine despre ceea ce se va descrca.
Avnd n vedere cele cinci caracteristici ale formatelor de imagine, acestea pot fi recomandate:
GIF pentru majoritatea imaginilor din web, butoane, panouri publicitare, desene etc., datorit dimensiunii mici a fiierelor.
JPEG pentru fotografii, cnd se dorete s se redea ct mai exact culoarea real a imaginii.
PNG pentru desene complexe, dar i pentru fotografii, acesta fiind formatul care mbin caracteristicile celor dou.
Imaginile pot fi descrcate de la adrese absolute sau relative. Adresele URL (Uniform Resource Locator) reprezint standarde de
19/42
identificare a resurselor (de exemplu, fiiere) i pot fi adrese URL absolute i relative.
Adrese URL absolute
Adresele absolute identific locaia unui fiier imagine de pe Internet sau alte calculatoare conectate la Internet i au sintaxa:
protocol/nume_calculator/cale/nume_fiier
Un exemplu de adres URL absolut: http://cris.ro/images/eu.jpg unde:
htpp:// este protocolul Internet utilizat;

images este calea pn la fiierul imagine dorit;
eu.jpg este fiierul imagine C.A.
cris.ro este numele calculatorului;
Adrese URL relative
O adres relativ identific locaia unei imagini, descriind o cale relativ la directorul curent unde se afl fiierul imagine. Adresele
relative se refer la localizarea fiierului imagine de pe calculatorul personal i are sintaxa: cale/nume_fiier.
Referirea la:
directorul printe se poate face prin ../
directorul rdcin se poate face prin /
Un exemplu de adres URL relativ: /../../../friend.jpg sau se mai poate scrie c:/windows/web/wallpaper/friend.jpg
Toate imaginile cu care vom lucra vor avea adresa URL exprimat n funcie de directorul ce conine documentul HTML care face referire la
imagine, adic adres relativ.
Imaginile se inseraez n pagini cu ajutorul tagului <img>, care este un element inline, adic poate fi inserat oriunde n pagin. Sintaxa
acestui element este: <img atribute>.
n continuare este prezentat un exemplu de utilizare a elementului <img>:
1 <html>
2 <head></head>
3 <body>
4 HotelulTRUMPTajMahal
5 <imgsrc="Taj_Mahal.jpg"height="150"width="150"border="4">delaAtlanticCity
6 <body>
7 <html>
Pentru ca acest exemplu s poat fi executat, trebuie ca fiierul Taj_Mahal.jpg s fie n acelai folder cu pagina, deoarece nu sa indicat
nicio adres.
Atributele elementului img
Atributele elementului <img> sunt: src, alt, align, border, height, width,hspace, vspace.
n continuare vor fi descrise succint aceste atribute.
Atributul src
Atributul src este un atribut obligatoriu al elementului IMG, care identific fiierul ce conine imaginea care se dorete a fi inserat.
Fiierele imagine pot avea extensia: .jpg, jpeg, png etc. Fiierul care conine imaginea se gsete n directorul curent (ca n exemplul de
mai sus), n alt folder din calculatorul curent sau n reeaua web. n cazul n care fiierul se afl:
n alt locaie dect directorul curent, numele fiierului trebuie precedat de calea relativ la directorul curent;
n reeaua web, trebuie dat adresa URL absolut, ca de exemplu http://cich.md/galerie/img_1631.jpg.
Atributul alt
Exist posibilitatea ca imaginile s nu se poat ncrca din diferite motive, situaie n care se folosete atributul alt al elementului <img>.
Valoarea acestui atribut este un text, care va fi afiat n locul imaginii.
1 <html>
2 <head></head>
3 <body>
4 <imgsrc="Taj_Mahal.jpg"height=150width=150alt="HotelulTRUMPTajMahal">delaAtlanticCity
5 </body>
6 </html>
Atributul align
Atributul align indic browserului cum va fi aliniat poza fa de text. n lipsa unei opiuni, poza este plasat acolo unde este scris n
cod (<img>este element inline, iar textul ncepe de la baza pozei).Valorile atributului sunt:
left aliniere la stnga i textul curge pe lng imagine n dreapta ei, ncepnd din partea superioar;
right aliniere la dreapta i textul curge pe lng imagine n stnga ei, ncepnd din partea superioar ;
20/42
top textul este plasat n partea superioar a imaginii;
middle textul are plasat, la mijlocul imaginii, numai primul rnd, restul continund sub imagine;
bottom textul este plasat n partea de jos a imaginii i continu sub imagine.
n exemplul urmtor se poate vedea modul de aliniere a imaginii ntro pagin:
1 <html>
2 <head>
3 </head>
4 <body>
5 <h2align="center">AlinieriImagini</h2>
6 <pre>AliniereBottom</pre>
7 <imgsrc="Taj_Mahal.jpg"height="100"width="100"align="bottom">
8 Aceastaesteoimaginealiniata<i>bottom</i>careestealiniereaimplicitapeverticala.
9 Numaiprimulrndestealiniatbottomrestultextuluiestesubimagine.
10 <pre>AliniereTop</pre>
11 <imgsrc="Taj_Mahal.jpg"height="100"width="100"align="top">
12 Aceastaesteoimaginealiniata<i>Top</i>,careestealinierea<i>sus</i>peverticala.
13 Numaiprimulrndestealiniat<i>Top</i>restultextuluiestesubimagine.
14 <pre>AliniereMiddle</pre>
15 <imgsrc="Taj_Mahal.jpg"height="100"width="100"align="middle">
16 Aceastaesteoimaginealiniata<i>Middle</i>careestealinierea<i>pecentru</i>peverticala.
17 Numaiprimulrindestealiniat<iI>Middle</i>restultextuluiestesubimagine.
18 <pre>AliniereLeft</pre>
19 <imgsrc="Taj_Mahal.jpg"height="100"width="100"align="left">
20 Aceastaesteoimaginealiniata<i>Left</i>careestealinierea<i>stinga</i>peorizontala.
21 <p>Textulcurgepelngpozndreaptaei.
22 <pre>AliniereRight</pre>
23 <imgsrc="Taj_Mahal.jpg"height="100"width="100"align="right">
24 Aceastaesteoimaginealiniata<i>Right</i>careestealinierea<i>dreapta</i>peorizontala.
25 <p>Textulcurgepelingapoznstngaei.
26 </body>
27 </html>
Atributul border
Atunci cnd se insereaz o imagine, browserul o va afia fr chenar. Pentru a aduga un chenar unei imagini se folosete atributul
border=nr_pixeli, unde nr_pixeli reprezint grosimea chenarului n pixeli. Valoarea implicit este 0. Dac n exemplul de mai sus se mai
adaug acest atribut <img src="Taj_Mahal.jpg" height ="150" width = "150" border = "4"> browserul va afia: vezi ...
Atributele width i height
Imaginea este transferat de browsere de la adresele URL la adresa de unde se vizualizeaz pagina, la dimensiunile ei reale. Pentru a
redimensiona o imagine pe lime se folosete atributul width, iar pe nlime se folosete atributul height. Redimensionarea unei imagini
se face n mod absolut n pixeli sau prin raportare la ecran, astfel c valorile acestor atribute pot fi date n:
Numere naturale, ce reprezint dimensiunea n pixeli;

n procente, ce reprezint o fraciune din dimensiunea ferestrei.
OBSERVAII!
1. Dac se modific doar o dimensiune, imaginea va fi afiat de browser proporional;

2. Dac se modific ambele dimensiuni, imaginea va fi afiat de browser deformat.
Un exemplu de redimensionare a imaginii este dat mai jos.
1 <html>
2 <head></head>
3 <body>
4 <imgsrc="Taj_Mahal.jpg"height="150"width="150"alt="HotelulTRUMPTajMahal">delaAtlanticCity
5 <imgsrc="Taj_Mahal.jpg"width="80"height="200"alt="HotelulTRUMPTajMahal">delaAtlanticCity
6 <imgsrc="Taj_Mahal.jpg"height="350"alt="HotelulTRUMPTajMahal">delaAtlanticCity
7 </body>
8 </html>
Atributele hspace i vspace
Aceste atribute au acelai efect ca i atributele cu acelai nume ale elementului <table>, i, anume, asigur distana de la imagine la
celelalte componente din pagin, pe orizontal (hspace) i pe vertical (vspace), adic definesc spaii albe n jurul imaginilor.
Un exemplu n care sunt folosite aceste atribute este dat mai jos.
1 <p><html>
2 <head></head>
3 <body>
4 <p>TajMahalulafostconstruitdealcincileampratmogul,ShahJahan,nmemoriaceleideadouasotii
5 MumtazMahal,printesapersanmusulman.mprteasaamuritdupnatereaceluideal14leacopil,alturidesoul
6 su,ntimpulcampanieidezdrobirearebeliunilordinBurhanpur.Moarteaeilaafectatntrattpempratnctprul
7 iaalbitnnumaictevaluni.naintedeultimasuflareMumtazlarugatpempratpatrulucruri:siconstruiascunmormnt,
8 sserecstoreasc,saiiubeascfiiiisivizitezemormntullaaniversare.ahulapierdutladecesulsoieisale
8 sserecstoreasc,saiiubeascfiiiisivizitezemormntullaaniversare.ahulapierdutladecesulsoieisale
9 nunumaioconsoart,ciiunabiliinteligentsfetnicpolitic.Aaajuratmpratulcvaconstruiunedificiufunerarmare i
10 fregalnlume.</p>
11 <p>HotelulTRUMPTajMahal<imgsrc="Taj_Mahal.jpg"height="150"width="150"alt="HotelulTRUMPTajMahal"hspace="50"vspace
12 </body>
13 </html>
Atributul clear al elementului BR
Dac se dorete a se terge textul din jurul unei imagini se folosete elementul <br clear=valoare>, unde valoare poate fi:
all se terge tot textul din jurul imaginii

left se terge tot textul din stnga imaginii
right se terge tot textul din dreapta imaginii
none se las textul din jurul imaginii
n exemplul de mai sus se adaug <BR clear=right>, dup elementul <img>
O imagine poate fi utilizata pentru a stabili fondul unei pagini Web. In acest scop se foloseste atributul background al etichetei <body>,
avnd ca valoare adresa URL a imaginii.
Imaginea se multiplic pe orizontal i pe vertical pn umple ntregul ecran.
1 <html>
2 <head><title>Imaginipentrufundal</title><head>
3 <bodybackground="../images/bg.gif">
4 <pre>
5 1
6 2
7 3
8 4
9 5
10 6
11 7
12 8
13 9
14 </pre>
15 </body>
16 </html>
Utilizari speciale ale imaginilor
Imaginile pot fi utilizate pentru a obtine efecte deosebite intro pagina web.Printre aceste utilizri speciale putem enumera:
Linii orizontale formate cu ajutorul imaginilor;

Simboluri speciale pentru elementele unei liste neordonate.
6.2.Inserarea sunetelor si videoclipurilor
Multimedia se prezint ntro multitudine de formate, iar pe Internet vei gsi multe dintre aceste elemente nglobate n pagini web.
Browserele actuale ofer suport pentru multe dintre aceste formate, dar nu pentru toate. Suportul pentru sunete, animaii i video este
tratat n mod diferit de browsere diferite. Unele elemente pot fi manevrate intern, altele necesit anumite pluginuri, n vreme ce altele
pot solicita activarea anumitor controale ActiveX.
n acest capitol vei afla despre diferitele formate multimedia i cum s le folosii ntro pagin web.
Elementele multimedia (precum sunetele i video) sunt stocate n fiiere media. Modalitatea cea mai simpl de a determina tipul unui
fiier media este de a analiza extensia fiierului respectiv .
Formatul fiierelor multimedia ce conin sunete.
Sunetele pot fi stocate n diferite formate de fiiere. Astfel deosebim:
a) Formatul MIDI
MIDI (Musical Instrument Digital Interface) este un format ce permite transmiterea de informaii muzicale ntre dispozitive electronice
muzicale (precum sintetizatoare) i plcile de sunet ale calculatoarelor.Formatul MIDI a fost implementat n 1982 de ctre industria
muzical. Acest format este foarte flexibil i poate fi folosit pentru (aproape) orice, de la crearea unor sunete foarte simple, pn la
crearea unora cu adevrat profesionale. Fieierele MIDI nu conin sunete, ci un set de instruciuni digitale muzicale (note muzicale) care
pot fi interpretate de plcile de sunet ale calculatoarelor.Dezavantajul la acest tip de fiiere const n faptul c nu pot stoca muzic (n
toat complexitatea ei), ci doar note muzicale.Avantajul l constituie mrimea mic a acestor fiiere, prin urmare se pot ncrca uor ntr
o pagin web, precum i faptul c acest format este suportat de majoritatea sistemelor de operare i de cele mai populare browsere de
Internet. Fiierele de tip MIDI au extensia .mid sau .midi.
b) Formatul RealAudio
Formatul RealAudio a fost dezvoltat pentru Internet de ctre Real Media. Acest format suport chiar i video.Formatul permite difuzarea
de informaii audio (muzic online, Internet radio) cu lime de band joas. Din cauza acestei limi de band, calitatea este, de cele
mai multe ori, slab.Fiierele de tip RealAudio au extensia .rm sau .ram.
22/42
c) Formatul AU
Acest formatul a fost dezvoltat de ctre Sun Microsystems i este suportat de majoritatea sistemelor de operare.Aceste fiierele au
extensia .au.
d) Formatul AIFF
AIFF (Audio Interchange File Format) a fost dezvoltat de ctre Apple. Acest tip de fiiere nu sunt suportate de toate browserele.Aceste
fiierele au extensia .aif sau .aiff.
e) Formatul SND
SND (Sound) a fost dezvoltat, de asemenea, de ctre Apple i au acelai dezavantaj, i anume c nu sunt suportate de toate browser
ele.Aceste fiierele au extensia .snd.
f) Formatul WAVE
WAVE (waveform) a fost dezvoltat de ctre IBM i Microsoft. Este un format suportat de toate computerele pe care ruleaz Windows i
este recunoscut de majoritatea browserelor.Fiierele de tip WAVE au extensia .wav.
g) Formatul MP3
Fiierele MP3 sunt de fapt fiiere MPEG, dezvoltate iniial pentru video de ctre Moving Pictures Experts Group. Se poate afirma c
fiierele MP3 reprezint partea de sunet dintrun fiiere video n format MPEG.MP3 este n prezent unul dintre cele mai populare formate
folosite la nregistrarea muzicii. Sistemul de codificare MP3 combin o bun compresie (ce duce la fiiere mici) cu calitate nalt. Este de
ateptat ca pe viitor toate sistemele de operare s ofere suport pentru acest tip de format.Fiierele de tip MP3 au extensia .mp3 sau
.mpga.
n funcie de scopul pentru care creai o pagin web multimedia va trebui s v orientai i asupra unui anumit format de fiier. Astfel,
dac dorii ca sunetele nregistrate (muzic sau de alt tip) s poat fi asculatet de toi vizitatorii paginii web, atunci trebuie s folosii
fiiere n format WAV, ntruct este cel mai popular format pe Internet i este suportat de majoritatea browserelor. Dac pagina web este
despre nregistrri muzicale, atunci formatul cel mai potrivit este MP3.
Formatul fiierelor multimedia ce conin video
i imaginile video pot fi stocate n diferite formate de fiiere. Astfel deosebim:
a) Formatul AVI
Formatul AVI (Audio Video Interleave) a fost dezvoltat de ctre Microsoft. Este un format suportat de toate computerele pe care ruleaz
Windows i este recunoscut de majoritatea browserelor. Dei este un format des ntlnit pe Internet, nu este ntotdeauna suportat de
calculatoarele cu sisteme de operare nonWindows.Fiierele de tip AVI au extensia .avi.
b) Formatul Windows Media
Acest formatul a fost dezvoltat de ctre Microsoft. i acest format este unul suportat de toate computerele pe care ruleaz Windows, dar
nu este suportat de calculatoarele cu sisteme de operare nonWindows dect n urma instalrii unor extra componente (playere
specializate).Fiierele de tip Windows Media au extensia .wmv.
c) Formatul MPEG
Formatul MPEG (Moving Pictures Expert Group) este n prezent unul dintre cele mai populare formate folosite pe Internet. Acest format
este suportat de majoritatea sistemelor de operare i de cele mai populare browsere de Internet. Fiierele de tip MPEG au extensia .mpg
sau .mpeg.
d) Formatul QuickTime
Formatul QuickTime a fost dezvoltat de ctre Apple i nu poate rula pe platformele Windows fr instalarea unui player specializat.
Fiierele de tip QuickTime au extensia .mov sau .qtm.
e) Formatul RealVideo
Formatul RealVideo a fost dezvoltat pentru Internet de ctre Real Media.Formatul permite difuzarea de informaii video (video online,
Internet video) cu lime de band joas. Din cauza acestei limi de band, calitatea este, de cele mai multe ori, slab.Fiierele de tip
RealVideo au extensia .rm sau .ram.
f) Formatul Shockwave (Flash)
Formatul Shockwave a fost dezvoltat de ctre Macromedia. Acest format necesit instalarea unui player specializat pentru a putea rula. n
prezent, aceast component este oferit preinstalat de ultimele versiuni ale browserelor Netscape i Internet Explorer. Fiierele de tip
Shockwave au extensia .swf.
Adugarea de informaii multimedia unei pagini web
Informaiile multimedia pot fi redate direct de browser sau prin intermediul unui program ajuttor (un player specializat), n funcie de
elementul HTML i de formatul fiierului multimedia folosit.
Cea mai simpl cale de a realiza acest lucru este prin folosirea unei ancore (link) care s duc la sursa elementului multimedia. Este cea
mai prietenoas metod ntruct ofer posibilitatea vizitatorilor de a alege ntre a vedea o pagin web cu elemente multimedia sau fr
acestea. n acest caz pagina se ncarc mult mai repede nemaifiind nevoie s se ncarce toate informaiile multimedia.
23/42
O metod specific, mai complex, ce are ca rezultat includerea n pagina web (ca parte integrant din aceasta) a unor informaii
multimedia, se realizeaz prin intermediul elementului<OBJECT>.
Not: Dei, n funcie de browserul folosit, mai pot fi folosite i alte elemente, cum ar fi <BGSOUND>, recunoscut de Internet
Explorer, i <EMBED>, recunoscut de Internet Explorer i Netscape, consoriul W3C (World Wide Web Consortium) recomand
utilizarea elementului <OBJECT>.
Atributele utilizate cu acest element sunt:
Atribut Descriere
archive Precizeaz locaia (URLul) fiierelor arhiv
Precizeaz locaia (URLul) obiectului. Valorile posibile depind de proiectantul elementului de control. n
classid
Windows, aceste valori sunt nscrise n regitri i pot fi accesate cu aplicaiaRegistry Editor
codebase Precizeaz calea (URIul) n care se gsete clasa obiectului specificat prin atributeleclassid,dataiarchive
codetype Specific tipul fiierului specificat prin atributulclassid
Precizeaz numele i locaia (URLul) obiectului. Se poate folosi mpreun sau ca o alternativ
data
aatributuluiclassid, n funcie de tipul obiectului
Cnd este prezent, acet atribut face ca definiia curent introdus de elementul <OBJECT> s fie tratat ca o
declare
simpl declaraie
height Specific nlimea suprafeei n care va fi afiat obiectul
name Precizeaz denumirea obiectului (cnd acesta este cuprins ntrun formular)
standby Precizeaz textul ce va fi afiat pn cnd este ncrcat obiectul
Precizeaz poziia elementului curent n document (ordinea n care va fi focalizat de utilizator cnd se
tabindex
folosete tastatura)
Determin tipul MIME asociat cu fiierul respectiv. Este un atribut opional dar recomandat cnd se
type
foloseteatributuldata
width Specific limea suprafeei n care va fi afiat obiectul
Acest element necesit n mod obligatoriu tagul de nchidere corespunztor </OBJECT>. mpreun cu elementul <OBJECT> (n interiorul
acestuia) se folosete i elementul asociat <PARAM> care definete parametrii elementului <OBJECT>.
Atributele utilizate cu acest element sunt:
Atribut Descriere
id Precizeaz un identificator unic pentru element
name Precizeaz o denumire pentru element
type Determin tipul coninutului
value Specific valoarea parametrului
valuetype Specific tipul valoarii parametrului
Elementul <OBJECT> poate suporta diferite tipuri de informaii multimedia, cum ar fi imagini, sunete, video, pagini web etc.n funcie de
tipul acestor informaii, difer i sintaxa folosit n limbajul HTML. Astfel, pentru a insera o imagine (n format .jpg), prin intermediul
elementului <OBJECT>, se folosete urmtoarea sintax:
<OBJECT HEIGHT="..." WIDTH="..." TYPE="image/jpeg" DATA="nume_fisier.jpg">

</OBJECT>
Pentru a insera un sunet (n format .wav) se folosete urmtoarea sintax:
<OBJECT CLASSID="clsid:22D6F312B0F611D094AB0080C74C7E95">
<PARAM NAME="FileName" VALUE="nume_fisier.wmv">
</OBJECT>
Pentru a insera un film (n format .wmv) se folosete urmtoarea sintax:
<OBJECT CLASSID="clsid:22D6F312B0F611D094AB0080C74C7E95">
<PARAM NAME="FileName" VALUE="nume_fisier.wmv">
</OBJECT>
Pentru a insera o pagin web se folosete urmtoarea sintax:
<OBJECT TYPE="text/html" HEIGHT="..." WIDTH="..." DATA="http://www.pagina_web.com">

</OBJECT>
Pentru a insera o animaie creat n Flash (n format .swf) se folosete urmtoarea sintax:
24/42
<OBJECT WIDTH="..." HEIGHT="..." CLASSID="clsid:D27CDB6EAE6D11cf96B8444553540000"
CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#4,0,0,0">
<PARAM NAME="SRC" VALUE=" nume_fisier.swf">
</OBJECT>
Inserarea unui film QuickTime ntro pagin web
Formatul QuickTime a fost dezvoltat de ctre Apple i, dei este un format des ntlnit pe Internet, nu poate rula pe platformele
Windows fr instalarea unui player specializat. Fiierele de tip QuickTime au extensia .mov sau .qtm. Cu ajutorul elementului <OBJECT>
poate fi uor adugat cod ntro pagin web astfel nct un film QuickTime s poat fi inserat ntro pagin web. Astfel, se poate seta
instalarea automat a unui player QuickTime n cazul n care nu este deja instalat.
Sintaxa folosit n mod uzual este de forma urmtoare:
<OBJECT WIDTH="240" HEIGHT="300" CLASSID="clsid:02BF25D58C174B23BC80D3488ABDDC6B"

CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
<PARAM NAME="src" VALUE="sample.mov">
<PARAM NAME="autoplay" VALUE="true">
<PARAM NAME="controller" VALUE="true">
</OBJECT>
Atributelewidthiheighttrebuie setate astfel nct s corespund dimensiunii fimului QuickTime (n pixeli).
Atributulclassididentific n mod unic softwareul ce va rula filmul. Trebuie setat "clsid:02BF25D58C174B23BC80D3488ABDDC6B" astfel
nct s identifice controlul ActiveX ce trebuie instalat pe computer nainte ca filmul s poat fi rulat. Dac utilizatorul nu are instalat
respectivul control ActiveX, browserul poate n mod automat sl descarce i sl instaleze.
Atributulcodebase specific calea (URIul) n care se gsete clasa obiectului specificat prin atributulclsid. Internet Explorer folosete
acest atribut pentru a specifica locaia de unde poate fi descrcat playerul corespunztor. n acest caz, trebuie setat
"http://www.apple.com/qtactivex/qtplugin.cab", aceasta fiind locaia unde se gsete ultima variant a playerului QuickTime.
Parametrulsrctrebuie s se orienteze asupra fiierului ce conine filmul.
Parametrulautoplayse seteaz "true" n cazul n care se dorete ca filmul s nceap s ruleze automat.
La fel i parametrulcontrollerse seteaz "true" n cazul n care se dorete s fie afiat bara de control a playerului.
Inserarea unui film Real Video ntro pagin web
Formatul RealVideo a fost dezvoltat pentru Internet de ctre Real Media. Formatul permite difuzarea de informaii video (video online,
Internet video) cu lime de band joas. Din cauza acestei limi de band, calitatea este, de cele mai multe ori, slab.Fiierele de tip
RealVideo au extensia .rm sau .ram. Cu ajutorul elementului <OBJECT> se introduce codul n pagina web astfel nct filmele Real Video s
poat fi inserate ntro pagin web. Spre deosebire de formatul QuickTime, nu se poate seta instalarea automat a playerului
corespunztor n cazul n care nu este deja instalat. Prin urmare, nainte de a putea rula un film n format Real Video, este necesar
instalarea programului RealPlayer. Versiunea pentru Windows poate fi descrcat de la adresahttp://uk.real.com/?mode=rp .
Sintaxa folosit n mod uzual este de forma urmtoare:
<OBJECT WIDTH="320" HEIGHT="240" CLASSID="clsid:CFCDAA038BE411cfB84B0020AFBBCCFA">

<PARAM NAME="controls" VALUE="All">
<PARAM NAME="autostart" VALUE="true">
<PARAM NAME="src" VALUE="sample.rm">
</OBJECT>
Atributelewidthiheighttrebuie setate astfel nct s corespund dimensiunii fimului Real Video (n pixeli).
Atributulclassididentific n mod unic softwareul ce va rula filmul. Trebuie setat "clsid: CFCDAA038BE411cfB84B0020AFBBCCFA" astfel
nct s identifice controlul ActiveX ce trebuie instalat pe computer nainte ca filmul s poat fi rulat.
Parametrulsrctrebuie s se orienteze asupra fiierului ce conine filmul.
Parametrulautostartse seteaz "true" n cazul n care se dorete ca filmul s nceap s ruleze automat.
Parametrulcontrolsse seteaz "All" n cazul n care se dorete s fie afiat bara de control a playerului sau "ImageWindow " n cazul n
care NU se dorete s fie afiat bara de control a playerului.
Alte metode de inserare a unor sunete ntro pagin web
Aa cum am atras atenia anterior, pentru introducerea de sunete ntro pagin web mai pot fi folosite i alte elemente, cum ar fi
<BGSOUND>, recunoscut de Internet Explorer, i <EMBED>, recunoscut de Internet Explorer i Netscape.Elementul<BGSOUND>este folosit
pentru a insera un sunet pe fundalul unei pagini web. Fiierele suportate de acest element pot fi n format WAV, AU sau MID. Atributele
caracteristice acestui element sunt:
Atribut Descriere
balance Precizeaz balansul. Poate lua valori ntre 10000 (100% stnga) i +10000 (100% dreapta)
delay Definete timpul de pauz dintre repetiii
id Definete un identificator atribuit sunetului
25/42
loop Precizeaz de cte ori va fi repetat sunetul (1 = infinit)
src Precizeaz locaia (URLul) fiierului ce conine sunete
title Precizeaz un titlu atribuit sunetului
volume Precizeaz volumul. Poate lua valori ntre 0 (max.) i 10000 (min.)
Sintaxa folosirii acestui element este foarte simpl:
<html>
<body>
<H2>Muzica in fundal </H2>
<BGSOUND SRC="http://cris.ro/muz/town.mid"> </body>
</html>
Folosind codul de mai sus vei obine o pagin web pe fundalul crei se va auzi o pies instrumental.Elementul<EMBED> este folosit
pentru a insera elemente multimedia ntro pagin web n cazul browserelor care nu suport elementul <OBJECT>. Elementul <OBJECT>
poate fi folosit cu browserele mai noi, care suport controale ActiveX (Internet Explorer 5), n vreme ce elementul <EMBED> este
recomandat s fie folosit pentru browserele mai vechi. Pentru compatibilitate, se recomand folosirea simultan a celor dou elemente.
n aceast situaie, un browser care recunoate elementul <OBJECT> va ignora elementul <EMBED>.
Atributele caracteristice acestui element sunt:
Atribut Descriere
Stabilete dac obiectul multimedia pornete n mod automat la ncrcarea paginii web. Poate lua
autostart
valoriletruesaufalse
height Specific nlimea suprafeei n care va fi afiat obiectul
Stabilete dac obiectul multimedia este vizibil pentru vizitatorul paginii web. Poate lua
hidden
valoriletruesaufalse
src Precizeaz locaia (URLul) fiierului ce conine sunete
width Specific limea suprafeei n care va fi afiat obiectul
volume Precizeaz volumul. Poate lua valori ntre 0 (max.) i 10000 (min.)
mpreun cu elementul <EMBED> se recomand folosirea elementului <NOEMBED> care ar trebui s conin informaii ce vor fi afiate n
cazul n care browserul nu suport elementul <EMBED>. Din nefericire, un browser care suport elementul <EMBED> va ignora elementul
<NOEMBED>,chiar dac este incapabil s afieze obiectul introdus de elementul <EMBED>.
Sintaxa recomandat pentru folosirea acestui element este urmtoarea:
<EMBED SRC="http://cris.ro/cale/fiier_multimedia" WIDTH="..." HEIGHT="..." >

<NOEMBED>
<P>Din pcate nu avei instalatpluginul corespunztor pentru a vedea acest tip de fiier multimedia.Putei vedea n continuare
o imagine edificatoare.
<IMG SRC="http://cris.ro/cale/fiier_imagine" WIDTH="..." HEIGHT="..." ALT="o imagine edificatoare"> </
NOEMBED>
Se poate folosi chiar i o combinaie ntre elementele <EMBED> i <BGSOUND>, astfel nct, dac unul din elemente nu este suportat de
browser, s fie recunoscut cellalt.
Folosirea codului urmtor:
1 <html>
2 <body>
3 <embedsrc="m_v/RM.mid"width="100"height="40">
4 <noembed>
5 <h2>Muzicainfundal</h2>
6 <bgsoundsrc="m_v/RM.mid">
7 </noembed>
8 </body>
9 </html>
Not: Bara de control afiat aparine playerului QuickTime deoarece a fost setat ca "Default Player" pentru fiierele de tip .MID.
Aplicaie practic
Pentru exemplificare, vom crea un fiiertest.htmlce va cuprinde o parte dintre elementele prezentate anterior:
1 <html>
2 <head>
3 <title>Adaugareadeinformatiimultimediauneipaginiweb</title>
4 </head>
5 <body>
6 <h2>Inserareauneiimagini</h2>
7 <objectheight="200"width="200"type="image/jpeg"data="../images/Taj_Mahal.jpg">
7 <objectheight="200"width="200"type="image/jpeg"data="../images/Taj_Mahal.jpg">
8 </object>
9 <br/>
10 <h2>Inserareaunuisunet(format.wav)</h2>
11 <objectclassid="clsid:22D6F312B0F611D094AB0080C74C7E95">
12 <paramname="FileName"valua="Ready.wav">
13 <embedsrc="m_v/Ready.wav"width="100"height="40">
14 <noembed>Browseruldvs.nusuportelementeleobjectiniciembed</noembed>
15 </object>
16 <br/>
17 <h2>Inserareaunuifilm(format.wmv)</h2>
18 <objectwidth="240"height="160"type="video/xmsasf"url="3d.wmv"data="m_v/news.wmv"classid="CLSID:6BF52A52394A11d3B15300C04F79FAA6
19 <paramname="url"value="m_v/news.wmv">
20 <paramname="filename"value="m_v/news.wmv">
21 <paramname="autostart"value="1">
22 <paramname="uiMode"value="full">
23 <paramname="autosize"value="1">
24 <paramname="playcount"value="1">
25 <embedtype="application/xmplayer2"src="m_v/news.wmv"width="240"height="160"autostart="true"showcontrols="true"pluginspage
26 </object>
27 <br/>
28 <h2>Inserareauneipaginiweb</h2>
29 <objecttype="text/html"heght="200"width="400"data="ex40.html">
30 </object>
31 <br/>
32 <h2>InserareauneianimatiiFlash(format.swf)</h2>
33 <objectwidth="400"height="200"classid="clsid:D27CDB6EAE6D11cf96B8444553540000"codebase="http://download.macromedia.com/pub/shockwav
34 <paramname="movie"value="m_v/flash.swf">
35 <embedsrc="m_v/flash.swf"width="400"height="200">
36 </embed>
37 </object>
38 </body>
39 </html>
7. Referine. Referine interne i externe.
Pn acum am nvat s crem documente HTML n care am ntrodus text i imagini. n acest capitol vom arta cum putem accesa orice
resurs Web, Internet i intern cu ajutorul referinelor (legturi, linkuri, hiperlegturi).
Referinele au urmtoarele roluri:
Permit trecerea de la o pagin la alta de pe Web i revenire la pagina iniial prin apsarea butonului Back al browserului;
Permit trecerea de la o pagin la alta de pe calculatorul propriu;
Permit trecerea la fiiere non web de pe Internet (ftp, telnet etc.);
Permit trecerea la fiiere non HTML (.txt, .jpg, .pdf etc.);
Permit vizitarea unei pagini ncepnd dintrun anumit loc, renunnd la barele de defilare;
Permit trimiterea unui email.
7.1. Marcajul <a>
Pentru a crea o legtur se folosete marcajul <a> ancor, care are sintaxa: <a atribute> coninut </a>
Coninutul dintre marcajele <a> i </a> poate fi text i/sau imagine, este afiat de browser sub form de legtur (colorat i subliniat), i
poate accepta comenzi de la mouse (un clic) sau de la tastatur (ENTER). Cnd este deasupra unei legturi, cursorul grafic ia forma unei
mini, indicndune astfel c browserul este pregtit s descarce resursa Internet de la adresa URL indicat. Dac un document are mai
multe legturi ne putem deplasa de la una la alta i cu mouseul i cu ajutorul tastei TAB, iar pentru a face o legtur activ se execut
clic cu butonul stng pe legtur sau se tasteaz ENTER.
Atributele tagului <a> sunt:
href;
target;
title;
name;
Atributul href
Atributul href (referin hipertext) este obligatoriu pentru tagul legtur (ca src pentru elementul <img>), are sintaxa href="adresa URL"
i are rolul de a identifica o adres URL absolut (de pe Internet) sau relativ (local). n exemplul de mai jos dm o referin ctre un
fiier local, flori.jpg, i ctre pagina Colegiului de Informatic, de pe WEB:
1 <html>
2 <head><title>Referinte</title></head>
3 <body>
4 <p>Florilemelepreferate<ahref="images/crini.jpg">Crini</a>
5 <p>DetaliidespreColegiuldeInformatica
6 <ahref="http://cich.md">CIC</a>
7 </body>
8 </html>
Atributul target
27/42
Cnd utilizatorul activeaz o legtur, browserul nlocuiete fereastra care conine legtura cu o nou fereastr, specificat de adresa
URL din href. Atributul target face s se schimbe aceast operaie implicit i el are sintaxa target="nume", unde nume definete
fereastra n care va fi ncrcat noua pagin. Numele este orice ir de caractere sau valori constante:
_blank pagina va fi ncrcat ntro nou fereastr;

_parent pagina va fi ncrcat n fereastra printe;
_top pagina va fi ncrcat n fereastra top a cadrului;
_self pagina va fi ncrcat n aceeai fereastr(implicit).
1 <html>
3 <body>
6 <ahref="http://cich.md"target="_blank">CIC</a>
7 </body>
8 </html>
Atributul title Acest atribut are un caracter general i poate fi ataat la majoritatea elementelor HTML. Sintaxa acestui element este:
title="valoare". Cnd mouseul este deasupra coninutului tagului <a> coninut </a> se transform ntro mn i va afia valoarea
atributului title, ntro sugestie de instrument (ntrun cadru).
1 <html>
3 <body>
6 <ahref="http://cich.md"title="ColegiuldeInformatica">CIC</a>
7 </body>
8 </html>
Atributul name Acest atribut este utilizat pentru a defini o ancor n interiorul unei pagini. Sintaxa acestui atribut este: name="valoare".
7.2. Referine ctre alte pagini Web
Dac se dorete accesarea unei pagini de pe alt site, valoarea atributului href este o adres URL absolut. Amintim c o adresa URL
absolut are sintaxa: protocol /numecalculator/cale/fiier unde protocol poate fi, de exemplu, http.
Exemplu:
1 <html>
2 <head></head>
3 <body>
4 Pentrumaimulteinformatiidespre<br>
5 nvatamntvizitatisiteulMinisterulEducatiei
6 <ahref="http://www.edu.md">ME</a>
7 </body>
8 </html>
Acelai rezultat obinem dac scriem i numele fiierului index(default) care se ncarc <a href="http://www.edu.md/index.php"> ME </a>
Dac se dorete s se viziteze alt pagin a respectivului site, se scrie numele fiierului .php(.html), respectiv.
7.3.Referine cu imagini
Aa cum am specificat mai sus, o legtur poate fi creat i cu ajutorul unei imagini. Ca i n cazul n care coninutul unei legturi este un
text, i n cazul n care coninutul este o imagine, accesarea paginii se face cu un clic, sau un ENTER pe imagine. Exemplu:
1 <html>
2
3 <head><title>Legaturicuimagini</title></head>
4 <body>
5 ColegiuldeInformaticadinChisinau
6 <ahref="http://cich.md">
7 <imgsrc="http://cich.md/galerie/content/Exteriorulcolegiului/IMG_1631.jpg">
8 </a>
9 </body>
10 </html>
Un link poate fi format i din text i din imagine adic:
1 <html>
2 <head><title>Legaturicuimagini</title></head>
3 <body>
4 ColegiuldeInformaticadinChisinau
5 <ahref="http://cich.md">CIC
6 <imgsrc="http://cich.md/galerie/content/Exteriorulcolegiului/IMG_1631.jpg"width=70height=70>
ch.md/lectii_view.php?id=1 28/42
6 <imgsrc="http://cich.md/galerie/content/Exteriorulcolegiului/IMG_1631.jpg"width=70height=70>
7 </a>
8 </body>
9 </html>
7.4.Referine cu adrese URL relative
Adresele URL relative sunt acele adrese care fac referire la pagini de pe calculatorul propriu, indicnd cale/numefiier, fr a fi prefixate
de protocol i nume calculator. n adresele relative putem folosi caracterele ../ pentru a urca un nivel n structura de directoare(ctre
directorul printe).
Se cunoate faptul c un site poate s aib paginile (fiierele) organizate ntro structur arborescent de directoare. S presupunem c
avem urmtoarea structura arborescent :
Conform structurei arboriscente date din pagina pag6.html din mapa M5 se pot accesa celelalte pagini, utiliznd urmtoarele referine:
1. ../../pag1.html
2. ../../M1/pag2.html
3. ../../M3/M6/pag7.html
4. ...
1 <html>
2 <head><title>Referinterelative</title></head>
3 <body>
4 Pagina7
5 <ahref="../../M4/pag5.html">Referintacatrepaginapag5.html</a>
6 </body>
7 </html>
1 <html>
2 <head><title>Referinterelative</title></head>
3 <body>
4 Pagina5
5 <ahref="../M3/M6/pag7.html">Referintacatrepaginapag7.html</a>
6 </body>
7 </html>
7.5. Referine ctre informaii non Web
Se pot face referine i la adrese URL absolute de pe Internet, care nu sunt resurse Web. n adresele URL absolute se nlocuiete
protocolul http cu alte protocoale non Web (ftp, telnet, gopher etc.).
Exemplu:
1 <html>
2 <head></head>
3 <body>
4 <ul>
5 <li><ahref="ftp://gatekepper.dec.com">Vizitatilocatia</a></li>
6 <li><ahref="ftp://ftp.arsc.edu">Educatie</a></li>
7 <li><ahref="telnet://well.com">WholeEarth</a></li>
8 <li><ahref="gopher://gopher.loc.gov">GongresGopher</a></li>
9 </ul>
10 </body>
11 </html></p>
29/42
7.6.Referine ctre fiiere non HTML
Se pot stabili legturi ctre orice tip de fiiere, nu numai html, ca de exemplu .pdf, .txt, .gif, .rar, .zip, etc. n aceste condiii se
ntlnesc dou situaii:
I. Browserul nu poate lucra cu fiierul ntlnit i atunci ncearc sl descarce, executnd operaia download.
II. Browserul cunoate tipul de fiier i acesta va fi deschis n fereastra sa.
Exemplu:
1 <html>
2 <head></head>
3 <body>
4 <ahref="pag_2.pdf">FisierPDF</a><br>
5 <ahref="doc.txt">FisierTXT</a><br>
6 <ahref="../files/tabel_culori.rar">FisierRAR</a><br>
7 <ahref="http://cich.md/galerie/content/Exteriorulcolegiului/IMG_1631.jpg">FisierJPG</a>
8 </body>
9 </html></p>
7.7.Referine interne n cadrul unei pagini
n aceast seciune vom defini ancore (inte) ntro pagin, adugarea legturilor ctre aceste inte, precum i legturi ctre inte din
documente externe. Dac documentele HTML sunt prea lungi i sunt greu de parcurs, pentru a evita parcurgerea cu bara de defilare, se
definesc ancore. Ancorele ne permit s ne deplasm rapid ntrun loc din document. Ancora este un identificator al nceputului unui
element dintro pagin web. Dac au fost definite ancore ntro pagin, se pot crea legturi ctre respectivele ancore.
Ancorele se pot defini n dou moduri:
utiliznd orice element HTML, inclusiv elementul <a> cu atributul id, de exemplu: <p id="valoare_id"> sau <a id="valoare_id"> </a>
utiliznd tagul <a> cu atributul name, de exemplu: <a name="valoare_nume"> </a>
Pentru a crea o legtur la o ancor se folosete tagul <a>...</a> cu atributul href, care are ca valoare o referin de ancor, precedat
de simbolul #, astfel:
# valoare_nume
# valoare_id
Fiierul trebuie s fie suficient de mare, astfel nct secvena care conine o ancor s nu fie vizibil n momentul trimiterii ctre ea. Ca
exemplu s considerm agenda grpei I942:
1 <html>
2 <head>
3 <title>Agendagrupei</title>
4 </head>
5 <body>
6 <h1align="center">AgendagrupeiI942<br/>
7 <p>
8 <ahref="#ac">[AC]</a>
9 <ahref="#dh">[DH]</a>
10 <ahref="#il">[IL]</a>
11 <ahref="#mn">[MN]</a>
12 <ahref="#os">[OS]</a>
13 <ahref="#tw">[TW]</a>
14 </h1>
15 <br/>
16 <hrsize="4"width="100%"align="center"color="#666666">
17 <br/>
18 <pre>
19 <h1>
20 <pid="ac">[AC]</p>
21 1.BogdanConstantin
22 2.BuduTudor
23 3.BuzuGheorghe
24 4.CasianOlea
25 5.CasparovPavel
26 6.CebotariEcaterina
27 7.CibucNicolae
28 8.CiuscaCristian
29 9.CosletVladislav
30 10.CotruAlina
31 11. ...
32 <pid="dh">[DH]</p>
33 1.DabijaViorel
34 2.GaburaRuslan
35 3.GorobetLilian
36 4. ...
37 <pid="il">[IL]</p>
38 1.LunguInga
39 2. ...
40 <pid="mn">[MN]</p></p>
41 1.MelesteanAlexandru
42 2.MititeluDumitru
43 3. ...
44 <pid="os">[OS]</p>
45 1.PodoleanIon
46 2.PopoviciVictor
nu h.md/lectii_view.ph 30/42
46 2.PopoviciVictor
47 3.PuzurGheorghe
48 4.SavinVictor
49 5.ScutelnicValeria
50 6.SmolenschiMihai
51 7.StefanicaVictor
52 8.StrelciucVictoria
53 9. ...
54 <pid="tw">[TW]</p>
55 1.TodirascuMihaela
56 2.TomaCristian
57 3.VasiloiAlexandru
58 4. ...
59 </body>
60 </html>
7.8. Trimiterea automat a unui email
Dac dorim s trimitem un email dintro pagin, se creeaz o legtur la o adres email. Legtura va avea atributul href a crui valoare
este mailto (protocol pentru pot), urmat de: i de o adres de email valid, de exemplu:
<a href="mailto:cio3banu@yahoo.com"> Puteti sami scrieti </a>
Se poate folosi elementul <adress> de formatare logic, care are rolul de a evidenia o adres (mesajul se va scrie la nceput de linie), aa
cum reiese din exemplu de mai jos. Sintaxa elementului <adress> este:
<adress> <a href="mailto:cio3banu@yahoo.com"> Puteti sami scrieti </a> </adress>
Cnd se execut clic pe o legtur email, se va deschide o aplicaie email care are, n cmpul To, adresa din legtur i care permite s
introducem mesajul. Se poate trece i un subiect, care va fi desprit de adres prin ?, precum i un text n interiorul mesajului (de
forma body=text) i care se va separa de subiect prin caracterul &, ca n exemplul de mai jos:
1 <html>
2 <head></head>
3 <body>
4 <adress>
5 <ahref="mailto:cio3banu@yahoo.com">Putetisamiscrieti</a>
6 </adress>
7 </body>
8 </html>
7.9. Culorile referinelor
O referin poate fi n una din strile:
activ
vizitat
nevizitat
n funcie de starea n care se afl, o legtur are o anumit culoare i anume:
Starea activ are culoarea implicit rou (#FF0000). Culoarea se poate schimba cu atributul alink=culoare al elementului < body>
Starea vizitat are culoarea implicit purple (#800080). Culoarea se poate schimba cu atributul vlink=culoare al elementului < body>
Starea nevizitat are culoarea implicit albastru (#0000FF). Culoarea se poate schimba cu atributul link=culoare al elementului < body>
1 <html>
2 <head></head>
3 <bodyalink="green"vlink="red"link="blue">
4 <ul>
5 <li><ahref="http://cich.md">CIC</a>
6 <li><ahref="http://cfbc.md">CFBC</a>
7 <li><ahref="http://ccc.md">CCC</a>
8 </ul>
9 </body>
10 </html>
8. Documentarea unei pagini Web
Metainformaiile sunt informaiile despre modul de organizare a informaiilor. n cazul unei pagini Web metainformaiile vor furniza
date despre modul n care a fost creat aceast pagin.
Metainformaiile nu sunt vizibile ntro pagin Web. Ele sunt coninute n fiierul surs .html i sunt utilizate de serverele Web aflate
n INTERNET, specializate n stocarea de informaii despre informaiile stocate pe diferite siteuri. Metainformaiile
sunt culese de ctre aplicaiile speciale ale motoarelor de cutare numite spiders sau robots. Serverele specializate n stocarea i
indexarea de metainformaii ofer utilizatorilor motoare de cutare puternice care permit regsirea informaiilor (a adreselor
la care aceste informaii exist). Cteva exemple n acest sens sunt: www.google.com, www.yahoo.com, www.altavista.com,
www.excite.com, www.lycos.com etc.
Metainformaiile adic informaiile despre informaiile coninute ntro pagin Web se introduc cu ajutorul tagului <meta> plasat n
31/42
interiorul blocului <head><head>. Acest tag se utilizeaz cel mai frecvent mpreun cu trei atribute:
name;
httpequiv;
content.
Cele trei atribute se folosesc n perechi "name/content" sau "httpequiv/content".
8.1. Descrierea unei pagini Web
Pentru a face cunoscut motoarelor de cutare din Internet scopul pentru care a fost creat o pagin Web poate fi inserat un element
<meta> avnd atributele:
name setat la valoarea description;

content setat la un ir de caractere ce conine o descriere general a paginii.
Iat n continuare un exemplu de utilizare:
1 <html>
2 <head>
3 <title>ColegiuldeInformatic</title>
4 <metaname="description"content="SiteulprezintinformaiiimportantedespreColegiuldeInformatic">
5 </head>
6 <body>
7
8 <body>
9 </html>
8.2. Cuvintele cheie pentru o pagin Web
Cuvintele cheie ofer o alt metod de descriere a informaiilor coninute de o pagin Web. Cuvintele cheie trebuie alese cu atenie
pentru ca informaia indexat pe baza lor de ctre spiders, s poat fi regsit corect n bazele de date ale mooarelor de
cutare.
Pentru a preciza cuvintele cheie ale paginii Web se utilizeaz:
atributul name setat la valoarea keywords;

atributul content care va primi ca valoare lista cuvintelor cheie separate prin ",".
Iat un exemplu de utilizare:
<meta name="keywords" content="Colegiu, Informatica, Chiinu, Moldova">
8.3. Drepturile de autor
Atributul name poate fi utilizat pentru a furniza informaii legate de autorul paginii i despre Copyright (drepturile de autor). Exemplul
urmtor ilustraz aceste
lucruri:
<meta name="author" content="Ciobanu Andrei ">

<meta name="copyright" content="cich.md">
8.4. Persoana de contact
Pentru a putea furniza informaii despre persoana care se ocup de administrarea siteului se utilizeaz atributul httpequiv. n acest caz
valoarea atributului content va conine o adres email eventual urmat n paranteze rotunde de un nume complet al
persoanei.
Exemplu:
<meta httpequiv="from" content="ciobanu@cich.md (Ciobanu Andrei)">

<meta httpequiv="replyto" content=="cio3banu@yahoo.com (Andrei Ciobanu)">
8.5. Setul de caractere utilizat
Setul de caractere se stabilete prin intermediul atributului charset. n mod implicit setul de caractere al unei pagini Web este western.
Opional acest set de caractere poate fi stabilit prin urmtoarea exprimare:
<meta httpequiv="contenttype" content="text/html; charset=ISO88591">
Pentru a se putea utiliza diacriticele limbii romne trebuie ales setul de caractere SudEst European:
<meta httpequiv="contenttype" content="text/html; charset=ISO88592">
8.6. Rencrcarea automat a unei pagini Web
O utilizare interesant a atributului httpequiv este aceea de a seta rencrcarea automat n fereastra browserului a aceleiai pagini (de
exemplul pagina cu evoluia cursurilor la o burs) sau a unei pagini noi.
n acest fel se obin faciliti dinamice pentru un Website. Pentru a rencrca aceeai pagin la un interval precizat de secunde se
32/42
utilizeaz atributul httpequiv setat la valoarea refresh iar atributul content setat la valoarea numrului de secunde dup care se
dorete ca pagina s fie reactualizat.
Exemplul 1. Aceeai pagin va fi rencrcat dup 5 secunde:
<meta httpequiv="refresh" content="5">
Exemplul 2. O alt pagin (cuprins.html) va fi rencrcat dup 9 secunde:
<meta httpequiv="refresh" content="9; url='cuprins.html'">
8.7. Comentariile
Comentariile sunt blocuri de text utile care prezint informaii de proiectare utile despre modul n care a fost scris un fiier surs .html.
Comentariile sunt ignorate de ctre browser la ncarcarea paginii. Pentru a insera un bloc de comentarii se utilizeaz sintaxa:
<!
Comentarii

>
Blocul de comentarii poate fi plasat oriunde este necesar n cadrul paginii .html i se poate extinde pe mai multe rnduri;
9. Operarea cu formulare. Marcaje utilizate.
Un formular este un ansamblu de zone active alcatuit din butoane ,casete de selecie,cmpuri de editare etc.
Formularele va asigura construirea unori pagini Web care permit utilizatorilor s introduc efectiv informaii i s le transmit serverului.
Formularele pot varia de la o simpl caset de text, pentru introducerea unui ir de caractere pe post de cheie de cautare element
caracteristic tuturor motoarelor de cutare din Web pn la o structur complex ,cu multiple seciuni, care ofer faciliti puternice de
transmisie a datelor. O sesiune cu o pagin web ce conine un formular cuprinde urmtoarele etape:
1. Utilizatorul completeaz formularul i l expedieaz unui server;

2. O aplicaie dedicat de pe server analizeaz formularul completat i (dac este necesar) stocheaz datele ntro baz de date;
3. Dac este necesar serverul expedieaz un raspuns utilizatorului.
Un formular este definit ntrun bloc delimitat de etichetele corespondente <form>i </form>.
Atribute eseniale ale elementului <form>
Exist dou atribute eseniale ale elementului <form>:
1. Atributul action precizeaz ce se va ntampla cu datele formularului odat ce acestea ajung la destinaie. De regul ,valoarea
atributului action este adresa URL a unui script aflat pe un srver WWW care primete datele formularului, efectueaz o prelucrare a lor i
expedieaz ctre utilizator un rspuns.
<form action="http://www.yahoo.com/cgibin/nume_fis.cgi">.
Scripturile pot fi scrise n limbajele Perl, C, PHP, Unix shell.
2. Atributul method precizeaz metoda utilizat de browser pentru expedierea datelor formularului. Sunt posibile urmtoarele valori:
get (valoarea implicit). n acest caz, datele din formular sunt adugate la adresa URL precizat de atributul action;
nu sunt permise cantiti mari de date (maxim 1 Kb);

intre adresa URL i date este inserat un "?".
Datele sunt adugate conform sintaxei: nume_camp = valoare_camp. ntre diferite seturi de date este introdus un "&".
Exemplu: "http://www.yahoo.com/cgibin/nume_fis.cgi?nume1 = valoare1&nume2 = valoare2";
post n acest caz datele sunt expediate separat. Sunt permise cantiti mari de date (ordinul MB)
Pentru ca un formular s fie funcional, trebuie precizat ce se va ntmpla cu el dup completarea i expediere. Cel mai simplu mod de
utilizare a unui formular este expedierea acestuia prin pota electronic (email). Pentru aceasta se folosete un atribut al etichetei
<form>: i anume action care primete ca valoare " mailto: " concatenat cu o adres valid de email ctre care se va expedia formularul
completat.
Un formular cu un cmp de editare i un buton de expediere
Majoritatea elementelor unui formular sunt definite cu ajutorul etichetei <input>. Pentru a preciza tipul elementului se folosete
atributul type al etichetei <input>. Pentru un cmp de editare, acest atribut primeste valoarea "text". Alte atribute pentru un element
<input> sunt:
name permite ataarea unui nume fiecrui element al formularului;

value care permite atribuirea unei valori iniiale unui element al formularului.
Un buton de expediere al unui formular se introduce cu ajutorul etichetei <input>, n care atributul type este configurat la valoarea
"submit".Acest element poate primi un nume prin atributul name. Pe buton apare scris "Submit Query" sau valoarea atributului value,
dac aceast valoare a fost stabilit.
33/42
1 <html>
2 <head>
3 <title>Form_ex1</title>
4 </head>
5 <body>
6 <h1>Unformularcuuncampdeeditaresiunbutondeexpediere</h1>
7 <hr>
8 <formaction="mailto:xxxxx@xxx.com"method="post">
9 Numele:<inputtype="text"name="numele"value="Numelesiprenumele"><br/>
10 <inputtype="submit"value="Expedieaza">
11 </form>
12 </body>
13 </html>
Pentru elementul <input> de tipul cmp de editare (type = "text") , alte doua atribute pot fi utile:
size specific lmea cmpului de editare ce depete aceast lme ,atunci se execut automat o derulare acestui cmp;
maxlength specific numrul maxim de caractere pe care le poate primi un cmp de editare, caracterele tastate peste numrul maxim sunt
ignorate.
Observaii:
dac atributul type lipsete ntrun element <input>, atunci cmpul respectiv este considerat n mod prestabilit ca fiind de tip
"text";
formularele cu un singur cmp (de tip text) nu au nevoie de un buton de expediere, datele sunt expediate automat dupa
completarea i apsarea tastei ENTER.
Butonul Reset
Daca un element de tip <input> are atributul type configurat la valoarea "reset", atunci n formular se introduce un buton pe care scrie
"Reset". La apsarea acestui buton, toate elementele din formular primesc valorile prestabilite (definit odata cu formularul ), chiar dac
aceste valori au fost modificate de utilizator.
Un buton Reset poate primi un nume cu ajutorul atributului name i o valoare printrun atribut value. Un asemenea buton afieaz textul
"Reset" dac atributul value lipsete, respectiv valoarea acestui atribut n caz contar.
1 <html>
2 <head>
4 </head>
5 <body>
6 <h1>Unformularcuunbutonreset</h1><br/>
7 <hr><br/>
8 <formaction="mailto:xxxxx@xxx.com"method="post"><br/>
9 Introducetinumele:<inputtype="text"name="nume"value="Numele"><br/><br/>
10 Introducetiprenumele:<inputtype="text"name="prenume"value="Prenumele"><br/><br/>
11 <inputtype="reset"value="Sterge"><inputtype="submit"value="Expedieaza"><br/>
12 </form>
13 </body>
14 </html>
Cmp de editare de tip "password"
Dac se utilizeaz eticheta <input> avnd atributul type configurat la valoarea "password" , atunci n formular se introduce un element
asemntor cu un cmp de editare obinuit introdus prin type="text". Toate atributele unui cmp de editare rmn valabile. Singura
deosebire const n faptul c acest cmp de editare nu afieaz caracterele clar, ci numai caractere *, care ascund de privirile altui
utilizator aflat n apropiere valoarea introdus ntrun asemenea cmp. La expedierea formularului ns, valoarea tastat ntrun cmp de
tip "password" se transmite clar.
1 <html>
2 <head>
4 </head>
5 <body>
6 <h1>Unformularcuunbutonreset</h1>
7 <hr><br/>
9 Nume:<inputtype="text"name="nume"value="Numele"><br>
10 Prenume:<inputtype="text"name="prenume"value="Prenumele"><br>
11 Password:<inputtype="password"name="parola"><br>
12 <inputtype="reset"value="Sterge"><inputtype="submit"value="Expedieaza">
13 </form>
14 </body>
15 </html>
Butoane radio
Butoanele radio permit alegerea, la un moment dat, a unei singure variante din mai multe posibile. Butoanele radio se introduc prin
eticheta <input> cu atributul type avnd valoarea "radio".
1 <html>
u.cich.md/l 34/42
1 <html>
2 <head>
4 </head>
5 <body>
6 <h1>Unformularcubutoaneradio</h1>
7 <hr>
9 <p>
10 Alegetisexul:<br>
11 Barbatesc:<inputtype="radio"name="sex"value="b"><br/>
12 Femeiesc:<inputtype="radio"name="sex"value="f"><br/>
13 <inputtype="reset"><inputtype="submit">
14 </p>
15 </form>
16 </body>
17 </html>
La expedierea formularului se va transmite una dintre perechile "sex=b" sau "sex=f", n funcie de alegerea fcut de utilizator.
Casete de validare
O caset de validare(checkbox) permite selectarea sau deselctarea unei opiuni. Pentru inserarea unei casete de validare se utilizeaz
eticheta <input> cu atributul type configurat la valoarea "checkbox".
Observaii:
fiecare caset poate avea un nume definit prin atributul name.
fiecare caset poate avea valoarea prestabilit selectat definit prin atributul checked.
1 <html>
2 <head>
4 </head>
5 <body>
6 <h1>Unformularcucasetecheckbox</h1>
7 <hr>
9 Alegetimeniul:<br/>
10 <inputtype="checkbox"name="pizza"value="oportie">Pizza<br/>
11 <inputtype="checkbox"name="nectar"value="unpahar">Nectar<br/>
12 <inputtype="checkbox"name="bere"value="osticla">Bere<br/>
13 <inputtype="checkbox"name="cafea"value="oceasca">Cafea<br/>
15 </form>
16 </body>
17 </html>
Casete de fiiere
ntro pereche "name = value" a unui formular se poate folosi ntregul coninut al unui fiier pe post de valoare. Pentru aceasta se
insereaz un element <input> ntrun formular, cu atributul type avnd valoarea "file"(fiier).
Atributele pentru un element de tip caset de fiiere:
name permite ataarea unui nume;

value primete ca valoare adresa URL a fiierului care va fi expediat o dat cu formularul. Aceast valoare poate fi atribuit direct atributului
value, sau poate fi selectat prin intermediul unei casete de tip File Upload sau Choose File care apare la apsarea butonului Browse... din
formular;
enctype precizeaz metoda utilizat la criptarea fiierului de expediat.Valoarea acestui atribut este "multipart/formdata".
1 <html>
2 <head>
4 </head>
5 <body>
6 <h1>Unformularcucasetadefisiere</h1>
7 <hr>
9 Alegetifisierul:<inputtype="file"name="fisier"enctype="multipart/formdata"><br/>
11 </form>
12 </body>
13 </html>
Liste de selecie
O list de selecie permite utilizatorului s aleag unul sau mai multe elemente dintro list finit. Lista de selecie este inclus n
formular cu ajutorul etichetelor corespondente <select>si </select>.
O list de selecie poate avea urmtoarele atribute:

name - ataeaz listei un nume (utilizat n perechile "name=value" expediat serverului);
35/42
size care precizeaz(printrun numr ntreg pozitiv, valoarea prestabilit fiind 1) cte elemente din list sunt vizibile la un moment dat pe
ecran(celelalte devenind vizibile prin acionarea barei de derulare ataate automat listei).
Elementele unei liste de selecie sunt incluse n lista cu ajutorul etichetei <option>. Dou atribute ale etichetei <option> se dovedesc
utile:
value primete ca valore un text care va fi expediat serverului n perechea "name=value", dac acest atribut lipsete, atunci ctre server va fi
expediat textul ce urmeaz dup <option>;
selected(fara alte valori) permite selectarea prestabilit a unui element al listei.
1 <html>
2 <head>
4 </head>
5 <body>
6 <h1>Unformularcuolistadeselectie</h1>
7 <hr>
9 Universitateaabsolvita:<br><br>
10 <selectname="universitate"size="3">
11 <optionvalue="USM">UniversitateadeStatdinMoldova
12 <optionvalue="UST"selected>UniversitateadeStatdinTiraspol
13 <optionvalue="UTM">UniversitateaTehnicadinMoldova
14 <optionvalue="UCCM">UniversitateaCooperatistComercialadinMoldova
15 </select>
16 <br><br>
18 </form>
19 </body>
20 </html>
List de selecie cu selecii multiple
O list de selecie ce permite selecii multiple se creeaz ntocmai ca o list de selecie obisnuit. n plus, eticheta <select> are un
atribut multiple(far alte valori). Cnd formularul este expediat ctre server pentru fiecare element selectat al listei care este se
insereaz ctre o pereche "name=value" unde name este numele listei.
1 <html>
2 <head>
4 </head>
5 <body>
6 <h1>Unformularcuolistadeselectieceacceptaselectiimultiple</h1>
7 <hr>
9 Limbistrainecunoscute:<br><br>
10 <selectname="limbistraine"size="5"multiple>
11 <optionvalue="e">Engleza
12 <optionvalue="f"selected>Franceza
13 <optionvalue="s">Spaniola
14 <optionvalue="i">Italiana
15 <optionvalue="r">Rusa
16 <optionvalue="g">Germana
17 </select><br><br>
19 </form>
20 </body>
21 </html>
Cmpuri de editare multilinie
ntrun formular cmpuri de editare multilinie pot fi incluse cu ajutorul etichetei <textarea>. Eticheta are urmtoarele atribute:
cols specific numrul de caractere afiate ntro linie;

rows specific numrul de linii afiate simultan;
name permite ataarea unui nume cmpului de editare multilinie;
wrap determin comportamentul cmpului de editare fa de sfritul de linie. Acest atribut poate primi urmatoarele valori:
"off" ntreruperea cuvintelor se produce la marginea dreapt a editorului, cnd dorete utilizatorul. Caracterul de sfrit de linie este inclus
n textul transmis serverului o data cu formularul;
"hard" ntreruperea cuvintelor se produce la marginea dreapt a editorului. Caracterul de sfrit de linie este inclus n textul transmis
serverului o dat cu formularul;
"soft" ntreruperea cuvintelor se produce la marginea dreapt a editorului. Nu se include caracterul de sfrit de linie n textul transmis
serverului o dat cu formularul.
1 <html>
2 <head>
4 </head>
5 <body>
6 <h1>Unformularcuuncampdeeditaremultilinie</h1>
7 <hr>
9 <textareaname="textmultilinie"cols="30"rows="5"wrap="off">
10 Primaliniedintextulinitial.
nu h.md/lectii_view.php?id=1 36/42
10 Primaliniedintextulinitial.
11 Adoualiniedintextulinitial.
12 </textarea><br/><br/>
14 </form>
15 </body>
16 </html>
Un formular complex
n exemplul urmtor este prezentat un formular coninnd elemente prezentate anterior. Cmpurile formularului sunt incluse n celulele
unui tabel pentru a obine o aliniere dorit.
1 <html>
2 <head>
4 </head>
5 <body>
6 <h1>Unformularcomplex</h1>
7 <hr>
8 <center>
9 <tablebgcolor="orange"><formaction="mailto:xxxxx@xxx.com"method="post">
10 <captionalign="top">MENIU</caption>
11 <tralign="left"><th>Numele:<td><inputtype="text"name="numele">
12 <tralign="left"><th>Preumele:<td><inputtype="text"name="prenumele">
13 <tralign="left"><th>Telefonul:<td><inputtype="text"name="telefonul">
14 <tralign="left"><th>Alegetipizza:
15 <td>
16 <inputtype="checkbox"name="ciuperci">cuciuperci
17 <inputtype="checkbox"name="mexicana">mexicana
18 <inputtype="checkbox"name="europeana">europeana
19 <tralign="left"><th>Alegetiplata:
20 <tdbgcolor="lightblue">
21 <ul>
22 <li><inputtype="radio"name="plata">cash
23 <li><inputtype="radio"name="plata">card
24 </ul>
25 <tralign="left"><th>Comentarii:
26 <td>
27 <textareaname="comentarii"cols="30"rows="5"wrap="off">
28 Inseratiaiciaprecieriledumneavoastralegatedecalitateaserviciilornoastre
29 </textarea>
30 <tralign="left"valign="top">
31 <td>
32 <inputtype="reset"value="Sterge"><td><inputtype="submit"value="Expedieaza">
33 </form>
34 </table>
35 </body>
36 </html>
Butoane
ntrun formular pot fi afiate butoane. Cnd utilizatorul apas un buton, se lanseaz n execuie o funcie de tratare a acestui
eveniment. Limbajul HTML nu permite scrierea unor astfel de funcii (acest lucru este posibil dac se utilizeaz limbajele Javascript sau
Java).
Pentru a nsera un buton ntrun formular, se utilizeaz eticheta <input> avnd atributul type configurat la valoarea "button". Alte dou
atribute ale elementului <input> sunt:
name permite ataarea unui nume butonului;

value primete ca valoare textul ce va fi afiat pe buton.
Un buton pentru lansarea n execuie a unei aciuni poate fi introdus ntrun formular prin elementul <input> avnd atributul type
configurat la valoarea "button", aa cum sa vzut mai nainte.
Exist o a doua modalitate de a introduce ntro pagina Web un buton, i anume prin intermediul blocului <button>...</button>. Un astfel
de buton poate fi inserat ntrun formular, n acest caz declannd aciuni legate de acel formular, sau poate fi introdus oriunde n pagin
pentru iniierea unor aciuni independente de formulare. Atributele posibile ale elementului "button" sunt:
name acord elementului un nume;

value precizeaz textul care va fi afiat pe buton;
type precizeaz aciunea ce se va executa la apsarea butonului dac acesta este inclus ntrun formular.Valorile posibile pentru acest atribut sunt:
"button";
"submit";
"reset".
n corpul blocului <button>...</button> se poate afla un text sau un marcaj de inserare a unei imagini.
Observaii finale:
elementul <form> poate avea un atribut target, care primete ca valoare numele unei ferestre a browserului n care va fi ncrcat
rspunsul trimis serverului WWW la expedierea unui formular.
toate elementele cuprinse ntrun formular pot avea un atribut disabled care permite dezactivarea respectivului element.
toate elementele de tip text cuprinse ntrun formular pot avea un atribut readonly care interzice modificarea coninutului acestor
elemente.
37/42
10. Ferestre n HTML. Comenzi de construire a ferestrelor(cadrelor).
Ferestrele sau cadrele ne permit s definim n fereastra browserului subferstre n care s fie ncrcate documente HTML diferite.
Ferestrele sunt definite ntrun fiier HTML special , n care blocul <body>...</body> este nlocuit de blocul <frameset>...</frameset>. n
interiorul acestui bloc, fiecare cadru este introdus prin eticheta <frame>.
Un atribut obligatoriu al etichetei <frame> este src, care primete ca valoare adresa URL a documentului HTML care va fi ncrcat n acel
frame. Definirea cadrelor se face prin mprirea ferestrelor (i a subferestrelor) n linii i coloane:
1. mprirea unei ferestre ntrun numr de subferestre de tip coloan se face cu ajutorul atributului cols al etichetei <frameset> ce descrie acea
fereastr;
2. mprirae unei ferestre ntrun numr de subferestre de tip linie se face cu ajutorul atributului rows al etichetei <frameset> ce descrie acea
fereastr.
Valoare atributelor cols i rows este o list de elmente separate prin virgul, care descriu modul n care se face mprirea. Elementele
listei pot fi:
un numr ntreg de pixeli;

procente din dimensiunea ferestrei(numr ntre 1 si 99 terminat cu %);
n* care inseamna n pari din spaiul rmas;
Exemplu 1: cols="200,*,50%,*" nseamn o mprire n 4 subferestre, dintre care prima are 200 pixeli, a treia ocup jumtate din spaiul
total disponibil, iar a doua i a patra ocup n mod egal restul de spaiu rmas disponibil.
Exemplu 2: cols="200,1*,50%,2*" nseamn o mprire n 4 subferestre, dintre care prima are 200 pixeli, a treia ocup jumtate din
spaiul total disponibil iar a doua i a patra ocup n mod egal restul din spaiul rmas disponibil, care se mparte n trei pri egale, a doua
fereastr ocupnd o parte, iar a patra ocupnd 2 pri.
Observaii:
Dac mai multe elemente din list sunt configurate cu *, atunci spaiul disponibil rmas pentru ele se va mpari n mod egal.
O subfereastr poate fi un cadru (folosind <frame>) n care se va ncarc un document HTML sau poate fi mprit la rndul ei n alte
subfereste (folosind <frameset>).
1 <html>
2 <head>
3 <title>Fer_ex1</title>
4 </head>
5 <framesetcols="*,*">
6 <framesrc="p1.html">
8 </frameset>
9 </html>
n exemplul urmtor este creat o pagina Web cu trei cadre orizontale. Pentru al doilea cadru valoarea atributului src este adresa URL a
unei imagini.
1 <html>
2 <head>
4 </head>
5 <framesetrows="100,*,10%">
7 <framesrc="Taj_Mahal.jpg">
9 </frameset>
10 </html>
n exemplul urmtor este creat o matrice de 4 cadre (2 x 2).Pentru a realiza acest lucru, se folosesc simultan cele dou atribute cols i
rows.
1 <html>
2 <head>
4 </head>
5 <framesetrows="*,*"cols="*,*">
7
11 </frameset>
12 </html>
n exemplul urmtor este creat o pagina Web cu trei cadre mixte. Pentru a o crea se procedeaz din aproape n aproape. Mai nti, pagina
este mprit n dou subferestre de tip coloan, dup care a doua subfereastr este mprit n dou subferestre de tip linie.
38/42
1 <html>
2 <head>
4 </head>
5 <framesetcols="20%,*">
7 <framesetrows="*,*">
10 </frameset>
11 </frameset>
12 </html>
Culori pentru chenarele cadrelor i dimensionarea chenarului unui cadru
Pentru a stabili culoarea chenarului unui cadru se utilizeaz atributul bordercolor. Acest atribut primete ca valoare un nume de culoare
sau o culoare definit n conformitate cu modelul de culoare RGB. Atributul bordercolor poate fi ataat att etichetei <frameset> pentru
a stabili culoarea tuturor chenarelor cadrelor incluse, ct i etichetei <frame> pentru a stabili culoarea chenarului pentru un cadru
individual.
Atributul border al etichetei <frameset> permite configurarea limii chenarelor tuturor cadrelor la un numr dorit de pixeli. Valoarea
prestabilit a atributului border este de 5 pixeli. O valoare de 0 pixeli va defini un cadru fr chenar.
1 <html>
2 <head>
4 </head>
5 <framesetcols="20%,*"bordercolor="green"border="15">
10 </frameset>
11 </frameset>
12 </html>
Pentru a obine cadre fr chenar se utilizeaz border="0". n mod prestabilit, chenarul unui cadru este afiat i are aspect tridimensional.
Afiarea chenarului unui cadru poate fi dezactivat dac se utilizeaz atributul frameborder cu valoare "no".
Acest atribut poate fi ataat att etichetei <frameset> (dezactivarea fiind valabil pentru toate cadrele incluse) ct i etichetei <frame>
(dezactivarea fiind valabil numai pentru un singur cadru). Valorile posibile ale atributului frameborder sunt:
yes echivalent cu 1;
no echivalent cu 0;
1 <html>
2 <head>
4 </head>
5 <framesetcols="20%,*"border="0">
10 </frameset>
11 </frameset>
12 </html>
1 <html>
2 <head>
4 </head>
5 <framesetcols="20%,*"frameborder="no">
10 </frameset>
11 </frameset>
12 </html>
Bare de defilare
Atributul scrolling al etichetei <frame> este utilizat pentru a adaug unui cadru o bar de derulare care permite navigarea n interiorul
documentului afiat n interiorul cadrului. Valorile posibile sunt:
yes barele de derulare sunt adugate ntotdeauna;

no barele de derulare nu sunt utilizabile;
39/42
auto barele de derulare sunt vizibile atunci cnd este necesar.
1 <html>
2 <head>
4 </head>
5 <framesetcols="*,*,*">
6 <framesrc="p.html"scrolling="yes"noresize>
7 <framesrc="p.html"scrolling="no"noresize>
8 <framesrc="p.html"scrolling="auto"noresize>
9 </frameset>
10 </html>
Atributul noresize al etichetei <frame> (fr nici o valoare suplimentara) dac este prezent, inhib posibilitatea prestabilit a
utilizatorului de a redimensiona cadrul cu ajutorul mouseului.
Poziionarea documentului ntrun cadru
Atributele marginheight i marginwidth ale etichetei <frame> permit stabilirea distanei n pixeli dintre coninutul unui cadru i marginile
verticale, respectiv orizontale ale cadrului. Valori posibile:
numr de pixeli;
procent din limea, respectiv din nlimea cadrului;
1 <html>
2 <head>
4 </head>
5 <framesetcols="*,*,*">
6 <framesrc="p.html">
7 <framesrc="p.html"marginheight="20">
8 <framesrc="p.html"marginwidth="20">
9 </frameset>
10 <noframes>
11 Dacavedetiacesttextinseamnacabrowseruldumnevoastranusuportaframeuri.
12 </noframes>
13 </html>
Exist browsere care nu suport cadre pentru aceasta se utilizeaz n interiorul blocului <frameset> eticheta <noframes>. Dac programul
de navigare tie s interpreteze cadre, va ignora ce se gsete n aceast poriune, iar dac nu, materialul cuprins n zona <noframes>...
</noframes> va fi singurul care va fi neles i afiat. De precizat este faptul c ntre <noframes> ... </noframes> se pot introduce orice
alte taguri HTML (inclusiv imagini, hiperlinkuri, tabele).
Cadre interne
Un cadru intern este specificat prin intermediul blocului <iframe>...</iframe>. Un cadru intern se insereaz ntro pagina Web n mod
asemntor cu o imagine sau n modul n care se specific marcajul <frame>, aa cum rezult din urmtorul exemplu:
<iframe src="pagina1.html" height=40% width=50%> </iframe>
n acest caz, am specificat c doresc o fereastr de cadru intern care are 40% din nlimea i 50% din limea paginii curente. Atributele
acceptate de eticheta <iframe> sunt n parte preluate de la etichetele <frame>i <frameset>, cum ar fi: src, frameborder,
marginheight, marginwidth, scrolling, name, noresize;
sau de la eticheta <img>:vspace, hspace, align, width, height;
1 <html>
2 <head>
4 </head>
5 <body>
6 <ahref="p1.html"target="icad">Pagina1</a><br/>
9 <ahref="p.html"target="icad">Home</a><br>
10 <center>
11 <iframewidth="60%"height="50%"frameborder="1"name="icad"src="p.html">Dacavedetiacesttextinseamnaca
12 browseruldumnevoastranusuportacadreinterne.Arfipreferabilsareveniti,folosindNetscapeNavigatorversiune4.0
13 (/ulterioara)sauI.Explorer4.0.(/ulterioara)
14 <ahref="p0.html">Paginafaracadreinterne</a>
15 </iframe>
16 </center>
17 </body>
18 </html>
inte pentru legturi
n mod prestabilit, la efectuarea unui clic pe o legatur nou, pagina ctre care indic legtura o nlocuiete pe cea curent, n aceeai
fereastr(cadru). Acest comportament se poate schimba n dou moduri:
40/42
1. prin plasarea n blocul <head>...</head> a unui element <base> care precizeaz, prin atributul target numele ferestrei(cadrului) n care se vor
ncrca toate paginile noi referite de legaturile din pagina curent conform sintaxei:
<base target="nume_ferastra/frame_de_baza">
2. prin plasarea n eticheta <a> a atributului target, care precizeaz numele ferestrei (cadrului) n care se va ncrca pagina nou referit de legtur,
conform sintaxei:
<a href="legatura" target="nume_fereastra/frame">...</a>
Observatie:
Dac este prezent att un atribut target n <base> ct i un atribut target n <a>, atunci cele precizate de atributul target din <a> sunt
prioritare. Numele unui cadru este stabilit prin atributul name al etichetei <frame> conform sintaxei: <farme name="nume_frame">
n exemplul urmtor este prezentat o pagin Web cu dou cadre. Toate legturile din cadrul 1 ncarc paginile n cadrul 2.
1 <html>
2 <head>
4 </head>
5 <framesetcols="20%,*">
6 <framesrc="left.html">
7 <framesrc="p.html"name="main">
8 </frameset>
9 </html>
Exemplul urmtor este pagina left.html
1 <html>
2 <head>
3 <title>Fer_ex12_left</title>
4 </head>
5 <body>
6 <ahref="p1.html"target="main">Pagina1</a><br/>
7 <ahref="p2.html"target="main">Pagina2</a><br/>
8 <ahref="p3.html"target="main">Pagina3</a><br><br/>
9 <ahref="p1.html"target="_blank">Pagina1introfereastranoua</a><br/><br/>
10 <ahref="p1.html"target="_self">Pagina1infereastracurenta</a><br/><br/>
11 <ahref="p.html"target="main">Home</a><br/>
12 </body>
13 </html>
Valori pentru atributul target
Atributul target al etichetei <frame> accept anumite valori predefinite de o valoare deosebit pentru creatorii de pagini Web. Aceste
valori sunt:
_self ncrcarea noii pagini are loc in cadrul curent;

_blank ncrcarea noii pagini are loc intro fereastr nou anonim;
_parent ncrcarea noii pagini are loc n cadrul printe al cadrului curent dac acesta exist, altfel are loc n fereastra browserului curent;
_top ncrcarea noii pagini are loc n fereastra browserului ce conine cadrul curent;
41/42

Limbajul HTML PDF

Î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

Limbajul HTML PDF

Încărcat de

Drepturi de autor:

Formate disponibile

19.10.

1. Structura documentului HTML.

O eticheta poate fi scris att cu litere mici, cat si cu litere mari.

<title>Aceasta este prima mea pagina de Web</title>

Coninutul blocului <title>...</title> va aprea in bara de titlu a ferestrei browserului.

O culoare poate fi precizata n dou moduri:

Stiluri pentru blocurile de text

Stiluri fizice si logice

<cite>...</cite>( " cite " inseamna citat);

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

<code>...</code>( " code " inseamna cod sau surs);

Exemplul urmtor ilustreaz c etichetele pot fi imbricate.

Un fragment de text poate fi scris cu aldine i cursive in acelai timp.

Exemplu(de sine stttor).

Exist mai multe consecutiviti de acest tip:

Pentru escapeconsecutiviti sunt dou restricii suplimentare:

1. Fiecare consecutivitate se scrie numai cu minuscule

Sistemele browser ignor reproducerea oricrui text situat ntre <!

2. Formatarea caracterelor, organizarea textului.

Un font este caracterizat de urmtoarele atribute:

culoare (stabilita prin atributul color);

O culoare poate fi precizata n dou moduri:

printrun nume de culoare.

<font color=red>fragment de text de culoare rosie</font>

<font face = " Arial, serif, monospace ">

n acest caz browserul va utiliza primul font pe care l cunoate.

1, 2, 3, 4, 5, 6, 7 ( 1 pentru cel mai mic font si 7 pentru cel mai mare);

Grosimea unui font

Inserarea unei adrese

Indentarea unui bloc

Intrun bloc<pre>...</pre>, semnificatia marcajelor HTML se pastreaza.

<xmp>...</xmp>( 80 de caractere pe rand );

Cu ajutorul etichetei paragraf<p>este posibil trecerea la o linie noua si permite:

inserarea unui spatiu suplimentar inainte de blocul paragraf;

Blocul introdus de etichetele<center>...</center>aliniaza centrat toate elementele pe care le contine.

Blocul de text cuprins intre etichetele<nobr>...</nobr>va fi afisat pe o singura linie.

left " ( aliniere la stanga );

4. Liste. Noiuni i marcaje utilizate.

" A " pentru ordonare de tipul A , B , C , D etc. ( litere mari );

Urmtorul exemplu este o lista ordonata cu cifre romane:

Utilizri speciale ale listelor

n exemplul urmtor lista de definiii are itemii <dt> si <dd> multipli:

5. Tabele. Noiuni i marcaje utilizate.

"left " ( valoarea prestabilita );

Alinierea este important pentru textul ce nconjoar tabelul. Astfel :

Definirea culorilor de fond pentru un tabel

Culoarea textului din fiecare celula se poate stabili cu ajutorul expresiei:

Dimensionarea celulei unui tabel

Dimensionarea unui tabel

numere ntregi pozitive reprezentnd latime respectiv nlimea in pixeli a tabelului;

Titlul unui tabel

" bottom " ( sub tabel );

Alinierea coninutului unei celule

Dimensionarea exacta a celulelor unui tabel

Tabele de forme oarecare

Atributul " nowrap "

Celule vide ale unui tabel

dupa <td> se pune &nbsp;;

Atribute Internet Explorer pentru tabele

span determina numarul de coloane dintrun grup;

Atributele frame si rules

void elimina toate muchiile exterioare ale tabelului;

none elimina toate muchiile interioare ale tabelului;

dupa <td> se pune ;