Limbajul HTML, CSS

1
 Cuprins
1. HTML – LIMBAJ DE MARCARE A HIPERTEXTULUI ............................................................... 4 
1.1. INTRODUCERE ÎN HTML ................................................................................................................... 4 
1.1.1. Crearea unui fişier HTML ........................................................................................................ 4 
1.1.2. HTML 4.0 sau HTML 3.2? ....................................................................................................... 6 
1.1.3. Validarea fişierelor HTML 4.01 ............................................................................................... 7 
1.2. ELEMENTE ŞI ATRIBUTE HTML ........................................................................................................ 8 
[Link] HTML............................................................................................................................. 8 
1.2.2. Elemente HTML........................................................................................................................ 8 
1.2.3. Atribute ..................................................................................................................................... 9 
1.3. ELEMENTE CE DEFINESC TITLURI, PARAGRAFE ................................................................................ 10 
1.3.1. Paragrafe ................................................................................................................................ 10 
1.3.2. Titluri (Headings) ................................................................................................................... 11 
1.3.3. Întreruperi de linie.................................................................................................................. 11 
1.3.4. Comentarii HTML .................................................................................................................. 12 
1.4. LISTE HTML ................................................................................................................................... 12 
1.4.1. Liste neordonate ..................................................................................................................... 12 
1.4.2. Liste ordonate ......................................................................................................................... 13 
1.4.3. Liste de definiţii ...................................................................................................................... 13 
1.5. LINKURI HTML .............................................................................................................................. 14 
1.5.1. Tagul Anchor şi Atributul Href ............................................................................................... 14 
1.5.2. Atributul Target ...................................................................................................................... 14 
[Link] Ancor şi Atributul Name ................................................................................................ 15 
1.6. HTML UNIFORM RESOURCE LOCATORS ......................................................................................... 17 
1.6.1. Hiperlegături HTML............................................................................................................... 17 
1.6.2. Uniform Resource Locators.................................................................................................... 17 
1.6.3. Scheme URL ........................................................................................................................... 18 
1.6.4. Accesarea unui grup de noutăţi (Newsgroup) ........................................................................ 18 
1.6.5. Preluarea fişierelor cu FTP.................................................................................................... 18 
1.6.6. Hiperlegătură către sistemul Mail.......................................................................................... 18 
1.7. IMAGINI ........................................................................................................................................... 18 
1.7.1. Adresa URL a unei imagini .................................................................................................... 19 
1.7.2. Chenarul şi dimensionarea unei imagini ................................................................................ 19 
1.7.3 Alinierea unei imagini ............................................................................................................. 20 
1.7.4. Alinierea textului în jurul imaginii ......................................................................................... 20 
1.7.5. Imagini în calitate de referinţe ............................................................................................... 21 
1.7.6. Utilizări speciale ale imaginilor ............................................................................................. 21 
1.8. TABELE HTML ............................................................................................................................... 21 
1.8.1. Crearea unui tabel .................................................................................................................. 21 
1.8.2. Tabele şi Atributul Border ...................................................................................................... 22 
1.8.3. Titluri în tabel ......................................................................................................................... 22 
1.8.4. Celule libere (vide) în tabel .................................................................................................... 22 
1.8.5. Atributele Cellpadding şi Cellspacing .................................................................................... 23 
1.8.6. Alinierea conţinutului în tabel ................................................................................................ 24 
1.9. FORMULARE .................................................................................................................................... 25 
1.9.1. Atribute esenţiale ale elementului <form>............................................................................. 25 
1.9.2. Cîmp de tip text ....................................................................................................................... 26 
1.9.3. Butoane ................................................................................................................................... 27 
1.9.4. Butonul Send ........................................................................................................................... 27 
1.9.5. Butonul Reset .......................................................................................................................... 28 
1.9.6. Cîmp de tip ”password” ......................................................................................................... 28 
1.9.7. Butoane radio ......................................................................................................................... 29 
1.9.8. Casete de validare .................................................................................................................. 29 
1.9.9. Casete de fişiere ..................................................................................................................... 29 
1.9.10. Liste de selecţie..................................................................................................................... 30 
1.9.11. Listă de selecţie cu selecţii multiple ..................................................................................... 31 
1.9.12. Cîmpuri text comentariu ....................................................................................................... 31 
1.9.13. Un formular complex ............................................................................................................ 32 
1.10. CADRE (FRAMES) ÎN HTML .......................................................................................................... 33 

2
 1.10.1. Crearea cadrelor .................................................................................................................. 33 
1.10.2. Dimensionarea chenarului unui cadru ................................................................................. 35 
1.10.3. Bare de derulare ................................................................................................................... 36 
1.10.4. Poziţionarea documentului într-un cadru............................................................................. 37 
1.10.5. Cadre interne ........................................................................................................................ 37 
1.10.6. Ţinte pentru legături ............................................................................................................. 38 
1.11. FONTURI HTML............................................................................................................................ 39 
1.11.1. Elementul HTML <font> ...................................................................................................... 40 
1.11.2. Atributele elementului Font .................................................................................................. 40 
1.12. CULORI HTML.............................................................................................................................. 40 
[Link] pentru culori ............................................................................................................... 40 
1.12.2. Nume de culori ..................................................................................................................... 41 
1.12.3. Culori Web Safe (sigure) ...................................................................................................... 41 
1.12.4. Paleta de 216 de culori independente de platformă ............................................................. 41 
ANEXA 1 ................................................................................................................................................ 42 
ANEXA 2 ................................................................................................................................................ 43 
ANEXA 3 ................................................................................................................................................ 45 
2. CASCADING STYLE SHEETS - CSS .............................................................................................. 49 
2.1. NOŢIUNI DE BAZĂ............................................................................................................................ 49 
2.2. SINTAXA CSS .................................................................................................................................. 50 
2.3. ELEMENTELE ID ŞI CLASS ................................................................................................................ 51 
2.4. PSEUDOCLASE DE STILURI CSS ....................................................................................................... 57 
2.5. MODALITĂŢI DE MODIFICARE A CURSORULUI ................................................................................. 58 
2.6. DIV, SPAN SI ETICHETE CSS ............................................................................................................. 59 
2.7. STILURI PENTRU FONTURI................................................................................................................ 60 
2.8. COMPUNEREA STILURILOR .............................................................................................................. 62 
2.9. STILURI PENTRU TEXT ..................................................................................................................... 62 
2.10. STILURI PENTRU BACKGROUND ..................................................................................................... 65 
2.11. STILURI PENTRU LISTE ................................................................................................................... 67 
2.12. CHENARE ŞI MARGINI .................................................................................................................... 68 
2.13. POZIŢIONAREA OBIECTELOR .......................................................................................................... 71 
BIBLIOGRAFIE ...................................................................................................................................... 73 

3
 1. HTML – LIMBAJ DE MARCARE A HIPERTEXTULUI

1.1. Introducere în HTML

Unul dintre primele elemente fundamentale ale WWW (World Wide Web) este HTML
(abrevierea de la Hyper Text Markup Language – limbaj de marcare a hipertextului), care
descrie formatul în care documentele sînt distribuite şi văzute pe Web. Multe din trăsăturile
lui, cum ar fi independenţa faţă de platformă, structurarea formatării şi legăturile hipertext, fac
din el un foarte bun format pentru documentele Internet şi Web.
HTML a fost dezvoltat iniţial de Tim Berners-Lee la CERN în 1989. HTML a fost gîndit ca o
posibilitate pentru fizicienii care utilizau computere diferite şi schimbau între ei informaţii
utilizînd Internetul. Erau necesare cîteva caracteristici: independenţa de platformă, posibilităţi
hypertext şi structurarea documentelor. Independenţa de platformă înseamnă că un document
poate fi afişat în mod asemănător de computere diferite, lucru vital pentru o audienţă variată.
Hipertext înseamnă ca orice cuvînt, frază, imagine sau alt element al documentului văzut de
un utilizator (client) poate face referinţă la un alt document, ceea ce uşurează mult navigarea
între multiple documente sau chiar în interiorul unui şi aceluiaşi document. Structurarea
documentelor permite convertirea acestora dintr-un format în altul şi este efectuată prin
conferirea unor anumite semnificaţii unor părţi componente ale documentului.
Standardul oficial HTML este World Wide Consortium (W3C). W3C a lansat cîteva versiuni
ale specificaţiei HTML, printre care HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0 şi, cel
mai recent, HTML 4.01. În acelaşi timp, autorii de browsere, cum ar fi Netscape şi Microsoft,
au dezvoltat adesea propriile ”extensii” HTML în afara procesului standard şi le-au incorporat
în browserele lor. În unele cazuri, cum ar fi tagul Netscape, aceste extensii au devenit
standarde de facto adoptate de autorii de browsere.
Un fişier HTML este un fişier text ce conţine taguri de marcare.
Tagurile de marcare indică browserului Web cum să afişeze documental dat.
Un fişier HTML trebuie să fie cu extensiunea htm sau html.
Un fişier HTML poate fi creat utilizînd un editor simplu de text.

1.1.1. Crearea unui fişier HTML

În sistemul de operare Windows lansaţi programul Notepad din categoria Accesorii
(Accessories) prin:
Start → Programs→ Accessories→Notepad.
Scrieţi următorul text:
<html>
<head>
<title>Titlul paginii</title>
</head>

4
<body>
Aceasta este prima mea pagină Web.
</body>
</html>

Salvaţi fişierul cu numele "[Link]".

Lansaţi browserul Internet Explorer. Selectaţi "Open" (sau "Open Page") din meniul File al
browserului. Apare o fereastră de dialog. Selectaţi "Browse" (sau "Choose File") şi localizaţi
fişierul HTML creat - "[Link]" – selectaţi-l şi efectuaţi click pe "Open". În fereastra de
dialog va apărea adresa fişierului, de exemplu "D:\HTML\[Link]". Efectuaţi click OK şi
browserul va afişa această pagină.

Explicarea exemplului
Orice document HTML începe cu notaţia <html> şi se termină cu notaţia </html>. Aceste
notaţii se numesc în literatura de specialitate ”taguri”. Prin convenţie, toate tagurile HTML
încep cu o paranteză unghiulară deschisă ”<” şi se termină cu o paranteză unghiulară închisă
”>”. Tagurile între aceste paranteze transmit comenzi către browser pentru a afişa pagina într-
un anumit mod. Tagul <html> indică browserului că acesta este începutul documentului
HTML. Ultimul tag din document este </html>. Acest tag indică browserului că acesta este
sfîrşitul documentului HTML.
Între cele două marcaje <html> şi </html> există două secţiuni: - secţiunea de antet
<head>...</head> şi - corpul documentului <body>...</body>. Blocul <body>...</body>
cuprinde conţinutul propriu-zis al paginii HTML, adică ceea ce va fi afişat în fereastra
browser-ului.
Un tag poate fi scris atît cu litere mici, cît şi cu litere mari. Adică, <HTML> = <HtmL> =
<html>. Caracterele ”spaţiu” şi ”CR/LF” ce apar între taguri sînt ignorate de către browser.
Titlul unei pagini se obţine inserînd în secţiunea <head>...</head> a următoarei linii:
<title> Titlul paginii Web </title>

Conţinutul blocului <title>...</title> va apărea în bara de titlu a ferestrei browser-ului. Dacă

acest bloc lipseşte într-o pagină HTML, atunci în bara de titlu a ferestrei browser-ului va
apărea numele fişierului.
Textul dintre tagurile <body> şi </body> este textul care apare în fereastra browserului. În
secţiunea <body>...</body> poate fi scris text cît doriţi. Daca nu apare nici un marcaj de tipul
<tag>, atunci interpretatorul HTML le va lua ca texte simple şi le va afişa pe ecran.
Dacă introducem mai multe linii intr-o pagină, browser-ul va afişa într-un singur rînd, întrucît
caracterele ”CR/LF” sînt ignorate de browser. Trecerea pe o linie nouă se face la o comandă
explicită, care trebuie să apară în pagina html. Această comandă este marcajul <br> (de la
”line break” - întrerupere de linie).
Textul dintre tagurile <head> şi </head> este o informaţie de antet. Informaţia de antet nu este
afişată în fereastra browserului.

5
Extensiune HTM sau HTML?
Fişierul HTML poate fi salvat cu extensiunea .htm sau .html. În exemplu a fost utilizată
extensiunea .htm prin analogie cu extensiunile de 3 litere ale altor fişiere, deşi extensiunea
.html este echivalentă.

Editoare HTML
Documentele HTML sînt documente în format ASCII şi, prin urmare, pot fi create cu orice
editor de texte. Fişierele HTML pot fi create şi redactate utilizînd un editor WYSIWYG (what
you see is what you get - ce vezi este ceea ce obţii ), precum FrontPage, Claris Home Page,
sau Adobe PageMill, fără a fi nevoie să scrieţi tagurile de marcare în textul documentului.
Au fost, de asemenea, dezvoltate convertoare care permit formatarea HTML a documentelor
generate (şi formatate) cu alte editoare. Dacă doriţi să fiţi un elaborator Web profesionist, este
necesar să utilizaţi un editor de texte pentru a învăţa a scrie fişiere HTML.

Întrebări frecvente (Frequently Asked Questions)

După ce am compus un fişier HTML, nu pot vedea rezultatul în browser. Care este cauza?
Asuguraţi-vă că aţi salvat documentul cu un nume corect cu extensiunea .htm sau .html, de
exemplu "d:\[Link]". De asemenea, asiguraţi-vă că utilizaţi acelaşi nume cînd deschideţi
fişierul în browser.
Am încercat să redactez fişierul HTML, dar modificările nu au apărut în browser. Care este
cauza?
Browserul menţine paginile în memoria cache, ca să nu citească aceeaşi pagină de două ori.
Dacă aţi modificat pagina, browserul nu ştie acest lucru. Utilizaţi butonul refresh/reload al
browserului pentru a forţa browserul să citească pagina modificată.
Ce browser trebuie să utilizez?
Poate fi utilizat orice browser, Internet Explorer, Mozilla, Netscape sau Opera. Unele
documente Web necesită ultimele versiuni ale browserelor.

1.1.2. HTML 4.0 sau HTML 3.2?

HTML 3.2 nu mai este recomandat să se utilizeze!

Iniţial, HTML nu a fost lansat pentru formatarea documentelor. Tagurile HTML au fost
create pentru a defini conţinutul sau structura documentului, de exemplu:
<p>Acesta este un paragraf</p>
<h2>Acesta este un titlu</h2>.
De cînd au fost adăugate taguri de tipul <font> şi atributele pentru culori în specificaţiile
HTML 3.2 programatorii de pagini Web se confruntă cu mari probleme. Elaborarea unor

6
situri Web de proporţii, unde fonturile şi culorile trebuie adăugate pentru fiecare pagină Web,
a devenit un proces de durată, anevoios şi extenuant.

Ce este valoros în HTML 4.0?

În HTML 4.0 toate formatările pot fi scoase în afara documentului HTML şi incluse într-o
foaie separată denumită style sheet sau foaie de stil.
Deoarece HTML 4.0 separă prezentarea documentului de structura lui, a fost obţinut ceea ce
se dorea dintotdeauna: controlul total al şablonului de prezentare fără a implica conţinutul
documentului.

Ce se recomandă?
Încetaţi să utilizaţi atribute de prezentare în interiorul tagurilor HTML.
Lista completă a tagurilor HTML indică tagurile şi atributele învechite (deprecated) HTML
4.0 şi este prezentată în Anexa 1.

1.1.3. Validarea fişierelor HTML 4.01

Un document HTML este validat referitor la Document Type Definition - Definirea Tipului
de Document (DTD). Înainte de a valida un fişier HTML, este necesar a adăuga DTD corect
în primul rînd al fişierului.
HTML 4.01 Strict DTD permite includerea elementelor şi atributelor care nu sînt învechite
sau nu se utilizează în definirea cadrelor (frameset):

<!DOCTYPE HTML PUBLIC

"-//W3C//DTD HTML 4.01//EN"
"[Link]

HTML 4.01 Transitional DTD permite includerea tuturor elementelor din DTD strict plus
elementele şi atributele învechite:

<!DOCTYPE HTML PUBLIC

"-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]

HTML 4.01 Frameset DTD include tranziţional DTD plus cadrele (frames):

<!DOCTYPE HTML PUBLIC

"-//W3C//DTD HTML 4.01 Frameset//EN"
"[Link]

7
1.2. Elemente şi atribute HTML
Documentele HTML sînt fişiere de tip text, care conţin elemente HTML.
Elementele HTML sînt definite prin intermediul tagurilor HTML.

[Link] HTML
 Tagurile HTML se utilizează pentru a marca elementele HTML.
 Tagurile HTML sînt delimitate prin intermediul a 2 caractere < şi >.
 Caracterele de delimitare se numesc paranteze unghiulare.
 Tagurile HTML de obicei se utilizează în perechi, de exemplu <body> şi </body>.
 Primul tag din pereche este tagul de start, al doilea tag este tag de final.
 Textul dintre tagul de start şi de tagul final este conţinutul elementului.
 Tagurile HTML nu depind de registru, <body> este echivalent cu <BODY>.
 Unele elemente HTML au numai tag de start. Aceste elemente se numesc vide
(empty).
 Tagurile de final sînt opţionale pentru unele elemente, standardul HTML 4.0
recomandă însă includerea tagurilot de final opţionale.

1.2.2. Elemente HTML

Considerăm un exemplu de document HTML:
<html>
<head>
<title>Elemente HTML</title>
</head>
<body>
<p>
Fragment de text. <b>Acest text este evidenţiat cu aldine</b>
</p>
</body>
</html>

Acesta este un element HTML:

<b> Acest text este evidenţiat cu aldine </b>

Elementul HTML începe cu tagul de start: <b>.

Conţinutul elementului HTML este: Acest text este evidenţiat cu aldine.
Elementul HTML se termină cu tagul de final: </b>.
Tagul <b> se utilizează pentru a defini un element HTML afişat cu aldine.
Acesta este de asemenea un element HTML:
<body>
<p>
Fragment de text. <b>Acest text este evidenţiat cu aldine</b>
</p>
</body>

8
Acest element HTML începe cu tagul de start <body> şi se termină cu tagul de final </body>.
Tagul <body> defineşte elementul HTML care conţine corpul documentului HTML.

De ce utilizăm taguri cu minuscule?

Tagurile (tags) HTML nu depind de registru: <B> este echivalent cu <b>. Dacă veţi naviga pe
Web, veţi observa că în majoritatea tutorialelor se utilizează taguri HTML scrise cu
majuscule. În această lucrare se utilizează taguri HTML scrise cu minuscule. De ce?
Consorţiumul World Wide Web (W3C) [Link] recomandă utilizarea tagurilor
HTML cu minuscule în standardele HTML 4. XHTML (generaţia următoare HTML) necesită
de asemenea taguri cu minuscule.

1.2.3. Atribute
Tagurile pot avea atribute. Atributele oferă informaţie suplimentară despre elementele HTML.
Tagul <body> defineşte elementul body din pagina HTML. Dacă se adaugă atributul bgcolor,
atunci browserul afişează pagina într-o culoare de fundal indicată de valoarea atributului
bgcolor.
Exemplu culoare de fundal. Dacă fundalul paginii este galben deschis, atunci trebuie să se
scrie:
<body bgcolor="lightyellow">.
Exemplu tabel fără bordură. Tabelele se creează cu tagul <table>. Dacă se adaugă atributul
border cu valoarea 0, atunci browserul va afişa un tabel fără bordură.
<table border="0">
Atributele se utilizează întotdeauna în perechi: name="value" (nume="valoare").
Atributele se adaugă întotdeauna în tagul de start al elementului HTML.

Utilizarea ghilimelelor: "red" sau 'red'?

Valorile atributelor trebuie să fie întotdeauna incluse între ghilimele. În majoritatea cazurilor
se utilizează ghilimele duble, dar pot fi utilizate şi ghilimele simple.
Rareori, atunci cînd valoarea atributului conţine ghilimele, este necesar să se utilizeze
ghilimele simple:
name='Ion "NumeScurt" Ionescu'

9
1.3. Elemente ce definesc titluri, paragrafe

1.3.1. Paragrafe
Cele mai utilizate taguri HTML sînt cele ce definesc titlurile (headings), paragrafele
(paragraphs) şi întreruperile de linie (line breaks).
Cea mai eficientă cale de a studia HTML este de a scrie şi a testa diferite exemple.

Testează singur - Exemple

Cel mai simplu document HTML
Acest exemplu este un document HTML foarte simplu, cu un număr minim de taguri HTML.
Exemplul demonstrează cum este afişat textul din interiorul elementului body în fereastra
browserului.
Cod HTML:
<html>
<body>
Continutul elementului body. Text structurat prin intermediul tagurilor
HTML. Rezultatul apare in fereastra browserului.
</body>
</html>

Rezultat:
Continutul elementului body. Text structurat prin intermediul tagurilor
HTML. Rezultatul apare in fereastra browserului.

Paragrafe simple
Acest exemplu demonstrează cum este afişat textul marcat cu elementul paragraph.
Cod HTML:
<html>
<body>
<p> Acesta este text din paragraf. </p>
<p> Acesta este text din paragraf. </p>
<p> Acesta este text din paragraf. </p>
<p> Elementul paragraph este definit de tagul p.</p>
</body>
</html>

Rezultat:
Acesta este text din paragraf.

Acesta este text din paragraf.

Acesta este text din paragraf.

Elementul paragraph este definit de tagul <p>. HTML adaugă în mod automat spaţiu liber
pînă şi după paragraf.

10
1.3.2. Titluri (Headings)
Titlurile sînt definite cu tagurile <h1> - <h6>. <h1> defineşte titlul de nivel 1 (mai important,
evidenţiat cu litere aldine avînd cea mai mare înălţime relativă. <h6> defineşte titlul de nivel 6
(cel mai mic).
HTML adaugă în mod automat un rind liber pînă şi după titlu.
Cod HTML:
<html>
<body>
<h1> Titlu de nivel 1 </h1>
<h2> Titlu de nivel 2 </h2>
<h3> Titlu de nivel 3 </h3>
<h4> Titlu de nivel 4 </h4>
<h5> Titlu de nivel 5 </h5>
<h6> Titlu de nivel 6 </h6>
<p> Utilizati tagurile heading doar pentru titluri. Nu le utilizati pentru
a evidentia un text. Există alte taguri pentru evidentiere.</p>
</body>
</html>

Rezultat.

Titlu de nivel 1
Titlu de nivel 2
Titlu de nivel 3
Titlu de nivel 4
Titlu de nivel 5
Titlu de nivel 6

Sfaturi utile
Utilizaţi tagurile heading doar pentru titluri. Nu le utilizaţi pentru a evidenţia
un text. Existã alte taguri pentru evidenţiere.

1.3.3. Întreruperi de linie

Tagul <br> se utilizează cînd doriţi ca rîndul să se termine, dar nu doriţi să începeţi un
paragraf nou. Tagul <br> forţează textul să treacă dintr-un rînd în altul, indiferent unde este
plasat acest tag.
<p>Acesta <br> este para<br>graf cu întreruperi de linie.</p>

Tagul <br> este vid (empty). El nu are tag de final.

Rezultat:

Acesta
este para
graf cu întreruperi de linie.

11
1.3.4. Comentarii HTML
Tagul pentru comentariu este utilizat pentru a insera un comentariu în sursa cod HTML.
Comentariul este ignorat de browser. Comentariile se utilizează pentru a explica codul
HTML, pentru revizuiri ulterioare.
<!—Acesta este un comentariu -->

Notă. Semnul exclamării apare după paranteza unghiulară de deschidere, dar nu înainte de
paranteza de închidere.

Sfaturi utile
Atunci cînd scrieţi text HTML, nu puteţi şti cum va apărea acest text în alt
browser. Unii utilizatori au calculatoare cu ecrane de dimensiuni mari, alţii –
calculatoare cu ecrane de dimensiuni mici. Textul va fi reformatat de fiecare
dată cînd utilizatorul va redimensiona fereastra browserului. Nu încercaţi
niciodată să formataţi textul din editor prin adăugarea liniilor libere sau a
spaţiilor în text.
HTML va elimina spaţiile din text. Orice număr de spaţii va fi interpretat ca un
singur spaţiu. În HTML un rînd nou din editorul de text se interpretează ca un
spaţiu.
Nu se recomandă utilizarea paragrafelor vide<p> pentru a insera un rînd nou.
Utilizaţi în acest scop tagul <br>. (Nu utilizaţi însă tagul <br> pentru a crea
liste.)
Paragrafele pot fi create fără tagul de închidere </p>, adică tagul </p> este
opţional. Se recomandă să utilizaţi tagul </p>. Următoarea versiune HTML nu
va permite să omiteţi nici un tag de închidere.
HTML adaugă în mod automat un rînd liber înainte şi după unele elemente, de
exemplu pînă şi după un paragraf, precum şi pînă şi după titluri.
În această lucrare se utilizează o linie orizontală (tagul <hr> ) pentru a
separa diferite teme.

Taguri de bază HTML

Tag Descriere
<html> Defineşte un document HTML
<body> Defineşte corpul documentului
<h1> - <h6> Defineşte titlurile de nivel 1 pînă la 6
<p> Defineşte un paragraf
<br> Inserează o singură întrerupere de linie
<hr> Defineşte o linie orizontaă
<!--> Defineşte un comentariu

1.4. Liste HTML

În HTML există liste ordonate (numerotate), liste neordonate (marcate) şi liste de definiţii.

1.4.1. Liste neordonate

O listă marcată este o listă de elemente (cuvinte sau fraze scurte). Elementele din listă sînt
marcate printr-un character special (de obicei, cerculeţe mici).
O listă marcată are tagul de start <ul>. Fiecare element din listă este identificat de tagul <li>.

12
<ul>
<li>Molid</li>
<li>Pin</li>
<li>Brad</li>
</ul>

În browser va apărea:
 Molid
 Pin
 Brad

În interiorul elementelor din listă pot fi incluse paragrafe, întreruperi de linie, imagini, linkuri,
alte liste etc.

1.4.2. Liste ordonate

O listă ordonată este de asemenea o listă de elemente. Elementele din listă sînt marcate prin
numere, de aceea aceste liste se mai nuesc numerotate.
O listă marcată are tagul de start <ol>. Fiecare element din listă este identificat de tagul <li>.
<ol>
<li>Molid</li>
<li>Pin</li>
<li>Brad</li>
</ol>

În browser va apărea:
1. Molid
2. Pin
3. Brad

În interiorul elementelor din listă pot fi incluse paragrafe, întreruperi de linie, imagini, linkuri,
alte liste etc.

1.4.3. Liste de definiţii

O listă de definiţii nu este o listă de elemente. Aceasta este o listă de termeni (noţiuni) şi de
explicări ale acestor termeni.
O listă de definiţii începe cu tagul <dl>. Fiecare termen al definiţiei începe cu tagul <dt>.
Fiecare definiţie începe cu tagul <dd>.
<dl>
<dt>HTML</dt>
<dd>Limbaj de marcare a hipertextului</dd>
<dt>FTP</dt>
<dd>Protocol de transfer al fişierelor</dd>
</dl>

În browser va apărea:
HTML
Limbaj de marcare a hipertextului
FTP
Protocol de transfer al fişierelor

13
În interiorul definiţiei din lista de definiţii (tagul <dd>) pot fi incluse paragrafe, întreruperi de
linie, imagini, linkuri, alte liste etc

Taguri pentru crearea listelor

Tag Descriere
<ol> Defineşte o listă ordonată
<ul> Defineşte o listă neordonată
<li> Defineşte un element din listă
<dl> Defineşte o listă de definiţii
<dt> Defineşte un termen din definiţie
<dd> Defineşte descrierea definiţiei
<dir> Învechit (Deprecated). Utilizaţi <ul>
<menu> Învechit (Deprecated). Utilizaţi <ul>

1.5. Linkuri HTML

HTML utilizează elementul hyperlink (link, ancoră) pentru a crea o legătură către alt document
de pe Web.

1.5.1. Tagul Anchor şi Atributul Href

HTML utilizează elementul <a> (anchor) pentru a crea un link către alt document.

O ancoră poate face legătura către orice altă resursă de pe Web: o pagină HTML, o imagine,
un fişier de tip sunet, un fişier de tip videofilm etc.
Sintaxa de creare a unei ancore:
<a href="url">Textul linkului</a>

Tagul <a> este utilizat pentru a crea o ancoră prin care se face legătura către o altă resursă,
atributul href este utilizat pentru a indica adresa documentului către care se face legătura, iar
textul dintre tagurile de deschidere şi de închidere ale ancorei va apărea ca hyperlink.
Această ancoră defineşte o legătură către pagina ziarului „Timpul”:
<a href="[Link] Timpul!</a>

Rîndul de mai sus va apărea astfel în browser:

Citiţi Timpul!

1.5.2. Atributul Target

Atributul Target este utilizat pentru a indica unde să se deschidă documentul către care se
face hiperlegătura.
În exemplul ce urmează documentul din hiperlegătură se deschide într-o fereastră nouă a
browserului:
<a href="[Link] target="_blank">Citiţi Timpul!</a>

14
[Link] Ancor şi Atributul Name
Atributul Name este utilizat pentru a crea o ancoră denumită. Ancorele denumite se utilizează
pentru a crea legături către secţiuni sau fragmente specifice din pagina dată. Prin intermediul
acestor legături utilizatorul derulează documentul în fereastra browserului fără a utiliza bara
de derulare verticală în mod manual, atunci cînd vrea să găsească un fragment anume din
document.
Sintaxa pentru ancora denumită este următoarea:
<a name="fragment">Fragment de text către care indică hiperlegătura internă
din document.</a>

Atributul Name este utilizat pentru a crea o ancoră denumită. Valoarea atributului Name este
arbitrară şi este definită de autorul paginii. Este important ca autorul să nu utilizeze valori ce
se repetă.
Exemplu de ancoră denumită:
<a name="sfat">Secţiunea sfaturi utile</a>

Ancora denumită nu este evidenţiată în nici un fel în fereastra browserului.

Pentru a face o legătură direct către secţiunea „sfaturi”, se adaugă un caracter # şi valoarea
atributului Name al ancorei la sfîrşitul URL, în felul următor:
<a href="[Link]
Vezi secţiunea Sfaturi utile</a>

Hiperlegătura către sectiunea sfaturi utile din interiorul fişierului „html_links.html” va apărea
astfel:
<a href="#sfat">Vezi Secţiunea Sfaturi utile</a>

Sfaturi utile
Întotdeauna adăugaţi un slash (caracterul /) atunci cînd faceţi referinţă către
un subdirectoriu. Dacă scrieţi astfel: href="[Link] veţi
genera 2 interogări HTTP către server, deoarece serverul va adăuga un slash
la sfîrşitul adresei şi va crea o interogare nouă de felul:
href="[Link]
Ancorele denumite sînt deseori utilizate pentru a crea „meniuri de conţinut” la
începutul unui document de proporţii. Fiecărei secţiuni din interiorul
documentului i se atribuie o ancoră denumită şi se creează hiperlegături către
aceste ancore denumite la începutul documentului.
Dacă browserul nu poate găsi o ancoră denumită, documentul este derulat
către început. Nu se produce nici o eroare.

Alte Exemple
Deschiderea unei legături într-o fereastră nouă a browserului

15
Acest exemplu demonstrează cum pote fi făcută legătura către alt document care se va
deschide într-o fereastră nouă, astfel ca vizitatorul să nu părăsească pagina curentă.

<html>
<body>
<a href="ultima_pagina.htm" target="_blank">Ultima Pagina</a>
<p>
Dacă valoarea atributului target a elementului anchor este "_blank",atunci
documentul la care se face referinţă se va deschide într-o fereastră nouă.
</p>
</body>
</html>

Link către o locaţie din aceeaşi pagină

Acest exemplu demonstrează cum poate fi creată o hiperlegătură către un fragment (secţiune)
din document.

<html>
<body>
<p>
<a href="#C4">Vezi Capitolul 4.</a>
</p>
<h2>Capitolul 1</h2>
<p> În acest capitol se explică teoria ... </p>
<h2> Capitolul 2</h2>
<p> În acest capitol se explică teoria ... </p>
<h2> Capitolul 3</h2>
<p> În acest capitol se explică teoria ... </p>
<h2><a name="C4"> Capitolul 4</a></h2>
<p> În acest capitol se explică teoria ... </p>
<h2> Capitolul 5</h2>
<p> În acest capitol se explică teoria ... </p>
<h2> Capitolul 6</h2>
<p> În acest capitol se explică teoria ... </p>
<h2> Capitolul 7</h2>
<p> În acest capitol se explică teoria ... </p>
<h2> Capitolul 8</h2>
<p> În acest capitol se explică teoria ... </p>
</body>
</html>

Crearea unei legături mailto

Acest exemplu demonstrează cum poate fi creată o hiperlegătură de expediere a unui mesaj
electronic (va funcţiona doar în cazul cînd este configurat un program client de poştă
electronică).

<html>
<body>
<p>
Aceasta este o hiperlegătură pentru expedierea unui mesaj electronic:
<a href="[Link] Mail</a>
</p>
<p>

16
<b>Notă:</b> Spaţiile dintre cuvinte trebuie să fie înlocuite cu %20 pentru
ca browserul să afişeze corect textul.
</p>
</body>
</html>

Taguri Link
Tag Descriere
<a> Defineşte o ancoră

1.6. HTML Uniform Resource Locators

1.6.1. Hiperlegături HTML

Atunci cînd efectuaţi un click pe o hiperlegătură din documentul HTML de tipul: Pagina
următoare, tagul <a>, care este responsabil de afişarea hiperlegăturii, indică calea spre o
locaţie (o adresă) de pe Web prin valoarea atributului href astfel: <a href="pagina-
[Link]">Pagina următoare</a>.
Hiperlegătura din acest exemplu este una relativă faţă de pagina din care este accesată. Dacă
pagina curentă unde se află hiperlegătura dată este plasată la adresa
[Link] atunci browserul va construi o adresă Web completă astfel
[Link] pentru a accesa această pagină.

1.6.2. Uniform Resource Locators

Noţinea Uniform Resource Locator (URL) este utilizată pentru a indica şi accesa adresa
unui document (sau alte date) din World Wide Web. O adresă completă:
[Link] respectă următoarea sintaxă:
scheme://[Link]:port/path/filename

Partea scheme defineşte tipul serviciului Internet. Cel mai frecvent utilizat tip este http
(abreviere de la Hyper Text Transfer Protocol – Protocol de transfer al hipertextului).
Partea domain defineşte numele de domeniu (domain name) Internet al serverului, unde este
plasată informaţia, de exemplu [Link].
Partea host defineşte domeniul gazdă - host. Dacă host lipseşte, atunci în mod predefinit
pentru protocolul http host este www.
Partea :port defineşte numărul portului (port number) al serverului gazdă. De obicei, numărul
portului este omis. În mod prestabilit pentru http numărul portului este 80.
Partea path defineşte calea (path) (subdirectoriul) de pe server către documentul dat. Dacă
calea este omisă, resursa (documentul) trebuie să fie plasat în directoriul rădăcină pe serverul
Web.

17
Partea filename defineşte numele documentului (numele fişierului). Implicit, numele
fişierului care este afişat la lansarea primei pagini a site-ului dat trebuie să fie [Link].
[Link], [Link], [Link], în dependenţă de configurările serverului Web.

1.6.3. Scheme URL

Cele mai frecvente scheme URL sînt următoarele:
Schemă Acces
file Fişier de pe calculatorul local PC
ftp Fişier de pe un server FTP
http Fişier de pe un server World Wide Web
gopher Fişier de pe un server Gopher
news Un grup de noutăţi Usenet
telnet Conexiune Telnet
WAIS Fişier de pe un server WAIS

1.6.4. Accesarea unui grup de noutăţi (Newsgroup)

Codul HTML: <a href="[Link]">HTML Newsgroup</a> creează o hiperlegătură către
un grup de noutăţi newsgroup astfel: HTML Newsgroup.

1.6.5. Preluarea fişierelor cu FTP

Codul HTML:
<a href="[Link] WinZip</a>

creează o hiperlegătură pentru a prelua un fişier astfel: Download WinZip.

1.6.6. Hiperlegătură către sistemul Mail

Codul HTML :
<a href="[Link]

crează o hiperlegătură către adresa de poştă electronică indicată astfel:

login@[Link]

1.7. Imagini
Imaginile sînt stocate în fişiere cu diverse formate. Formatele acceptate de browsere pentru
fişierele imagine sînt:
 GIF (Graphics Interchange Format) cu extensia .gif;
 JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg;
 PNG (Portable Network Graphic) cu extensia png;
 BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer);
 TIFF (Tagged Image File Format) cu extensia .tif sau .tiff.

18
Cele mai răspîndite formate sînt GIF (8 biţi pentru o culoare, 256 culori posibile), JPEG (24
biţi pentru o culoare, 16777216 de culori posibile) şi PNG (acelaşi număr de culori ca şi
JPEG) .

1.7.1. Adresa URL a unei imagini

URL (”Uniform Resourse Locator” - identificator unic al resursei) este un standard folosit în
identificarea unică a unei resurse în Internet. Toate imaginile cu care vom lucra vor avea
adresa URL exprimată în funcţie de directorul ce conţine documentul HTML care face
referire la imagine.
Pentru a insera o imagine intr-o pagină, se utilizează tagul <img> (de la ”image” - imagine).
Pentru a putea fi identificată imaginea care va fi inserata, se utilizează atributul src (de la
”source” - sursă). Daca imaginea se află în acelaşi directoriu cu fişierul HTML care face
referire la imagine, atunci adresa URL a imaginii este formată numai din numele imaginii,
inclusiv extensia.
<html>
<head>
<title> O pagina cu imagine </title>
</head>
<body>
<p>O pagina care contine o imagine. </p>
<img src = "[Link]">.
</body>
</html>

1.7.2. Chenarul şi dimensionarea unei imagini

Un chenar în jurul imaginii se adaugă prin intermediul atributului border al tagului <img>.
Valorile acestui atribut sînt numere întregi pozitive şi indică grosimea chenarului în pixeli.
O imagine are anumite dimensiuni pe orizontală şi verticală, stabilite în momentul creării ei.
Dacă nu se specifică altfel, aceste dimensiuni sînt respectate în momentul afişării ei în pagina
Web.
Dimensiunile prestabilite ale unei imagini pot fi indicate prin intermediul atributelor width şi
height.
<html>
<head>
<title> Imagine cu chenar </title>
</head>
<body>
<h1>O imagine cu chenar şi dimensiuni</h1>
<img src = "[Link]" border = "4" width = "350" height = "250">
<p>textul unui paragraf</p>
</body>
</html>

Atributele width şi height se utilizează în două scopuri. Ele indică browserului dimensiunile
imaginii, astfel că browserul rezervează pentru imagine în prealabil un spaţiu adecvat, ceea ce

19
facilitează încărcarea mai rapidă a paginii. În plus, imaginea poate fi distorsionată (micşorată
sau mărită, ceea ce nu se recomandă) prin modificarea dimensiunilor ei, indicănd valori ale
atributelor width şi height diferite de cele reale.

1.7.3 Alinierea unei imagini

Alinierea unei imagini se poate realiza prin intermediul atributului align care are următoarele
valori:
 ”left” – aliniere pe orizontală la stînga; celelalte elemente sînt plasate în partea dreaptă;
 ”right” – aliniere pe orizontală la dreapta; celelalte elemente sînt plasate în partea stîngă;
 ”top” – aliniere pe verticală, partea de sus a imaginii se aliniază cu partea de sus a textului ce
precede imaginea;
 ”middle” – aliniere pe verticală; mijlocul imaginii se aliniază cu linia de bază a textului ce
precede imaginea;
 ”bottom” – aliniere pe verticală; partea de jos a imaginii se aliniază cu linia de bază a textului.
<html>
<head>
<title> Alinierea unei imagini </title>
</head>
<body>
<h2>Aliniere pe verticala</h2>
<p> text ce precede
<img src = "[Link]" align = "top"> text ce urmeaza.
</p>
</body>
</html>

1.7.4. Alinierea textului în jurul imaginii

Atributele hspace şi vspace precizează distanţa în pixeli pe orizontală, respectiv pe verticală,
dintre imagine şi restul elementelor din pagină.
Atributul alt are ca valoare un text care va fi afişat în locul imaginii.
<html>
<head>
<title> Alinierea unei imagini </title>
</head>
<body>
<p> Imagine aliniata la stanga inconjurata de text la distanta de 30 de
pixeli</p>
<p> Text pînă la imagine. Text pînă la imagine. Text pînă la imagine. Text
pînă la imagine. Text pînă la imagine. Text pînă la imagine. Text pînă la
imagine. Text pînă la imagine. Text pînă la imagine.
<img src = "[Link]" align = "left" hspace ="30" vspace = "30" alt =
"text descriere imagine"> Text dupa imagine. Text dupa imagine. Text dupa
imagine. Text dupa imagine. Text dupa imagine. Text dupa imagine. Text dupa
imagine. Text dupa imagine. Text dupa imagine. Text dupa imagine.
</p>
</body>
</html>

20
1.7.5. Imagini în calitate de referinţe
O imagine poate fi utilizată pentru a stabili o legătură către altă pagină Web. În acest scop se
foloseşte tagul imaginii în calitate de conţinut al legăturii, avînd ca valoare adresa URL a
paginii către care se face referinţa. O legatură (link) introduce în pagina Web o zonă activă.
Efectuînd click cu mousul pe această zonă în browser se va încarcă o altă pagină. Pentru a
utiliza imaginea ”[Link]” drept legatură catre pagina [Link] utilizăm sintaxa:
<a href = "[Link]"> <img src="[Link]"> </a>

În mod prestabilit imaginea utilizată ca zonă activă este înconjurată de un chenar avînd
culoarea unei legături. Dacă stabilim pentru atributul border al tagului <img> valoarea 0,
acest chenar dispare.
<html>
<head>
<title> Imagini folosite ca legaturi </title>
</head>
<body>
<h1>Imagini folosite ca legaturi. </h1>
<p>Text inainte de imagine.</p>
<a href = "[Link]"> <img src = "[Link]" border = "0"> </a>
<p>Text dupa imagine.</p>
</body>
</html>

1.7.6. Utilizări speciale ale imaginilor

Imaginile pot fi utilizate pentru a obţine efecte deosebite într-o pagina Web. Printre aceste
utilizări speciale putem enumera:
 Linii orizontale formate cu ajutorul imaginilor.
 Simboluri speciale pentru elementele unei liste neordonate.

1.8. Tabele HTML

1.8.1. Crearea unui tabel

Tabelele sînt definite prin intermediul tagului <table>. Un tabel este compus din rînduri (se
utilizează tagul <tr> ), iar fiecare rînd este compus din celule (se utilizează tagul <td>).
Caracterele td provin de la "table data (date din tabel)", adică indică conţinutul din celule.
Datele din celule pot conţine text, imagini, liste, paragrafe, formulare, linii orizontale, tabele
etc.
<table border="1">
<tr>
<td>rîndul 1, celula 1</td>
<td>rîndul 1, celula 2</td>
</tr>
<tr>
<td>rîndul 2, celula 1</td>
<td>rîndul 2, celula 2</td>
</tr>

21
</table>

Rezultatul acestui cod în browser:

rîndul 1, celula 1 rîndul 1, celula 2
rîndul 2, celula 1 rîndul 2, celula 2

1.8.2. Tabele şi Atributul Border

Dacă nu este specificat atributul border, tabelul va apărea fără chenar. Uneori este util ca
tabelul să apară fără chenare, dar de cele mai dese ori este necesar ca tabelul să fie cu chenar.
Pentru a afişa un tabel cu chenar trebuie să fie utilizat atributul border:
<table border="1">
<tr>
<td>Rîndul 1, celula 1</td>
<td>rîndul 1, celula 2</td>
</tr>
</table>

1.8.3. Titluri în tabel

Titlurile de coloană dintr-un tabel sînt definite prin tagul <th>.
<table border="1">
<tr>
<th>Titlu de coloană</th>
<th>Alt titlu</th>
</tr>
<tr>
<td>rîndul 1, celula 1</td>
<td>rîndul 1, celula 2</td>
</tr>
<tr>
<td>rîndul 2, celula 1</td>
<td>rîndul 2, celula 2</td>
</tr>
</table>

În browser rezultatul va apărea astfel:

Titlu de coloană Alt titlu
rîndul 1, celula 1 rîndul 1, celula 2
rîndul 2, celula 1 rîndul 2, celula 2

1.8.4. Celule libere (vide) în tabel

Celulele fără conţinut din tabel nu sînt afişate bine în majoritatea browserelor.
<table border="1">
<tr>
<td>rîndul 1, celula 1</td>
<td>rîndul 1, celula 2</td>
</tr>
<tr>

22
<td>rîndul 2, celula 1</td>
<td> </td>
</tr>
</table>

În browser va apărea:
rîndul 1, celula 1 rîndul 1, celula 2
rîndul 2, celula 1

Notaţi că chenarul lipseşte pentru celulele fără conţinut (NB! Browserul Mozilla Firefox
afişează chenarul).
Pentru a soluţiona această problemă, adăugaţi un spaţiu liber (non-breaking space - &nbsp;)
pentru celulele fără conţinut, pentru a face chenarul visibil:
<table border="1">
<tr>
<td>rîndul 1, celula 1</td>
<td>rîndul 1, celula 2</td>
</tr>
<tr>
<td>rîndul 2, celula 1</td>
<td>&nbsp;</td>
</tr>
</table>

Rezultatul în browser:
rîndul 1, celula 1 rîndul 1, celula 2
rîndul 2, celula 1

Sfaturi utile
Elementele <thead>,<tbody> şi <tfoot> sînt rareori utilizate, deoarece nu
toate browserele le suportă. Browserul Internet Explorer 5.0 sau de o
versiune mai nouă acceptă aceste elemente.

1.8.5. Atributele Cellpadding şi Cellspacing

Atributul cellpadding se utilizează pentru a adăuga spaţii libere între conţinutul celulei şi
graniţele celulei. Atributul cellspacing se utilizează pentru a adăuga spaţii libere între
conţinutul celulei şi graniţele celulei.
<html>
<body>
<h4> Fără cellpadding şi cellspacing:</h4>
<table border="1">
<tr>
<td>Celula 1</td>
<td>Celula 2</td>
</tr>
<tr>
<td> Celula 3</td>
<td> Celula 4</td>
</tr>
</table>

23
<h4>Cu cellpadding:</h4>
<table border="1"
cellpadding="10">
<tr>
<td> Celula 1</td>
<td> Celula 2</td>
</tr>
<tr>
<td> Celula 3</td>
<td> Celula 4</td>
</tr>
</table>
</body>
</html>

1.8.6. Alinierea conţinutului în tabel

Alinierea conţinutului celulelor se efectuează prin intermediul atributului align, care poate
avea 3 valori posibile: left; center; right.
<body>
<table width="400" border="1">
<tr>
<th align="left"> Cheltuieli</th>
<th align="right">Ianuarie</th>
<th align="right">Februarie</th>
</tr>
<tr>
<td align="left">Haine</td>
<td align="right">$241.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left">Cadouri</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
</tr>
<tr>
<td align="left">Alimente</td>
<td align="right">$730.40</td>
<td align="right">$650.00</td>
</tr>
<tr>
<th align="left">Suma</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>
</body>
</html>

Rezultatul în browser:

24
Taguri Tabele
Tag Descriere
<table> Defineşte un tabel
<th> Defineşte un titlu de coloană în tabel
<tr> Defineşte un rînd din tabel
<td> Defineşte o celulă din tabel
<caption> Defineşte denumirea unui tabel
<colgroup> Defineşte grupuri de coloane în tabel
Defineşte valori ale atributelor pentru una sau
<col>
mai multe coloane în tabel
<thead> Defineşte antetul unui tabel
<tbody> Defineşte corpuul unui tabel
<tfoot> Defineşte subsolul unui tabel

1.9. Formulare
Un formular este un set de zone active alcătuit din cîmpuri de completare text, casete de
selectare, butoane, etc.
Formularele asigură construirea unor pagini Web care permit utilizatorilor să introducă
informaţii şi sa le transmită serverului. Formularele pot varia de la un simplu cîmp de text,
pentru introducerea unui şir de caractere cu sensul de cuvinte-cheie de căutare – element
caracteristic tuturor motoarelor de căutare din Web – pînă la o structură complexă, cu multiple
secţiuni, care oferă posibilităţi de transmitere a datelor. O sesiune cu o pagină Web ce conţine
un formular cuprinde următoarele etape:
 Utilizatorul completează formularul şi îl expediază unui server.

 Aplicaţie (cod scris într-un limbaj de programare) de pe server analizează datele din
formularul completat şi le prelucrează. De cele mai dese ori stochează datele într-o bază de
date.

 Dacă este necesar, serverul expediază un răspuns utilizatorului.

Un formular este definit într-un bloc delimitat de tagurile respective <form> şi </form>.

1.9.1. Atribute esenţiale ale elementului <form>

Există doua atribute esenţiale ale elementului <form>.

25
1. Atributul action precizează unde vor fi expediate datele formularului odată ce acesta este
completat. De regulă, valoarea atributului action este adresa URL a unui script aflat pe un
server WWW care primeşte datele formularului, efectuează o prelucrare a lor şi expediază
către utilizator un răspuns.
<form action=”[Link]
Script-urile pot fi scrise în limbajele Perl, C, PHP, Unix shell.
2. Atributul method precizează metodă utilizată de browser pentru expedierea datelor din
formular. Sînt posibile următoarele valori:
 get (valoarea implicită). În acest caz, datele din formular sînt adăugate la adresa URL
precizată de atributul action. Nu sînt permise cantităţi mari de date (maxim 1 Kb);
între adresa URL şi date este inserat un caracter ”?”.

Datele sînt adăugate conform sintaxei: nume_cîmp = valoare_cîmp. Între diferite seturi de
date la expediere este introdus un caracter ”&”.
Exemplu:
”[Link] = val_1&nume2 = val_2”

 post. În acest caz datele sînt expediate separat. Sînt permise cantităţi mari de date (ordinul
MB).

Pentru ca un formular să fie funcţional, trebuie precizat ce se va întîmpla cu el după

completare şi expediere.
Cel mai simplu mod de utilizare a unui formular este expedierea acestuia prin poşta
electronică (este- e-mail). Pentru aceasta, se foloseşte atributul action al elementului <form>,
care primeşte ca valoare ”[Link] concatenat cu o adresă validă de e-mail către care se va
expedia formularul completat.

1.9.2. Cîmp de tip text

Majoritatea elementelor unui formular sînt definite cu ajutorul elementului <input>. Pentru a
preciza tipul elementului, se foloseşte atributul type al elementului <input>. Pentru un cîmp
de editare, acest atribut primeşte valoarea ”text”. Alte atribute pentru un element <input> sînt:
 atributul name, permite ataşarea unui nume fiecărui element al formularului.
 atributul value, care permite atribuirea unei valori iniţiale unui element al formularului.
<html>
<head> <title>Exemplu de Formular </title> </head>
<body> <h1> Un formular cu un cîmp de editare şi un buton de expediere
</h1> <hr>
<form action = "[Link] " method="post">
Numele: <input type = "text" name = "nume" value = "Nume">
</form> </body>
</html>

Pentru elementul <input> de tipul cîmp text – cîmp de completare – (type = ”text”), alte două
atribute pot fi utile:

26
  atributul size specifică lăţimea cîmpului de editare; dacă el depăşeşte această lăţime, atunci se
execută automat o derulare a acestui cîmp;
 atributul maxlength specifică numărul maxim de caractere pe care le poate primi un cîmp de
editare; caracterele tastate peste numărul maxim sînt ignorate.

Sfaturi utile
Dacă atributul type lipseşte într-un element <input>, atunci cîmpul
respectiv este considerat în mod prestabilit ca fiind de tip ”text”.
Formularele cu un singur cîmp (de tip text) nu au nevoie de un buton de
expediere, datele sînt expediate automat după completarea şi apăsarea tastei
ENTER.

1.9.3. Butoane
Într-un formular pot fi afişate butoane. Cînd utilizatorul apasă un buton, se lansează în
execuţie o funcţie de tratare a acestui eveniment.
Limbajul HTML nu permite scrierea unor astfel de funcţii (acest lucru este posibil dacă se
utilizează limbajele Javascript sau Java).
Pentru a insera un buton într-un formular, se utilizează tagul <input> avînd atributul type cu
valoarea ”button”.
Alte doua atribute ale elementului ”button” sînt:
 atributul name, care permite atribuirea unui nume butonului;
 atributul value, care primeşte ca valoare textul ce va fi afişat pe buton.

Există o a doua modalitate de a introduce într-o pagină Web un buton de apăsat, şi anume:
prin intermediul elementului <button>...</button>.
Un astfel de buton poate fi inserat într-un formular, în acest caz efectuînd acţiuni legate de
acel formular, sau poate fi introdus oriunde în pagină pentru iniţierea unor acţiuni
independente de formulare.
Atributele posibile ale elementului ”button” sînt:
 name acordă elementului un nume;
 value precizează textul care va fi afişat pe buton;
 type precizează acţiunea ce se va execută la apăsarea butonului, dacă acesta este inclus într-un
formular. Valorile posibile pentru acest atribut sînt: ”button”, ”submit”, ”reset”.

În corpul blocului <button>...</button> se poate afla un text sau un tag de inserare a unei
imagini.

1.9.4. Butonul Send

Un buton de expediere al unui formular se adaugă cu ajutorul elementului <input>, în care
atributul type are valoarea ”submit”. Acest element poate primi un nume prin atributul name.

27
Pe buton apare scris ”Submit Query” sau valoarea atributului value, daca această valoare a
fost stabilită.
<input type = "submit" value = "expedieaza">

1.9.5. Butonul Reset

Dacă un element de tip <input> are atributul type cu valoarea ”reset”, atunci în formular
apare un buton de resetare. La apăsarea acestui buton, toate elementele din formular primesc
valorile prestabilite (definită odată cu formularul), chiar dacă aceste valori au fost modificate
de utilizator.
Un buton de tip Reset poate primi un nume cu ajutorul atributului name şi o valoare printr-un
atribut value.
Un asemenea buton afişează textul ”Reset” daca atributul value lipseşte, respectiv valoarea
acestui atribut în caz contrar.
<html>
<head> <title> Formular 2 </title> </head>
<body> <h1> Un formular cu un buton reset </h1>
<form action = "form_2.htm" method="post">
Nume: <input type = "text" name = "nume" value = "Nume"> <br>
Prenume: <input type = "text" name = "prenume" value = "Prenume"> <br>
<input type = "submit" value="trimite”>
<input type = "reset" value = "sterge">
</form> </body>
</html>

1.9.6. Cîmp de tip ”password”

Dacă se utilizează tagul <input> avînd atributul type cu valoarea ”password”, atunci în
formular apare un element asemănător cu un cîmp de editare obişnuit (introdus prin type =
”text”). Toate atributele unui cîmp de editare rămîn valabile.
Singura deosebire constă în faptul ca acest cîmp de editare nu afişează caracterele culese, ci
numai caractere *, care ascund de privirile altui utilizator aflat în apropiere valoarea introdusă
într-un asemenea cîmp.
La expedierea formularului însă, valoarea tastată într-un cîmp de tip ”password” se transmite
în mod obişnuit, fără criptare.
<html>
<head> <title> Formular 3 </title> </head>
<body> <h1> Un formular cu cîmp parolă </h1> <hr>
<form action = "form_3.htm" method="post">
Nume: <input type = "text" name = "nume"> <br>
Prenume: <input type = "text" name = "prenume"> <br>
Password: <input type = "password" name = "parola"> <br>
<input type = "submit" value = "trimite">
<input type = "reset" value = "sterge">
</form>
</body>
</html>

28
1.9.7. Butoane radio
Butoanele radio permit alegerea, la un moment dat, a unei singure variante din mai multe
posibile. Butoanele radio se adaugă prin tagul <input> cu atributul type avînd valoarea
”radio”.
<html>
<head> <title> Formular 4 </title> </head>
<body> <h1> Un formular cu butoane radio </h1>
<form action = "form_4.htm" method="post">
Alegeti culoarea preferată:
<input type = "radio" name = "color" value = "a"> alb <input type = "radio"
name = "color" value = "b"> roz
<input type = "submit" value=”trimite”>
<input type = "reset" value=”anulează” >
</form>
</body>
</html>

La expedierea formularului se va transmite una dintre perechile ”color=b” sau ”color=f”, în

funcţie de alegerea făcută de utilizator.

1.9.8. Casete de validare

O casetă de validare (checkbox) permite selectarea sau deselctarea unei opţiuni. Pentru
inserarea unei casete de validare se utilizează eticheta <input> cu atributul type configurat la
valoarea ”checkbox”.

Sfaturi utile
Fiecare casetă poate avea un nume definit prin atributul name.
Fiecare casetă poate avea valoarea prestabilită ”selectat” definită prin
atributul checked.

<html>
<head> <title> Formular 5 </title> </head>
<body> <h1> Un formular cu casete checkbox </h1>
<form action = "form_5.htm" method="post">
Alegeti meniul : <br>
Nectar <input type = "checkbox" name = "nectar" value = "un pahar">
Bere <input type = "checkbox" name = "bere" value = "o sticla">
Cafea <input type = "checkbox" name = "cafea" value = "o ceasca"> <br>
<input type = "submit" value=”trimite”>
<input type = "reset" value=”anulează” >
</form> </body>
</html>

1.9.9. Casete de fişiere

Într-o pereche ”name = value” a unui formular se poate folosi întregul conţinut al unui fişier
pe post de valoare.

29
Pentru aceasta se inserează un element <input> într-un formular, cu atributul type avînd
valoarea ”file” (fişier).
Atributele pentru un element de tip caseta de fişiere:
 atributul name permite ataşarea unui nume;
 atributul value primeşte ca valoare adresa URL a fişierului care va fi expediat odată cu
formularul. Această valoare poate fi atribuită direct atributului value, poate fi tastată într-un
cîmp de editare ce apare odată cu formularul sau poate fi selectată prin intermediul unei casete
de tip File Upload sau Choose File care apare la apăsarea butonului Browse... din formular;
 atributul enctype precizează metoda utilizată la criptarea fişierului de expediat. Valoarea
acestui atribut este ”multipart/form-data”.

<html>
<head> <title> Formular 6 </title> </head>
<body>
<h1> Un formular cu caseta de fisiere </h1>
<hr>
<form action = "form_6.htm" method="post">
Alegeti fisierul: <input type = "file" name = "fisier" value =
"c:\temp\[Link]" enctype = "multipart/form-data"> <br>
<input type = "submit" value=”trimite”>
<input type = "reset" value=”anulează”>
</form> </body>
</html>

1.9.10. Liste de selecţie

O listă de selecţie permite utilizatorului să aleagă unul sau mai multe elemente dintr-o listă
finită. Lista de selecţie este inclusă în formular cu ajutorul tagurilor <select> şi </select>.
O listă de selecţie poate avea următoarele atribute:
 atributul name, care atribuie listei un nume (utilizat în perechile ”name=value” expediat
serverului);
 atributul size, care precizează (printr-un număr întreg pozitiv, valoarea prestabilita
fiind 1) cîte elemente din listă sînt vizibile la un moment dat pe ecran (celelalte devenind
vizibile prin acţionarea barei de derulare ataşate automat listei).

Elementele unei liste de selecţie sînt incluse în listă cu ajutorul elementului <option>. Două
atribute ale elementului option sînt utilizate frecvent:
 atributul value primeşte ca valoare un text care va fi expediat server-ului în perechea
”name=value”; dacă acest atribut lipseşte, atunci către server va fi expediat textul ce urmează
după <option>;
 atributul selected (fără alte valori) permite selectarea prestabilită a unui element al listei.

<html>
<head> <title> Formular 7 </title> </head>
<body>
<h1> Un formular cu o lista de selectie </h1>
<form action = "[Link]" method="post">
Ţările implicate în proiect: <br>

30
<select name = "tara" size = "3">
<option value = "at"> Austria
<option value = "be" selected> Belgia
<option value = "es"> Spania
<option value = "lt"> Lituania
</select> <br> <
<input type = "submit" value = "trimite">
<input type = "reset" value = „anulează”>
</form> </body>
</html>

1.9.11. Listă de selecţie cu selecţii multiple

O listă de selecţie ce permite selecţii multiple se creează întocmai ca o listă de selecţie
obişnuită. În plus, eticheta <select> are un atribut multiplu (fără alte valori). Cînd formularul
este expediat către server pentru fiecare element selectat al listei care se inserează cîte o
pereche ”name=value”, unde name este numele listei.
<html>
<head> <title> Formular 8 </title> </head>
<body> <h1> Un formular cu o lista de selectie ce accepta selectii multiple
</h1>
<form action = "[Link]" method="post">
Cursuri la alegere : <br>
<select name = "cursuri" size = "4">
<option value = "lm"> Logica Matematică</option>
<option value = "tp" > Teoria probabilităţii</option>
<option value = "tg"> Teoria grafurilor</option>
<option value = "ci" selected > Calcul integral</option>
</select> <br>
<input type = "submit" value="alege">
<input type = "reset" value="anulează">
</form>
</body>
</html>

1.9.12. Cîmpuri text comentariu

Într-un formular cîmpurile de editare de mai multe rînduri (comentariu) se adaugă cu ajutorul
elementului <textarea>. Elementul are următoarele atribute:
 atributul cols, care specifică numărul de caractere afişate într-un rînd;
 atributul rows, care specifică numărul de rînduri afişate simultan;
 atributul name, care permite atribuirea unui nume cîmpului de editare;
 atributul wrap (de la ”word wrap” = trecerea cuvintelor pe rîndul următor), care determină
comportamentul cîmpului de editare faţă de sfîrşitul de linie.

Acest atribut poate primi următoarele valori:

a) ”off”; în acest caz:
o întreruperea cuvintelor la marginea dreaptă a editorului se produce numai cînd
doreşte utilizatorul;

31
 o caracterul de sfîrşit de linie este inclus în textul transmis serverului odată cu
formularul;
b) ”hard”; în acest caz:
o se produce întreruperea cuvintelor la marginea dreaptă a editorului;
o caracterul de sfîrşit de linie este inclus în textul transmis serverului odată cu
formularul;
c) ”soft”; în acest caz:
o se produce întreruperea cuvintelor la marginea dreaptă a editorului ;
o nu se include caracterul de sfîrşit de linie în textul transmis serverului odată cu
formularul.

<html>
<head> <title> Formular 9 </title> </head>
<body> <h1> Un formular cu un cîmp de editare comentariu </h1>
<form action = "[Link]" method="post">
<textarea name = "mesaj" cols = "30" rows = "5" wrap = "off">
Prima linie din textul initial.
A doua linie din textul initial. </textarea>
<input type = "submit" value="expediază">
<input type = "reset" value="anulează">
</form>
</body>
</html>

1.9.13. Un formular complex

În exemplul următor este prezentat un formular conţinînd elemente prezentate anterior.
Cîmpurile formularului sînt incluse în celulele unui tabel pentru a obţine o aliniere dorită.
<html>
<head> <title> Formular 10 </title> </head>
<body> <h1> Un formular complex </h1>
<table border = "0">
<form action = "[Link]" method = "post">
<tr align = left> <th> Nume:
<td> <input type = "text" name = "nume">
<tr align = left> <th> Prenu:
<td> <input type = "text" name = "prenume">
<tr align = left> <th> Telefon:
<td> <input type = "text" name = "telefon">
<tr align = left> <th> Alegeti tipul de transport:
<td> <input type = "checkbox" name = "autobus"> autobus <input type =
"checkbox" name = "tren"> tren
<input type = "checkbox" name = "avion"> avion
<tr align = left> <th> Alegeti tipul de plata: <td>
<ul>
<li> <input type = "radio" name = "plata"> cash </li> <li> <input type =
"radio" name = "plata"> card </li>
</ul>
<tr align = left> <th> Comentarii: </th>

32
<td> <textarea name = "comentarii" cols = "30" rows = "5" wrap =
"off"></td>
Inserati aici opiniile dumneavoastra referitoare la calitatea serviciilor
noastre </textarea>
<tr>
<td> <input type = "submit" value = "expedieaza"></td>
<td><input type = "reset" value = "sterge"></td>
</form> </table>
</body>
</html>

Rezultatul în browser:

Sfaturi utile
Elementul <form> poate avea un atribut target, care primeşte ca valoare
numele unei ferestre a browserului în care va fi încărcat răspunsul trimis
serverului WWW la expedierea unui formular.
Toate elementele cuprinse într-un formular pot avea un atribut disabled, care
permite dezactivarea respectivului element.
Toate elementele de tip text cuprinse într-un formular pot avea un atribut
readonly, care interzice modificarea conţinutului acestor elemente.

1.10. Cadre (frames) în HTML

1.10.1. Crearea cadrelor

Ferestrele sau (cadrele) permit să definim în fereastra browserului subferestre în care să fie
încărcate documente HTML diferite.

33
Ferestrele sînt definite într-un fişier HTML special, în care blocul <body> ... </body> este
înlocuit de blocul <frameset> ... </frameset>.
În interiorul acestui bloc, fiecare cadru este introdus prin tagul <frame>.
Un atribut obligatoriu al elementului <frame> este src, care primeşte ca valoare adresa URL
a documentului HTML, care va fi încărcat în acel frame. Definirea cadrelor se face prin
împărţirea ferestrelor (şi a subferestrelor) în linii şi coloane:
 împărţirea unei ferestre într-un număr de subferestre de tip coloana se face cu ajutorul
atributului cols al elementului <frameset> ce descrie acea fereastră;

 împărţirea unei ferestre într-un număr de subferestre de tip linie se face cu ajutorul atributului
rows al elementului <frameset> ce descrie acea fereastră;

 valoarea atributelor cols şi rows este o listă de valori separate prin virgulă, care descriu modul
în care se face împărţirea.

Valorile listei pot fi:

1. un număr întreg de pixeli;

2. procente din dimensiunea ferestrei (număr între 1 şi 99 urmat de %);

3. n* care înseamnă n părţi din spaţiul rămas;

Exemplul 1: cols = ”100, *, 70%” înseamnă o împărţire în 4 subferestre, dintre care prima are
100 pixeli, a treia ocupă 70% din spaţiul total disponibil, iar a doua ocupă în mod egal restul
de spaţiu rămas disponibil.
Exemplul 2: rows = ”200, 1*, 50%, 2* ” înseamnă o împărţire în 4 subferestre, dintre care
prima are 200 pixeli, a treia ocupă jumătate din spaţiul total disponibil, iar a doua şi a patra
ocupă spaţiul rămas disponibil, care se împarte în trei parţi egale, a doua fereastră ocupînd o
parte, iar a patra ocupînd 2 părţi.

Sfaturi utile
Dacă mai multe elemente din listă au valori *, atunci spaţiul disponibil rămas
pentru ele se va împărţi în mod egal.
O subfereastra poate fi un cadru (folosind <frame>) în care se va încărca un
document HTML sau poate fi împărţită, la rîndul ei, în alte cadre (folosind
<frameset>).

<html>
<head> <title> Cadre_1 </title> </head>
<frameset cols = "*,*">
<frame src = "fr_1.html">
<frame src = "fr_2.html">
</frameset>
</html>

În exemplul următor este creată o pagină Web cu trei cadre orizontale. Pentru al doilea cadru
valoarea atributului src este adresa URL a unei imagini.

34
<html>
<head> <title> Cadre_2 </title> </head>
<frameset rows = "100,*,10%">
<frame src = "fr_1.html">
<frame src = "[Link]">
<frame src = "fr_3.html">
</frameset>
</html>

În exemplul următor este creată o matrice de 4 cadre (2 x 2). Pentru a realiza acest lucru, se
folosesc simultan cele două atribute cols şi rows.
<html>
<head> <title> Cadre_3 </title> </head>
<frameset rows = "*,*" cols="*,*">
<frame src = "fr_1.html">
<frame src = "fr_2.html">
<frame src = "fr_3.html">
<frame src = "fr_4.html">
</frameset>
</html>

În exemplul următor este creată o pagină Web cu trei cadre mixte. Pentru a o crea se
procedează astfel. Mai întîi, pagina este împărţită în două subferestre de tip coloana, după
care a doua subfereastră este împărţită în două subferestre de tip linie.
<html>
<head> <title> Cadre_4 </title> </head>
<frameset cols = "20%,*">
<frame src = "fr_1.html">
<frameset rows = "*,*">
<frame src = "fr_2.html">
<frame src = "fr_3.html">
</frameset>
</frameset>
</html>

1.10.2. Dimensionarea chenarului unui cadru

Atributul border al elementului <frameset> permite configurarea lăţimii chenarelor tuturor
cadrelor la un număr dorit de pixeli. Valoarea prestabilită a atributului border este de 5 pixeli.
O valoare de 0 pixeli va defini un cadru fără chenar.
<html>
<head> <title> Cadre_5 </title> </head>
<frameset cols = "20%,*" border = "4">
<frame src = "fr_1.html">
<frameset rows = "*,*">
<frame src = "fr_2.html">
<frame src = "fr_3.html">
</frameset>
</html>

Pentru a obţine cadre fără chenar se utilizează border = ”0”.

35
În mod prestabilit, chenarul unui cadru este afişat şi are aspect tridimensional. Afişarea
chenarului unui cadru se poate dezactiva dacă se utilizează atributul frameborder cu valoare
”no”.
Acest atribut poate fi utilizat atît cu elementul <frameset> (dezactivarea fiind valabilă pentru
toate cadrele incluse), cît şi cu elementul <frame> (dezactivarea fiind valabilă numai pentru
un singur cadru).
Valorile posibile ale atributului frameborder sînt: ”yes” - echivalent cu 1; ”no” - echivalent
cu 0;
<html>
<head> <title> Cadre_6 </title> </head>
<frameset cols = "20%,*" border = "0">
<frame src = "fr_1.html">
<frameset rows = "200,*">
<frame src = "fr_2.html">
<frame src = "fr_3.html">
</frameset>
</html>

<html>
<head> <title> Cadre_7 </title> </head>
<frameset cols = "20%,*" frameborder = "no">
<frame src = "fr_1.html">
<frameset rows = "*,*">
<frame src = "fr_2.html">
<frame src = "fr_3.html">
</frameset>
</html>

1.10.3. Bare de derulare

Atributul scrolling al elementului <frame> este utilizat pentru a adăuga unui cadru o bară de
derulare care permite navigarea în interiorul documentului afişat în interiorul cadrului.
Valorile posibile sînt:
 ”yes” - barele de derulare sînt adăugate întotdeauna;

 ”no” - barele de derulare nu sînt utilizabile;

 ”auto” - barele de derulare sînt vizibile atunci cînd este necesar

<html>
<head> <title> Cadre_8 </title> </head>
<frameset cols = "20%,50%,*">
<frame src = "[Link]" scrolling = "yes" noresize>
<frame src = "[Link]" scrolling = "no" noresize>
<frame src = "[Link]" scrolling = "auto" noresize>
</frameset>
</html>

36
Atributul noresize al elementului <frame> (fără nici o valoare suplimentară), dacă este
prezent, inhibă posibilitatea prestabilită a utilizatorului de a redimensiona cadrul cu ajutorul
mouse-ului.

1.10.4. Poziţionarea documentului într-un cadru

Atributele marginheight şi marginwidth ale elementului <frame> permit stabilirea distanţei în
pixeli dintre conţinutul unui cadru şi marginile verticale, respectiv orizontale ale cadrului.
Valori posibile:
- număr de pixeli;
- procent din lăţimea, respectiv din înălţimea cadrului;
<html>
<head> <title> Cadre_9 </title> </head>
<frameset cols = "*,*,*">
<frame src = "[Link]">
<frame src = "[Link]" marginheight = 20>
<frame src = "[Link]" marginwidth = 20>
</frameset>
</html>

Există browsere care nu suportă cadre. În acest caz se utilizează în interiorul blocului
<frameset> elementul <noframes>.
Dacă browserul ştie să interpreteze cadre, va ignora ce se găseşte în aceasta porţiune, iar dacă
nu, materialul cuprins în zona <noframes> ... </noframes> va fi singurul care va fi înţeles şi
afişat.
Între tagurile <noframes> ... </noframes> se pot introduce orice alte taguri HTML (inclusiv
imagini, hiperlink-uri, tabele).

1.10.5. Cadre interne

Un cadru intern este specificat prin intermediul blocului <iframe> ... </iframe>. Un cadru
intern se inserează într-o pagină Web în mod asemănător cu o imagine sau în modul în care se
specifică elementul <iframe>, aşa cum rezultă din următorul exemplu:
<iframe src = "[Link]" height =40% width =50%> </iframe>

În acest caz, am specificat că dorim o fereastră de cadru intern care are 40% din înălţimea şi
50% din lăţimea paginii curente.
Atributele acceptate de elementul <iframe> sînt în parte preluate de la etichetele <frame> şi
<frameset>, cum ar fi: src, border, frameborder, bordercolor, marginheight,
marginwidth, scrolling, name, noresize; sau de la elementul <img> vspace, hspace, align,
width, height;
<html>
<head> <title> Cadre_10 </title> </head>
<body>
<a href = "fr_1.html" target = "icadru">Fisier_1 </a> <br>
<a href = "fr_2.html" target = "icadru">Fisier_2 </a> <br>

37
<a href = "fr_3.html" target = "icadru">Fisier_3 </a><br>
<a href = "fr_.html" target = "icadru">Home </a> <br>
<iframe width = "60%" height = "50%" border = 2 bordercolor = "red" name =
"icadru" src = "[Link]"> Daca vedeti acest text în browser, înseamnă că
browserul Dvs. nu suporta cadre interne. Ar fi preferabil sa reveniti,
folosind Netscape Navigator versiune 4.0 (/ulterioara) sau Internet
Explorer 4.0. (/ulterioara)
<a href = "[Link]"> Pagina fara cadre interne </a> </iframe>
</body>
</html>

Rezultatul acestui cod în browserul Internet Explorer v 6.0:

În cadrul intern din acest exemplu a fost încărcat fişierul ce reprezintă formularul complex.
Activarea hiperlegăturilor va avea ca efect încărcarea documentelor respective în cadrul
intern.

1.10.6. Ţinte pentru legături

În mod prestabilit, la efectuarea unui click pe o legătura nouă pagina (către care indică
legătura) o înlocuieşte pe cea curenta în aceeaşi fereastra (acelaşi cadru). Acest comportament
se poate schimba în două moduri:
 prin plasarea în blocul <head> ... </head> a unui element <base> care precizează, prin
atributul target, numele ferestrei (cadrului) în care se vor încărca toate paginile noi referite de
legăturile din pagina curentă conform sintaxei:
<base target = "nume_fereastra / frame_de_baza">
 prin plasarea în elementul <a> a atributului target, care precizează numele ferestrei (cadrului)
în care se va încărca pagina nou referită de legătura, conform sintaxei:
<a href = ”legătura” target = "nume_fereastra / frame">...</a>

38
Sfaturi utile
Dacă este prezent atît un atribut target în <base>, cît şi un atribut target în
<a>, atunci cele precizate de atributul target din <a> sînt prioritare.
Numele unui cadru este stabilit prin atributul name al elementului <frame>
conform sintaxei: <frame name = ”nume_frame”>

În exemplul următor este prezentată o pagină Web cu două cadre. Toate legăturile din cadrul
1 încarcă paginile în cadrul 2.
<html>
<head> <title> Cadre_target_1 </title> </head>
<frameset cols = "20%,*">
<frame src = "[Link]" name = "left">
<frame src = "[Link]" name = "main">
</frameset>
</html>

<html>
<head> <title> Cadre_left </title> </head>
<body>
<a href = "fr_1.html" target = "main">Fisier_1 </a> <br> <a href =
"fr_2.html" target = "main">Fisier_2 </a> <br> <a href = "fr_3.html" target
= "main">Fisier_3 </a> <br> <br> <a href = "[Link]" target =
"_blank">Fisier intr-o fereastra noua </a> <br>
<a href = "fr_4.html" target = "_self">Fisier in fereastra curenta </a>
<br>
<a href = "[Link]" target = "main">Home </a> <br>
</body>
</html>

Valori pentru atributul target

Atributul target al elementului <frame> acceptă anumite valori predefinite de o valoare
deosebită pentru creatorii de pagini Web. Aceste valori sînt:
 ”_self” (încărcarea noii pagini are loc în cadrul curent);

 ”_blank” (încărcarea noii pagini are loc într-o fereastră nouă anonimă);
 ”_parent” (încărcarea noii pagini are loc în cadrul părinte al cadrului curent, dacă
acesta exista, altfel are loc în fereastra browserului curent);
 ”_top” (încărcarea noii pagini are loc în fereastra browserului ce conţine cadrul
curent);

1.11. Fonturi HTML

Tagul <font> în HTML este învechit. Se presupune că în versiunile ulterioare HTML nu va
mai fi folosit.
Chiar dacă mulţi autori de pagini Web utilizează acest element, încercaţi să utilizaţi foile de
stil în cascadă pentru a indica fonturile utilizate în formatarea textului.

39
1.11.1. Elementul HTML <font>
Prin codul HTML ce urmează puteţi specifica tipul şi dimensiunea fontului afişat de browser:
<p>
<font size="2" face="Verdana">
Acesta este un paragraf.
</font>
</p>
<p>
<font size="3" face="Times">
Acesta este alt paragraf.
</font>
</p>

1.11.2. Atributele elementului Font

Atribut Exemple Descriere
size="number" size="2" Defineşte dimensiunea fontului
size="+number" size="+1" Măreşte dimensiunea fontului
size="-number" size="-1" Micşorează dimensiunea fontului
face="face-name" face="Times" Defineşte tipul fontului
color="color-value" color="#eeff00" Defineşte culoarea fontului
color="color-name" color="red" Defineşte culoarea fontului

Tagul <font> NU ar trebui sa fie utilizat

Tagul <font> este învechit (deprecated) şi nu va fi utilizat în versiunile noi (HTML 4 şi
XHTML).
Consorţiumul World Wide Web (W3C) a înlăturat tagul <font> din recomandările sale. În
versiunile ulterioare HTML vor fi utilizate foile de stil în cascadă (Cascading Style Sheets -
CSS) pentru a defini aspectul şi caracteristicile elementelor HTML.

1.12. Culori HTML

Culorile sînt afişate prin combinarea a trei componente Red (roşu), Green (verde) şi Blue
(albastru).

[Link] pentru culori

Culorile sînt definite în notarea hexazecimală prin combinarea valorilor pentru Red (roşu),
Green (verde), şi Blue (albastru) (RGB). Valoarea minimă care poate fi atribuită unei
componente a culorii este 0 (hex #00). Valoarea maximă este 255 (hex #FF).
În tabelul ce urmează este indicat rezultatul dintre diferite combinaţii de Red, Green, Blue.
Culoare Valoare Culoare HEX Valoare Culoare RGB
#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)

40
 #0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)

1.12.2. Nume de culori

Majoritatea browserelor suportă un set de nume de culori.
Notă: Doar 16 nume de culori sînt suportate de W3C HTML 4.0 standard (aqua, black, blue,
fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow).
Pentru alte culori se recomandă să utilizaţi valorile de culori HEX.
Culoare Culoare HEX Nume Culoare
#F0F8FF AliceBlue
#FAEBD7 AntiqueWhite
#7FFFD4 Aquamarine
#000000 Black
#0000FF Blue
#8A2BE2 BlueViolet
#A52A2A Brown

1.12.3. Culori Web Safe (sigure)

Cu cîţiva ani în urmă, cînd majoritatea calculatoarelor suportau doar 256 de culori diferite, a
fost sugerată o listă de 216 culori sigure Web ca standard Web. Alte 40 de culori diferite sînt
rezervate de sistemele de operare Microsoft şi Mac (fiecare cîte 20 culori).
Nu ştim cît de important este acest lucru acum, doarece tot mai multe calculatoare în prezent
pot afişa milioane de culori diferite, dar alegerea vă aparţine.

1.12.4. Paleta de 216 de culori independente de platformă

Această paletă de 216 de culori independente de platformă a fost creată iniţial pentru a avea
siguranţa că toate calculatoarele vor afişa corect această paletă. Fişierul [Link] din
directoriul HTML de pe CD include informaţii despre componentele paletei de 216 culori şi
afişează culorile respective.
000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF

41
 336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

Anexa 1

Entităţi HTML
HTML 4.01 suportă setul de caractere ISO 8859-1 (Latin-1).
Caracterele ISO-8859-1, coduri din diapazonul 0-127 reprezintă standardul original 7-BIT
ASCII. Majoritatea acestor caractere pot fi utilizate direct fără a fi nevoie de referinţe de
caractere (entităţi).
Caracterele ISO-8859-1, coduri din diapazonul 160-255 pot fi utilizate prin intermediul
referinţelor de caractere (entităţi).
Notă. Numele entităţilor sînt senzitive la registru.

42
Entităţi ASCII

Reprezentare
Resultat Descriere Nume Entitate
hexazecimală
ghilimele
" &quot; &#34;
(quotation mark)
apostrof
' &apos; (does not work in IE) &#39;
(apostrophe)
& ampersand &amp; &#38;
mai mic
< &lt; &#60;
(less-than)
mai mare
> &gt; &#62;
(greater-than)

Lista altor seturi de entităţi este prezentată în Anexa 2.

Anexa 2

Lista tagurilor HTML ordonată alfabetic

 NN: indică versiunea Netscape începînd cu care este suportat tagul respectiv
 IE: indică versiunea Internet Explorer care suportă tagul respectiv

Tag Descriere NN IE

<!--...--> Defineşte un comentariu 3.0 3.0

<!DOCTYPE> Defineşte tipul documentului
<a> Defineşte o ancoră 3.0 3.0
<abbr> Defineşte o abreviere 6.2
<acronym> Defineşte un acronim 6.2 4.0
<address> Defineşte o adresă 4.0 4.0
<applet> Învechit. Defineşte un aplet 2.0 3.0
<area> Defineşte o zonă într-o imagine hartă 3.0 3.0
<b> Defineşte un text cu aldine 3.0 3.0
<base> Defineşte URL de bază pentru toate referinţele din pagină 3.0 3.0
<basefont> Învechit. Defineşte fontul de bază 3.0 3.0
<bdo> Defineşte direcţia de afişare a textului 6.2 5.0
<big> Defineşte un text mai mare 3.0 3.0
<blockquote> Defineşte o citată lungă 3.0 3.0
<body> Defineşte elementul body 3.0 3.0
<br> Inserează o întrerupere de linie 3.0 3.0
<button> Defineşte un buton 6.2 4.0
<caption> Defineşte titlul unui tabel 3.0 3.0
<center> Învechit. Defineşte un text centrat 3.0 3.0

43
<cite> Defineşte o citată 3.0 3.0
<code> Defineşte textul unui cod la computer 3.0 3.0
<col> Defineşte pentru coloanele unui tabel 3.0
<colgroup> Defineşte grupuri de coloane intr-un tabel 3.0
<dd> Defineşte descrierea într-o listă de definiţii 3.0 3.0
<del> Defineşte un text omis 6.2 4.0
<dir> Învechit. Defineşte o listă directoriu 3.0 3.0
<div> Defineşte o secţiune într-un document 3.0 3.0
<dfn> Defineşte un termen de definiţie 3.0
<dl> Defineşte o listă de definiţii 3.0 3.0
<dt> Defineşte un termen de definiţie 3.0 3.0
<em> Defineşte un text evidenţiat 3.0 3.0
<fieldset> Defineşte un set de cîmpuri 6.2 4.0
<font> Învechit. Defineşte tipul, dimensiunea şi culoarea fontului 3.0 3.0
<form> Defineşte un formular 3.0 3.0
<frame> Defineşte un cadru (secţiune din fereastră) 3.0 3.0
<frameset> Defineşte un set de cadre 3.0 3.0
<h1> … <h6> Defineşte titluri de diferite nivele (1 – 6) 3.0 3.0
<head> Defineşte antetul unui document (informaţii despre 3.0 3.0
<hr> Defineşte o linie orizontală 3.0 3.0
<html> Defineşte un document html 3.0 3.0
<i> Defineşte un text cursiv 3.0 3.0
<iframe> Defineşte un cadru inline 6.0 4.0
<img> Defineşte o imagine 3.0 3.0
<input> Defineşte un cîmp de inserare a textului 3.0 3.0
<ins> Defineşte un text inserat 6.2 4.0
<isindex> Învechit. Defineşte un cîmp text pe o singură linie. Utilizaţi 3.0 3.0
<kbd> Defineşte un text inserat de la tastatură 3.0 3.0
<label> Defineşte un label într-un formular 6.2 4.0
<legend> Defineşte un titlu într-un set de cîmpuri 6.2 4.0
<li> Defineşte un termen (item) din listă 3.0 3.0
<link> Defineşte referinţa pentru o resursă 4.0 3.0
<map> Defineşte o imagine hartă 3.0 3.0
<menu> Învechit. Defineşte o listă meniu 3.0 3.0
<meta> Defineşte informaţii meta 3.0 3.0
<noframes> Defineşte o secţiune fără cadre (noframe) 3.0 3.0
<noscript> Defineşte o secţiune fără scripturi (noscript) 3.0 3.0
<object> Defineşte un obiect inserat 3.0
<ol> Defineşte o listă ordonată 3.0 3.0
<optgroup> Defineşte un grup de opţiuni 6.0 6.0
<option> Defineşte o opţiune într-o listă derulantă 3.0 3.0
<p> Defineşte un paragraf 3.0 3.0

44
<param> Defineşte un paramtru pentru un obiect 3.0 3.0
<pre> Defineşte un text preformatat 3.0 3.0
<q> Defineşte o citată scurtă 6.2
<s> Învechit. Defineşte un text tăiat 3.0 3.0
<samp> Defineşte un fragment de cod la computer 3.0 3.0
<script> Defineşte un script 3.0 3.0
<select> Defineşte o listă derulantă de opţiuni 3.0 3.0
<small> Defineşte un text de dimensiuni mici 3.0 3.0
<span> Defineşte o secţiune de tip inline într-un document 4.0 3.0
<strike> Învechit. Defineşte un text tăiat 3.0 3.0

<strong> Defineşte un text evidenţiat (cu aldine) 3.0 3.0

<style> Defineşte o definţie de foi de stil 4.0 3.0

<sub> Defineşte un text subscript (indice de jos) 3.0 3.0
<sup> Defineşte un text superscript (indice de sus) 3.0 3.0
<table> Defineşte un tabel 3.0 3.0
<tbody> Defineşte corpul unui tabel 4.0
<td> Defineşte o celulă în tabel 3.0 3.0
<textarea> Defineşte un cîmp de text (comentariu) 3.0 3.0
<tfoot> Defineşte partea de subsol a unui tabel 4.0
<th> Defineşte titlul de coloană în tabel 3.0 3.0
<thead> Defineşte partea de antet a unui tabel 4.0
<title> Defineşte titlul unui document 3.0 3.0
<tr> Defineşte un rind din tabel 3.0 3.0
<tt> Defineşte un text teletype 3.0 3.0
<u> Învechit. Defineşte un text subliniat 3.0 3.0
<ul> Defineşte o listă marcată (neordonată) 3.0 3.0
<var> Defineşte o variabilă 3.0 3.0
<xmp> Învechit. Defineşte un text preformatat. Utilizaţi <pre> 3.0 3.0

Anexa 3

ISO 8859-1 Symbol Entities

Reprezentare
Resultat Descriere Nume Entitate
hexazecimală
spaţiu
&nbsp; &#160;
(non-breaking space)
semnul exclamării inversat
¡ &iexcl; &#161;
(inverted exclamation mark)
valută
¤ &curren; &#164;
currency
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;

45
 Linie verticală întreruptă
¦ &brvbar; &#166;
(broken vertical bar)
secţiune
§ &sect; &#167;
(section)
diacritice
¨ &uml; &#168;
spacing diaeresis
© copyright &copy; &#169;
ª feminine ordinal indicator &ordf; &#170;
Paranteze unghiulare(de stînga)
« &laquo; &#171;
angle quotation mark (left)
negare
¬ &not; &#172;
(negation)
marcă înregistrată
® &reg; &#174;
(registered trademark)
marcă înregistrată
™ &trade; &#8482;
(trademark)
grad
° &deg; &#176;
(degree)
plus-minus
± &plusmn; &#177;
plus-or-minus
la patrat
² &sup2; &#178;
(superscript 2)
la cub
³ &sup3; &#179;
(superscript 3)
accent
´ &acute; &#180;
(spacing acute)
µ micro &micro; &#181;
¶ paragraph &para; &#182;
punct de mijloc
· &middot; &#183;
(middle dot)
la puterea 1
¹ &sup1; &#185;
(superscript 1)
Paranteze unghiulare (de dreapta)
» &raquo; &#187;
angle quotation mark (right)
¼ fraction 1/4 &frac14; &#188;
½ fraction 1/2 &frac12; &#189;
¾ fraction 3/4 &frac34; &#190;
semnul de întrebare inversat
¿ &iquest; &#191;
(inverted question mark)
semnul înmulţirii
× &times; &#215;
(multiplication)
semnul împărţirii
÷ &divide; &#247;
(division)

Entităţi ISO 8859-1

Reprezentare
Resultat Descriere Nume Entitate
hexazecimală
A, accent de stînga
À &Agrave; &#192;
(capital a, grave accent)
Á A, accent de dreapta &Aacute; &#193;

46
 capital a, acute accent
A, accent cerc
 &Acirc; &#194;
capital a, circumflex accent
A, accent tilda
à &Atilde; &#195;
capital a, tilde
Ä capital a, umlaut mark &Auml; &#196;
Å capital a, ring &Aring; &#197;
Æ capital ae &AElig; &#198;
Ç capital c, cedilla &Ccedil; &#199;
È capital este, grave accent &Egrave; &#200;
É capital este, acute accent &Eacute; &#201;
Ê capital este, circumflex accent &Ecirc; &#202;
Ë capital este, umlaut mark &Euml; &#203;
Ì capital i, grave accent &Igrave; &#204;
Í capital i, acute accent &Iacute; &#205;
Î capital i, circumflex accent &Icirc; &#206;
Ï capital i, umlaut mark &Iuml; &#207;
Ð capital eth, Icelandic &ETH; &#208;
Ñ capital n, tilde &Ntilde; &#209;
Ò capital o, grave accent &Ograve; &#210;
Ó capital o, acute accent &Oacute; &#211;
Ô capital o, circumflex accent &Ocirc; &#212;
Õ capital o, tilde &Otilde; &#213;
Ö capital o, umlaut mark &Ouml; &#214;
Ø capital o, slash &Oslash; &#216;
Ù capital u, grave accent &Ugrave; &#217;
Ú capital u, acute accent &Uacute; &#218;
Û capital u, circumflex accent &Ucirc; &#219;
Ü capital u, umlaut mark &Uuml; &#220;
Ý capital y, acute accent &Yacute; &#221;
Þ capital THORN, Icelandic &THORN; &#222;
ß small sharp s, German &szlig; &#223;
à small a, grave accent &agrave; &#224;
á small a, acute accent &aacute; &#225;
â small a, circumflex accent &acirc; &#226;
ã small a, tilde &atilde; &#227;
ä small a, umlaut mark &auml; &#228;
å small a, ring &aring; &#229;
æ small ae &aelig; &#230;
ç small c, cedilla &ccedil; &#231;
è small este, grave accent &egrave; &#232;
é small este, acute accent &eacute; &#233;
ê small este, circumflex accent &ecirc; &#234;
ë small este, umlaut mark &euml; &#235;
ì small i, grave accent &igrave; &#236;
í small i, acute accent &iacute; &#237;

47
î small i, circumflex accent &icirc; &#238;
ï small i, umlaut mark &iuml; &#239;
ð small eth, Icelandic &eth; &#240;
ñ small n, tilde &ntilde; &#241;
ò small o, grave accent &ograve; &#242;
ó small o, acute accent &oacute; &#243;
ô small o, circumflex accent &ocirc; &#244;
õ small o, tilde &otilde; &#245;
ö small o, umlaut mark &ouml; &#246;
ø small o, slash &oslash; &#248;
ù small u, grave accent &ugrave; &#249;
ú small u, acute accent &uacute; &#250;
û small u, circumflex accent &ucirc; &#251;
ü small u, umlaut mark &uuml; &#252;
ý small y, acute accent &yacute; &#253;
þ small thorn, Icelandic &thorn; &#254;
ÿ small y, umlaut mark &yuml; &#255;

Alte Entităţi suportate de HTML

Reprezentare
Resultat Descriere Nume Entitate
hexazecimală
Πcapital ligature OE &OElig; &#338;
œ small ligature oe &oelig; &#339;
Š capital S with caron &Scaron; &#352;
š small S with caron &scaron; &#353;
Ÿ capital Y with diaeres &Yuml; &#376;
ˆ modifier letter circumflex accent &circ; &#710;
˜ small tilde &tilde; &#732;
– en dash &ndash; &#8211;
— em dash &mdash; &#8212;
‘ left single quotation mark &lsquo; &#8216;
’ right single quotation mark &rsquo; &#8217;
‚ single low-9 quotation mark &sbquo; &#8218;
“ left double quotation mark &ldquo; &#8220;
” right double quotation mark &rdquo; &#8221;
„ double low-9 quotation mark &bdquo; &#8222;
‰ per mille &permil; &#8240;
‹ single left-pointing angle quotation &lsaquo; &#8249;
› single right-pointing angle quotation &rsaquo; &#8250;
€ euro &euro; &#8364;

48
 2. CASCADING STYLE SHEETS - CSS

2.1. Noţiuni de bază

CSS, prescurtarea de la Cascading Style Sheets - foi de stil în cascadă, sînt etichete folosite
pentru formatarea paginilor Web (de exemplu, formatare text, background sau aranjare în
pagină etc.).
Un stil reprezintă o colecţie de atribute ale textului şi ale modului de aranjare a documentului
care pot fi aplicate în mod selectiv unui document sau doar unei părţi din acesta. Aceste
atribute pot fi de tipul font, mărimea şi grosimea acestuia, marginile, paragrafele şi orice
altceva ce poate influenţa aspectul textului în pagină. Gruparea lor în stiluri permite autorului
să aplice aceeaşi colecţie de atribute la diferite părţi ale unui document.
Stilurile aplicate unui document HTML au multe avantaje pentru creatorii de pagini Web:
 Oferă control crescut asupra aspectului şi plasării textului în pagină
 Reduc "învălmăşeala" produsă de multitudinea de deschideri şi închideri ale
etichetelor care descriu elementele individuale ale textului
 Procesul de modificare a diferitelor elemente din pagină se simplifică
De exemplu, dacă doriţi ca titlurile dumneavoastră să aibă un alt tip de font decît textul
obişnuit, să fie de dimensiune mai mare şi scrise cu caractere îngroşate şi italice, ar trebui să
definiţi aceste atribute de formatare pentru fiecare titlu în parte. Folosind stilurile nu aveţi
nevoie decît să creaţi o singură definiţie de stil care să conţină atributele de formatare dorite,
pe care să o aplicaţi la fiecare titlu.
În plus, folosirea stilurilor reduce considerabil efortul depus atunci cînd doriţi să aduceţi
modificări aspectului şi aranjării elementelor din paginile dumneavoastră. În loc să parcurgeţi
fiecare document în parte şi să faceţi modificări asupra fiecărui element, nu mai este necesar
să operaţi modificări decît asupra foii de stiluri care controlează aceste elemente.
Beneficiile sintaxei CSS sînt:
 formatarea este introdusă într-un singur loc pentru tot documentul
 editarea rapidă a etichetelor
 datorită introducerii într-un singur loc a etichetelor se obţine o micsorare a codului
paginii, implicit, incarcarea mai rapidă a acesteia
Sintaxa CSS este structurată pe trei niveluri:
nivelul 1 fiind proprietăţile etichetelor din documentul HTML, tip inline
nivelul 2 este informaţia introdusă în blocul HEAD, tip embedded
nivelul 3 este reprezentat de comenzile aflate în pagini separate, tip externe
Cea mai mare importanţă (suprascrie orice alt parametru) o are sintaxa de nivelul 1, iar cea
mai mică importanţă o are cea de nivelul 3.

49
Folosirea unui fisier extern sau nivel 3 care să conţină comenzi CSS este foarte practice,
deoarece poate fi utilizat în mai multe situaţii (mai multe fişiere HTML pot folosi acelaşi
fişier extern CSS) eliminînd timpul necesar introducerii codului corespunzator în fiecare
pagină şi, totodată, editarea lor într-un singur loc pentru mai multe fisiere.
Extensia acestor fişiere este .css.
Legătura paginilor HTML cu fişierele extene CSS se face prin introducerea următoarei linii:
<link rel="stylesheet" type="text/css" href="fisier_css.css">

Atributele indică următoarele:

rel - fisierul este tip stylesheet
type - tip text ce conţine comenzi CSS
href - fişierul sau adresa fişierului CSS.
Comenzile de nivelul 2 sau embedded sînt cele găzduite oriunde între perechea de etichete
<head> si </head> conform sintaxei:
<style type="text/css">
<!--
... comenzi CSS ...
-->
</style>

Unde style - specifică unde începe şi unde se termină blocul CSS, type - precizează ce limbaj
e folosit pentru a construi foaia stilistică iar <!--...--> este folosit pentru a ascunde de
browserele vechi, care nu cunosc sintaxa CSS, conţinutul blocului style.
Comenzile CSS de nivelul 1 sau inline sînt cele mai pe larg folosite, ele suprascriind orice
alte comenzi CSS. Sînt amplasate în interiorul etichetelor HTML aflate în zona BODY şi au
sintaxa:
<eticheta style="codul CSS dorit">
...textul sau obiectul asupra caruia este aplicat codul CSS...
</eticheta>

Este permisă folosirea comentariilor în CSS astfel:

/* Acesta este un comentariu in CSS */

2.2. Sintaxa CSS

Sintaxa CSS este alcătuită din trei părţi: un selector, o caracteristică şi o valoare. Selectorul
este elementul/tagul pe care vreţi să-l definiţi, caracteristica este atributul pe care doriţi să-l
schimbaţi şi fiecare caracteristică poate lua o valoare. Caracteristica şi valoarea sînt separate
de semnul (:) şi sînt încadrate de acolade:
body {color: black}

50
Dacă doriţi să specificaţi mai mult de o caracteristică, trebuie să separaţi fiecare caracteristică
cu semnul (;). Exemplul ce urmează arată cum să definiţi un paragraf aliniat central, cu
culoarea roşie a textului:
p {text-align: center; color: red}

Pentru a întelege mai bine această definiţie de stil, puteţi descrie o caracteristică pe fiecare
rînd, ca în exemplul următor:
p {
text-align: center;
color: black;
font-family: arial
}

2.3. Elementele id şi class

id şi class sînt comenzi care dau unei formatări CSS un nume. Se folosesc atunci cînd dorim
să aplicăm un style de formatare unei anume zone. Pentru compatibilitate cu versiunile
anterioare de browsere, numele asociate zonelor nu vor conţine caracterul “_”.
Atributul id trebuie să fie unic pe pagină. Nu poate exista decît un element cu un id dat într-un
document. El este marcat în documentul HTML cu id în loc de class:
<p id="intro">
Acest paragraf va fi aliniat la dreapta.
</p>

Atributul id poate fi definit în doua moduri. Poate fi definit pentru a se potrivi tuturor
elementelor cu un id specific sau să se potrivească numai unui element cu un id specific. În
exemplul următor atributul id se va aplica tuturor elementelor cu id= "intro":
#intro {
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}

Elementul id se aplică unui style de format o singură dată sau la o singură etichetă HTML,
plasîndu-se un nume acelui style. Acest element necesită existenţa comezilor CSS în zona
HEAD sau într-un fişier extern.
Exemplu: folosirea elementului id
<html>
<head>
<title>Exemplu</title>
<style type="text/css">
<!-- #albastru{color: #0000FF;}-->
</style>
</head>
<body>
<p id="albastru">Text albastru introdus prin id "albastru"</p>

51
Text negru
</body>
</html>

Cu atributul class puteţi defini stiluri diferite pentru acelaşi element. Să zicem că vreţi două
tipuri de paragrafe în documentul dvs: unul aliniat la dreapta şi unul centrat. Iată cum puteţi
face aceasta cu stiluri:
[Link] {text-align: right}
[Link] {text-align: center}

Trebuie să folosiţi atributul class în documentul dvs. HTML:

<p class="right">
Acest paragraf va fi aliniat la dreapta.
</p>

<p class="center">
Acest paragraf va fi aliniat pe centru.
</p>

Elementul class este similar cu id dar spre deosebire de acesta poate fi folosit de mai multe ori
sau pentru zone mai mari. Ca şi la id necesită existenţa comezilor CSS în zona HEAD sau
într-un fişier extern.
Exemplu: folosirea elementului class:

<html>
<head>
<title>Exemplu</title>
<style type="text/css">
<!-- .rosu{color: #FF0000;}-->
</style>
</head>
<body>
<p class="rosu">Primul text rosu introdus prin class "rosu"</p>
Text negru
<p class="rosu">Al doilea text rosu introdus prin class "rosu"</p>
</body>
</html>

Exemplu de clase de stiluri

Clasele de stiluri permit definirea unui stil general (aplicabil în mai multe locuri în cadrul
aceleiaşi pagini sau în pagini diferite) în vederea inserării lui oriunde este necesar prin
intermediul unei simple referiri. Să presupunem că dorim să definim o clasă de stiluri "clasa-
mea" (pe care dorim să o aplicăm anumitor porţiuni de text pentru a le face să apară de
culoare verde şi aliniate la stînga). Vom utiliza în acest sens blocul <style>...</style>, aflat,
la rîndul său, în interiorul blocului <head>...</head> (reprezentînd head-erul documentului
HTML). Vom realiza ceea ce ne-am propus în felul următor:
<style>
[Link]-mea {text-align:left; color:green;}
</style>

52
Cuvîntul standard "all" aflat în faţa clasei de stiluri "clasa-mea" indică faptul că această clasă
este aplicabilă tuturor blocurilor de text, atunci cînd este necesar. Practic clasa de stiluri
"clasa-mea" poate fi asociată tuturor tagurilor HTML care operează cu text (ca de exemplu:
H2, H6, P, DIV, etc...) utilizînd în interiorul fiecărui tag vizat o referire explicită la această
clasă: <TAG class=clasa-mea>.
Aşadar, dacă dorim să aplicăm această clasă de stiluri unui titlu de ordinul 3 (specificat în
codul HTML prin tagul H3), atunci scriem:
<H3 class="clasa-mea-2"> Acesta este un header de marime 3, aliniat
la stanga si de culoare verde </H3>

Dupa cum s-a văzut, pentru apelarea unei clase de stiluri în vederea aplicării sale elementului
tag curent se foloseşte atributul "class" avînd ca valoare numele clasei de stil. Împreună cu
specificaţia "all" din definirea clasei de stiluri, atributul "class" devine un atribut universal,
adică va putea fi asociat tuturor tagurilor HTML cărora li se poate aplica (în acest caz celor
care opereaza cu text).
Observaţii:
- În interiorul unui bloc <style>...</style>, comentariile sînt blocuri delimitate de /* şi */ (ca
şi în C, C++, Java şi JavaScript).
- Dacă dorim ca o clasă de stiluri să fie aplicabilă numai pentru anumite elemente ale
documentului (spre exemplu, pentru paragrafele de text desemnate prin marcajul de paragraf
"p"), atunci în construcţia clasei va aparea acest element (de exemplu "[Link]-mea-2").
Exemplu:

<html>
<head><title>Clase de stiluri dedicate</title>

<style> [Link]-mea-2 {text-align:left; color:green;} </style>

</head>

<body>
<p>Acesta este un paragraf normal</p>
<br>
<p class="clasa-mea-2">
Acesta este un paragraf aliniat la stanga si de culoare verde</p>
</body>
</html>

Exemple de stiluri identificate

Absolut toate elementele tag ale unui document HTML admit un atribut universal numit "id".
Acest atribut "id" poate identifica prin valorile sale stilul utilizat de un tag HTML.
Pentru a utiliza un stil "identificat" procedăm astfel:
1. În blocul <style>...</style> introducem definiţia stilului conform sintaxei:

53
<style>
#rosu {color: red}
</style>

2. În elementul (tagul) în care dorim utilizarea locală a acestui stil, folosim atributul "id" care
primeste ca valoare numele identificator al stilului definit anterior. Exemplu:
<p id="rosu">Acesta este un paragraf de text de culoare rosie</p>

Dacă dorim ca un stil "identificat" să fie aplicabil numai pentru anumite elemente ale
documentului (de exemplu "H3"), atunci în construcţia (definiţia) identificatorului de stil va
apărea acest element (aici "H3"), ca în exemplul următor:
<html>
<head>
<title>Pagina cu stil identificat</title>
<style>
H3#rosu {color:red; text-align:center;}
</style>
</head>
<body>
<H3 id="rosu">Acesta este un header de marime 3, centrat si de culoare rosi
e</H3>
</body>
</html>

Exemplu de stil CSS în fişier extern

Stilurile definite în interiorul unui bloc <style>...</style> pot fi transferate într-un fişier extern
existînd astfel posibilitatea asocierii lor mai multor fişiere HTML.
Pentru a utiliza un stil definit într-un fişier extern se procedează astfel:
1. Se creează un fişier care să conţină numai descrierea stilurilor şi se salvează cu extensia
".css". Conţinutul acestui fişier coincide cu conţinutul unui bloc <style>...</style>, fără ca
aceşti delimitatori să fie incluşi.
2. În fişierul HTML, care utilizează stilurile definite în fişierul creat la punctul 1, se include în
blocul <head>...</head> o etichetă <link>, avînd trei atribute:
- atributul "rel" cu valoarea "stylesheet";
- atributul "type" cu valoarea "text/css";
- atributul "href" avînd ca valoare adresa URL a fişierului creat la punctul 1.
Stilurile definite din fişierul CSS extern se activează ca şi cum ar fi stiluri definite în fişierul
HTML curent într-un bloc <style>...</style>.
Iată un fişier HTML cu un CSS extern:
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html;

54
charset=windows-1252">
<LINK REL="stylesheet" TYPE="text/css" HREF="[Link]">
<title>Pagina de text stilizat</title>
</head>
<body>
<H2>Acesta este text formatat ca Header 1</H2>
<p>Acesta este un paragraf</p>
<H3>Acesta este text formatat ca Header 2, urmat de un tabel</H3>
<table width="100%" border="1">
<tr>
<th align="left">Nume</th>
<th align="left">Prenume</th>
<th align="left">Telefon</th>
<th align="left">E-mail</th>
</tr>
<tr>
<td width="25%">Popescu</td>
<td width="25%">Valentina</td>
<td width="25%">443397</td>
<td width="25%">popescu@[Link]</td>
</tr>
<tr>
<td width="25%">Ionescu</td>
<td width="25%">Mihai</td>
<td width="25%">559978</td>
<td width="25%">ionescu@[Link]</td>
</tr>
</table>
<br>
<h3>Acesta este un text formatat ca Header 3, urmat de 2 liste:</h3>
<ol>
<li>Date personale student;</li>
<li>Calificari student;</li>
<li>Program zilnic:</li>
</ol>
<ul>
<li>Program dimineata</li>
<li>Pauza de masa</li>
<li>Program dupamiaza</li>
</ul>
</body>
</html>

Fişierul CSS asociat (plasat în acelaşi director) cu fişierul HTML de mai sus este:
H2,H3,h3
{
color:#483d8b;
font-family: "lucida calligraphy", "arial";
}
p, table, li
{
font-family: "lucida calligraphy", "arial";
margin-left: 10pt;
}
body
{
background-color:#fffaf0;

55
 }
li,p,th,td
{
font-size: 80%;
}
table {border-style:outset}
li {list-style: square;)

Menţiune suplimentară:
În cazul în care dintr-un fişier HTML se face o referire la un fişier CSS care însă lipseşte,
atunci fişierul HTML va fi afişat în browser fără elementele de stilizare, exact aşa cum ar
arăta dacă stilizările nu ar fi existat.

Exemplu de stiluri dedicate

Aceste stiluri se aplică blocurilor de text pentru care sînt definite şi apelate pe loc. De
exemplu:
<H3 style= "text-align:right; color:#429EF7;">

În acest exemplu, stilul va determina toate titlurile H3 din paginile HTML care fac apel la
acest stil să apară în browser în culoarea specificată şi aliniate la dreapta.
Dacă dorim ca acelaşi stil să fie utilizat de către mai multe elemente-tag (de ex. "H2", "H3",
"P" si "DIV"), atunci fie se utilizează o listă cu aceste elemente (separate prin virgulă) în
secţiunea <style>...</style> din header-ul documentului (delimitat de marcajele
<HEAD>...</HEAD>), asociindu-i-se elementele de stil comune, fie se va utiliza stilul în
mod explicit în cadrul fiecărui tag, ca mai sus.
Exemplu cu lista de stiluri în HEAD:
<style>
H2, H3, P {text-align:right; color:#429EF7;}
</style>

Exemplu cu fiecare element de stil definit şi apelat în cadrul tagurilor luate separat:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Stil dedicat inline</title>
</head>
<body>
<H2 style= "text-align:right; color:#429EF7;">text</H2>
<p style= "text-align:right; color:#429EF7;">text</P>
<H3 style= "text-align:right; color:#429EF7;">text</H3>
</body>
</html>

Explicitarea a fost făcută, aşadar, în momentul utilizării acestora.

56
Exemplu de stiluri inline
Stilurile in-line sînt acele stiluri definite chiar în eticheta HTML (marcajul) ce iniţiază blocul
în care dorim să se aplice aceste stiluri.
După cum am văzut deja, pentru a defini stiluri inline se utilizează atributul universal "style"
(comun practic tuturor etichetelor ce apar într-un document HTML) în a cărui apare semnul
egal, după care, între ghilimele, urmează definirea stilului, practic valoarea atributului "style".
Valoarea dată atributului "style" este tocmai descrierea stilului, cuprinsă nu între acolade
{..} (ca la definirea în HEAD sau în fişerul CSS extern), ci între ghilimele "...":
<H3 style="color:red; text-align: center;">Acest header are marimea 2,
este de culoare rosie si se pozitioneaza in pagina centrat.</H3>

Dacă dorim utilizarea unui anumit stil pentru un fragment de text, atunci includem acest text
într-un bloc cu ajutorul delimitatorilor <span>...</span>, după care putem utiliza atributul
"style", în cadrul etichetei <span>, inline:
<html>
<head>
<title>Pagina HTML cu stil inline</title>
</head>
<body><H3>Titlu de marime 3</H3>
<span style="size:15pt; align=center; color:green;">
Acesta este un text cu corpul de litera de dimensine 15 puncte,
aliniat pe centru si de culoare verde.
</span>
</body>
</html>

2.4. Pseudoclase de stiluri CSS

Pseudoclasele se utilizează pentru personalizarea legăturilor web, atît de tip text, cît şi de tip
imagine. Ele se definesc în interiorul unui bloc <style>...</style> sau într-un fişier extern.
Exemplul de mai jos este edificator în acest sens:
a:link {color: blue; font-size: 15pt;}
a:hover {color: red; font-style: italic; text-decoration: none}
a:visited {color: magenta; font-size: 15pt; text-decoration: none}
a:active {color: cyan; font-size: 15pt; text-decoration: none}

Explicaţii:
o a:link se referă la modul în care arată un link în mod normal;
o a:hover se referă la modul în care arată un link atunci cînd se trece cu mouse-ul peste
el (în Netscape funcţionează doar de la versiunea 6);
o a:active se referă la modul în care arată un link atunci cînd se efectuează click pe el;
o a:visited se referă la modul în care arată un link deja vizitat;
o specificaţia "text-decoration: none" elimină sublinierea implicită cu o linie albastră
a link-ului.

57
Pentru ca numai anumite legături să utilizeze un stil, se pot folosi următoarele trei metode:
1) a: link.CLASA1 {...} combinat cu <a class = CLASA1 href=" "> ...</a>
2) a: link#ID1 {...} combinat cu <a id = ID1 href=" "> ...</a>
3) a.CLASA1: link {...} combinat cu <a class = CLASA1 href=" "> ...</a>

2.5. Modalităţi de modificare a cursorului

În browsere cursorul mouse-ului are în general o formă simplă şi bine cunoscută, luînd pe
parcursul vizionării paginii respective maximum două infăţişări diferite:
o Mîna - atunci cînd este poziţinat pe o legătură
o Săgeata oblică din direcţia dreapta jos spre stînga sus - atunci cînd este poziţionat pe
alt obiect decît o legătură.

Acestea sînt însă formele implicite. Există însă şi cazuri în care am dori ca acel cursor să ia o
altă formă decît cele două predefinite. La fel ca multe alte probleme care privesc modul în
care arată o pagină, şi această problemă îşi găseşte rezolvarea în folosirea CSS ca limbaj de
descriere a modului de stilizare a unui document.
Proprietatea care manipulează forma cursorului se numeşte simplu: "cursor" şi poate fi
introdusă în orice element "style" al unui tag html.
De exemplu, pentru obţinerea unei imagini a cursorului de tipul unei săgeţi însoţite de un
semn de întrebare la trecerea mouse-ului peste un link, va trebui folosit codul:
<a href="[Link]" style="cursor: help">Legatura</a>

Efectul este următorul (doar pentru IE minim 4.0):

Nu este însă unicul mod de stilizare a cursorului mouse-ului. În continuare prezentăm codurile
pentru toate formele de cursor care pot fi folosite:
auto utilizează setările implicite ale utilizatorului
crosshair creează o cruce
default setările implicite ale browserului
e-resize săgeata Est-Vest
hand mîna
help semnul întrebării
move cruce cu săgeţi la capete
n-resize săgeata Sud-Nord
ne-resize săgeata SudVest - NordEst
nw-resize săgeata SudEst - NordVest

58
 pointer mîna
s-resize săgeata Nord - Sud
se-resize săgeata NordVest - SudEst
sw-resize săgeata NordEst - SudVest
text bara verticală, cîmpuri de introducere a datelor
w-resize săgeata Est-Vest
wait clepsidra

2.6. div, span şi etichete CSS

Eticheta html <div> funcţionează asemănător cu eticheta html <p>, putînd găzdui comenzi
CSS aplicabile la un bloc sau la mai multe din conţinutul paginii. Eticheta html <span> este
similară cu eticheta html <font> (pe cale de a fi eliminată de consorţiul W3C) aplicîndu-se
elementelor dintr-un paragraf. Etichetele CSS sînt cunoscute sub numele de elemente sau
selectori avînd un layout asemănător cu etichetele HTML:
// eticheta HTML
<eticheta argument="valoare">

// eticheta CSS
element{argument: valoare;}

Elementul poate fi o etichetă HTML, un id sau un class, iar argumentul şi valoarea sînt
aceleaşi ca în HTML.
Exemplu: acelaşi text realizat în HTML şi în HTML cu CSS
// HTML
<font color="#00FF00">
<p>Text verde</p>
</font>

// HTML cu CSS
<p style="color: #00FF00;">
Text verde
</p>

Comenzile de CSS pot fi plasate şi în zona HEAD rezultînd o funcţionare identică; mai mult
chiar, aceleaşi comenzi putînd fi folosite în mai multe locuri în aceeaşi pagină.
Exemplu: comenzi CSS incluse în zona HEAD
<html>
<head>
<title>Exemplu</title>
<style type="text/css">
<!--
p{color: #00FF00;}
-->
</style>
</head>
<body>
<p>Text verde</p>

59
Text negru
<p>Text verde</p>
</body>
</html>

2.7. Stiluri pentru fonturi

Aceste elemente specifică argumentul fontului care se asociază unui element HTML, fiind
incluse ori în zona HEAD, ori în interiorul etichetei dorite.
În cazul de faţă se remarcă asemănarea cu eticheta font din HTML care acceptă argumentele
type, style, size şi weight.

font-family

font-family este de fapt o listă de fonturi din care browserul va folosi în ordinea în care le
recunoaşte (primul folosit va fi primul din listă, dacă nu este recunoscut, îl foloseşte pe al
doilea şi tot aşa mai departe). Este recomandat ca ultima poziţie din listă să fie un font generic
(de exemplu, serif, sans-serif sau monospace).
În situaţia în care numele fontului este format din două cuvinte, se încadrează între ghilimele
duble pentru ca browserul să le interpreteze împreună.
Exemplu: CSS introdus în HEAD aplicat etichetei p. Browserul nu recunoaşte primele două
fonturi din listă, folosindu-l pe al treilea
<html>
<head>
<title>Exemplu</title>
<style type="text/css">
<!-- p{font-family: font1,font2,arial;}-->
</style>
</head>
<body>
<p>Text scris cu cu fontul Arial</p>
Text negru
<p>Text scris cu cu fontul Arial</p>
</body>
</html>

Exemplu: acelaşi exemplu dar CSS introdus în eticheta p din HTML

<html>
<head>
<title>Exemplu</title>
</head>
<body>
<p style="font-family: font1,font2,arial;">
Text scris cu cu fontul Arial</p>
Text negru
<p style="font-
family: font1,font2,arial;">Text scris cu cu fontul Arial</p>
</body>
</html>

60
font-size

font-size este parametrul prin care stabilim dimesiunea fontului, exprimat în pixeli (px),
puncte (pt), keywords sau procente. Are o funcţionare asemănătoare cu eticheta <font>.
Exemplu: CSS introdus în HEAD aplicat etichetei p, dimensiunea exprimată în pixeli

<html>
<head>
<title>Exemplu</title>
<style type="text/css">
<!-- p{font-size: 20px;}-->
</style>
</head>
<body>
<p>Text scris cu font de 20px</p>
Text negru
</body>
</html>

Pentru dimensiunea exprimată în puncte folosim acelaşi exemplu înlocuind px cu pt.

Dimensiunea exprimată prin keywords foloseşte cuvinte în loc de cifre. Şapte cuvinte
înlocuiesc dimensiunile de la 1 la 7 de la vechea etichetă FONT FACE din HTML:
CSS keyword număr FONT size
xx-small 1
x-small 2
small 3
medium 4
large 5
x-large 6
xx-large 7

Pentru verificare se poate folosi exemplul anterior în care se înlocuieşte 20px cu unul din
cuvintele de mai sus. Procentele sînt o altă valoare pe care o poate lua font-size. Această
modalitate poate fi vizualizată diferit de browsere diferite. Ca verificare folosiţi acelaşi
exemplu schimbînd 20px cu 200%.

font-style

font-style este folosit pentru a adăuga caracteristica italică fontului. Poate lua valorile normal
şi italic.

<style type="text/css">
<!-- p{font-style: italic;}-->
</style>

font-weight

font-weight este parametrul care stabileşte grosimea caracterului putînd lua valorile numerice
de la 100 la 900 sau BOLD, BOLDER, LIGHTER.

61
<style type="text/css">
<!-- p{font-weight: 700;}-->
</style>

2.8. Compunerea stilurilor

Stilurile prezentate anterior pot fi folosite simultan în interiorul aceleiaşi etichete fiind
despărţite de caracterul “;” (punct şi virgulă).
Exemplu: folosirea unui stil compus aplicat etichetei p

<html>
<head>
<title>Exemplu</title>
<style type="text/css">
<!--
p{
font-family: arial;
font-size: 20px;
font-style: italic;
font-weight: 800;}
-->
</style>
</head>
<body>
<p>Text scris cu Arial, 20px, italic, 800</p>
Text negru
</body>
</html>

2.9. Stiluri pentru text

Aliniere

text-align poziţionează pe orizontală obiecte (de exemplu, text sau imagini) şi admite valorile
left, right şi center ca şi eticheta align din HTML.
În continuare este prezentat ca exemplu codul folosit în HEAD, aplicat etichetei p:
<style type="text/css">
<!--
p{text-align: center;}
-->
</style>

Exemplu: prin intermediul lui div aplicăm stilul pe centru imaginii şi textului
<html>
<head>
<title>Exemplu</title>
<style type="text/css">
<!--
p{text-align: center;}

62
-->
</style>
</head>
<body>
<div class="pecentru"><img src="[Link]"></div>
Text neformatat
<div class="pecentru">Text formatat</div>
</body>
</html>

vertical-align este folosit pentru alinierea pe verticală a obiectelor dintr-un tabel şi poate lua
valorile: top, middle şi bottom.
În exemplul de mai jos este creată clasa sus care va putea fi aplicată elementelor <td> ale
tabelului:
<style type="text/css">
<!--
.sus{vertical-align: top;}
-->
</style>

float este folosit pentru alinierea textului cu imaginile şi poate avea valorile: left şi right. În
funcţie de valoarea aleasă imaginea va fi aliniată în partea opusă a paginii.
Exemplu: se creează clasa auto şi o aplicăm imaginii
<html>
<head>
<title>Exemplu</title>
<style type="text/css">
<!--
.auto{float: left;}
-->
</style>
</head>
<body>
<img src="[Link]" class="auto">
Textul se aliniaza la dreapta, iar poza la stanga datorita clasei "auto".
</body>
</html>

Tabulare

text-indent este folosit pentru alinierea textului în interior avînd valori exprimate în inci (in),
centimetri (cm) sau pixeli (px).
În exemplul de mai jos text-indent este aplicat etichetei p deplasînd textul cu 10 pixeli în
interior:
<style type="text/css">
<!--
p{text-indent: 10px;}

63
-->
</style>

Decorare

text-decoration adaugă sublinierea sau tăierea blocului text asociat şi poate avea valorile
underline, line-through sau none.
Exemplu: stilul asociat etichetei p este prezentat în HEAD
<html>
<head>
<title>Exemplu</title>
<style type="text/css">
<!--
p{text-decoration: underline;}
-->
</style>
</head>
<body>
Text normal
<p>Text subliniat</p>
</body>
</html>

Culoare

color defineşte culoarea textului dintr-o zonă sau întreaga pagină.

Exemplu: stilul asociat etichetei p este prezentat în HEAD:
<html>
<head>
<title>Exemplu</title>
<style type="text/css">
<!--
p{color: #0000FF;}
-->
</style>
</head>
<body>
Text normal
<p>Text albastru</p>
</body>
</html>

Stiluri pentru legături

În HTML culoarea legăturilor poate fi stabilită prin atributele LINK, ALINK şi VLINK
declarate în interiorul etichetei BODY. Acelaşi lucru şi chiar mai mult poate fi realizat
folosind sintaxa CSS.
Exemplu:
<html>
<head>
<title>Exemplu</title>

64
<style type="text/css">
<!--
a{font-family: arial; font-size: 20px;}
a:link {color: #0000FF;}
a:visited {color: #00FF00;}
a:active {color: #FF0000;}
a:hover {color: #000000;}
-->
</style>
</head>
<body>
Text normal
<a href="[Link]">link</a> catre exemplu
</body>
</html>

a - defineşte stilul general pentru legătură

a:link - defineşte stilul legăturii nevizitate
a:visited - defineşte stilul legăturii vizitate
a:active - defineşte stilul legăturii active (nu prea se foloseşte)
a:hover - defineşte stilul cînd mouse-ul este deasupra legăturii

2.10. Stiluri pentru background

Culoarea pentru fundal (background) sau imagine poate fi definită pentru întreaga pagină,
pentru o celulă a tabelului sau pentru text.

Culoare de fond

background-color defineşte culoarea de fond şi poate fi asociat oricărei etichete HTML.

Exemplu: definim un stil pentru întreg BODY şi un altul pentru eticheta p
<html>
<head>
<title>Exemplu</title>
<style type="text/css">
<!--
body {background-color: #FFFF00;}
p {background-color: #FF0000;}
-->
</style>
</head>
<body>
Text normal
<p>Text cu background rosu</p>
</body>
</html>

Imagine de fond

Imaginile pot fi folosite ca fundal în spatele întregii pagini, a unui obiect sau a textului.
background-image asociază o imagine ca fundal unui obiect.
Exemplu: definim un stil pentru eticheta p

65
<html>
<head>
<title>Exemplu</title>
<style type="text/css">
<!--
p {background-image: url([Link]);}
-->
</style>
</head>
<body>
Text normal
<p>Text cu imagine de fond</p>
</body>
</html>

Repetare

Funcţie de dimensiunile obiectului căruia îi sînt asociate imaginile de fond se repetă pe

orizontală şi verticală. Repetarea poate fi controlată prin parametrul background-repeat care
poate lua valorile:
repeat-x - imaginea se repetă pe orizontală
repeat-y - imaginea se repetă pe verticală
no-repeat - imaginea nu se repetă
Exemplu: imaginea nu se repetă sub eticheta p
<html>
<head>
<title>Exemplu</title>
<style type="text/css">
<!--
p {background-image: url([Link]);
background-repeat: no-repeat;}
-->
</style>
</head>
<body>
Text normal
<p>Text cu imagine de fond</p>
</body>
</html>

Poziţia

În mod normal, imaginea de fundal începe din colţul stînga sus al obiectului asociat, dar acest
lucru poate fi controlat prin comanda CSS background-position. Sînt acceptate două valori:

în prima poziţie poate fi: top, center, bottom, percentage sau pixel
în a doua poziţie poate fi: right, center, left, percentage sau pixel

Exemplu: imaginea de fundal este asociată etichetei BODY fiind amplasată top şi center, fără
repetare

66
<html>
<head>
<title>Exemplu</title>
<style type="text/css">
<!--
body {background-image: url([Link]);
background-repeat: no-repeat;
background-position: top center;}
-->
</style>
</head>
<body>
Text normal
</body>
</html>

2.11. Stiluri pentru liste

list-style-type

Folosind eticheta ol din HTML creăm liste ordonate sau numerotate. Adăugînd comenzi CSS
în zona HEAD putem adăuga pe lîngă numere şi cifre sau alte simboluri. Browserul Netscape
nu permite asocierea comenzilor CSS decît pentru eticheta li.
Sintaxa este:
<style type="text/css">
<!--
li {list-style-type: valoare;}
-->
</style>

valoarea poate fi:

valoare descriere
disc disc
circle cerc
square pătrat
decimal numere întregi
lower-roman numere romane, caractere mici (i, ii, iii, iv)
upper-roman numere romane, caractere mari (I, II, III, IV)
upper-alpha litere mari (A, B, C, D)
lower-alpha litere mici (a, b, c, d)
none nimic

Exemplu: lista ordonată folosind marcaje cu litere mici

<html>
<head>
<title>Exemplu</title>
<style type="text/css">
<!--
li {list-style-type: lower-alpha;}

67
-->
</style>
</head>
<body>
Necesar materiale:
<ol>
<li>caramida</li>
<li>ciment</li>
<li>ipsos</li>
</ol>
</body>
</html>

list-style-image

În afara simbolurilor de marcaj prestabilite cunoscute de browser pot fi folosite şi imagini prin
comanda CSS list-style-image. Imaginile sînt introduse prin adresa url().
Exemplu: lista ordonată folosind ca marcaj imaginea [Link]
<html>
<head>
<title>Exemplu</title>
<style type="text/css">
<!--
li {list-style-image: url([Link]);}
-->
</style>
</head>
<body>
Necesar materiale:
<ul>
<li>caramida</li>
<li>ciment</li>
<li>ipsos</li>
</ul>
</body>
</html>

2.12. Chenare şi margini

Fiecare element HTML poate fi înţeles ca o casetă dreptunghiulară (box), iar toate cutiile au
aceeaşi structură: "width", "padding", "border" şi "margin".

68
 marginea (margin) este spaţiul exterior chenarului pînă la celelalte elemente
chenarul (border) este o bordură care înconjoară elementul
completarea (padding) stabileşte distanţa dintre conţinut şi chenar
conţinutul include informaţia utilă (text, tabele, imagini, formulare etc.)

Originea elementului este considerat colţul din dreapta sus faţă de care se vor raporta toate
dimensiunile prezentate în continuare.

Domeniul de conţinut (width şi height)

Fiecare element are o lăţime (width). Dacă aceasta nu a fost definită, în cazul elementelor de
tip block, box-ul este atît de lat cît trebuie să fie, deci cît conţinutul box-ului. Lăţimea şi
înălţimea unui element sînt stabilite în HTML prin atributele width şi height. Aceste atribute
pot fi adăugate sau suprascrise prin comenzi CSS.
Exemplu: folosind comenzi CSS modificăm dimensiunile originale ale imaginii

<html>
<head>
<title>Exemplu</title>
<style type="text/css">
<!--
img {width: 50px; height: 100px;}
-->
</style>
</head>
<body>
<img src="[Link]">
</body>
</html>

Distanţa interioară (padding şi margin)

Între conţinut şi marginea box-ului se află distanţa interioară (padding). padding stabileşte
distanţa dintre obiect şi chenar simultan pentru toate laturile. De asemenea, padding preia
culoarea de fundal a documentului conţinut. Distanţele pot fi stabilite şi individual folosind
padding-top, padding-bottom, padding-left sau padding-right.

69
margin stabileşte distanţa dintre chenar şi celelalte obiecte din pagină simultan pentru toate
laturile. Distanţele pot fi stabilite şi individual folosind margin-top, margin-bottom, margin-
left sau margin-right.
Valorile pentru padding şi margin pot fi exprimate în: px (pixeli), in (inci), pt (puncte) sau cm
(centimetri).
Exemplu: folosind comenzi CSS imaginea este poziţionată la 100px faţă de latura stîngă şi la
25px faţă de latura de sus

<html>
<head>
<title>Exemplu</title>
<style type="text/css">
<!--
img {margin-left: 100px; margin-top: 25px;}
-->
</style>
</head>
<body>
<img src="[Link]">
</body>
</html>

Marginea (border)

În jurul "padding" se setează chenarul (border), care pentru toate patru laturi poate avea o
lăţime (width), culoare (color) şi style (tăiat, punctat, liniat etc.) diferite. Netscape şi Internet
Explorer afişează diferit chenarele. Comanda CSS pentru definirea chenarului este border
avînd proprietăţile asociate width, style şi color. Pentru a fi siguri că aceste proprietăţi
funcţionează atît în Internet Explorer, cît şi în Netscape trebuie să declarăm pentru border cel
puţin width şi style.
border-width - stabileşte grosimea chenarului şi poate fi exprimată în px (pixeli), pt (puncte),
cm (centimetri) sau in (inci).
border-style - stabileşte tipul chenarului şi poate fi dotted, dashed, solid, double, groove,
ridge, inset şi outset.
border-color - stabileşte culoarea chenarului şi poate fi exprimată prin valoare hexazecimală
sau în cuvinte.
Exemplu: definim nouă clase utilizînd proprietăţile border-width, border-style şi border-color
<html>
<head>
<title>Exemplu</title>
<style type="text/css">
<!--
.clasa1 {border-width: 2px; border-style: dotted; border-color: red;}
.clasa2 {border-width: 3px; border-style: dashed; border-color: blue;}
.clasa3 {border-width: 2px; border-style: solid; border-color: green;}

70
.clasa4 {border-width: 3px; border-style: double;
border-color: black;}
.clasa5 {border-width: 2px; border-style: groove;
border-color: silver;}
.clasa6 {border-width: 3px; border-style: ridge; border-color: lime;}
.clasa7 {border-width: 2px; border-style: inset;
border-color: yellow;}
.clasa8 {border-width: 3px; border-style: outset; border-color: aqua;}
.clasa9 {border-width: 2px; border-style: hidden;
border-color: olive;}
-->
</style>
</head>
<body>
<div class="clasa1">border-width: 2px; border-style: dotted;
border-color: red;</div><br>
<div class="clasa2">border-width: 3px; border-style: dashed;
border-color: blue;</div><br>
<div class="clasa3">border-width: 2px; border-style: solid;
border-color: green;</div><br>
<div class="clasa4">border-width: 3px; border-style: double;
border-color: black;</div><br>
<div class="clasa5">border-width: 2px; border-style: groove;
border-color: silver;</div><br>
<div class="clasa6">border-width: 3px; border-style: ridge;
border-color: lime;</div><br>
<div class="clasa7">border-width: 2px; border-style: inset;
border-color: yellow;</div><br>
<div class="clasa8">border-width: 3px; border-style: outset;
border-color: aqua;</div><br>
<div class="clasa9">border-width: 2px; border-style: hidden;
border-color: olive;</div>
</body>
</html>

Marginea exterioară (margin)

Fiecare box are şi o distanţă exterioară (margin) pînă la celelalte elemente, care preia culoarea
de fundal a elementului înconjurător.
Modelul box serveşte pentru formatarea distanţelor în şi între box-urile unei pagini web şi este
extrem de diversificat.

2.13. Poziţionarea obiectelor

Poziţionarea permite aşezarea unui obiect într-un anume loc folosind coordonatele. Totodată,
obiectele pot fi poziţionate pe straturi diferite, unul deasupra celuilalt.
Atît poziţionarea absolută (ABSOLUTE), cît şi cea relativă (RELATIVE) folosesc
proprietăţile LEFT şi TOP exprimate în px (pixeli), in (inci), pt (puncte), ems, procentaje sau
cm (centimetri).

71
Poziţionarea absolută plasează obiectul în pagină exact în locaţia dată de left şi top. Astfel
poate fi creat un element liber faţă de celelalte din pagină. Obiectul poate fi orice, de exemplu
text sau imagine.
Exemplu: aplicăm poziţionarea absolută etichetei h4
<html>
<head>
<title>Exemplu</title>
</head>
<body>
<h4 style="position: absolute; left: 50px; top: 50px">Text 1</h4>
<h4 style="position: absolute; left: 100px; top: 200px">Text 2</h4>
</body>
</html>

Poziţionarea relativă este poziţia normală pe care o ocupă un element, după elementele
anterioare şi înaintea celor următoare. Poate fi deplasat faţă de această poziţie folosind
proprietăţile left şi top.
Exemplu: folosim două obiecte - unul poziţionat absolut, celălalt poziţionat relativ
<html>
<head>
<title>Exemplu</title>
<style type="text/css">
<!--
.absolut {position: absolute; left: 200px; top: 150px;}
.relativ {position: relative; left: 50px; top: 50px;}
-->
</style>
</head>
<body>
<div class="absolut">Pozitionare absoluta, independent de celelalte
obiecte din pagina</div>
Text
<div class="relativ">Pozitionare relativa, dupa "Text"</div>
</body>
</html>

Poziţionarea tridimensională

Elementele sînt poziţionate pe ecran pe o suprafaţă bidimensională, dar pot fi aşezate şi unul
deasupra celuilalt, într-o stivă utilizînd un indicativ (index-z) începînd cu 0, următorul 1 şi tot
aşa în continuare. Elementul cu indexul cel mai mare este aşezat deasupra.
Exemplu:
<html>
<head>
<title>Exemplu</title>
<style type="text/css">
<!--
.element1 {position: absolute; left: 30px; top: 30px; z-index: 3}
.element2 {position: absolute; left: 50px; top: 50px; z-index: 2}
.element3 {position: absolute; left: 70px; top: 70px; z-index: 1}
-->

72
</style>
</head>
<body>
<div class="element1"><img src="[Link]"></div>
<div class="element2"><img src="[Link]"></div>
<div class="element3"><img src="[Link]"></div>
</body>
</html>

BIBLIOGRAFIE
1. [Link]. Totul despre HTML., Teora, 2002, 1007 p. http: //[Link]
2. HTML complete. Sybex, 1999, 1028 p.
3. HyperText Markup Language. [Link]
4. HTML 4.01 specification. [Link]
5. HTML tutorial. [Link]
6. HTML tutorials. [Link]
7. Web authoring reference. [Link]
8. Markup validation service. [Link]
9. HTML-kit. [Link]
10. GNU General Public License. [Link]
11. HTML tags. [Link]
1. Data formats. HTML in the Yahoo directory.
[Link]
2. Doctor HTML. [Link]
3. Web design. [Link]
4. GNP HTML Tutorials - [Link]
5. HTML 101 - [Link]
6. HTML Basics - [Link]
7. TML Basics Guide - [Link]
8. HTML Basix - [Link]
9. HTML Cookbook - [Link]
10. HTML Developers Page - [Link]
11. HTML Goodies Tutorials - [Link]
12. HTML Lite - [Link]
13. HTML Net - [Link]
14. HTML Source - [Link]
15. HTML Tips, Help and Examples - [Link]
16. HTML Tutorial for Beginners - [Link]
17. HTML Tutorials for the Complete Idiot -
[Link]
18. HTML: An Interactive Guide for Beginners - [Link]
19. Introduction to HTML and URLs.
[Link]
20. Manual de HTML. [Link]

73