Limbaj HTML

Cuprins
CUPRINS 3
BIBLIOGRAFIE 6
CUVÎNT ÎNAINTE 7
CAPITOLUL 1. INTERNET ŞI WORLD WIDE WEB 9
1.1. INTRODUCERE 9
Ce este Internetul? 9
Ce este World Wide Web (WWW, W3) 10
1.2. RESURSELE WORLD WIDE WEB 11
1.3. ADRESAREA UNEI RESURSE ÎN WEB 11
1.4. ELEMENTELE CONEXIUNILOR ÎN SPAŢIUL WWW 12
1.5. PROTOCOLUL HTTP 13

1.5.1. INTRODUCERE GENERALĂ 13
1.5.2. MESAJELE PROTOCOLULUI HHTP 14
1.5.3. METODELE PROTOCOLULUI HHTP 15
CAPITOLUL 2. DESCRIERE GENERALĂ A HTML 19
2.1. INTRODUCERE, ISTORIE, VERSIUNI 19

Ce este HTML? 19
Caracteristicile limbajului HTML. 19
De ce HTML? 20
Istoria HTML. 21
Ce trebuie să facă un autor de pagini HTML? 24
Revoluţia HTML 4.0. 24
Validarea documentelor HTML. 25
2.2. REPREZENTAREA DOCUMENTELOR HTML 26
2.3. STRUCTURA ŞI LOGICA LIMBAJULUI HTML 27

I. Tag-urile HTML 27
II. Caractere entităţi 28
CAPITOLUL 3. STRUCTURA DOCUMENTELOR HTML 31
3.1. STRUCTURA GENERALĂ A UNUI DOCUMENT HTML 31

1. Elementul DOCTYPE 32
2. Elementul HTML 33
3. Elementul HEAD 33
4. Elementul BODY 34
5. Elementul FRAMESET 37
3.2. STRUCTURA HEADER-ULUI UNUI DOCUMENT

(ELEMENTUL HEAD) 40
1. Elementul TITLE 40
2. Elementul BASE 41
3. Elementul STYLE 41
4. Elementul LINK 43
5. Elementul META 45
6. Elementul SCRIPT 46
7. Elementul ISINDEX 49
8. Elementul OBJECT 49
3.3. STRUCTURA CORPULUI UNUI DOCUMENT HTML

(ELEMENTUL BODY) 52
I. Elementele de tip bloc (block level elements) 53
II. Elementele de tip inline (inline level elements) 54
III. Elementele de tip nedefinit (pot fi atît inline cît şi block) 56
CAPITOLUL 4. ELEMENTE DE BAZĂ HTML 57
4.1. ELEMENTE UTILIZATE LA FORMATAREA TEXTULUI

UNUI DOCUMENT 57
1. Terminarea rîndului (elementul BR) 57
2. Titluri (elementul Hi) 58
3. Containere de text (stiluri ale unui bloc) 59
A. Paragrafe (elementul P) 59
B. Containerul logic de tip bloc (elementul DIV) 60
C. Containerul logic de tip text/inline (elementul SPAN) 60
D. Textul centrat (elementul CENTER) 62
E. Textul preformatat (elementul PRE) 62
F. Adrese (elementul ADDRESS) 63
G. Citate lungi (elementul BLOCKQUOTE) 64
H. Citate scurte (elementul Q) 65
4. Stilurile caracterelor 66
5. Elemente de modificare a fontului caracterelor 67
A. Dimensiunea fontului 67
B. Stabilirea fontului de bază 69
4.2. DEFINIREA ŞI UTILIZAREA LISTELOR 70
4.3. TAG-URI (ELEMENTE) PENTRU LEGĂTURI

HYPERTEXT 77
4.4. IMAGINI ÎN DOCUMENTELE HTML 83
4.5. IMAGINI SENZITIVE 90
4.6. ALTE ELEMENTE LEGATE DE TEXT ŞI IMAGINI 98

1. Comentariile în documentele HTML 98
2. Linii orizontale de demarcare (elementul HR) 98
3. Fundalul unui document 99
4. Culoarea textului şi a legăturilor 100
CAPITOLUL 5. UTILIZAREA TABELELOR ÎN HTML 101
CAPITOLUL 6. UTILIZAREA FRAME-URILOR ÎN HTML

131
CAPITOLUL 7. UTILIZAREA FORMULALELOR (FORMS)

145
CAPITOLUL 8. ALTE ELEMENTE ALE LIMBAJULUI

HTML 181
8.1. FORMULE MATEMATICE 181
8.2. DOCUMENTE DINAMICE 182

8.3. UTILIZAREA MEDIILOR EXTERNE: IMAGINI, SUNETE
ŞI VIDEO 183
Bibliografie
[1] WWW Consortium, HTML 4.0 Specification,

www.w3.org/TR/REC-html40
[2] Strebe, Mathew, Perkins, Charles, MCSE Internet

Information server - Study Guide,
SYBEX Corporation, 1998
[3] Tittel, Ed, Gaither, Mark, Hassinger, Sebastian,

Erwin, Mike, Foundations of World Wide Programming,
IDG Books Worldwide Inc., 1997
[4] Honeycutt, Jerry, Special Edition Using HTML 4.0,

Maximillan Computer Publishing, 1998
[5] Mat Publishing Limited, Developer Network Journal,

1998, 1999 collection
[6] Miller Freeman, Inc., Microsoft Corp., Microsoft

Internet Developer Journal,
1998, 1999 collection
Cuvînt înainte
Aplicaţiile distribuite sînt de o bună perioadă de timp o prezenţă uzuală în peisajul IT

chiar şi din ţara noastră. Ultimii ani au însemnat, de asemenea, şi paşi semnificativi şi
concreţi în impunerea Inter-netului în întreaga economie şi societate. Odată cu acesta,
aplicaţiile distribuite – care au ca suport Internetul şi tehnologiile dezvoltate pentru acesta şi
împreună cu el, au trecut de la stadiul de noutăţi tehnologice la cel de prezenţă reală în
comunitatea IT.
Procesul de educaţie a tinerilor specialişti IT simte nevoia plonjării în această realitate.
Tehnolo-gia Java, DHTML, tehnologia de scripting (Java Script, VB Script), bazele de date
distribuite în Inter-net şi accesul la ele, interfeţele utilizator flexibile, bazate pe browsere
capabile de performanţe din ce mai apropiate de necesităţi, tehnologia componentelor, toate
acestea sînt necesităţi stringente ale tehno-logiei IT şi, implicit, ale procesului educaţional
din acest domeniu.
În acest spirit am încercat să aduc în faţa studenţilor problematica fascinantă a lumii
distribuite, dar cooperante, dezvoltată de aceste tehnologii. Suportul acestei fascinaţii stă,
fară îndoială, în geniul şi viziunea celor care au făcut din Internet o comunitate.
Fundamentul acestei realităţi este, nu încape îndoială, limbajul HTML, cel care a făcut
posibilă explozia de comunicare actuală, cel care a adus aproape oameni, altfel atît de
diferiţi: de la cercetători la studenţi, de la oameni de ştiinţă la copiii care abia descoperă
computerul, dar care descoperă odată cu el Internetul.
Aceasta este prima parte a unui suport de curs la disciplina „Dezvoltarea aplicaţiilor
distribuite în Internet“, introdusă în acest an, la anul IV, în semestrul al doilea, la secţia de
calculatoare a Facultă-ţii de Automatică, Calculatoare şi Electronică din Craiova. Studenţilor
acestei facultăţi li se adresează, în primul rînd. Dimensiunea lucrării a fost determinată de
dorinţa de a pune la dispoziţia celor care au preocupări în acest domeniu a unui material cît
mai complet în limba română referitor la limbajul HTML. Versiunea descrisă aici este
HTML 4.0 şi este impusă de realitatea Web-ului începutului de an 1999.
Structurat în 8 capitole, prezentul suport de curs, prezintă gradual şi cît mai compet cu
putinţă limbajul HTML. Capitolul 1 face o scurtă prezentare a noţiunilor esenţiale legate de
Internet şi Web, iar Capitolul 2 o descriere generală şi o scurtă incursiune în istoria
limbajului HTML. Este partea intro-ductivă care este urmată apoi de capitolele ce descriu
structura unui document scris în HTML – Capi-tolul 3) şi elementele de bază utilizate în
documentele HTML – texte, legături, imagini (Capitolul 4). Capitolele 5, 6 şi 7 detaliază
modalităţile de utilizare a tabelelor, frame-urilor şi a formularelor inter-active, adică partea
mai avansată a limbajului HTML. Capitolul 8 prezintă, pe scurt, elemente mai deosebite ale
limbajului.
Reprezentînd doar fundamentul, prezentul suport de curs nu face decît să incite şi să
promită adevăratele performanţe ale tehnologiei Internetului. Va urma partea a doua a
acestui suport de curs care va acoperi (cel puţin) o parte dintre ele: Cascading Style Sheet,
Dynamic HTML, tehnologiile de scripting şi, bineînţeles, limbajul Java .
Acest suport reprezintă încununarea unei perioade de mare efort, dar extrem de
rodnice, perioadă petrecută de autor în Germania, la Fachhochschule Regensburg, iar
apariţia lui, în această formă, se sprijină pe sprijinul material oferit de Uniunea Europeană
prin programele Tempus.
Un gînd plin de recunoştiinţă, profesorului Oleg Cernian, coordonatorul Programelor
Tempus din Facultatea de Automatică, Calculatoare şi Electronică, al cărui merit în
dezvoltarea Catedrei de Calculatoare devine, odată cu trecerea timpului, tot mai clar şi mai
evident.
Craiova, martie 1999 Autorul

Capitolul 1.
INTERNET şi World Wide Web
1.1. Introducere
Ce este Internetul?
Internetul a fost descris ca „o colecţie largă de reţele“ sau ca o „reţea de reţele“. Deşi
ambele definiţii sînt corecte, nici una nu surprinde Internetul în totalitatea sa. Pe lîngă
instrumentul care este această imensă conexiune, Internetul înseamnă şi mulţimea
comunităţilor celor ce îl folosesc, fiecare în scopuri diferite:
 comunitatea academică utilizează Internetul ca pe cel mai mare, complet şi
totodată complex instrument de învăţare (educaţional);
 comunitatea ştiinţifică utilizează Internetul ca pe un instrument de cercetare şi
colaborare;
 comunitatea economică utilizează Internetul ca pe un mediu de derulare al
afacerilor.
Internetul nu este o organizaţie monolitică, avînd o conducere şi un grup de control unice;
Internetul este o societate de reţele de calculatoare interconectate, independente dar care
(din anumite motive) se supun unor protocoale globale.
Ce este World Wide Web (WWW, W3)
World Wide Web (WWW sau W3) este o reţea de resurse informaţionale de o
extraordinar de mare diversitate în ceea ce priveşte conţinutul. Este un sistem interactiv
hipermedia (adică un sistem ce conţine şi suportă patru categorii importante de tipuri de
informaţie: texte, imagini, sunete/audio şi imagini video în mişcare) construit peste
Internet.
Pentru a face aceste resurse disponibile (utilizabile) unei audienţe cît mai largi, Web-ul se
sprijină pe 3 mecanisme fundamentale:
1. O schemă uniformă de denumire (de stabilire a numelor, naming scheme)
pentru a localiza resursele în Web (de exemplu URI).
2. Protocoale pentru accesarea resurselor astfel denumite în Web (de exemplu
HTTP)
3. Hypertextul pentru navigarea comodă de la o resursă la alta (între resurse).
Elementele fundamentale ale WWW sînt prezentate în figura următoare:
World Wide Web este cel mai vizibil instrument Internet, transformîndu-l (prin
capacităţile sale de a prezenta informaţiile) în cel mai important instrument al zilelor
noastre şi într-o sursă de informaţii fără egal. Web-ul poate fi utilizat pentru căutarea de
informaţii despre produse, transferul de software şi versiuni noi ale acestuia, păstrarea
unor colecţii de informaţii de orice fel de tip (de exemplu de ziare), în general pentru
aflarea unor informaţii despre orice tip de informaţie imaginabilă.
1.2. Resursele World Wide Web
Unul din conceptele de bază - preluat şi acceptat şi în alte protocoale utilizate în Internet -
este cel de resursă. O resursă poate fi un program, un calculator, un document, o bază de
date, un serviciu - nu prea are importanţă, atît timp cît poate fi referită în mod corect şi
fără echivoc. Pentru referirea la o resursă din Internet, se foloseşte termenul generic URI
(Universal Resource Identifier) care poate specifica fie o locaţie, caz în care se vorbeşte
de un URL (Universal Resource Locator) fie un nume, caz în care se vorbeşte de un
URN (Universal Resource Name).
Unei resurse i se aplică o metodă - iar pentru a specifica ce metodă se doreşte, ce date sau
parametrii suplimentari o completează pe aceasta, se face uz de mesaje.
Paradigma pe care se bazează protocolul este cea de cerere/răspuns. Cererea este emisă
de un client; acesta stabileşte o conexiune cu un server şi îi trimite acestuia o cerere, sub
forma unei metode. Metoda se referă la o anumită resursă, identificată via URI; mai
trebuie adăugate versiunea de protocol utilizată şi un mesaj de tip MIME care să conţină
parametrii metodei, informaţii relative la client şi un eventual “conţinut” suplimentar.
Serverul vă răspunde cu o linie de stare, incluzînd versiunea de protocol utilizată şi un
cod de succes sau eroare, la care se adaugă un mesaj de tip MIME conţinînd informaţii
relative la server şi eventual un “conţinut” suplimentar.
Acest posibil conţinut suplimentar este de regulă o entitate - o reprezentare particulară a
unor date necesare în cerere sau în răspuns, şi este structurat într-un antet (header)
conţinînd metainformaţii relative la date (o descriere a felului în care trebuie citite datele)
şi datele propriu-zise, care formează corpul entităţii.
1.3. Adresarea unei resurse în Web

Adresarea unei resurse via http se face prin construcţii (şiruri de caractere) de forma
http://adresa_host_in_retea[:port]/cale/subcalel/.../subcalen/nume_docu
ment
http: specifică tipul protocolului; el trebuie precizat dat fiind faptul că http nu este
singurul protocol prin care poate fi accesată o anumită resursă din Internet.
adresa_host_in_retea (de exemplu www.xxx.ro sau www.stpt.com) identifică un server
sau un gateway din reţea, folosind adresarea uzuală de tip DNS (Domain Name Service)
din Internet:
numehost.subdomeniul.subdomeniu2..subdomeniun.domeniu_de_bază
Deci www.xxx.ro s-ar citi “serverul www din subdomeniul xxx din domeniul de bază ro.
:port poate lipsi, ceea ce înseamnă că se presupune implicit că se face referinţă la portul
standard, 80. Dacă se specifică un alt port, se va adresa acesta.
Cale/subcalel/.../subcalen/nume_document identifică calea absolută pînă la documentul
identificat de nume_document de pe serverul respectiv. Nu întotdeauna însă resursa
referită este un document! Poate fi o fracţiune dintr-un document, caz în care se face
referire la fragmentul respectiv:
Cale/subcalel/.../subcalen/nume_document#capitolul2paragraful3
Sau, mai general, poate fi un program căruia trebuie să i se paseze cîţiva parametri şi o
anumită cerere:
Cale/subcalel/.../subcalen/nume_program;paraml;param2;...;paramn?cerere
Exemplu:
Următoarea referinţă
http://guaraldi.cs.colostate.edu:2000/cgi-bin/savvyfrontend?KW=cuvînt_cheie &
classic=on & tl=x & Boolean=AND & Hits=10 & Mode=MakePlan & df=normal &
AutoStep=on.
se va citi http://guaraldi.cs.colostate.edu:2000 ne spune că se va face o conexiune via
http cu serverul guaraldi.cs.colostate.edu, utilizînd portul 2000 al acestuia. Pe acest
server se va adresa programul savvy-frontend din directorul cgi-bin/, căruia nu i se
pasează alţi parametri decît cei incluşi în felul în care a fost formulată cererea:
KW=cuvînt_cheie & classic=on & tl=x & Boolean=AND & Hits=10 &
Mode=MakePlan & df=normal &A utoStep=on.
Specificarea unei resurse nu trebuie să fie totdeauna absolută, ca în exemplul dat. Dacă
ne-am plasat deja într-un subdirector oarecare al unui server, se pot folosi adrese relative,
care omit calea pînă în acel director: “subcalel/subcale2/.../subcalem/nume_resursa” sau
chiar pur şi simplu “nume resursă”, dacă resursa se află în acelaşi director.
În HTML adresarea URI se foloseşte pentru:
 crearea unei legături spre un alt document sau spre o altă resursă (a se vedea
elementele A şi LINK)
 crearea unei legături spre un stil de pagină (style-sheet) extern sau spre un script
aflat într-un fişier sursă extern (a se vedea elementele LINK şi SCRIPT)
 Includerea într-o pagină a unei imagini, a unui obiect sau a unui applet (a se vedea
elementele IMG, OBJECT, APPLET şi INPUT).
 crearea unei imagini senzitive (a se vedea elementele MAP şi AREA).
 transmiterea unui formular interactiv (a se vedea elementul FORM).
 crearea unui document cu frame-uri (a se vedea elementele FRAME şi IFRAME).
 citarea unei referinţe externe (a se vedea elementele Q, BLOCKQUOTE, INS şi
DEL).
 referirea unor conveţii de metadate care descriu un document (a se vedea elementul
HEAD).
1.4. Elementele conexiunilor în spaţiul WWW

În cazul cel mai simplu, legătura dintre client şi server se realizează prin intermediul unei
singure conexiuni. De foarte multe ori însă, este posibil să existe mai mulţi intermediari
în conexiune. Aceştia pot fi de trei feluri: proxy, gateway sau tunnel.
Un proxy este un intermediar sofisticat: el primeşte cererile adresate unei resurse
identificate printr-un URI, rescrie anumite părţi ale mesajului sau chiar tot mesajul, după
care va transmite mesajul modificat către serverul adresat iniţial. Cu această ocazie el se
şi substituie clientului iniţial: răspunsul îi va veni tot lui, iar proxy-ul va face probabil o
rescriere a mesajului de răspuns către client. Dinspre server, nu se mai “vede” cine este
clientul adevărat: toţi clienţii ce trec prin proxy sînt “ascunşi”, serverul primind numai
cereri de la proxy. Acesta poate face în plus, într-un singur loc, o serie de verificări,
relative la autentificare, securizare etc., care ar fi greu de implementat pe multe şi diverse
maşini - toate calculatoarele client care trec prin acel proxy. Un proxy reprezintă înspre
restul lumii un grup de clienţi, putîndu-i trata pe aceştia diferenţiat.
Un gateway este similar unui proxy, dar pe partea de server. Este un receptor, un fel de
“cameră de primire” pusă în faţa unui server sau a unui grup de servere. Serverele “de
după gateway nu se văd în restul lumii - ele sînt, toate, reprezentate de gateway. Cererile
sosite la gateway sînt dirijate către serverele corespunzătoare cererii (sau către serverul
cel mai liber, de exemplu, dacă faptul că există mai multe servere vine din dorinţa de a
disponibiliza mai multă putere de calcul). De regulă are loc şi o conversie de protocol,
înspre protocolul pe care îl cunoaşte sau îl foloseşte un anumit server, care nu mai este
obligat în felul acesta să “cunoască” http.
Un tunel este un intermediar neinteligent: el transportă date pe care nu le înţelege sau
interpretează în nici un fel între două conexiuni. Nu are loc nici un fel de schimbare a
mesajelor, decît temporar, trecînd printr-o formă intermediară, între intrarea în şi ieşirea
din tunel; conţinutul mesajelor nu se schimbă.
În cazul unei conexiuni mai complexe, o situaţie comună ar putea fi cea din figura
următoare:
O cerere sau un răspuns care parcurge drumul din figură va traversa patru conexiuni.
Acest lucru trebuie avut în vedere; există unele opţiuni relative la comunicaţie care se
referă numai la primul vecin, dacă acesta nu se află în spatele unui tunel, altele care se
referă numai la punctele finale ale conexiunii iar altele care se pot referi la toate
conexiunile de pe traseu.
Iar dacă diagrama simplificată de mai sus este lineară, nu trebuie uitat faptul că fiecare
participant poate fi angajat simultan în comunicaţii multiple. Proxy-ul din figură poate
lucra deodată cu mulţi clienţi, care se adresează la mai multe servere şi care pot fi găsiţi
prin conexiuni diferite.
Oricare dintre participanţii la conexiune cu excepţia tunelului poate face uz de un cache
intern care să scurteze drumul unui ciclu cerere/răspuns. Exemplul anterior ilustrează şi
drumul unei cereri care s-a mai făcut o dată de către client, dar se află încă în cache-ul
proxy-ului:
Desigur, nu toate răspunsurile se pretează la a fi păstrate un timp în cache (pe ideea că
“poate mai cere cineva acelaşi lucru”); pe de altă parte, cererile de la clienţi pot formula
anumite opţiuni specifice relative la cache (“nu accept decît răspunsuri de la server
direct”, “nu accept răspunsuri memorate mai mult de x minute”, etc.)
1.5. Protocolul HTTP
1.5.1. Introducere generală

Este un protocol la nivel aplicaţie destinat sistemelor de informare distribuite,
“colaborative“, de genul hypermedia. Apărut ca protocol de bază pentru WWW încă din
1990, a cunoscut o serie de transformări, o versiune “finală” neexistînd nici în prezent.
Versiunea cea mai folosită este încă 1.0, iar versiunea 1.1 - compatibilă “în jos” cu 1.0,
dar aducînd îmbunătăţiri în special în direcţia folosirii mai eficiente a resurselor - este pe
cale să se impună ca nou standard. De aceea, o parte din aspectele care urmează nu
trebuie privite ca referinţe “bătute în cuie”, ci ca instantanee ale unei specificaţii pe cale
să se nască, extrase dintr-o schiţă, un “draft” care poate se va mai schimba mult.
Numele este acronimul pentru HyperText Transfer Protocol, deşi la origine “hypertext”
a fost definitoriu, practica curentă l-a dus destul de repede înspre “hypermedia” -
documentele vehiculate cuprinzînd nu numai text, ci şi sunet, imagine sau informaţii
structurate.
Aplicaţiile care folosesc protocolul - cei doi parteneri în discuţie, cele două capete ale
unei conexiuni - sînt entităţi abstracte din punct de vedere al protocolului. Ele trebuie
“doar” să poată comunica între ele ceea ce înseamnă, în principiu, posibilitatea de a primi
sau formula cereri şi de a formula sau recepţiona răspunsuri, ca în celebrul exemplu al
filozofilor ce vorbesc două limbi diferite, folosind pentru comunicare translatorii care
trimit mesajele filozofilor (traduse) prin intermediul poştaşilor. Nici un nivel nu se
preocupă de celălalt.
FILOZOFII
TRANSLATORII
POŞTAŞII
Cererile formulate în protocolul HTTP se referă la informaţii care se pot afla stocate în
diverse baze de date, în diverse formate, pe diverse calculatoare. Cum anume se traduc în
cereri “concrete” date diferite, este o problemă care depăşeşte protocolul: sarcina lui este
doar să fixeze regulile care trebuie respectate de cele două aplicaţii participante la un
moment dat în comunicare pentru ca să se poată înţelege fără nici un fel de risc de
interpretare eronată a unei cereri sau a unui răspuns.
1.5.2. Mesajele protocolului HHTP

Atunci cînd se transferă „ceva“ utilizînd WWW se specifică o resursă: serverul căruia am
vrea să-i adresăm cererea, ce conţine aceasta, cu ce protocol lucrăm. Pentru ca această
cerere să ajungă la server trebuie să trimitem un mesaj care să conţină şi resursa
specificată mai sus. Mesajul va conţine un şi r de caractere de forma:
GET specificare_resursă HTTP/1.1 CRLF
Forma generală a unui mesaj de cerere este conformă schemei de mai sus:
Metodă resursă versiune_protocol CRLF
Versiunea de protocol trebuie specificată deoarece nu toate serverele au implementat
ultima versiune sau nu toţi clienţii o cunosc. Deci, pentru ca totuşi un server “deştept” să
se poată înţelege şi cu un client mai puţin dotat, sau invers, şi fără a renunţa la
posibilităţile introduse de versiunile (mereu mai) noi ale protocolului, trebuie să se
realizeze mai întîi o negociere între server şi client, relativ la ce ştie fiecare şi abia apoi să
se desfăşoare transferul propriu-zis de date.
1.5.3. Metodele protocolului HHTP

Metodele sînt de fapt operaţiile care pot fi aplicate obiectelor constituite de resursele din
reţea, în accepţiunea protocolului HTTP. Metoda va trebui să fie totdeauna primul
element dintr-o linie de cerere. Metodele prevăzute în versiunea 1.1 sînt următoarele:
OPTIONS, GET, HEAO, POST, PUT, PATCH, COPY, MOVE, DELETE, LINK,
UNLINK, TRACE, WRAPPED.
OPTIONS semnifică o cerere relativă la informaţiile ce definesc opţiunile de comunicare
disponibile pe conexiunea către URI-ul specificat în cerere. Metoda permite determinarea
opţiunilor şi/sau posibilităţilor unui server, fără să determine o acţiune din partea resursei
adresate.
Şi metoda are nevoie de parametri, nu numai resursa, iar în HTTP termenul consacrat
pentru parametrii metodelor este “header field” sau “antet de cîmp”. Definite în cadrul
protocolului pentru fiecare metodă, antetele de cîmp pot avea valori care la rîndul lor sînt
definite (dar nu limitate, extensiile fiind în principiu totdeauna posibile).
Exemplu:
O cerere de tipul
OPTIONS www.xxx.ro HTTP1/1 CRLF Accept: audio/*; q=0.2, audio/basic
CRLF
reprezintă o cerere de definire a opţiunilor către serverul www.xxx.ro, în care clientul
solicitant spune că preferă audio/basic, dar acceptă orice tip pentru date audio în cazul
în care calitatea reprezentării nu scade sub 20%.
Exemplu:
Iar o cerere de genul
OPTIONS www.xxx.ro HTTP1/1 CRLF Accept: text/plain; q=0.5, text/html,
text/x-dvi;
q=0.8; mxb=100000, text/x-
c CRLF
specifică următoarele preferinţe relative la modul de reprezentare al textului: x-c sau
html, dacă sînt disponibile; dacă nu, x-dvi, dar numai dacă textul nu depăşeşte 100000
de octeţi, sau plain altfel.
Virgula separă opţiuni posibile, punct-virgulă separă determinările sau preferinţele
suplimentare relative la o anumită opţiune.
GET este una dintre cele mai importante metode şi singura care era disponibilă în prima
versiune a protocolului, HTTP/0.9. GET este metoda care “aduce” ceva de la resursă; mai
concret, dacă resursa este un proces care produce date (o căutare de pildă), răspunsul la
metoda GET va fi o entitate care să cuprindă acele date. Răspunsul este unul singur:
aceasta este o caracteristică de bază a protocolului. Chiar dacă volumul de date care
trebuie incluse în răspuns este mare, nu se face o fracţionare în bucăţele mai mici, care să
permită transferul mai uşor al răspunsului. Din punct de vedere al protocolului HTTP,
discuţia este totdeauna simplă: o întrebare are un răspuns. Nu se pot pune mai multe
întrebări pentru a obţine un singur răspuns, nu se pot formula mai multe răspunsuri la o
întrebare.
Există totuşi două posibilităţi de a micşora volumul de date care să circule pe reţea în
urma elaborării unui răspuns; o condiţionare de genul “dacă s-a schimbat ceva” şi
posibilitatea de a prelua numai o parte din acesta. De exemplu, o cerere de genul:
GET www.xxx.ro/?cerere HTTP/1.1 If-Modified-Since: Wed, 24 Mar 1999 1:00:00
GMT
va aduce ceea ce s-a cerut numai dacă s-a modificat ceva după data şi ora specificate în
parametrii metodei.
HEAD este o metodă similară cu GET, folosită în principiu pentru testarea validităţii
şi/sau accesibilităţii unei resurse, sau pentru a afla dacă s-a schimbat ceva. Sintaxa este
similară metodei GET; spre deosebire de GET însă, datele eventual produse de resursă în
urma cererii nu sînt transmise; doar caracteristicile acestora, şi un cod de succes sau
eroare. Ceva de genul “dacă ţi-aş cere să execuţi cererea mea, ce mi-ai răspunde?”.
POST este metoda prin care resursei specificate în cerere i se cere să îşi subordoneze
datele incluse în entitatea care trebuie să însoţească cererea. Cu POST se poate adăuga un
fişier unui anumit director, se poate trimite un mesaj prin poştă electronică, se poate
adăuga un mesaj unui grup de ştiri, se pot adăuga date unei baze de date existente, etc.
Metoda POST este generală; care sînt procesele pe care un anumit server le acceptă sau
cunoaşte îi sînt strict specifice.
PUT este o metodă care cere serverului ceva mai mult decît POST: să
stocheze/memoreze entitatea cuprinsă în cerere cu numele specificat în URI. Dacă resursa
specificată există deja, entitatea nouă trebuie privită ca o versiune modificată care ar
trebui să o înlocuiască pe cea existentă. Serverul, bineînţeles, va accepta sau nu această
cerere, funcţie de drepturile de acces pe care i le-a acordat clientului, şi va răspunde
cererii cu informaţii corespunzătoare (“s-a făcut”, “nu pot”, “nu ai voie să faci treaba
asta” etc.). Pentru a evita situaţii care să ducă la încărcarea excesivă si nejustificată a
reţelei - de exemplu, un client care vrea să “posteze” un text de 10 MB, fără să ţină seama
de faptul că serverul nu mai are atît loc atît o cerere de tipul POST cît şi una de tipul PUT
se desfăşoară în doi timpi: întîi, clientul trimite numai parametrii metodei, fără să trimită
datele efective pe care le vrea postate. După care aşteaptă 5 secunde. În acest timp, dacă
serverul răspunde, clientul ia în seamă şi analizează răspunsul serverului (iar dacă acesta
este “nu mai am loc”, datele nu se mai transmit). Dacă nu soseşte nici un răspuns în
timpul de aşteptare, se consideră implicit că serverul acceptă datele şi acestea sînt
transmise de către client.
PATCH este o metodă similară lui PUT, dar nu conţine toate datele care să definească
resursa, ci numai diferenţele faţă de versiunea existentă pe server. Cu toate informaţiile
necesare care să îi permită serverului să reconstruiască o versiune la zi a resursei.
COPY, MOVE şi DELETE sînt metode prin care se cere ca resursa specificată în URI-
ul din cerere să fie copiată în locaţiile specificate ca parametri pentru metodă, mutată
acolo sau respectiv doar ştearsă.
LINK şi UNLINK sînt metode prin care resursa specificată în cerere este
legată/dezlegată de alte resurse, stabilind una sau mai multe relaţii cu acestea din urmă,
specificate ca parametrii pentru metodă. Ar putea fi de exemplu un index pentru o bază
de date, un cuprins pentru un set de documente, etc.
TRACE este o metodă care îi permite clientului să vadă cum ajung cererile sale la server,
pentru a verifica/diagnostica conexiunea, pentru a se verifica pe sine sau pentru a
determina felul în care eventualele proxy-uri de pe parcurs au modificat cererea iniţială.
Serverul, în răspuns la această cerere, va trimite în ecou cererile care îi vin de la client,
fără să le mai trateze ca cereri “reale”.
WRAPPED este o metodă care “contrazice” principiul protocolului de a trimite
totdeauna o singură cerere şi a aştepta un singur răspuns. Via WRAPPED, mai multe
cereri, care în mod obişnuit ar fi succesive, sînt “împachetate” într-una singură. Iar o altă
aplicare a metodei ţinteşte măsuri de securizare - o cerere poate fi cifrată şi transmisă prin
metoda WRAPPED, ceea ce va determina serverul să acţioneze în doi paşi: întîi să
descifreze cererea reală, iar apoi să îi dea curs acesteia.
Capitolul 2.
Descriere generală a limbajului HTML
2.1. Introducere, istorie, versiuni
Ce este HTML?
Limbajul a fost dezvoltat iniţial de oamenii de ştiinţă ca o unealtă utilizată la partajarea
documentelor (rapoarte de cercetare, documentaţii, etc) în întreaga comunitate ştiinţifică
internaţională care utiliza (şi utilizează) Internetul. Pentru a publica informaţii care să fie
distribuite global în Internet este necesar un limbaj universal de descriere a acestora (o
„mamă a tuturor limbajelor de publicare“), limbaj care să fie potenţial înţeles de toate
computerele din Internet. Limbajul folosit de World Wide Web este HTML.
HTML se aseamănă cu modalităţile de formatare a textelor de la un procesor de texte
uzual în sensul că adaugă textului ce se doreşte a fi publicat (afişat) informaţii de
formatare şi permite înglo-barea şi altor tipuri de informaţii (imagini, sunete, etc). Toate
acestea indică modul de afişare (prezentare) pentru programele capabile să înţeleagă
aceste informaţii. Ceea ce îl deosebeşte de toate celelalte formate ale procesoarelor de
texte este faptul că un document HTML este un document ce conţine informaţie în format
„text-pur“ (numai caractere ASCII), în timp ce procesoarele de texte folosesc formate
particulare (proprietare). Astfel, un document HTML poate fi afişat (prezentat) de un
număr mare de programe (browsere Web) care rulează pe un mare număr de platforme.
Documentele HTML pot fi create cu un editor de texte (document salvat ca „text only
with line breaks“) sau cu editoare HTML care permit crearea vizuală (WYSIWYG) a
documentelor HTML, rezultînd însă tot documente în format text pur.
Limbajul HTML dă autorilor posibilitatea:
 să publice documente cu headere, texte, tabele, liste, fotografii, etc...
 să regăsească on-line informaţii prin intermediul hiperlink-urilor accesate printr-
un simplu click de mouse
 să proiecteze formulare pentru realizarea tranzacţiilor cu servere aflate la distanţă,
pentru căutari de informaţie sau pentru activităţi specifice comerţului
 să includă foi de calcul tabelar, clipuri video, sunete şi alte aplicaţii direct în
documente
Caracteristicile limbajului HTML.

HTML are patru caracteristici principale:
Foloseşte un „marcaj“ descriptiv pentru a indica diversele acţiuni („instrucţiuni“) ce
trebuie executate. Aceasta înseamnă că părţi ale documentului descris de HTML sînt
„marcate“ cu nume descriptive, ca de exemplu <CHAPTER> sau <TITLE> care sînt
aplicabile oricărei porţiuni de date corespunzătoare din document.
Defineşte structuri de documente ierarhice şi (hyper)legături intra- şi inter-documente. O
legătură (sau interconexiune) este o relaţie unară între două elemente ale unui
document. Structura unui document este însoţită de astfel de legături între elementele
sale.
Limbajul HTML este guvernat de o descriere formală. HTML are o descriere a tipului
documentului (Document Type Definition DTD) care stabileşte specificaţiile formale
ale limbajului. DTD defineşte sintaxa limbajului, descrie fiecare element individual al
unui document scris în limbajul HTML, defineşte atributele permise pentru fiecare
element şi descrie modelul datelor conţinute în fiecare element (adică stabileşte care
alt element, dacă este vreunul, poate să apară într-un element). În corelaţie cu
informaţiile despre elemente, DTD oferă definiţii pentru entităţile externe ce pot fi
referite în HTML (de exemplu, setul de caractere ISO-Latin-1 folosit pentru a
reprezenta caracterele pe ecranul unui display).
Atît specificaţiile limbajului cît şi limbajul însuşi pot fi „citite“ (interpretate) şi de om
dar şi de computer. Datorită faptului că elementele de marcare sînt separate de text
prin şiruri de delimitare alcătuite din caractere tipăribile, textul şi marcajele pot
coexista „în pace şi înţelegere“ atît pentru om, cît şi pentru computer.
De ce HTML?
HTML este un limbaj bazat pe SGML (Standard Generalized Markup Language), o
aşa-numită aplicaţie a acestuia. SGML este un standard internaţional (ISO-8879) aprobat
în 1986.
SGML oferă o modalitate de a reprezenta structura documentelor şi hyper-documentelor.
Este totodată şi o cale de a codifica hyper-documentele astfel ca acesta să poată fi
interschimbate asemănător procesului de interschimbare a unor documente în cazul mai
multor autori care colaborează utilizînd platforme diferite aflate la distanţă.
SGML este un sistem complex de descriere a documentelor. Este utilizat pentru
descrierea structurii generale a diferitelor tipuri de documente fără să fie un limbaj de
descrierea a paginii (cum este PostScript). Principala preocupare a SGML (şi prin urmare
şi a HTML care a fost preferat pentru publicaţiile pe Web fiind mai simplu) se răsfrînge
asupra conţinutului documentului, nu asupra aspectului lui.
Deci, în virtutea trăsăturilor moştenite de la SGML, HTML este un limbaj pentru
descrierea documentelor structurate. Teoria din spatele acestui limbaj se bazează pe
faptul că majoritatea documentelor au elemente comune (de pildă: titluri, paragrafe sau
liste) şi că dacă defineşti un set de elemente, poţi marca elementele documentului cu tag-
urile corespunzătoare.
Majoritatea tag-urilor HTML arată de forma: <NumeTag> Textul afectat de tag
</NumeTag> şi indică navigatorului elemente de structura documentului, formatare,
hypertext sau alte elemente (imagini, fişiere sonore, etc). Documentele HTML conţin
doar textul propriu-zis şi tag-urile HTML iar sursa lor poate fi uşor văzută din orice
navigator.
Diferenţa majoră dintre procesoarele de texte şi procesoarele HTML este că acesta din
urmă nu se preocupă de cum anume vor apărea pe ecran elementele (marcate ale)
documentului. Cu foarte puţine excepţii, HTML nu descrie modul de prezentare al
documentului ca un întreg (layout). HTML oferă (deocamdată) un suport redus în
stabilirea plasamentului sau felului în care vor fi afişate elementele documentului.
Proiectanţii HTML au ales intenţionat această variantă. Motivul este simplu. Deoarece nu
cunoaştem posibilităţile platformei pe care va fi văzut documentul (dimensiunea
ecranului, fonturile instalate, etc), prin separarea structurii documentului de felul în care
este afişat se oferă o mai mare libertate programului care înţelege HTML şi afişează
documentul. Acesta poate să ia hotărîri privind formatarea documentului pe baza
posibilităţilor platformei respective. Este ceea ce fac navigatoarele Web, în afara
funcţiilor de comunicare şi aducere a documentelor de pe Net.
Cînd navigatorul încarcă un document HTML, el „citeşte“ documentul în căutarea tag-
urilor HTML, formatează textul şi imaginea şi le afişează pe ecran. Este motivul pentru
care acelaşi document HTML apare uşor diferit cînd este privit cu navigatoare diferite.
Deşi în această fază de dezvoltare posibilităţile de formatare oferite sînt încă destul de
limitate, oferind un control destul de redus asupra formei documentului, avantajul
faptului că documentele pot fi transferate şi văzute oriunde pe Net, independent de
platformă şi de navigator, a condus la răspîndirea sa foarte rapidă.
Orice versiune a HTML include elemente cum ar fi: text centrat sau aliniat dreapta,
tabele, formule matematice, aliniere imagine şi text. Extensiile, care au apărut în număr
mare în ultima vreme, sînt seturi de tag-uri HTML introduse de diverse companii (în
general cele producătoare de navigatoare) care permit autorilor de documente HTML să
evite o parte din constrîngerile standardului. Cele mai răspîndite sînt extensiile Netscape
şi Internet Explorer.
Dar de ce a fost preferat HTML pentru publicaţii pe Web, cînd pentru realizarea
publicaţiilor electronice există mai multe tehnologii? Primul motiv este simplitatea. Al
doilea este că permite formatarea textului ASCII cu tag-uri în format ASCII. Rezultă de
aici o compresie bună, suport pentru legături hypertext şi uşurinţă în a scrie navigatoare
pentru vizualizarea documentelor.
Istoria HTML.
Născut în urmă cu aproximativ 30 de ani, într-o tentativă de a rezolva unele probleme
ivite la transportul documentelor între diferite computere, limbajul hypertext a evoluat
încet. HTML din prima generaţie este înţeles de primele navigatoare (modul text).
Nivelul 1 este obligatoriu pentru toate navigatoarele şi înseamnă posibilitatea de a
interpreta (hyper)text plus imagini. Nivelul 2 (HTML 2.0) a adus o contribuţie deosebită
la realizarea unei interactivităţi reale prin intermediul formularelor (forms). HTML 3.0
(cunoscut anterior ca HTML+) aduce în plus tabelele, formatarea paragrafelor (alinieri
stînga, centru şi dreapta), curgerea textului pe lîngă imagini, tabele, formule matematice,
taburi, note şi o mulţime de alte trăsături în aparenţă de mai mică importanţă dar care fac
munca cu HTML mult mai plăcută. Cele mai importante modificări şi îmbunătaţiri sînt
aduse însă de HTML 4.0, versiune care îmbunătăţeşte totodată şi conceptele de
accesibilitate şi structuralitate a limbajului de marcare. Informaţii despre dezvoltarea
HTML se pot prelua de la adresa: http://www.w3.org
Limbajul HTML a fost dezvoltat iniţial de Tim Berners-Lee la Laboratorul European
pentru Fizica Particulelor (CERN) şi popularizat de browser-ul Mosaic dezvoltat la
NCSA şi a beneficiat de explozia Web-ului din anii 90. În această perioadă HTML-ul s-a
dezvoltat în multiple direcţii, dar era dependent de autorii paginilor HTML şi
producătorilor de echipamente care, deşi foloseau aceleaşi convenţii pentru limbaj, aveau
implementări incompatibile. De aceea s-a impus ca o necesitate absolută standardizarea
HTML-ului într-un efort global al întregii comunităţi a Internetului. Şi acum HTML este
un limbaj marcat de un deosebit dinamism, standardizarea diverselor versiuni fiind însă
deosebit de anevoioasă datorită lipsei consensului.
Organismul care „guverna“ protocolul TCP/IP („fundamentul“ Internetului), standardele
arhitecturale ale Internetului, precum şi reţeaua Internet a Statelor Unite era în acea
perioadă IAB – Internet Arhitecture Board, cunoscut la începuturile sale ca Internet
Activities Board. Acesta delega responsabilităţile de dezvoltare, operare şi management a
Internetului şi a protocoalelor şi serviciilor legate de acesta unor subcomitete, grupuri de
lucru şi organizaţii de lucru pe care le controla. În plus avea contracte cu companii
comerciale specializate în comunicaţii pentru gestionarea infrastructurii Internetului.
Subgrupul care se ocupa (şi se ocupă şi acum) cu dezvoltarea şi implementarea
protocoalelor este IETF - Internet Engineering Task Force. Acesta este alcătuit dintr-un
comitet director (care raportează la IAB) şi o serie de grupuri de lucru, fiecare dintre
acestea responsabile cu un anumit protocol sau serviciu aflat în dezvoltare sau întreţinere.
Grosul activtăţii de dezvoltare şi standardizare a protocoalelor este astfel realizat de
aceste grupuri de lucru din cadrul IETF.
Documentele care specifică aceste protocoale şi servicii sînt numite Request for
Comments, mai cunoscute sub numele de RFC. Acestea primesc coduri numerice prin
intermediul cărora sînt referite ulterior. Chiar dacă numele sugerează o „solicitare de
comentarii“ asupra unui subiect (ceea ce constituie, de altfel, şi modalitatea principală de
dezvoltare a acestor documente – prin intermediul comentariilor, propunerilor şi
discuţiilor membrilor comunităţii Internetului), RFC-urile standard (care se numesc...
Recommendation) au putere de lege (decret) în cadrul comunităţii Internet (TCP/IP).
Aceste documente (standardele) reprezintă doar o parte din întreaga colecţie de RFC-uri,
dar practic dictează cum trebuie să se comporte un protocol şi ce funcţii trebuie să
realizeze. În timpul dezvoltării RFC-urile se numesc RFC Working Drafts.
Dacă un protocol (sau produs) nu se conformează unui RFC standard, atunci cel ce îl
dezvoltă riscă să piardă contactul (şi contractele) cu organismele ce aparţin de
Departamentul Apărării al SUA, precum şi cu toate celelalte organisme şi organizaţii care
le adoptă şi le respectă (ceea ce este echivalent cu excluderea din competiţia economică).
În orice dispută din cadrul Internetului RFC-urile şi IETF sînt autorităţile supreme.
RFC-urile se pot obţine de pe site-ul ds.internic.net (organizate după numărul ataşat
fiecărui RFC) sau de pe alte site-uri care oferă posibilităţi extinse de căutare/prelucrare,
cum ar fi, de exemplu, site-ul de la adresa http://www.cis.ohio-
state.edu/hypertext/information/rfc.html.
Organismul care se ocupă (şi) cu standardizarea limbajului HTML (din noiembrie 1995)
se numeşte „The World Wide Web Consortium (W3C)“ şi include CERN, universitatea
MIT (Cambridge, Massachusetts), precum şi alte organizaţii. În afara HTML, W3C are
„custodia“ şi a protocolului HTTP, precum şi a altor produse şi standarde ce se referă la
Web.
Filozofia W3C se bazează pe promovarea interoperabilităţii în World Wide Web. Aceasta
necesită standarde. Aprobarea şi în special acceptarea unui standard este însă un proces
extrem de mare consumator de timp, cu atît mai mult cu cît ambiţiile sînt mai mari (ISO a
abandonat modelul celor 7 nivele după ce mulţi ani a încercat să-l impună). Plecînd de la
păţaniile predecesorilor, pionierii Webului au împămîntenit obiceiul de a-şi construi
singuri standarde şi nu de a le importa. Esenţa filozofiei W3C este implementată în
grupurile de lucru (Working Group), un comitet mic de specialişti care se întîlnesc sau
discută în teleconferinţe pînă la atingerea unui consens. W3C are 18 astfel de grupuri,
fiecare cu 18-25 membri provenind de la orice companie ce are interese în subiectul
abordat de respectivul grup. Se ajunge astfel ca rivalii să stea alături şi să coopereze,
conducînd în cele din urmă la o acceptare mult mai rapidă din partea pieţii. Durata de
viaţă a unui astfel de standard (unei specificaţii stabilită în acest mod) dă de fapt măsura
autorităţii organizaţiei W3C.0
Stadiile prin care trece un standard elaborat de W3C sînt:

 orice standard îşi începe aventura ca W3C Note
 de aici este preluat de către un grup particular de lucru (Working Group) şi este
discutat pînă cînd se atinge consensul
 în acest moment este publicat ca propunere (Working Draft) şi acum oricine poate
face comentarii
 în momentul în care se obţine o susţinere şi un consens suficient de larg, directorul
W3C (acum este Time Berners-Lee) decide dacă specificaţia este gata să devină
propunere de recomandare (Proposed Recommendation)
 urmează o perioadă de 6 săptămîni în care toţi membrii W3C au şansa să voteze
această propunere de recomandare; votul nu este obligatoriu şi se poate vota în 4
moduri diferite:
 da
 da, sub rezerva unor îmbunătăţiri
 nu, pînă cînd anumite sarcini nu sînt îndeplinite
 nu, specificaţia trebuie abandonată
 charta W3C stipulează necesitatea obţinerii consensului complet, astfel că fiecare vot
trebuie să fie un da fără rezerve
 dacă toţi paşii anteriori au fost îndepliniţi, specificaţia trebuie aprobată în final de
Director şi se publică sub forma unui standard (W3C Recommendation)
HTML 2.0 a fost publicat ca standard (versiune „oficială“) sub forma Request for
Comments RFC 1866 în noiembrie 1995 şi reprezintă eforturile de codificare şi
standardizare ale Internet Engineering Task Force. Poate fi preluat de la adresa
ftp://ds.internic.net/rfc/rfc1866.txt
A urmat apoi propunerea (draft) HTML 3.0 (în septembrie 1995), în mare măsură bazat
pe HTML+ (apărut în 1993) care, deşi nu a fost adoptată ca standard a dus la adoptarea a
numeroase îmbunătăţiri. Unul dintre motivele care au condus la neacceptarea draftului a
fost marimea considerată exagerată a acestuia. De aceea următoarele versiuni au fost şi
vor fi introduse într-un mod modular. Această versiune se poate prelua de la adresa
http://www.w3.org/MarkUp/html3/CoverPage. Ea a venit după ce Netscape începuse să
introducă o serie de noi taguri şi atribute care nu erau complet specificate (versiunea
aceasta de HTML fiind cunoscută sub numele de cod Mozilla), conducînd în acest fel la o
implementare neuniformă în alte browsere.
Eforturile grupului de lucru asupra HTML din cadrul World Wide Web Consortium din
această perioadă îndreptate spre eliminarea inconsistenţelor între specificaţiile diverselor
firme/browsere au avut ca rezultat apariţia standardului (cu numele de cod Wilbur)
HTML 3.2, în 11 ianuarie 1997, acestea putînd fi accesate la adresa
http://www.w3.org/TR/REC-html32. Împreună cu W3C au lucrat la aceste specificaţii
IBM, Microsoft, Netscape Communications Corporation, Novell, SoftQuad, Spyglass şi
Sun Microsystems. Această versiune este o aplicaţie SGML ce se conformează
standardului internaţional ISO 8879 ale cărui specificaţii se află la adresa
http://www.iso.ch/cate/d16387.html. Ca aplicaţie SGML, sintaxa documentelor este
definită de combinaţia dintre o declaraţie SGML (SGML declaration) şi definirea tipului
documentului (document type definition - DTD).
Versiunea HTML 4.0 a devenit o recomandare (standard) W3C la 18 decembrie 1997
(avînd numele de cod Cougar) şi poate fi accesată la adresa http://www.w3.org/TR/REC-
html40. Şi această versiune este o aplicaţie SGML ce se conformează standardului
internaţional ISO 8879 ale cărui specificaţii se află la adresa
http://www.iso.ch/cate/d16387.html. Ca aplicaţie SGML, specificaţia HTML 4.0 include
o declaraţie SGML (1 SGML declaration), trei definiţii ale tipului documentului (3
document type definition - DTD) şi o listă de referinţe la caractere. În momentul apariţiei
acestui standard, W3C recomandă autorilor producerea de documente HTML 4.0, dar
pentru motive evidente de compatibilitate cu versiunile anterioare, W3C recomandă
uneltelor ce interpretează şi suportă 4.0 să continue să suporte şi HTML 3.2, precum şi
HTML 2.0.
În ianuarie 1999 există şi propunerea (draftul) HTML 5.0.
Întreaga comunitate a Internetului este de acord că documentele dezvoltate cu HTML
trebuie să fie identice în diversele browsere şi pe diversele platforme ale Internetului.
Interoperabilitatea va asigura astfel costuri reduse furnizorilor (autorilor) de pagini
HTML (nu este nevoie decît de o singură versiune!), în caz contrar răspîndirea într-o
multitudine de formate particulare (şi proprietare ale unor firme) incompatibile reducînd
dramatic potenţialul (inclusiv comercial) al tuturor participanţilor. Fiecare nouă versiune
a încercat să reflecte un consens din ce în ce mai mare între participanţi, astfel ca
investiţiile făcute să nu fie irosite, iar documentele dezvoltate să devină imposibil de
folosit după o perioadă foarte scurtă de timp. Limbajul HTML se dezvoltă cu dorinţa ca
toate tipurile de computere şi diversele periferice ale acestora să poată folosi informaţia
de pe Web: PC-urile cu display-uri de diverse rezoluţii şi capabilităţi de redare a culorii,
periferice pentru cuplare prin intermediul vocii, telefoane celulare, etc...
Ce trebuie să facă un autor de pagini HTML?

HTML 4.0 este în acest moment (ianuarie 1999) standardul acceptat de comunitatea
Internet şi de către producătorii majori de browsere şi unelte de dezvoltare pentru Internet
(Netscape – cu browserul Navigator 4.x şi – cu browserul Microsoft Internet Explorer
4.x), primind suport aproape universal. W3C recomandă chiar autorilor de documente şi
unelte pentru HTML să producă documente HTML 4.0 în locul HTML 3.2, dar din
motive de compatibilitate (uşor de înţeles) se recomandă ca uneltele ce interpreteză
HTML 4.0 să suporte în continuare HTML 3.2 şi 2.0.
Bătăliile se dau în continuare pentru standardele legate de DHTML (CSS Level 2 şi
DOM). Chiar dacă modul în care a fost creată versiunea 4.0 şi soliditatea organismului
care a generat-o indică o mare stabilitate, Microsoft a făcut deja paşi importanţi pe cale
5.0 şi spre DHTML, urmată, aproape cu disperare, şi de către Netscape (la sfîrşitul anului
1998 cumpărată de AOL). Concluzia ce se poate desprinde este aceea că dinamismul
procesului nu poate fi „combătut“ decît printr-o permanentă informare de la organismul
care impune standardele (W3C) şi adaptare la cerinţele acestora.
Revoluţia HTML 4.0.

Elementul esenţial diferit adus de versiunea 4.0 faţă de versiunea 3.2 este posibilitatea
separării structurii unui document de prezentarea lui prin introducerea „stilurilor de
documente“ (style sheet). Utilizînd limbajul HTML pentru descrierea structurii unui
document şi style sheet-urile pentru a sugera prezentarea acestuia, autorii obţin mult mai
uşor independenţa de periferic/computer/platformă hard-soft care a făcut HTML-ul atît de
popular. Un document cu o structură complexă poate fi prezentat în diferite moduri pe
medii diferite, permiţînd documentului însuşi să se adapteze mai uşor noilor tehnologii
(cum ar fi, de exemplu, browser-ele capabile să vorbească, cititoarelor braille, etc.).
În plus separarea conţinutului de prezentare permite modificarea înfăţişării eventual chiar
a unui întreg site doar prin modificarea unui style-sheet (unui document care descrie
stilul). Experienţa a demonstrat că o astfel de abordare reduce dramatic costurile de
deservire a unui spectru larg de platforme, facilitînd şi o întreţinere şi modificare mult
mai uşoare.
Alte îmbunătăţiri semnificative aduse de 4.0 pot fi considerate şi:
I. Tehnologia client-side scripting.
Prin intermediul scripturilor autorii pot realiza pagini HTML dinamice (care reacţionează
la acţiunile utilizatorilor) sau se pot realiza aplicaţii distribuite. Mecanismul de includere
a scripturilor în paginile HTML este independent de limbaj. Se poate specifica limbajul
scriptului, se poate include un script extern sau se poate referi rezultatul execuţiei unui
script. Aceste scripturi se execută pe computerul care rulează browserul Web (clientul).
II. Documentele compuse
HTML oferă acum un mecanism standard pentru a îngloba obiecte generice şi aplicaţii în
documentele HTML. Elementul OBJECT permite includerea imaginilor, clipurilor video,
sunetului, formulelor matematice, aplicaţii specializate şi alte obiecte într-un document.
III. Internaţionalizarea
Această versiune a fost proiectată cu ajutorul experţilor în internaţionalizare, astfel încit
documentele pot fi scrise în orice limbă şi transportate uşor oriunde în lume. Elementul
cheie îl constituie adoptarea standardului ISO/IEC 10646 ca set de caractere pentru
HTML. Acest standard este cel mai complet standard ce permite reprezentarea oricăror
caractere internaţionale, direcţie a textului, punctuaţie sau cerinţe specifice ale unei limbi.
IV. Accesibilitatea
Odată cu creşterea diversităţii lumii Webului, s-au diversificat şi capabilităţile
utilizatorilor acestuia, astfel încît a devenit importantă suportarea diverselor tehnologii
pentru a suplinii unele limitări fizice.
V. Tabele îmbunătăţite
În această versiune se implementează un model de tabel, bazat pe RFC 1942. Autorii au
acum un control sporit asupra structurii şi paginaţiei. Sînt incluse posibilităţi de definire a
grupurilor de rînduri şi/sau coloane, mai mare flexibilitate în definirea regulilor unui
tabel. În plus afişarea tabelelor se face acum incremental, pe măsura încărcării paginii,
nemaifiind necesară aşteptarea încărcării integrale a tabelelor.
VI. Model îmbunătăţit de împărţire a unui document în frame-uri
Includerea frame-urilor în HTML 4.0 oferă posibilitatea de a prezenta documente
multiple într-o singură fereastră. Modelul este preluat din propunerea originală a firmei
Netscape.
VII.Imprimare îmbunătăţită a paginilor Web
Operaţia de imprimare a unui număr mai mare de pagini legate între ele poate fi
simplificată mult prin descrierea relaţiilor dintre ele utilizînd elementul LINK sau
limbajul specializat RDF (Resource Description Language) dezvoltat de W3C.
Validarea documentelor HTML.

Fiecare document trebuie validat în vederea eliminării erorilor cum ar fi lipsa
ghilimelelor, elemente sau atribute scrise greşit şi structuri invalide. Aceste erori nu sînt
întotdeauna vizibile în browsere deoarece fiecare le recuperează într-un mod propriu.
Validarea documentelor se poate face cu un serviciu special al W3C ce poate fi accesat la
adresa http://validator.w3.org. Un validator verifică un document în ceea ce priveşte
definiţia tipului documentului (DTD) şi nu siguranţa legăturilor din document.
2.2. Reprezentarea documentelor HTML

Ca aplicaţie (standard) SGML, limbajul HTML trebuie (pentru a se supune normelor de
interoperabilitate) să specifice propriul set de caractere care se foloseşte în codificarea
documentelor.
Un set de caractere al unui document constă din:
 un repertoar: un set de caractere abstracte, cum sînt litera alfabetului latin
„A“, litera alfabetului chirilic „I“ sau semnul chinezesc care
înseamnă apă
 poziţiile codurilor: un set de întregi ce referă caracterele din repertoar
Fiecare document HTML este o secvenţă de caractere din repertoar. Computerele
identifică aceste caractere prin poziţia acestora în repertoar. De exemplu în setul de
caractere ASCII poziţiile 65, 66 şi 67 referă caracterele A, B şi C.
Caracterele utilizate pentru editarea textelor în documentele HTML ar trebui să aparţină
setului standard ASCII (caractere pe 7 biţi) şi fără a include caractere din setul extins (pe
8 biţi) deoarece diversele platforme utilizează definiţii diferite pentru caracterele din setul
superior ASCII. Dar, acest set de caractere este insuficient pentru un sistem informaţional
global, aşa cum este Webul. De aceea limbajul HTML utilizează un set de caractere mult
mai comple, numit Universal Character Set – UCS (Setul de caractere universal) definit
de standardul ISO 10646, standard ce defineşte un repertoar de mii de caractere utilizate
în întreaga lume. Acest set de caractere este echivalent caracter-cu-caracter cu setul
Unicode 2.0 definit de W3C.
Acest set de caractere nu este însă suficient pentru agenţii utilizator ca să interpreteze
corect un document HTML transmis ca o secvenţă de bytes într-un fişier sau în reţea. În
afara setului de caractere, aceştia trebuie să cunoască şi codificarea caracterelor
(character encoding) folosită la transformarea documentului într-un stream de bytes. Prin
codificarea caracterelor (termenul utilizat fiind acela de „charset“) se poate înţelege
metoda de conversie a unei secvenţe de bytes într-o secvenţă de caractere. Această
conversie se potriveşte perfect cu schema activităţilor Webului: serverele trimit
documentele utilizatorilor (agenţilor utilizatori) ca un stream (şir) de bytes, iar aceştia îi
interpretează ca şiruri de caractere. Metoda de conversie poate să mergă de la o
corespondenţă simpla unu-la-unu pînă la scheme şi algoritmi complexe. O singură
corespondenţă simplă unu-la-unu nu este însă suficientă pentru un repertoar aşa de
complex ca cel definit de ISO 10646 (sau de Unicode). De aceea există diferite codificări
ale unor părţi ale acestui repertoar pentru a-l acoperi în întregime. Cele mai uzuale
codificări sînt: ISO-8859-1/ISO Latin 1 (utilizat pentru limbile Europei de vest), ISO-
8859-2/ISO Latin 2 (care suportă alfabetul chirilic), SHIFT_JIS (codificare japoneză),
ş.a.
Uneltele software care produc documente HTML le pot codifica oricum (nu se impune
nimic) încercînd să „acopere“ cît mai multe dintre caracterele acestuia. Cele care nu se
pot codifica cu schema folosită se pot totuşi referi prin intermediul caracterelor entităţi
(acestea referindu-se la setul de caractere şi nu la schema de codificare). Cel care
foloseşte aceste documente (agenţii utilizatori) poate modifica această codificare (proces
numit transcodare) şi nu este obligat să proceseze documentul utilizînd aceeaşi
codificare sau o codificare care să acopere întregul set de caractere. DAR, pentru a obţine
aceleaşi rezultate cu cele dorite de autorul documentului, agenţii utilizatori trebuie să fie
în primul rînd „conformi Unicode“ (adică să mapeze corect toate caracterele Unicode în
toate codificările recunoscute) şi să cunoască schema de codificare folosită de autor.
Informaţia care specifică schema de codificare trebuie să fie oferită de server. Cea mai
simplă şi directă modalitate de a o specifica este utilizarea unui parametru specific
(charset) într-un cîmp (Content-type) al antetului protocolului HTTP utilizat la
transmiterea documentelor.
De exemplu, următorul antet HTTP anunţă că pentru documentul solicitat s-a folosit
schema de codificare EUC-JP:
Content-Type: text/html; charset=EUC-JP
Dar nu toate serverele ştiu să folosească acest parametru. Pentru a fixa această problemă,
documentele HTML pot include informaţii explicite despre schema de codificare folosită.
Pentru aceasta se foloseşte un element specific al limbajului (META). Pentru cazul de
mai sus:
<META http-equiv="Content-Type" content="text/html; charset=EUC-JP">
Mai mult, dacă nu se foloseşte nici această metodă, limbajul HTML a prevăzut un atribut
special (charset) ce se poate ataşa elementelor din cadrul documentului.
Implicit, dacă nu este folosită nici una dintre aceste 3 posibilităţi, se consideră
documentul codificat ISO-8859-1. Fiecare agent utilizator trebuie să ofere o
metodă/mecanism de a suprapune/suprascrie o informaţie incorectă despre charsetul
(codificarea) folosită.
2.3. Structura şi logica limbajului HTML

HTML este un limbaj care descrie modul de afişare a unui document (text şi informaţii de
alt tip, de exemplu imagini, animaţie, sunete,) folosind două tipuri de elemente: caractere
entităţi şi taguri.
Tagurile HTML sînt elementele specifice limbajului care determină acţiunile ce trebuie
efectuate la afişarea şi parcurgerea ulterioară a documentului (pot fi asimilate cu
instrucţiunile unui limbaj de programare). Caracterele entităţi se folosesc la descrierea
caracterelor din document care nu fac parte din setul standard ASCII.
I. Tag-urile HTML
Toate tag-urile au nume scrise între paranteze unghiulare <NumeTag> şi (eventual)
cîteva atribute care pot lua anumite valori. Formatul general al „instrucţiunilor“ (tag-
urilor) HTML este următorul:
<NumeTag Atribute> Textul afectat de acest tag </NumeTag>
Tagurile pot fi de două feluri:

1. Nevide (perechi), între care apare textul afectat. Ele au efect numai asupra textului
inclus între ele şi sînt de două tipuri:
 de început şi au formatul <NUME>
 de sfîrşit şi au formatul </NUME>
Exemple de tag-uri nevide:
<I>Acest text va fi afişat italic</I>
<B>Acest text va fi afişat îngroşat</B>
2. Vide (singulare), au efect imediat în punctul din document în care apar.
Exemple de tag-uri vide:
<HR> Inserează o linie orizontală în locul în care apare.
<IMG SRC="poza.gif"> Specifică inserarea unei imagini.
Tag-urile şi atributele pot fi editate atît cu caractere mici cît si cu caractere mari, şi au
acelaşi efect.
Atributele tag-urilor au la rîndul lor nume şi pot lua numai anumite valori. Forma în care
sînt editate atributele este NUME="valoare". Valoarea trebuie inclusă în ghilimele.
Dacă în tag există mai multe atribute, ele trebuie separate prin spaţiu. Formatul general al
unui tag ce are şi atribute este următorul:
<NumeTag NumeAtribut="ValoareAtribut">Textul afectat de tag</NumeTag>
Exemplu:
<IMG src="poza.gif" align="bottom">
Aici NumeTag este IMG şi specifică inserarea unei imagini. NumeAtribut1 este SRC şi
are ca valoare calea şi numele fişierului imagine (poza.gif). NumeAtribut2 este ALIGN,
priveşte alinierea imaginii şi are ca valoare BOTTOM (jos, în raport cu rîndul).
Formatul tag-urilor trebuie respectat cu stricteţe. Chiar dacă, în general, aproape toate
caracterele de control ASCII sînt ignorate cînd apar în textul HTML (de pildă ENTER
sau TAB), dacă sînt introduse între parantezele unghiulare ale tag-urilor le vor face
neinterpretabile de către navigatoare şi prin urmare nu vor avea nici un efect.
Tag-urile pot fi utilizate şi în interiorul altor tag-uri. Acest lucru se face de forma:
<Tagl><Tag2>Textul afectat de tag</Tag2></Tagl>
Exemplu:
<A HREF="poza-mare.gif"><IMG SRC="poza-mică.gif"></A>
În acest exemplu, primul tag este <A>...</A> ce indică existenţa unei „legături“ spre alt
document, iar al doilea tag este <IMG> ce indică inserarea în document a unei imagini.
Astfel „poza-mică.gif“ este imagine activă, selectabilă, datorită faptului că este cuprinsă
între tag-urile <A>...</A>. Activarea ei de către cel care priveşte documentul cu un
navigator, va determina serverul să-i trimită documentul aflat în fişierul „poza-mare.gif“,
specificată ca valoare a atributului HREF.
II. Caractere entităţi

Deoarece o codificare (charset) poate să nu fie capabilă să exprime toate caracterele unui
set de caractere ale unui document şi datorită faptului că codarea internă a computerului
care produce caracterele speciale prin apăsarea altor taste (de pildă ALT + codul
numeric) nu este aceeaşi pentru diferitele sisteme, pentru afişarea lor corectă şi pentru a
permite translatarea caracterelor speciale este necesară definirea unui set special de
coduri, numite caractere entităţi (referinţe), care pot fi incluse în documentele HTML
pentru reprezentarea acestor caractere speciale. Cînd sînt interpretate de către navigatoare
caracterele entităţi sînt afişate în mod corespunzător ţinînd cont de platforma pe care
rulează navigatorul si de fontul utilizat.
Caracterele entităţi sînt predefinite şi pot lua una din două forme posibile:
 entităţi nume (referinţe caractere) &nume;
 entităţi numere (referinţe numerice) &#numar; sau &#xnumar;
Toate caracterele entităţi nume încep cu semnul & (ampersand), urmat de numele entităţii
(de exemplu â care este reprezentat de navigatoare ca â) şi terminat cu punct-şi-
virgulă (;), avînd deci forma &nume;. De remarcat că în numele entităţilor este
semnificativ dacă o literă este mare sau mică.
Toate caracterele entităţi numere încep cu semnul & şi sînt reprezentate de un număr
precedat de semnul # (de pildă ~ care este reprezentat de navigatoare ca ~),
terminat cu punct-şi-virgulă (;), avînd deci forma &#numar; sau &#xnumar; (atunci
cînd numărul este în hexa).
Exemplu:
Cuvîntul „© rîndunica“ (care conţine caracterele „speciale“ î şi ©) poate fi inserat într-un
document HTML ca entitate nume sau ca entitate număr, astfel:
a). ©rîndunica
b). ©rîndunica
Entităţile (referinţele) numerice specifică poziţia (codul) caracterului în setul de caractere
al documentului, iar entităţile nume (referinţele caracter) folosesc nume simbolice care
permit să nu se reţină poziţia caracterului în cadrul setului de caractere ci doar „numele“
său. În timp ce entităţile sînt limitate la un subset al setului de caractere Unicode,
referinţele numerice pot specifica orice caracter.
Utilizarea entităţilor în diverse codificări (ISO Latin-1, ISO Latin-2, ş.a)

Utilizarea setului ISO Latin-1 permite reprezentarea celor mai multe caractere cu
diacritice - prezente pe majoritatea platformelor - dar este totuşi limitată. De pildă,
caractere destul de des folosite, cum ar fi bulinele sau semnele grafice, nu sînt disponibile
în ISO Latin 1. Caracterele româneşti de asemenea se găsesc în totalitate doar în
supersetul ISO Latin 2. Decodarea seturilor Latin 1 sau 2 nu era implementată în toate
navigatoarele şi din această cauză documentele scrise cu aceste coduri erau afişate de
unele navigatoare mai vechi (sau versiuni mai vechi) prin recurgerea la setul ASCII.
Actualele versiuni HTML permit multiple seturi de caractere, inclusiv Unicode care
include marea majoritate a caracterelor si a simbolurilor cunoscute în lume.
Entităţile pentru caracterele româneşti ăĂâÂîÎşŞţŢ (reprezentabile de navigator dacă
acesta cunoaşte codurile Latinl şi Latin2), în această ordine, sînt: ã Ã
â Â î Î (Latinl). Aici &atilde nu este chiar ă ci un a cu tilda şi
lipsesc literele ş şi ţ. Reprezentarea lor prin numerele de cod este: ã Ã
â Â î Î º ª þ Þ (Latin2)
Caractere speciale
Cîteva dintre caracterele speciale mai des utilizate sînt:
Entitate Semnificaţie
< < (mai mic)
> > (mai mare)
& & (ampersand)
" " (ghilimele)
&emsp; Inserează un spaţiu dublu celui dintre caracterele monospaţiate
(lărgime de un EM, sau un punct)
Inserează un spaţiu care nu permite ruperea rîndului în acel loc
&endash; Dash de lărgime un EN
&emdash; Dash de lărgime un EM
Caractere neafişabile
Un agent utilizator poate să nu fie capabil să afişeze (sau să ofere utilizatorului) corect
(sau inteligibil) toate caracterele dintr-un document. Aceasta se poate întîmpla cînd, spre
exemplu, nu este disponibil un anumit font, un caracter are o valoare ce nu poate fi
exprimată de codificarea internă a agentului utilizator, etc...
Deoarece sînt prea multe cauzele ce pot duce la o astfel de situaţie nu se impune ca fiind
obligatoriu nimic, DAR fiecare agent utilizator trebuie:
 să adopte un mecanism clar de alertare a utilizatorului (de exemplu afişarea unui
caracter sugestiv; în astfel de cazuri Netscape Navigator foloseşte semnul
întrebării)
 să afişeze reprezentarea numerică a acelui caracter în cazul în care în document
acesta apare ca entitate numerică
Capitolul 3.
Structura documentelor HTML
3.1. Structura generală a unui document HTML

Întreaga dezvoltare a HTML s-a făcut în ideea creşterii ulterioare a limbajului fără
sacrificarea simplităţii. Există puţine reguli generale de care trebuie să se ţină cont în
construirea unui document HTML.
Documentele HTML (4.0) au structura generală:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
< HEAD>
<TITLE>Titlul documentului</TITLE>
... alte declaraţii/informaţii despre document...
</HEAD>
<BODY>
...Textul documentului propriu-zis...
</ BODY>
</HTML>
Notă importantă:
Dacă se foloseşte un document multiplu definit cu FRAMESET, atunci elementul
FRAMESET înlocuieşte elementul BODY.
Un document HTML (uneori referit şi ca pagină HTML) este structurat în trei părţi:
1. Începutul unui document HTML este o declaraţie (<!DOCTYPE... >) care specifică
versiunea limbajului HTML căruia i se conformează acesta. Restul documentului este
conţinut în cadrul elementului de limbaj (tagului) <HTML>.
2. O secţiune declarativă numită antet (head) definită cu tagul <HEAD>. Aceasta conţine
informaţii (declaraţii) despre document (cum ar fi titlul şi cuvinte cheie asociate cu
documentul)
3. O secţiune numită conţinut (body) definită cu tagul <BODY> sau <FRAMESET> şi
care înseamnă de fapt (hyper)textul documentului. Acesta este alcătuit din elemente de
tip bloc şi elemente de tip inline.
1. Elementul DOCTYPE
Un document valid HTML trebuie să declare ce versiune utilizează pentru descrierea sa.
Declaraţia tipului documentului (document type declaration) defineşte ce DTD se
foloseşte în documentul respectiv.
De exemplu, HTML 4.0 poate specific 3 DTD, astfel că un autor trebuie să includă una
dintre următoarele declaraţii ale tipului de document:
 HTML 4.0 Strict DTD include toate elementele şi atributele ce nu sînt „obsolete“
(inutile, depăşite) sau nu apar în documente definite cu FRAMESET. Pentru astfel
de documente se foloseşte următoarea declaraţie de tip:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
 HTML 4.0 Transitional DTD include tot ceea ce este în declaraţia anterioară la
care se adaugă elementele şi atributele depăşite (vechi, redefinite, dar nu
eronate!). Pentru astfel de documente se foloseşte următoarea declaraţie de tip:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
 HTML 4.0 Frameset DTD include tot ceea ce este în declaraţia anterioară la care
se adaugă documentele multiple (create frame-uri). Pentru astfel de documente se
foloseşte următoarea declaraţie de tip:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/REC-html40/frameset.dtd">
Adresele ce apar în fiecare declaraţie permit agenţilor utilizatori să acceseze (şi să

descarce) DTD-ul documentului (descrierea formală) şi orice set de caractere de care are
nevoie. Următoarele adrese se folosesc pentru accesarea descrierilor (DTD-urilor) şi
seturilor de caractere utilizate de HTML 4.0.
 http://www.w3.org/TR/REC-html40/strict.dtd DTD strict (implicit)
 http://www.w3.org/TR/REC-html40/loose.dtd DTD Transitional
 http://www.w3.org/TR/REC-html40/frameset.dtd DTD pentru
documente cu frameset
 http://www.w3.org/TR/REC-html40/HTMLlat1.ent setul de caractere
Latin-1
 http://www.w3.org/TR/REC-html40/HTMLsymbol.ent setul de caractere
Symbol
 http://www.w3.org/TR/REC-html40/HTMLspecial.ent setul de caractere
Special
2. Elementul HTML
Sintaxa:
<HTML>...</HTML>
Atribute posibile:
 VERSION = xxx
 atribute de internaţionalizare: LANG, DIR
Conţine:
 In HTML 4.0 Strict şi Transitional: HEAD urmat de BODY
 In HTML 4.0 Frameset: HEAD urmat de FRAMESET
Conţinut în:
 Nu se aplică, este element de nivel 0
Descriere:
Acest element conţine de fapt documentul (pagina) HTML şi este alcătuit din HEAD
urmat de BODY (sau FRAMESET). Atît tagul de început cît şi cel de sfîrşit ale
elementului sînt opţionale.
Atributele LANG şi DIR se folosesc cu HTML pentru a specifica limba (de bază) în
care este creat documentul (şi „direcţia“ în care se citeşte textul). Se foloseşte în
special cu tehnica style-sheet-urilor pentru a crea un document cu text în mai multe
limbi.
Atributul VERSION specifică DTD-ul din document (versiunea de HTML) şi nu mai
trebuie folosit întrucît este redundant cînd se foloseşte DOCTYPE.
3. Elementul HEAD
Sintaxa:
<HEAD>...</HEAD>
Atribute posibile:
 PROFILE = uri (dicţionar de meta informaţii)
Conţine:
 TITLE (exact un element)
 BASE (optional)
 ISINDEX (optional)
 SCRIPT (zero sau mai multe elemente)
 STYLE (zero sau mai multe elemente)
 META (zero sau mai multe elemente)
 LINK (zero sau mai multe elemente)
 OBJECT (zero sau mai multe elemente)
Conţinut în:
 Elementul HTML
Descriere:
Acest element conţine informaţii despre document (cum ar fi titlul său, cuvinte cheie
utilizabile de motoarele de căutare, descrierea documentului şi style-sheet-uri
asociate/utilizate. HEAD este solicitat în toate documentele, dar tagurile sale de
început/sfîrşit sînt opţionale. Dacă tagul de sfîrşit lipseşte primul element BODY sau
FRAMESET determină sfîrşitul lui. Este urmat de BODY în documentele Strict şi
Transitional şi de FRAMESET în cele Frameset.
Atributul optional PROFILE oferă locaţia în care se află un profil de metadate. Un
profil este un fişier ce defineşte proprietăţile ce pot fi utilizate de elementele META şi
LINK din header, neavînd un format standard stabilit.
Conţinutul acestui element (cu excepţia lui TITLE care este afişat de browsere) nu este
prelucrat în mod uzual.
4. Elementul BODY
Sintaxa:
<BODY>...</BODY>
Atribute posibile:
 BACKGROUND = URI (imaginea de background a documentului)
 BGCOLOR = Color (culoarea de background a documentului)
 TEXT = Color (culoarea textului documentului)
 LINK = Color (culoarea link-urilor documentului)
 VLINK = Color (culoarea link-urilor deja vizitate ale documentului)
 ALINK = Color (culoarea link-urilor active ale documentului)
 ONLOAD = Script (documentul a fost încărcat de browser/agentul
utilizator)
 ONUNLOAD = Script (documentul a fost parăsit de browser/agentul utilizator)
 atribute comune (vezi nota de mai jos)
Conţine:
 În HTML 4.0 Strict:
 elemente de tip bloc (nivel bloc), unul sau mai multe
 SCRIPT, INS, DEL
 În HTML 4.0 Transitional:
 elemente de tip bloc (nivel bloc)
 elemente de tip inline
 INS, DEL
Conţinut în:
 In HTML 4.0 Strict or Transitional: HTML
 In HTML 4.0 Frameset: NOFRAMES
Descriere:
Acest element conţine de fapt corpul (conţinutul) documentului (paginii) HTML.
BODY este cerut de documentele în care nu apar frame-uri, dar tagurile de
început/sfîrşit sînt opţionale. În documentele ce conţin frame-uri, BODY trebuie
obligatoriu conţinut în elementul NOFRAMES, dacă este utilizat.
Conţinutul documentului apare în cadrul elementelor de tip bloc sau în corpul
elementului SCRIPT, iar în cazul documentelor HTML 4.0 de tip Transitional sînt
permise şi elemente de tip inline direct în cadrul elementului BODY.
BODY poate avea atribute care specifică background-ul (fundalul) şi culoarea
documentului sau a unor elemente din cadrul său. Această metodă este însă
considerată depăşită, preferîndu-se utilizarea stilurilor de documente (style-sheet).
Dacă unul dintre atributele ce se referă la link-uri este setat, atunci se recomandă
folosirea tuturor pentru a se asigura ca diferă culorile diverselor tipuri de legături.
Aceste culori pot fi însă suprapuse de setările din browsere.
Atributul BACKGROUND sugerează o imagine de fundal care va fi folosită pentru
document (prin extindere pe verticală şi/sau orizontală). Dacă acest atribut este setat se
recomandă utilizarea şi a atributelor BGCOLOR, TEXT, LINK, VLINK şi ALINK
pentru a fi siguri că documentul poate fi citit. BGCOLOR se foloseşte pentru fundalul
imaginilor neîncărcate.
Style-sheet-urile (stilurile de documente) permit o mai mare flexibilitate în
specificarea imaginii de background, chiar a poziţiei şi modalităţii de extindere pe
întreaga suprafaţă ocupată de document, sau dacă imaginea să se deplaseze (scroll) sau
nu cu documentul, etc...
În plus faţă de evenimentele ce pot fi generate de orice element, BODY acceptă
următoarele atribute de tip eveniment utilizate în tehnologia client-scripting:
 ONLOAD, apare atunci cînd documentul a fost încărcat;
 ONUNLOAD, apare atunci cînd documentul este părăsit.
Atributele comune ce pot apare în acest element sînt comune mai multor elemente şi
sînt împărţite în:
 atribute fundamentale (core): ID, CLASS, STYLE, TYTLE
 evenimente scriptabile (ce pot fi tratate cu ajutorul scripturilor):
ONCLICK, ONDBLCLICK, ONMOUSEDOWN, ONMOUSEUP,
ONMOUSEOVER, ONMOUSEMOVE, ONMOUSEOUT,
ONKEYPRESS, ONKEYDOWN, ONKEYUP.
Elementele de tip bloc şi cele de tip inline sînt definite mai departe.
Exemple:
1. O variantă de pagină HTML care conţine ca şi „body“ (conţinut) textul: „The scariest
jungle: Follow the map to see lions and tigers and bears. Oh, my!“ arată astfel:
<HTML>
<HEAD>
<TITLE>My Jungle Home Page</TITLE>
</HEAD>
<BODY>
The scariest jungle: Follow the map to see lions and tigers and bears.
Oh, my!
</BODY>
</HTML>
Iar ceea ce se va vedea cu un browser (aici Internet Explorer) este prezentat în figura
următoare:
O variantă „depăşită“ (fără a fi eronată, dar nerecomandată ca stil) de pagină HTML care
ilustrează utilizarea atributelor depăşite este prezentată în continuare. Culoarea de
background se stabileşte ca fiind albă, textul negru, iar legăturile iniţial roşii, active ca
fiind de culoare fuchsia, iar cele deja vizitate maron.

"http://www.w3.org/TR/REC-
html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>Exemplu depasit</TITLE>
</HEAD>
<BODY bgcolor="white" text="black"
link="red" alink="fuchsia" vlink="maroon">
... document body...
</BODY>
</HTML>
2. Prin folosirea style-sheet-urilor (stilurilor), acelaşi efect se poate obţine şi astfel:
html40/strict.dtd">
<HTML>
<HEAD>
<TITLE>Un exmplu cu stiluri incluse</TITLE>
<STYLE type="text/css">
BODY { background: white; color: black}
A:link { color: red }
A:visited { color: maroon }
A:active { color: fuchsia }
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
3. Cea mai flexibilă soluţie este dată de posibilitatea de a specifica un stil definit într-un
alt fişier (stiluri externe). Orice modificare de stil se face fără a accesa documentul
HTML.
html40/strict.dtd">
<HTML>
<HEAD>
<TITLE>A study of population dynamics</TITLE>
<LINK rel="stylesheet" type="text/css" href="smartstyle.css">
</HEAD>
<BODY>
</BODY>
</HTML>
5. Elementul FRAMESET
Sintaxa:
<FRAMESET>...</FRAMESET>
Atribute posibile:
 ROWS = MultiLengths (lungimile rîndurilor)
 COLS = MultiLengths (lungimile coloanelor)
 ONLOAD = Script (toate frame-urile au fost încărcate)
 ONUNLOAD = Script (toate frame-urile au fost eliminate/părăsite)
 atribute comune
Conţine:
 FRAMESET (unul sau mai multe elemente)
 FRAME (unul sau mai multe elemente)
 NOFRAMES (un singur element, opţional)
Conţinut în:
 HTML
Descriere:
Elementul FRAMESET este un container de frame-uri folosit pentru a diviza fereastra
în subspaţii dreptunghiulare numite frame-uri. Într-un document ce conţine frame-uri,
elementul FRAMESET exterior ia locul lui BODY şi urmează imediat lui HEAD.
Elementul FRAMESET conţine unul sau mai multe elemente FRAMESET sau
FRAME, împreună cu elementul opţional NOFRAMES pentru a oferi un conţinut
alternativ browser-elor care nu suportă frame-urile (sau le au dezactivate). Se
recomandă însă să existe întotdeauna şi să ofere informaţie utilă pentru astfel de cazuri
(cel puţin, de exemplu, o legătură către frame-ul principal).
Atributele ROWS şi COLS definesc dimensiunile exacte ale fiecărui frame din set.
Fiecare atribut are formatul unei liste de lungimi (cu elemente separate de virgulă)
care specifică în pixeli, ca procent sau ca lungime relativă dimensiunea (lungimea sau
lăţimea) fiecărui frame. O dimensiune relativă se exprimă ca i*, unde i este un întreg.
Dacă lipseşte întregul se consideră egal cu 1. De exemplu, un set de frame-uri definit
cu ROWS="3*,*" va avea primul rînd cu o înălţime de 3 ori mai mare decît al doilea
rînd.
Valorile specificate pentru ROWS dau înălţimea fiecărui rînd, din partea de sus a
ecranului înspre baza acestuia. Atributul COLS defineşte lăţimea fiecărei coloane,
începînd de la stînga la dreapta.. Dacă ROWS sau COLS lipsesc, valoarea implicită a
atributului este 100%. Dacă ambele atribute sînt specificate, ecranul se „împarte“ dpdv
logic într-o matrice care se „umple“ mai întîi de la stînga la dreapta şi apoi de sus în
jos.
Cînd se utilzează dimensiuni în pixeli, acestea trebuie combinate întotdeauna cu
lungimi relative pentru a acoperi diferitele dimensiuni ale ferestrelor (determinate de
diferitele rezoluţii la care se utilizează ecranele). Dimensiunile în pixeli trebuie
folosite doar cînd frame-urile conţin în principal imagini sau alte obiecte cu o
dimensiune fixă (în pixeli). Preferată este însă exprimarea în procente şi dimensiuni
relative, datorită capacităţii acesteia de adaptare la diferitele dimensiuni de ferestre.
Elementul FRAMESET acceptă atributele ONLOAD şi ONUNLOAD pentru a
specifica acţiuni de tip client-side (executate în agentul utilizator) cînd toate frame-
urile au fost încărcate sau descărcate (eliminate din browser).
Exemple:
Exemplul următor determină împărţirea ecranului în 2 rînduri şi 3 coloane.
<FRAMESET ROWS="70%,30%" COLS="33%,33%,34%">
<FRAME NAME="Photo1" SRC="Row1_Column1.html">
<FRAME NAME="Caption1" SRC="Row2_Column1.html">
<NOFRAMES>
<BODY>
<H1>Table of Contents</H1>
<UL>
<LI>
<A HREF="Row1_Column1.html">Photo 1</A>
(<A HREF="Row2_Column1.html">Caption</A>)
</LI>
<LI>
</LI>
<LI>
</LI>
</UL>
</BODY>
</NOFRAMES>
</FRAMESET>
Se remarcă utilizarea elementui NOFRAMES pentru cazul în care frame-urile nu pot fi

afişate. Efectul se doreşte a fi „asemănător“ cu cel determinat de frame-uri (o matrice de
dreptunghiuri cu 2 rînduri şi 3 coloane).
2. Exemplul următor foloseşte elemente FRAMESET îmbricate pentru a defini 2 frame-
uri în primul rînd şi un frame în al doilea rînd.
<FRAMESET ROWS="*,100">
<FRAMESET COLS="40%,*">
<FRAME NAME="Menu" SRC="nav.html" TITLE="Menu">
<FRAME NAME="Content" SRC="main.html" TITLE="Content">
</FRAMESET>
<FRAME NAME="Ad" SRC="ad.html" TITLE="Advertisement">
<NOFRAMES>
<BODY>
<UL>
<LI><A HREF="reference/html40/">HTML 4.0
Reference</A></LI>
<LI><A HREF="reference/wilbur/">HTML 3.2
Reference</A></LI>
<LI><A HREF="reference/css/">CSS Guide</A></LI>
</UL>
<P>
<IMG SRC="ad.gif" ALT="Advertising">
</P>
</BODY>
</NOFRAMES>
</FRAMESET>
3.2. Structura header-ului unui document HTML (elementul
HEAD)
Headerul (antetul) unui document (definit cu elementul HEAD) conţine informaţii despre
documentul curent, cum ar fi titlul documentului, cuvinte cheie utilizate de motoarele de
căutare şi alte date care nu sînt considerate conţinut al documentului. Agenţii utilizatori
(browser-ele) nu afişează în general aceste informaţii, prelucrînd elementele ce apar aici
şi făcînd disponibile informaţiile intr-un alt mod decît conţinutul documentului. De
exemplu, browser-ele afişează titlul documentului încărcat în caption-line (linia de titlu) a
browserului, alături de numele browser-ului însuşi.
Elementul HEAD poate conţine următoarele elemente:
 TITLE – stabileşte titlul documentului
 BASE – defineşte adresa (URI) de bază a documentului
 STYLE – defineşte stilurile de document (style-sheet) folosite în document
 LINK – defineşte relaţiile documentului propriu-zis cu alte documente
auxiliare
 META – defineşte un set de „metadate“ (date auxiliare utilizate în diverse
alte scopuri)
 SCRIPT – defineşte un script client-side (secvenţă de instrucţiuni ce se
execută în client)
 ISINDEX – defineşte textul prompterului utilizat la preluarea datelor de la
utilizator
 OBJECT – permite includerea unor obiecte externe (sunete, imagini,
animaţii, etc)
1. Elementul TITLE
Sintaxa:
<TITLE>...</TITLE>
Atribute posibile:
 atribute de internaţionalizare (vezi mai sus)
Conţine:
 Text (inclusiv caractere entităţi)
Conţinut în:
 HEAD
Descriere:
Acest element dă titlul documentului. Fiecare document trebuie să aibă exact 1 titlu
(un singur element TITLE în HEAD). Conţine text şă/sau caractere entităţi, dar nu
poate conţine alte elemente de marcare. Un titlu bun trebuie să fie scurt şi specific
conţinutului documentului, astfel încît să poată fi utilizat ca bookmark (semn de carte)
în browsere, ca titlu pentru fereastra în care se afişează şi ca legătură pentru motoarele
de căutare. Lungimea limită a unui titlu se recomandă a fi 60 caractere.
Exemplu:
Exemplul următor de pagina HTML setează titlul la „valoarea“ (şirul de caractere)
„My Jungle Home Page“ şi va arăta ca în figură (aici încărcată în browserul Internet
Explorer).
<HTML>
<HEAD>
</HEAD>
</HTML>
2. Elementul BASE
Sintaxa:
<BASE>
Atribute posibile:
 HREF = uri (adresa/url de bază)
 TARGET = destinaţia frame-ului (unde se încarcă ceea ce indică legătura)
Conţine:
 Gol (nu conţine nimic)
Conţinut în:
 HEAD
Descriere:
Acest element defineşte adresa de bază (uri, url) a documentului, cea care este folosită
la rezolvarea (determinarea) adreselor relative din cadrul documentului. Ea trebuie să
fie unică. Dacă este prezent, elementul BASE trebuie să apară în HEAD înaintea
oricărui alt element ce conţine o referire la o adresă (uri, url).
Atributul HREF specifică adresa propriu-zisă (url).
Cele mai multe pagini de Web nu necesită o astfel de adresă (adresa documentului
însuşi, de unde a fost încărcat, este adresa de bază, folosită la cele relative). Cazurile în
care este necesară sînt: cînd adresa de bază diferă de adresa documentului sau cînd
acesta nu are o adresă de la care să fi fost încărcat (de exemplu a fost trimis prin
email).
Atributul TARGET este folosit cînd documentul este împărţit în frame-uri, specificînd
frame-ul în care se afişeaza implicit porţiunile din document dacă nu sînt specificate
explicit.
3. Elementul STYLE
Sintaxa:
<STYLE>...</STYLE>
Atribute posibile:
 TYPE = ContentType (tipul conţinutului)
 MEDIA = MediaDesc (tipul de media căruia i se aplică stilul)
 TITLE = text (titlul stilului - style sheet)
 atribute de internaţionalizare (pentru TITLE)
Conţine:
 An embedded style sheet
Conţinut în:
 HEAD
Descriere:
Acest element înglobează (inserează) în document un stil (style sheet). Într-un HEAD
pot fi conţinute oricîte elemente STYLE.
Atributul TYPE se foloseşte pentru a specifica tipul de media (în standardul Internet).
Pentru stilurile definite de metoda Cascading Style Sheets atributul TYPE are valoarea
text/css.
Atributul opţional TITLE dă un titlu style-sheet-ului. Fără acesta, style-sheet-ul
respectiv este aplicat întotdeauna cînd sînt active stilurile pentru documentul respectiv.
Cu acest atribut se pot activa sau dezactiva style-sheet-uri individuale. Însă nu toate
browser-ele implementează această facilitate.
Atributul MEDIA specifică media pe care acest stil se aplică. Aceasta permite
autorilor restricţionarea unui stil la anumite dispozitive de ieşire. Valoarea acestui
atribut este o listă de nume de medii separate prin virgulă. HTML 4.0 defineşte
următoarele nume de medii (literele mari/mici sînt diferite):
 screen (implicit), display-urile uzuale (fără paginare);
 print, ieşirea pe imprimantă;
 tty,
display-uri ce folosesc caractere de dimensiune fixă (ca cele folosite de
Lynx);
 tv, dispozitive tip televizor (rezoluţie mică şi derulabilitate redusă);
 projection, pentru proiectoare;
 handheld, dispozitive handheld (de ţinut în mînă), caracterizate de un disply
mic, monocrom şi cu bandă limitată;
 braille, dispozitive tactile braille tactile;
 aural, pentru sintetizatoare de voce;
 all, pentru toate dispozitivele.
Browser-ele pre-HTML 3.2 care nu cunoşteau elementul STYLE afişau conţinutul
său ca şi cum ar fi făcut parte din corpul documentului (din BODY). Pentru a
preîntîmpina aceasta se permite ca definiţia de stil să apară într-un comentariu ().
Un stil definit în acest mod este util cînd stilul respectiv se aplică unui singur
document. Dacă acesta trebuie aplicat mai multor documente se foloseşte tehnica
stilurilor externe.
Exemplu:
Un exemplu de descriere şi includere a unui stil într-un document:
<STYLE TYPE="text/css" MEDIA=screen>

</STYLE>
Se defineşte ca background pentru corpul documentului (BODY) imaginea aflată în
fişierul „foo.gif“, iar culoarea de background ca fiind negru. În cadrul unui paragraf
(P) backgroundul este galben iar textul are culoarea neagră. Un stil cu numele „note“
începe de la 5 unităţi în stînga şi se întinde pînă cu 5 unităţi faţă de margine din
dreapta.
4. Elementul LINK
Sintaxa:
<LINK>
Atribute posibile:
 REL = LinkTypes (relaţiile CĂTRE link)
 REV = LinkTypes (relaţiile DE LA link)
 HREF = URI (referinţa hypertext)
 TYPE = ContentType (tipul conţinutului legăturii)
 TARGET = FrameTarget (frame-ul în care se încarcă link-ul)
 MEDIA = MediaDesc (mediul pentru care e linkul)
 HREFLANG = LanguageCode (limba în care e descrisă legătura/linkul)
 CHARSET = Charset (setul de caractere folosit pentru link)
 atribute comune
Conţine:
 Nimic
Conţinut în:
 HEAD
Descriere:
Acest element defineşte „relaţiile“ documentului cu alte documente în ceea ce priveşte
localizarea (adresele lor). Într-un HEAD pot apare oricîte elemente LINK. Nu toate
browser-ele suportă însă elementul LINK, astfel încît un document nu trebuie să
depindă de relaţiile definite de acest element, ci trebuie folosit doar pentru a
îmbunătăţi performanţele per ansamblu.
Atributele REL şi REV definesc natura relaţiei dintre document şi resursele legate
(specificate) de acestea. REL defineşte o relaţie de la documentul curent la resursa
legată, în timp ce REV defineşte o relaţie în direcţia opusă. De exemplu:
<LINK REL=Glossary HREF="foo.html">
indică faptul că fişierul "foo.html" este un glosar pentru documentul curent, în timp ce
<LINK REV=Subsection HREF="bar.html">
indică faptul că documentul curent este o subsecţiune a lui "bar.html". Valoarea lui
REL şi REV este o listă de linkuri separate prin spaţii.
Relaţiile comune între documente includ şi următorul sau precedentul într-o secvenţă,
pagina de start într-o colecţie, un document cu informaţii de copyright şi informaţii
despre autor. Un document ar putea defini aceste relaţii astfel:
<LINK REL=Prev HREF="base.html" TITLE="BASE - Document
Base URI">
<LINK REL=Next HREF="meta.html" TITLE="META -
Metadata">
<LINK REL=Start HREF="../" TITLE="HTML 4.0
Reference">
<LINK REL=Copyright HREF="/copyright.html" TITLE="Copyright
Notice">
<LINK REV=Made HREF="mailto:lp@foo.com" TITLE="Feedback">
Elementul LINK se poate folosi şi pentru a aplica un stil extern. REL=StyleSheet
specifică un stil persisitent sau preferat, în timp ce REL="Alternate StyleSheet"
defineşte un stil alternativ.
Un stil persisitent este acela care se aplică întotdeauna cînd style sheet-urile sînt
active. Absenţa atributului TITLE indică un astfel de stil.
Un stil preferat este acela care se aplică automat. Combinaţia dintre REL=StyleSheet
şi TITLE specifică un stil preferat. Un autor nu poate specifica mai mult de un astfel
de stil.
Un stil alternativ este indicat de REL="Alternate StyleSheet". Utilizatorul poate alege
să schimbe stilul preferat cu unul dintre cele alternative, dacă broeserul permite acest
lucru (nu toate o şi fac, însă).
Un stil poate fi specificat prin intermediul mai multor style-sheet-uri (fişiere de
descriere a stilurilor), ca în exemplu următor:
<LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary"
TYPE="text/css">
<LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary"
TYPE="text/css">
<LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary"
TYPE="text/css">
Aici se combină 3 style-sheet-uri pentru a forma stilul "Contemporary", aplicat ca şi
stil preferat. Pentru a se combina style-sheet-urile trebuie să folosească acelaşi TITLE.
Atributul MEDIA specifică media pentru care sînt proiectate resursele legate de acest
document. Cu REL=StyleSheet autorii restricţionează un stil la un anumit dispozitiv.
Are aceleaşi valori ca la elementul STYLE.
Atributele opţionale HREFLANG şi CHARSET ale lui LINK descriu limba (de
exemplu en pentru English, en-US pentru American English şi ja pentru Japoneză) şi
schema de codificare a legăturii (de exemplu ISO-8859-1, SHIFT_JIS, and UTF-8).
Relaţia legăturii Alternate defineşte o versiune alternativă a documentului. Traduceri
ale unei pagini pot fi identificate folosind REL=Alternate împreună cu atributul
HREFLANG, iar versiuni ale unei pagini potrivite pentru un mediu specific se pot
oferi prin combinarea REL=Alternate cu atributul MEDIA ca în exemplele următoare:
<LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version
française">
<LINK REL=Alternate HREF="index.ja.html" HREFLANG=ja CHARSET="SHIFT_JIS"
TITLE="Japan version">
<LINK REL=Alternate HREF="index.pdf" TYPE="application/pdf" MEDIA=print TITLE="PDF
version">
De remarcat că atributele LANG şi DIR se aplică textului atributului TITLE şi NU
conţinutului legăturii.
Atributul TARGET se foloseşte în cazul documentelor definite cu frame-uri.
5. Elementul META
Sintaxa:
<META>
Atribute posibile:
 NAME = nume (numele proprietăţii)
 HTTP-EQUIV = nume (numele răspunsului din headerul HTTP)
 CONTENT = CDATA (datele asociate)
 SCHEME = CDATA (formatul datelor)
 atribute de internaţionalizare pentru CONTENT (vezi mai sus)
Conţine:
 Nimic
Conţinut în:
 HEAD
Descriere:
Acest element defineşte metadatele documentului: cuvintele cheie asociate cu acestea,
descrierea documentului şi autorul său. Pot apare oricîte elemente META în cadrul
elementului HEAD. Nu există o listă standard de metadate/proprietăţi (fiecare autor
poate defini orice metadată îi este necesară).
Atributul NAME defineşte un nume de proprietate, în timp ce CONTENT dă valoarea
corespun-zătoare a acelei proprietăţi. CONTENT poate conţine text şi caractere
entitate, dar făra taguri.
Atributul opţional SCHEME defineşte formatul proprietăţii respective. De exemplu,
proprietatea dată calendaristică poate cere SCHEME="Month-Day-Year" pentru a o
deosebi de formatul definit de SCHEME="Day-Month-Year".
Exemplul următor defineşte autorul unui document:
<META NAME=author CONTENT="Laurenţiu Pădeanu">
Unele motoare de căutare folosesc cuvinte cheie şi proprietăţi de descriere pe care le
asociază cu legătura către documentul respectiv (şi care pot oferi chiar informaţii
asemănătoare ponderilor). De exemplu:
<META NAME="description" CONTENT="Pagina clubului de fotbal Universitatea Craiova">
<META NAME="keywords" CONTENT="U Craiova, stiinţa, craiova, soccer, football">
Pentru a evita ca aceste motoare să trunchieze descrierea documentului, aceasta trebuie
să fie sumară (să nu depăşească 200 de caractere). Cuvintele cheie sînt separate prin
virgulă şi literele mari sînt diferite de cele mici. Motoarele de căutare procesează de
obicei primele 1000 de caractere, iar dacă un cuvînt se repetă prea des există pericolul
ca documentul să nu fie indexat.
Unele motoare de căutare suportă proprietatea robots pentru a indica dacă un
document să fie indexat şi care dintre link-urile sale să fie urmate. Valoarea asociată a
lui CONTENT este o listă de directive separate prin virgulă:
index – specifică posibilitatea ca această pagină sa fie indexată
noindex – indică neindexarea aceastei pagini
follow – indică motoarelor de căutare să urmeze linkurile din pagină
nofollow – indică motoarelor de căutare să NU urmeze linkurile din pagină
all – echivalent cu index, follow (implicit)
none – echivalent cu noindex, nofollow
De exemplu, următorul element META le spune motoarelor de căutare să nu indexeze
pagina, dar să urmărească link-urile din pagină:
<META NAME=robots CONTENT="noindex, follow">
De remarcat, însă, că NU toate motoarele de căutare suportă această proprietate.
Atributul HTTP-EQUIV poate fi folosit în locul lui NAME pentru a indica faptul că
acea proprietate este (aparţine) header-ului HTTP (a protocolului de preluare a
documentelelor). Această proprietate este transformată şi transmisă de unele servere
HTTP (nu toate1), dar clienţii (browser-ele) recunosc această caracteristică (faptul că
aparţin headerului HTTP) chiar dacă nu este trimisă în antetul protocolului. Exemple
(a se vedea şi descrierea protocolului HTTP):
1. setarea datei de expirare a unui document
<META HTTP-EQUIV=Expires CONTENT="Sun, 22 Mar 1998 16:18:35
GMT">
2. setarea limbajului scripturilor inline din document ca fiind javascript
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
3. setarea limbii în care sînt descrise stilurile inline din document
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
4. setarea codificării unui document (la setul de caractere japonez)
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=SHIFT_JIS">
Folosirea acestei metode în locul specificării în antetul protocolului HTTP poate avea
ca efect reafişarea paginii încă o dată după ce a fost încărcată de anumite browsere.
5. setarea timpului şi adresei de încărcare a unei alte pagini după ce s-a încărcat
documentul curent: <META HTTP-EQUIV=Refresh CONTENT="10;
URL=http://www.alta.com/">
După 10 secunde de la încărcarea paginii curente, browserul trebuie să încarce pagina
de la adresa www.alta.com. De remarcat că nu toate browserele suportă această
proprietate, astfel că e preferată şi oferirea unei alte modalităţi de a încărca pagina
respectivă. Cel mai uzual motiv de folosire a lui Refresh este mutarea unei pagini la o
altă adresă şi păstrarea (cel puţin pentru un timp) şi a vechii adrese, pentru utilizatorii
ce şi-au marcat cu bookmark pagina mutată.
6. Elementul SCRIPT
Sintaxa:
<SCRIPT>... </SCRIPT>
Atribute posibile:
 TYPE = ContentType (tipul conţinutului limbajului scriptului)
 LANGUAGE=CDATA (numele limbajului din script)
 SRC=URI (locaţia scriptului extern)
 CHARSET=Charset (setul de caractere folosit de scriptul extern)
 DEFER (execuţia scriptului poate aştepta)
Conţine:
 Înglobează un script
Conţinut în:
 HEAD, inline elements, block-level elements
Descriere:
Acest element include un script de tip client-side în document. Această tehnică
permite o mai mare interactivitate într-un document prin acţiunile ce pot fi întreprinse
ca răspunsuri la evenimente utilizator. De exemplu, un script poate fi folosit la
verificarea elementelor introduse de utilizator într-un formular ÎNAINTE ca acestea să
fie transmise, oferindu-se în acest mod posibilitatea de notoficare imediată a
utilizatorului în caz de eroare.
Nu toate browserele suportă tehnica scripturilor client-side, iar unele dintre cele care o
suportă permit dezactivarea ei la solicitarea utilizatorului. În acest scop se foloseşte
elementul NOSCRIPT care oferă posibilitatea înglobarii în document a acţiunilor ce
trebuie executate în acest caz. Mai mult, în cazul unor validări ale unor elemente ce se
transmit unor cgi-uri, acestea trebuie să repete aceste verificări pentru a se acoperi şi
cazurile de invalidare/nesuportare a scripturilor client-side.
Mai mult, trebuie reţinut că diversele browsere suportă DIVERSE VARIANTE ale
limbajelor utilizate pentru scrierea scripturilor, fiecare cu bug-urile sale. Browser-ele
cele mai cunoscute ce suportă scripturile client-side sînt Netscape Navigator versiunea
2.0 şi superioară, Microsoft Internet Explorer versiunea 3.0 şi superioară, şi Opera
versiunea 3.0 şi superioară.
Atributul TYPE specifică tipul mediului ce conţine limbajul de scriptare, adică
text/javascript. Majoritatea browser-elor suportă însă numai atributul depăşit
LANGUAGE, cel care specifică numele limbajului folosit. Exemple ale valorilor
suportate de LANGUAGE includ JavaScript, JavaScript1.1, and VBScript. Browser-
ele vor ignora scripturile cu valori ale acestui atribut pe care nu le suportă. De
exemplu, Netscape Navigator 3.0 va executa scripturile cu LANGUAGE =
"JavaScript" sau LANGUAGE="JavaScript1.1" dar va ignora scripturile cu
LANGUAGE = "JavaScript1.2" sau LANGUAGE="VBScript". Implicit se presupune
ca este JavaScript 1.0.
Un script embedded (înglobat) este dat ca şi conţinut al elementului SCRIPT. Atributul
SRC permite autorilor să refolosească codul prin specificarea unui script extern.
Atributul opţional CHARSET oferă metoda de codificare (setul de caractere) al
scriptului extern (tipic ISO-8859-1). Dacă browser-ul nu poate încărca scriptul extern
va executa scriptul embeded, în caz contrar ignorîndu-l pe acesta.
Exemplu:
<SCRIPT TYPE="text/javascript" SRC="foo.js" CHARSET="ISO-8859-1">
<!—
// script embedded, executat NUMAI DACĂ foo.js este nedisponibil
// -->
</SCRIPT>
Netscape Navigator cere ca scripturile externe să-i fie oferite printr-un tip al
conţinutului (cîmpul Content-Type al headerului HTTP) cu o valoare
application/x-javascript.
Atributul DEFER indică posibilitatea ca browserul să poată aştepta parcurgerea
scriptului pînă cînd şi restul documentului a fost prelucrat (afişat, de exemplu).
Scripturile ce utilizează acest atribut nu trebuie să genereze nici un conţinut al
documentului şi nu trebuie să răspundă la evenimente utilizator ce pot apare în
timp ce documentul se încarcă (de exemplu transmiterea unui formular). Acesta
poate fi util în cazul întîrzierii scripturilor ce preîncarcă imagini, chiar dacă
browserele nu îl suportă, în general.
Elementul SCRIPT poate apare de un număr oarecare de ori în headerul sau
corpul unui document (HEAD sau BODY). În mod tipic este amplasat în HEAD,
dacă nu generează conţinut pentru corpul documentului.
Browserele dinaintea lui HTML 3.2 nu recunosc elementul SCRIPT şi îi tratează
conţinutul ca şi cum ar fi HTML normal. Pentru a evita aceste cazuri, se permite
plasarea comentariilor în jurul conţinutului scriptului embedded. De exemplu:
<SCRIPT TYPE="text/javascript">

</SCRIPT>
Atenţie la faptul că "-->" este conţinut într-un comentariu pe o singură linie a
limbajului JavaScript (început cu două caractere slash „/“). Din punct de vedere
practic, prima apariţie a lui "</" urmat de orice literă este considerat tag de sfîrşit
pentru elementul SCRIPT. Autorii trebuie să evite utilizarea şirurilor de tipul
"</P>" în scripturile embedded. JavaScript permite folosirea caracterului \
(backslash) pentru a evita terminarea prematură a elementului SCRIPT, ca în
exemplul acesta: document.write("<\/P>").
7. Elementul ISINDEX
Sintaxa:
<ISINDEX>
Atribute posibile:
 PROMPT = text (mesajul promptului)
 atribute fundamentale (core atributes, vezi mai sus)
 atribute de internaţionalizare (vezi mai sus)
Conţine:
 Nimic
Conţinut în:
 APPLET, BLOCKQUOTE, BODY, CENTER, DD, DEL, DIV, FIELDSET,
FORM, HEAD, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT,
TD, TH
Descriere:
Acest element defineşte o linie singulară de introducere a datelor. Eticheta cîmpului de
intrare este specificată folosind atributul PROMPT. ISINDEX este depăşit în HTML
4.0 de către elementul INPUT. Este echivalent cu FORM cu un singur element de
intrare de tip text, o metodă get şi o acţiune indicînd la adresa (uri) documentului ce
conţine elementul ISINDEX.
8. Elementul OBJECT
Sintaxa:
<OBJECT>...</OBJECT>
Atribute posibile:
 DATA=URI (datele obiectului)
 CLASSID=URI (adresa de implementare)
 ARCHIVE=CDATA (fişierele arhivă)
 CODEBASE=URI (adresa de bază/URI pentru CLASSID, DATA, ARCHIVE)
 WIDTH=Length (lăţimea obiectului)
 HEIGHT=Height (inălţimea obiectului)
 NAME=CDATA (numele pentru transmiterea formularelor)
 USEMAP=URI (imaginea senzitivă/image map de tip client-side)
 TYPE=ContentType (tipul conţinutului obiectului)
 CODETYPE=ContentType (tipul conţinutului codului)
 STANDBY=Text (mesajul ce se va afişa în timp ce se încarcă)
 TABINDEX=NUMBER (poziţia în ordinea de parcurgere)
 DECLARE (nu se instanţiază obiectul)
 ALIGN=[ top | middle | bottom | left | right ] (modul de aliniere a obiectului)
 BORDER=Length (lăţimea/grosimea marginii linkului)
 HSPACE=Pixels (spaţiu lăsat orizontal)
 VSPACE=Pixels (spaţiu lăsat vertical)
 atribute comune
Conţine:
 Elemente PARAM urmate de elemente de tip bloc şi/sau inline
Conţinut în:
 HEAD, elemente de tip inline, elemente de tip bloc cu excepţia lui PRE
Descriere:
Acest element este folosit pentru a include „obiecte“ ca imagini, secvenţe video,
applet-uri Java sau elemente VRML în documentele HTML. Este utilizat pentru a
înlocui elementele mai specifice IMG şi APPLET definite în versiunile anterioare,
precum şi extensiile proprietare (ale diferiţilor producători de browsere), cum ar fi
EMBED şi BGSOUND. Utilizarea acestui element asigură atît o portabilitate
superioară, cît şi o compatibilitate între browsere şi versiuni.
Atributul DATA specifică adresa obiectului înglobat în document. Adresele relative
sînt interpretate în concordanţă cu atributul CODEBASE.
Atributele WIDTH şi HEIGHT definesc dimensiunile obiectului. Valorile pot fi în
pixeli sau în procente relative la dimensiunea părintelui. Majoritatea browsere-lor cer
obligatoriu aceste atribute.
CLASSID poate fi folositor pentru a specifica implementarea obiectului. Applet-urile
Java, Python şi controalele ActiveX oferă implementări pentru obiectul înglobat, fiind
astfel specificate cu atributul CLASSID, ca în exemplul următor:
<OBJECT CLASSID="yahtzee.py" CODETYPE="application/x-python"
STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
<OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java"
WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My
Yahtzee Game">
<OBJECT DATA="yahtzee.gif" TYPE="image/gif"
TITLE="A Yahtzee animation" WIDTH=200 HEIGHT=100>
Yahtzee is my <EM>favorite</EM> game!
</OBJECT>
</OBJECT>
</OBJECT>
Acest exemplu demonstrează şi metoda de utilizare a conţinutului alternativ pentru
browserele care nu pot afişa obiectele înglobate. În acest exemplu, se foloseşte întîi
„varianta“ scrisă în Python a jocului Yahtzee, dacă browserul îl suportă. Pentru
browserele care nu suportă appleturile Python se oferă o alternativă cu versiunea Java.
Mai mult, dacă nici acest tip de applet nu e recunoscut (şi executat) se oferă o imagine
(un gif). La limită este oferit şi un text, ca alternativă extremă. De remarcat că acest
exemplu este compatibil şi cu versiunile anterioare care ignoră tagul OBJECT, afişind
conţinutul elementului din interior (aici un text!).
Tot în acest exemplu este prezentată şi modalitatea de utilizare a atributelor TYPE şi
CODETYPE pentru a permite browserelor evitarea solicitării explicite şi suplimentare
a unui fişier pe care nu îl pot prelucra (afişa). Atributul TYPE specifică tipul
suportului referit de resursa referită de DATA, iar CODETYPE specifică tipul
suportului cerut de datele specificate de CLASSID. Exemplul utilizează şi atributul
STANDBY care afişează un text (scurt) în timpul încărcării obiectului respectiv.
Atributul ARCHIVE poate specifica o listă (cu elemente separate prin blancuri,
elemente ce sînt adrese absolute sau relative la CODEBASE), permiţînd browserului
să încarce mai multe fişiere cu o singură conexiune, ceea ce conduce la scăderea
timpului total de încărcare a unui document compus. Formatul standard de arhivă
pentru Java este JAR. Aceste arhive se pot crea cu utilitarul jar oferit de kitul de
dezvoltare jdk.
Atributul DECLARE face ca obiectul să fie doar o declaraţie ce NU este instanţiată
imediat. Aceasta permite instanţierea obiectelor prin intermediul unei legături, unui
buton sau unui obiect mai tîrziu în acelaşi document. Atributul ID trebuie să fie utilizat
cu obiectele estfel declarate pentru ca mai tîrziu acestea să se poată instanţia prin
intermediul identificatorului atribuit aici.
Exemplu:
<OBJECT DECLARE ID=yahtzee CLASSID="java:Yahtzee.class"
CODETYPE="application/java"
WIDTH=400 HEIGHT=250 TITLE="My Yahtzee Game">
<IMG SRC="yahtzee.gif" ALT="You get the dice!" TITLE="Yahtzee animation">
</OBJECT>
...
<P>Ready to <A HREF="#yahtzee">play Yahtzee</A>?</P>
Elementul OBJECT poate conţine şi elemente PARAM, înaintea oricărui alt conţinut,
pentru a oferi datele de iniţializare la execuţie. Exemplul următor include o secvenţă
video şi un clip audio ca alternativă. Se folosesc parametri recunoscuţi în mod normal
de orice plug-in pentru audio/video, plasaţi înainte de specificarea conţinutului
alternativ:
<OBJECT DATA="mlk.mov" TYPE="video/quicktime"
TITLE="Martin Luther King's "I Have a Dream" speech" WIDTH=150
HEIGHT=150>
<PARAM NAME=pluginspage VALUE="http://quicktime.apple.com/">
<PARAM NAME=autoplay VALUE=true>
<OBJECT DATA="mlk.wav" TYPE="audio/x-wav"
TITLE="Martin Luther King's "I Have a Dream" speech">
<PARAM NAME=autostart VALUE=true>
<PARAM NAME=hidden VALUE=true>
<A HREF="mlk.html">Full text of Martin Luther King's "I Have a Dream" speech</A>
</OBJECT>
</OBJECT>
Atributul USEMAP poate fi folosit cu OBJECT pentru a include o imagine „clicabilă“
– o imagine care este echivalentă cu o serie de legături activate cu un click de mouse
(spre adrese diferite în funcţie de zona de imagine pe care se face clic). Acestea se mai
pot realiza şi cu elementul IMG (fiind mai bine suportate de browsere), dar cele
definite cu OBJECT permit o alternativă textuală completă pentru browserele ce nu
încarcă imaginile. Atributul USEMAP indică spre un element MAP al cărui conţinut
defineşte legăturile în funcţie de coordonatele zonei în care se face clic. Elementul
MAP poate fi inclus în OBJECT, caz în care conţinutul său nu este afişat (ci
interpretat aşa cum e descris anterior), sau în afara lui OBJECT şi atunci conţinutul
său este afişat.
Exemplul următor prezintă un document cu două imagini (cea de a doua ca alternativă
la prima, dacă aceasta nu este suportată). Ambele partajează o definiţie de „hartă“
(zonele de pe imagine) care este inclusă în elementul OBJECT. Elementul MAP
conţine un meniu de legături care sînt afişate de browserele care nu încarcă imaginile:
<OBJECT DATA="sitemap.png" USEMAP="#map" TYPE="image/png"
TITLE="Site map" WIDTH=300 HEIGHT=200>
<OBJECT DATA="sitemap.gif" USEMAP="#map" TYPE="image/gif"
TITLE="Site map" WIDTH=300 HEIGHT=200>
<MAP NAME=map>
<UL>
<LI><A HREF="/reference/" COORDS="5,5,95,195">HTML and CSS
Reference</A></LI>
<LI><A HREF="/design/" COORDS="105,5,195,195">Design Guide</A></LI>
<LI><A HREF="/tools/index.html" COORDS="205,5,295,195">Tools</A></LI>
</UL>
</MAP>
</OBJECT>
</OBJECT>
Atributul TABINDEX specifică (prin intermediul unui număr întreg între 0 şi 32767)
ordinea de parcurgere a elementului dacă se foloseşte tasta TAB. Un element cu
TABINDEX’0 sau fără TABINDEX va fi vizitat după toate elementele care au un
TABINDEX pozitiv. Dintre elementele care au un TABINDEX pozitiv, cele care au o
valoare mai mică vor primi focusul (vor fi vizitate) mai întîi. Dacă au aceeaşi valoare
se vizitează întîi cele care apar întîi în document.
Atributul ALIGN, depăşit în HTML 4.0, specifică modul de aliniere a unui obiect.
Valorile top, middle şi bottom specifică poziţia obiectului faţă de conţinutul
documentului ce-l înconjoară la stînga şi dreapta. ALIGN=middle aliniază centrul
obiectului cu linia de bază a textului (baseline). Pentru a centra un obiect orizontal în
pagină se plasează într-un bloc centrat, ca în exemplul următor:
<P ALIGN=center><OBJECT DATA="foo.mov" TYPE="video/quicktime"></OBJECT></P>
Celelalte valori (left şi right) specifică un obiect flotant (ca poziţie): el este plasat la
marginea din stînga sau din dreapta şi restul conţinutului curge pe lîngă el. Pentru a se
plasa restul conţinutului sub obiect se foloseşte <BR CLEAR=left|right|all> (cel care
se impune în situaţia respectivă). Metodele moderne de aliniere sînt oferite de
proprietăţile vertical-align and float ale stilurilor cascadate (Cascading Style Sheets).
Atributul BORDER (este şi el depăşit în HTML 4.0) specifică grosimea marginii
obiectului. Valoarea 0 are ca efect marginea din jurul unei legături (link) şi trebuie
folosită cu precauţie. Exemplu:
<A HREF="reference/">
<OBJECT DATA="icon/reference.gif" WIDTH=90 HEIGHT=90 BORDER=0></OBJECT>
Web Authoring Reference
</A>
Atributele HSPACE şi VSPACE (şi ele depăşite în HTML 4.0) permit sugerarea unor
spaţii goale verticale şi orizontale în jurul obiectelor a căror dimensiune este dată în
pixeli, egală pentru ambele margini. Metoda modernă este prin intermediul style-
sheet-urilor.
Obiectul OBJECT este cel mai utilizat ca un element BODY şi poate fi conţinut atît în
elemente inline cît şi în elemente de nivel bloc. Conţinutul lui OBJECT trebuie să fie
alcătuit din elementele care pot fi conţinute în părintele lui OBJECT. De exemplu un
element A conţinînd un OBJECT nu poate avea nici un element de nivel bloc ca şi
conţinut al elementului OBJECT.
3.3. Structura corpului unui document HTML (elementul BODY)

Majoritatea elementelor ce apar în corpul unui document (în cadrul elementului BODY)
sînt clasificate fie ca elemente de tip bloc (de nivel bloc) - block-level elements, fie ca
elemente de tip inline – inline elements.
I. Elementele de tip bloc (block level elements)

Elementele de tip bloc în mod tipic conţin elemente inline şi alte elemente de tip bloc.
Cînd sînt prelucrate vizual (afişate pe ecran), de obicei încep cu o linie nouă (de la
capătul rîndului).
Sînt considerate de tip bloc următoarele elemente (unele dintre ele asimilate prin
extensie, pentru că pot include elemente de tip bloc, specificate mai jos cu simbolul ¨):
1. Elementele de tip header (Hn)
 H1 - header de nivelul 1
2. Containere de text
 P - definirea unui paragraf
 DIV - definirea unei diviziuni logice de text
 CENTER - definirea unei diviziuni logice de text centrat în pagină
 PRE - definirea unui text preformatat
 BLOCKQUOTE - definirea unui citat de dimensiuni mari
 ADDRESS - definirea unui bloc cu informaţii specifice de adresă
3. Elementele ce definesc (sau sînt strîns legate de) liste

 UL - definirea unei liste neordonate
 OL - definirea unei liste ordonate
 DIR - definirea unei liste de tip director
 MENU - definirea unei liste de tip menu
 DL - definirea unei liste de definiţii
 LI - definirea unui element ce aparţine unei liste ordonate/neordonate (¨)
 DT - definirea unui termen/definiţie a unui liste de definiţii (¨)
 DD – descriea unei definiţii (¨)
4. Elemente ce definesc tabelele
 TABLE - definirea unui tabel
 CAPTION - definirea titlului unui tabel
 TBODY - definirea corpului tabelului (¨)
 TR - definirea unui rînd al unui tabel (¨)
 TD - definirea unei celule de date (¨)
 TH - definirea unei celule de tip header (¨)
 COLGRUP - definirea unui grup de coloane într-un tabel
 COL - definirea unei coloane a unui tabel (atributele comune)
 THEAD - definirea unui antet al unui tabel (¨)
 TFOOT - definirea unui footer al unui tabel (¨)
5. Alte elemente
 HR - inserarea unei linii orizontale
 FORM - definirea unui formular pentru a introduce date
 FIELDSET - definirea unui grup de controale într-un formular
 ISINDEX - definirea unui text pentru promterul de cerut date de intrare
 FRAMESET - definirea unui „frameset“ (set de frame-uri pentru un document)
(¨)
 NOFRAMES- definirea conţinutului alternativ la setul de frame-uri
 NOSCRIPT - definirea conţinutului alternativ la script-uri
II. Elementele de tip inline (inline level elements)

Elementele de tip inline pot conţine, în mod normal, numai text sau alte elemente de tip
inline. Cînd sînt prelucrate vizual (afişate pe ecran), de obicei NU încep cu o linie nouă
(efectul se propagă din locul în care apar, chiar dacă este în mijlocul unui rînd). Sînt
considerate de tip inline următoarele:
1. Elemente de marcare logică a proprietăţilor unei porţiuni de text/unei fraze –
stilurile logice
 EM - Text scos în evidenţă
 STRONG - Text puternic scos în evidenţă
 CODE - Fragment de cod (bloc de instrucţiuni)
 SAMP - Mostră de text generat de un program
 CITE / Q - Citat scurt / Scurt text reluat după altă sursă
 ABBR - Abreviere
 ACRONYM - Acronim
 DFN - Definiţia unui termen
 KBD - Text ce trebuie introdus de la tastatură
 VAR - Variabilă
2. Elemente de marcare fizică a proprietăţilor unei porţiuni de text – stilurile fizice
 I - Italic
 B - Bold
 U - Subliniat
 STRIKE- Tăiat cu o linie
 S - Text cu o linie pe mijlocul caracterelor
 BIG - Text mai mare
 SMALL - Text mai mic
 SUB - Subscript (indice)
 SUP - Superscript (putere)
 TT - Teletype (stilul maşinilor de scris)
3. Elemente de marcare a proprietăţilor speciale ale unei porţiuni de document
 SPAN - Container generic de text inline
 BR - Line break (sfîrşit de linie)
 A - Anchor (ancoră, legătură hypertext)
 IMG - Imagine
 FONT - Modificarea fontului
 BASEFONT - Modificarea fontului de bază
 BDO - Redefinirea direcţiei în care se citeşte textul
4. Elemente de definire a controalelor din interiorul unui formular

 INPUT - Cîmp de introducere a unor date (button, etc.)
 SELECT - Listă de selecţie
 FIELDSET - Grup de controale ale unui formular
 LEGEND - Titlul unui fieldset
 TEXTAREA - Cîmp de introducere a unui text
 LABEL - Eticheta unui cîmp
 BUTTON - Buton
 OPTGROUP - Grup de opţiuni de meniu
 OPTION - Listă de selecţie a unor opţiune de meniu
5. Alte elemente
 ! - Comentarii
 Textul documentului
III. Elementele de tip nedefinit (pot fi atît inline cît şi block)

Elementele următoare pot fi folosite atît ca elemente de tip bloc cît şi ca elemente de tip
inline. Dacă sînt utilizate ca elemente inline (adică sînt în interiorul unui alt element
inline sau P) ele nu trebuie să conţină nici un element de tip bloc.
 MAP - Definirea unei imagini senzitive (prelucrată client-side)
 AREA - Zonă activă într-o imagine senzitivă
 APPLET - Inserarea unui applet Java
 PARAM - Parameterii unui applet Java
 TEXTFLOW - Text alternativ la un applet
 DEL - Text şters
 INS - Text inserat
 OBJECT - Includerea unui obiect
 SCRIPT - Includerea unui script client-side
 IFRAME - Definirea unei frame inline (în punctul în care apare elementul)
Capitolul 4.
Elemente de bază ale documentelor: Texte, Legături,
Imagini
4.1. Elemente utilizate la formatarea textului unui document
HTML
HTML este construit pe ideea ierarhiilor de informaţii şi pe specificarea elementelor care
reflectă această ierarhie. Într-un document aceasta înseamnă că unele informaţii sînt mai
importante ca altele şi că, de obicei, sînt părţi de text (informaţie) care includ alte
(sub)părţi de text. Cînd se descrie această situaţie într-un document se obţine o structură
care reflectă ierarhia într-un mod asemănător exemplului următor:
I. Primul element principal (Major Topic)
A. Primul Sub-Topic
1. Primul sub-sub-topic care se intinde...<„CR/LF“>
....şi aici... rîndul de sus trebuind să fie întrerupt...
2. Al doilea sub-sub-topic
B. Al doilea Sub-Topic
II. Al doilea element principal (Major Topic)...etc., etc.
Uneori documentul doreşte reflectarea acestei logici. Pentru aceasta este pusă la
dispoziţia autorului posibilitatea definirii de titluri şi/sau subtitluri pe diverse nivele.
De remarcat că un rînd de text afişat de un browser se termină doar atunci cînd se
„termină“ ecranul sau se specifică explicit acest lucru cu un tag special. Inserarea de linii
în document (CR/LF cu „Enter“) nu se reflectă şi la afişare. Browserele ignoră toate
“spaţiile albe“ (white-spaces) din documente (caracterele de tip CR, LF, TAB, etc).
1. Terminarea rîndului (elementul BR)

Sintaxa:
<BR>
Atribute posibile:
 CLEAR=[ left | all | right | none ] (ştergerea/setarea poziţiei obiectelor
flotante)
 atribute comune core
Conţine:
 Nimic (gol)
Conţinut în:
 elemente de tip block
Descriere:
Tag-ul <BR> termină rîndul de text acolo unde este inserat. Cînd navigatorul întîlneşte
tag-ul <BR>, afişează textul care urmează acestui tag începînd de la marginea din
stînga, indiferent unde anume este această margine. De pildă în cazul în care elementul
<BR> este inserat într-o listă, marginea din stînga este alta decît în cazul unui text
normal. Tag-ul se foloseşte cînd dorim să terminăm afişarea rîndului într-un anumit
loc.
Trebuie avută grijă la inserarea acetui tag deoarece modul în care apare un text/linie
depinde şi de fontul utilizat şi dimensiunea sa.
Atributul CLEAR mută dedesubt obiectele flotante (care pot apare în diverse poziţii în
pagină, cum ar fi imaginile şi tabelele). Mult mai flexibilă este metoda stilurilor
deoarece proprietate clear se poate aplica oricărui element).
Exemplu:
Textul următor dintr-un document HTML
Şi dacă ramuri bat în geam,<BR>De ce nu tai copacul?
Are ca efect afişarea în browser:
Şi dacă ramuri bat în geam,
De ce nu tai copacul?
2. Titluri (elementul Hi)

Sintaxa:
<H1>Titlu de nivel 1</H1>
Atribute posibile:
 ALIGN = [ left | center | right | justify ] (alinierea orizontală)
 atribute comune (atribute core, atribute de internaţionalizare şi evenimente
scriptabile)
Conţine:
Conţinut în:
 APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DEL, DD, DIV,
FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT,
OBJECT, TD, TH
Descriere:
Titlurile sînt utilizate pentru ierarhizarea diferitelor secţiuni de text. HTML defineşte
şase nivele pentru titluri, indicate în formatul <Hl> <H2>...<H6>. La afişare titlurile
nu sînt numerotate, diversele navigatoare afişîndu-le astfel încît să iasă în evidenţă
(centrat, îngroşat, subliniat, mărit, etc). Ele nu trebuie identate în document, identările
fiind ignorate de navigatoare. Spre deosebire de titlul documentului (<TITLE> Titlul
documentului </TITLE>), titlurile utilizate la structurarea documentului (<H1> Titlul
de ordinul 1 </H1>) pot avea orice lungime.
H1 defineşte headerul (titlul) de nivel 1, adică cel mai important. În mod normal, într-
un document nu trebuie să existe decît un singur astfel de header. Autorii nu trebuie să
se bazeze pe dimensiunea fontului utilizat în acest caz, ci doar pe importanţa
headerului (titlului) respectiv.
Autorii pot să sugere cum să apară titlurile prin folosirea stilurilor.
Exemplu:
1. Headerul H1 poate fi sugerat astfel:
h1 {
color: #c33;
background: transparent;
font-weight: bold;
text-align: center
}
2. Dimensiunile (normale) ale acestor taguri sînt:
<H1> Header 1 </H1>

<H2> Header 2 </H2>
<H3> Header 3 <H3>
<H4> Header 4 </H4>
<H5> Header 5 </H5>
<H6> Header 6 </H6>
3. Containere de text (stiluri ale unui bloc)
A. Paragrafe (elementul P)
Sintaxa:
<P> Paragraful conţinut </P>
Atribute posibile:
 ALIGN=[ left | center | right | justify ] (aliniere orizontală)
 atribute comune
Conţine:
 elemente inline
Conţinut în:
 ADDRESS, APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD,
DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES,
NOSCRIPT, OBJECT, TD
Descriere:
Prima versiune HTML specifică tag-ul <P> ca tag vid (fără un corespondent </P>.
Cele mai multe navigatoare presupun că paragrafele sînt formatate de această manieră.
Cînd întîlnesc un tag <P>, încep un nou rînd, lăsînd cîteva spaţii verticale (rînduri)
libere între paragraful care tocmai s-a terminat şi cel care tocmai începe. În HTML 2.0
şi HTML 3.0, tag-ul paragraf este nevid <P>...</P>, tag-ul </P> fiind însă opţional,
dar se recomandă folosirea lui cînd se folosesc style-sheet-uri.
Chiar dacă HTMLnu specifică un mod special de prezentare pentru acest tag, autorii o
pot face, sugerînd, de exemplu, identarea paragrafului sau spaţierea prin intermediul
style-sheet-urilor. De exemplu:
P { margin-top: 0; text-indent: 5% }
B. Containerul logic de tip bloc (elementul DIV)

Sintaxa:
<DIV>...</DIV>
Atribute posibile:
 ALIGN=[ left | center | right | justify ] (aliniere orizontală)
 atribute comune
Conţine:
 elemente inline şi elemente de tip bloc (block level)
Conţinut în:
 APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV,
OBJECT, TD, TH
Descriere:
Acest element defineşte un container de tip bloc (block-level) generic, permiţînd
autorilor să specifice diverse atribute globale blocului respectiv (cum ar fi, de
exemplu, stilul sau limba). Cea mai importantă utilizare a acestui element este în
combinaţie cu elementele CLASS, ID sau LANG, elemente definitorii în folosirea
stilurilor (style-sheet). Atributul (depăşit) ALIGN sugerează alinierea orizontală a
conţinutului diviziunii de text definită cu acest element, avînd ca argumente posibile:
left, right, center şi justify. Un echivalent (alias) pentru valoarea center (<DIV
ALIGN=center>) este elementul (preferabil a fi folosit ) <CENTER>. Elementul DIV
are un echivalent la nivelul text – SPAN, utilizat în interiorul paragrafelor şi al
elementelor de tip inline. De remarcat că browserele adaugă, de obicei, o linie nouă
atît înainte cît şi după elementul DIV. De exemplu:
<P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>ccccc<P>ccccc</DIV>
va fi afişată astfel: (o linie goală)
aaaaaaaaa
bbbbbbbbb
ccccc
ccccc (şi apoi încă o linie goală)
C. Containerul logic de tip text/inline (elementul SPAN)

Sintaxa:
<SPAN>...</SPAN>
Atribute posibile:
 atribute comune
Conţine:
 elemente inline
Conţinut în:
Descriere:
Acest element defineşte un container de text generic de tip inline, permiţînd autorilor
să specifice diverse atribute globale textului (zonei de document) respectiv (cum ar fi,
de exemplu, stilul sau limba). Cea mai importantă utilizare a acestui element este în
combinaţie cu elementele CLASS, ID, DIR sau LANG, elemente definitorii în
folosirea stilurilor (style-sheet).
SPAN se foloseşte doar acolo unde nici un alt element de tip inline nu este potrivit.
Dar dacă există un astfel de element atunci acesta este preferabil. De exemplu, în
locul:
<P><SPAN LANG=ro>Mineriadele anilor 90</SPAN> au şocat opinia publică.
se poate folosi:
<P><I LANG=ro> Mineriadele anilor 90</I> au şocat opinia publică.
Dacă în interiorul zonei selectate se află elemente de tip bloc (ca P sau TABLE) se
foloseşte elementul echivalent SPAN.
Exemplu:
Presupunem că vrem să scriem o pagină HTML care să conţină un formular care să
preia date pentru o bază de date. Fiecare cîmp ar trebui să poată fi identificat în mod
unic pentru a putea fi prelucrat separat (validat, de exemplu, cu un script). Întrucît
HTML nu are elemente specifice pentru a identifica, de exemplu, numele persoanei, se
folosesc DIV şi SPAN pentru a obţine efectul structural (şi chiar şi de prezentare)
dorit. De remarcat că fiecare cîmp este plasat într-o celulă a unui tabel, pentru a se
obţine efectele de poziţionare şi aliniere asemănătoare controalelor vizuale din
interfeţele grafice.


<DIV id="client-ionescu" class="client">
<P><SPAN class="client-titlu">Informaţii despre client:</SPAN>
<TABLE class="client-data">
<TR><TH>Nume:<TD>Ionescu</TR>
<TR><TH>Prenume:<TD>Ion</TR>
<TR><TH>Tel:<TD>(51) 123-121</TR>
<TR><TH>Email:<TD>ii@foo.ro</TR>
</TABLE>
</DIV>

<DIV id="client-popescu" class="client">
<P><SPAN class="client-titlu">Informaţii despre client:</SPAN>
<TABLE class="client-data">
<TR><TH>Nume:<TD>Popescu</TR>
<TR><TH>Prenume:<TD>Victor</TR>
<TR><TH>Tel:<TD>(51) 123-212</TR>
<TR><TH>Email:<TD>pv@qwe.ro</TR>
</TABLE>
</DIV>
D. Textul centrat (elementul CENTER)

Sintaxa:
<CENTER>Text Centrat</CENTER>
Atribute posibile:
 atribute comune
Conţine:
Conţinut în:
OBJECT, TD, TH
Descriere:
Acest element defineşte un bloc al cărui conţinut este centrat orizontal. Este o
prescurtare pentru elementul <DIV ALIGN=center>, dar rămîne folositor în special
pentru tabele pe care le centrează (pe ele, nu conţinutul lor!!!) în pagină, evitînd
folosirea lui <TABLE ALIGN=center> care nu este suportat de toate browserele.
Există două modalităţi de centrare a textului. Una cu ajutorul tag-ului <CENTER> iar
cealaltă cu ajutorul atributului ALIGN care ia valoarea CENTER. ALIGN=CENTER
este un atribut care poate fi utilizat în conjuncţie cu majoritatea tag-urilor.
Exemplu:
<CENTER>
<TABLE>
<TR ALIGN=center>
<TH SCOPE=col>Name</TH>
<TH SCOPE=col>Age</TH>
<TH SCOPE=col>Country</TH>
</TR>
<TR ALIGN=center>
<TD>Liam Quinn</TD>
<TD>20</TD>
<TD>Canada</TD>
</TR>
</TABLE>
</CENTER>
E. Textul preformatat (elementul PRE)

Sintaxa:
<PRE> text preformatat (conţine tab-uri, multe spaţii, etc) </PRE>
Atribute posibile:
 WIDTH=Număr (lăţimea unei linii)
 atribute comune
Conţine:
 elemente inline cu excepţia: IMG, OBJECT, APPLET, BIG, SMALL, SUB,
SUP, FONT, BASEFONT
Conţinut în:
OBJECT, TD, TH
Descriere:
Majoritatea documentelor HTML conţin text marcat cu tag-uri HTML. Aceasta face
ca textul să fie afectat de restricţiile HTML în sensul că toate spaţiile suplimentare
(tab-uri, mai multe spaţii, RETURN) să fie ignorate de către navigator. Afişarea
acestor texte, aşa cum sînt ele, se poate face prin utilizarea tag-urilor <PRE> ...
</PRE>. Toate spaţiile suplimentare cuprinse între aceste două tag-uri vor fi afişate
aşa cum sînt. Aceasta ne permite utilizarea textului preformatat pentru afişarea
tabelelor şi chiar a unei grafici rudimentare obţinute cu caractere ASCII. Textul
preformatat este afişat în majoritatea cazurilor cu fontul Courier monospaţiat.
Atributul WIDTH oferă informaţii despre lăţimea liniei, astfel ca browserul să aleagă
un font şi o spaţiere adecvată, dar de obicei este ignorat.
Autorii care folosesc PRE trebuie să evite dependenţa de elementele înconjurătoare
datorită modului specific de afişare (de la un browser la altul) a unui astfel de text. Se
foloseşte în special la inserarea unor bucăţi de program (cod), pentru care eliminarea
spaţiilor ar face citirea mult mai grea. Exemplu de cod Java inserat CA TEXT!!! într-o
pagină HTML:
<PRE><CODE CLASS=Java>
class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello World!");
}
}
</CODE></PRE>
CODE este un element care se utilizează pentru a oferi informaţie structurală.
F. Adrese (elementul ADDRESS)

Sintaxa:
<ADDRESS>Informaţii de contact</ADDRESS>
Atribute posibile:
 atribute comune
Conţine:
 elemente inline şi P
Conţinut în:
OBJECT, TD, TH
Descriere:
Tag-ul adresă este utilizat pentru entităţile gen semnătură. De regulă este folosit la
sfîrşitul documentelor, acolo unde sînt inserate informaţiile cu privire la autorul
documentului, data publicării şi adresa de contact. De regulă, adresele sînt precedate
de o linie orizontală iar informaţiile conţinute sînt afişate pe rînduri diferite cu ajutorul
tag-ului <BR>.
Exemplu:
Dacă într-un document apar informaţiile de adresă de tipul:
<ADDRESS>
Most recent update: 28/01/99 <BR>
For more information contact <<A HREF="mailto:lp@lp.ro"> lp@lp.com</A>>
</ADDRESS>
în browser va apare:
Most recent update: 28/01/99
For more information contact <lp@lp.com>
G. Citate lungi (elementul BLOCKQUOTE)

Sintaxa:
<BLOCKQUOTE> Citat lung </BLOCKQUOTE>
Atribute posibile:
 CITE=URI (sursa de unde se citează)
 atribute comune
Conţine:
 elemente inline sau elemente de tip bloc sau SCRIPT
Conţinut în:
OBJECT, TD, TH
Descriere:
Acest element este utilizat pentru citate mai lungi care pot conţine elemente de tip bloc
(de exemplu P sau TABLE), spre deosebire de <Q> ... </Q> utilizat în citate scurte.
Atributul opţional CITE indică adresa sursei citate, oferind posibilitatea de verificare
şi oferind referinţe suplimentare. Nu este însă suportat de toate browserele.
Punerea în evidenţă a citatelor se face de regulă prin identare diferită faţă de restul
textului. De aceea, pînă la implementarea style-sheet-urilor, elementul se folosea mai
ales pentru identarea unui bloc de text faţă de textul înconjurător. Acum această
metodă este considerată depăşită.
Exemplu:
Citatul definit în modul următor:
<BLOCKQUOTE CITE="http://www.bibliomania.com/Fiction/xxx.html" >
...orice generalizare presupune într-o anumită măsură credinţa în unitate şi simplitatea naturii. <p>În
ceea ce priveşte unitatea aici nu poate exista vreo dificultate.
</BLOCKQUOTE>
va apărea astfel:
"...orice generalizare presupune într-o anumită măsură credinţa în unitate şi simplitatea naturii.
În ceea ce priveşte unitatea aici nu poate exista vreo dificultate."
H. Citate scurte (elementul Q)

Sintaxa:
<Q> Citat scurt </Q>
Atribute posibile:
 CITE=URI (sursa de unde se citează)
 atribute comune
Conţine:
 elemente inline
Conţinut în:
 elemente inline şi elemente de tip bloc
Descriere:
Acest element este utilizat pentru citate scurte, care nu necesită paragrafe, spre
deosebire de <BLOCKQUOTE> utilizat în citate lungi. Atributul opţional CITE indică
adresa sursei citate, oferind posibilitatea de verificare şi oferind referinţe suplimentare.
Nu este însă suportat de toate browserele.
Punerea în evidenţă a acestor citate se face de regulă prin introducerea lui între
ghilimele, de fapt între simbolurile folosite pentru citate în limba în care este dat
citatul, dacă aceasta este specificată cu elementul LANG. Astfel, nu este
responsabilitatea autorului să pună aceste simboluri!
Exemplu:
Citatul definit în modul următor:
John said, <Q lang="en-us">I saw Lucy at lunch, she says <Q lang="en-us">Mary wants you to
get some ice cream on your way home.</Q> I think I will get some at Ben and Jerry's, on
Gloucester Road.</Q>
va apare (datorită specificării limbii engleze americane) astfel:
John said, "I saw Lucy at lunch, she told me 'Mary wants you to get some ice cream on your way
home.' I think I will get some at Ben and Jerry's, on Gloucester Road."
4. Stilurile caracterelor
Utilizarea tag-urilor pentru paragrafe, titluri sau liste afectează textul ca un întreg
schimbînd fontu-rile, spaţierea verticală, adăugînd o bulină sau un număr. Tag-urile
pentru stilurile caracterelor afec-tează felul în care vor fi afişate numai anumite cuvinte
sau chiar numai anumite caractere (de pildă afişîndu-le italic, îngroşat sau subliniat).
Există două tipuri de stiluri ale caracterelor: stiluri logice şi stiluri fizice. Disticţia între
stilurile logice şi fizice a fost importantă în era browserelor ce nu afişau decît text simplu
(cum a fost, de exemplu, LYNX) şi nu erau capabile să afişeze texte italice, bold, etc, de
aceea se recomanda folosirea stilurilor logice. Dar odată cu apariţia browserelor de tip
GUI nu mai există nici un motiv pentru a evita stilurile fizice sau pentru a ţine cont de
distincţia dintre ele (B şi STRONG vor apare în multe din aceste browsere la fel, fără a fi
însă siguri de aceasta). Se recomandă astfel în primul rînd consistenţa de-a lungul textului
atunci cînd se doreşte scoaterea în evidenţă a unei porţiuni de text.
4.1. Stilurile logice
Tag-urile pentru stilurile logice indică doar cum anume să fie utilizat textul marcat nu şi
cum anume să fie afişat. Din acest punct de vedere sînt asemănătoare tag-urilor folosite la
marcarea paragrafelor sau titlurilor. Tag-urile stilurilor logice indică doar faptul că textul
este o definiţie, o bucată de cod sau doar o porţiune de text care trebuie scoasă în evidenţă
în raport cu contextul. Este complet la latitudinea navigatorului (şi uneori, a utilizatorului
acestuia prin anumite setări ale browserului) să determine cum anume va fi prezentat
textul marcat cu aceste tag-uri, dacă va fi îngroşat, italic sau evidenţiat în alt mod.
Toate tag-urile stilurilor logice sînt nevide. Există mai multe tipuri de tag-uri pentru
aceste stiluri:
Tag Utilizare
</EM> ... </EM> Text accentuat
<STRONG> ... </STRONG> Textul marcat va fi mai puternic accentuat
<CODE> ... </CODE> Secvenţă de cod afişată cu font fix (ex Courier)
<SAMP> ... </SAMP> Eşantion; similar lui <CODE>
<KBD> ... </KBD> Text tastat de utilizator
<VAR> ... </VAR> Nume de variabilă
<DFN> ... </DFN> Definiţie (cuvînt care va fi definit)
<CITE> . . </CITE> Un scurt citat
<DFN> Definiţia unui termen
<Q> Un citat scurt, în interiorul unui paragraf.
<ACRONYM> Un acronim
<ABBR> O abreviere
<INS> Un text inserat (un document, de pildă)
<DEL> Text marcat ca şters
<SUB> Indice
<SUP> Exponent
4.2. Stilurile fizice
Tag-urile pentru stilurile fizice indică navigatorului cum anume să fie afişat textul
marcat, de pildă îngroşat (bold), italic sau uniform (monospaţiat) spaţiat (asemănător
textului produs de maşinile de scris). Utilizarea stilurilor fizice are neajunsul că dacă
navigatorul nu poate afişa acel stil el îl va substitui cu un altul. Tag-urile stilurilor fizice
sînt:
Tag Utilizare
<B> ... </B> Text îngroşat (aldin)
<I> ... </I> Textul italic (cursiv)
<U> ... </U> Text subliniat
<S> ... </S> sau Text tăiat
<STRIKE> ... </STRIKE>
<BIG> ... </BIG> Text afişat cu un font mai mare decît restul
<SMALL> ... </SMALL> Text afişat cu un font mai mic decît restul
<TT> ... </TT> Text monospaţiat
Exemplu: Utilizarea acestor taguri:
<P><b>bold</b>, <i>italic</i>, <b><i>bold italic</i></b>, <tt>teletype text</tt>, and
<big>big</big> and <small>small</small> text.
poate produce efecte ca în figura următoare:
5. Elemente de modificare a fontului caracterelor
A. Dimensiunea fontului
Sintaxa:
<FONT> Text cu font schimbat</FONT>
Atribute posibile:
 SIZE = Dimensiune (dimensiunea fontului)
 COLOR = Culoarea (culoarea fontului)
 FACE = Felul fontului (felul fontului/font face)
 atribute core
 atribute de internaţionalizare
Conţine:
 elemente inline
Conţinut în:
 inline elements, block-level elements, cu excepţia lui PRE
Descriere:
Tag-urile <FONT> ... < / FONT>, împreună cu atributul SIZE permit modificarea
dimensiunii fontului de bază, a cărui valoare implicită este 3 (specificată printr-o altă
extensie, şi anume <BASEFONT>, font de bază care are de asemenea atributul SIZE).
Valorile atributului SIZE sînt între 1 şi 7. Dimensiunea fontului poate fi specificată şi
relativ la fontul de bază, situaţie în care valorile lui SIZE sînt între -3 şi +4.
Acest tag, total depăşit în HTML 4.0, este folosit pentru modificări rudimentare ale
caracteristicilor fontului cu care e afişat textul. Folosirea acestuia introduce numeroase
probleme legate de accesibilitatea pe diverse platforme (care pot să nu aibă instalat un
anumit font, de exemplu), probleme ce se pot evita prin utilizarea stilurilor (style-
sheet).
Exemplu: Dimensiunile fonturilor (văzute în browsere) sînt:
FONT SIZE=1
FONT SIZE=2
FONT SIZE=3
FONT SIZE=4
FONT SIZE=5
FONT SIZE=6
FONT SIZE=7
Exemplu: Dimensiunile fonturilor (văzute în browsere) specificate relativ arată astfel:
Exemplu: Următorul fragment de text, descris cu aceste caracteristici, arată ca în figura

de mai jos:
<FONT FACE="ARIAL" SIZE=2 COLOR="#339966">
<H1>The Scariest Jungle</H1>
</FONT>
<FONT FACE="ARIAL" SIZE=2>
Follow the map to see <I>lions</I> and <I>tigers</I> and <I>bears</I>.
<B>Oh, my!</B>
</FONT>
B. Stabilirea fontului de bază
Sintaxa:
<BASEFONT>
Atribute posibile:
 SIZE = Dimensiune (dimensiunea fontului)
 COLOR = Culoarea (culoarea fontului)
 FACE = Fel (felul fontului/font face)
 ID = ID (identificator)
Conţine:
 nimic
Conţinut în:
 inline elements, block-level elements, cu excepţia lui PRE
Descriere:
Spre deosebire de FONT, tagul BASEFONT modifică fontul de bază, aplicîndu-se
tuturor elementelor care urmează, cu excepţia titlurilor (Hn). Chiar dacă nu e
specificat, utilizarea lui BASEFONT în tabele (cu elementul TABLE) produce efecte
imprevizibile şi diferite, de la browser la browser.
Acest tag, total depăşit în HTML 4.0, este folosit pentru modificări rudimentare ale
caracteristicilor fontului cu care e afişat textul. Folosirea acestuia introduce numeroase
probleme legate de accesibilitatea pe diverse platforme (care pot să nu aibă instalat un
anumit font, de exemplu), probleme ce se pot evita prin utilizarea stilurilor (style-
sheet).
Atributul SIZE specifică dimensiunea fontului ce se doreşte folosit, dimensiune
dependentă de browser, pe o scală de la 1 la 7, cu o valoare implicită de 3. Atributele
COLOR şi FACE, suportate foarte slab sugerează culoarea şi felul fontului. Mult mai
bine suportată şi mai adecvată este folosirea style-sheet-urilor pentru aceste atribute.
4.2. Definirea şi utilizarea listelor
HTML oferă mai multe mecanisme prin care să se poată defini liste de informaţii, avînd
în vedere larga utilizare a acestora. Există mai multe feluri de liste, toate avînd însă cîteva
elemente comune:
 Întreaga listă este încadrată de tag-uri de început şi de sfîrşit de listă: <UL> şi
</UL>, <OL> şi </OL>, etc.
 Fiecare element al listei are propriul lui tag: <DT> şi <DD> pentru listele glosar şi
<LI> pentru toate celelalte liste.
Există trei tipuri standard de liste: neordonate (UL), ordonate (OL) şi liste de definiţii
(DL). Se mai pot defini şi liste de tip MENU şi DIR (definite iniţial în 2.0) dar care sînt
acum considerate depăşite şi vor fi afişate la fel ca UL si DL.
1. Definirea listelor ordonate (cu elemente numerotate)

Sintaxa:
<OL>
<LI> Primul element al listei ordonate
<LI> Al doilea element
<LI> A1 treilea element...
</OL>
Atribute posibile:
 TYPE=[ 1 | a | A | i | I ] (stilul de numerotare)
 START=Number (numărul de început al elementelor)
 COMPACT (afişare compactă)
 atribute comune
Conţine:
 unul sau mai multe elemente LI
Conţinut în:
OBJECT, TD, TH
Descriere:
Listele ordonate încep cu <OL> şi se încheie cu </OL> (OL este o abreviere de la
Ordered List) şi fiecare element este introdus în listă cu ajutorul tag-ului vid <LI>.
Cînd navigatorul interpretează o listă ordonată el numerotează secvenţial fiecare
element întîlnit (nu se numerotează în document). Identarea în textul original (cel ce
va fi afişat) nu este obligatorie, folosindu-se doar pentru a putea fi mai uşor reperate
listele din restul textului.
Atributul TYPE sugereză stilul de numerotare. Valorile pe care le poate lua sînt
(literele mici diferă de cele mari):
1 (numere zecimale: 1, 2, 3, 4, 5, ...)
 a (literele mici ale alfabetului: a, b, c, d, e, ...)
 A (literele mari ale alfabetului: A, B, C, D, E, ...)
 i (numerele Romane scrise cu litere mici: i, ii, iii, iv, v, ...)
I (numerele Romane scrise cu litere mari: I, II, III, IV, V, ...)
Atributul START indică primul număr folosit la numerotarea elementelor listei.
Exemplu:
Prepararea unei căni de ceai.
<OL>
<LI> Puneţi apa la fiert
<LI> Puneţi ceaiul preferat într-o cană de porţelan
<LI> Turnaţi apa fierbinte peste ceai şi acoperiţi cana
<LI> Aşteptaţi 3 minute
</OL>
2. Definirea listelor neordonate (nenumerotate)

Sintaxa:
<UL>
<LI> Primul element al listei neordonate
<LI> Al doilea element
<LI> A1 treilea element...
</UL>
Atribute posibile:
 TYPE=[ disc | square | circle ] (stilul bulletului folosit pentru elemente)
 atribute comune
Conţine:
 unul sau mai multe elemente LI
Conţinut în:
OBJECT, TD, TH
Descriere:
Diferenţa faşă de lista ordonată (OL) este că elementele nu vor apare numerotate, ele
fiind afişate identat, unele sub altele, precedate de un semn specific elementelor
listelor (de exemplu bulina •). Acest semn este determinat de atributul TYPE şi poate
lua valorile:
 disc (cerc umplut/plin)
 square (pătrat)
 circle (circumferinţa unui cerc)
Acestea arată, de obicei, astfel:
Exemplu: Un meniu la restaurant poate fi descris astfel:

<UL>
<LI> Ciorbă de burtă
<LI> Ciorbă de perişoare
<LI> Alte ciorbe
</UL>
Listele neordonate trebuie marcate cu tag-urile <UL> iar elementele listei se introduc la
fel ca în listele ordonate. Rezultatul este o listă ale cărei elemente sînt marcate cu buline
sau alte caractere (dacă „nivelul“ pe care apar este mai mare de 1). Forma lor (pentru sub-
liste) poate fi schimbată definind o nouă listă în interiorul primeia, după modelul următor:
<UL>
<UL>
<LI> Element al noii liste
<LI> Un alt element, etc
</UL>
</UL>
3. Definirea elementelor unei liste (tagul LI)

Sintaxa:
<LI> Element al listei... </LI>
Atribute posibile:
 TYPE=[ disc | square | circle | 1 | a | A | i | I ] (stilul de marcare a elementelor
listei)
 VALUE=Number (numărul elementului din secvenţă)
 atribute comune
Conţine:
 elemente inline şi elemente de tip bloc (bloc level)
Conţinut în:
 OL, UL, MENU, DIR
Descriere:
Elementele listelor se definesc folosind acest tag. Atributul VALUE poate specifica
numărul din secvenţă care se „atribuie“ acelui element. Atributul TYPE specifică
elementul grafic/alfabetic ce va marca elementul respectiv. Valorile pe care le poate
lua sînt:
 Valorile pentru LI în UL, DIR sau MENU:
 disc (cerc umplut/plin)
 square (pătrat)
 circle (circumferinţa unui cerc)
 Valorile pentru LI în OL:
 1 (numere zecimale: 1, 2, 3, 4, 5, ...)
 a (literele mici ale alfabetului: a, b, c, d, e, ...)
 A (literele mari ale alfabetului: A, B, C, D, E, ...)
 i (numerele Romane scrise cu litere mici: i, ii, iii, iv, v, ...)
 I (numerele Romane scrise cu litere mari: I, II, III, IV, V, ...)
4. Definirea listelor de definiţii (glosar)

Sintaxa:
<DL>
<DT> Termen care urmează să fie definit </DT>
<DD> Definiţia termenului </DD>
<DT> Alt termen </DT>
<DD> Altă definiţie </DD>
</DL>
Atribute posibile:
 atribute comune
Conţine:
 unul sau mai multe elemente DT sau DD
Conţinut în:
OBJECT, TD, TH
Descriere:
Listele de definiţii (uneori numite şi liste glosar) sînt uşor diferite faţă de celelalte
liste. Fiecare element al listei este format din două părţi: termenul de definit şi
definiţia. Listele de definiţii încep cu <DL> şi se termină cu </DL>. Termenii care
trebuie definiţi sînt inseraţi cu ajutorul etichetei <DT> iar definiţiile corespunzătoare
se introduc cu ajutorul etichetei <DD>.
O listă de definiţii poate avea mai mulţi termeni pentru o definiţie dată, precum şi mai
multe definiţii pentru un termen. De asemenea se poate da un termen fără o definiţie
corespunzătoare şi vice versa (!), dar o astfel de structură are sens în cazuri extrem de
rare.
Listele de definiţii sînt formatate de navigatoare astfel încît termenii şi definiţiile sînt
separaţi prin linii iar marginile definiţiilor sînt identate. Cu ajutorul atributului
COMPACT, <DL COMPACT>, lista de definiţii ar trebui să fie formatată pe o
suprafaţă ecran mai mică. Se pare însă că majoritatea navigatoarelor ignoră acest
atribut.
O listă de acest tip poate fi adaptată şi pentru utilizarea cu structuri care nu sînt
termeni stricţi şi definiţii (în sensul uzual), această practică fiind justificată cînd alte
elemente HTML nu pot descrie adecvat acea structură. De exemplu, o listă cu
programul unei persoane dintr-o săptămînă ar putea fi definită astfel:
<H1>Programul săptămînal</H1>
<DL CLASS=calendar>
<DT>21 ianuarie</DT>
<DD>
Minerii din Valea Jiului prezintă <CITE>Lupta cu jandarmii</CITE> în comuna
Costeşti. Trebuie văzută.
</DD>
<DT>22 ianuarie</DT>
<DD>
Marius Tucă Show, de la 7:00 la 9:00, invitaţie la <ABBR
TITLE=Street>St.</ABBR> Ploieştului numărul 1
</DD>
</DL>
5. Definirea termenilor unei liste de definiţii (tagul DT)
Sintaxa:
<DT> Element al listei... </DT>
Atribute posibile:
 atribute comune
Conţine:
 elemente inline
Conţinut în:
 DL
Descriere:
DT defineşte un termen într-o listă de definiţii. Tagul de sfîrşit este opţional dar se
recomandă a fi folosit pentru a preveni anumite erori cînd se folosesc stilurile (style-
sheets). DT nu poate conţine elemente de tip bloc (ca de exemplu P sau Hn). În
general tagul este urmat de un element DD pentru denirea termenului respectiv. Un
termen poate avea mai multe definiţii asociate cu el, după cum şi o singură definiţie
poate avea mai mulţi termeni.
6. Definirea definiţiei unui termen al unei liste de definiţii (tagul DD)
Sintaxa:
<DD> Element al listei... </DD>
Atribute posibile:
 atribute comune
Conţine:
 elemente inline şi elemente de tip bloc (bloc level)
Conţinut în:
 DL
Descriere:
Elementul DD oferă definiţia unui termen dintr-o listă de definiţii. Tagul de sfirşit este
opţional dar se recomandă a fi folosit pentru a preveni anumite erori cînd se folosesc
stilurile (style-sheets). DT poate conţine elemente de tip bloc (ca de exemplu P, Hn,
TABLE sau chiar DL). Astfel listele de definiţii pot fi îmbricate.
7. Definirea listelor de tip meniu şi director

Sintaxa:
<MENU>
<LI> Primul element din meniu
<LI> Al doilea element din meniu
<LI> Al treilea element din meniu
</MENU>
<DIR>
<LI> fişiere/
<LI> aplicaţii/
<LI> poştă/
</DIR>
Descriere:
Meniurile sînt liste simple de elemente sau scurte paragrafe care nu sînt inserate cu
ajutorul numerelor sau bulinelor. Afişarea lor se face prin identare diferită sau o
formatare diferită de restul textului. Listele director sînt şi mai scurte decît listele
meniu, sînt identate şi formatate în coloane de către navigatoare, în mod asemănător
listelor director din Unix. Meniurile au fost proiectate pentru a fi folosite ca liste cu o
singură coloană.
În practică un browser va afişa listele definite cu DIR şi MENU exact ca cele definite
cu UL!
8. Imbricarea listelor
Imbricarea listelor se realizează simplu: se inserează o nouă listă în interiorul primei liste.
Se pot insera liste neordonate în interiorul celor ordonate si viceversa. Felul în care apar
afişate listele imbricate diferă mult de la un navigator la altul.
Exemplu: Meniul (mai complet) de la restaurant:
<OL>
<LI> Ciorbe
<UL>
<LI> Ciorbă de burtă
<LI> Ciorbă de perişoare
<LI> Alte ciorbe
</UL>
<LI> Felul doi
<LI> Desert
</OL>
9. Formatarea listelor
Pentru liste, navigatorul este acela care hotărăşte forma bulinelor sau schema de
numerotare. Netscape a introdus cîteva atribute prin care se oferă un mai mare control
asupra tipurilor de buline utilizate pentru marcarea elementelor din listele neordonate.
Atributul TYPE determină forma „bulinei“:
TYPE=DISC, pentru o bulină circulară, compactă (implicită)
TYPE=CIRCLE, pentru un contur circular
TYPE=SQUARE, pentru un contur de forma unui pătrat
Exemplu:
<UL>
<LI TYPE=DISC >Disc
<LI TYPE=CIRCLE>Cerc
<LI TYPE=SQUARE>Patrat
</UL>
Pentru listele ordonate, atributul TYPE are un alt set de valori care indică schema de
numărare:
TYPE=1, implicit, ordonează elementele listei prin numere arabe (1, 2, 3,...)
TYPE=A, ordonează elementele listei prin litere mari (A, B, C, ...)
TYPE=a, ordonează elementele listei prin litere mici (a, b, c, ...)
TYPE=I, ordonează elementele listei prin numere romane mari (I, II, III, ...)
TYPE=i, ordonează elementele listei prin numere romane mici (i, ii, iii, ...)
4.3. Tag-uri (elemente) pentru legături hypertext

Adevărata putere a limbajului HTML stă în capacitatea sa de a include în documentele
HTML a unor legături (link-uri) către alte „documente“ de pe Web. Legăturile
transformă documentele simple afişate doar pe ecran într-o „bibliotecă universală“ în care
materialele dorite a fi consultate vin la cititor aproape instantaneu, iar documentele statice
devine în acest fel documente interactive.
Legătura/link-ul (hyperlegătura, hyperlink-ul) este construcţia de bază, putînd fi definită
ca o conexiune de la o resursă Web la alta. Chiar dacă pare un concept simplu, ea a fost
forţa primară care a asigurat succesul Webului. O legătură (link) are două capete, numite
uneori ancore, şi o direcţie. Link-ul porneşte de la ancora sursă şi indică spre ancora
destinaţie care poate fi orice resursă Web (un document HTML, un element din interiorul
unui document HTML, o imagine, un clip, un sunet, un program, etc).
Acţiunea implicită asociată cu o legătură este aducerea (încărcarea) în navigator
(browser) a resursei către care indică legătura. Acest comportament este obţinut de obicei
(şi implicit) prin selectarea legăturii (de exemplu cu mouse-ul prin clic, de la tastatură,
etc). Elementul esenţial al unei legături este tagul <A>...</A> utilizat pentru marcarea
(hyper)legăturilor. El are întotdeauna atribute asociate pentru a indica ce tip de legătură
este. Există două tipuri de bază:
1. Ancora NUME care marchează o locaţie particulară din document ca ţintă la care pot
indica (la care se pot cupla) alte documente; atributul definitoriu este NAME (sau un
echivalent: un alt element împreună cu atributul ID).
Exemplu:
<A HREF="document.html">Text activ</A>
HREF (provenind de la Hypertext REFerence = referinţă hypertext) este atributul care
are ca valoare numele documentului HTML care va fi adus dacă textul dintre tag-uri
(afişat de navigator astfel încît să iasă în evidenţă) va fi selectat.
2. Ancora LEGĂTURĂ, indicată de atributul HREF, care indică browserului să „sară“

la altă resursă (să o încarce), dacă legătura curentă este selectată.
Exemplu:
<P><A href="#section1">Introduction</A><BR>
...
<H2 id="section1">Introduction</H2>
...section 1...
Textul „Introduction“ este un text activ care dacă este selectat are ca efect „saltul“ la
resursa identificată prin numele „section1“. Această resursă este de fapt o porţiune din
document care începe cu titlul (headerul H2) care are ca atribut id="section1".
Sintaxa:
<A>...</A>
Atribute posibile:
 HREF=URI (referinţa hypertext)
 NAME=CDATA (destinaţia)
 REL=LinkTypes (relaţii către legătură)
 REV=LinkTypes (relaţii de la legătură)
 TYPE=ContentType (tipul conţinutului destinaţiei)
 TARGET=FrameTarget (frame-ul în care se aduce resursa indicată de legătură)
 HREFLANG=LanguageCode (limba în care e scrisă legătura)
 CHARSET=Charset (setul de caractere utilizat la scrierea legăturii)
 ACCESSKEY=Character (combinaţie de taste de acces / shortcut key)
 TABINDEX=Number (poziţia în ordinea de parcurgere cu TAB)
 SHAPE=[ rect | circle | poly | default ] (hartă senzitivă / client-side image map)
 COORDS=Coords (hartă senzitivă / client-side image map)
 ONFOCUS=Script (elementul a primit focusul)
 ONBLUR=Script (elementul a pierdut focusul)
 atribute comune
Conţine:
 elemente inline, fără A
Conţinut în:
 elemente de tip block-level, elemente de tip inline, fără A
Descriere:
Pentru crearea unei legături este nevoie de două lucruri:
 Numele documentului / resursei la care se face legătura
 Textul care va deveni activ
Marcarea textului activ în documentul iniţial (de la care porneşte legătura) se face cu
tag-ul nevid <A>...</A>. Tot textul dintre tag-ul de început (<A>) şi cel de sfîrşit
(</A>) va deveni capătul legăturii afişat pe ecran şi va fi prezentat de navigator altfel
decît textul obişnuit. <A> (numită şi tag-ul ancoră) include şi informaţii suplimentare
despre legătură (atribute). Navigatorul utilizează ancora pointer dintr-un document
pentru a găsi cel de-al doilea document. Pentru a identifica ancorele pointer se
marchează o porţiune de text (sau o imagine) astfel încît navigatorul să le deosebească
de restul documentului.
Atributul HREF (de la Hypertext REFerence) este utilizat pentru specificarea URI-
ului documentului ţintă. Este de fapt modul de localizare a documentului care va fi
adus la selectarea textului activ. Atributul suplimentar TYPE poate fi folosit pentru a
indica tipul (în categorisirea Internet) a resursei către care se indică, permiţînd
browserelor care nu pot interpreta (afişa) un anumit tip de resurse să nu le mai încarce.
Acest atribut specifică legăturile către resursele Internet în concordanţă cu diverse
protocoale de acces a acestora, protocoale specificate, ca parte integrantă din URI.
Cele mai utilizate protocoale:
 HTTP:// - legătură la un alt document HTML
 FTP:// - legătură (anonimă) la un server FTP
 MAILTO:// - se activează editorul de e-mail pentru a se compune un mesaj şi a
se trimite la adresa specificată
 TELNET:// - legătură la o adresă Telnet
 WAIS:// - legătură la un server de indexare WAIS
 USENET:// - legătură la o adresă Usenet
 GOPHER:// - legătură la un server Gopher
Atributul opţional TITLE indică titlul documentului către care punctează legătura (o
scurtă descriere a acesteia) şi poate fi astfel afişat împreună cu URL-ul (sub forma
unui tool-tip). Uneori, dacă legătura este de tip „mailto“, valoarea acestui atribut e
folosită ca subiect al e-mail-ului care se va trimite.
Atributul NAME defineşte o destinaţie pentru o legătură. De exemplu, un document
ce conţine:
<H1><A NAME=foo>My Heading</A></H1>
defineşte o destinaţie pentru legături numită „foo“. Se poate astfel folosi
HREF="#foo" într-un element A din acelaşi document, sau
HREF="somedoc.html#foo", din alt document.
Un element A nu poate conţine un alt element A, astfel că trebuie avut în vedere că
ancorele ce definesc nume de secţiuni NU pot conţine ancore care indică legături. Dar
se pot utiliza atît NAME cît şi HREF într-un singur element A pentru a se evita aceste
probleme.
ID este atributul care înlocuieşte atributul NAME şi care poate fi folosit cu aproape
orice element pentru a defini o destinaţie. Exemplul anterior poate fi scris:
<H1 ID=foo>My heading</H1>
Nu toate browserele oferă suport însă pentru ID, astfel că NAME se mai păstrează
încă. Atît NAME cît şi ID trebuie să fie unice într-un document şi să difere şi prin
altceva în afara literelor mici/mari. Valorile admise trebuie să înceapă cu o literă din
intervalul A-Z sau a-z şi trebuie să urmeze numai caracterele A-Z, a-z, 0-9, liniuţa de
despărţire, de subliniere, virgula, punctul. Cînd este folosit ca şi destinaţie a unei
legături, numele astfel definit este case sensitive (literele mari/mici diferă).
Atributele REL şi REV indică relaţiile între o ancoră şi resursa indicată de legătură.
REL defineşte o relaţie de la documentul curent la cel indicat de legătură, în timp ce
REV defineşte o relaţie în sensul opus. De exemplu:
<A HREF="foo.html" REL=glossary>...</A>
indică faptul că foo.html este glosar pentru documentul curent, în timp ce
<A HREF="bar.html" REV=subsection>...</A>
indică faptul că documentul curent este o subsecţiune a lui bar.html.
Atributul TARGET indică în ce frame să se încarce resursa indicată de legătură. Dacă
nu există un astfel de frame (cadru-pagină) se va deschide o feeastră nouă. Se pot
folosi şi nume speciale (care încep cu o liniuţă de subliniere) de frame-uri:
 _blank – fereastră nouă
 _self – în fereastra curentă (utilă pentru suprapunerea unui atribut BASE TARGET)
 _parent – în părintele frame-ului din frameset
 _top – în întreaga fereastră, fără frame-uri
Atributele SHAPE şi COORDS oferă posibilitatea utilizatorului să specifice o hartă
de imagini senzitive (client-side image maps, prin intermediul elementului OBJECT),
adică un număr oarecare de zone în interiorul unei imagini şi un set de
documente/resurse către care să indice fiecare zonă anterior definită. Valoarea
implicită pentru SHAPE este rect, care defineşte o regiune dreptunghiulară folosind
COORDS="left, top, right, bottom". Alte valori posibile:
 circle – specifică un cerc; se utilizează: COORDS="center-x, center-y, radius";
 poly – specifică un poligon; se utilizează: COORDS="x1, y1, x2, y2, ..., xN, yN".
 default – specifică întreaga imagine (ce a rămas eventual nedefinită);
Coordonatele sînt relativ la colţul stînga sus al imaginii şi pot fi exprimate în pixeli sau
procente. O rază a unui cerc dată ca procent este calculată relativ la cea mai mica
dimensiune a imaginii/obiectului (lăţimea sau înălţimea). Dacă două sau mai multe
regiuni se suprapun are prioritate cea definită întîi.
Exemple:
 <A HREF="album.html">My photo album</A>
 <A HREF="../images/me.jpg">Picture of me</A>
 <A HREF="/sounds/song.mid" TYPE="audio/midi" ACCESSKEY=A>Cintecel (5 kB MIDI)</A>
 <A HREF="section2.html" TARGET="content" TITLE="Elements of the HEAD"
REL=next>Section 2</A>
 <A HREF="mailto:lp@lp.com" TITLE="Feedback on Document">lp@lp.com</A>
 <A HREF="http://www.lp.com/" TARGET="_top">Web Design</A>
 <A HREF="http://babel.alis.com:8080/langues/iso639.zh.htm" CHARSET="big5"
HREFLANG=zh>ISO 639</A>
Legăturile se pot face la documente locale (care rezidă pe acelaşi server (dar nu neapărat
în acelaşi director), la documente aflate pe alte servere (legături îndepărtate) sau intern
(în interiorul unui document; acelaşi în cazul în care documentul este mare şi se doreşte
un salt pînă la o secţiune a sa, sau o secţiune a unui alt document, atunci cînd se doreşte o
indicare mai rafinată a părţii din resursa-document ce se referă).
1. Legături locale
Legăturile locale se fac utilizînd căi (referinţe) relative sau absolute.
A. Referinţe absolute
Cea mai simplă legătură se realizează precizînd calea relativă a documentului. Selectarea
unei legături fără specificarea nici unui alt element suplimentar de localizare, determină
serverul să caute documentul solicitat în acelaşi folder ca şi documentul în care a început
legătura.
Căile relative pot include directoare sau pot indica o cale pe care trebuie să o urmăm
pentru a naviga la documentul ţintă, pornind de la documentul pointer (de start). O cale
poate include şi direcţii, cum ar fi, de exemplu, coboară două directoare spre rădăcină şi
apoi mergi în sus două directoare pentru a găsi documentul.
Specificarea căilor relative în legături se face ca în Unix, indiferent de sistemul pe care
este găzduită pagina/paginile HTML. Asta înseamnă că numele de directoare sau foldere
sînt separate de slash-uri (/) şi referirea la directorul părinte se face cu două puncte (..).
Iată un tabel cu referirea relativă a documentelor:
Cale Semnificaţie
HREF="doc.html" doc.html se găseşte în directorul curent
HREF="dir/doc.html" doc.html este localizat în folderul (directorul) dir
HREF="dir/subdir/doc.html" doc.html se află în directorul dir, subdirectorul
subdir
HREF="../doc.html" doc.html se găseşte într-un director aflat cu un nivel
mai sus decît directorul curent
HREF="../../subdir/doc. doc.html se găseşte într-un director aflat cu două
html" nivele mai sus, în directorul subdir
Pe Macintosh, numele discului este chiar cel care apare pe disc. De pildă, dacă există un
disc numit ServerWWW şi documentele HTML se găsesc într-un folder numit
SiteWWW, referirea relativă la acele documente se va face de forma:
HREF="ServerWWW/SiteWWW/nume_document.html
Pe sistemele care rulează Win/DOS, discurile sînt referite în mod obişnuit, cu ajutorul
literelor, numai că cele două puncte verticale (c:) sînt înlocuite de o bară verticală (c|).
Cele două puncte verticale au o altă semnificaţie, anume în specificarea legăturilor. Deci,
dacă fişierul se află în directorul c:\nume_director\document.html, şi se face o referinţă la
documentul aflat în d:\alt_director\subdirector\ţintă.html referinţa la el se va face de
forma:
HREF="../d|/alt_director/subdirector/ţintă.html.
B. Referinţe absolute
Referinţele relative localizează un document ţintă specificînd poziţia acestuia (calea
relativă) în raport cu documentul pointer (de la care porneşte legătura). Referinţele
absolute localizează documentele specificînd directorul de cel mai înalt nivel şi toată
calea pînă la document. Referinţele absolute încep întotdeauna cu un slash (/) urmat de
succesiunea directoarelor pînă la documentul la care faceţi referinţă.
Iată un tabel cu referirea absolută a documentelor:
Cale Semnificaţie
HREF="/home/pub/doc.html" doc.html se găseşte în directorul /home/pub
HREF="/c|/pub/doc.html" doc.html este localizat pe discul c: în directorul
/pub
HREF="/Server/Site/doc.html" doc.html se află pe discul Server, în folderul Site
(Macintosh)
Ori de cîte ori este posibil trebuie folosite referinţele relative deoarece cele absolute nu
sînt portabile. Specificarea relativă a localizării documentelor permite menţinerea uşoară
şi mutarea documentelor HTML de pe un sistem pe altul (sau dintr-un loc în altul chiar pe
acelaşi sistem) fără modificări majore în surse.
2. Legături îndepărtate
Marcarea documentelor HTML pentru legături îndepărtate se face asemănător cu
marcarea în cazul referinţelor la documente locale. Tag-ul de început este <A> şi cel de
sfîrşit </A>. Textul dintre tag-uri va fi afişat diferit faţă de restul documentului pentru a
arăta că este selectabil. Referinţa hypertext (HREF) va conţine însă URL-ul
documentului, de forma:
<A HREF="http://www.w3.org/">The World Wide Web Consortium</A>
3. Legături interne (către secţiunile unui document/resursă)
Ideea este de a realiza o legătură nu numai între un anumit punct al unui document şi un
alt document ci una ceva mai exactă, între un anumit punct al unui document şi un alt
anumit punct al aceluiaşi document sau al altuia. Acest lucru se realizează prin crearea
unei ancore în locul din document unde dorim să ne conducă legătura şi apoi în realizarea
unei legături care va indica atît documentul referit cît şi paragraful (sau secţiunea de
document) la care facem referire.
Crearea unei ancore se face în aproape acelaşi fel ca şi crearea unei legături, utilizînd tag-
ul <A> numai că de această dată îi este asociat un alt atribut: NAME. Atributul va avea
ca valoare un anumit cuvînt (sau grup de cuvinte) care vor fi folosite pentru a face
referinţă la această anumită secţiune.
Exemplu: <A NAME="cuvînt_cheie">Paragraf ţintă</A>
Atunci cînd se va face referinţă la această ancoră, documentul ţintă va fi derulat de către
navigator pînă cînd textul dintre <A> şi </A> va ajunge în partea de sus a ecranului. Spre
deosebire de legături, ancorele nu sînt afişate diferit faţă de restul documentului în
documentul ţintă.
Referirea la o ancoră în documentul pointer (documentul de la care porneşte legătura) se
face în acelaşi fel ca şi cînd ar fi referit un document întreg (cu URL-ul documentului ca
valoare a atributului HREF) şi prin includerea numelui ancorei, precedat de semnul #.
Exemplu:
<A HREF="/cale/doc.html#cuvint cheie">Salt la paragraful ţintă</A>
Legătura cere navigatorului să încarce documentul doc.html a cărui cale este precizată în
HREF şi să deruleze doc.html pînă cînd „Paragraf_ţintă“ ajunge în partea de sus a
ecranului.
Ancorele pot fi create chiar în acelaşi document în care se găsesc şi legăturile în ideea de
a uşura navigarea printr-un document mai mare. În acest caz, valoarea atributului HREF
este chiar cuvîntul cheie. De pildă în cazul unui singur document organizat pe secţiuni,
cuprinsul poate fi prezentat la începutul documentului şi poate avea legături care
punctează spre diferitele secţiuni. Tot ce avem de făcut este să dăm nume ancorelor şi
apoi să le referim în legături.
4.4. Imagini în documentele HTML

Imaginile inserate în documentele HTML îmbogăţesc paginile Web nu numai sub raport
decorativ; bogăţia informaţiei şi noile posibilităţi de organizare a resurselor fac din
imagini un element indispensabil din publicaţiile Web. Inserarea se face într-un mod
asemănător unei legături: se specifică URL-ul imaginii ce se inserează, URL ce aparţine
însă unei resurse diferite de documentul propriu-zis (un alt fişier!), chiar dacă apare în
aceeaşi pagină în browser.
1. Formatele suportate
Există două tipuri de imagini care pot fi văzute de navigatoare: imagini inline (în text,
line = rînd) şi imagini externe.
Imaginile inline sînt imagini care apar direct în paginile Web fiind încărcate odată cu
pagina (presupunînd că se utilizează un navigator grafic şi că nu este inhibată încărcarea
automată a imaginilor). O condiţie pentru ca imaginile să poată fi afişate este salvarea lor
într-unul din formatele recunoscute de navigatoare: GIF sau JPEG. Fără multe amănunte,
diferenţele principale între aceste formate sînt legate de dimensiune (la aceeaşi imagine
formatul JPEG are o dimensiune mai mică, ceea ce înseamnă că se încarcă mai repede în
paginile Web) şi de calitate (care este, de obicei, superioară la GIF, folosită atunci cînd
imaginea ce se inserează trebuie să fie de o foarte bună calitate, rezoluţie sau adîncime de
culoare).
Imaginile externe sînt imagini care nu sînt afişate direct la încărcarea paginii. Ele pot fi
încărcate însă la cererea utilizatorului. Navigatoarele pot fi configurate să manipuleze
fişiere imagine de diferite tipuri prin utilizarea unor aplicaţii auxiliare aşa că imaginile
externe pot fi salvate în formate diferite: PCX, XBM, PICT, etc. Există mai multe
programe de editare de imagine care sînt capabile să deschidă imagini în formate diferite
şi să le convertească în formatul JPEG/GIF, între cele mai răspîndite fiind Adobe
Photoshop şi Paint Shop Pro. Există şi programe care fac numai conversia în GIF, cum ar
fi De Babelizer pe Mac sau pachetul de filtre PBM pentru UNIX.
Două trăsături fac noile formate GIF (numite GIF89) mai deosebite: formatul întreţesut şi
fundalul transparent. Imaginile transparente sînt imagini la care culoarea (sau modelul)
din fundalul paginii va transpare, dînd senzaţia că imaginea pluteşte pe suprafaţa paginii.
Înainte de a le converti (cu un program special) trebuie să ne asigurăm că imaginile au
fundalul într-o singură culoare. Dacă fundalul este format din mai multe culori, chiar
dacă acestea sînt apropiate ca tonalitate, numai una singură va fi făcută transparentă.
Fundalul unei imagini se poate izola utilizînd un program de editare de imagine.
Întreţeserea (interlacing) nu schimbă felul în care este văzută imaginea în document ci
doar aspectul ei în timp ce este încărcată. Pe măsură ce imaginea este adusă de pe Web,
apariţia ei poate fi gradată, de la o imagine de rezoluţie joasă la una de rezoluţie mai
înaltă. Pentru crearea acestui efect este nevoie nu numai ca imaginea să fie salvată într-un
format special (GIF întreţesut) ci şi ca navigatorul să fie capabil să prezinte imaginea în
timp ce aceasta este încărcată.
În mod normal, un fişier GIF este salvat în fişier linie cu linie (scan lines), începînd cu
partea de sus a imaginii şi continuînd progresiv în jos. Dacă navigatorul poate afişa
imaginile în timp ce acestea sînt încărcate, se vede mai întîi partea de sus a imaginii şi
apoi tot mai mult din ea pe măsură ce informaţia imaginii ajunge pe sistem.
Imaginile întreţesute sînt salvate diferit. La început este salvată fiecare a opta linie
(începînd cu prima), apoi fiecare a opta linie (începînd cu a patra), apoi fiecare a patra
linie (începînd cu a treia), apoi restul rîndurilor.
La încărcarea imaginii fie liniile lipsă sînt umplute cu informaţie din liniile sosite deja
(imaginea apare neclară pînă la încărcarea completă) fie sînt afişate doar liniile sosite
(efect veneţian). Dacă navigatorul nu suportă imaginile întreţesute sau dacă este setat să
aştepte pînă la sosirea întregii imagini înainte de afişare, efectul nu va fi observat.
Avantajul unui format întreţesut este că utilizatorul poate căpăta o idee despre ce anume
reprezintă imaginea înainte ca aceasta să sosească în întregime şi poate hotărî dacă să
aştepte să se încarce sau să oprească transferul. Unelte pentru crearea acestor efecte sînt
destule.
2. Inserarea imaginilor în text
După convertirea imaginii într-un format suportat, aceasta poate fi inserată în document.
Imaginile inline sînt specificate în HTML cu ajutorul tag-ului <IMG>. Acesta este un tag
vid din aceeaşi familie cu <HR> şi <BR>.
Sintaxa:
<IMG>
Atribute posibile:
 SRC=URI (locaţia imaginii)
 ALT=Text (text alternativ)
 LONGDESC=URI (link la o descriere lungă)
 WIDTH=Length (lăţimea imaginii)
 HEIGHT=Length (înălţimea imaginii)
 USEMAP=URI (figură senzitivă - client-side image map)
 ISMAP (figură senzitivă - server-side image map)
 ALIGN=top|middle|bottom|left|right (alinierea imaginii)
 BORDER=Length (grosimea marginii)
 HSPACE=Pixels (spaţiu liber lăsat pe orizontală)
 VSPACE=Pixels (spaţiu liber lăsat pe verticală)
 atribute comune
Conţine:
 nimic
Conţinut în:
 elemente de tip inline, elemente de tip bloc (block-level elements), cu excepţia
lui PRE
Descriere:
Atributul SRC indică URL-ul imaginii care va fi inserată în document. Dacă numele
imaginii este „poza.gif“ şi imaginea se află în acelaşi director ca şi documentul
HTML, atunci integrarea imaginii se face cu tag-ul: <IMG SRC="poza.gif">, iar
pentru o imagine aflată în directorul imediat superior celui în care se află documentul,
forma tag-ului este: <IMG SRC="../poza.gif">.
Specificarea căii către imagine se face urmînd aceleaşi reguli ca şi la specificarea URL
pentru orice alt document/resursă. Dacă se utilizează aceeaşi imagine de mai multe ori
în interiorul aceluiaşi document, este indicat să se facă referinţe relative (spre aceeaşi
resursă!) în locul celor absolute pentru a permite navigatorului să folosească aceeaşi
copie a resursei (din cache) şi a evita astfel ca acesta să aducă imaginea de pe server
de mai multe ori.
Atributul ALT ia ca valoare textul care va fi afişat de navigatoarele care nu lucrează în
modul grafic (sau care au inhibată funcţia de încărcare automată a imaginilor), iar
LOWSRC="..." indică URL-ul unei imagini care va fi încărcată înaintea imaginii
specificate în SRC. Valoarea atributului LOWSRC este de regulă URL-ul unei
versiuni de o mai mică rezoluţie a imaginii specificate în SRC. Textul ce apare la ALT
trebuie să indice (de obicei) funcţia acelei imagini (mai mult decît descrierea ei) avînd
în vedere că trebuie folosit cînd imaginea nu e încărcată (şi nu mai apare sugestia dată
de conţinutul acesteia).
Atributul WIDTH="..." rezervă un spaţiu (în pixeli) pentru lăţimea imaginii. Dacă
imaginea este de altă lăţime, va fi scalată (redimensionată) astfel încît să încapă în (sau
să umplă) spaţiul rezervat; iar HEIGHT="..." rezervă un spaţiu (în pixeli) pentru
înălţimea imaginii. Dacă imaginea este de altă înălţime, va fi
scalată/redimensionatăcorespunzător. Atenţie, însă: redimensionarea se face după
algoritmi extrem de simpli şi rezultatele sînt extrem de departe de cele obţinute cu
unelte adecvate. Utilitatea acestor atribute apare atunci cînd se specifică dimensiunile
reale (adevărate) ale imaginii. În acest fel browserul va rezerva un spaţiu corect în
pagină, dînd încă de la început imaginea reprezentării paginii respective.
Atributul VSPACE="..." stabileşte spaţiul dintre imagine şi textul aflat deasupra şi
sub imagine (pe verticală), iar HSPACE="..." stabileşte spaţiul dintre imagine şi
textul aflat la stînga şi la dreapta imaginii (pe orizontală). Sînt considerate depăşite,
recomandîndu-se utilizarea style-sheet-urilor în locul lor.
Atributul BORDER="..." desenează o margine de grosimea specificată, în jurul
imaginii şi dacă imaginea este activă, face marginea de asemenea activă. Dacă se
specifică BORDER=0, marginea va fi eliminată chiar dacă imaginea este o ancoră/link
spre altă resursă. De exemplu:
<A HREF="reference.html">
<IMG SRC="icon/reference.gif" ALT="" WIDTH=90 HEIGHT=90 BORDER=0>Web
Authoring Reference
</A>
are ca efect afişarea unei imagini (din fişierul reference.gif, care se găseşte în
subfolderul icon al folderului curent) şi a unui text, transformarea acestora într-o
ancoră (link) care indică spre documentul reference.html, dar fără ca imaginea să aibă
margine în jurul ei, ca în figura următoare:
Web Authoring Reference

Atributul LONGDESC dă o descriere mai lungă a imaginii şi poate fi folosit acolo
unde este necesară, de exemplu, ca alternativă la reprezentarea uzuală a imaginii (în
browserele ce suportă doar text sau cele utilizate de persoanele care nu văd).
Exemple:
1. Inserarea unei imagini şi specificarea unui text (alternativ) care să se afişeze dacă nu
se poate afişa imaginea sau ca „explicaţie“ (tooltip) cînd se pune cursorul mouse-ului
pe ea, se poate face cu secvenţa:
<P>
<IMG SRC="bear.jpg" WIDTH="201" HEIGHT="132" BORDER=0 ALT="A big, brown
bear">
Şi are ca efect inserarea în pagină a unei imagini, de exemplu ca cea de mai jos:
2. Aceeaşi imagine inserată în cadrul unui paragraf cu text:

<HTML>
<HEAD>
</HEAD>
<BODY>
<FONT FACE="ARIAL" SIZE=2 COLOR="#339966">
<H1>The Scariest Jungle</H1>
</FONT>
<FONT FACE="ARIAL" SIZE=2>
Follow the map to see <I>lions</I> and <I>tigers</I> and <I>bears</I>.
<P> <IMG SRC="bear.jpg" WIDTH="201" HEIGHT="132" BORDER=0 ALT="A big,
brown bear">
<P><B>Oh, my!</B>
</FONT>
</BODY>
</HTML>
Şi va arată astfel:
3. Alinierea imaginilor în text
Imaginile pot fi aliniate în document cu ajutorul atributului ALIGN, cel care permite
controlul alinierii imaginii cu linia de text alăturată. Există următoarele valori posibile
pentru controlul alinierii.
 ALIGN=TOP, care aliniază imaginea cu partea cea mai de sus a rîndului
 ALIGN=MIDDLE, care aliniază imaginea cu mijlocul rîndului (de fapt cu linia
de bază)
 ALIGN=BOTTOM, care aliniază imaginea cu cea mai de jos parte a rîndului sau
cu partea de jos a celei mai mari imagini de pe rînd
 ALIGN=TEXTOP care aliniază partea de sus a imaginii cu cele mai înalte
caractere din rînd
 ALIGN=ABSMIDDLE care aliniază mijlocul imaginii cu mijlocul celui mai
mare element
 ALIGN=BASELINE care aliniază partea de jos a imaginii cu linia de bază a
textului
 ALIGN=ABSBOTTOM care aliniază partea de jos a imaginii cu cea mai de jos
parte a unui element de pe rînd
 ALIGN=LEFT şi ALIGN=RIGHT care aliniază imaginea în stînga, respectiv
dreapta paginii
4. Imagini flotante
Imaginile şi obiectele pot apare direct în text (in-line) sau pot fi „flotante“ pe o margine a
paginii alterînd astfel temporar marginile textului care „curge“ pe lîngă aceasta.
Elementul care determină modul în care o va face este BR.
Fie următoarea situaţie, în care avem alăturate o imagine şi un text care are o linie
terminată cu BR:
********* -------
| | -------
| image | --<BR>
| |
*********
Elementul BR are ca efect inserarea în punctul în care apare a unei noi linii. Dar, prin
valoarile pe care le poate lua atributul său clear determină şi modul în care se va afişa şi
textul în continuare (unde va apare noua linie de text după acest element). Valorile pe
care le poate lua clear sînt:
clear = none|left|right|all
Semnificaţia fiecărei valori este:
1. none: Noua linie va începe normal. Este valoarea implicită. În acest caz, pentru
situaţia din figura de mai sus, noua linie (marcată cu semne +) va începe imediat sub
cea intreruptă, la marginea din dreapta a imaginii:
********* -------
| | -------
| image | --<BR>
| | +++++++
*********
2. left: Noua linie va începe în prima poziţie disponibilă SUB obiectul flotant, la
marginea din stînga. În acest caz, pentru situaţia din figura de mai sus, noua linie
(marcată cu semne +) va începe sub imagine, de la marginea din stînga:
********* -------
| | -------
| image | --<BR clear="left">
| |
*********
++++++++++++++++++
3. right: Noua linie va începe în prima poziţie disponibilă SUB obiectul flotant, la
marginea din dreapta.
4. all: Noua linie va începe în prima poziţie disponibilă SUB obiectul flotant, la
oricare margine. În acest caz, pentru situaţia din figura de mai sus, noua linie
(marcată cu semne +) va începe asemănător situaţiei clear=left:
********* -------
| | -------
| image | --<BR clear="all">
| |
*********
++++++++++++++++++
5. Includerea de „obiecte“ generale (elementul OBJECT).

Începînd cu HTML 4.0 se restrînge utilizarea lui <IMG> pentru inserarea imaginilor,
chiar dacă rămîne permisă. Explicaţia este dată de încercarea de generalizare a procesului
de inserare şi a altor „obiecte“ (cum sînt, de exemplu, appleturile) sub un singur tag:
OBJECT. Pînă la HTML 4.0 fiecare tip de resursă ce se putea insera în paginile HTML
îşi avea propriul tag.
Această abordare introducea cîteva dezavantaje majore:
 nu permitea extensii ale altor tipuri de resurse
 fiecare tag nu se putea folosi decît cu acel tip de resursă (de exemplu o imagine se
insera cu IMG, un applet cu APPLET, etc)
 se introduceau probleme de accesibilitate, tagurile vechi neindicînd mai nimic
despre resursa care se ingloba în pagină, browserul nefiind capabil să determine
dacă poate sau nu să prezinte resursa respectivă
Pentru a rezolva aceste probleme s-a introdus elementul OBJECT care oferă o soluţie
generală de inserare a unui obiect generic în paginile HTML. El permite specificarea
tuturor caracteristicilor necesare pentru a fi prezentate de un browser: codul sursă, valori
iniţiale, date necesare la execuţie. În acestă accepţiune termenul de „obiect“ denotă ceva
ce se inserează în pagina HTML şi are ca sinonime: applet, plug-in, media handler, etc.
Astfel funcţionalitatea acestor taguri a fost preluată de noul tag, după schema prezentată
în tabelul următor:
Tipul resursei care se inserează Elementul specific Elementul generic
Imagini (gif, jpg) IMG OBJECT
Applet APPLET OBJECT
Alt document HTML IFRAME OBJECT
Tabelul indică faptul că fiecare tip de resursă ce poate fi inclusă are o soluţie specifică şi
o soluţie generală. Elementul generic OBJECT va servi şi ca soluţie pentru
implementarea altor tipuri.
Sintaxa:
<OBJECT>...</OBJECT>
Atribute posibile:
 DATA=URI (adresa de unde se încarcă datele obiectului)
 CLASSID=URI (locaţia implementării)
 ARCHIVE=CDATA (fişierele archivă)
 CODEBASE=URI (adresa de bază pentru CLASSID, DATA, ARCHIVE)
 WIDTH=Length (lăţimea obiectului)
 HEIGHT=Length (înălţimea obiectului)
 NAME=CDATA (numele folosit la trimiterea unui formular)
 USEMAP=URI (client-side image map)
 TYPE=ContentType (tipul obiectului)
 CODETYPE=ContentType (tipul codului)
 STANDBY=Text (mesajul ce se va afişa în timpul încărcării)
 TABINDEX=NUMBER (poziţia în ordinea de parcurgere cu Tab)
 DECLARE (obiectul nu se instanţiază)
 ALIGN=[ top | middle | bottom | left | right ] (alinierea obiectului)
 BORDER=Length (grosimea marginii)
 HSPACE=Pixels (spaţiu lăsat orizontal)
 VSPACE=Pixels (spaţiu lăsat vertical)
 atribute comune
Conţine:
 elemente PARAM urmate de elemente de tip bloc şi/sau elemente de tip inline
Conţinut în:
 HEAD, elemente de tip inline, elemente de tip bloc, cu excepţia lui PRE
Descriere:
OBJECT intenţionează să înlocuiască tagurile specifice IMG şi APPLET, precum şi
tagurile „proprietare“ EMBED şi BGSOUND (definite de anumite browsere şi
suportate doar de ele!) care produc multe neajunsuri şi erori. Cu el se includ imagini,
clipuri video, appleturi Java, elemente VRML.
Aproape toate atributele tag-ului <IMG> se pot folosi şi cu <OBJECT>. Modul de
utilizare este identic. O descriere mai amănunţită este prezentată într-un paragraf
anterior.
4.5. Imagini senzitive
Imaginile senzitive permit specificarea unor regiuni ale unei imagini (sau obiect, mai
general) cărora să li se asocieze o acţiune specifică (de exemplu încărcarea unei resurse,
lansarea unui program, etc). Cînd regiunea este activată de utilizator se execută acţiunea
respectivă. O imagine senzitivă este creată prin asocierea unui obiect cu o specificaţie a
zonelor suprafeţei obiectului respectiv. Există două tipuri de imagini senzitive:
 Client-side. Cînd utilizatorul activează o regiune a unei imagini senzitive de acest
tip cu mouse-ul coordonatele punctului respectiv (în pixeli) sînt interpretate de
către agentul utilizatorului (browserul acestuia). Navigatorul selectează o legătură
ce a fost specificată pentru regiunea activată şi o urmează.
 Server-side. Cînd utilizatorul activează o regiune a unei imagini senzitive de acest
tip cu mouse-ul coordonatele punctului respectiv (în pixeli) sînt trimise agentului
serverului (programului de pe server) şi care e specificat de atributul HREF al
elementului A. Programul de pe server este cel care interpretează aceste
coordonate şi realizează o anumită acţiune.
De obicei sînt preferate imaginile senzitive client în faţa celor de tip server-side din două
motive: sînt accesibile şi celor ce folosesc browsere fără facilităţi grafice şi oferă un feed-
back imediat, indiferent dacă se pointează într-o zonă activă sau nu.
1. Imagini senzitive client-side
Acest tip de imagini senzitive realizează senzitivitatea imaginii prin legături în textul care
însoţeşte figura şi care desemnează zonele active din figură. Această metodă nu numai că
este mult mai rapidă decît cea care implică programe care rulează pe server, dar permite
şi ceva ce varianta cu imagini senzitive de tip sever-side nu putea realiza: utilizarea
figurilor senzitive şi în navigatoarele care lucrează în mod text deoarece textul care
descrie figura este cel care defineşte maparea figurii.
Imaginea senzitivă de tip client-side poate fi definită cu unul dintre elementele IMG,
OBJECT sau INPUT. Cu aceasta se asociază o hartă de legături ce se defineşte cu
elementul MAP. Legătura dintre cele două componenete se realizează prin intermediul
atributului USEMAP al elementului cu care se defineşte imaginea senzitivă.
Prezenţa atributului USEMAP la definirea unui obiect (cu OBJECT) impune ca obiectul
respectiv (ce este inclus) să fie o imagine. Mai mult, cînd acesta are o hartă asociată cu el,
browserele trebuie să implementeze acţiunea cu obiectul respectiv exclusiv în termenii
imaginii senzitive, putînd fi chiar omisă încărcarea sau procesarea conţinutului propriu-
zis al acestuia (dacă nu poate fi făcută de browserul respectiv). Fiecare element MAP
poate conţine cel puţin unul dintre următoarele elemente:
1. Unul sau mai multe elemente AREA. Acestea nu au conţinut dar specifică regiunile
geometrice ale hărţii asociate cu imaginea şi legăturile asociate cu fiecare regiune în
parte. De notat că atunci cînd această metodă este folosită elementul MAP nu afişează
nimic. Autorii trebuie să ofere un text alternativ pentru fiecare porţiune definită cu
AREA, utilizînd atributul ALT.
2. Conţinut de tip bloc (block-level). Acesta va include elemente A ce specifică
regiunile geometrice ale hărţii şi legăturile asociate cu fiecare regiune în parte. De
notat că atunci cînd se foloseşte această metodă elementul MAP poate fi afişat de
browser, rezultînd o metodă de creare a unor documente mai accesibile decît cea
descrisă anterior.
Dacă două sau mai multe regiuni se suprapun, elementul definit în regiunea ce apar mai
devreme în document este cel luat în consideraţie.
A. Elementul MAP
Sintaxa:
<MAP>...</MAP>
Atribute posibile:
 NAME=CDATA (numele hărţii)
 atribute comune
Conţine:
 Unul sau mai multe elemente AREA, sau unul sau mai multe elemente de tip
bloc
Conţinut în:
 elemente de tip inline, elemente de tip bloc (block-level)
Descriere:
Acest element defineşte o imagine senzitivă de tip client-side pentru a fi utilizată cu un
element IMG sau OBJECT. Atributul NAME este folosit ca ancoră pentru atributul
USEMAP al elementelor IMG sau OBJECT. În timp ce MAP poate defini imagini
senzitive incluse în alte fişiere, browserele suportă de obicei numai imagini care au
definită harta de legături cu MAP doar în acelaşi fişier cu imaginea. Iniţial MAP a fost
definit să aibă asociat unul sau mai multe elemente AREA care să specifice
coordonatele unei regiuni active (clicabile).
HTML 4.0 extinde acest element astfel încît să poată avea ca atribute unul sau mai
multe elemente de tip bloc ca o alternativă la utilizarea elementelor de tip AREA.
Combinate cu OBJECT acestea permit o alternativă cu conţinut mai bogat la imagini.
Dar nu toate browserele suportă acestea variantă (cu OBJECT), astfel că varianta cu
IMG este mult mai sigură. Cînd MAP se foloseşte cu OBJECT, conţinutul acesteia nu
este afişat de browser.
B. Elementul AREA
Sintaxa:
<AREA>
Atribute posibile:
 SHAPE = [ rect | circle | poly | default ] (forma regiunii)
 COORDS=Coords (coordonatele regiunii)
 HREF=URI (resursa indicată de legătură)
 TARGET=FrameTarget (frame-ul în care se încarcă legătura)
 NOHREF (regiune inactivă)
 ALT=Text (text alternativ)
 TABINDEX=Number (poziţia în ordinea de parcurgere cu TAB-ul)
 ONFOCUS=Script (regiunea a primit focusul)
 ONBLUR=Script (regiunea a pierdut focusul)
 atribute comune
Conţine:
 nimic
Conţinut în:
 elementul MAP
Descriere:
Acest element defineşte o regiune într-o imagine senzitivă. Fiecare regiune este o
bucată de imagine care are asociată a altă acţiune cînd se face clic cu mouse-ul pe ea.
Atributele SHAPE şi COORDS specifică partea din imagine ce este inclusă în acea
regiune. Valoarea implicită este „rect“ care defineşte un dreptunghi folosind
COORDS="left, top, right, bottom". Alte valori ale lzui SHAPE:
 default, specifică toată imaginea;
 circle, specifică o regiune circulară folosind COORDS="center-x, center-y,
radius";
 poly, specifică o regiune poligonală folosind COORDS="x1, y1, x2, y2, ..., xN, yN".
Valorile coordonatelor sînt relative la colţul stînga-sus şi sînt exprimate în pixeli sau
procente.
Atributul HREF specifică o legătură la o altă resursă (ca de exemplu un document
HTML sau o imagine JPEG). TITLE poate fi folosit pentru a descrie pe scurt
conţinutul legăturii şi se foloseşte ca „tool-tip“. Atributul boolean NOHREF indică
faptul că regiunea respectivă nu are legătură asociată.
Atributul ALT oferă text alternativ pentru cazul în care nu se încarcă imaginea. Se
recomandă ca acesta să descrie funcţia şi nu regiunea.
Atributul TARGET este folosit cu frame-uri pentru a indica în ce frame se încarcă
resursa indicată de legătură. Dacă numele indicat nu există se va folosi o fereastră
nouă. Numele speciale de frame-uri încep cu underscore (liniuţa de subliniere):
 _blank, indică fereastră nouă
 _self, indică frame-ul curent
 _parent, indică frame-ul parinte al celui curent
 _top, indică o fereastră nouă, fără frame-uri
Atributul ACCESSKEY specifică un caracter unic UNICODE folosit ca tastă de
activare (shortcut) pentru urmărirea legăturii. TABINDEX specifică un număr între 0
şi 32767 care indică ordinea de parcurgere cu tasta TAB. O regiune cu
TABINDEX=0 sau fără TABINDEX va fi vizitată după toate elementele cu o valoare
pozitivă a acestui atribut. Cu cît valoarea pozitivă este mai mică cu atît regiunea va fi
vizitată mai devreme. În caz de ambiguitate elementul ce apare mai întîi în document
are prioritate.
AREA acdeptă în plus faţă de evenimentele uzuale (core) acceptate de majoritatea
elementelor şi atribute folosite de scripturile client:
 ONFOCUS, ce apare cînd regiunea primeşte focusul;
 ONBLUR, ce apare cînd regiunea pierde focusul.
Exemplu:
Acest exemplu defineşte o hartă numită „mymap“ ale cărei zone active (3) sînt
dreptunghiuri care indică spre trei adrese diferite, fiecare avînd şi alternative pentru
cazul cînd imaginea nu este încărcată:
<MAP NAME=mymap>
<AREA HREF="/reference/" ALT="HTML and CSS Reference" COORDS="5,5,95,195">
<AREA HREF="/design/" ALT="Design Guide" COORDS="105,5,195,195">
<AREA HREF="/tools/" ALT="Tools" COORDS="205,5,295,195">
</MAP>
Această hartă este folosită cu imaginea încărcată din fişierul „sitemap.gif“, de

dimensiuni 300 pixeli x 200 pixeli, plasată în documentul HTML cu tagul:
<IMG SRC="sitemap.gif" ALT="Site map" USEMAP="#mymap" WIDTH=300
HEIGHT=200>
Exemplu:
Acest exemplu foloseşte două imagini, de tipuri diferite, a doua fiind o alternativă a
primeia în cazul în care aceasta nu este suportată. Ambele imagini partajează o hartă
comună care este inclusa în fiecare dintre elementele definite cu OBJECT. Elementul
MAP conţine şi o listă de legături de meniu care sînt afişate dacă browserul nu încarcă
imaginile:
<OBJECT DATA="sitemap.png" USEMAP="#map" TYPE="image/png" TITLE="Sitemap"
WIDTH=300
HEIGHT=200>
<OBJECT DATA="sitemap.gif" USEMAP="#map" TYPE="image/gif" TITLE="Site map"
WIDTH=300
HEIGHT=200>
<MAP NAME=map>
<UL>
<LI><A HREF="/reference/" COORDS="5,5,95,195"> HTML and CSS
Reference </A></LI>
<LI><A HREF="/design/" COORDS="105,5,195,195"> Design Guide
</A></LI>
<LI><A HREF="/tools/index.html" COORDS="205,5,295,195"> Tools
</A></LI>
</UL>
</MAP>
</OBJECT>
</OBJECT>
În acest mod, maparea figurii (şi transformarea ei într-o imagine senzitivă) se realizează
în următorii paşi:
a). Definirea legăturilor
Exemplu: Pentru o bară de butoane:
<UL>
<LI><A HREF=" Editorial.html">Editorial</A>
<LI><A HREF=" Index.html">Index</A>
<LI><A HREF=" Presa.html">Presa</A>
<LI><A HREF=" Oaspeţi.html">Oaspeţi</A>
</UL>
b). Adăugarea figurii:

<IMG SRC=logo.gif>
<UL>
<LI><A HREF="Editorial.html">Editorial</A>
<LI><A HREF="Index.html">Index</A>
<LI><A HREF="Presa.html">Presa</A>
<LI><A HREF="Oaspeţi.html">Oaspeţi</A>
</UL>
</IMG>
c). Adăugarea atributul SHAPE pentru a indica localizarea şi forma zonelor active.
Valorile lui sînt cele cunoscute din meniurile grafice de selecţie:
 SHAPE="default" pentru selecţia implicită
 SHAPE="circle x,y,r" pentru a defini un cerc de rază r, cu centrul
în x,y.
 SHAPE="rect x,y,l,h" pentru dreptunghi (x,y stînga sus, l lăţime, h
înălţime)
 SHAPE="polygon x1,y1,x2,y2..." pentru poligon determinat de punctele xi,yi
Exemplu:
<IMG SRC=logo.gif>
<UL>
<LI><A HREF="Editorial.html" SHAPE="rect 0,0,100,100">
Editorial</A>
<LI><A HREF="Index.html" SHAPE="rect 100,0,100,100">
Index</A>
<LI><A HREF="Presa.html" SHAPE="rect 200,0,100,100">
Presa</A>
<LI><A HREF="Oaspeţi.html" SHAPE="rect 300,0,100,100">
Oaspeţi</A>
</UL>
</IMG>
2. Imagini senzitive server-side

Dacă harta imaginii senzitive este mult prea complicată (şi, implicit, dificil de descris cu
metoda anterioară) se poate lăsa sarcina aceasta pe seama serverului. Imaginile senzitive
de scest tip lucrează cu ajutorul unui script CGI (un program rezident pe server). Cînd
navigatorul activează o legătură de pe o imagine senzitivă, apelează de fapt (indirect) un
program special (dedicat acestei acţiuni) din folderul (directorul) cgi-bin al serverului
căruia îi trimite coordonatele (x,y) ale punctului în care a fost activată imaginea (unde s-a
făcut clic cu mouse-ul).
Programul special pentru imaginile mapate caută într-un fişier-hartă unde sînt stabilite
corespondenţele între diversele regiuni ale imaginii şi resursele/documentele care sînt
apelate. Face apoi cîteva calcule pentru a vedea ce pagină să încarce şi încarcă pagina.
Din cauza naturii grafice a imaginilor senzitive, ele pot fi "văzute" numai de
navigatoarele grafice. De fapt dacă se încearcă să se vadă o astfel de imagine senzitivă cu
un navigator care lucrează numai în modul text (de pildă Lynx) nu se poate vedea nici
măcar că o astfel de imagine există. Prima grijă deci, dacă se utilizează o imagine
senzitivă, este să se creeze un text echivalent pentru utilizatorii care se conectează în
modul text.
Ca şi în cazul altor scripturi CGI, fiecare server are o altă metodă de implementare a
mapării imaginilor, mai mult chiar, metodele pot diferi chiar pentru serverele de pe
aceeaşi platformă. De pildă, serverele de tip CERN şi NCSA utilizează metode diferite
pentru implementarea imaginilor senzitive. Totuşi, toate serverele utilizează aceleaşi
elemente de bază:
 Marcarea cu tag-uri HTML a imaginii (în document) pentru a arăta că aceasta este
o imagine senzitivă.
 Scrierea unui fişier de mapare a imaginii, care va specifica legătura între diferite
regiuni ale imaginii şi URL-urile documentelor Web la care acestea fac referinţă.
 Un script CGI (program) în directorul cgi-bin care le ajută să funcţioneze împreună.
Procesul de realizare a unei imagini senzitive de tip server side, pentru diverse servere
HTTP mai cunoscute şi utilizate (CERN şi NCSA) este descris în continuare.
A. Tag-urile imaginii senzitive

Primul pas este alegerea unei imagini care satisface anumite criterii pentru a fi potrivită
ca imagine senzitivă. Cele mai potrivite sînt cele care conţin arii vizuale distincte care pot
fi selectate individual (de pildă, imagini care pot fi cu uşurinţă împărţite în poligoane).
Fotografiile sînt mai dificil de mapat deoarece elementele tind să aibă o anumită
continuitate (prin tonurile de culoare, de pildă) sau sînt de forme complicate.
Marcarea imaginii în documentul HTML se face de forma:
<a href="http://nume_server/cgi-
bin/nume_script/cale/fişier_de_mapare_imagine.map">
<img src="nume_imagine_senzitivă.jpg" ISMAP alt="mesaj pentru text">
</a>
unde:
 <a> şi </a> sînt etichetele nevide pentru ancora imagine
 href = indică fişierul de mapare a zonelor de pe imagine cu diferite resurse
 http = protocolul de aducere a fişierului
 cgi-bin = directorul în care sînt rezidente script-urile
 nume_script = numele script-ului care face legătura între fişierul imagine.map,
care conţine maparea imaginii şi documentele HTML asociate legăturii (htimage
pentru serverul CERN sau imagemap pentru serverul NCSA)
 imagine.map = fişierul care conţine maparea imaginii
 ISMAP = tag-ul care declară că imaginea este senzitivă
 <img> = eticheta pentru imagine, cu atributul src cel care specifică fişierul
imagine
Exemplu:
Imaginea pentru a fi prelucrată este logo.jpg. Marcarea ei în documentul HTML s-a făcut
cu:
<a href="http://www.comp-craiova.ro/cgibin/htimage/maps/poza.map">
<img src="logo.jpg" ISMAP alt="CSD Site" border=0 height=160 width
=500></a>
Tag-ul border a luat aici valoarea zero. Atributele height şi width declară înălţimea
respectiv lăţimea imaginii pentru ca navigatorul să rezerve loc pentru imagine şi să
continue să afişeze textul chiar dacă imaginea nu este încă adusă. Dacă valorile
specificate sînt mai mici decît dimensiunea imaginii, aceasta este scalată pentru spaţiul
rezervat.
B. Maparea imaginii
Procesul de mapare înseamnă alegerea regiunilor active şi a fişierelor (sau documentelor
HTML) apelate, găsirea coordonatelor regiunilor desemnate şi scrierea fişierului de
mapare (poza.map, în cazul nostru). Forma fişierului de mapare depinde de scriptul CGI
utilizat de server.
Pentru serverul CERN fişierul arată de forma:
default URL
circle (x,y) r URL
rectangle (x,y) (x,y) URL
polygon (xl,yl) (x2,y2) ... (xn,yn) URL
Pentru serverul NCSA fişierul va fi de forma:
default URL
circle URL x,y r
rectangle URL x,y x,y
polygon URL xl,yl x2,y2 ... xn,yn
point URL x,y
Semnificaţia este:
 pentru cerc: coordonatele centrului şi raza (m pixeli)
 pentru dreptunghi: colţul stînga sus şi dreapta jos
 pentru poligon: coordonatele fiecărui nod
 pentru puncte: coordonatele punctelor
Originea sistemului de coordonate (0,0) se află în colţul din stînga sus al imaginii iar
direcţia pozitivă a axei Oy este în jos.
Exemplu:
default /diropt/fisopt1.html default
rect (16,65) (122,100) /diropt/fisopt2.html
rect (319,68) (431,98) /diropt/fisopt3.html
poly (92,158) (149,85) (302,90) (375,156) (95,154) /diropt/fisopt4.html
Observaţii:
1. URL-ul implicit (default) este utilizat ori de cîte ori mouse-ul activează o regiune care
nu trimite spre un anumit document (în acest caz unul dintre dreptunghiuri sau
regiunea trapezoidală).
2. Ordinea regiunilor din fişierul de mapare contează. Dacă de pildă două regiuni
selectate se suprapun parţial (sau total) regiunea menţionată mai la începutul fişierului
are prioritate la activare.
3. Punctele (în mapările NCSA) permit specificarea faptului că un clic care nu cade
direct pe o anumită regiune, va activa cel mai apropiat punct definit în fişierul de
mapare care apare pe imagine. Includerea opţiunii default într-un fişier pentru
serverul NCSA presupune că nu veţi introduce nici un punct activ deoarece existenţa
unui asemenea punct inhibă opţiunea default.
Maparea imaginii se poate face fie manual, încărcînd imaginea într-un program care să
permită notarea coordonatelor zonelor de interes, fie automat, utilizînd unul din
produsele care permit desenarea regiunilor selectate cu ajutorul mouse-ului. Programe de
acest tip: Mapedit (sub Windows) HotSpots for Windows, WebMap for Macintosh sau
Mapedit (pentru X). Toate permit salvarea fişierului .map fie în format CERN fie în
format NCSA.
C. Script-ul
Mai întîi scriptul (programul) pentru maparea imaginilor trebuie să fie instalat în
directorul cgi-bin (htimage pentru CERN sau imagemap pentru NCSA) şi apoi fişierul
poza.map (creat anterior) trebuie depus într-un director (să zicem maps) aflat la acelaşi
nivel cu cgi-bin. Legătura între scriptul htimage şi fişierul de mapare a imaginii se face
ataşînd calea către acesta din urmă imediat după numele scriptului (htimage).
Exemplu:
<a href="http://www.comp-craiova.ro/cgi-bin/htimage/maps/poza.map"> <img src="logo.jpg"
ISMAP> </a>
Activarea unei zone a imaginii senzitive înseamnă transmiterea către script a
coordonatelor punctului activat. Coordonatele sînt exprimate ca valori (în pixeli) relative
la colţul stînga-sus al imaginii. Modalitatea prin care se transmit aceste coordonate este
urmatoarea: se deriveză o nouă adresă (URI) din cea specificată de atributul href a
elementului A prin adăugarea caracterului ? urmat de coordonatele x şi z, separate de
virgulă. Legătura care se urmează este dată de această nouă adresă. De exemplu, dacă
pentru imaginea senzitivă definită astfel:
<A href="http://www.acme.com/cgi-bin/competition"> <IMG src="game.gif" ismap alt="target">
</A>
se face click în punctul de coordonate x=10, y=27, noua adresă derivată ce va fi folosită
pentru navigare va fi: „http://www.acme.com/cgi-bin/competition?10,27“
4.6. Alte elemente legate de text şi imagini
1. Comentariile în documentele HTML

Sintaxa:

Descriere:
În toate documentele HTML se pot introduce comentarii. Acestea vor fi complet
ignorate de navigatoare la afişare/interpretare. Comentariile încep cu şirul . Ca regulă generală trebuie
plasat fiecare comentariu pe o linie separată şi este preferabil sa se evite în interiorul
comentariului utilizarea caracterelor speciale de tipul <, >, & sau !. Fiecare rînd de
comentariu trebuie formatat în acest fel. Nu este indicat să se includă alte tag-uri
HTML între tag-urile de comentariu.
2. Linii orizontale de demarcare (elementul HR)

Sintaxa:
<HR>
Atribute posibile:
 ALIGN=[ left | center | right ] (alinierea orizontală)
 NOSHADE (linie solidă)
 SIZE=Pixels (înălţimea linei)
 WIDTH=Length (lungimea liniei)
 atribute core
 evenimente comune
Conţine:
 nimic
Conţinut în:
 APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DEL, DD, DIV,
OBJECT, TD, TH
Descriere:
Tag-ul <HR> poate fi vid şi are ca efect crearea unei linii orizontale pe pagină. Liniile
orizontale pot fi utilizate pentru separarea diferitelor secţiuni ale unei pagini Web sau
pentru punerea în evidenţă a unor porţiuni de document cum ar fi liste, meniuri,
informaţii de contact.
Atributul ALIGN specifică alinierea în apgină, SIZE determină grosimea (înălţimea),
iar WIDTH lungimea pe orizontală (poate fi şi procent din lăţimea paginii).
NOSHADE este un atribut care indică faptul că linia este fără efectul tridimensional
dat de umbră, asemănătoare cu o linie solidă.
Liniile se pot substitui şi cu imagini care îndeplinesc acelaşi rol.
Exemplu:
Urmează o linie de 3 pixeli grosime
<HR SIZE=3>
Urmează o linie de 6 pixeli grosime
<HR SIZE=6>
Exemplu:
Pentru liniile definite astfel:
<HR width="50%" align="center">
<HR size="5" width="50%" align="center">
<HR noshade size="5" width="50%" align="center">
Efectul este cel din figura următoare:
Se poate înlocui linia desenată de navigator cu o imagine, ca mai jos:
3. Fundalul unui document

Sintaxa:
<BODY BGCOLOR=#FFFFCA> sau
<BODY BACKGROUND="imagine.gif">
Descriere:
Cel mai simplu mod de a schimba fundalul se realizează utilizînd o culoare de fond.
Aceasta poate fi setată în tag-ul <BODY> prin atributul BGCOLOR. Culoarea trebuie
specificată în RGB pe 8 biţi. Fiecare culoare folosită la sinteza aditivă RGB poate avea
o valoare între 0 şi 255 (0 0 0 fiind negru şi 256 256 256 fiind alb). Singura dificultate
este că valoarea lui BGCOLOR trebuie dată în hexazecimal.
Exemplu:
<BODY BGCOLOR=#FFFFCA>
<BODY BGCOLOR=<#FFFFFO>
Pentru fundaluri pot fi folosite şi imagini sau, mai bine, o singură imagine aşezată alăturat
de mai multe ori pînă la acoperirea completă a fundalului. Problema este alegerea unei
imagini care alăturată sie însăşi să dea impresia de continuitate.
4. Culoarea textului şi a legăturilor
Setul de atribute care urmează oferă un control crescut asupra felului în care apare afişat
textul documentului HTML şi legăturile.
Atribut=Valoare Semnificaţie
TEXT Controlează culoarea întregului text din document
LINK Controlează culoarea legăturilor nevizitate (implicit, albastru)
VLINK Controlează culoarea legăturilor vizitate (implicit, purpuriu)
ALINK Controlează culoarea unei legături asupra căreia este apăsat
butonul mouse-lui (implicit, roşu)
Exemplu:
<body bgcolor="#fffff0" text="#000000" link="#00009c" vlink="#ffffca" alink="#ffff00">
Se pot obţine efecte de culoare cu o succesiune de tag-uri de forma:
<BODY BGCOLOR="diverse_coduri de culoare">
care determină schimbarea dinamică a culorii fundalului. Utilizate insistent, aceste efecte
simple (ieftine) pot deveni iritante pentru vizitator.
Capitolul 5.
Utilizarea tabelelor în limbajul HTML
Din elementele noi introduse de HTML 3.0, tabelele reprezintă primul care a ajuns pe
Web. Ele sînt suportate de Netscape Navigator, începînd cu versiunea 1.1, iar de către
Microsoft Internet Explorer, începînd cu versiunea 2.0.
Utilizarea fundamentală a tabelelor este aceeaşi cu a celorlalte forme de comunicare:
tabelele se folosesc pentru a afişa informaţii în două dimensiuni şi nu liniar, adică
informaţia este mai sugestivă dacă este prezentată sub forma unei matrici cu rînduri şi
coloane.
În afara acestei utilizări, pînă la apariţia style-sheet-urilor, tabelele se utilizau (în unele
cazuri) şi pentru a produce efecte speciale, cum ar fi: poziţionări în pagină ale textului sau
al imaginilor grafice, poziţionări pe rînd ale imaginilor, poziţionări ale elementelor
grafice în interiorul textului, etc. Avînd în vedere că pot apare probleme în aceste cazuri
(la browserele non-vizuale sau cînd paginile sînt proiectate pentru displayuri mai mari
decît cel pe care este afişat ori cînd fontul utilizat la vizualizare diferă ca mărime de cel
presupus la proiectare), pentru a le minimiza, se recomandă în HTML 4.0 folosirea style-
sheet-urilor pentru controlul aranjării în pagină (controlul layout-ului)
Elementele luate în consideraţie de HTML 4.0 pentru codarea tabelelor sînt:
 Explicaţia (elementul CAPTION), care oferă o scurtă descriere a conţinutul
tabelului. Se poate oferi şi o descriere mai largă (prin intermediul atributului
SUMMARY) pentru cazul cînd browserul este utilizat de persoane care folosesc
alfabetul Braille sau este un browser ce sintetizează voce
 Rîndurile tabelului care pot fi grupate în secţiuni de antet/head, explicaţii/footer şi
corp/body (prin intermediul elementelor THEAD, TFOOT şi respectiv TBODY).
Grupurile de rînduri oferă informaţie structurală suplimentară şi pot fi utilizate de
browsere astfel încît să sugereze mai bine structura tabelului, de exemplu
permiţînd deplasarea (scroll) individuală a acestor secţiuni sau repetînd informaţia
cuprinsă în header şi/sau footer pe fiecare pagină (eventual tipărită) a unor tabele
mai lungi.
 Grupuri de coloane (care oferă informaţie structurală suplimentară) pot fi definite
la începutul definiţiei unui tabel (prin intermediul elementelor COLGRUP şi
COL), dînd posibilitatea browserelor să afişeze tabelele incremental, fără a mai fi
nevoite să aştepte tot conţinutul tabelului pentru a-l afişa.
 Capul de tabel (elementul TH), atît în cazul că este aşezat pe rînd cît şi în cazul
aşezării pe coloană, va fi scos în evidenţă faţă de restul tabelului.
 Celulele tabelului (elementul TD), adică dreptunghiurile individuale. Acestea se
pot întinde pe mai multe rînduri şi/sau coloane. HTML 4.0 permite ataşarea unei
etichete fiecărei celule astfel încît browserele non-vizuale să poată comunica mai
uşor informaţia din celulă.
 Datele din tabel, adică valorile înscrise în celulele tabelului. Specificaţiile HTML
4.0 permit ca în celulele tabelelor să fie introdus orice element HTML: text simplu,
text (pre)formatat, imagini, legături, formulare, alte tabele, etc.
1. Descrierea tabelelor (elementul TABLE)
Descrierea unui tabel se face cu elementul TABLE. Acesta conţine toate elementele ce
specifică titlul, rîndurile, conţinutul şi formatul acestora.
Tabelele sînt specificate în HTML rînd cu rînd, fiecare rînd conţinînd definiţii pentru
fiecare din celulele care îl formează. Prin urmare, pentru a defini un tabel se începe prin a
defini rîndul din partea de sus, celulă cu celulă, apoi se defineşte al doilea rînd, celulă cu
celulă ş.a.m.d. Coloanele sînt calculate automat pe baza numărului de celule care sînt în
fiecare rînd. Perechea <TR>...</TR> defineşte începutul, respectiv sfîrşitul rîndului,
perechea <TH>...</TH> defineşte o celulă cap de tabel pe acest rînd, iar perechea
<TD>...</TD> defineşte o celulă de date din rînd.
Exemplu:
<TABLE>
<TR>
<TH>Cap de tabel</TH>
<TD>Celula 1-1</TD>
<TD>Celula 1-2</TD>
<TD>Celula 1-3</TD>
</TR>
</TABLE>
De remarcat că forma de scriere a codului HTML de mai sus are în vedere doar uşurarea
înţelegerii codului de la o primă privire. Marea majoritate a navigatoarelor ignoră spaţiile
libere şi caracterul <CR>. O excepţie totuşi: atunci cînd inseraţi o imagine într-una din
celulele tabelului, pentru a obţine plasarea corectă a imaginii în toate browserele, se
recomandă punerea tag-urile în acelaşi rînd.
Exemplu:
<TD><IMG SRC="A.GIF"></TD>
La afişarea unui tabel, un browser trebuie să realizeze următoarele operaţii:
 să facă disponibil sumarul (definit cu summary) utilizatorului
 să afişeze titlul (explicaţia) tabelului
 să afişeze antetul/headerul tabelului, apoi footerul, dacă sînt specificate. Locul în
care apar sînt bine definite (de exemplu la începutul/sfîrşitul fiecărei pagini
listate)
 să calculeze numărul de coloane din tabel. Numărul de rînduri se stabileşte simplu:
numărul de elemente TR conţinute de TABLE.
 să grupeze coloanele în conformitate cu specificaţiile de grupare a coloanelor
 să afişeze celulele rînd după rînd, grupate în coloanele corespunzătoare, între
header şi footer. Browserele vizuale formatează tabelul utulizînd atributele şi
specificaţiile de stil (style-sheet).
În acest fel, modelul de tabel din HTML 4.0 este proiectat astfel încît afişarea acestora să
se facă incremental, pe măsură ce rîndurile tabelului sosesc, fără a aştepta încărcarea
completă.
Elementul TABLE
Sintaxa:
<TABLE> ...</TABLE>
Atribute posibile:
 SUMMARY=Text (descrierea pe larg a conţinutului şi structurii tabelului)
 WIDTH=Length (lăţimea tabelului)
 BORDER=Pixels (lăţimea marginii tabelului)
 FRAME=[ void | above | below | hsides | lhs | rhs | vsides | box | border ]
(margini externe)
 RULES=[ none | groups | rows | cols | all ] (margini interne)
 CELLSPACING=Length (spaţierea între celule)
 CELLPADDING=Length (spaţierea în interiorul celulelor)
 ALIGN=[ left | center | right ] (alinierea tabelului)
 BGCOLOR=Color (culoarea de background a tabelului)
 atribute comune
Conţine:
 Un element opţional CAPTION, urmat de zero sau mai multe elemente COL şi
COLGROUP, urmat de un element opţional THEAD, un element opţional
TFOOT, şi apoi un element sau mai 7multe elemente opţionale TBODY.
Conţinut în:
OBJECT, TD, TH
Descriere:
Orice tabel începe cu tag-ul: <TABLE> şi se termină cu </TABLE>, între ele fiind
conţinutul tabelului propriu-zis care poate conţine o explicaţie cu <CAPTION> şi, în
esenţă, un număr oarecare de rînduri definite în principal cu <TR>.
CAPTION poate fi urmat, opţional, de elemente COL şi COLGROUP care specifică
lăţimea coloanelor şi modul de grupare al acestora. Apoi urmează THEAD, TFOOT şi
TBODY care definesc grupurile de rînduri. Un grup de rînduri conţine elemente TR ce
definesc rîndurile individual, care, la rîndul lor, conţin elemente TH sau TD pentru
celulele header sau de date.
Într-un tabel definit cu TABLE este necesar cel puţin un element TBODY, dar ambele
taguri de definire a acestui element sînt opţionale dacă nu există decît un element
TBODY şi nu există nici un THEAD sau TFOOT.
Atributul tag-ului <TABLE> WIDTH indică lăţimea tabelului în pagină dată ca număr
de pixeli sau ca procent din spaţiul orizontal disponibil. Laţimile date în pixeli (în
special cele peste 500) ar trebui evitate întrucît, uneori, cauzează scroll inutil orizontal.
Un număr de atribute specifice tabelelor permit un control mai bun asupra poziţiei
tabelelor în pagină şi asupra textului care (eventual) curge pe lîngă tabel:
Atribut=Valoare Semnificaţie
ALIGN=LEFT Aliniază tabelul cu marginea din stînga a textului; textul
va curge pe marginea din dreapta a tabelului
ALIGN=CENTER Aliniază tabelul în mijlocul paginii; textul nu va curge
prin nici una din părţile tabelului
ALIGN=RIGHT Aliniază tabelul cu marginea din dreapta a textului;
textul va curge pe marginea din stînga a tabelului
Browser-ele tratează în general tabelele ca fiind „flotante“, conţinutul care urmează lui
TABEL curgînd pe lîngă el (dacă se poate). Pentru a preveni această manifestare se
poate folosi elementul „break“ <BR CLEAR=all> la sfirşitul lui TABLE.
<TABLE> mai poate fi folosit împreună cu atributele UNITS şi COLSPEC. UNITS
poate avea ca valori PIXELS, EN (implicit) sau procente (RELATIVE) din
dimensiunea totală a tabelului.
Atributul tag-ului <TABLE> FRAME, puţin suportat acum de browsere, specifică
marginile exterioare vizibile ale tabelului. Valorile posibile sînt:
 void – nici o margine vizibilă
 above – marginea de sus
 below– marginea de jos
 hsides – marginile din stînga şi dreapta
 vsides – marginile de sus şi jos
 lhs – numai marginea din stînga
 rhs – numai marginea din dreapta
 box (border) – toate marginile
Valoarea implicită este void, dacă nu este specificat atributul BORDER cu o valoare
pozitivă, caz în care valoarea implicită este box. <TABLE BORDER> este o abreviere
foarte bine suportată pentru <TABLE FRAME=border>.
Atributul RULES, şi el destul de puţin suportat de browsere, specifică marginile
interioare vizibile (între celulele tabelului). Valorile posibile sînt:
 none – nici o margine interioară vizibilă
 groups – numai marginile între grupurile de rînduri şi coloane
 rows – numai marginile între rînduri
 cols – numai marginile între coloane
 all – toate marginile interioare
Valoarea implicită este none dacă BORDER=0 (sau se foloseşte atributul no
BORDER). Orice altă folosire a lui BORDER are ca efect trecerea lui all ca valoare
implicită.
Atributul BGCOLOR sugerează o culoare de background pentru tabel. Poate fi
folosită în combinaţie cu <FONT COLOR=...>, dar efectele pot fi imprevizibile dacă
se ia în considerare posibilitatea de suprascriere a acestor atribute de către browsere.
Metoda recomandată este cea a style-sheet-urilor.
Atributul tag-ului <TABLE> BORDER indică lăţimea chenarului tabelului,

CELLSPACING - spaţiul dintre celulele tabelului, iar CELLPADDING - spaţiul
dintre marginile celulelor şi conţinut. Figura următoare sugerează aceste elemente:
Exemplu:
Un tabel simplu ar putea fi descris astfel:
<TABLE>
<CAPTION>Common Usenet Abbreviations</CAPTION>
<THEAD>
<TR>
<TH>Abbreviation</TH>
<TH>Long Form</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>AFAIK</TD>
<TD>As Far As I Know</TD>
</TR>
<TR>
<TD>IMHO</TD>
<TD>In My Humble Opinion</TD>
</TR>
<TR>
<TD>OTOH</TD>
<TD>On The Other Hand</TD>
</TR>
</TBODY>
</TABLE>
Exemplu:
Un alt exemplu de tabel poate fi următorul:
<TABLE border="1"
summary="This table gives some statistics about... ">
<CAPTION><EM>A test table with merged cells</EM></CAPTION>
<TR>
<TH rowspan="2">
<TH colspan="2">Average
<TH rowspan="2">Red<BR>eyes
<TR>
<TH>height
<TH>weight
<TR>
<TH>Males
<TD>1.9
<TD>0.003
<TD>40%
<TR>
<TH>Females
<TD>1.7
<TD>0.002
<TD>43%
</TABLE>
Şi el ar putea arăta cu un browser negrafic ca în figura următoare:
A test table with merged cells

/-----------------------------------------\
| | Average | Red |
| |-------------------| eyes |
| | height | weight | |
|-----------------------------------------|
| Males | 1.9 | 0.003 | 40% |
|-----------------------------------------|
| Females | 1.7 | 0.002 | 43% |
\-----------------------------------------/
iar cu unul grafic astfel:
2. Explicaţia unui tabel (elementul CAPTION)

Natura unui tabel (ce conţine sau cum se foloseşte, etc) este descrisă de elementul
CAPTION. Acesta este permis doar imediat după tagul de început al lui TABLE şi poate
apare maxim o dată în descrierea unui tabel.
Acest element permite deducerea rapidă structurii unui tabel, întocmai ca headerele
acestuia. Ca o consecinţă, rezultă că este inadecvat ca sumar (descriere mai pe larg) din
perspectiva unor utilizatori ai unor browsere nevizuale. De aceea, informaţiile adiţionale
(mai bogate) descriind scopul tabelului şi structura lui se oferă prin atributul summary al
elementului TABEL. Aceasta este important mai ales la tabelele care nu au explicaţii date
cu CAPTION. Se recomandă să se evite depăşirea dimensiunilor tabelului în ceea ce
priveşte explicaţia, pentru ca aceasta să fie nevoită să facă scroll.
Elementul CAPTION
Sintaxa:
<CAPTION>...</CAPTION>
Atribute posibile:
 ALIGN=[ top | bottom | left | right ] (alinierea explicaţiei)
 atribute comune
Conţine:
 elemente inline
Conţinut în:
 TABLE
Descriere:
Elementul CAPTION defineşte o explicaţie pentru un tabel. O explicaţie bună trebuie
să ofere un scurt antet pentru tabel. Pentru tabelele simple poate să fie şi un sumar, dar
pentru cele mai complexe trebuie completat cu un sumar adevărat, implementat de
atributul SUMMARY.
Explicaţia tabelului poate fi dată şi printr-un paragraf separat sau printr-un titlu de
structură introdus chiar înainte de tabel dar este de preferat să fie introdusă prin
<CAPTION> deoarece explicaţiile pot fi tratate special de către navigatoare. De pildă
explicaţiile pot fi extrase într-un fişier separat sau pot fi numerotate.
Atributul ALIGN specifică modalitatea de aliniere faţă de tabel. Valoarea implicită
este top.
Exemplu:
Un exemplu de utilizare a acestui element este dat în cele ce urmează:
<TABLE>
<CAPTION>Common Usenet Abbreviations</CAPTION>
<THEAD>
...
</TABLE>
iar o completare cu un sumar poate arăta astfel:
<TABLE SUMMARY="This table gives the character entity reference,
decimal character reference, and hexadecimal character
reference for symbols and Greek letters.">
<CAPTION>Symbols and Greek Letters in HTML 4.0</CAPTION>
...
</TABLE>
3. Grupuri de rînduri (elementele THEAD, TFOOT şi TBODY)

Rîndurile unui tabel pot fi grupate în cap de tabel (head), legendă a tabelului (foot) şi una
sau mai multe secţiuni, utilizînd elementele THEAD, TFOOT şi, respectiv, TBODY.
Această divizare permite browserelor să suporte scrollul corpului tabelului independent
de headerul şi footerul tabelului, care, la rîndul lor, pot fi repetate pe fiecare pagină cînd
astfel de tabele se listează. Headerul şi footerul trebuie să conţină informaţii despre
coloanele tabelului, iar corpul acestuia să conţină rîndurile de date.
Secţiunile definite de THEAD, TFOOT şi TBODY trebuie să conţină acelaşi număr de
coloane.
Cînd sînt prezente, fiecare element THEAD, TFOOT şi TBODY conţine grupuri de
rînduri. Fiecare astfel de grup trebuie să conţină cel puţin un rînd definit cu TR.
Exemplul următor ilustrează ordinea şi structura headerului, footerului şi corpurilor unui
tabel:
<TABLE>
<THEAD>
<TR> ... informaţii de header ...
</THEAD>
<TFOOT>
<TR> ... informaţii de footer ...
</TFOOT>
<TBODY>
<TR> ... primul rînd al primului bloc de date ...
<TR> ... al doilea rînd al primului bloc de date ...
</TBODY>
<TBODY>
<TR> ... primul rînd al blocului doi de date ...
<TR> ... al doilea rînd al blocului doi de date ...
<TR> ... al treilea rînd al blocului doi de date ...
</TBODY>
</TABLE>
TFOOT trebuie să apară înainte de TBODY în cadrul lui TABLE, astfel ca browserele să
poată interpreta (afişa) footerul înainte de recepţionarea tuturor (potenţial) numeroaselor
rînduri de date.
În cele ce urmează se sintetizează ce taguri sînt obligatorii şi care pot fi omise:
 Tagul de start al lui TBODY este necesar întotdeauna cu excepţia cazului cînd
tabelul conţine doar un grup de rînduri definit cu un singur TBODY şi nu apare
nici un header sau footer. Tagul de final al lui TBODY poate fi omis întotdeauna
fără probleme.
 Tagurile de start pentru THEAD şi TFOOT sînt necesare cînd apar secţiunile
descrise de acestea, dar cele de final pot fi omise şi ele fără probleme.
Astfel, tabelul anterior poate fi descris mai pe scurt astfel:
<TABLE>
<THEAD>
<TR> ... informaţii de header ...
<TFOOT>
<TR> ... informaţii de footer ...
<TBODY>
<TR> ... primul rînd al primului bloc de date ...
<TR> ... al doilea rînd al primului bloc de date ...
<TBODY>
<TR> ... primul rînd al blocului doi de date ...
<TR> ... al doilea rînd al blocului doi de date ...
<TR> ... al treilea rînd al blocului doi de date ...
</TABLE>
A. Elementul THEAD
Sintaxa:
<THEAD>...</THEAD>
Atribute posibile:
 ALIGN=[ top | bottom | left | right ] (alinierea orizontală a celulelor din grup)
 VALIGN=[ top | middle | bottom | baseline ] (alinierea verticală a celulelor din
grup)
 CHAR=Character (caracterul după care se face alinierea)
 CHAROFF=Length (offsetul caracterului după care se face alinierea)
 atribute comune
Conţine:
 unul sau mai multe elemente TR
Conţinut în:
 TABLE
Descriere:
Elementul THEAD defineşte un grup de rînduri de tip header (antet) într-un tabel.
Un tabel definit cu TABLE poate avea un singur THEAD, care poate apare după
CAPTION, COL sau COLGROUP, şi poate preceda elementele TFOOT (opţional) şi
TBODY (obligatoriu).
Prin gruparea explicită a rîndurilor de antet cu THEAD, autorii oferă browserelor
posibilitatea de a include acele rînduri pe fiecare pagină tipărită a unui tabel mare,
precum şi posibilitatea de prezenta tabele care permit scroll doar rîndurilor de date,
cele de antet rămînînd fixe pe ecran.
Nu toate browserele suportă acest element, dar folosirea lui nu conduce la nici o
problemă la acestea.
THEAD permite specificarea unor atribute de prezentare pentru alinierea celulelor de
date ale tabelului. Întrucît nu toate browserele îl suportă, aceste atribute se pot
specifica şi direct celulelor (definite cu TR, TH, TD).
Atributul ALIGN specifică alinierea orizontală pentru fiecare celulă din grupul de
rînduri. ALIGN=char aliniază conţinutul după un anumit caracter dat de atributul
CHAR, a cărui valoare implicită este punctul zecimal. CHAROFF specifică offsetul
primei apariţii a caracterului de aliniere. Valoarea lui este un număr de pixeli sau un
procent din lăţimea celulei. CHAROFF="50%" aliniază caracterul de aliniere în centru
celulei.
Atributul VALIGN specifică poziţia verticală a conţinutului celulelor şi poate lua
valorile:
 top, care poziţionează datele la marginea de sus a celulei;
 middle, valoarea implicită, care poziţionează datele în centrul celulei;
 bottom, care poziţionează datele la marginea de jos a celulei;
 baseline, care specifică alinierea primei linii a celulei (indiferent ce conţine) la o
linie de bază a fontului (baseline) comună.
B. Elementul TFOOT
Sintaxa:
<TFOOT>...</TFOOT>
Atribute posibile:
grup)
 atribute comune
Conţine:
Conţinut în:
 TABLE
Descriere:
Elementul TFOOT defineşte un grup de rînduri de tip footer într-un tabel. Un tabel
definit cu TABLE poate avea un singur TFOOT, care poate apare după THEAD
(opţional) şi poate preceda elementul TBODY (obligatoriu).
Prin gruparea explicită a rîndurilor de footer cu TFOOT, autorii oferă browserelor
posibilitatea de a include acele rînduri pe fiecare pagină tipărită a unui tabel mare,
precum şi posibilitatea de prezenta tabele care permit scroll doar rîndurilor de date,
cele de footer rămînînd fixe pe ecran.
Nu toate browserele suportă acest element, iar cerinţa de a fi plasat înainte de TBODY
îl face nerecomandat pentru acestea.
Atributele (şi semnificaţiile lor) sînt aceleaşi cu cele de la THEAD.
Un footer poate oferi un rînd special, de tip sumar sau de tip „notă de pagină/picior“,
ce se aplică unui tabel întreg sau numai unei porţiuni din el.
Exemplu:
Următorul exemplu foloseşte TFOOT pentru a defini „note de pagină/picior“ pentru
tot tabelul:
<TABLE SUMMARY="This table lists...">
<CAPTION>Programs Available</CAPTION>
<THEAD>
<TR>
...
</TR>
</THEAD>
<TFOOT CLASS=footnote>
<TR>
<TD COLSPAN=5>
Many disciplines are also available as Minors and
Joint
Honors programs.
</TD>
</TR>
<TR>
<TD COLSPAN=5>
* Preprofessional programs ...
</TD>
</TR>
</TFOOT>
<TBODY>...
</TBODY>
</TABLE>
C. Elementul TBODY
Sintaxa:
<TBODY>...</TBODY>
Atribute posibile:
grup)
 atribute comune
Conţine:
Conţinut în:
 TABLE
Descriere:
Elementul TBODY defineşte un grup de rînduri de date într-un tabel. Un tabel
definit cu TABLE poate avea unul sau mai multe elemente TBODY, care pot apărea
după elementul TFOOT (opţional). Tagul de sfîrşit este întotdeauna opţional. Tagul de
început este opţional cînd tabelul conţine doar un TBODY şi nu conţine nici un
THEAD sau TFOOT. Aceasta permite ca structura simplă a tabelelelor din HTML 3.2
să rămînă validă:
<TABLE>
<TR>
<TH>Abbreviation</TH>
<TH>Long Form</TH>
</TR>
<TR>
<TD>AFAIK</TD>
<TD>As Far As I Know</TD>
</TR>
</TABLE>
Prin gruparea explicită a rîndurilor de date cu TBODY, autorii oferă browserelor
posibilitatea de a prezenta tabele care permit scroll doar rîndurilor de date, cele de
header şi footer rămînînd fixe pe ecran. În plus, gruparea rîndurilor de date în mai
multe TBODY permite sugerarea unor prezentări diverse pentru diferitele grupuri, prin
intermediul style-sheet-urilor.
Nu toate browserele suportă acest element, dar folosirea lui nu conduce la nici o
problemă la acestea. Atributele au aceeaşi semnificaţia ca la THEAD şi TFOOT.
4. Definirea rîndurilor (elementul TR)
Un tabel este alcătuit, în esenţă din rînduri care conţin celulele în care se introduc
elementele ce fac parte din tabel (datele). Un rînd de date este descris prin intermediul
elementului TR. Atributele acestui element permit descrierea unor caracteristici comune
tuturor celulelor din acel rînd, chiar dacă acestea pot fi specificate ulterior şi individual,
pentru fiecare celulă în parte. Aceste caracteristici sînt:
 Alinierea orizontală a textului (ALIGN [=right, left, center])
 Alinierea verticală a textului (VALIGN [=top, middle, bottom])
 Culoarea de background (BGCOLOR [=valoarea culorii în hexa])
 Culoarea marginilor [a se vedea atributele lui TABLE]
Elementul TR
Sintaxa:
<TR>...</TR>
Atribute posibile:
grup)
 BGCOLOR=Color (culoarea de background a rîndului)
 atribute comune
Conţine:
 unul sau mai multe elemente TH sau TD
Conţinut în:
 TABLE, TFOOT, TBODY
Descriere:
Elementul TR defineşte un rînd într-un tabel. Elementele TR pot fi grupate cu ajutorul
lui THEAD, TFOOT sau TBODY. Întrucît tagurile de început şi de sfîrşit ale lui
TBODY sînt opţionale, structura simplă a tabelului din HTML 3.2 rămîne validă.
TR conţine elemente TH sau TD, care la rîndul lor conţin datele propriu-zise din tabel.
În plus faţă de atributele comune prezente la cele mai multe elemente, TR poate avea
şi atribute de prezentare pentru alinierea celulelor în rînd şi specificarea culorii de
background. Semnificaţia acestora este aceeaşi cu cea de la elementele anterioare.
5. Definirea celulelor unui tabel (elementele TH şi TD)
Celule unui tabel pot conţine două tipuri de informaţie: informaţie antet (header, cap de
tabel) şi date. Această distincţie permite browserelor să prezinte diferit cele două feluri
de celule, chiar şi în absenţa style-sheet-urilor. De exemplu browserele vizuale pot
prezenta headerele cu un font bold, iar cele care sintetizează vocea cu o inflexiune
specială a vocii.
Informaţia de tip header se descrie cu elementul TH. Există două tipuri de astfel de
informaţie: cea descrisă cu TH şi valoarea atributului ABBR. Un browser trebuie să
prezinte sau una sau alte dintre cele două tipuri, ABBR fiind preferată atunci cînd nu
există suficient spaţiu pentru a prezenta în întregime informaţia din TH.
Datele propriu-zise ale tabelului se inserează în celule descrise cu elementul TD.
Celulele unui tabel pot fi goale (fără nici un conţinut). În acest caz pot apare probleme la
afişarea marginilor celulei respective (unele browsere nu desenează marginile celulelor
goale, acestea trebuind să conţină un element invizibil, de exemplu un blanc, pentru ca
marginea rîndului să nu fie întreruptă).
De exemplu, următorul tabel conţine (descrie) 2 rînduri cu cîte 4 coloane (celule) pe
fiecare rînd, fiecare coloană avînd un header (cap de coloană) care o descrie:
<TABLE summary=" Tabel care indică nr. de ceşti de cafea băute la
o reuniune,
felul cafelei (normă/decofeinizată) şi dacă este
cu/fără
zahăr. ">
<CAPTION>Cups of coffee consumed by each</CAPTION>
<TR>
<TH>Name</TH>
<TH>Cups</TH>
<TH>Type of Coffee</TH>
<TH>Sugar?</TH>
<TR>
<TD>T. Sexton</TD>
<TD>10</TD>
<TD>Espresso</TD>
<TD>No</TD>
<TR>
<TD>J. Dinnen</TD>
<TD>5</TD>
<TD>Decaf</TD>
<TD>Yes</TD>
</TABLE>
Acest tabel poate arăta astfel:
Name Cups Type of Coffee Sugar?

T. Sexton 10 Espresso No
J. Dinnen 5 Decaf Yes
A. Elementul TH
Sintaxa:
<TH>...</TH>
Atribute posibile:
 ROWSPAN=Number (rînduri suprapuse/depăşite de celulă)
 COLSPAN=Number (coloane suprapuse/depăşite de celulă)
 HEADERS=IDREFS (lista celulelor header pentru celula curentă)
 ABBR=Text (abrevierea celulei header)
 SCOPE=[ row | col | rowgroup | colgroup ] (celulele acoperite de celula header)
 AXIS=CDATA (categoria celulei header)
grup)
 WIDTH=Pixels (lăţimea celulei)
 HEIGHT=Pixels (înălţimea celulei)
 NOWRAP (suprimă continuarea conţinutului pe un alt rînd/word wrap)
 atribute comune
Conţine:
 elemente inline, elemente tip bloc
Conţinut în:
 TR
Descriere:
Elementul TH defineşte o celulă de tip header (antet, cap de tabel). Dacă o celulă este
şi antet şi dată trebuie folosit TD.
Atributele ROWSPAN şi COLSPAN specifică numărul de rînduri şi respectiv
numărul de coloane care sînt depăşite de celulă (sînt suprapuse de celulă, peste care se
intinde celula). Valoarea implicită este 1. Valoarea specială 0 indică suprapunerea
tuturor rîndurilor sau coloanelor pînă la sfîrşitul tabelului, dar este ignorată de
majoritatea browserelor.
Atributul HEADERS specifică celulele header ce se aplică lui TH. valoarea este o listă
a valorilor atributului ID a acelor celule. Se foloseşte de browserele nevizuale.
Atributul SCOPE specifică celulele pentru care elementul descris cu TH oferă
informaţii de header (antet).
Atributul ABBR dă o versiune abreviată a conţinutului celulei, utilizată în cazul în
care nu există suficient spaţiu pentru a vizualiza conţinutul celulei.
Atributul AXIS oferă o metodă de a clasifica celulele. Valoarea acestui atribut este o
listă de nume de categorii.
Atributele ALIGN, VALIGN, CHAR, CHAROFF, BGCOLOR au aceeaşi
semnificaţie ca la TR, iar WIDTH, HEIGHT, NOWRAP şi BGCOLOR sînt depăşite
în favoarea style-sheet-urilor.
B. Elementul TD
Sintaxa:
<TD>...</TD>
Atribute posibile:
 ROWSPAN=Number (rînduri suprapuse/depăşite de celulă)
 COLSPAN=Number (coloane suprapuse/depăşite de celulă)
 HEADERS=IDREFS (lista celulelor header pentru celula curentă)
 ABBR=Text (abrevierea celulei header)
 SCOPE=[ row | col | rowgroup | colgroup ] (celulele acoperite de celula header)
 AXIS=CDATA (categoria celulei header)
grup)
 WIDTH=Pixels (lăţimea celulei)
 HEIGHT=Pixels (înălţimea celulei)
 NOWRAP (suprimă continuarea conţinutului pe un alt rînd/word wrap)
 atribute comune
Conţine:
 elemente inline, elemente tip bloc
Conţinut în:
 TR
Descriere:
Elementul TD defineşte o celulă de date. Elementele TD sînt conţinute în TR, care
poate să conţină şi elemente TH. Dacă o celulă este şi antet şi dată trebuie folosit TD.
Semnificaţia atributele este aceeaşi cu cea de la TH.
6. Definirea celulelor extinse (atributele COLSPAN şi ROWSPAN)
Sintaxa:
<TH COLSPAN=nr. coloane></TH> sau <TH ROWSPAN=nr. rînduri></TH>
Descriere:
Pentru nevoi de organizare a datelor din tabel sau pentru obţinerea de efecte, celulele
pot fi extinse atît orizontal (pe mai multe coloane) cît şi vertical (pe mai multe
rînduri). Extinderea se obţine cu ajutorul atributelor COLSPAN şi ROWSPAN
utilizate cu tag-urile <TH> sau <TD>. Celulele se extind întotdeauna în jos şi/sau spre
dreapta; deci, pentru a crea o celulă care se extinde peste cîteva coloane se utilizează
atributul COLSPAN în conjuncţie cu tag-ul de început a celei mai din stînga celule din
rînd, iar pentru a obţine extinderea unei celule peste mai multe rînduri se utilizează
atributul ROWSPAN în conjuncţie cu tag-ul de început a celei mai de sus celule de pe
coloană. Valorile atributelor reprezintă numărul de coloane, respectiv rînduri peste
care se doreşte să fie extinsă celula.
Trebuie avut în vedere că în cazul unor descrieri eronate (cu celule care se „suprapun“)
browserele reacţionează diferit, efectele putînd fi uneori imprevizibile.
Exemplu greşit (cu celule extinse/suprapuse):
În acest tabel celula "5" este extinsă peste două rînduri şi celula "7" este extinsă peste
două coloane, rezultînd o suprapunere între celulele "7" şi "9":
<TABLE border="1">
<TR><TD>1 <TD>2 <TD>3
<TR><TD>4 <TD rowspan="2">5 <TD>6
<TR><TD colspan="2">7 <TD>9
</TABLE>
Exemplu:
Un tabel cu celule extinse descris corect ar putea fi următorul:
<TABLE BORDER>
<TR>
<TH COLSPAN=2></TH>
<TH>Celula din stînga este<BR>extinsă pe două coloane<BR>Rîndul 1</TH>
</TR>
<TR ALIGN=CENTER>
<TH ROWSPAN=2>Celulă extinsă<BR>pe două rînduri</TH>
<TH>Capul rîndului 2</TH>
<TD>Rîndul 2</TD>
</TR>
<TR ALIGN=CENTER>
<TH>Capul rîndului 3</TH>
<TD>Rîndul 3</TD>
</TR>
</TABLE>
Exemplu:
Acest exemplu ilustrează cum afectează definirea unei celule extinse vecinii săi (aici
celula de sub):
<TABLE border="1">
<TR><TD>1 <TD rowspan="2">2 <TD>3
<TR><TD>4 <TD>6
<TR><TD>7 <TD>8 <TD>9
</TABLE>
Întrucît celula "2" se extinde pe primul şi al doilea rînd, definirea celui de al doilea
rînd o va lua în considerare. Astfel, în rîndul doi, al doile TD defineşte de fapt celula a
treia de pe rînd, rezultînd un tabel ca în figura următoare:
Exemplu:
Acelaşi tabel, cu o extindere pe rînd, poate fi descris astfel:
<TABLE border="1">
<TR><TD>1 <TD>2 <TD>3
<TR><TD colspan="2">4 <TD>6
<TR><TD>7 <TD>8 <TD>9
</TABLE>
aici celula "4" se extinde pe două coloane şi, astfel, al doilea TD din rînd defineşte a
treia celulă ("6"):
7. Grupuri de coloane (elementul COLGROUP)

Într-un tabel se pot grupa şi coloanele, nu numai rîndurile, folosind elementul
COLGROUP. Numărul de coloane ce fac parte dintr-un grup se poate specifica în două
moduri (mutual exclusive):
1. Cu atributul SPAN al elementului (valoare implicită 1)
2. Cu elementul COL, inclus în COLGROUP, se reprezintă una sau mai multe coloane
din grupul respectiv.
Avantajul folosirii atributului SPAN (metoda 1) este că se pot grupa informaţii despre
lăţimile coloanelor. De exemplu, dacă un tabel conţine 40 de coloane, fiecare cu o lăţime
de 20 pixeli, este mult mai uşor de scris:
<COLGROUP span="40" width="20">
</COLGROUP>
de cît:
<COLGROUP>
<COL width="20">
<COL width="20">
...pînă la 40 de coloane...
</COLGROUP>
Cînd este necesar să se individualizeze o coloană (pentru stil, lăţime, etc) într-un grup, se
poate identifica acea coloană cu un element COL. Astfel, pentru a aplica un stil special
ultimei coloane a tabelului dat ca exemplu anterior se poate folosi:
<COLGROUP width="20">
<COL span="39">
<COL id="format-special">
</COLGROUP>
Atributul width al lui COLGROUP este moştenit de toate cele 40 de coloane. Primul
element COL se referă la primele 39 de coloane (nu e nimic special cu ele) şi al doilea
atribuie o valoare identificatorului reprezentat de atributul ID, astfel ca un stil defint cu
tehnica style-sheet-urilor să se refere la el.
În exemplul următor se descrie un tabel cu două grupe de coloane. Prima conţine 10
coloane, iar cea de a doua 5. Lăţimea implicită pentru fiecare coloană din primul grup va
fi 50 de pixeli, iar lăţimea fiecărei coloane din a doua grupă va fi minimul necesar pentru
acea coloană:
<TABLE>
<COLGROUP span="5" width="0*">
<THEAD>
<TR>
<TD> ...
</TABLE>
Elementul COLGROUP
Sintaxa:
<COLGROUP>... </COLGROUP>
Atribute posibile:
 SPAN=Number (numărul de coloane în grup)
 WIDTH=MultiLength (lăţimea fiecărei coloane)
grup)
 atribute comune
Conţine:
 Zero sau mai nmulte elemente COL
Conţinut în:
 TABLE
Descriere:
Acest element defineşte un grup de coloane într-un tabel. Dacă e folosit, COLGROUP
trebuie să apară după elementul (opţional) CAPTION şi înaintea elementului (tot
opţional) THEAD. Diviziunea structurală definită de COLGROUP permite sugerarea
unei prezentări comune pentru tot grupul de coloane prin intermediul style-sheet-
urilor.
Atributul SPAN defineşte numărul de coloane din grup; valoarea implicită este 1.
Celelalte atribute permise cu acest element sînt comune coloanelor din tabel. Poate
conţine, de asemenea, elemente COL care definesc atributele pentru celulele din
coloane în mod individual, suprapunîndu-se în acest fel atributele definite pentru grup.
Atributul SPAN nu trebuie utilizat dacă COLGROUP conţine COL.
COLGROUP poate avea şi un număr de atribute de prezentare, multe dintre ele
neputînd fi însă înlocuite complet de style-sheet-uri. Întrucît nu toate browserele
suportă COLGROUP, se pot specifica aceste atribute şi celulelor individuale
(elementelor TH şi TD).
Atributul WIDTH specifică lăţimea fiecarei coloane din grup. Valoarea trebuie să fie
un număr de pixeli, procent din lăţimea tabelului sau o lăţime relativă exprimată ca i*,
cu i intreg. O coloană care are WIDTH="3*" va avea lăţimea de 3 ori cît una care are
WIDTH="1*". Valoarea WIDTH="0*" este echivalentul minimului necesar pentru
afişarea conţinutului coloanei.
Atributele celelalte au aceeaşi semnificaţie ca la elementele anterioare.
Exemplu:
Acest exemplu oferă o perspectivă asupra divizării structurale a unui tabel în 3 părţi.
Prima parte este alcătuită dintr-o singură coloană care dă descrierea unui caracter. O
doua, de 3 coloane, dă diverse moduri de a reprezenta caracterul respectiv în HTML.
A treia parte, tot de 3 coloane, arată cum va apare caracterul respectiv în diverse
browsere.
decimal character reference, and hexadecimal
character
reference for 8-bit Latin-1 characters, as well as
the
rendering of each in your browser.">
<COLGROUP>
<COLGROUP SPAN=3>
<COLGROUP SPAN=3>
<THEAD>
<TR>
<TH SCOPE=col ROWSPAN=2>Character</TH>
<TH SCOPE=col ROWSPAN=2>Entity</TH>
<TH SCOPE=col ROWSPAN=2>Decimal</TH>
<TH SCOPE=col ROWSPAN=2>Hex</TH>
<TH SCOPE=colgroup COLSPAN=3>Rendering in Your Browser</TH>
</TR>
<TR>
<TH SCOPE=col>Entity</TH>
<TH SCOPE=col>Decimal</TH>
<TH SCOPE=col>Hex</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD SCOPE=row>non-breaking space</TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
...
</TBODY>
</TABLE>
În locul lui <COLGROUP SPAN=3> se poate folosi un COLGROUP cu 3 elemente

COL, astfel:
<COLGROUP>
<COL CLASS=entity>
<COL CLASS=decimal>
<COL CLASS=hex>
</COLGROUP>
S-a folosit atributul CLASS pentru a se face disticţie între coloane individuale ale
grupului, permiţînd astfel sugerarea diferită a prezentării pentru respectivele coloane,
prin folosirea style-sheet-urilor.
8. Definirea atributelor comune coloanelor (elementul COL)

Elementul COL permite autorilor paginilor HTML gruparea împreună a atributelor unor
coloane. COL nu grupează coloane (dpdv structural) – acesta fiind rolul lui
COLGROUP. Elementel COL sînt vide şi servesc doar ca suport pentru atribute. Ele pot
apare în interiorul sau exteriorul unui grup explicit de coloane (defint cu COLGROUP).
Elementul COL
Sintaxa:
<COL>
Atribute posibile:
 SPAN=Number (numărul de coloane în grup)
 WIDTH=MultiLength (lăţimea fiecărei coloane)
grup)
 atribute comune
Conţine:
 vid (nu conţine nimic)
Conţinut în:
 TABLE, COLGROUP
Descriere:
Acest element defineşte doar atributele comune unei coloane a unui tabel şi, spre
deosebire de COLGROUP, nu grupează structural coloanele tabelului. Dacă e folosit,
COL trebuie să apară după elementul (opţional) CAPTION şi înaintea elementului (tot
opţional) THEAD.
Atributul SPAN defineşte numărul de coloane care partajează aceleaşi atribute;
valoarea impli-cită este 1. COL poate fi conţinut direct în TABLE sau poate apare în
COLGROUP, caz în care suprascrie atributele definite de acesta. Celelalte atribute au
aceeaşi semnificaţie ca la elementul COLGROUP.
Exemplu:
Acest exemplu foloseşte COL în cadrul lui COLGROUP pentru a atribui diferite
„clase“ (atributul class) coloanelor unui tabel:

decimal character reference, and hexadecimal
character
reference for 8-bit Latin-1 characters, as well
as the
rendering of each in your browser.">
<COLGROUP CLASS="character-description">
<COLGROUP>
<COL CLASS=entity>
<COL SPAN=2 CLASS=numeric>
<COLGROUP>
<COL CLASS="entity-rendering">
<COL CLASS="decimal-rendering">
<COL CLASS="hex-rendering">
<THEAD>
<TR>
<TH SCOPE=col ROWSPAN=2>Character</TH>
<TH SCOPE=col ROWSPAN=2>Entity</TH>
<TH SCOPE=col ROWSPAN=2>Decimal</TH>
<TH SCOPE=col ROWSPAN=2>Hex</TH>
<TH SCOPE=colgroup COLSPAN=3>Rendering in Your
Browser</TH>
</TR>
<TR>
<TH SCOPE=col>Entity</TH>
<TH SCOPE=col>Decimal</TH>
<TH SCOPE=col>Hex</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD SCOPE=row>non-breaking space</TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
...
</TBODY>
</TABLE>
9. Calculul numărului de coloane dintr-un tabel
Pentru calculul numărului de coloane ale unui tabel se folosesc două metode prezentate în
continuare în ordinea precedenţei (ordinea în care sînt folosite):
1. Dacă TABLE conţine un element COLGROUP sau COL numărul coloanelor se
calculează adunînd:
 Pentru fiecare COL valoarea atributului SPAN (valoarea implicită 1).
 Pentru fiecare COLGROUP ce conţine cel puţin un COL se ignoră
atributul SPAN al fiecărui COLGROUP. Pentru fiecare COL se aplică
pasul 1.
 Pentru fiecare COLGROUP vid se ia valoarea lui SPAN (valoarea
implicită 1).
2. Altfel, dacă TABLE nu conţine COLGROUP sau COL numărul de coloane se
determină din descrierea rîndurilor. Numărul de coloane este egal cu numărul
maxim de elemente ce par pe un rînd (incluzînd şi celule ce se extind pe mai
multe coloane). Pentru toate rîndurile care au mai puţine coloane se adaugă la
sfîrşit celule goale.
Dacă tabelul conţine COLGROUP şi COL şi cele două metode de calcul nu dau acelaşi
rezultat atunci este vorba despre o eroare. Odată ce s-a calculat numărul de coloane,
acestea pot fi grupate.
Exemplu: Pentru fiecare dintre tabelele descrise în continuare, cele 2 metode trebuie să
dea acelaşi rezultat: 3 coloane. Primele trei tabele pot fi afişate incremental:
1.
<TABLE>
<COLGROUP span="3"></COLGROUP>
<TR><TD> ...
...rîndurile tabelului...
</TABLE>
2.
<TABLE>
<COLGROUP>
<COL>
<COL span="2">
</COLGROUP>
<TR><TD> ...
... rîndurile tabelului...
</TABLE>
3.
<TABLE>
<COLGROUP>
<COL>
</COLGROUP>
<COLGROUP span="2">
<TR><TD> ...
... rîndurile tabelului...
</TABLE>
4.
<TABLE>
<TR>
<TD><TD><TD>
</TR>
</TABLE>
10. Calculul lăţimii coloanelor dintr-un tabel

Lăţimea unei coloane poate fi specificată în trei moduri:
1. Fix
Specificarea unei lăţimi fixe este dată în pixeli (ex. width="30"). Această metodă
permite afişarea tabelelor în mod incremental (pe măsură ce se încarcă rîndurile
tabelului).
2. Procent
Specificarea unei lăţimi ca procent (ex. width="20%") este dată în funcţie de lăţimea
disponibilă pentru întreg tabelul. Aceasta nu depinde de tabelulul însuşi, şi astfel
această metodă permite şi ea afişarea tabelelor incremental.
3. Proporţional
Specificarea unei lăţimi în mod proporţional (ex. width="3*") se referă la porţiunile
de spaţiu orizontal solicitate de tabel. Dacă lăţimea tabelului este dată ca o valoare
fixă, prin intermediul atributului width al elementului TABLE, atunci şi această
metodă permite afişarea tabelelor incremental.
Dacă, însă, tabelul nu are o lăţime fixă, browserele trebuie să aştepte încărcarea
integrală a tabelului înainte de a determina lăţimea orizontală cerută de tabel. Numai
atunci se poate determina şi lăţimea coloanelor.
Dacă nu se specifică nici o informaţie despre lăţimea unei coloane, browserele nu vor
capabile să formateze tabelul incremental, întrucît trebuie să aştepte întregul conţinut al
coloanei pentru a determina lăţimea acesteia.
Dacă lăţimea coloanei se dovedeşte prea mică pentru conţinutul acesteia, browserele pot
alege să reformateze tabelul.
Exemplu:
Tabelul următor are 6 coloane. Prima nu aparţine explicit nici unui grup. Urmatoarele trei
aparţin explicit primului grup şi ultimele două aparţin celui de al doilea grup explicit.
Acest tabel nu poate fi afişat incremental întrucît conţine coloane cu lăţimi specificate
proporţional şi atributul width al lui TABLE nu are specificat nici o valoare.
<TABLE>
<COLGROUP>
<COL width="30">
<COLGROUP>
<COL width="30">
<COL width="0*">
<COL width="2*">
<COLGROUP align="center">
<COL width="1*">
<COL width="3*" align="char" char=":">
<THEAD>
<TR><TD> ...
</TABLE>
În momentul în care browserul recepţionează toate datele din tabel, speţiul orizontal
disponibil va fi alocat coloanelor după cum urmează:
1. Se alocă 30 de pixeli coloanelor unu şi doi.
2. Se rezervă spaţiul minimal pentru coloana trei.
3. Spaţiul orizontal rămas disponibil este împăţit în 6 părţi egale (întrucît 2* + 1*
+ 3* = 6 părţi egale).
4. Coloana a patra (2*) va primi 2 părţi, coloana a cincea (1*) o parte şi coloana a
şasea (3*) va primi 3 parţi.
Valoarea atributului align din coloana a treia este "center". Toate celule din fiecare
coloană din acest grup vor moşteni această valoare, dar o pot suprapune. De fapt, COL
chiar asta şi face prin specificarea faptului că fiecare celulă din coloana a şasea va fi
aliniată după caracterul ":".
Exemplu:
Tabelul următor, aşa cum are descrisă lăţimea, permite formatarea (şi implicit şi afişarea)
incremental:
<TABLE width="200">
<COLGROUP width="*">
<COL id="penultima-coloană">
<COL id="ultima-coloană">
<THEAD>
<TR><TD> ...
</TABLE>
Primele 10 coloane au fiecare cîte 15 pixeli lăţime. Ultimele două coloane vor primi
fiecare jumătate din cei 50 de pixeli care mai rămîn. Elementele COL apar doar pentru a
se specifica o valoare atributului id.
11. Afişarea marginilor exterioare şi interioare

Atributele care determină modul de afişare al marginilor exterioare şi liniilor interioare
(dintre celule) sînt următoarele:
1. frame = void|above|below|hsides|lhs|rhs|vsides|box|border
Acest atribut specifică marginile exterioare (care înconjoară tabelul) care vor fi
vizibile.
2. rules = none|groups|rows|cols|all
Acest atribut specifică marginile interioare (care delimitează celulele tabelului)
care vor fi vizibile. Modul în care sînt afişate depinde de browser.
3. border = pixels
Acest atribut specifică lăţimea (în pixeli) a marginilor exterioare.
Pentru a se păstra compatibilitatea cu versiunile anterioare, se impun următoarele reguli:
 Dacă border="0" atunci frame="void" şi, dacă nu este specificat altfel,
rules="none".
 Orice altă valoare pentru border implică frame="border" şi, dacă nu este specificat
altfel, rules= "all".
 Valoarea "border" în tagul de început al lui TABLE trebuie interpretat ca valoare a
atributului frame. Aceasta implică rules="all" şi o valoare diferită de zero pentru
atributul border.
Exemplu:
Următoarele 2 definiţii sînt echivalente:
<TABLE border="2">
<TABLE border="2" frame="border" rules="all">
este aceeaşi cu:
<TABLE border>
<TABLE frame="border" rules="all">
Exemplu:
În exemplul următor este descris un tabel care are margine exterioară vizibilă, de 5
pixeli grosime, în partea stîngă şi dreaptă, precum şi margini interne vizibile între
celule:
<TABLE border="5" frame="vsides" rules="cols">
<TR> <TD>1 <TD>2 <TD>3
<TR> <TD>4 <TD>5 <TD>6
<TR> <TD>7 <TD>8 <TD>9
</TABLE>
12. Alinierea datelor din celule

Pentru estetica conţinutului tabelului există cîteva opţiuni care permit alinierea datelor în
interiorul celulelor atît pe orizontală cît şi pe verticală. Opţiunile sînt exprimabile prin
intermediul unor atribute ale tag-urilor TR, TH, TD, COL, COLGROUP.
Atributele care afectează alinierea datelor în celule unui tabel sînt:
1. align = left|center|right|justify|char
Atributul ALIGN este utilizat pentru aliniere orizontală şi poate lua următoarele
valori:
Valoare Descriere
LEFT Datele din celulă sînt aliniate la marginea din stînga celulei
RIGHT Datele din celulă sînt aliniate la marginea din dreapta celulei
CENTER Datele din celulă sînt centrate orizontal la mijlocul celulei
JUSTIFY Datele din celulă sînt aliniate atît la marginea din stînga a celulei
cît şi la marginea din dreapta
CHAR Datele din celulă sînt aliniate după un anumit caracter
2. valign = top|middle|bottom|baseline
Atributul VALIGN este utilizat pentru aliniere verticală şi poate lua următoarele
valori:
Valoare Descriere
TOP Datele din celulă sînt aliniate la marginea de sus a celulei
BOTTOM Datele din celulă sînt aliniate la baza celulei
MIDDLE Datele din celulă sînt centrate vertical la mijlocul celulei
BASELINE Aliniere similară cu TOP dar alinierea se face cu baza primului
rînd text din fiecare celulă.
3. char = character
Acest atribut specifică un caracter (unic într-un fragment de text) care joacă rolul
de axă după care se aliniază restul. Valoarea implicită este punctul zecimal.
4. charoff = length
Cînd este prezent acest atribut specifică affsetul primei aparaţii a caracterului
după care se face alinierea pe fiecare linie. Dacă o linie nu conţine caracterul de
aliniere ea poate fi deplasată la sfîrşitul poziţieie de aliniere.
Exemplu:
Tabele cu aliniere orizontală şi verticală:
1.
<TABLE BORDER>
<CAPTION>Aliniere orizontală</CAPTION>
<TR>
<TD ALIGN=LEFT> <BR> Left <BR> </TD>
<TD ALIGN=Center> <BR> Center <BR> </TD>
<TD ALIGN=RIGHT> <BR> Right <BR> </TD>
</TR>
</TABLE>
2.
<TABLE BORDER>
<CAPTION>Aliniere verticală</CAPTION>
<TR ALIGN=CENTER>
<TD VALIGN=TOP>Top<BR> <BR> </TD>
<TD VALIGN=MIDDLE>Center</TD>
<TD VALIGN=BOTTOM> <BR><BR> Bottom </TD>
</TR>
</TABLE>
Exemplu:
Tabel cu combinaţie de alinieri:
<TABLE BORDER>
<TR>
<TH></TH>
<TH>Left (Stînga)</TH>
<TH>Center (Centru)</TH>
<TH>Right (Dreapta)</TH>
<TH>Top<BR>(Sus)<BR></TH>
<TD ALIGN=LEFT VALIGN=TOP><IMG SRC="A.gif"></TD>
<TD ALIGN=CENTER VALIGN=TOP><IMG SRC="A.gif"></TD>
<TD ALIGN=RIGHT VALIGN=TOP><IMG SRC="A.gif"></TD>
<TH>Center<BR>(Centru)<BR></TH>
<TD ALIGN=LEFT VALIGN=MIDDLE><IMG SRC="A.gif"></TD>
<TD ALIGN=CENTER VALIGN=MIDDLE><IMG SRC="A.gif"></TD>
<TD ALIGN=RIGHT VALIGN=MIDDLE><IMG SRC="A.gif"></TD>
</TR>
<TR>
<TH>Bottom<BR>(Jos)<BR></TH>
<TD ALIGN=LEFT VALIGN=BOTTOM><IMG SRC="A.gif"></TD>
<TD ALIGN=CENTER VALIGN=BOTTOM><IMG SRC="A.gif"></TD>
<TD ALIGN=RIGHT VALIGN=BOTTOM><IMG SRC="A.gif"></TD>
</TR>
</TABLE>
Exemplu:
Tabelul următor aliniază un rînd de valori ce reprezintă preţuri după punctul zecimal,
caracter de aliniere setat explicit:
<TABLE border="1">
<COLGROUP>
<COL>
<COL align="char" char=".">
<THEAD>
<TR>
<TH>Vegetable
<TH>Cost per kilo
<TBODY>
<TR>
<TD>Lettuce
<TD>$1
<TR>
<TD>Silver carrots
<TD>$10.50
<TR>
<TD>Golden turnips
<TD>$100.30
</TABLE>
Tabelul ar putea arăta astfel:
------------------------------
| Vegetable |Cost per kilo|
|--------------|-------------|
|Lettuce | $1 |
|--------------|-------------|
|Silver carrots| $10.50|
|--------------|-------------|
|Golden turnips| $100.30|
------------------------------
Atributele de aliniere inserate în tag-urile de început de rînd (<TR>) au efect asupra

tuturor celulelor din rînd. Atributele de aliniere inserate în tag-urile care definesc celule
au precedenţă faţă de atributele de aliniere inserate în tag-urile început de rînd.
Moştenirea specificaţiilor de aliniere
Alinierea conţinutului celulelor poate fi specificată individual fiecărei celule sau poate fi
moştenită de la elementele ce includ celula respectivă (rînd, coloană, tabel).
Ordinea de precedenţă (de la cea mai mare la cea mai mică) pentru atributele align, char
şi charoff este:
1. Atributul de aliniere setat pentru un element din celulă (ex. P).
2. Atributul de aliniere setat pentru o celulă (TH sau TD).
3. Atributul de aliniere setat pentru o coloană sau grup de coloane (COL şi
COLGROUP). Cînd o celulă face parte dintr-o celulă extinsă pe coloane,
proprietăţile de aliniere sînt moştenite de la celula de unde începe extensia.
4. Atributul de aliniere setat pentru un rînd sau grup de rînduri (TR, THEAD,
TFOOT şi TBODY). Cînd o celulă face parte dintr-o celulă extinsă pe mai multe
rînduri, proprietăţile de aliniere sînt moştenite de la celula de unde începe
extensia.
5. Atributul de aliniere setat pentru tabel (TABLE).
6. Valoarea implicită de aliniere.
Ordinea de precedenţă (de la cea mai mare la cea mai mică) pentru atributul valign este:
1. Atributul de aliniere setat pentru un element din celulă (ex. P).
2. Atributul de aliniere setat pentru o celulă (TH sau TD).
3. Atributul de aliniere setat pentru un rînd sau grup de rînduri (TR, THEAD,
TFOOT şi TBODY). Cînd o celulă face parte dintr-o celulă extinsă pe mai multe
rînduri, proprietăţile de aliniere sînt moştenite de la celula de unde începe
extensia.
4. Atributul de aliniere setat pentru o coloană sau grup de coloane (COL şi
COLGROUP). Cînd o celulă face parte dintr-o celulă extinsă pe coloane,
proprietăţile de aliniere sînt moştenite de la celula de unde începe extensia.
5. Atributul de aliniere setat pentru tabel (TABLE).
6. Valoarea implicită de aliniere.
La afişarea celulelor, alinierea orizontală este determinată de coloane înaintea rîndurilor,

în timp ce pentru alinierea verticală ordinea de preferinţă este rînduri şi apoi coloane.
Alinierea implicită depinde de browser dar, în cele mai multe cazuri este: informaţiile din
celulele cap de tabel sînt centrate atît orizontal cît şi vertical iar informaţiile din celulele
de date sînt centrate vertical dar aliniate orizontal la stînga.
Exemplu:
Un exemplu complet de tabel cu diverse atribute este prezentat în continuare:
<TABLE border="2" frame="hsides" rules="groups"
summary="Code page support in different versions of MS Windows.">
<CAPTION>CODE-PAGE SUPPORT IN MICROSOFT WINDOWS</CAPTION>
<COLGROUP align="center">
<COLGROUP align="left">
<COLGROUP align="center" span="2">
<COLGROUP align="center" span="3">
<THEAD valign="top">
<TR>
<TH>Code-Page<BR>ID
<TH>Name
<TH>ACP
<TH>OEMCP
<TH>Windows<BR>NT 3.1
<TH>Windows<BR>NT 3.51
<TH>Windows<BR>95
<TBODY>
<TR><TD>1200<TD>Unicode (BMP of ISO/IEC-
10646)<TD><TD><TD>X<TD>X<TD>*
<TR><TD>1250<TD>Windows 3.1 Eastern
European<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1251<TD>Windows 3.1 Cyrillic<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1252<TD>Windows 3.1 US
(ANSI)<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1253<TD>Windows 3.1 Greek<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1254<TD>Windows 3.1 Turkish<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1255<TD>Hebrew<TD>X<TD><TD><TD><TD>X
<TR><TD>1256<TD>Arabic<TD>X<TD><TD><TD><TD>X
<TR><TD>1257<TD>Baltic<TD>X<TD><TD><TD><TD>X
<TR><TD>1361<TD>Korean (Johab)<TD>X<TD><TD><TD>**<TD>X
<TBODY>
<TR><TD>437<TD>MS-DOS United States<TD><TD>X<TD>X<TD>X<TD>X
<TR><TD>708<TD>Arabic (ASMO 708)<TD><TD>X<TD><TD><TD>X
<TR><TD>709<TD>Arabic (ASMO 449+, BCON
V4)<TD><TD>X<TD><TD><TD>X
<TR><TD>710<TD>Arabic (Transparent
Arabic)<TD><TD>X<TD><TD><TD>X
<TR><TD>720<TD>Arabic (Transparent
ASMO)<TD><TD>X<TD><TD><TD>X
</TABLE>
Acesta poate arăta ca în figura următoare:

Capitolul 6.
Utilizarea frame-urilor în limbajul HTML
Frame-urile HTML permit autorilor de pagini Web prezentarea documentelor în zone de
ecran multiple, zone care pot fi ferestre independente sau subferestre ale ferestrei
principale a browserului. Fereastra browserului este astfel divizată la fel cum un tabel
împarte o pagină. În fiecare dintre aceste zone se pot încărca diverse şi diferite (!)
documente HTML.
Aceste zone multiple oferă posibilitatea de a păstra anumite informaţii vizibile în timp ce
altele sînt derulate (scroll) sau înlocuite. de exemplu în aceeaşi fereastră un frame poate
afişa un banner static, un altul un meniu de navigare şi al treilea documentul propriu-zis
care poate fi derulat (deplasat, scroll) sau înlocuit prin comenzile din cel de-al doilea
frame. Dincolo şi de avantajele legate de prezentarea mult mai potrivită a informaţiilor,
această posibilitate oferă şi o creştere a vitezei de încărcare a unor pagini. Dacă meniu de
navigare este alcătuit din butoane (care sînt elemente grafice), acestea pot fi încărcate
doar o singură dată şi folosite cu diverse contexte (pagini), fără ca browserul să fie nevoit
să le încarce sau chiar să le afişeze de fiecare dată cînd se schimbă pagina.
În continuare se prezintă un document simplu care conţine frame-uri:
html40/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="contents_of_frame1.html">
<FRAME src="contents_of_frame2.gif">
</FRAMESET>
<NOFRAMES>
<P>This frameset document contains:
<UL>
<LI><A href="contents_of_frame1.html">Some neat
contents</A>
<LI><IMG src="contents_of_frame2.gif" alt="A neat image">
<LI><A href="contents_of_frame3.html">Some other neat
contents</A>
</UL>
</NOFRAMES>
</FRAMESET>
</HTML>
care ar putea arăta astfel:
+---------------------------------------+
| | |
| Frame 1 | |
| | |
|---------| |
| | Frame 3 |
| | |
| Frame 2 | |
| | |
| | |
+ --------------------------------------+
Pentru browserele care nu pot afişa frame-uri se oferă un element special NOFRAMES în
care se descrie pagina pentru acest caz (din ce în ce mai rar!).
Un document care descrie modalitatea în care frame-urile sînt poziţionate pe ecran
(layout-ul frame-urilor) se numeşte document frameset şi are o structură diferită de cea a
unui document fără frame-uri. Un document standard are o secţiune HEAD şi una (sau
mai multe) secţiuni BODY. Un document cu frame-uri are şi el o secţiune HEAD dar în
locul secţiunii BODY are o secţiune specială descrisă de elementul FRAMESET.
Secţiunea descrisă de FRAMESET specifică modul de aranjare (layout-ul) zonelor
ocupate de frame-uri în fereastra principală a browserului. În plus această secţiune poate
conţine şi un element NOFRAMES pentru browserele ce nu pot afişa frame-uri.
Elementele ce în mod normal apăreau în BODY nu trebuie să apară înaintea primului
element FRAMESET, pentru că în acest caz elementul FRAMESET va fi ignorat.
Relativ la frame-uri există trei elemente (seturi de taguri):
 <FRAMESET> ... </FRAMESET> - divide fereastra browserului (sau un alt frame
deja definit) în frame-uri specificate ca rînduri sau coloane din fereastra
respectivă (acest element trebuie să apară între tagul de sfîrşit </HEAD> şi
tagul <BODY>);
 <FRAME> ... </FRAME> defineşte caracteristicile unui frame particular dintr-un
set de frame-uri (tagurile elementului FRAME trebuie să apară în interiorul
tagurilor elementului FRAMESET);
 <NOFRAMES> ... </NOFRAMES> descrie informaţia care se afişează dacă
browserul nu suportă frame-uri (tagul NOFRAMES nu trebuie să includă
elementul BODY).
1. Descrierea layout-ului documentului cu frame-uri (elementul FRAMESET)

Modul de aranjare al subspaţiilor ocupate de frame-uri (al setului de frame-uri, frameset-
ului) într-o fereastră se descrie cu elementul FRAMESET. Acesta are ca „argumente“
ROWS, care defineşte numărul de subspaţii orinzontale şi COLS care defineşte numărul
de subspaţii verticale. Folosirea simultană a ambelor atribute împarte spaţiul ocupat de
frame-uri într-un grid, umplut de la stînga la dreapta şi de sus în jos: întîi rîndul de sus, de
la stînga la dreapta, apoi rîndul al doilea, tot de la stînga la dreapta, ş.a.m.d.
Dacă ROWS nu are valoare, fiecare coloană se extinde pe lungimea întregii pagini, iar
dacă lipseşte COLS fiecare rînd se extinde pe întreaga lăţime. Dacă lipsesc amîndouă
frame-ul ia exact dimensiunea paginii care-l defineşte.
Exemple:
1. Împărţirea ecranului vertical în două parţi egale:
<FRAMESET rows="50%, 50%">
... restul definiţiilor ...
</FRAMESET>
2. Crearea a 3 coloane: a doua cu dimensiune fixă de 250 pixeli (utilă dacă are în ea o
imagine de această lăţime), prima primind 25% din spaţiul care mai rămîne şi a treia cu
75% din acesta:
<FRAMESET cols="1*,250,3*">
... restul definiţiilor...
</FRAMESET>
3. Grid de 2x3 subspaţii:
<FRAMESET rows="30%,70%" cols="33%,34%,33%">
</FRAMESET>
4. Presupunem că ferestra browserului are dimensiunea curentă de 1000 pixeli înălţime.

Definim 4 rînduri care au: primul cu 30% din această dimensiune (300 de pixeli), al
doilea cu dimensiunea exact de 400 de pixeli. Rămîn astfel 300 de pixeli pentru a fi
împărţiţi între rîndurile 3 şi 4. Al patrulea rînd are dimensiunea ("2*") de două ori cît al
treilea ("*"), înseamnă că are 200 pixeli înălţime, iar ultimul are 100
<FRAMESET rows="30%,400,*,2*">
</FRAMESET>
Dacă dimensiunile nu fac 100%, diferenţa este gestionată de browser: dacă mai rămîne se
alocă fiecărui frame proprţional cu dimensiunea sa, dacă e prea mult se reduce
dimensiunea fiecărui frame în funcţie de proporţia din spaţiul total ocupat de fiecare
frame.
Elementul FRAMESET
Sintaxa:
<FRAMESET>... </FRAMESET>
Atribute posibile:
 ROWS=MultiLengths (lungimile rîndurilor)
 COLS=MultiLengths (lungimile coloanelor)
 ONLOAD=Script (toate frame-urile au fost încărcate)
 ONUNLOAD=Script (toate frame-urile au fost eliminate)
 atribute core
Conţine:
 Unul sau mai multe elemente FRAMESET şi FRAME şi, opţional, un element
NOFRAMES
Conţinut în:
 HTML
Descriere:
Acest element este un container de frame-uri, utilizat pentru a împărţi o fereastră în
subspaţii dreptunghiulare numite frame-uri. Documentul care include acest element
(document cu frame-uri sau frameset document) elementul FRAMESET cel mai din
exterior ia locul lui BODY şi urmează imediat elementul HEAD.
Atributele ROWS şi COLS definesc dimensiunea fiecarui frame din set. Fiecare
atribut ia ca valoare o listă de lungimi specificate în pixeli, ca procent sau ca lungime
relativă. O lungime relativă este exprimată ca i*, unde i este un întreg. De exemplu un
set de frame-uri definit cu ROWS="3*,*" (* este echivalent cu 1*) va avea primul rînd
de trei ori mai înalt decît al doilea.
Valorile specificate pentru ROWS dau înălţimea fiecărui rînd, de sus în jos, iar cele
date pentru COLS dau lăţimea fiecărei coloane, de la stînga la dreapta. Dacă ROWS
sau COLS sînt omise, valoare implicită pentru fiecare dintre aceste atribute este 100%.
Dacă sînt specificate ambele, se defineşte un grid („caroiaj“) care se umple de la stînga
la dreapta şi de sus în jos.
Cînd se folosesc dimensiuni în pixeli acestea trebuie combinate cu lungimi relative
pentru a acoperi diversele dimensiuni ale ferestrelor. Dimensiunile fixe în pixeli se
folosesc doar în frame-urile care conţin imagini sau alte obiecte de dimensiune fixă şi
cunoscută. În general, însă, se preferă procentele datorită capacităţii de adaptare la
diversele dimensiuni ale ferestrelor.
Elementul FRAMESET acceptă, de asemenea, şi atributele ONLOAD şi
ONUNLOAD pentru a specifica acţiuni client-side executate de scripturi cînd frame-
urile sînt încărcate, respectiv eliminate.
Exemplu:
Acest exemplu descrie un document (grid) cu 2 rînduri şi 3 coloane. De remarcat
încercarea de a formata documentul şi în cazul în care browserul nu suportă frame-uri
asemănător cu originalul.
<FRAMESET ROWS="70%,30%" COLS="33%,33%,34%">
<NOFRAMES>
<BODY>
<UL>
<LI>
</LI>
<LI>
</LI>
<LI>
</LI>
</UL>
</BODY>
</NOFRAMES>
</FRAMESET>
Iar exemplul următor foloseşte elemente FRAMESET îmbricate pentru a defini 2
frame-uri în primul rînd şi un frame în rîndul al doilea:
<FRAMESET ROWS="*,100">
<FRAMESET COLS="40%,*">
<FRAME NAME="Menu" SRC="nav.html" TITLE="Menu">
<FRAME NAME="Content" SRC="main.html" TITLE="Content">
</FRAMESET>
<FRAME NAME="Ad" SRC="ad.html" TITLE="Advertisement">
<NOFRAMES>
<BODY> ...
</BODY>
</NOFRAMES>
</FRAMESET>
2. Seturi de frame-uri îmbricate
Frame-urile descrise de un document pot fi îmbricate oricît de mult prin includerea unui
element FRAMESET în alt element FRAMESET.
În exemplul următor primul element FRAMESET (cel din „exterior“) divide tot spaţiul
disponibil în 3 coloane egale. Al doilea FRAMESET, din interiorul primului, divide a
doua zonă în rînduri de înălţime inegală.
<FRAMESET cols="33%, 33%, 34%">
...conţinutul primului frame ...
<FRAMESET rows="40%, 50%">
... conţinutul celui de al doilea frame, primul
rînd ...
... conţinutul celui de al doilea frame, al doilea rînd
...
</FRAMESET>
... conţinutul celui de al treilea frame ...
</FRAMESET>
3. Partajarea datelor între frame-uri

Se pot partaja date între diverse frame-uri prin includerea acestora într-un element
OBJECT. Acesta va fi inclus în elementul HEAD al documentului care descrie frame-
urile şi va fi denumit cu atributul ID. Orice document ce reprezintă conţinutul unei frame
îl va putea accesa prin intermediul acestui identificator.
Exemplul următor ilustrează modul în care un script poate referi un element OBJECT
definit pentru tot setul de frame-uri:

<HTML>
<HEAD>
<TITLE>This is a frameset with OBJECT in the HEAD</TITLE>
<!—Acest obiect NU este afişat -->
<OBJECT id="myobject" data="data.bar"></OBJECT>
</HEAD>
<FRAMESET>
<FRAME src="AnotherPage.html" name="AnotherPage">
</FRAMESET>
</HTML>


<HTML>
<HEAD>
<TITLE>... Page title bla, bla, bla ... </TITLE>
</HEAD>
<BODY>
... începutul documentului ...
<P>
<SCRIPT type="text/javascript">
parent.myobject.myproperty
</SCRIPT>
... restul documentului ...
</BODY>
</HTML>
4. Definirea conţinutului şi atributelor unui frame (elementul FRAME)

Conţinutul (documentul care se încarcă în frame) şi înfăţişarea unui frame (detalii despre
marginile frame-ului şi despre posibilităţile de scroll) sînt definite de elementul FRAME
prin intermediul unor atribute specifice. În plus frame-urile se pot identifica prin nume
care pot fi utilizate la navigare: tagul ANCHOR poate specifica un atribut (NAME) care
să indice frame-ul în care se încarcă documentul indicat de legătură.
Elementul FRAME
Sintaxa:
<FRAME>
Atribute posibile:
 NAME=CDATA (numele frame-ului)
 SRC=URI (conţinutul frame-ului)
 LONGDESC=URI (descriere lungă a frame-ului)
 FRAMEBORDER=[ 1 | 0 ] (marginea frame-ului)
 MARGINWIDTH=Pixels (lăţimea marginii)
 MARGINHEIGHT=Pixels (înălţimea marginii)
 NORESIZE (dezactivează posibilitatea de redimensionare a frame-ului)
 SCROLLING=[ yes | no | auto ] (posibilitatea de scroll)
 atribute core
Conţine:
 vid (nu conţine nimic)
Conţinut în:
 FRAMESET
Descriere:
Acest element defineşte un frame – un subspaţiu dreptunghiluar dintr-un document cu
frame-uri (dintr-un set de frame-uri). Fiecare element FRAME trebuie să apară într-un
element FRAMESET care îi defineşte dimensiunea.
Atributul SRC oferă adresa (URI) de unde se va înărca conţinutul frame-ului, care
este, în mod tipic, un document HTML. Dacă este însă o imagine, o secvenţă video
sau un alt obiect similar şi acesta nu poate fi descris în mod adecvat cu atributul
TITLE al lui FRAME, atunci autorul paginii respective va trebui să folosescă atributul
LONGDESC pentru a oferi a adresă (URI) a descrierii HTML a obiectului respectiv.
Nu se recomandă însă această metodă, pentru a se permite o indexare eficientă de către
motoarele de căutare, precum şi o utilizare accesibilă în cazule browsere-lor nevizuale.
Atributul NAME dă un nume frame-ului respectiv pentru a putea fi utilizat cu atributul
TARGET al elementelor A, BASE, FORM şi LINK. Valoarea acestui atribut trebuie
să înceapă cu un caracter din domeniul A-Z sau a-z. Aceasta trebuie să fie „citibilă“ şi
să se bazeze pe conţinutul frame-ului respectiv. De exemplu NAME=left este
nerecomandat, întrucît nu spune nimic despre ce se găseşte în frame-ul respectiv, în
timp ce NAME=nav este şi aceasta nerecomandată, nefiind suficient de clară (nu este
„citibilă“). Mult mai sugestivă este o atrbuire de genul NAME=Content sau
NAME=Navigation. Şi atributul TITLE poate fi, de asemenea, folosit pentru a oferi un
titlu mai lung pentru frame, dar acesta nu este suportat de toate browserele.
Atributele prezentaţionale acceptate pot fi înlocuite de style-sheet-uri (şi e
recomandabil să fie aşa), dar sînt, încă, mai mult suportate de browsere.
Atributul FRAMEBORDER specifică dacă un frame are (valoarea 1) sau nu (valoarea
0) margine vizibilă. Valoarea implicită este 1. Acest atribut poate fi suprapus de cel al
frame-urilor adiacente. Un frame care nu are margine nu poate fi nici redimensionat.
Atributele MARGINWIDTH şi MARGINHEIGHT definesc numărul de pixeli folosiţi
ca margini stînga/dreapta şi, respectiv, sus/jos. Valorile trenuie să fie mai mari ca 1
pixel, iar atributul boolean NORESIZE împiedică utilizatorul să redimensioneze
frame-ul.
Atributul SCROLLING specifică dacă se vor oferi scroll-bar-uri pentru frame-uri.
Valoarea implicită (auto) le generează atunci cînd este cazul. Valoarea yes le afisează
tot timpul, iar valoarea no le suprimă, chiar cînd sînt necesare.
Exemplu:
Fie următorul document cu frame-uri:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Frameset//EN"
<HTML>
<HEAD>
<TITLE>A frameset document</TITLE>
</HEAD>
<FRAMESET cols="33%,33%,33%">
<FRAMESET rows="*,200">
<FRAME src="contents_of_frame1.html"
scrolling="no">
<FRAME src="contents_of_frame2.gif"
marginwidth="10" marginheight="15"
noresize>
</FRAMESET>
<FRAME src="contents_of_frame3.html" frameborder="0">
</FRAMESET>
</HTML>
Acest exemplu crează 4 frame-uri cu layout-ul (poziţionarea) ca în figura următoare:

+------------------------------------------+
|Frame 1 |Frame 3 |Frame 4 |
| | | |
| | | |
+------------| | |
|Frame 2 | | |
| | | |
+ -----------------------------------------+
şi ilustrează utilizarea atributelor lui FRAME. Frame-ul 1 nu are bare de scroll; frame-
ul 2 lasă spaţiu în jurul conţinutului său (care este iniţial o imagine) şi nu este
redimensionabil; între frame-urile 3 şi 4 nu este desenată marginea, care va fi, totşi
desenată (implicit, nefiind specificat altfel) între frame-urile 1, 2 şi 3.
5. Specificarea conţinutului iniţial al unui frame (atributul SRC)
Conţinutul iniţial al unui frame (resursa care se încarcă în acel frame: document HTML,
imagine, animaţie, etc) se specifică cu atributul SRC al elementului FRAME.
Pentru exemplul anterior, reluat aici:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Frameset//EN"
<HTML>
<HEAD>
</HEAD>
<FRAMESET cols="33%,33%,33%">
<FRAMESET rows="*,200">
<FRAME src="contents_of_frame1.html"
scrolling="no">
<FRAME src="contents_of_frame2.gif"
marginwidth="10" marginheight="15"
noresize>
</FRAMESET>
</FRAMESET>
</HTML>
se crează 4 frame-uri în care se încarcă 3 documente HTML (în frame-urile 1, 3 şi 4 din

documentele contents_of_frame1.html, contents_of_frame3.html şi, respectiv
contents_of_frame4.html) şi o imagine (în frame-ul 2, din fişierul
contents_of_frame2.gif).
De reţinut:
Conţinutul unei frame NU trebuie să fie în acelaşi document cu definiţia frame-ului!
Exemplu ILEGAL (eronat):

Următoarea definiţie a unui set de frame-uri nu este legală întrucît conţinutul celui de
al doilea frame este în acelaşi document ca şi definiţia setului de frame-uri (frameset-
ului):

<HTML>
<HEAD>
</HEAD>
<FRAMESET cols="50%,50%">
<FRAME src="#anchor_in_acelasi_document">
<NOFRAMES>
...text...
<H2><A name="anchor_in_acelasi_document">Important
section</A></H2>
...alt text...
</NOFRAMES>
</FRAMESET>
</HTML>
6. Specificarea numelui unui frame (atributul NAME) şi utilizarea lui într-un link
(TARGET)
Prin asignarea unui nume uneu frame cu ajutorul atributului NAME, autorii pot referi
acel frame ca „ţintă“ (destinaţie) pentru legăturile definite de alte elemente. Aceasta se
realizează cu atributul TARGET al acestora şi poate fi utlizat pentru crearea link-urilor
uzuale (A, LINK), imaginilor senzitive (AREA) şi a formelor (FORM).
Se prezintă în continuare un exemplu care sugerează o modalitate de a modifica dinamic
conţinutul unui frame. Definim întîi setul de frame-uri în documentul frameset.html:

<HTML>
<HEAD>
</HEAD>
<FRAMESET rows="50%,50%">
<FRAME name="fixed" src="init_fixed.html">
<FRAME name="dynamic" src="init_dynamic.html">
</FRAMESET>
</HTML>
Acesta defineşte 2 frame-uri în care se vor încărca 2 documente HTML. Conţinutul lui
init_dynamic.html, încărcat în frame-ul denumit "dynamic" ar putea fi:
<HTML>
<HEAD>
<TITLE>Document cu legături ţintă într-un frame cu nume</TITLE>
</HEAD>
<BODY>
...partea de început...
<P>Aici se poate avansa la
<A href="slide2.html" target="dynamic">Slide-ul 2.</A>
...altele...
<P>Iar aici se poate avansa la
<A href="slide3.html" target="dynamic">Slide-ul 3.</A>
</BODY>
</HTML>
Activarea oricărei legături va deschide un nou document, dar de fiecare dată în frame-ul
numit "dynamic", în timp ce conţinutul celuilalt frame "fixed" rămîne neschimbat.
De reţinut:
1. O definiţie a setului de frame-ului NU POATE FI MODIFICATĂ niciodată, doar
conţinutul acestora putînd fi modificat dinamic. Din momentul în care apare prima
modificare dinamică, definiţia iniţială a frame-urilor (frameset-ului) nu mai reflectă
starea curentă a acestora.
2. Nu se poate codifica (şi reţine) starea globală a unui set de frame-uri şi, de aceea,
multe browsere nu permit asignarea unui bookmark („semn de carte“) unui astfel de
frameset.
3. Dacă se utilizează frame-uri, navigarea înainte şi înapoi se complică, autorii fiind
responsabili de modalitatea de a parcurge astfel de documente, prin intermediul
legăturilor din interiorul acestora.
Cînd mai multe legături din acelaşi document indică aceeaşi ţintă (acelaşi frame) este
posibil să se specifice aceasta o singură dată, renunţîndu-se la atributul TARGET setat la
fiecare element în parte. Aceasta se poate realiza prin setarea atributului TARGET al
elementului BASE.
Pentru exemplul anterior se poate defini un element BASE. căruia i se poate specifica o
valoare pentru atributul TARGET (frame-ul "dynamic"), renunţînd la specificarea lui în
elementele A care încarcă documentele în acesată ţintă:
<HTML>
<HEAD>
<TITLE>Document cu legături ţintă într-un frame cu nume</TITLE>
<BASE href="http://www.pal.ro/Slides" target="dynamic">
</HEAD>
<BODY>
...partea de început...
<P>Aici se poate avansa la
<A href="slide2.html">Slide-ul 2.</A>
...altele...
<P>Iar aici se poate avansa la
<A href="slide3.html">Slide-ul 3.</A>
</BODY>
</HTML>
Browserele determină în care frame vor încărca o resursă după următorul algoritm (după
următoarele priorităţi, de la cele mai mari spre cele mai mici):
3. Dacă un element are atributul TARGET setat la un frame cunsocut, cînd
elementul este activat (de ex. click pe un link) resursa indicată de element se
încarcă în acel frame.
4. Dacă un element NU are atributul TARGET specificat, dar îl are elementul
BASE, atunci acesta determină frame-ul în care se încarcă resursa.
5. Dacă nici elementul şi nici BASE nu definesc o ţintă (atributul TARGET nesetat)
resursa desemnată (indicată) de element se încarcă în frame-ul care conţine
elementul respectiv.
6. Dacă un atribut TARGET referă un frame necunoscut, browser-ul va crea o nouă
fereastră şi un nou frame în aceasta, asignează numele necunoscut pînă în acel
moment acelui frame şi încarcă resursa în acesta.
În plus browserele pot oferi mecanisme de suprapunere a atributului TARGET.
7. Descrierea lungă a unui frame (atributul LONGDESC)
Atributul special LONGDESC permite autorilor să creeze documente cu frame-uri mult
mai accesibile pentru browser-ele nevizuale. Acest atribut defineşte o resursă care oferă
o descriere mai lungă (pe larg) a unui frame. Această resursă este asociată cu frame-ul, nu
cu conţinutul acestuia, şi de aceea, în timp, descrierea lungă poate deveni neadecvată
conţinutului la un moment de timp (după schimbarea conţinutului frame-ului respectiv).
O consecinţă a acestui comportament este recomandarea de a nu include o imagine ca
singur conţinut al unui frame. Mai bine este înglobarea imaginii respective într-un al
document şi specificarea acestuia ca şi conţinut al unui frame, ca în exemplul următor:
Următorul set de 2 frame-uri conţine: în frame-ul din stînga un cuprins, iar frame-ul din
dreapta, iniţial va conţine o imagine:
"http://www.w3.org/TR/REC-html40">
<HTML>
<HEAD>
<TITLE>Un document ce defineşte GREŞIT un frameset</TITLE>
</HEAD>
<FRAME src="table_of_contents.html">
<FRAME src="ostrich.gif" longdesc="ostrich-desc.html">
</FRAMESET>
</HTML>
Dacă se include direct imaginea în frame, independent de orice alt element, nu mai există
altă posibilitate de a specifica un text alternativ la acea imagine în afara atributului
LONGDESC. Dacă se va schimba conţinutul frame-ului din dreapta, descrierea acestuia
va rămîne aceeaşi, fără nici o posibilitate de a redescrie noul conţinut (într-o manieră
alternativă).
De aceea, în locul specificării directe a imaginii ca şi conţinut al frame-ului din dreapta,
se specifică un al document HTML care va conţine imaginea respectivă:
<HTML>
<HEAD>
<TITLE>Un document ce defineşte CORECT un frameset</TITLE>
</HEAD>
<FRAME src="ostrich-container.html">
</FRAMESET>
</HTML>


<HTML>
<HEAD>
<TITLE>The fast and powerful ostrich</TITLE>
</HEAD>
<P>
<OBJECT data="ostrich.gif" type="image/gif">
These ostriches sure taste good! <!— conţinut alternativ
-->
</OBJECT>
</HTML>
8. Specificarea conţinutului alternativ al unui document cu frame-uri

(NOFRAMES)
Dacă browser-ul nu poate afişa conţinutul unui document ce foloseşte frame-uri, se poate
specifica o alternativă la acesta prin intermediul elementului NOFRAMES. Această
alternativă va fi folosită şi de browser-ele care pot afişa frame-uri dar au fost configurate
să nu le afişeze. Elementul NOFRAMES poate fi folosit într-o secţiune FRAMESET a
unui document:
Exemplu:
<HTML>
<HEAD>
<TITLE>Un document ce defineşte un frameset dar are şi
NOFRAMES</TITLE>
</HEAD>
<FRAME src="main.html">
<NOFRAMES>
<P>Aici este
<A href="main-noframes.html"> versiunea documentului fără frame-
uri.</A>
</NOFRAMES>
</FRAMESET>
</HTML>
Elementul NOFRAMES
Sintaxa:
<NOFRAMES>... </ NOFRAMES >
Atribute posibile:
 atribute comune
Conţine:
 În HTML 4.0 Transitional: elemente inline, elemente tip block level
 În HTML 4.0 Frameset: un element BODY care trebuie să nu conţină nici un
NOFRAMES
Conţinut în:
FIELDSET, FORM, FRAMESET, IFRAME, INS, LI, MAP, NOSCRIPT,
OBJECT, TD, TH
Descriere:
Acest element descrie conţinutul unui document ce trebuie afişat cînd frame-urile nu
sînt afişate. NOFRAMES este folosit în mod tipic într-un document cu frame-uri (ce
defineşte un frameset) pentru a oferi informaţia care trebuie afişată de browser-ele care
nu suportă frame-uri.
Cînd este folosit într-un FRAMESET, NOFRAMES trebuie să conţină un element
BODY. În acest caz nu mai trebuie să apară însă nici un element NOFRAMES în
elementul BODY.
Este recomandabil să se ofere un element NOFRAMES care are semnificaţie, şi care,
la limită, să conţină cel puţin un link spre o variantă de document fără frame-uri.
9. Frame-uri inline (elementul IFRAME)

Este posibil să se includă un frame într-un bloc de text. Elementul ce permite această
operaţie este IFRAME. Inserarea unui astfel de frame este foarte asemănătoare cu
inserarea unui obiect prin intermediul elementului OBJECT, permiţînd în ultimă imstanţă
inserarea unui document HTML în mijlocul altuia.
Informaţia care se inserează este specificată prin atributul SRC, iar conţinutul unui
element IFRAME va fi afişat doar dacă browser-ul nu suportă frame-uri.
De exemplu, pentru browserele care suportă frame-uri, exemplul următor va insera un
frame, înconjurat de margine, în mijlocul unui text:
<IFRAME src="foo.html" width="400" height="500"
scrolling="auto" frameborder="1">
[Browserul dvs. nu suportă frame-uri.
Puteţi însă vedea totuşi
<A href="foo.html">documentul </A>
ce ar fi trebuit să vă apară într-un frame inline.]
</IFRAME>
Spre deosebire de frame-urile obişnuite, frame-urile inline nu pot fi redimensionate şi de

aceea nu au atributul NORESIZE.
De remarcat că un document HTML poate fi inserat (înglobat) în altul prin intermediul
lui OBJECT.
Elementul IFRAME
Sintaxa:
<IFRAME>... </ IFRAME >
Atribute posibile:
 SRC=URI (adresa URI a conţinutului frame-ului)
 NAME=CDATA (numele frame-ului)
 LONGDESC=URI (link către descrierea lungă)
 WIDTH=Length (lăţimea frame-ului)
 HEIGHT=Length (lăţimea frame-ului)
 ALIGN=[ top | middle | bottom | left | right ] (alinierea frame-ului)
 FRAMEBORDER=[ 1 | 0 ] (marginea frame-ului)
 MARGINWIDTH=Pixels (lăţimea marginii)
 MARGINHEIGHT=Pixels (înălţimea marginii)
 SCROLLING=[ yes | no | auto ] (posibilitatea de scroll)
 atribute core
Conţine:
 inline elements, block-level elements
Conţinut în:
 inline elements, block-level elements
Descriere:
Acest element defineşte un frame inline pentru a include obiecte externe (incluzănd
alte documente HTML). IFRAME oferă un subset de funcţii ale lui OBJECT, singurul
avantaj fiin acela că poate fi specificată ca TARGET de către alte legături. OBJECT
este mai bine suportat decît IFRAME.
Atributul SRC oferă adresa de unde se va încărca conţinutul frame-ului – în mod tipic
un document HTML. Atributul opţional NAME specifică numele frame-ului permiţînd
astfel legături care să specifice acest frame ca ţintă în care să se încarce.
Conţinutul elementului IFRAME (ce este între tagul de început şi cel de sfîrşit) este
alternativă pentru browser-ele care nu suportă frame-uri. Pot apare aici elemente inline
sau bloc: orice element de tip bloc este permis în interiorul elementului ce-l conţine pe
IFRAME. De exemplu un IFRAME într-un H1 nu poate conţine un H2, dar un
IFRAME într-un DIV poate conţine orice element de tip bloc.
LONGDESC dă adresa unei resurse care descrie pe larg conţinutul frame-ului. Similar
cu atributul elementului FRAME.
Atributele WIDTH şi HEIGHT specifică dimensiunile frame-ului în pixeli sau
procente din spaţiul disponibil, iar FRAMEBORDER stabileşte dacă se deseneză sau
nu marginea. ALIGN specifică modul de aliniere faţă de conţinutul adiacent a frame-
ului inclus. ALIGN=middle aliniază frame-ul faţă de linia de bază (baseline), iar
pentru a centra în document (pagină) frame-ul se recomandă includerea într-un bloc
centrat: <P ALIGN=center><IFRAME SRC="foo.html" WIDTH=300
HEIGHT=100></IFRAME></P>. Celelalte valori (left şi right) indică un frame flotant, care
poate fi plasat la marginea din stînga sau dreapta, iar conţinutul să curgă pe lîngă.
MARGINWIDTH şi MARGINHEIGHT definesc un număr de pixeli ce se folosesc ca
margine stînga/dreapta, respectiv sus/jos, iar SCROLLING dacă sînt permise barele
scroll.
O mai mare flexibilitate în prezentarea frame-urilor este dată de style-sheet-uri.
Exemplu:
Acest exemplu include documentul reteta.html şi oferă şi un conţinut alternativ:
<IFRAME SRC="reteta.html" TITLE="Reteta lui Petrisor">

<H2>Reţeta lui Petrişor</H2>
<H3>Ingrediente</H3>
...
</IFRAME>
Capitolul 7.
Utilizarea formulalelor interactive (forms)
În marea majoritate a documentelor (mai ales cele mai vechi), singura interactivitate
dintre aplicaţie (browser) şi cel ce o foloseşte (utilizatorul) constă în faptul că acesta
decide ce legătură hypertext din respectivul document să urmărească.
Specificaţiile HTML includ însă şi o altă metodă (de asemenea simplă, primitivă) de
creştere a gradului de interactivitate a unui document HTML: formularele (forms) care
permit integrarea în document a unor elemente preluate din interfaţa aplicaţiilor de tip
Windows sau X Windows – cîmpurile text statice şi editabile, butoanele radio, căsuţele
de selecţie, listele de selecţie şi cîmpurile de editare. Interactivitatea se bazează pe faptul
că acestea pot fi utilizate pentru introducerea unor date / strîngerea de informaţie
necesară unei alte aplicaţii aflată în "spatele" documentului, aplicaţie care va utiliza
aceste date (introduse de utilizatorul browser-ului şi a documentului HTML) şi care
hotărăşte ce anume şi cum anume va fi oferit clientului, ca rezultat al acestor informaţii
noi, introduse cu ajutorul formularului. Modul de introducere a datelor în formulare este
similară cu modul de a introduce date într-o aplicaţie Windows.
Ca exemple tipice de acţiuni realizate cu ajutorul (prin intermediul formularelor) pot fi
date:
 o selecţie dintr-o bază de date (starea vremii dintr-o anumită regiune, de pildă)
 un rezultat al unui sondaj (la care a participat cel ce a introdus datele tocmai a
participat)
 vizualizarea la un document cu acces restrîns
 sau orice altceva care îndeplineşte criteriile de selecţie prezentate în formular
În procesul de proiectare a unui document care utilizează un formular HTML există trei
etape:
1. designul şi implementarea (în HTML) a formularului de intrare, care va fi
vizualizat, explorat şi completat de utilizator
2. scrierea unei aplicaţii care să interpreteze datele cu care utilizatorul completează
formularul (aplicaţie care primeşte datele şi care este executată de un alt
calculator decît cel al utilizatorului, cel care rulează browser-ul – un server, de
obicei cel care gazduieşte serverul HTTP şi care a oferit pagina cu formularul
respectiv)
3. designul şi implementarea documentului generat de aplicaţia de la punctul 2, ca
răspuns la cererea utilizatorului. De regulă acest document este scris în HTML,
dar această restricţie nu este obligatorie.
Un formular HTML este o secţiune de document care conţine text, elemente HTML
uzuale, dar şi elemente speciale numite controale (similare celor din interfaţa aplicaţiilor
Windows – căsuţe de selecţie, butoane radio, etc), precum şi etichete ale acestor
controale. Utilizatorii vor „completa“ formularul prin modificarea controalelor (sau
conţinutului acestora prin introducerea unui text, selectarea unui element dintr-o listă,
etc) înainte ca acesta să fie trimis unui agent (program) pentru a fi prelucrat (de exemplu
unui server Web, unui server de mail, etc).
Fiecare control are un nume dat de atributul NAME al acelui control, nume ce este
definit (utilizabil, domeniul de definiţie) în cadrul elementului FORM în care acesta
apare. În plus, fiecare control are o valoare iniţială şi o valoare curentă, fiecare fiind
şiruri de caractere (valorile posibile şi restricţiile ce se aplică asupra acestora diferă de la
un control la altul).
În general, valoarea iniţială poate fi specificată prin intermediul valorii atributului
VALUE, dar la un element de tip TEXTAREA valoarea iniţială este dată de conţinutul
acestuia, pe cînd valoarea iniţială a unui element OBJECT este determinată de
implementarea acestuia.
Valoarea curentă a unui control este iniţial setată la valoarea iniţială, apoi ea poate fi
modificată de utilizator prin intermediul acţiunilor ce sînt permise asupra controlului sau
de scripturi.
Valoarea iniţială a unui control nu se modifică şi de aceea atunci cînd un formular este
resetat valorile curente ale fiecărui control sînt readuse la valorile iniţiale. Dacă un
control nu are specificată valoarea iniţială, efectul acestei operaţii este nedefinit (poate fi
imprevizibil).
Cînd un formular este transmis pentru a fi prelucrat, unele controale au numele legat de
valoarea curentă, astfel că se va transmite agentului (programului) care-l prelucrează un
set de dublete alcătuite din numele coontrolului şi valoarea sa curentă. Astfel de controale
sînt numite controale de succes (successful controls).
Limbajul HTML 4.0 defineşte următoarele tipuri de controale:
butoane
Autorii paginilor HTML pot crea 3 tipuri de butoane:
 butoane submit: Cînd este activat (apăsat), un astfel de buton trimite un
formular unui agent (program) de prelucrare. Un formular poate conţine mai
mult de un buton submit.
 butoane reset: Cînd este activat (apăsat), un astfel de buton resetează toate
controalele la valorile lor inţiale.
 butoane push: Aceste butoane nu au o acţiune implicită atunci cind sînt
activate (apăsate). Fiecare astfel de buton poate avea asociat un script de tip
client-side şi generează evenimente care determină execuţia unor astfel de
scripturi (de exemplu cînd se apasă un astfel de buton se poate apela un script
specific).
Autorii crează butoane cu unul din elementele BUTON sau INPUT, prima variantă
fiin mai bogată în opţiuni.
checkbox (căsuţe de marcare)
Checkbox-urile (căsuţele de marcare), ca şi butoanele radio, sînt elemente cu 2 stări
on/off (selectat/deselectat) care pot fi trecute dintr-o stare în alte de către utilizitator.
Un astfel de element (switch) este "on" (selectat) cînd atributul selected al lui este
setat. Cînd un formular este trimis unui agent de prelucrare numai controalele
checkbox ce au valoarea "on" devin controale de succes. Într-un formular mai multe
checkbox-uri pot avea acelaşi nume.
Pentru crearea unui checkbox se foloseşte elementul INPUT.
butoane radio
Butoanele radio sînt exact ca checkbox-urile, cu excepţia faptului că atunci cînd apar
mai multe într-un formular sînt mutual exclusive: cînd un astfel de buton este "on"
(selectat), toate celelalte care au acelaţi nume sînt trecute automat pe "off".
Pentru crearea unui buton radio se foloseşte elementul INPUT.
meniuri
Menurile oferă utilizatorilor posibilitatea de a alege dintre mai multe opţiuni.
Pentru crearea unui control de tip meniu se foloseşte elementul SELECT în
combinaţie cu elementele OPTGROUP şi OPTION.
text input
Autorii pot crea două tipuri de controale pentru a permite utilizatorilor introducerea
unui text. Elementul INPUT crează un control care are doar o singură linie
disponibilă pentru introducerea textului, iar elementul TEXTAREA crează un control
cu mai multe linii în care se poate introduce text. În ambele cazuri textul ce se
introduce devine valoarea curentă a controlului.
file select (selecţie de fişiere)
Acest control permite utilizatorilor să selecteze fişiere astfel încît conţinutul acestora
să fie transmis odată cu formularul.
Pentru crearea unui control tip file select se foloseşte elementul INPUT.
controale ascunse (hidden controls)
Se pot crea controale care să nu fie afişate de către browsere, dar a căror valori să fie
transmise odată cu formularul. Acest tip de control este util pentru a păstra informaţie
între schimburile client/server ce altfel s-ar pierde, datorită naturii „fără stare“
(stateless) a protocolului HTTP.
Pentru crearea unui control ascuns se foloseşte elementul INPUT.
controale tip obiect (object controls)
Autorii pot insera obiecte generice astfel ca valorile asociate acestora să fie transmise
împreună cu celelalte controale.
Pentru crearea unui control ascuns se foloseşte elementul OBJECT.
Elementele utilizate pentru crearea controalelor apar, în general, într-un element FORM,
dar pot apare şi în afara declaraţiei acestui element cînd sînt utilizate pentru a crea
interfeţe, caz în care nu pot fi controale de succes.
1. Descrierea unui formular (elementul FORM)

Elementul care descrie un formular este FORM. El se comportă ca un container pentru
controale şi specifică:
 Layout-ul (înfăţisarea) formularului (prin conţinutul elementului).
 Programul ce va prelua formularul completat şi transmis (atributul ACTION).
Programul care-l recepţionează trebuie să fie capabil să preia corect şi să
decodifice perechile nume/valoare transmise pentru a le putea folosi.
 Metoda prin care datele introduse de utilizator vor fi trimise serverului (atributul
METHOD).
 O codificare a caracterelor acceptabilă pentru server, astfel ca acesta să poată prelua
formularul (atributul ACCEPT-CHARSET). Browserele utilizatorilor trebuie să-
i avertizeze asupra valorilor setului de caractere acceptat şi/sau să restricţioneze
posibilitatea acestora de a introduce caractere necunoscute.
Un formular poate conţine în afara controalelor şi text şi elemente HTML (paragrafe,

liste, etc.)
Exemplul următor arată un formular care va fi procesat de un program numit "adduser",
în momentul în care va fi transmis de browser. Metoda utilizată pentru transmitere va fi
"post":
<FORM action="http://somesite.com/prog/adduser" method="post">
...conţinutul formularului...
</FORM>
Iar exemplul următor arată cum se trimite un formular la o adresă de email:
<FORM action="mailto:L.P@alpha.comp-craiova.ro" method="post">
...conţinutul formularului...
</FORM>
Elementul FORM
Sintaxa:
<FORM>... </FORM>
Atribute posibile:
 ACTION=URI (handler-ul formularului / programul care îl va prelucra)
 METHOD=[ get | post ] (metoda HTTP folosită la trimiterea formularului)
 ENCTYPE=ContentType (tipul conţinutului / content type utilizat pentru
trimitere)
 ACCEPT-CHARSET=Charsets (codificarea suportată a setului caractere)
 TARGET=FrameTarget (frame-ul în care se afişează rezultatele)
 ONSUBMIT=Script (scriptul care se execută după trimiterea formularului)
 ONRESET=Script (scriptul care se execută după resetarea formularului)
 atribute comune
Conţine:
 În HTML 4.0 Strict, unul sau mai multe elemente SCRIPT sau elemente de tip
bloc (block-level elements) cu excepţia lui FORM
 In HTML 4.0 Transitional, elemente de tip inline sau elemente tip block-level,
exceptînd FORM
Conţinut în:
IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH
Descriere:
Orice formular interactiv începe cu tagul <FORM> şi se termină cu </FORM>, iar
undeva în interiorul formularului se găsesc tag-urile (elementele) care definesc
controalele (INPUT, SELECT, TEXTAREA şi BUTON) prin intermediul cărora
utilizatorul interacţionează cu acesta, precum şi butoanele „speciale“ SUBMIT şi,
opţional, RESET care acţionează asupra formularului ca entitate.
Cele mai importante atribute ale tag-ului sînt ACTION (acţiune) şi METHOD
(metodă), astfel încît tag-ul de început apare de forma:
<FORM ACTION="acţiune" METHOD="metodă">
Valorile lui ACTION specifică natura acţiunii, care va avea loc printr-un program care
va fi executat de serverul care este gazdă pentru document. Acest program va trebui să
preia datele din formular şi să le prelucreze. Astfel:
 ACTION="URL" specifică URL-ul programului care va fi executat, de obicei
un program CGI sau un servlet Java.
 ACTION="mailto: adresă@domeniu" specifică un program de expediere a
conţinutului formularului. Această acţiune nu este însă suportată de toate
browserele (de exemplu Microsoft Internet Explorer 3.x) care, în acest caz, în
mod tipic, vor deschide o fereastră de compoziţie a unui mesaj email. În afara
acestor neajunsuri, lipsa unui feed-back imediat face această metodă de acţiune
nu foarte recomandată pentru a fi utilizată.
Atributele METHOD şi ENCTYPE specifică metoda utilizată pentru a trimite datele
formularului serverului care gazduieşte programul specificat în ACTION.
Cînd metoda este get (implicită), datele formularului sînt transmise ca o cerere HTTP
GET cu ?form_data adăugat la adresa URI specificată de atributul ACTION.
Utilizarea metodei get permite ca transmiterea (datelor) formularului să fie conţinută
complet în URL. Avantajul este ca se pot crea bookmark-uri („semne de carte“) pe
astfel de adrese, dar are şi dezavantajul că nu poate conţine caractere non-ASCII ca
"é" and "©". Cea mai importantă limitare este dată de cantitatea de date care se pot
transmite şi care depinde de lungimea maximă a adresei URL permisă de browser şi
server. De aceea, pentru siguranţă, orice formular care conţine caractere non-ASCII
sau mai mult de 100 caractere trebuie să utilizeze METHOD=post.
Cînd metoda este post, datele formularului sînt transmise ca o cerere HTTP POST cu
datele formularului în corpul cererii. Majoritatea browserelor sînt incapabile să creeze
un bookmark pe o astfel de cerere, dar posibilitatea transmiteri de caractere non-ASCII
şi posibilitatea de transmite date oricît de mari sînt avantajele faţă de GET.
Atributul ENCTYPE specifică tipul conţinutului (content type) folosit în transmiterea
formularului şi are ca valoare implicită application/x-www-form-urlencoded. Acesta
are ca rezultat perechi nume/valoare trimise serverului sub forma
name1=value1&name2=value2..., cu caracterul spaţiu înlocuit de "+" şi cu caracterele
speciale (ca, de exemplu, "#") înlocuite de "%HH", unde HH este codul hexa al
caracterului respectiv. Sfîrşitul de linie (line break) este codificat ca "%0D%0A" – un
carriage return urmat de un line feed.
Dacă formularul conţine un element INPUT cu atributul TYPE=file, atunci este
preferabil să se folosească un ENCTYPE de tipul multipart/form-data iar METHOD să
fie post.
Pentru preluarea datelor din formularele transmise la server autorii nu trebuie să
cunoască exact formatul în care sînt codificate datele, întrucît există biblioteci publice,
free (ca de exemplu CGI.pm) care oferă rutine ce preiau transparent ceea ce se trimite
cu get sau post (ca application/x-www-form-urlencoded sau multipart/form-data). Se
poate şi simula o astfel de transmitere cu unelte ca cg-eye care permit vizualizarea
imediat, „în oglindă“ a datelor ce s-ar trimite.
Atributul ACCEPT-CHARSET specifică lista de codificări acceptate de handlerul
formularului (programul care-l primeşte şi prelucrează). Valoarea acestui atribut este o
listă de seturi de caractere ("charsets") separate cu virgulă sau blanc. Valoarea
implicită este UNKNOWN şi este considerată, de obicei, codificarea folosită pentru
transmiterea documentului ce conţine formularul.
Atributul TARGET este folosit în cazul frame-urilor pentru a specifica în care frame
se afişează răspunsul. Dacă nu e specificat nici un frame (sau numele nu există),
valoarea implicită este o fereastră nouă. Se pot folosi şi numele speciale de frame-uri:
_blank – ferastră nouă, fără nume
_self – răspunsul se afişează în frame-ul curent (util pentru suprascrierea
atributului
BASE al elementului TARGET)
_parent – răspunsul se afişează în părintele imediat din FRAMESET
_top – răspunsul se afişează în fereastra întreagă, fără frame-uri
FORM mai are şi atribute pentru a specifica acţiuni de tip „client-side scripting“ în
cazul anumitor evenimente (ONSUBMIT şi ONRESET).
2. Crearea controalelor de bază ale unui formular (INPUT, BUTTON,

TEXTAREA)
Elementul INPUT este cel mai frecvent întîlnit deoarece crează mai multe tipuri de
controale care permit utilizatorului să aleagă. Controalele includ trei tipuri de butoane
care pot fi apăsate, două tipuri de butoane pe care utilizatorul le poate seta închis/deschis,
un element de selecţie fişiere şi cîmpuri în care poate fi tastat text. Tag-ul INPUT este
nevid.
Controalele de bază pe care le poate utiliza un autor în cadrul formularelor interactive sînt
create cu elementul INPUT, individualizarea lor făcîndu-se prin intermediul atributului
său TYPE. Pe acestea (ca de fapt pe toate controalele unui formular) utilizatorul le
expediază prin intermediul unui buton creat cu INPUT de tipul SEND sau le reintroduce
după acţionarea unui buton de tipul RESET. Nu există o limită asupra numărului de
elemente conţinute într-un formular.
Valorile atributului TYPE care crează diversele tipuri de controale (pentru elementul
INPUT) sînt:
text
Crează un control de introducere a unui text pe o singură linie: text input control.
password
La fel ca şi "text", dar textul introdus este afişat astfel ca să nu fie descifrabil / să fie
„ascuns“ (de exemplu cîte un asterix pentru fiecare caracter introdus), de aceea se şi
numeşte parolă. Valoarea curentă a acestui control este textul introdus de utilizator,
nu cel afişat de formular! De remarcat că protecţia oferită în acest fel este minimă,
textul transmiţîndu-se, dacă nu se folosesc tehnici adecvate, în clar!
checkbox
Crează o căsuţă de marcare: checkbox.
radio
Crează un buton radio: radio button.
file
Crează un control utilizat la selecţia fişierelor: file select control. Se foloseşte
valoarea atributului VALUE ca nume iniţial de fişier.
button
Crează un buton care poate fi apăsat. Este utilizat prin intermediul valorii atributului
VALUE care de fapt şi este textul ce apare pe acesta.
submit
Crează un buton care trimite datele din formular: submit button.
reset
Crează un buton care reiniţializează datele din formular: reset button.
image
Crează un buton de submit dar care are o înfăţişare grafică. Valoare atributului SRC
specifică adresa URI a imaginii care e folosită la „decorarea“ butonului. Se
recomandă folosirea şi a unui text alternativ (cu atributul ALT) pentru cazul cînd
imaginea nu e vizibilă.
Cînd imaginea este apăsată (cu mouse-ul, de exemplu) formularul este transmis
serverului împreună cu coordonatele punctului apăsat exprimate în pixeli faţă de
colţul stînga-sus. Datele transmise includ name.x=x-value şi name.y=y-value, unde
"name" este valoarea atributului NAME, iar x-value şi y-value sînt valorile
coordonatelor.
Dacă serverul are implementate diferite acţiuni în funcţie de punctul apăsat,
utilizatorii cu browsere non-grafice vor fi dezavantajaţi şi de aceea se pot lua în
considerare următoarele alternative:
 Utilizarea butoanelor SUBMIT multiple (fiecare cu imaginea lui). Poziţia
acestora poate fi controlată cu style-sheet-uri.
 Utilizarea unei hărţi senzitive de tip client-side image map, care rulează pe
client, împreună cu un script.
hidden
Crează un control ascuns: hidden control.
Exemplu:
Acest exemplu defineşte un formular simplu care permite utilizatorului introducerea
numelui, prenumelui, adresei de email şi sexului. Cînd se activează (apasă) butonul de
trimitere (submit) formularul va fi trimis programului specificat de atributul ACTION
(aici adduser):
First name: <INPUT type="text" name="firstname"><BR>
Last name: <INPUT type="text" name="lastname"><BR>
email: <INPUT type="text" name="email"><BR>
<INPUT type="radio" name="sex" value="Male"> Male<BR>
<INPUT type="radio" name="sex" value="Female"> Female<BR>
<INPUT type="submit" value="Send">
<INPUT type="reset">
</FORM>
Astfel, acest formular poate apărea astfel:
Exemplu:
Acest exemplu foloseşte o funcţie (verify) scrisă în JavaScript care este activată cînd
apare evenimentul "onclick" pentru butonul care are pe el textul „Click Me“:
<HEAD>
<META http-equiv="Content-Script-Type" content="text/javascript">
</HEAD>
<BODY>
<FORM action="..." method="post">
<INPUT type="button" value="Click Me" onclick="verify()">
</FORM>
</BODY>
Exemplu:
Acest exemplu sugerează cum poate fi transmis conţinutul unui fişier indicat de
utilizator prin intermediul unui formular. Utilizatorul este întrebat de numele său şi de
lista fişierelor al căror conţinut se doreşte a fi transmis. Prin specificarea valorii
atributului ENCTYPE ca "multipart/form-data", fiecare conţinut va fi „împachetat“
pentru a fi transmis într-o secţiune separată a unui document de tip „multipart“.
<FORM action="http://server.dom/cgi/handle"
enctype="multipart/form-data" method="post">
What is your name? <INPUT type="text" name="name_of_sender">
What files are you sending? <INPUT type="file"
name="name_of_files">
</FORM>
Elementul INPUT
Sintaxa:
<INPUT>
Atribute posibile:
 TYPE=[ text | password | checkbox | radio | submit | reset | file | hidden | image |
button ]
 NAME=CDATA (numele care se va asocia elementului)
 VALUE=CDATA (valoarea introdusă)
 CHECKED (buton radio sau checkbox setat/apăsat)
 SIZE=CDATA (număr sugerat de caractere pentru introducerea unui text)
 MAXLENGTH=Number (număr maxim de caractere pentru introducerea unui
text)
 SRC=URI (sursa imaginii)
 ALT=CDATA (text alternativ pentru o imagine)
 USEMAP=URI (hartă senzitivă de tip client-side image map)
 ALIGN=[ top | middle | bottom | left | right ] (alinierea imaginii)
 DISABLED (element inactiv/dezactivat)
 READONLY (previne modificări asupra elementului)
 ACCEPT=ContentTypes (tipul de media folosit la transmiterea fişierelor)
 ACCESSKEY=Character (shortcut key)
 ONSELECT=Script (elementul de tip text a fost selectat)
 ONCHANGE=Script (valoarea elementului a fost modificată)
 atribute comune
Conţine:
 Nimic
Conţinut în:
 block-level elements, inline elements, cu excepţia lui BUTTON
Descriere:
Acest element defineşte un control al unui formular (form control) pentru a permite
unui utilizator să introducă date. El este utilizat de obicei în cadrul lui FORM, dar
HTML 4.0 permite şi folosirea lui în orice element block-level sau inline (cu excepţia
lui BUTTON). De remarcat, totuşi că Netscape Navigator NU va afişa nici un element
INPUT în afara unui FORM.
Cînd formularul este transmis valoarea curentă a fiecărui element INPUT din FORM
este trimisă sub forma unei perechi name/value. Atributul NAME oferă numele ce va
fi folosit pentru identificarea controlului respectiv. Tipul valorii depinde de tipul
elementului INPUT.
Un formular care include un element INPUT trebuie să specifice în tagul elementului
FORM METHOD=post şi ENCTYPE="multipart/form-data". Nu toate browserele
permit trimiterea, odată cu formularul şi a conţinutului unui fişier. În acest caz trebuie
utilizate alte metode:
Exemplu:
În exemplul următor se trimite un document HTML pemtru a fi validat. Numele lui se
cere de la utilizator prin intermediul unui formular:
<FORM METHOD=post ACTION="/cgi-bin/validate.cgi" ENCTYPE="multipart/form-data">
<P>
Selectaţi un document HTML pentru a fi trimis spre validare. Dacă browser-ul Dvs. nu
suportă această metodă folosiţi <A HREF="methods.html">metodele alternative de
validare</A>.</P>
<P><INPUT TYPE=file NAME="html_file" ACCEPT="text/html"></P>
<P><INPUT TYPE=submit VALUE="Validate it!"></P>
</FORM>
Elementul INPUT poate avea mai mulţi parametri, cel mai important fiind TYPE,
fiecare element TYPE avînd proprii lui parametri pentru definirea în continuare a
elementului. Parametrul TYPE specifică ce fel de INPUT se aşteaptă de la utilizator şi
poate primi următoarele valori:
Valoare Descriere
Text Permite utilizatorului să introducă un singur rînd de text
Password La fel ca şi Text, dar caracterele tastate de utilizator au ca ecou
asteriscul „*“ sau un alt semn echivalent menit să "ascundă"
textul introdus
Check box Implementează un buton care poate fi setat activ/inactiv
(închis/deschis)
Radio button Permite implementarea unui grup de butoane în care, la un
moment dat, numai unul poate fi activ (setat/deschis)
Button Determină apariţia unui buton care poate fi apăsat
Reset Determină apariţia unui buton care, cînd este selectat, resetează
toate celelalte elemente ale formularului la valorile lor implicite
Submit Afişează un buton care, dacă este apăsat, transmite formularul
URL-ului specificat în ACTION
Image Afişează un buton Submit grafic (cu o imagine)
File Permite selecţia unui fişier
Hidden Invizibil în browser
Exemplu:
<INPUT TYPE="CHECKBOX" NAME="TEST">
Dacă nu este specificat TYPE în elementul INPUT, valoarea implicită atribuită este
TYPE=TEXT.
Atributul NAME este un parametru cerut de toate elementele INPUT, cu excepţia
elementelor SUBMIT şi RESET. Parametrul NAME crează un nume generic care va fi
asociat cu răspunsul utilizatorului şi permite serverului să interpreteze formularul
pentru a determina corelaţia dintre fiecare răspuns al utilizatorului şi elementele
formularului. NAME poate avea orice valoare.
Exemplu:
NAME="cîini" – într-o selecţie de rase de cîini
NAME="profesii" – într-o selecţie de profesii
NAME="adresă" – pentru un cîmp text
Elementul tip text (TYPE=TEXT)

Sintaxa:
<INPUT TYPE="text" NAME="nume" VALUE="valoare" SIZE=xx MAXLENGTH=yy>
Cîmpul text este utilizat frecvent ca formă de intrare a datelor pentru culegerea unor
informaţii cum ar fi nume, adrese e-mail, numere de telefon, comentarii scurte sau
orice altceva care poate fi tastat pe un rînd. Ca majoritatea elementelor INPUT, un
rînd text trebuie să aibă un nume (NAME). La trimiterea datelor din formular la
server, numelui îi va fi asociată valoarea tastată. De pildă, pentru culegerea unor
adrese email, dacă am ales ca nume al rîndului NAME=adresă, la server va fi trimisă
secvenţa adresă=ce s-a tastat.
Parametrul VALUE este egal cu textul implicit pe care îl dorim introdus în rîndul text.
Dacă VALUE lipseşte, rîndul va fi iniţial blanc.
Parametrul SIZE (dimensiune) permite setarea lungimii rîndului în număr de
caractere. Dacă numărul de caractere este mai mare (pînă la valoarea maximă admisă
prin MAXLENGTH), rîndul se va derula (scroll orizontal). Numărul maxim
specificat de MAXLENGTH nu reprezintă o cale sigură de a limita numărul de
caractere introduse de utilizator care, de exemplu, poate edita pagina ce conţine
formularul şi trimite un număr oricît de mare de caractere pentru text. Această limitare
trebuie luată în considerare şi de programul care primeşte formularul. Dacă parametrul
SIZE lipseşte, se consideră că are valoarea implicită de 20 de caractere.
Majoritatea navigatoarelor suportă cîmpuri text formate din mai multe rînduri, definite
prin SIZE=X,Y unde X=număr de caractere pe rînd si Y=număr de rînduri. Deoarece
HTML suportă şi comanda TEXTAREA (zonă text), elementul tip text se foloseşte
aproape exclusiv la definirea unui singur rînd.
Atributul READONLY, nou în HTML 4.0, este destul de puţin suportat de browsere.
El previne editarea conţinutului unui control de tip text sau parolă, dar totuţi sînt
trimise cu formularul.
Exemplu:
<FORM>
Tastaţi numele Dvs.:
<INPUT TYPE="text" NAME="nume" SIZE=40 MAXLENGTH=60></input>
Si adresa e-mail:
<INPUT TYPE="text" NAME="adresa" SIZE=30 MAXLENGTH=40></input>
</FORM>
Tot un control utilizat la introducerea textelor pe o linie se poate crea şi cu elementul

ISINDEX. Cu ajutorul lui se poate introduce un text avînd oricîte caractere. Acesta
este însă un element depăşit, chiar şi pentru crearea unui prompter simplu.
Exemplu:
Se poate înlocui declaraţia lui ISINDEX:
<ISINDEX prompt="Enter your search phrase: ">
cu:
<P>Enter your search phrase: <INPUT type="text"></P>
</FORM>
Elementul parolă (TYPE=PASSWORD)

Sintaxa:
<INPUT TYPE="password" NAME="nume" VALUE="Valoare" SIZE=xx
MAXLENGTH=yy></input>
Acest tip de intrări este folosit dacă se acceptă date de la utilizator dar nu se doreşte ca
informaţiile tastate să apară pe ecran (de pildă în cazul furnizării unor informaţii
confidenţiale; dar atenţie, această modalitate nu realizează o criptare a datelor).
Parametrii NAME, VALUE şi MAXLENGTH acţionează exact ca şi în cazul
elementului TEXT.
Exemplu:
Se utilizează elemente tip text şi parolă care au şi etichete ataşate cu LABEL:
<LABEL ACCESSKEY=U>
User name: <INPUT TYPE=text NAME=username SIZE=8 MAXLENGTH=8>
</LABEL>
<LABEL ACCESSKEY=P>
Password: <INPUT TYPE=password NAME=pw SIZE=12 MAXLENGTH=12>
</LABEL>
Căsuţe de selecţie (TYPE=CHECKBOX)

Sintaxa:
<INPUT TYPE="CHECKBOX" NAME="nume" VALUE="valoare" CHECKED>
Tipul CHECKBOX (căsuţe de selecţie) permite crearea unui buton pe care utilizatorul
îl poate seta activ/inactiv (închis/deschis). Funcţia îndeplinită de CHECKBOX permite
culegerea de răspunsuri la întrebări simple, pentru care nu există decît două răspunsuri
posibile. Într-un formular se pot include oricîte căsuţe de selecţie. Fiecare va fi
independentă de celelalte. La trimiterea formularului, vor fi remise serverului doar
căsuţele selectate. Căsuţa selectată implicit are parametrul CHECKED (selectat) în
elementul formularului.
Elementele CHECKBOX pot conţine de asemenea un parametru VALUE care permite
setarea şirului de caractere care va fi trimis serverului la selectarea căsuţei. Dacă
VALUE nu apare, valoare implicită asignată este ON.
Utilizatorul poate selecta nici una, una sau mai multe căsuţe. Pentru fiecare căsuţă
selectată va fi trimis serverului un şir nume=valoare.
Exemplu:
<FORM>
<INPUT TYPE="CHECKBOX" NAME="cîini" VALUE="Cocker"> Cocker <P>
<INPUT TYPE="CHECKBOX" NAME="cîini" VALUE="Setter"> Setter <P>
<INPUT TYPE="CHECKBOX" NAME="cîini" VALUE="Mioritic"> Mioritic <P>
</FORM>
Butoane Radio (TYPE=RADIO)
Sintaxa:
<INPUT TYPE="radio" NAME="nume" VALUE="valoare" CHECKED>
Elementele tip butoane radio funcţionează asemănător cu căsuţele de selecţie, adică
pot fi în poziţiile selectat/deselectat. Diferenţa constă că într-un grup de butoane,
numai unul poate fi selectat la un moment dat. Selectarea altuia conduce automat la
deselectarea celui selectat anterior. Elementul este util pentru a forţa selecţia unui
singur element dintr-o listă multiplă. Ca şi căsuţele de selecţie, butoanele radio pot
avea nume generice, acelaşi pentru toate butoanele unui anumit grup. Într-un grup
poate fi activat un singur buton.
Butonul selectat implicit (care este necesar pentru unele browsere) este marcat cu
CHECKED.
Exemplu:
<FORM>
<INPUT TYPE="RADIO" NAME="abonament" VALUE="3_luni"> 3_luni <P>
<INPUT TYPE="RADIO" NAME="abonament" VALUE="6_luni"> 6_luni <P>
<INPUT TYPE="RADIO" NAME="abonament" VALUE="12:luni"> 12 luni <P>
</FORM>
Exemplu:
În exemplul următor se selectează o metodă de plată prin intermediul butoanelor
radio. De remarcat că toate butoanele au acelaşi nume, atributul NAME), deci fac
parte din acelaşi grup. Se mai foloseşte şi o căsuţă (un buton) de marcare.
<P>Please indicate your method of payment:</P>
<P>
<LABEL ACCESSKEY=C>
<INPUT TYPE=radio NAME="payment_method" VALUE="credit card" CHECKED>
Credit card
</LABEL><BR>
<LABEL ACCESSKEY=D>
<INPUT TYPE=radio NAME="payment_method" VALUE="debit card"> Debit card
</LABEL><BR>
<LABEL ACCESSKEY=M>
<INPUT TYPE=radio NAME="payment_method" VALUE="money order"> Money
order</LABEL>
</P><P>
<LABEL ACCESSKEY=S>
<INPUT TYPE=checkbox NAME="send_receipt" VALUE="yes" CHECKED> Send
receipt by e-mail
</LABEL></P>
Elemente tip push-buton (TYPE=BUTTON)
Sintaxa:
<INPUT TYPE="button" NAME="nume" VALUE="valoare">
Elementele tip buton specifică un buton care se poate apăsa şi care se foloseşte cu
scripturi (client-side). Valoarea atributului VALUE dă textul ce apare pe buton.
Atributul ONCLICK este folosit în mod tipic pentru a defini o acţiune ce se
declanşează cînd butonul este apăsat, ca în exemplul următor:
<INPUT TYPE=button VALUE="Hide non-strict attributes" ID=toggler ONCLICK="toggle()">
În acest caz, în momentul în care butonul este apăsat (click) se execută funcţia
toggle(), definită anterior cu un element SCRIPT.
Întrucît astfel de butoane sînt utile doar cînd posibilitatea de execuţie a scripturilor pe
partea de client (client-side scripting) este activă (permisă), se recomandă evitarea
unor butoane care nu fac nimic prin inserarea tagului <INPUT TYPE=button>
folosind scripturi, ca în exemplul următor:
<SCRIPT TYPE="text/javascript">

</script>
Un set mai complet de opţiuni este oferit de elementul BUTTON, dar suportul scăzut
acordat de browsere acestuia fac utilizarea lui INPUT încă extrem de utilă.
Butonul RESET (TYPE=RESET)

Sintaxa:
<INPUT TYPE="reset" VALUE="Resetează">
În HTML se poate defini un singur buton pentru resetarea tuturor cîmpurilor din
interiorul unui formular. Resetarea aduce toţi parametrii la valorile lor implicite.
Butonul de resetare nu are nume deoarece starea lui nu este niciodată transmisă
serverului, apăsarea lui afectînd doar navigatorul utilizatorului. Singurul parametru
pentru RESET este VALUE, a cărui valoare va fi înscrisă pe buton.
Butonul SUBMIT (TYPE=SUBMIT)

Sintaxa:
<INPUT TYPE="submit" NAME="nume" VALUE="Trimite">
Elementul INPUT TYPE="submit" (trimite) este utilizat pentru crearea butonului care
trimite formularul serverului. La apăsarea butonului, formularul şi conţinutul lui
curent sînt trimise serverului specificat de atributul ACTION al elementului FORM,
utilizînd procedeul specificat cu METHOD. Cîmpurile necompletate şi butoanele
neselectate nu vor fi transmise.
Parametru VALUE dă o valoare care va fi înscrisă pe buton. Dacă apare şi atributul
NAME, browserul va trimite o pereche name/value şi pentru butonul SUBMIT,
aceasta permiţînd existenţa mai multor butoane SUBMIT într-un formular, fiecare cu
propria acţiune.
Butonul grafic SUBMIT (TYPE=IMAGE)

Sintaxa:
<INPUT TYPE="image" NAME="nume" VALUE="Trimite"
SRC="URL" ALT="text" USEMAP="URL">
Elementul INPUT TYPE="image" este utilizat pentru crearea unui buton submit
grafic. Atributul SRC trebuie inclus pentru a specifica adresa imaginii folosite,
atributul ALT oferind o alternativă (un text) pentru browser-ele care nu afişează
imagini. Numai HTML 4.0 defineşte acest atribut, browser-ele bazîndu-se pe valorile
atributelor NAME sau VALUE, astfel că recomandarea este ca toate să aibă acelaşi
text asociat.
Atributul ALIGN, depăşit acum, specifică modul de aliniere al acestui tip de buton.
Valorile top, middle şi bottom specifică poziţia butonului în raport de conţinutul
adiacent în dreapta şi stînga, iar valorile left şi right transformă butonul într-un
element flotant, plasînd imaginea la marginea din stînga, respectiv dreapta, restul
conţinutului curgînd pe lîngă el. Pentru a trimite restul conţinutului sub buton se
foloseşte <BR CLEAR=left|right|all>. În locul acestui atribut se recomandă folosirea
proprietăţilor CSS vertical-align şi float.
Un astfel de buton trimite în plus şi coordonatele punctului în care s-a apăsat sub
forma perechilor: name.x=x-value şi name.y=y-value. Dacă se combină atributul
USEMAP cu TYPE=image, se defineşte o hartă senzitivă prelucrată de client (client-
side image map) dar metoda este foarte puţin suportată.
Selecţia unui fişier (TYPE=FILE)

Sintaxa:
<INPUT TYPE="file" NAME="nume" VALUE="valoare" ACCEPT="lista">
Elementele tip selecţie de fişier crează un cîmp prin intermediul căruia utilizatorii pot
trimite fişiere de pe computerul local în reţea. Valoarea atributului VALUE specifică
numele fişierului iniţial, dar este ignorată (în mod normal) de toate browser-ele din
motive de securitate. Atributul ACCEPT oferă o listă cu tipurile de media (fişiere)
suportate, permiţînd browser-elor un filtru asupra acestora, dar în general este ignorat.
Elemente ascunse (TYPE=HIDDEN)

Sintaxa:
<INPUT TYPE="file" NAME="nume" VALUE="valoare" ACCEPT="lista">
Elementele tip ascuns permit inserarea în formulare a unor elemente care nu sînt
vizibile (de fapt nu sînt afişate de browser dar ele pot fi văzute în sursa documentului
fără nici o problemă). Ele sînt extrem de utile cînd aplicaţiile utilizează mai multe
documente HTML: ceea ce introduce utilizatorul poate fi „transportat“ de la un
formular la altul fără ca acesta să vadă acest lucru. De asemenea, astfel de elemente
sînt utile şi pentru anumite scripturi CGI generale, cînd sînt folosite pentru a defini
variabile pentru acesta, ca în exemplul următor (unde se defineşte un subiect şi o
adresă de email pentru un răspuns trimis prin email):
<INPUT TYPE=hidden NAME=recipient VALUE="lp@csd.com">
<INPUT TYPE=hidden NAME=subject VALUE="Feedback on your course">
Atribute comune tuturor tipurilor de INPUT
Atributul DISABLED, puţin suportat, dezactivează un control. Astfel, un control
devine read-only, nu poate primi focusul, este sărit cînd se navighează cu tasta TAB şi,
în plus, valoare sa nu este trimisă serverului.
Atributele ACCESSKEY şi TABINDEX se aplică tuturor, excepţie făcînd hidden.
ACCESSKEY specifică un singur caracter Unicode (inclusiv entităţile) ca shortcut
pentru a da focusul unui control. Acelaşi rezultat se obţine şi dacă se setează la
elementul LABEL Atributul TABINDEX specifică un număr între 0 şi 32767 pentru a
indica ordinea elementului în lista de parcurgere (cu TAB). Un element cu
TABINDEX=0 sau fără TABINDEX va fi vizitat după toate elementele cu o valoare
pozitivă. Între elementele cu valoare pozitivă a lui TABINDEX, primele se vizitează
cele cu valori mai mici. În caz de egalitate, primele apărute în document sînt primele
vizitate.
Toate variaţiile lui INPUT pot specifica şi atribute utilizate de scripturi pe diverse
evenimente. Pe lîngă evenimentele de tip core ce apar pentru majoritatea elementelor,
INPUT mai acceptă şi următoarele:
 ONFOCUS, cînd elementul primeşte focusul;
 ONBLUR, cînd elementul pierde focusul;
 ONSELECT, cînd textul dintr-un control de tip text sau password este
selectat;
 ONCHANGE, cînd elementul pierde focusul şi valoarea lui a fost schimbată
faţă de momentul în care l-a primit
Elementul BUTTON
Sintaxa:
<BUTTON> ... </BUTTON>
Atribute posibile:
 VALUE=CDATA (valoarea introdusă)
 TYPE=[ submit | reset | button ] (tipul butonului)
 atribute comune
Conţine:
 Elemente inline exceptînd A, INPUT, SELECT, TEXTAREA, LABEL,
BUTTON, IFRAME
 Elemente block-level exceptînd FORM, ISINDEX, FIELDSET
Conţinut în:
 Elemente block-level, elemente inline, cu excepţia lui BUTTON
Descriere:
Acest element crează butoane într-un mod similar cu INPUT, dar oferă mai multe
posibilităţi de afişare (mai multe etichete, asocierea cu imagini, conţinut). Mai mult,
toate browser-ele sugerează pentru aceste butoane apăsarea, spre deosebire de cele
definite cu INPUT care pot fi „plate“. Totuşi elementul este nou în HTML 4.0 şi există
browsere care încă nu-l suportă!
Butoanele care pot fi definite cu acest element sînt submit button (implicit), reset
button şi push button şi sînt stabilite de valoarea lui TYPE. Atributele NAME şi
VALUE determină perechea name/value trimisă la server, oferind posibilitatea de avea
mai multe butoane submit într-un formular.
Exemple de tipuri de butoane:
 <BUTTON NAME=submit VALUE=modify ACCESSKEY=M>Modificare </BUTTON>
<BUTTON NAME=submit VALUE=continue ACCESSKEY=C>Continuare </BUTTON>
 <BUTTON ACCESSKEY=S>Submit <IMG SRC="checkmark.gif"
ALT="✔"></BUTTON>
<BUTTON TYPE=reset ACCESSKEY=R>Reset <IMG SRC="x.gif"
ALT="✘"></BUTTON>
 <BUTTON TYPE=button ID=toggler ONCLICK="toggle()" ACCESSKEY=H>Hide
</BUTTON>
Atributul DISABLE face butonul inaccesibil: nu se mai poate apăsa, nu mai primeşte
focusul şi este sărit cînd se navighează cu TAB.
Atributele ACCESSKEY, TABINDEX şi cele care specifică acţiuni de scriptare
(ONFOCUS şi ONBLUR) se folosesc la fel ca şi la INPUT.
Exemplu:
Acest exemplu îl extinde pe cel de la INPUT, dar crează butoanele Submit şi Reset cu
BUTON în locul lui INPUT. Butoanele pot conţine imagini (inserate cu elementul
IMG) şi se recomandă folosirea atributului ALT al acestora pentru cazul în care nu
sînt afişate.
<P>
First name: <INPUT type="text" name="firstname"><BR>
Last name: <INPUT type="text" name="lastname"><BR>
email: <INPUT type="text" name="email"><BR>
<BUTTON name="submit" value="submit" type="submit">
Send<IMG src="/icons/wow.gif" alt="wow">
</BUTTON>
<BUTTON name="reset" type="reset">
Reset<IMG src="/icons/oops.gif" alt="oops">
</BUTTON>
</P>
</FORM>
Exemplu ilegal:
De remarcat că este ilegal să se asocieze o hartă senzitivă cu un IMG care apare ca şi
conţinut al unui element BUTTON. De aceea exemplul următor este ILEGAL!
<BUTTON>
<IMG src="foo.gif" usemap="...">
</BUTTON>
Elementul TEXTAREA
Sintaxa:
<TEXTAREA> ... </TEXTAREA>
Atribute posibile:
 ROWS=Number (număr de rînduri)
 COLS=Number (număr de coloane)
 READONLY (previne modificări asupra elementului)
 ONSELECT=Script (elementul de tip text a fost selectat)
 atribute comune
Conţine:
 Text (incluzînd entităţi)
Conţinut în:
 Elemente block-level, elemente inline, cu excepţia lui BUTTON
Descriere:
TEXTAREA crează un control pentru introducerea unui text multi-linie, valoarea
iniţială fiind afişată de browser la început în interiorul controlului (nu trebuie să
conţină taguri HTML). El este utilizat de obicei în cadrul lui FORM, dar HTML 4.0
permite şi folosirea lui în orice element block-level sau inline (cu excepţia lui
BUTTON). De remarcat, totuşi că Netscape Navigator NU va afişa nici un element
TEXTAREA în afara unui formular definit cu FORM.
Acest element oferă posibilitatea de a accepta de la utilizator un bloc de text, astfel că
acesta îşi poate "lipi" un document întreg într-o pagină HTML. Elementul
TEXTAREA nu este o comandă de tip INPUT ci una de cu totul alt tip. Ca şi
elementele INPUT, regiunile text au un nume care permite identificarea acestui cîmp
de către server, care va primi informaţia de formă nume=conţinut.
Elementul TEXTAREA are parametrii (obligatorii) ROWS şi COLS care specifică
dimensiunile ferestrei afişate utilizatorului, exprimate în număr de caractere pe
orizontală, respectiv verticală. Aceasta nu înseamnă o limitare a utilizatorului în
privinţa volumului de informaţie care poate fi tastat deoarece umplerea ferestrei
determină apariţia unor bare de derulare. Se limitează totuşi cantitatea totală de text ce
se poate introduce (în practică) la 32 ... 64 KB. Limitarea finală este făcută de scriptul
CGI sau de servletul Java care primeşte formularul.
Elementul TEXTAREA nu este vid, ceea ce înseamnă că trebuie un terminator
</TEXTAREA>. Ceea ce se află între cele două etichete va apare ca text implicit în
cîmpul definit.
Atributul READONLY, nou în HTML 4.0 şi destul de puţin suportat, determină
afişarea unui text nemodificabil. Diferenţa faţă de textul simplu este ca acesta este
trimis serverului odată cu formularul.
Atributul DISABLED se comportă ca şi la INPUT, transformînd textul în read-only.
Atributele ACCESSKEY, TABINDEX şi cele care specifică acţiuni de scriptare
(ONFOCUS, ONBLUR, ONSELECT şi ONCHANGE) se folosesc la fel ca şi la
INPUT.
Exemplu:
Acest exemplu crează un control TEXTAREA de 20 de rînduri şi 80 de coloane, avînd
iniţial 2 linii de text. Acest control este urmat de două butoane: Submit şi Reset.
<FORM action="http://somesite.com/prog/text-read" method="post">
<P>
<TEXTAREA name="thetext" rows="20" cols="80">
Prima linie a textului iniţial.
A doua linie a textului iniţial.
</TEXTAREA>
<INPUT type="submit" value="Send">
<INPUT type="reset">
</P>
</FORM>
3. Crearea controalelor de selecţie într-un formular (SELECT, OPTGROUP,

OPTION)
HTML permite crearea mai multor tipuri de liste de selecţie (meniuri), de orice lungime,
prin intermediul elementului SELECT. Fiecare listă prezintă utilizatorului unul sau mai
multe elemente care pot fi selectate individual sau multiplu. Listele pot fi afişate în
interiorul unei ferestre sau de forma drop-down. Ferestrele inserate permit accesarea
elementelor conţinute cu ajutorul unor bare de derulare.
În interiorul elementului SELECT sînt permise doar două elemente: text simplu şi cel
puţin un element OPTION. Elementul OPTION este utilizat pentru definirea fiecărui
element al meniului. OPTION are un singur parametru: SELECTED. Utilizarea lui
înseamnă că elementul respectiv este selectat implicit.
Atunci cînd un formular este transmis spre a fi prelucrat (submit), numele (NAME) listei
va fi trimis serverului împreună cu elementul selectat din listă.
Elementele unui meniu pot fi grupate logic în grupuri cu ajutorul elementului
OPTGROUP. Această posibilitate este utilă cînd trebuie ales dintr-o listă foarte lungă:
opţiunile ce au legătură între ele dpdv logic se pot grupa şi utiliza împreună mai uşor
decît dacă sînt toate într-o singură listă (la fel ca submeniurile unui meniu). În HTML 4.0
grupurile nu pot fi, însă, îmbricate.
Opţiuni preselectate
Dintre opţiunile unei liste pot fi preselectate zero sau mai multe. Determinarea
elementelor preselectate se face după cum urmează:
 Dacă nici un element OPTION nu are atributul SELECTED setat, atunci nu vor fi
elemente preselectate.
 Dacă un element OPTION are atributul SELECTED setat, atunci acesta va fi
preselectat.
 Daca elementul SELECT are atributul MULTIPLE şi mai mult de un element
OPTION are atributul SELECTED setat, atunci toate acestea vor fi preselectate
 Se consideră eroare dacă mai mult de un element OPTION are atributul
SELECTED setat şi elementul SELECT nu are atributul MULTIPLE. Fiecare
browser va acţiona diferit, dar nu trebuie să fie preselectat mai mult de o singură
opţiune
La afişarea unui menu, se foloseşte valoarea atributului LABEL de la fiecare element
OPTION pentru afişarea acelei opţiuni. Dacă nu este specificată se foloseşte conţinutul
elementului OPTION. În cazul unui grup de opţiuni, atributul LABEL specifică eticheta
acelui grup de opţiuni.
Exemplu:
Se crează un meniu ce permite selectarea unor componente software care să se
instaleze. Prima şi a doua componentă sînt preselectate şi pot fi deselectate, celelalte
nefiind preselectate. Atributul SIZE indică faptul că meniul are doar 4 rînduri, chiar
dacă sînt 7 opţiuni. Ce nu se vede se accesează după ce se face scroll. Dupa definirea
meniului apar butoanele Submit şi Reset.
<FORM action="http://somesite.com/prog/component-select"
method="post">
<P>
<SELECT multiple size="4" name="component-select">
<OPTION selected value="Component_1_a">Component_1</OPTION>
<OPTION selected value="Component_1_b">Component_2</OPTION>
<OPTION>Component_3</OPTION>
</SELECT>
<INPUT type="submit" value="Send"><INPUT type="reset">
</P>
</FORM>
Exemplu:
În acest exemplu se utilizează OPTGROUP pentru a grupa opţiunile meniului:
<FORM action="http://somesite.com/prog/someprog" method="post">
<P>
<SELECT name="ComOS">
<OPTGROUP label="PortMaster 3">
<OPTION label="3.7.1" value="pm3_3.7.1">PortMaster 3 with
ComOS 3.7.1
<OPTION label="3.7" value="pm3_3.7">PortMaster 3 with
ComOS 3.7
ComOS 3.5
</OPTGROUP>
<OPTGROUP label="PortMaster 2">
ComOS 3.7
ComOS 3.5
</OPTGROUP>
<OPTGROUP label="IRX">
<OPTION label="3.7R" value="IRX_3.7R">IRX with ComOS 3.7R
<OPTION label="3.5R" value="IRX_3.5R">IRX with ComOS 3.5R
</OPTGROUP>
</SELECT>
</FORM>
Grupurile (logice) de opţiuni sînt, în acest caz:

PortMaster 3
3.7.1
3.7
3.5
PortMaster 2
3.7
3.5
IRX
3.7R
3.5R
Browser-ele pot permite utilizatorilor selectarea unei opţiuni dintr-un grup utilizînd, de
exemplu, meniuri ierarhice sau alt mecanism asemănător. O posibilă afişare a meniului
definit anterior este prezentată în figura următoare:
Elementul SELECT
Sintaxa:
<SELECT> ... </SELECT>
Atribute posibile:
 MULTIPLE (permite selecţii multiple)
 SIZE=Number (numărul de opţiuni vizibile)
 atribute comune
Conţine:
 Unul sau mai multe elemente OPTGROUP sau OPTION
Conţinut în:
 elemente de tip block-level, elemente inline, cu excepţia lui BUTTON
Descriere:
Acest element defineşte un control pentru selecţia dintr-o listă de opţiuni. El este
utilizat de obicei în cadrul lui FORM, dar HTML 4.0 permite şi folosirea lui în orice
element block-level sau inline (cu excepţia lui BUTTON). De remarcat, totuşi că
Netscape Navigator NU va afişa nici un element SELECT în afara unui formular
definit cu FORM.
Elementul SELECT conţine unul sau mai multe elemente OPTGROUP sau OPTION
pentru a oferi un meniu de posibilităţi de alegere pentru utilizator. Fiecare opţiune este
conţinută într-un element OPTION, iar acestea pot fi grupate logic cu OPTGROUP.
Valoarea atributului NAME va fi trimisă serverului ca identificator al controlului
(împreună cu opţiunea selectată).
Elementul SELECT are un parametru opţional, SIZE. Dacă acest parametru lipseşte,
valoarea lui implicită este l, lista va fi de tip drop-down şi din listă poate fi selectat
doar un singur element. Utilizarea este pentru situaţii similare celor rezolvate de
butoanele radio. Dacă parametrul este mai mare decît 1, lista este prezentată într-o
fereastră inserată, valoarea lui SIZE indicînd cîte elemente pot fi văzute simultan.
Dacă lista este mai lungă, celelalte elemente pot fi văzute cu ajutorul barei de derulare
(scroll) care apare în dreapta listei.
Un alt parametru opţional pentru <SELECT> este MULTIPLE. Parametrul nu are o
valoare numerică asociată, iar prezenţa lui asigură doar posibilitatea selecţiei mai
multor elemente ale listei simultan (cu ajutorul tastei CTRL) care vor fi trimise la
Submit, ca în exemplul următor.
<P>Selectaţi una sau mai multe secţiuni în care doriţi să căutaţi:
<SELECT NAME=sections MULTIPLE>
<OPTION>Web Authoring Reference</OPTION>
<OPTION>FAQ Archives</OPTION>
<OPTION>Design Elements</OPTION>
<OPTION>Tools</OPTION>
<OPTION>Feature Article</OPTION>
</SELECT>
Atributele DISABLED şi TABINDEX, precum şi cele legate de acţiunile de scriptare
pe anumite evenimente sînt similare cu cele de la INPUT.
Exemplu:
Exemplul următor crează un meniu de 5 opţiuni (5 elemente OPTION), afişat într-o
fereastră în care sînt vizibile simultan 3 opţiuni (SIZE=3), prima fiind selectată
implicit (OPTION SELECTED>Roşu), cu posibilitatea de a selecta mai multe opţiuni
(MULTIPLE).
<FORM>
Selectaţi culorile favorite din următoare listă:
<SELECT NAME="culori" SIZE=3 MULTIPLE>
<OPTION SELECTED>Roşu
<OPTION>Verde
<OPTION>Albastru
<OPTION>Turcoaz
<OPTION>Magenta
</SELECT>
</FORM>
Elementul OPTGROUP
Sintaxa:
<OPTGROUP> ... </OPTGROUP>
Atribute posibile:
 LABEL=Text (eticheta grupului de opţiuni)
 DISABLED (grupul de opţiuni este dezactivat)
 atribute comune
Conţine:
 Unul sau mai multe elemente OPTION
Conţinut în:
 elementul SELECT
Descriere:
Acest element defineşte un grup de opţiuni într-un meniu definit cu SELECT şi trebuie
să conţină cel puţin un element OPTION. Atributul LABEL este obligatoriu, identifică
grupul de opţiuni, fiind afişat de browser şi pentru utilizator. El trebuie să descrie
grupul de opţiuni grupate dpdv logic împreună cu atributele LABEL ale fiecărei
opţiuni în parte.
OPTGROUP nu este foarte bine suportat de toate browserele, dar cele care nu îl
recunosc nu crează nici o problemă. Cele care îl suportă permit o afişare mai compactă
prin intermediul meniurilor cascadate (submeniuri). Cascadarea este însă în HTML 4.0
doar pe un singur nivel (nu sînt permise OPTGROUP în OPTGROUP)!
Atributul DISABLED face întregul grup de opţiuni inactive (le dezactivează), acestea
neputînd fi selectate şi nici trimise la server odată cu formularul.
Exemplu:
Exemplul următor se poate folosi pentru a cere utilizatorului informaţii despre
browser-ul pe care îl utilizează mai frecvent. Se utilizează OPTGROUP pentru a grupa
informaţiile legate de acelaşi tip de browser (Netscape Navigator, Microsoft Internet
Explorer, Opera sau altul).
<P>Ce browser Web folosiţi în mod curent?

<SELECT NAME=browser>
<OPTGROUP LABEL="Netscape Navigator">
<OPTION LABEL="4.x">Netscape Navigator 4.x or
higher</OPTION>
<OPTION LABEL="3.x">Netscape Navigator 3.x</OPTION>
</OPTGROUP>
<OPTGROUP LABEL="Microsoft Internet Explorer">

<OPTION LABEL="4.x">Microsoft Internet Explorer 4.x
</OPTION>
<OPTION LABEL="3.x">Microsoft Internet Explorer
3.x</OPTION>
2.x</OPTION>
1.x</OPTION>
</OPTGROUP>
<OPTGROUP LABEL="Opera">
<OPTION LABEL="3.x or higher">Opera 3.x or higher</OPTION>
<OPTION LABEL="2.x">Opera 2.x</OPTION>
</OPTGROUP>
<OPTION>Other</OPTION>
</SELECT>
</P>
Elementul OPTION
Sintaxa:
<OPTION > ... </OPTION >
Atribute posibile:
 VALUE=CDATA (valoarea opţiunii)
 SELECTED (opţiune iniţial selectată)
 DISABLED (dezactivată/inactivă)
 LABEL=Text (eticheta opţiunii)
 atribute comune
Conţine:
 Text (inclusiv entităţi)
Conţinut în:
 elementul SELECT sau OPTGROUP
Descriere:
Acest element defineşte o opţiune (un elemnt de meniu) într-un meniu (listă de
opţiuni). Valoarea acestei opţiuni este cea care va fi trimisă la Submit şi este
specificată cu atributul VALUE. Dacă lipseşte, se consideră valoare a acestui element
conţinutul lui OPTION.
Atributul boolean SELECTED defineşte o opţiune ce este iniţial selectată –
preselectată (a se vedea paragraful anterior relativ la elemente preselectate). Există
posibilitatea de a stabili ca opţiune preselectată o valoare fără semnificaţie (dummy)
pentru a fi siguri că utilizatorul selectează o opţiune şi nu trece doar peste meniu. De
exemplu, starea civilă se poate cere astfel:
<SELECT NAME="marital_status">
<OPTION SELECTED VALUE="">Select...</OPTION>
<OPTION>Single</OPTION>
<OPTION>Married</OPTION>
<OPTION>Separated</OPTION>
<OPTION>Divorced</OPTION>
<OPTION>Widowed</OPTION>
</SELECT>
Atributul DISABLED, deşi nu este suportat global, determină transformarea unei
opţiuni în opţiune inactivă (nu poate fi selectată, nu este trimisă odată cu formularul).
Atributul LABEL specifică eticheta unei opţiuni, care altfel (implicit) este conţinutul
elementului. Se recomandă folosirea ei pentru că permite utilizarea mult mai uşoară a
grupării cu OPTGROUP, fără a sacrifica compatibilitatea cu browser-ele care nu
suportă acest element.
Exemplu:
<P>Which Web browser do you use most often?
<SELECT NAME=browser>
<OPTGROUP LABEL="Netscape Navigator">
<OPTION LABEL="4.x or higher">Netscape Navigator
4.x</OPTION>
</OPTGROUP>
<OPTGROUP LABEL="Microsoft Internet Explorer">
<OPTION LABEL="4.x or higher">Microsoft Internet Explorer
4.x</OPTION>
<OPTION LABEL="3.x">Microsoft Internet Explorer 3.x</OPTION>
</OPTGROUP>
<OPTGROUP LABEL="Opera">
<OPTION LABEL="3.x or higher">Opera 3.x or higher</OPTION>
<OPTION LABEL="2.x">Opera 2.x</OPTION>
</OPTGROUP>
<OPTION>Other</OPTION>
</SELECT>
</P>
Atributul LABEL al elementelor OPTGROUP şi OPTION's LABEL au fost introduse

împreună, astfel că un browser sau le suportă pe amîndouă sau pe niciunul. Cele care
le suportă vor afişa acest exemplu folosind atributul LABEL al lui OPTION pentru a
oferi ca element de selecţie doar numărul de versiune, împreună cu atributul LABEL
al lui OPTGROUP care dă numele complet al aplicaţiei (browserului), obţinîndu-se o
afişare mai compactă. Celelalte, care nu suportă atributul OPTGROUP, le vor ignora
(împreună cu atributele lor, aici LABEL), afişînd numele complet şi versiunea la
fiecare opţiune.
4. Etichetele controalelor dintr-un formular (elementul LABEL)
Cîteva controale care se utilizează în formularele interactive au asociate etichete cu ele
(butoanele ce se apasă), dar multe nu au (cîmpurile text, checkbox-urile, butoanele radio
şi meniu). Pentru controalele care au etichete asociate, browserele trebuie să le folosească
ca şiruri de caractere afişate pentru ele. Pentru cele care nu, specificarea se face cu
elementul LABEL. Acesta ataşează informaţie pentru un control şi numai unul.
Cînd un element LABEL primeşte focusul îl pasează controlului asociat.
Elementul LABEL are un atribut, FOR, care asociază o etichetă cu un alt control, în mod
explicit: valoarea atributului FOR trebuie să fie exact aceeaşi cu valoarea atributului ID al
controlului asociat. În acest fel aceluiaşi control i se pot asocia mai multe elemente
LABEL prin crearea de referinţe multiple (cu ajutorul lui FOR).
Exemplu:
Acest exemplu crează un tabel care este folosit pentru a alinia două controale text (şi
etichetele asociate lor). Fiecare etichetă este asociată explicit cu un control de tip text:
<FORM action=" http://somesite.com/prog/adduser " method="post">
<TABLE>
<TR>
<TD><LABEL for="fname">First Name</LABEL>
<TD><INPUT type="text" name="firstname" id="fname">
<TR>
<TD><LABEL for="lname">Last Name</LABEL>
<TD><INPUT type="text" name="lastname" id="lname">
</TABLE>
</FORM>
Acelaşi lucru se poate face şi prin includerea elementelor explicite LABEL:
<LABEL for="firstname">First name: </LABEL>
<INPUT type="text" id="firstname"><BR>
<LABEL for="lastname">Last name: </LABEL>
<INPUT type="text" id="lastname"><BR>
<LABEL for="email">email: </LABEL>
<INPUT type="text" id="email"><BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</FORM>
Această tehnică nu poate fi însă utilizată cînd tabelul este folosit pentru aşezarea
elementelor în pagină (layout), cînd eticheta este într-o celulă şi controlul asociat în
alta.
Pentru a se asocia implicit o etichetă cu un alt control, controlul trebuie să apară în

interiorul (conţinutul) elementului LABEL. În acest caz, LABEL poate conţine doar un
singur control. Eticheta însăşi poate fi poziţionată sau înainte sau după controlul asociat.
Exemplu:
În acest exemplu asociem implicit două etichete cu două controale de tip text:
<LABEL>
First Name
<INPUT type="text" name="firstname">
</LABEL>
<LABEL>
<INPUT type="text" name="lastname">
Last Name
</LABEL>
</FORM>
Elementul LABEL
Sintaxa:
<LABEL> ... </LABEL>
Atribute posibile:
 FOR=IDREF (cîmpul formularului asociat)
 atribute comune
Conţine:
 elemente inline cu excepţia lui LABEL
Conţinut în:
 elemente de tip block-level, elemente inline, cu excepţia lui BUTTON
Descriere:
Acest element asociază o etichetă (label) cu un control al unui formular. Prin această
asociere autorii paginilor Web oferă sugestii importante utilizatorilor de browsere
auditive, iar celor care folosesc browsere vizuale li se permite duplicarea unor
caracteristici ale interfeţei utilizator (GUI), cum ar fi, de exemplu, posibilitatea de a
apăsa o etichetă (text) pentru a selecta un buton radio sau o căsuţă de marcare.
Fiecare element LABEL este asociat cu exact un control. Conţinutul elementului este
eticheta controlului şi poate include elemente inline, ca de exemplu IMG sau
STRONG.
Atributul FOR specifică în mod explicit controlul care se asociază cu LABEL.
Valoarea lui FOR trebuie să se potrivească cu valoarea atributului ID al controlului
asociat. În absenţa lui FOR, elementul LABEL trebuie să conţină controlul asociat!
Această metodă (de asociere implicită) funcţionează în majoritatea cazurilor, dar
devine inutulizabilă cînd eticheta şi controlul asociat sînt în celule diferite de tabel, în
paragrafe sau diviziuni diferite .
Atributul ACCESSKEY, precum şi cele legate de acţiunile de scriptare pe anumite
evenimente sînt similare cu cele de la INPUT.
Exemplu:
Acest exemplu ilustrează ambele metode de asociere a unei etichete cu un control:
asocierea explicită (cu FOR) şi asocierea implicită (control conţinut de LABEL):
<TABLE>
<TR>
<TD>
<LABEL FOR=user ACCESSKEY=U>User</LABEL>
</TD>
<TD>
<SELECT NAME=user ID=user>
<OPTION>Jean</OPTION>
<OPTION>Kim</OPTION>
<OPTION>Brian</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD><LABEL FOR=passwd ACCESSKEY=P>Password</LABEL></TD>
<TD><INPUT TYPE=password NAME=password ID=passwd></TD>
</TR>
</TABLE>
<P>
<LABEL ACCESSKEY=S>
<INPUT TYPE=checkbox NAME=save VALUE=yes>
Save user name and password in a cookie
</LABEL>
</P>
<P>
<LABEL ACCESSKEY=C>
Comments to post:
<TEXTAREA NAME=comments ROWS=8 COLS=50></TEXTAREA>
</LABEL>
</P>
5. Elementele de structură dintr-un formular (elementele FIELDSET, LEGEND)

Elementul FIELDSET permite gruparea tematică a controalelor şi a etichetelor unui
formular. Prin această operaţie se uşurează procesul de înţelegere a scopului pentru care
au fost introduse controalele (făcînd documentele mai accesibile), oferind în plus şi
facilităţi de navigare (pentru browserele vizuale, de exmplu cu tasta TAB).
Elementul LEGEND permite asignarea unei explicaţii (unui titlu, şir de caractere) unui
element FIELDSET, îmbunătăţind accesibilitatea la acesta pentru browserele nevizuale.
Fie, pentru exemplificare, un formular care s-ar putea utiliza la un cabinet medical. Este
împărţit în 3 secţiuni: informaţii personale, antecedente medicale (istoria bolilor) şi
tratamentul curent. Fiecare secţiune conţine controale pentru a se introduce informaţia
corespunzătoare.
<P>
<FIELDSET>
<LEGEND> Informaţii Personale</LEGEND>
Numele: <INPUT name="personal_lastname" type="text"
tabindex="1">
Prenumele: <INPUT name="personal_firstname" type="text"
tabindex="2">
Adresa: <INPUT name="personal_address" type="text"
tabindex="3">
</FIELDSET>
<FIELDSET>
<LEGEND>Medical History</LEGEND>
<INPUT name="history_illness"
type="checkbox"
value="Rujeola" tabindex="20"> Rujeola
type="checkbox"
value="Varicela" tabindex="21"> Varicela
type="checkbox"
value="Rubeola" tabindex="22"> Rubeola
type="checkbox"
value="Pojar" tabindex="23"> Pojar
...alte boli mai vechi...
</FIELDSET>
<FIELDSET>
<LEGEND>Medicamente Curente</LEGEND>
Luati medicamente acum?
<INPUT name="medication_now"
type="radio"
value="Yes" tabindex="35">Da
<INPUT name="medication_now"
type="radio"
value="No" tabindex="35">Nu
</FIELDSET>
<FIELDSET>
Daca da, ce luati:
<TEXTAREA name="current_medication"
rows="20" cols="50"
tabindex="40">
</TEXTAREA>
</FIELDSET>
</FORM>
De remarcat că în acest exemplu se poate îmbunătăţi reperezentarea vizuală a

formularului prin alinierea elementelor din fiecare FIELDSET (utilizînd style-sheet-
urile), prin adăugarea de informaţii de culoare şi stil (utilizînd tot style-sheet-urile),
adăugînd scripturi (activînd, de exemplu, zona în care se scriu medicamentele curente
doar dacă se selectează butonul radio cu „Da“), etc.
Elementul FIELDSET
Sintaxa:
<FIELDSET> ... </ FIELDSET >
Atribute posibile:
 atribute comune
Conţine:
 Un element LEGEND urmat de zero sau mai multe elemente de tip bloc sau in-
line.
Conţinut în:
FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD,
TH
Descriere:
Acest element defineşte un grup de controale într-un formular. Prin această operaţie
de grupare, formularele se divid în părţi mai mici, mai uşor de întreţinut, utilizatorul
putîndu-se orienta mai uşor, îmbunătăţind modul de utilizare atît pentru browserele
vizuale cît şi pentru cele auditive.
Chiar dacă FIELDSET nu este suportat de toate browser-ele, el poate fi utilizat în
deplină siguranţă prin includerea lui între tagurile <P> şi </P>, sau prin inserarea unui
tag P înainte de FIELDSET, în acest fel browser-ele care nu-l recunosc vor include
conţinutul lui într-un element de tip bloc, separat de restul formularului.
Conţinutul lui trebuie să înceapă cu un element LEGEND care să ofere un titlu (o
explicaţie) pentru grupul de controale, apoi pot să apară oricîte elemente inline sau de
tip bloc, inclusiv un alt element FIELDSET.
Exemplu:
Acest exemplu defineşte un formular pentru comanda unor informaţii (manuale): ghid
HTML 3.2, ghid HTML 4.0 sau manual de referinţă CSS. Se cer datele clientului
(numele, adresa de e-mail, adresa postală), se cer informaţii despre ceea ce se doreşte a
se cumpăra şi apoi despre modalitatea de plată. Fiecare grup de informaţii se află într-
un FIELDSET separat, fiecare avînd un element LEGEND asociat. La sfîrşit se
introduc cele 2 butoane obligatorii într-un formular (Submit şi Reset), trimiterea
formularului făcîndu-se către un program CGI (order.cgi) aflat în folderul /cgi.
<FORM METHOD=post ACTION="/cgi-bin/order.cgi">

<FIELDSET>
<LEGEND ACCESSKEY=I>Contact Information</LEGEND>
<TABLE>
<TR>
<TD><LABEL FOR=name ACCESSKEY=N>Name:</LABEL></TD>
<TD><INPUT TYPE=text NAME=name ID=name></TD>
</TR>
<TR>
<TD><LABEL FOR=email ACCESSKEY=E>E-mail
Address:</LABEL></TD>
<TD><INPUT TYPE=text NAME=email ID=email></TD>
</TR>
<TR>
<TD><LABEL FOR=addr ACCESSKEY=A>Mailing
Address:</LABEL></TD>
<TD><TEXTAREA NAME=address ID=addr ROWS=4
COLS=40></TEXTAREA></TD>
</TR>
</TABLE>
</FIELDSET>
<FIELDSET>
<LEGEND ACCESSKEY=O>Ordering Information</LEGEND>
<P>Please select the product(s) that you wish to order:</P>
<P>
<LABEL ACCESSKEY=3>
<INPUT TYPE=checkbox NAME=products VALUE="HTML 3.2
Reference">
<A HREF="/reference/html32/">HTML 3.2 Reference</A>
</LABEL>
<BR>
<LABEL ACCESSKEY=4>
<INPUT TYPE=checkbox NAME=products VALUE="HTML 4.0
Reference">
<A HREF="/reference/html40/">HTML 4.0 Reference</A>
</LABEL>
<BR>
<LABEL ACCESSKEY=S>
<INPUT TYPE=checkbox NAME=products VALUE="CSS Guide">
<A HREF="/reference/css/">Cascading Style Sheets Guide</A>
</LABEL>
</P>
</FIELDSET>
<FIELDSET>
<LEGEND ACCESSKEY=C>Credit Card Information</LEGEND>
<P>
<LABEL ACCESSKEY=V>
<INPUT TYPE=radio NAME=card VALUE=visa> Visa
</LABEL>
<LABEL ACCESSKEY=M>
<INPUT TYPE=radio NAME=card VALUE=mc> MasterCard
</LABEL>
<BR>
<LABEL ACCESSKEY=u>
Number: <INPUT TYPE=text NAME=number>
</LABEL>
<BR>
<LABEL ACCESSKEY=E>
Expiry: <INPUT TYPE=text NAME=expiry>
</LABEL>
</P>
</FIELDSET>
<P>
<INPUT TYPE=submit VALUE="Submit order">
<INPUT TYPE=reset VALUE="Clear order form">
</P>
</FORM>
Elementul LEGEND
Sintaxa:
<LEGEND> ... </LEGEND>
Atribute posibile:
 ALIGN=[ top | bottom | left | right ] (alinierea relativă la FIELDSET)
 atribute comune
Conţine:
 elemente inline
Conţinut în:
 FIELDSET
Descriere:
Acest element defineşte un titlu (explicaţie) pentru un grup de controale definite cu
FIELDSET. Elementul LEGEND trebuie să apară la începutul lui FIELDSET, înainte
de orice alt element. Chair dacă nu este suportat de toate browserele, poate fi utilizat în
siguranţă dacă este urmat imediat de un element de tip bloc. Pentru astfel de browsere
se pot folosi elemente ca STRONG, B sau BIG pentru a sugera faptul că acela este
titlul unui grup de controale.
Atributul ACCESSKEY se foloseşte la fel ca la INPUT, iar atributul (depăşit) ALIGN
sugerează poziţia relativă faţă de FIELDSET. Valorile posibile sînt: top, bottom, left,
right. Chair dacă e depăşit, este interesant de remarcat că în tehnica style-sheet-urilor
nu există alternativă!
<FIELDSET>
<LEGEND ACCESSKEY=C>Credit Card Information</LEGEND>
<P>
<LABEL ACCESSKEY=V>
<INPUT TYPE=radio NAME=card VALUE=visa> Visa
</LABEL>
<LABEL ACCESSKEY=M>
<INPUT TYPE=radio NAME=card VALUE=mc> MasterCard
</LABEL>
<BR>
<LABEL ACCESSKEY=N>
Number: <INPUT TYPE=text NAME=number>
</LABEL>
<BR>
<LABEL ACCESSKEY=E>
Expiry: <INPUT TYPE=text NAME=expiry>
</LABEL>
</P>
</FIELDSET>
6. Procesarea datelor din formulare

1. Metode de transmitere a formularului
Valorile completate în cadrul unui formular pot fi transmise înspre server pe mai multe
căi, metodele de bază fiind GET sau POST, dar pot fi utilizate şi posibilităţile oferite de
elementul ISINDEX. Fiecare metodă tratează intrările într-un mod aparte, avînd în
comun doar variabilele de mediu.
<ISINDEX> este un tag vid de un tip mai special. Includerea lui în header s-a făcut
iniţial (înainte de existenţa formularelor) pentru ca acesta să activeze un cîmp text în bara
de butoane sau în fereastra navigatorului. Vizitatorul putea tasta în acel cîmp şirul de
caractere dorit şi, apăsînd RETURN, trimitea datele serverului. Este o modalitate de a
implementa interacţiunea înainte de existenţa formularelor.
Metoda se alege în funcţie de aplicaţie. GET poate fi folosit în cazul cînd informaţia
transmisă este scurtă (de exemplu un cuvînt cheie şi tipul acestuia). Dacă formularul
lucrează cu mai multe cîmpuri de date, variabilele de mediu pot fi trunchiate, dar acest
defect se poate elimina prin apelul metodei POST.
Metoda folosită de protocolul HTTP pentru a trimite datele la server este stabilită de
atributul METHOD al elementului FORM, atribut ce poate lua două valori:
 get: Cu metoda "get" a protocolului HTTP, setul de date al formularului este
adăugat la adresa URI specificată de atributul ACTION, folosind semnul
întrebării ("?") ca separator. Noua adresă URI este trimisă astfel la agentul
(programul) care o procesează.
 post: Cu metoda "post" a protocolului HTTP, setul de date al formularului este
inclus în corpul formularului şi transmis agentului (programului) care-l
procesează.
Metoda "get" trebuie folosită cînd formularul este idempotent, adică nu cauzează alte
efecte laterale. Multe căutări în bazele de date nu au efecte laterale (secundare, ascunse)
vizibile şi reprezintă aplicaţii ideale pentru această metodă. În plus datele din setul de
date al formularului trebuie să fie obligatoriu, în exclusivitate, caractere ASCII.
Dacă, însă, serviciul asociat cu procesarea formularului are efecte laterale (side-effects),
ca de exemplu cazul în care formularul modifică baza de date sau reprezintă o subscriere
la un serviciu, se va folosi metoda "post". Aceasta oferă şi posibilitatea de a trimite date
din întreg setul de caractere (Unicode), prin specificarea atributului
enctype="multipart/form-data".
2. Controalele de succes (successful controls) ale unui formular

Un control de succes este acel control al unui formular „valid“ pentru a fi trimis (la
Submit). Fiecare astfel de control are numele său ascociat, într-o pereche, cu valoarea sa
curentă. Această pereche face parte din setul de date al formularului. Un control de
succes trebuie să fie definit într-un element FORM şi trebuie să aibă un nume. Nu toate
controalele unui formular sînt de succes. Astfel:
 Controalele care sînt dezactivate/inactive (disable) nu pot fi de succes
 Dacă un formular conţine mai mult de un buton Submit, numai acela care este
activat (apăsat) este de succes
 Toate căsuţele de marcare (checkbox-urile) setate la on (activate), şi numai ele, sînt
de succes
 Dintre butoanele radio care au aceeaşi valoare a atributului NAME numai cel care
activ/setat (pe "on") poate fi de succes.
 Pentru meniuri (liste de selecţie), numele controlului este oferit de un element
SELECT iar valorile sînt date de elementele OPTION. Numai opţiunile selectate
sînt de succes.
 Valoarea curentă a unui element de selectare a unui fişier este o listă de unul sau
mai multe nume. La transmiterea unui formular, conţinutul fiecărui fişier este
transmis cu restul datelor din formular. Conţinutul fişierului este „împachetat“
conform tipului conţinutului formularului (content-type).
 Valoarea curentă a unui obiect este determinată de implementarea specifică a acelui
obiect.
Dacă un control nu are o valoare curentă cînd formularul este transmis, browserul nu este
obligat să îl trateze ca pe un control de succes. În plus, nu vor fi considerate controale de
succes nici:
 Butoanele Reset
 Elementele OBJECT care au atributul DECLARE setat.
Controalele ascunse (hidden) care chiar dacă nu sînt afişate de browsere (nu sînt vizibile)
pot fi controale de succes.
Exemplu:
<P>
<INPUT type="password" style="display:none"
name="invisible-password" value="mypassword">
</P>
</FORM>
va crea un control de succes pentru elementul parolă, adică o pereche din numele
"invisible-password" şi valoarea "mypassword".
3. Procesarea datelor unui formular
Cînd utilizatorul trimite un formular (prin activarea butonului Submit), browserul său
realizează următorii paşi (următoarele acţiuni):
Pasul 1: Identificarea controalelor de succes (successful controls)
Pasul 2: Crearea unui set de date asociat formularului
Un set de date asociat unui formular este o secvenţă de perechi nume-control/valoare-
curentă construită din controale de succes.
Pasul 3: Codificarea setului de date
Setul de date creat la pasul anterior este codificat în conformitate cu tipul conţinutului
(content type) specificat de atributul ENCTYPE al elementului FORM.
Pasul 4: Transmiterea setului de date codificat
În final setul de date astfel codificat este trimis de browserul client agentului de
prelucrare (programului) desemnat de atributul ACTION, folosind protocolul specificat
de atributul METHOD.
Această specificare nu acoperă toate metodele valide de trimitere sau tipurile de conţinut
ce pot fi folosite cu formularele. Totuşi, browserele compatibile HTML 4.0 trebuie să
suporte convenţiile stabilite în următoarele cazuri:
 Dacă metoda este "get" şi acţiunea (atributul ACTION) este o adresă (URI) HTTP,
browserul ia valoarea atributului ACTION, adaugă un „?“ la ea, iar apoi adaugă
setul de date asociat cu formularul, stabilind tipul conţinutului (content type) la
"application/x-www-form-urlencoded". Browserul urmează apoi noua legătura
astfel creată. În acest scenariu, datele formularului sînt restricţionate la codurile
ASCII.
 Dacă metoda este "post" şi acţiunea (atributul ACTION) este o adresă (URI) HTTP,
browserul va genera o tranzacţie HTTP "post" folosind valoarea atributului
ACTION şi un mesaj creat în conformitate cu tipul conţinutului (content type)
specificat de atributul ENCTYPE.
Pentru orice altă valoare a atributelor ACTION şi METHOD comportamentul este
nespecificat. Browserele trebuie să afişeze răspunsul generat de tranzacţiile HTTP "get"
şi "post".
4. Tipurile posibile de conţinut (content-type) pentru un formular

Atributul ENCTYPE al elementului FORM specifică tipul conţinutului folosit pentru a
codifica setul de date asociat formularului în momentul transmiterii către server.
Browserele utilizatorilor trebuie să suporte tipurile indicate în cele ce urmeză.
Comprtamentul pentru alte tipuri este nespecificat:
application/x-www-form-urlencoded
Acesta este tipul implicit. Formularele transmise cu acest tip de conţinut trebuie
codificate după cum urmează:
1. Numele controalelor şi valorile sînt „escaped“. Caracterele blanc (spaţiu) sînt
înlocuite de `+', iar caracterele rezervate sînt şi ele „escaped“: caracterele non-
alphanumeric sînt înlocuite cu `%HH', (semnul procent şi două cifre
hexazecimale reprezentînd codul ASCII al caracterului). Sfîrşitul de linie (line
break) este reprezentat ca o pereche "CR LF" (adică `%0D%0A').
2. Perechile nume/valoare pentru controale apar în ordinea din document. Numele
este separat de valoare prin semnul egal `=' şi fiecare pereche este separată de
celelalte prin semnul`&'.
Tipul de conţinut "application/x-www-form-urlencoded" este ineficient pentr a trimite
cantităţi mari de date binare sau texte conţinînd caractere non-ASCII. Tipul de conţinut
"multipart/form-data" va fi folosit cînd se trimit formulare ce conţin fişiere, date non-
ASCII şi date binare.
multipart/form-data
Este tipul folosit cînd conţinutul setului de date este alcătuit din mai multe feluri de
(seturi de) date. Se supune regulilor de la toate şirurile de date (stream-urile) de tip
multipart MIME. Un stfel de mesaj conţine o serie de părţi, fiecare reprezentînd un
control de succes. Părţile sînt trimise agentului care le procesează în ordinea în care apar
în document. La fel ca la orice tip multipart MIME, fiecare parte are un header opţional
"Content-Type" care implicit are valoarea "text/plain" şi care este însoţit de un parametru
"charset". Fiecare parte trebuie să conţină:
1. Un header tip "Content-Disposition" a cărui valoare să fie "form-data".
2. Un atribut NAME care specifică numele controlului corespondent. Numele
controalelor care sînt codificate într-un set de caractere non-ASCII pot fi
modificate.
Astfel, de exemplu, pentru controlul cu numele "mycontrol" partea corespunzătoare lui va
fi specificată astfel: Content-Disposition: form-data; name="mycontrol"
Ca la toate transmiterile MIME, pentru a separa liniile de date se foloseşte "CR LF" (`
%0D%0A').
Dacă se trimite un fişier (conţinutul lui) acesta trebuie să fie identificat obligatoriu de
tipul conţinutului (de exemplu"application/octet-stream"). Dacă se trimit mai multe (ca
rezultat al unei sigure selecţii din formular), ele trebuie trimise ca "multipart/mixed",
înăuntrul lui "multipart/form-data". Fiecare fişier trebuie trimis cu un nume, specificat cu
parameterul "filename" al headerului 'Content-Disposition: form-data'. Dacă acesta nu
este codificat ASCII el trebuie fie aproximat fie codificat.
Exemplu:
Acest exemplu ilustrază codificarea "multipart/form-data". Presupunem că avem
următorul formular:
<FORM action=http://server.dom/cgi/handle
enctype="multipart/form-data"
method="post">
<P>
Numele Dvs? <INPUT type="text" name="submit-name"><BR>
Fisierele pe care le trimiteti? <INPUT type="file"
name="files"><BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</FORM>
Dacă utilizatorul introduce "Larry" în controlul de tip text şi selectează "file1.txt",
browserul lui va trebui să trimită următoarele date la server:
Content-Type: multipart/form-data; boundary=AaB03x
--AaB03x
Content-Disposition: form-data; name="submit-name"
Larry
--AaB03x
Content-Disposition: form-data; name="files";
filename="file1.txt"
Content-Type: text/plain
... contents of file1.txt ...

--AaB03x--
Dacă utilizatorul selectează al doilea fişier (o imagine), cu numele "file2.gif", browserul

va trebui să contruiască părţile componente ale tranzacţiei după cum urmează:
Content-Type: multipart/form-data; boundary=AaB03x
--AaB03x
Content-Disposition: form-data; name="submit-name"
Larry
--AaB03x
Content-Disposition: form-data; name="files"
Content-Type: multipart/mixed; boundary=BbC04y
--BbC04y
Content-Disposition: attachment; filename="file1.txt"
Content-Type: text/plain
... contents of file1.txt ...

--BbC04y
Content-Disposition: attachment; filename="file2.gif"
Content-Type: image/gif
Content-Transfer-Encoding: binary
...contents of file2.gif...
--BbC04y--
--AaB03x—
Capitolul 8.
Alte elemente ale limbajului HTML
8.1. Formule matematice
Una din cele mai ambiţioase caracteristici aduse de specificaţiile HTML 3.0 este
posibilitatea de a afişa formule matematice. Toate ecuaţiile matematice încep cu
<MATH> şi se termină cu </MATH> care suportă atributele ID (pentru ancore) şi
CLASS (pentru subclasele ecuaţiilor; de exemplu CHEM, pentru chimie). Între aceste
tag-uri se pot introduce mici ecuaţii matematice (pe un singur rînd). Posibilităţile de
aliniere sînt reduse şi recomandarea este să se utilizeze tabele pentru alinierea seturilor
multiple de ecuaţii. Entităţile matematice (caractere greceşti, simboluri, săgeţi, etc) le
găsiţi listate la adresa http://www.hpl.hp.co.uk/people/dsr/html/maths.html
şi sînt de forma:
α alfa
β beta
γ gama, etc.
Exponenţii sînt introduşi de forma <SUP>Exponent</SUP> (superscript), iar indicii
sînt introduşi prin <SUB>Indice</SUB> (subscript).
Exemple:
<math>
x<sup>2</sup>+y<sup>2</sup>=r<sup>2</sup>
</math>
<math>
∑<sup>&inf;</sup><sub>n=1</sub>
</math>
Simbolurile anumitor operaţii matematice sînt introduse de forma:
<tag operaţie>expresie afectată</ tag operaţie>
ca în cazul următor, pentru radical de ordinul doi:
<SQRT>x+y</SQRT>
Matricile (arrays) se introduc de o manieră asemănătoare cu tabelele, rînd cu rînd,
element cu element:
<math>
<array>
<row><item>a<item>b
<row><item>c<item>d
</array>
</math>
8.2. Documente dinamice
Felul în care este prezentat un document pe Web este, din punctul de vedere al
tehnoredactării, cu mult în urma publicaţiilor tradiţionale, pe hîrtie. Limbajul HTML se
dezvoltă anevoios. A început prin a imita stîngaci publicaţiile tipărite dar a continuat prin
a-şi identifica trăsături aparte, inaccesibile publicaţiilor clasice, de la cele care ţin de
tehnologia în sine şi pînă la cele care ţin de noile posibilităţi estetice. Documentele
dinamice reprezintă un pas înainte făcut de tehnologia Web în a-şi găsi propria identitate.
1. Client pull
<META HTTP-EQUIV="Refresh" CONTENT="interval_de_timp [;URL]">
Client-pull este capacitatea navigatorului (a clientului) de a cere singur documente noi
fără vreo intervenţie a utilizatorului. Browserele realizează acest lucru folosindu-se de
header-ul HTTP numit Refresh. Refresh este trimis de la server la navigator şi-i spune
navigatorului să ceară un nou document după un anumit număr de secunde (sau imediat).
Modalitatea de a lipi headere HTTP în documente HTML este dată de tag-ul <META>.
Exemplu: Inserarea în prima pagină HTML a codului:
<META HTTP-EQUIV="Refresh" CONTENT="1; URL=http://www.xxx.ro/pagina2.htm1">
va determina navigatorul care a cerut-o să aducă după o secundă şi cea de-a doua pagină.
O idee bună (pentru a nu bloca vreun vizitator al cărui navigator nu înţelege codul) este
introducerea în paginile cu client-pull a unor legături care să-i permită vizitatorului să
"evadeze" fără a închide complet aplicaţia.
2. Server push
O altă modalitate de a realiza documente dinamice este server push. Spre deosebire de
client pull, unde navigatorul iniţia conectări multiple cu serverul, în acest caz serverul
este cel care menţine legătura deschisă şi pompează date către client. Această facilitate
poate fi folosită fie pentru a trimite mai multe pagini ale documentului către client
(rezultat similar cu client pull) fie pentru a trimite clientului imagini care se înlocuiesc
succesiv în acelaşi loc dînd impresia de animaţie în documentul HTML.
Server push se bazează pe un tip de document MIME special, numit multipart/mixed.
Acest tip MIME este utilizat pentru mesaje de poştă care conţin diferite tipuri de fişiere
de date. Server push utilizează o variantă a tipului multipart MIME numit multipart/x-
mixed-replace în care un eşantion de date înlocuieşte integral un eşantion precedent.
Rezultatul este că server-push poate coda şi trimite mai multe tipuri de informaţie (GIF,
text HTML, text ASCII, etc) într-unul şi acelaşi document. Headerul dă instrucţiuni
navigatorului să înlocuiască fiecare segment de document cu noul element ce a fost
încărcat, trimis automat de către server.
Imaginile animate constituie una din cele mai utilizate aplicaţii ale acestei tehnologii;
animarea este realizată prin trimiterea unui document multipart ce constă într-o secvenţă
liniară de imagini GIF, fiecare dintre aceste imagini reprezentând un cadru de animaţie.
Browserul afişează aceste imagini serial, una după alta, producând astfel efectul de
mişcare.
Implementarea tehnologiei server-push este mai complicată decât cea de client-pull,
deoarece nu există un tag specific şi necesită aplicaţii CGI specifice.
8.3. Utilizarea mediilor externe: imagini, sunete şi video
Mediile externe sînt fişiere care nu pot fi afişate direct de navigatorul Web. Fişiere
externe pot fi orice fişiere pe care le puteţi crea (video MPEG, fişiere PostScript, fişiere
arhivate, etc). Legătura dintr-un document HTML la un astfel de fişier se face utilizînd
tag-ul <A>.
Cînd serverul trimite un anumit fişier navigatorului, el include informaţii despre tipul
fişierului utilizînd un mesaj special trimis odată cu fişierul. Dacă navigatorul nu poate
afişa acel tip de fişier, el încearcă să identifice (dintr-o listă cunoscută) o aplicaţie
ajutătoare (numită uneori helper sau viewer), căreia să-i treacă fişierul. Dacă tipul
fişierului este recunoscut şi aplicaţia ajutătoare corespunzătoare este definită, navigatorul
startează aplicaţia şi îi trece fişierul. Aplicaţia, la rîndul ei, va prelucra fişierul care
constituie mediul extern, care nu a putut fi interpretat de navigator.
Dacă navigatorul nu identifică tipul fişierului atunci îl salvează pe disc după ce în
prealabil (de regulă) cere permisiunea utilizatorului. Navigatorul utilizează aplicaţiile
ajutătoare şi în cazul în care fişierele sînt încărcate de pe discul local, cu deosebirea că în
aceste cazuri utilizează extensiile fişierelor pentru a identifica tipul de fişier. Acesta este
de fapt şi motivul pentru care trebuie utilizate extensiile .html sau .gif pentru
documentele HTML şi imagini GIF; în cazul că lucrăm local, navigatorul poate identifica
tipurile de fişiere.
Acest mod de lucru face ca dimensiunile navigatoarelor să rămînă în continuare mici. De
altfel, nu există nici un motiv puternic ca acestea să includă viewere pentru tipuri de
fişiere mai rar întîlnite. Fiecare navigator are o listă care mapează extensiile fişierelor şi
tipurile corespunzătoare de aplicaţii.
Specificarea mediilor externe în HTML se face cu ajutorul tag-ului <A> şi a atributului
HREF, ca în cazul legăturilor la toate celelalte documente HTML:
<A HREF="fişier extern">Textul care descrie fişierul pentru vizitator</A>
Se obişnuieşte inserarea unor informaţii suplimentare despre fişier: formatul fişierului,
dimensiune sau orice alte informaţii care l-ar ajuta pe cel ajuns aici să decidă dacă să ia
fişierul sau nu.
1. Imagini externe
Formatul cel mai des utilizat în documentele HTML este GIF, afişabil de majoritatea
navigatoarelor grafice. Utilizarea imaginilor externe conferă însă o mai mare flexibilitate.
Cîteva din cele mai întîlnite formate sînt următoarele:
Format Extensie Utilizări

GIF .gif Formatul afişabil direct de navigatoare. Este
recomandabilă utilizarea lui şi pentru imagini externe
JPEG .jpg, .jpeg Deşi unele navigatoare pot afişa acest format,
majoritatea nu o pot face. Este deci recomandabilă
utilizarea imaginilor cu acest format ca imagini externe
XBM .xbm Numele vine de la X Window System Bitmap. Nu sînt
afişabile direct de către navigator
PICT .PICT Format grafic obişnuit pentru sistemele Macintosh
Majoritatea programelor bune de grafică pot face conversii între aceste formate. În cazul
imaginilor externe mari, este recomandabilă inserarea în document (alături de celelalte
informaţii despre fişier) a aceleiaşi imagini (sau porţiune de imagine) mult reduse, pentru
a da o idee vizitatorului despre imaginea pe care eventual o va lua.
Exemplu:
<A HREF="imagine_mare.jpg"><IMG SRC="imagine_micşorată.gif">25K fişier JPEG</A>
2. Sunete
Utilizarea sunetelor se poate face fie pentru inserarea unor adnotaţii la fişierele text, fie
pentru mesaje de bunvenit sau clipuri audio.
Deocamdată singurul format sonor independent de platformă este AU (utilizat de Sun
Microsystem şi NeXT pentru standardul lor audio). AU permite mai multe tipuri de
rezoluţii şi eşantionare dar cel mai răspîndit este mono, cu rezoluţie verticală pe 8 biţi şi
eşantionare orizontală pe 8kHZ (micro-law), conceput iniţial pentru industria telefonică
din Statele Unite. Echivalentul său european este A-law, în mare parte asemănător.
Calitatea sunetului este destul de modestă şi din această cauză vor fi întîlnite destul de
frecvent formate specifice unei anumite platforme dar care oferă sunet de o mai bună
calitate. Cele mai răspîndite sînt:
Format Extensie Utilizări
AU .au Dezvoltat iniţial pentru eşantionări pe 8 biţi, este în
prezent perfecţionat de o versiune pe 11 biţi. Fişierele
AU tind să fie mici, compacte, uşor de luat şi utilizabile
pe orice tip de computer deşi nu este încă un standard
internaţional
WAV .wav Este formatul audio pentru Microsoft Windows.
Fişierele .wav tind să fie de calitate mai bună decît .au
dar si fişierele sînt mai voluminoase. Permit orice
rezoluţie verticală şi orice frecventă de eşantionare
MPEG .mp2, MPEG este mai mult cunoscut ca standard video decît
Audio .mp3 audio dar porţiunea de standard pentru audio permite
obţinerea unor sunete de foarte bună calitate şi
modalităţi de redare există pe mai multe platforme
AIFF/AIFC .aiff, .aif AIFF (Audio Interchange File Format) este formatul
fişierelor sonore dezvoltat de Apple pentru Macintosh
dar adoptat şi de alţii (SGI). Rezoluţie verticală stereo/
mono pe 8 sau 16 biţi. Nu este un fişier foarte comun
pentru Web. Formatul are aceleaşi limitări ca şi .wav în
ceea ce priveşte compatibilitatea multiplatformă. AIFC
este AIFF cu compresie incorporată
Recomandările generale privind inserarea fişierelor externe sînt valabile şi aici. Inserarea
unui fişier audio trebuie făcută astfel:
<A HREF="audio_clip.au">Puţină muzică (375K, format AU)</A>
(se adaugă informaţii privind ce anume conţine fişierul, formatul si cît este de mare).
3. Video
Clipurile video sînt o combinaţie de imagine şi sunet asemănătoare unui film. Ca şi în
cazul clipurilor audio, fişierele video nu sînt redate direct de navigatoare, acestea avînd
nevoie de aplicaţii ajutătoare. Cu alte cuvinte, fişierele trebuie luate mai întîi de către
vizitator şi apoi redate cu unul din viewer-ele capabile să redea un clip video.
Marea problemă cu fişierele video este dimensiunea acestora. Clipurile video sînt uriaşe,
de regulă de 1-2 MB. Motivul este că aceste fişiere sînt compuse din sute de cadre care
sînt afişate cu frecvenţă ridicată unele după altele. Un minut de video poate însemna în
jur de 1000 de cadre diferite. Luarea unui asemenea fişier de pe un server poate însemna
(la o viteză de transfer de 28,8 baud) aproximativ 20 de minute. Pentru cei care au
modemuri cu viteze de transfer mai mici probabil că timpul va fi mult mai mare astfel că
aceştia vor fi descurajaţi de fişierele video mari.
Pentru a vedea fişierele video pe un PC este nevoie nu numai de aproximativ 8 MB RAM
dar şi de o aplicaţie ajutătoare. Utilizatorii Mac sînt mai norocoşi deoarece au aceste
facilităţi încorporate în sistem.
Pentru fişierele video independente de platformă, standardul curent este MPEG dar
QuickTime (Apple) cîştigă în ultima vreme tot mai mult teren, pe măsură ce softurile de
redare devin disponibile pentru alte platforme. QuickTime are de asemenea avantajul că
poate include o pistă audio împreună cu cea video.
Cîteva din formatele mai răspîndite sînt:
Format Utilizări
MPEG Unul dintre cele mai vechi formate video, MPEG este similar formatului
JPEG pentru grafică, fiind optimizat pentru video. Formatul este răspîndit
deoarece clipurile video în acest format sînt de bună calitate. Din
nefericire, formatul este foarte pretenţios hard şi RAM
AVI AVI este formatul Microsoft Windows pentru video. Utilizatorii acestui
sistem pot utiliza cu uşurinţă fişiere video AVI deoarece formatul a fost
optimizat pentru Windows
QT QT este abrevierea de la QuickTime şi este formatul dezvoltat şi brevetat
de Apple Computer. Este multiplatformă, compact şi uşor de înregistrat
Exemplu:
<A HREF="bunvenit.QT">Un mesaj de bunvenit (QuickTime, 1,5 M)</A>
Capitolul 1. Internet şi World Wide Web
Capitolul 2. Descrierea generală a limbajului HTML
Capitolul 3. Structura documentelor HTML
Capitolul 4. Elemente de bază ale limbajului HTML
Capitolul 5. Utilizarea tabelelor în HTML
Capitolul 6. Utilizarea frame-urilor în HTML
Capitolul 7. Utilizarea formularelor (forms) în HTML
Capitolul 8. Alte elemente ale limbajului HTML

Limbaj HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Limbaj HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Cuprins

CAPITOLUL 1. INTERNET ŞI WORLD WIDE WEB 9

1.2. RESURSELE WORLD WIDE WEB 11

1.3. ADRESAREA UNEI RESURSE ÎN WEB 11

1.4. ELEMENTELE CONEXIUNILOR ÎN SPAŢIUL WWW 12

1.5. PROTOCOLUL HTTP 13

CAPITOLUL 2. DESCRIERE GENERALĂ A HTML 19

2.1. INTRODUCERE, ISTORIE, VERSIUNI 19

2.3. STRUCTURA ŞI LOGICA LIMBAJULUI HTML 27

CAPITOLUL 3. STRUCTURA DOCUMENTELOR HTML 31

3.1. STRUCTURA GENERALĂ A UNUI DOCUMENT HTML 31

3.2. STRUCTURA HEADER-ULUI UNUI DOCUMENT

3.3. STRUCTURA CORPULUI UNUI DOCUMENT HTML

CAPITOLUL 4. ELEMENTE DE BAZĂ HTML 57

4.1. ELEMENTE UTILIZATE LA FORMATAREA TEXTULUI

4.2. DEFINIREA ŞI UTILIZAREA LISTELOR 70

4.3. TAG-URI (ELEMENTE) PENTRU LEGĂTURI

4.4. IMAGINI ÎN DOCUMENTELE HTML 83

4.5. IMAGINI SENZITIVE 90

4.6. ALTE ELEMENTE LEGATE DE TEXT ŞI IMAGINI 98

CAPITOLUL 5. UTILIZAREA TABELELOR ÎN HTML 101

CAPITOLUL 6. UTILIZAREA FRAME-URILOR ÎN HTML

CAPITOLUL 7. UTILIZAREA FORMULALELOR (FORMS)

CAPITOLUL 8. ALTE ELEMENTE ALE LIMBAJULUI

8.1. FORMULE MATEMATICE 181

8.2. DOCUMENTE DINAMICE 182

[1] WWW Consortium, HTML 4.0 Specification,

[2] Strebe, Mathew, Perkins, Charles, MCSE Internet

[3] Tittel, Ed, Gaither, Mark, Hassinger, Sebastian,

[4] Honeycutt, Jerry, Special Edition Using HTML 4.0,

[5] Mat Publishing Limited, Developer Network Journal,

[6] Miller Freeman, Inc., Microsoft Corp., Microsoft

Aplicaţiile distribuite sînt de o bună perioadă de timp o prezenţă uzuală în peisajul IT

Craiova, martie 1999 Autorul

Elementele fundamentale ale WWW sînt prezentate în figura următoare:

1.3. Adresarea unei resurse în Web

1.4. Elementele conexiunilor în spaţiul WWW

1.5. Protocolul HTTP

1.5.1. Introducere generală

1.5.2. Mesajele protocolului HHTP

1.5.3. Metodele protocolului HHTP

Caracteristicile limbajului HTML.

Stadiile prin care trece un standard elaborat de W3C sînt:

Ce trebuie să facă un autor de pagini HTML?

Revoluţia HTML 4.0.

Validarea documentelor HTML.

2.2. Reprezentarea documentelor HTML

2.3. Structura şi logica limbajului HTML

Tagurile pot fi de două feluri:

II. Caractere entităţi

Utilizarea entităţilor în diverse codificări (ISO Latin-1, ISO Latin-2, ş.a)

3.1. Structura generală a unui document HTML

Documentele HTML (4.0) au structura generală:

Adresele ce apar în fiecare declaraţie permit agenţilor utilizatori să acceseze (şi să

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"

... document body...

Se remarcă utilizarea elementui NOFRAMES pentru cazul în care frame-urile nu pot fi

3.3. Structura corpului unui document HTML (elementul BODY)

I. Elementele de tip bloc (block level elements)

3. Elementele ce definesc (sau sînt strîns legate de) liste

II. Elementele de tip inline (inline level elements)

4. Elemente de definire a controalelor din interiorul unui formular

III. Elementele de tip nedefinit (pot fi atît inline cît şi block)

1. Terminarea rîndului (elementul BR)