HTML

Noţiuni introductive

Internet
În lume există milioane de calculatoare în care sunt stocate informaţii. Pentru a putea transmite
informaţii de la unul la altul, calculatoarele sunt interconectate, formând reţele de calculatoare.
Multe dintre aceste reţele de calculatoare sunt interconectate între ele, formând o reţea de reţele,
numită inter-reţea. Cea mai mare inter-reţea publică este reţeaua Internet.
Internetul este o reţea de calculatoare din toată lumea care stochează informaţii şi le expediază.
World Wide Web
Internetul este compus din multe părţi. Grupurile de informare (newsgroups) sunt alcătuite din
grupuri de persoane din toată lumea care au interese comune. Membrii fiecărui grup îşi publică
noutăţile pe Internet şi toţi membrii grupului le pot citi şi pot publica răspunsuri, comentarii sau
întrebări. Listele poştale (mailing lists) sau listserv sunt similare grupurilor de informare, numai
că noutăţile, răspunsurile, comentariile şi întrebările sunt transmise prin e-mail. Fiecare mesaj
expediat de un membru al listei ajunge automat la toţi ceilalţi de pe listă.
Partea cea mai importantă şi de succes a Internet-ului este World Wide Web, care reprezintă un
sistem de distribuţie locală sau globală a informaţiilor mutimedia.
World Wide Web constă din milioane şi milioane de pagini individuale, asemănătoare celor
create într-un editor de text. Aceste pagini individuale sunt legate de alte pagini. De obicei, o firmă
sau o persoană creează o colecţie unificată de pagini asociate între ele. Colecţia de pagini asociate
reciproc se numeşte site Web.
Fiecare site Web are o pagină de bază, care seamănă cu un cuprins sau cu o tablă de materii.
De obicei, pagina de bază este prima pagină dintr-un site, dar tot mai multe site-uri includ o pagină
de intrare care seamănă cu o coperta sau cu pagina de titlu a unei cărţi. Această pagină de intrare
conduce la pagina de bază.
Trecerea de la o pagină la alta se face cu ajutorul legăturilor. Legătura este una dintre
caracteristicile cele mai importante din World Wide Web. Aceste legături sunt numite hipertext,
adică text „conectat” la alte pagini. Atunci când se face clic pe o legătură, se „sare” la o altă pagină.
Este ca şi când, într-o carte, am pune degetul pe un titlu din tabla de materii şi cartea s-ar deschide
instantaneu la pagina respectivă.
Legăturile hipertext se pot recunoaşte prin aceea că sunt subliniate şi de obicei sunt de altă
culoare decât restul textului. Imaginile pot fi şi ele legături. Chiar dacă textul nu este subliniat sau
dacă imaginea nu are chenar colorat care să indice că este legătură, cursorul mouse-ului ne ajută
să identificăm o legătură din cadrul unei pagini Web: cursorul său îşi modifică forma (se
transformă în pictograma unei mâini) atunci când se află deasupra unei legături.
Pe măsură ce pagina apare pe ecran, spunem că ea se încarcă.
Browsere
Pentru a putea vedea paginile din World Wide Web, pe calculator trebuie să fie instalat un
software denumit browser. Browser-ul citeşte informaţiile de pe pagina Web şi le afişează pe
ecranul calculatorului.
Există mai multe tipuri de browsere. Fiecare browser afişează paginile puţin diferit, ceea ce
este o mare problemă pentru designerii de site-uri Web. Cele mai cunoscute browsere sunt
Microsoft Edge, Google Chrome, Mozilla Firefox, Opera.
Adrese Web
Fiecare pagină de pe World Wide Web are o adresă, la fel cum există adrese pentru case.
Această adresă se numeşte Uniform Resource Locator sau URL. Un exemplu de URL este:
[Link]
http înseamnă hypertext transfer protocol. Această parte a adresei URL ne spune că fişierul
căutat este o pagină de pe World Wide Web. În loc de [Link] în unele URL-uri poate să apară
[Link] news:// sau alte prescurtări. Ele se referă la fişiere care nu sunt pagini Web.
 www înseamnă World Wide Web, dar nu este decât o convenţie: unele adrese URL nu conţin
www.
[Link] este numele de domeniu. El spune cine este proprietarul site-ului. Numele de domeniu
poate fi cumpărat.
După numele de domeniu urmează o cale care anunţă browserul unde să găsească pagina
căutată. De exemplu, în adresa de mai sus, browserul găseşte [Link]. Caracterul slash îl anunţă să
deschidă folderul [Link] şi să caute un folder numit preu. Următorul slash îl anunţă să deschidă
folderul preu şi să caute fişierul [Link].
Adresa URL a unei pagini se scrie în caseta Location din partea superioară a ferestrei
browserului, se apasă Enter şi browserul începe să caute adresa respectivă.
În porţiunea numelui de domeniu al adresei (de la www până la .ro) nu contează dacă se scriu
majuscule sau minuscule. Restul adresei însă depinde de tipul literelor, deci este foarte important
dacă se scrie sau nu cu majuscule. De asemenea, într-o adresă Web nu există niciodată un spaţiu
gol. O adresă Web cu un spaţiu în ea a fost scrisă greşit.

HTML

HTML (HyperText Markup Language) este un limbaj utilizat pentru crearea documentelor
HTML. El defineşte structura şi modul de aşezare a unui document HTML, prin intermediul unor
marcaje şi a atributelor acestora.
Hipertextul este o formă specială de text neliniar, în care resursele (text, imagini, sunete) sunt
conectate prin intermediul unor legături. Hipertextul permite deplasarea de la un obiect la altul,
chiar dacă aceste obiecte sunt total diferite.
Un fişier HTML este un fişier text care conţine marcaje (etichete) care „spun” browser-ului
cum să afişeze pagina Web.
HTML nu este un limbaj de programare ci unul declarativ. HTML utilizează marcatori (tag-
uri) descriptivi pentru definirea modului de prezentare şi a structurii logice a unui anumit document
hipertext.

Crearea unei pagini Web

Crearea unei pagini Web presupune:
1. Editarea fişierului HTML utilizând un editor de texte obişnuit (Notepad, Wordpad, Word
etc.) sau un editor de texte dedicat (Notepad++, Netscape Composer etc.)
2. Salvarea paginii Web cu exetnsia .html sau .htm
3. Rezolvarea referinţelor conţinute în pagina Web (legături, imagini, sunete, filme etc.)
Pagina Web astfel realizată poate fi vizualizată prin intermediul unui browser.

Formatul unui document HTML

Fişierele HTML sunt fişiere text obişnuite având extensia .html sau .htm şi sunt divizate în
două părţi: antetul (head) şi corpul (body).
De asemenea, un document HTML este alcătuit dintr-o succesiune de blocuri (elemente).
Acestea pot fi imbricate (incluse unul în altul). Un bloc este delimitat de simboluri speciale numite
marcaje sau tag-uri (etichete). Etichetele sunt incluse între paranteze <…> şi transmit comenzi
browserului pentru a afişa pagina într-un anumit mod.
În general, se inserează un marcaj la începutul unui element (tag de început) şi un marcaj la
sfârşit (tag de sfârşit), ambele purtând numele elementului respectiv. Astfel, forma unui element
generic va fi <element>…</element>, unde <element> specifică un tag de început şi </element>
un tag de sfârşit, iar element este numele unui element oarecare permis de specificaţiile HTML.
Primul marcaj dintr-un document HTML este <html>. Acest marcaj indică browserului
începutul unui document HTML. Ultimul marcaj din documentul HTML este </html> şi indică
browserului sfârşitul unui document HTML.

2
 Blocul <html>…</html> include blocurile <head>…</head> (antet) şi <body>…</body>
(corp). Textul dintre marcajul <head> şi marcajul </head> reprezintă informaţia din antet.
Această informaţie nu este afişată în fereastra browserului (navigator). De obicei, aici apar definiţii
de subprograme (rutine) scrise în limbaje de tip script (precum JavaScript), definiţii de stiluri CSS
ori meta-elemente, pentru ca acestea să fie analizate şi memorate de browser, antetul fiind procesat
primul.
Se recomandă ca fiecare pagină HTML să aibă un titlu. Acest lucru se realizează cu ajutorul
unui bloc <title>…</title> inclus în blocul <head>…</head>. Textul dintre marcajele <title> şi
</title> reprezintă titlul documentului HTML, titlu ce va fi afişat în partea superioară a
browserului. Mai important este că titlul este utilizat de motoarele de căutare, cum ar fi Yahoo şi
Google, precum şi în listele cu pagini vizitate şi în semnele de carte din browserele utilizatorilor.
Textul dintre marcajul <body> şi marcajul </body> reprezintă textul ce va fi afişat de către
browser.

Formatarea textului

Aplicaţia 1
Creaţi fişierul [Link] în care textul din blocul <body> să cuprindă mai multe linii, ca mai jos.
<html>
<head>
<title>Pagina Web</title>
</head>
<body>
Aceasta este o pagina Web!

Fisierele HTML sunt fisiere text divizate in doua parti:

- antetul
- corpul
</body>
</html>

Vizualizaţi fişierul [Link] cu ajutorul browserului implicit. Rezultatul este cel din fereastra
de mai jos.

Observaţi că textul a fost scris pe o singură linie. Aceasta deoarece caracterele spaţiu, tab şi
CR/LF (combinaţie de caractere generată automat la tastarea lui Enter) care apar în blocul
<body>…</body> sunt ignorate de către browser.

Sfârşitul de linie
Trecerea pe o linie nouă se face numai la o comandă explicită care trebuie să apară în pagina
HTML. Această comandă este marcajul <br> (line break – întrerupere de linie).
Aplicaţia 2.
Deschideți fişierul [Link] în Notepad și salvați-l cu numele [Link]. Introduceţi marcajul
<br> unde este necesar pentru a obţine textul pe mai multe rânduri, ca în figura următoare.

3
Blocuri preformatate
Pentru ca browserul să interpreteze corect caracterele spaţiu, tab şi CR/LF care apar în cadrul
unui text, acest text trebuie inclus într-un bloc <pre>…</pre>.
Aplicaţia 3
Creaţi fişierul [Link] care să conţină exemplul următor. Încărcaţi-l în browser pentru a-l
vizualiza.
<html>
<head>
<title>Pagina Web</title>
</head>
<body>
<pre>
Aceasta este o pagina Web!

Fisierele HTML sunt fisiere text divizate in doua parti:

- antetul
- blocul
</pre>
</body>
</html>

Paragrafe
Un paragraf este delimitat de etichetele <p>…</p>. La întâlnirea marcajului de început <p>,
browserul lasă un rând liber faţă de textul dinainte şi apoi afişează textul paragrafului.
Aplicaţia 4
Creaţi fişierul [Link] din figura de mai jos. Încărcaţi fişierul în browser.

<html>
<head>
<title>Pagina Web</title>
</head>
<body>
<p>Aceasta este o pagina Web!</p>
<p>
Fisierele HTML sunt fisiere text divizate in doua parti: <br>
- antetul <br>
- blocul
</p>
</body>
</html>

Blocuri de titlu
Într-un text sunt necesare titluri (headers) de capitole de diferite dimensiuni. Acestea pot fi
introduse cu ajutorul etichetelor <h1>, <h2>, <h3>, <h4>, <h5> şi <h6>. Marcajul <h1> defineşte
cel mai mare titlu, iar marcajul <h6> defineşte cel mai mic titlu. Limbajul HTML adaugă o linie
nouă înainte şi după un titlu definit cu unul din marcajele <h1>, <h2>, <h3>, <h4>, <h5> şi <h6>.
Toate aceste marcaje se referă la un bloc de text şi trebuie însoţite de un marcaj de încheiere similar
(de exemplu, <h4>…</h4>).
Tipul de aliniere (la stânga, la centru sau la dreapta) a titlului se poate specifica prin atributul
align al etichetelor <h1>, <h2>, <h3>, <h4>, <h5> şi <h6>.
Atributele sunt necesare pentru a particulariza acţiunea precizată de numele etichetei. Aceste
atribute apar în interiorul parantezelor care delimitează eticheta după sintaxa:
<etichetă atribut = valoare>

4
 O etichetă poate avea mai multe atribute. De exemplu, o etichetă cu două atribute arată astfel:
<etichetă atribut1=valoare1 atribut2=valoare2>
Pentru a scrie un titlu de mărime 1, centrat, se foloseşte construcţia:
<h1 align = ”center”>

Linii orizontale
Într-o pagină Web pot fi introduse linii orizontale. Acest lucru se poate face cu ajutorul
etichetei <hr>.
Pentru a configura o linie orizontală se utilizează următoarele atribute:
- align permite alinierea liniei orizontale. Valorile posibile sunt „left”, „center” şi „right”;
- width permite alegerea lungimii liniei. Valorile posibile sunt:
a) numere întregi pozitive reprezentând lungimea liniei în pixeli
b) numere între 1 şi 100 urmate de semnul % reprezentând procentul din lăţimea paginii
pe care se întinde linia
- size permite alegerea grosimii liniei. Valorile posibile sunt numere întregi pozitive
reprezentând grosimea liniei în pixeli (valoarea implicită este „2”)
- noshade, când este prezent, defineşte o linie fără umbră
- color permite definirea culorii liniei.

Culori
Culoarea de fond
O culoare poate fi precizată în două moduri:
1. Printr-un nume de culoare: sunt disponibile cel puţin următoarele 16 nume de culori: aqua,
black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white şi yellow.
2. Prin construcţia „#rrggbb” unde r, g şi b sunt cifre hexazecimale şi pot avea valorile 0, 1,
2, 3, 4, 5, 6, 7, 8, 9, 10, a, b, c, d, e, f, A, B, C, D, E, F.
Este recomandat ca numele culorii să fie inclus între ghilimele (”red” sau ”#0a5Fb2”).
Culoarea paginii se stabileşte cu ajutorul atributului bgcolor al etichetei <body>, astfel: <body
bgcolor = culoare>, unde culoare se construieşte după modelul precizat mai sus.

Culoarea textului
Definirea culorii textului unei pagini Web se face prin intermediul atributului text al etichetei
<body>, după sintaxa <body text = culoare>, unde culoare se precizează ca şi mai sus.
Aplicaţia 5. Următorul exemplu realizează o pagină Web cu fondul de culoare galben deschis şi
textul de culoare albastru închis. (Modificaţi fişierul [Link] prin adăugarea atributelor bgcolor şi
text ale etichetei <body>).

<html>
<head>
<title>Pagina Web</title>
</head>
<body bgcolor=”lightyellow” text=”darkblue”>
<p>Aceasta este o pagina Web!</p>
<p>
Fisierele HTML sunt fisiere text divizate in doua parti: <br>
- antetul <br>
- corpul
</p>
</body>
</html>

5
Stabilirea caracteristicilor textului de bază
Textul afişat într-o pagină HTML este caracterizat de atributele:
- mărime (size)
- culoare (color)
- font (face)
Acestea sunt atribute ale etichetei <font>. Sintaxa utilizată este:
<font size = număr color = culoare face = font>
unde:
- număr poate fi un număr întreg cuprins între 1 şi 7 (1 pentru fontul cel mai mic şi 7 pentru
fontul cel mai mare)
- culoare este o culoare precizată prin nume sau printr-o construcţie RGB
- font poate fi un font generic sau un font specific instalat pe calculatorul vizitatorului. Se
acceptă ca valoare şi o listă de fonturi separate prin virgulă.
Atributele stabilite de o etichetă <font> sunt valabile până la sfârşitul documentului sau până
la întâlnirea unei alte etichete <font>. Dacă eticheta <font> lipseşte, atunci textul din pagina Web
are atributele implicite: size = 3, color = ”black” şi style = ”Times New Roman”.
Aplicaţia 6. În fişierul [Link] prezentat în figura de mai jos, s-au folosit diferite valori ale
atributului size. De asemenea, pentru titlu s-a utilizat eticheta <h1>.

<html>
<head>
<title>Pagina Web</title>
</head>
<body>
<h1 align="center">Aceasta este o pagina Web!</h1>
Pentru marimea literelor se foloseste atributul size care poate
lua valoarea:<br>
<font size=1> 1<br> <font size=2> 2<br>
<font size=3> 3<br> <font size=4> 4<br>
<font size=5> 5<br> <font size=6> 6<br>
<font size=7> 7<br>
</body>
</html>

Stabilirea marginilor paginii Web

Poziţionarea conţinutului paginii Web faţă de marginile ferestrei browserului se poate face cu
ajutorul următoarelor atribute ale etichetei <body>:
- leftmargin stabileşte distanţa dintre marginea din stânga a ferestrei browserului şi
marginea din stânga a conţinutului paginii
- topmargin stabileşte distanţa dintre marginea de sus a ferestrei browserului şi marginea de
sus a conţinutului paginii
Ambele atribute pot primi următoarele valori:
- un număr întreg pozitiv reprezentând distanţa măsurată în pixeli
- un procent din lăţimea, respectiv înălţimea ferestrei browserului.

Imagini
Pentru a insera o imagine într-o pagină Web, se utilizează eticheta <img>. Pentru a identifica
imaginea care va fi inserată, se utilizează atributul src al etichetei <img>. Valoarea acestui atribut
este adresa URL a imaginii. Dacă imaginea se află în acelaşi director cu fişierul HTML care face
referire la imagine, atunci adresa URL a imaginii este formată numai din numele imaginii, inclusiv

6
extensia. Dacă imaginea se află în alt director, în construcţia adresei URL se utilizează adresarea
relativă, adică faţă de directorul curent.

Aplicaţia 7. Aplicaţia [Link] prezintă un document HTML în care s-a inserat o imagine.
Pentru ca exemplul să funcţioneze corect, trebuie ca imaginea să se afle în acelaşi director ca şi
fişierul [Link].

<html>
<head>
<title>Pagina Web cu imagine
</title>
</head>
<body>
<h1 align="center">
Imaginea de mai jos reprezinta un calculator
<img src="[Link]">
</body>
</html>

Figura următoare prezintă aceeaşi aplicaţie, în cazul în care imaginea nu se află în acelaşi
director cu documentul HTML.

Pentru a adăuga chenar în jurul unei imagini, se foloseşte atributul border al etichetei <img>,
atribut care primeşte valori întregi pozitive reprezentând grosimea în pixeli a chenarului.
O imagine are anumite dimensiuni pe orizontală şi pe verticală. Dimensiunile prestabilite ale
unei imagini pot fi modificate prin intermediul atributelor width şi height ale etichetei <img>.

7
 Valorile posibile ale acestor atribute sunt:
- numere întregi pozitive reprezentând dimensiunea respectivă exprimată în pixeli;
- numere de la 1 la 100 urmate de %, exprimând procentul din lăţimea, respectiv înălţimea
blocului în care se află imaginea.
Alinierea unei imagini într-o pagină Web se realizează cu ajutorul atributului align al etichetei
<img>, atribut care poate lua una din următoarele valori:
- left – aliniere la stânga: celelalte componente ale pagini sunt dispuse în partea dreaptă;
- right – aliniere la dreapta: celelalte componente ale pagini sunt dispuse în partea stângă;
- top – aliniere deasupra: partea de sus a imaginii se aliniază cu partea de sus a textului care
precede imaginea;
- middle – aliniere la mijloc: mijlocul imaginii se aliniază cu linia de bază a textului care
precede imaginea;
- bottom – aliniere la bază: partea de jos a imaginii se aliniază cu linia de bază a textului.
Alinierea textului în jurul unei imagini se realizează cu ajutorul atributelor hspace şi vspace
ale etichetei <img>, care precizează distanţa pe orizontală, respectiv pe verticală dintre imagine şi
restul elementelor din pagină.
Dacă dimensiunea unei imagini de înaltă rezoluţie este mare, timpul de încărcare a paginii
Web în fereastra browserului creşte cu atât mai mult cu cât legătura dintre client şi server este mai
lentă.
Pentru ca utilizatorul să înţeleagă ceva din imagine până la încărcarea acesteia, se afişează
elemente alternative care înlocuiesc imaginea până la încărcarea sa completă. Pentru aceasta se
utilzează două atribute ale etichetei <img>:
- atributul alt admite ca valoare un text care va fi afişat în locul imaginii (ori de câte ori
mouse-ul este poziţionat pe suprafaţa imaginii, pe ecran apare textul care conţine valoarea
atributului)
- atributul lowsrc admite ca valoare adresa unei imagini de joasă rezoluţie, de dimensiune
mică, imagine care poate fi încărcată imediat chiar dacă legătura dintre client şi server este
slabă.
O imagine poate fi folosită pentru a stabili fondul unei pagini Web, folosindu-se atributul
background al etichetei <body>, atribut care primeşte ca valoare adresa URL a imaginii. Imaginea
se multiplică pe verticală şi pe orizontală până umple tot ecranul.

Crearea listelor
Limbajul HTML permite crearea de liste neordonate (unordered), ordonate (ordered) sau de
definiţii (definition list).
O listă neordonată este un bloc de text delimitat de etichetele corespondente <ul> şi </ul> (ul –
unordered list). Fiecare element al listei este iniţiat de eticheta <li> (li – list item). Lista va fi
identată faţă de restul paginii Web; fiecare element al listei începe pe un rând nou. Tag-urile <ul>
şi <li> pot avea un atribut type care stabileşte caracterul afişat înaintea fiecărui element al listei.
Valorile posibile ale acestui atribut sunt:
- „circle” pentru „○”;
- „disc” pentru „●” (valoarea implicită);
- „square” pentru „■”.
O listă ordonată de elemente este un bloc de text delimitat de etichetele corespondente <ol> şi
</ol> (ol – ordered list). Fiecare element al listei este iniţiat de eticheta <li>. Tag-urile <ol> şi <li>
pot avea un atribut type care stabileşte tipul de caractere utilizate pentru ordonarea listei. Valorile
posibile sunt:
- „A” pentru ordonare de tipul A, B, C, D, …;
- „a” pentru ordonare de tipul a, b, c, d, …;
- „I” pentru ordonare de tipul I, II, III, IV, …;
- „i” pentru ordonare de tipul i, ii, iii, iv, …;
- „1” pentru ordonare de tipul 1, 2, 3, 4, …;

8
 Tag-ul <ol> poate avea un atribut start care stabileşte valoarea iniţială a secvenţei de
ordonare. Valoarea acestui atribut trebuie să fie un număr întreg pozitiv. Tag-ul <li> poate avea un
atribut value care stabileşte valoarea pentru elementul respectiv al listei. Valoarea acestui atribut
trebuie să fie un număr întreg pozitiv.
O listă de definiţii este formată dintr-o succesiune de termeni, fiecare termen fiind urmat de
definiţia sa. Întreaga listă de definiţii se încadrează între etichetele corespondente <dl> şi </dl>
(dl – definition list). Un termen al listei este iniţiat de eticheta <dt>, iar definiţia unui termen este
iniţiată de eticheta <dd>.
Aplicaţia 8. Vizualizaţi exemplul următor ([Link]). El conţine o listă neordonată, o listă ordonată
şi o listă de definiţii.
<html>
<head>
<title>Pagina Web
</title>
</head>
<body>
<ul>Pentru o lista neordonata, valorile posibile ale
atributului type sunt:
<li>„circle” pentru „○”;
<li>„disc” pentru „●” (valoarea implicită);
<li>„square” pentru „■”.
</ul>
<ol>Tipul de caractere utilizate pentru ordonarea listei se
stabileste cu atributul type:
<li>„A” pentru ordonare de tipul A, B, C, D, …;
<li>„a” pentru ordonare de tipul a, b, c, d, …;
<li>„I” pentru ordonare de tipul I, II, III, IV, …;
<li>„i” pentru ordonare de tipul i, ii, iii, iv, …;
<li>„1” pentru ordonare de tipul 1, 2, 3, 4, …;
</ol>
<dl>Termeni folositi in WWW
<dt>Internet
<dd>Internetul este o retea de calculatoare din
toata lumea care stochează informatii si le expediază
<dt>WWW
<dd>sistem de distributie locala sau globala a
informatiilor mutimedia
</dl>
</body>
</html>

Crearea tabelelor
În limbajul HTML, tabelele permit creatorului de pagini HTML să-şi aranjeze datele (text,
imagini, legături, …) pe rânduri şi coloane de celule.
Pentru a insera un tabel se folosesc etichetele corespondente <table> şi </table>. Un tabel este
format din rânduri. Pentru a insera un rând într-un tabel se folosesc etichetele <tr> şi </tr>
(folosirea etichetei de sfârşit </tr> este opţională). Un rând este format din mai multe celule ce
conţin date. O celulă de date se introduce cu eticheta <td>.
În mod implicit, un tabel nu are chenar. Atributul border al etichetei <table> adaugă un chenar
unui tabel. Valoarea acestui atribut poate fi orice număr întreg şi reprezintă grosimea în pixeli a
chenarului tabelei.

9
 Pentru a alinia un tabel într-o pagină Web se utilizeată atributul align al etichetei <table>, cu
următoarele valori posibile: „left” (valoarea implicită), „center” şi „right”. Culoarea de fond se
stabileşte cu ajutorul atributului bgcolor, care poate fi ataşat întregului tabel prin eticheta <table>,
unei linii prin eticheta <tr> sau unei celule de date prin eticheta <td>. Culoarea textului din fiecare
celulă poate fi stabilită cu ajutorul expresiei:
<font color = ”valoare”>… </font>.
Distanţa dintre două celule vecine se defineşte cu ajutorul atributului cellspacing al etichetei
<table>. Valorile acestui atribut pot fi numere întregi pozitive, inclusiv 0, şi reprezintă distanţa în
pixeli dintre două celule vecine. Distanţa dintre marginea unei celule şi conţinutul ei poate fi
definită cu ajutorul atributului cellpadding al etichetei <table>. Valorile acestui atribut pot fi
numere întregi pozitive, inclusiv 0, şi reprezintă distanţa în pixeli dintre marginea unei celule şi
conţinutul ei.

Aplicaţia 9. Vizualizaţi exemplul din figura anterioară ([Link]). Modificaţi valorile atributelor
cellspacing şi cellpadding şi observaţi efectul.

<html>
<head>
<title>Pagina Web cu tabel</title>
</head>
<body>
<table border="3" cellspacing="20" cellpadding="30">
<tr><td>Celula 1
<td>Celula 2
<tr><td>Celula 3
<td>Celula 4
</table>
</body></html>

Dimensiunile unui tabel – lăţimea şi înălţimea – pot fi stabilite exact prin intermediul a două
atribute, width şi height, ale etichetei <table>. Valorile acestor atribute pot fi:
- numere întregi pozitive reprezentând lăţimea, respectiv înălţimea în pixeli a tabelului;
- numere întregi între 1 şi 100 urmate de semnul %, reprezentând fracţiunea din lăţimea,
respectiv înălţimea totală a paginii.
Unui tabel i se poate asocia un titlu cu ajutorul etichetei <caption>. Aceasta trebuie plasată în
interiorul etichetelor <table>…</table>, dar nu în interiorul etichetelor <tr> sau <td>.
Un tabel poate avea celule cu semnificaţia de cap de tabel. Aceste celule sunt introduse de
eticheta <th> (table header) în loc de <td>. Conţinutul celulelor definite cu <th> este scris cu litere
aldine şi centrat. Toate atributele care pot fi ataşate etichetei <td> pot fi, de asemenea, ataşate
etichetei <th>.
Conţinutul unei celule poate fi aliniat pe orizontală cu ajutorul atributului align, care poate
lua valorile: „left” (la stânga), „center” (centrat), „right” (la dreapta), „char” (alinierea se face faţă
de un caracter). Valoarea implicită a atributului align este „center”. Dacă alinierea este de tipul
char, atunci caracterul în raport cu care se face alinierea este definit de atributul char care primeşte
ca valoare caracterul de aliniere (în mod implicit acest caracter este „.”). Alinierea pe verticală a
conţinutului unei celule se face cu ajutorul atributului valign, care poate lua valorile: „baseline”
(la bază), „bottom” (jos), „middle” (la mijloc), „top” (sus). Valoarea prestabilită este „middle”.
Dimensiunile unei celule de tip <td> sau de tip <th> pot fi stabilite exact cu ajutorul atributelor
width (pentru lăţime) şi height (pentru înălţime). Valorile posibile ale acestor atribute sunt:
- numere întregi pozitive (inclusiv 0) reprezentând dimensiunea în pixeli a lăţimii, respectiv
a înălţimii unei celule;
- procente din lăţimea, respectiv înălţimea tabelului.

10
 Două atribute ale etichetelor <td> sau <th> permit extinderea unei celule peste celulele vecine.
Astfel, extinderea unei celule peste celulele din dreapta ei se face cu ajutorul atributului colspan,
a cărui valoare determină numărul de celule care se unifică. Extinderea unei celule peste celulele
de dedesubt se face cu ajutorul atributului rowspan, a cărui valoare determină numărul de celule
care se unifică. Sunt posibile extinderi simultane ale unor celule pe orizontală şi pe verticală. În
acest caz, în etichetele <td> sau <th> vor fi prezente ambele atribute, colspan şi rowspan.
Atributul nowrap aparţine elementelor <td> şi <th> şi interzice întreruperea unei linii de text,
astfel că în tabel pot apărea coloane cu o lăţime oricât de mare.
Aplicaţia 10. Observaţi efectul utilizării atributelor colspan şi rowspan în exemplul următor
([Link]). Tabelul are titlu, introdus cu ajutorul etichetei <caption>.

<html>
<head>
<title>Pagina Web cu tabel
</title>
</head>
<body>
<table border="3">
<caption>Tabel cu celule extinse
<tr><td>Celula 1
<td>Celula 2
<td rowspan="2">Celula 3
<tr><td>Celula 4
<td>Celula 5
<tr><td>Celula 6
<td>Celula 7
<td>Celula 8
<tr><td colspan="3">Celula 9
</table>
</body>
</html>

Dacă un tabel are celule de date vide, atunci aceste celule vor apărea în tabel fără un chenar
de delimitare. În scopul de a afişa un chenar pentru celulele vide, se utilizează următoarele:
- după <td> se pune caracterul &nbsp;
- după <td> se pune <br>.
Blocul <colgroup>…</colgroup> permite definirea unui grup de coloane. Atributele
acceptate de <colgroup> sunt: span (determină numărul de coloane dintr-un grup); width
(determină o lăţime unică pentru coloanele din grup); align (determină un tip unic de aliniere
pentru coloanele din grup).
Atributul frame al etichetei <table> permite specificarea părţilor din chenarul unui tabel care
vor fi afişate. Valorile posibile ale acestui atribut sunt „void ”, „above ”, „below”, „hsides ”, „lhs
”, „rhs ”, „vsides ”, „box ”, „border ”.

Crearea legăturilor în limbajul HTML

Limbajul HTML utilizează hiperlegăturile pentru a realiza o conexiune cu un alt document de
pe Web. Există trei tipuri de legături:
- interne – legături în interiorul unui document HTML (pagină Web). Aceste legături ajută
la deplasarea prin documente ce conţin foarte multă informaţie;

11
 - locale – legături la alte pagini HTML de pe acelaşi server Web;
- externe – legături la pagini HTML aflate pe alte servere Web.
Limbajul HTML utilizează marcajul ancoră <a> (anchor) pentru a crea o legătură spre un alt
document. Un marcaj ancoră poate indica orice resursă de pe Web: un document HTML, o
imagine, un fişier sunet, un film. Sintaxa utilizată pentru crearea unei ancore este următoarea:
<a href=”URL”>Text ce va fi afisat</a>
Marcajul <a> este utilizat pentru a crea ancora, iar atributul href stabileşte adresa
documentului de care se leagă ancora. Textul dintre marcajul de start <a> şi marcajul final </a>
este textul care va fi afişat ca hiperlegătură.
Atributul target permite încărcarea paginii solicitate într-o altă fereastră decât cea curentă.
Atributul target acceptă următoarele valori cu semnificaţie specială:
- „_blank” (încărcarea are loc într-o fereastră nouă, anonimă);
- „_parent” (încărcarea are loc în fereastra părinte);
- „_self” (încărcarea are loc în aceeaşi fereastră);
- „_top” (încărcarea are loc în fereastra „top” a cadrelor curente).
Pentru a atribui un nume unei ancore, se utilizează atributul name. Utilizarea unei ancore cu
nume permite crearea unei legături direct la o anumită secţiune dintr-un document HTML,
eliminând deplasarea prin document. Sintaxa unei ancore ce are atribuit un nume este următoarea:
<a name=”nume”>Text ce va fi afisat</a>
Atributul title aparţine etichetei <a> şi comandă apariţia unei mici ferestre în pagina Web
când mouse-ul se află pe o legătură, fereastră în care este afişată valoarea acestui atribut. Acest
atribut are menirea de a furniza informaţii suplimentare despre semnificaţia unei legături.
O imagine poate fi folosită ca legătură către altă pagină Web. Pentru a utiliza imaginea
[Link] ca legătură către pagina [Link], se utilizează sintaxa:
<a href = "[Link]"><img src = "[Link]"></a>
În mod implicit, imaginea folosită ca legătură este înconjurată de un chenar având culoarea
unei legături. Pentru a înlătura acest chenar, se foloseşte atributul border la etichetei <img>, atribut
care trebuie să primească valoarea 0.

12