Curs HTML 4.0

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
3
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
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
5
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
6
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
7
8
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.
9
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ă.
10
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_document
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
11
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
12
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
13
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:
14
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
15
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ă.
16
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.
17
18
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:
1. 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.
2. 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.
3. Limbajul HTML este guvernat de o descriere formală. HTML are o descriere a tipului
19
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).
4. 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
20
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
21
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)
22
• 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
23
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.
24
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.
25
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.
26
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>
27
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.
28
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)
29
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ă
30
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.
31
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"
• 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
32
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:
33
• 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
34
• 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.
35
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.

<HTML>
<HEAD>
<TITLE>Exemplu depasit</TITLE>
</HEAD>
<BODY bgcolor="white" text="black"
link="red" alink="fuchsia" vlink="maroon">
... document body...
</BODY>
</HTML>
36
2. Prin folosirea style-sheet-urilor (stilurilor), acelaşi efect se poate obţine şi astfel:
<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.
<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
37
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>
38
</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>
39
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:
40
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:
41
<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:
42
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">
43
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.
44
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ă
45
• 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)
46
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
47
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>").
48
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)
49
• 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.
50
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>
51
<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.
52
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 (♦)
53
• 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
54
• 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
55
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)
56
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:
57
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.
58
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
59
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, FIELDSET,
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:
60
• 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>
61
D. Textul centrat (elementul CENTER)
Sintaxa:
<CENTER>Text Centrat</CENTER>
Atribute posibile:
• atribute comune
Conţine:
Conţinut în:
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
62
Conţine:
• elemente inline cu excepţia: IMG, OBJECT, APPLET, BIG, SMALL, SUB, SUP,
FONT, BASEFONT
Conţinut în:
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:
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>.
63
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:
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."
64
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."
65
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
66
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
67
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>
68
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.
69
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:
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, ...)
70
• 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:
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)
71
• 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:
72
• 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:
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
73
î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.
74
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!
75
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, ...)
76
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".
77
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
78
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ă
79
• _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ă).
80
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. html" doc.html se găseşte într-un director aflat cu două 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:
81
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.
82
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.
83
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
84
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">
85
Ş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
86
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">
| |
87
*********
++++++++++++++++++
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>
88
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.
89
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.
90
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:
91
• 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.
92
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>
93
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
94
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
95
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
96
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“
97
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, FIELDSET,
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.
98
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.
99
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.
100
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.
101
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ă.
102
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:
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
103
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.
104
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
105
<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.
106
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.
107
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>
108
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:
109
<TFOOT>...</TFOOT>
Atribute posibile:
• 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>
110
</TABLE>
C. Elementul TBODY
Sintaxa:
<TBODY>...</TBODY>
Atribute posibile:
• 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])
111
• 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:
• 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.
112
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
113
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)
• 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.
114
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)
• 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.
115
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>
116
Î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:
117
<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)
• 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.
118
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.
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-
119
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)
• 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:

reference for 8-bit Latin-1 characters, as well as the
rendering of each in your browser.">
<COLGROUP CLASS="character-description">
120
<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>
121
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
122
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>
123
Î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.
124
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
125
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>
126
<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.
127
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.
128
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:
129
130
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:
<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 | |
| | |
| | |
+ --------------------------------------+
131
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%">
132
</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
133
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.
134
Î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ă.
135
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)
136
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:
<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.
137
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:
<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>
138
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.
139
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">
140
<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
141
<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:
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:
142
<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.
143
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>
144
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
145
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.
146
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).
147
• 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:
• APPLET, BLOCKQUOTE, BODY, CENTER, DD, DEL, DIV, FIELDSET, 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,
148
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
149
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
150
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.
151
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>
152
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:
153
Î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
154
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>
155
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
156
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
157
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
158
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;
159
• 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>
160
• <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>
161
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
162
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ă:
163
• 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
</OPTGROUP>
<OPTGROUP label="PortMaster 2">
</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>
164
</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
165
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:
166
<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>
</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>
167
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">
168
<OPTION LABEL="4.x or higher">Microsoft Internet Explorer
4.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.
169
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">
170
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>
171
<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"
172
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:
• APPLET, BLOCKQUOTE, BODY, CENTER, DD, DEL, DIV, FIELDSET, 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
173
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>
174
<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
175
</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".
176
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):
177
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`&'.
178
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ă:
179
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—
180
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>
181
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.
182
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)
183
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
184
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>
185
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
186

Curs HTML 4.0

Î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

Curs HTML 4.0

Î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 (ELEMENTUL HEAD) 40

3.3. STRUCTURA CORPULUI UNUI DOCUMENT HTML (ELEMENTUL BODY) 52

CAPITOLUL 4. ELEMENTE DE BAZĂ HTML 57

4.1. ELEMENTE UTILIZATE LA FORMATAREA TEXTULUI UNUI DOCUMENT 57

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

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

[1] WWW Consortium, HTML 4.0 Specification,

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

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

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

[5] Mat Publishing Limited, Developer Network Journal,

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

Craiova, martie 1999 Autorul

INTERNET şi World Wide Web

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

Descriere generală a limbajului HTML

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.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)

Structura documentelor HTML

3.1. Structura generală a unui document HTML

Documentele HTML (4.0) au structura generală:

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

... document body...

3.3. Structura corpului unui document HTML (elementul BODY)

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

II. Elementele de tip inline (inline level elements)

3. Elemente de marcare a proprietăţilor speciale ale unei porţiuni de document

4. Elemente de definire a controalelor din interiorul unui formular

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

Elemente de bază ale documentelor: Texte, Legături, Imagini