Cuprins

Cuprins 3

Bibliografie 6

Cuvînt înainte 7

Capitolul 1. INTERNET şi World Wide Web 9

1.1. Introducere 9

Ce este Internetul? 9

Ce este World Wide Web (WWW, W3) 10

1.2. Resursele World Wide Web 11

1.3. Adresarea unei resurse în Web 11

1.4. Elementele conexiunilor în spaţiul WWW 12

1.5. Protocolul HTTP 13

1.5.1. Introducere generală 13

1.5.2. Mesajele protocolului HHTP 14

1.5.3. Metodele protocolului HHTP 15

Capitolul 2. Descriere generală a HTML 19

2.1. Introducere, istorie, versiuni 19

Ce este HTML? 19

Caracteristicile limbajului HTML. 19

De ce HTML? 20

Istoria HTML. 21

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

Revoluţia HTML 4.0. 24

Validarea documentelor HTML. 25

2.2. Reprezentarea documentelor HTML 26

2.3. Structura şi logica limbajului HTML 27

I. Tag-urile HTML 27

II. Caractere entităţi 28

Capitolul 3. Structura documentelor HTML 31

3.1. Structura generală a unui document HTML 31

1. Elementul DOCTYPE 32

2. Elementul HTML 33

3. Elementul HEAD 33

4. Elementul BODY 34

5. Elementul FRAMESET 37

3.2. Structura header-ului unui document (elementul HEAD) 40

1. Elementul TITLE 40

2. Elementul BASE 41

3. Elementul STYLE 41

4. Elementul LINK 43

5. Elementul META 45

6. Elementul SCRIPT 46

7. Elementul ISINDEX 49

8. Elementul OBJECT 49

3.3. Structura corpului unui document HTML (elementul BODY) 52

I. Elementele de tip bloc (block level elements) 53

II. Elementele de tip inline (inline level elements) 54

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

Capitolul 4. Elemente de bază HTML 57

4.1. Elemente utilizate la formatarea textului unui document 57

1. Terminarea rîndului (elementul BR) 57

2. Titluri (elementul Hi) 58

3. Containere de text (stiluri ale unui bloc) 59

A. Paragrafe (elementul P) 59

B. Containerul logic de tip bloc (elementul DIV) 60

C. Containerul logic de tip text/inline (elementul SPAN) 60

D. Textul centrat (elementul CENTER) 62

E. Textul preformatat (elementul PRE) 62

F. Adrese (elementul ADDRESS) 63

G. Citate lungi (elementul BLOCKQUOTE) 64

H. Citate scurte (elementul Q) 65

4. Stilurile caracterelor 66

5. Elemente de modificare a fontului caracterelor 67

A. Dimensiunea fontului 67

B. Stabilirea fontului de bază 69

4.2. Definirea şi utilizarea listelor 70

4.3. Tag-uri (elemente) pentru legături hypertext 77

4.4. Imagini în documentele HTML 83

4.5. Imagini senzitive 90

4.6. Alte elemente legate de text şi imagini 98

1. Comentariile în documentele HTML 98

2. Linii orizontale de demarcare (elementul HR) 98

3. Fundalul unui document 99

4. Culoarea textului şi a legăturilor 100

Capitolul 5. Utilizarea tabelelor în HTML 101

Capitolul 6. Utilizarea frame-urilor în HTML 131

Capitolul 7. Utilizarea formulalelor (forms) 145

Capitolul 8. Alte elemente ale limbajului HTML 181

8.1. Formule matematice 181

8.2. Documente dinamice 182

8.3. Utilizarea mediilor externe: imagini, sunete şi video 183

Bibliografie

[1] WWW Consortium, HTML 4.0 Specification,

www.w3.org/TR/REC-html40

[2] Strebe, Mathew, Perkins, Charles, MCSE Internet Information server - Study Guide,

SYBEX Corporation, 1998

[3] Tittel, Ed, Gaither, Mark, Hassinger, Sebastian, Erwin, Mike, Foundations of World Wide Programming,

IDG Books Worldwide Inc., 1997

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

Maximillan Computer Publishing, 1998

[5] Mat Publishing Limited, Developer Network Journal,

1998, 1999 collection

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

1998, 1999 collection

Cuvînt înainte

Aplicaţiile distribuite sînt de o bună perioadă de timp o prezenţă uzuală în peisajul IT chiar şi din ţara noastră. Ultimii ani au însemnat, de asemenea, şi paşi semnificativi şi concreţi în impunerea Inter-netului în întreaga economie şi societate. Odată cu acesta, aplicaţiile distribuite – care au ca suport Internetul şi tehnologiile dezvoltate pentru acesta şi împreună cu el, au trecut de la stadiul de noutăţi tehnologice la cel de prezenţă reală în comunitatea IT.

Procesul de educaţie a tinerilor specialişti IT simte nevoia plonjării în această realitate. Tehnolo-gia Java, DHTML, tehnologia de scripting (Java Script, VB Script), bazele de date distribuite în Inter-net şi accesul la ele, interfeţele utilizator flexibile, bazate pe browsere capabile de performanţe din ce mai apropiate de necesităţi, tehnologia componentelor, toate acestea sînt necesităţi stringente ale tehno-logiei IT şi, implicit, ale procesului educaţional din acest domeniu.

În acest spirit am încercat să aduc în faţa studenţilor problematica fascinantă a lumii distribuite, dar cooperante, dezvoltată de aceste tehnologii. Suportul acestei fascinaţii stă, fară îndoială, în geniul şi viziunea celor care au făcut din Internet o comunitate. Fundamentul acestei realităţi este, nu încape îndoială, limbajul HTML, cel care a făcut posibilă explozia de comunicare actuală, cel care a adus aproape oameni, altfel atît de diferiţi: de la cercetători la studenţi, de la oameni de ştiinţă la copiii care abia descoperă computerul, dar care descoperă odată cu el Internetul.

Aceasta este prima parte a unui suport de curs la disciplina „Dezvoltarea aplicaţiilor distribuite în Internet“, introdusă în acest an, la anul IV, în semestrul al doilea, la secţia de calculatoare a Facultă-ţii de Automatică, Calculatoare şi Electronică din Craiova. Studenţilor acestei facultăţi li se adresează, în primul rînd. Dimensiunea lucrării a fost determinată de dorinţa de a pune la dispoziţia celor care au preocupări în acest domeniu a unui material cît mai complet în limba română referitor la limbajul HTML. Versiunea descrisă aici este HTML 4.0 şi este impusă de realitatea Web-ului începutului de an 1999.

Structurat în 8 capitole, prezentul suport de curs, prezintă gradual şi cît mai compet cu putinţă limbajul HTML. Capitolul 1 face o scurtă prezentare a noţiunilor esenţiale legate de Internet şi Web, iar Capitolul 2 o descriere generală şi o scurtă incursiune în istoria limbajului HTML. Este partea intro-ductivă care este urmată apoi de capitolele ce descriu structura unui document scris în HTML – Capi-tolul 3) şi elementele de bază utilizate în documentele HTML – texte, legături, imagini (Capitolul 4). Capitolele 5, 6 şi 7 detaliază modalităţile de utilizare a tabelelor, frame-urilor şi a formularelor inter-active, adică partea mai avansată a limbajului HTML. Capitolul 8 prezintă, pe scurt, elemente mai deosebite ale limbajului.

Reprezentînd doar fundamentul, prezentul suport de curs nu face decît să incite şi să promită adevăratele performanţe ale tehnologiei Internetului. Va urma partea a doua a acestui suport de curs care va acoperi (cel puţin) o parte dintre ele: Cascading Style Sheet, Dynamic HTML, tehnologiile de scripting şi, bineînţeles, limbajul Java .

Acest suport reprezintă încununarea unei perioade de mare efort, dar extrem de rodnice, perioadă petrecută de autor în Germania, la Fachhochschule Regensburg, iar apariţia lui, în această formă, se sprijină pe sprijinul material oferit de Uniunea Europeană prin programele Tempus.

Un gînd plin de recunoştiinţă, profesorului Oleg Cernian, coordonatorul Programelor Tempus din Facultatea de Automatică, Calculatoare şi Electronică, al cărui merit în dezvoltarea Catedrei de Calculatoare devine, odată cu trecerea timpului, tot mai clar şi mai evident.

Craiova, martie 1999 Autorul

Capitolul 1.

INTERNET şi World Wide Web

1.1. Introducere

Ce este Internetul?

Internetul a fost descris ca „o colecţie largă de reţele“ sau ca o „reţea de reţele“. Deşi ambele definiţii sînt corecte, nici una nu surprinde Internetul în totalitatea sa. Pe lîngă instrumentul care este această imensă conexiune, Internetul înseamnă şi mulţimea comunităţilor celor ce îl folosesc, fiecare în scopuri diferite:

· comunitatea academică utilizează Internetul ca pe cel mai mare, complet şi totodată complex instrument de învăţare (educaţional);

· comunitatea ştiinţifică utilizează Internetul ca pe un instrument de cercetare şi colaborare;

· comunitatea economică utilizează Internetul ca pe un mediu de derulare al afacerilor.

Internetul nu este o organizaţie monolitică, avînd o conducere şi un grup de control unice; Internetul este o societate de reţele de calculatoare interconectate, independente dar care (din anumite motive) se supun unor protocoale globale.

Ce este World Wide Web (WWW, W3)

World Wide Web (WWW sau W3) este o reţea de resurse informaţionale de o extraordinar de mare diversitate în ceea ce priveşte conţinutul. Este un sistem interactiv hipermedia (adică un sistem ce conţine şi suportă patru categorii importante de tipuri de informaţie: texte, imagini, sunete/audio şi imagini video în mişcare) construit peste Internet.

Pentru a face aceste resurse disponibile (utilizabile) unei audienţe cît mai largi, Web-ul se sprijină pe 3 mecanisme fundamentale:

1. O schemă uniformă de denumire (de stabilire a numelor, naming scheme) pentru a localiza resursele în Web (de exemplu URI).

2. Protocoale pentru accesarea resurselor astfel denumite în Web (de exemplu HTTP)

3. Hypertextul pentru navigarea comodă de la o resursă la alta (între resurse).

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

World Wide Web este cel mai vizibil instrument Internet, transformîndu-l (prin capacităţile sale de a prezenta informaţiile) în cel mai important instrument al zilelor noastre şi într-o sursă de informaţii fără egal. Web-ul poate fi utilizat pentru căutarea de informaţii despre produse, transferul de software şi versiuni noi ale acestuia, păstrarea unor colecţii de informaţii de orice fel de tip (de exemplu de ziare), în general pentru aflarea unor informaţii despre orice tip de informaţie imaginabilă.

1.2. Resursele World Wide Web

Unul din conceptele de bază - preluat şi acceptat şi în alte protocoale utilizate în Internet - este cel de resursă. O resursă poate fi un program, un calculator, un document, o bază de date, un serviciu - nu prea are importanţă, atît timp cît poate fi referită în mod corect şi fără echivoc. Pentru referirea la o resursă din Internet, se foloseşte termenul generic URI (Universal Resource Identifier) care poate specifica fie o locaţie, caz în care se vorbeşte de un URL (Universal Resource Locator) fie un nume, caz în care se vorbeşte de un URN (Universal Resource Name).

Unei resurse i se aplică o metodă - iar pentru a specifica ce metodă se doreşte, ce date sau parametrii suplimentari o completează pe aceasta, se face uz de mesaje.

Paradigma pe care se bazează protocolul este cea de cerere/răspuns. Cererea este emisă de un client; acesta stabileşte o conexiune cu un server şi îi trimite acestuia o cerere, sub forma unei metode. Metoda se referă la o anumită resursă, identificată via URI; mai trebuie adăugate versiunea de protocol utilizată şi un mesaj de tip MIME care să conţină parametrii metodei, informaţii relative la client şi un eventual “conţinut” suplimentar. Serverul vă răspunde cu o linie de stare, incluzînd versiunea de protocol utilizată şi un cod de succes sau eroare, la care se adaugă un mesaj de tip MIME conţinînd informaţii relative la server şi eventual un “conţinut” suplimentar.

Acest posibil conţinut suplimentar este de regulă o entitate - o reprezentare particulară a unor date necesare în cerere sau în răspuns, şi este structurat într-un antet (header) conţinînd metainformaţii relative la date (o descriere a felului în care trebuie citite datele) şi datele propriu-zise, care formează corpul entităţii.

1.3. Adresarea unei resurse în Web

Adresarea unei resurse via http se face prin construcţii (şiruri de caractere) de forma

http://adresa_host_in_retea[:port]/cale/subcale_l/.../subcale_n/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.subdomeniu_l.subdomeniu₂..subdomeniu_n.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/subcale_l/.../subcale_n/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/subcale_l/.../subcale_n/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/subcale_l/.../subcale_n/nume_program;param_l;param₂;...;param_n?cerere

Exemplu:

Următoarea referinţă

http://guaraldi.cs.colostate.edu:2000/cgi-bin/savvyfrontend?KW=cuvînt_cheie & classic=on & tl=x & Boolean=AND & Hits=10 & Mode=MakePlan & df=normal & AutoStep=on.

se va citi http://guaraldi.cs.colostate.edu:2000 ne spune că se va face o conexiune via http cu serverul guaraldi.cs.colostate.edu, utilizînd portul 2000 al acestuia. Pe acest server se va adresa programul savvy-frontend din directorul cgi-bin/, căruia nu i se pasează alţi parametri decît cei incluşi în felul în care a fost formulată cererea: KW=cuvînt_cheie & classic=on & tl=x & Boolean=AND & Hits=10 & Mode=MakePlan & df=normal &A utoStep=on.

Specificarea unei resurse nu trebuie să fie totdeauna absolută, ca în exemplul dat. Dacă ne-am plasat deja într-un subdirector oarecare al unui server, se pot folosi adrese relative, care omit calea pînă în acel director: “subcale_l/subcale₂/.../subcale_m/nume_resursa” sau chiar pur şi simplu “nume resursă”, dacă resursa se află în acelaşi director.

În HTML adresarea URI se foloseşte pentru:

· crearea unei legături spre un alt document sau spre o altă resursă (a se vedea elementele A şi LINK)

· crearea unei legături spre un stil de pagină (style-sheet) extern sau spre un script aflat într-un fişier sursă extern (a se vedea elementele LINK şi SCRIPT)

· Includerea într-o pagină a unei imagini, a unui obiect sau a unui applet (a se vedea elementele IMG, OBJECT, APPLET şi INPUT).

· crearea unei imagini senzitive (a se vedea elementele MAP şi AREA).

· transmiterea unui formular interactiv (a se vedea elementul FORM).

· crearea unui document cu frame-uri (a se vedea elementele FRAME şi IFRAME).

· citarea unei referinţe externe (a se vedea elementele Q, BLOCKQUOTE, INS şi DEL).

· referirea unor conveţii de metadate care descriu un document (a se vedea elementul HEAD).

1.4. Elementele conexiunilor în spaţiul WWW

În cazul cel mai simplu, legătura dintre client şi server se realizează prin intermediul unei singure conexiuni. De foarte multe ori însă, este posibil să existe mai mulţi intermediari în conexiune. Aceştia pot fi de trei feluri: proxy, gateway sau tunnel.

Un proxy este un intermediar sofisticat: el primeşte cererile adresate unei resurse identificate printr-un URI, rescrie anumite părţi ale mesajului sau chiar tot mesajul, după care va transmite mesajul modificat către serverul adresat iniţial. Cu această ocazie el se şi substituie clientului iniţial: răspunsul îi va veni tot lui, iar proxy-ul va face probabil o rescriere a mesajului de răspuns către client. Dinspre server, nu se mai “vede” cine este clientul adevărat: toţi clienţii ce trec prin proxy sînt “ascunşi”, serverul primind numai cereri de la proxy. Acesta poate face în plus, într-un singur loc, o serie de verificări, relative la autentificare, securizare etc., care ar fi greu de implementat pe multe şi diverse maşini - toate calculatoarele client care trec prin acel proxy. Un proxy reprezintă înspre restul lumii un grup de clienţi, putîndu-i trata pe aceştia diferenţiat.

Un gateway este similar unui proxy, dar pe partea de server. Este un receptor, un fel de “cameră de primire” pusă în faţa unui server sau a unui grup de servere. Serverele “de după gateway nu se văd în restul lumii - ele sînt, toate, reprezentate de gateway. Cererile sosite la gateway sînt dirijate către serverele corespunzătoare cererii (sau către serverul cel mai liber, de exemplu, dacă faptul că există mai multe servere vine din dorinţa de a disponibiliza mai multă putere de calcul). De regulă are loc şi o conversie de protocol, înspre protocolul pe care îl cunoaşte sau îl foloseşte un anumit server, care nu mai este obligat în felul acesta să “cunoască” http.

Un tunel este un intermediar neinteligent: el transportă date pe care nu le înţelege sau interpretează în nici un fel între două conexiuni. Nu are loc nici un fel de schimbare a mesajelor, decît temporar, trecînd printr-o formă intermediară, între intrarea în şi ieşirea din tunel; conţinutul mesajelor nu se schimbă.

În cazul unei conexiuni mai complexe, o situaţie comună ar putea fi cea din figura următoare:

O cerere sau un răspuns care parcurge drumul din figură va traversa patru conexiuni. Acest lucru trebuie avut în vedere; există unele opţiuni relative la comunicaţie care se referă numai la primul vecin, dacă acesta nu se află în spatele unui tunel, altele care se referă numai la punctele finale ale conexiunii iar altele care se pot referi la toate conexiunile de pe traseu.

Iar dacă diagrama simplificată de mai sus este lineară, nu trebuie uitat faptul că fiecare participant poate fi angajat simultan în comunicaţii multiple. Proxy-ul din figură poate lucra deodată cu mulţi clienţi, care se adresează la mai multe servere şi care pot fi găsiţi prin conexiuni diferite.

Oricare dintre participanţii la conexiune cu excepţia tunelului poate face uz de un cache intern care să scurteze drumul unui ciclu cerere/răspuns. Exemplul anterior ilustrează şi drumul unei cereri care s-a mai făcut o dată de către client, dar se află încă în cache-ul proxy-ului:

Desigur, nu toate răspunsurile se pretează la a fi păstrate un timp în cache (pe ideea că “poate mai cere cineva acelaşi lucru”); pe de altă parte, cererile de la clienţi pot formula anumite opţiuni specifice relative la cache (“nu accept decît răspunsuri de la server direct”, “nu accept răspunsuri memorate mai mult de x minute”, etc.)

1.5. Protocolul HTTP

1.5.1. Introducere generală

Este un protocol la nivel aplicaţie destinat sistemelor de informare distribuite, “colaborative“, de genul hypermedia. Apărut ca protocol de bază pentru WWW încă din 1990, a cunoscut o serie de transformări, o versiune “finală” neexistînd nici în prezent. Versiunea cea mai folosită este încă 1.0, iar versiunea 1.1 - compatibilă “în jos” cu 1.0, dar aducînd îmbunătăţiri în special în direcţia folosirii mai eficiente a resurselor - este pe cale să se impună ca nou standard. De aceea, o parte din aspectele care urmează nu trebuie privite ca referinţe “bătute în cuie”, ci ca instantanee ale unei specificaţii pe cale să se nască, extrase dintr-o schiţă, un “draft” care poate se va mai schimba mult.

Numele este acronimul pentru HyperText Transfer Protocol, deşi la origine “hypertext” a fost definitoriu, practica curentă l-a dus destul de repede înspre “hypermedia” - documentele vehiculate cuprinzînd nu numai text, ci şi sunet, imagine sau informaţii structurate.

Aplicaţiile care folosesc protocolul - cei doi parteneri în discuţie, cele două capete ale unei conexiuni - sînt entităţi abstracte din punct de vedere al protocolului. Ele trebuie “doar” să poată comunica între ele ceea ce înseamnă, în principiu, posibilitatea de a primi sau formula cereri şi de a formula sau recepţiona răspunsuri, ca în celebrul exemplu al filozofilor ce vorbesc două limbi diferite, folosind pentru comunicare translatorii care trimit mesajele filozofilor (traduse) prin intermediul poştaşilor. Nici un nivel nu se preocupă de celălalt.

Cererile formulate în protocolul HTTP se referă la informaţii care se pot afla stocate în diverse baze de date, în diverse formate, pe diverse calculatoare. Cum anume se traduc în cereri “concrete” date diferite, este o problemă care depăşeşte protocolul: sarcina lui este doar să fixeze regulile care trebuie respectate de cele două aplicaţii participante la un moment dat în comunicare pentru ca să se poată înţelege fără nici un fel de risc de interpretare eronată a unei cereri sau a unui răspuns.

1.5.2. Mesajele protocolului HHTP

Atunci cînd se transferă „ceva“ utilizînd WWW se specifică o resursă: serverul căruia am vrea să-i adresăm cererea, ce conţine aceasta, cu ce protocol lucrăm. Pentru ca această cerere să ajungă la server trebuie să trimitem un mesaj care să conţină şi resursa specificată mai sus. Mesajul va conţine un şi r de caractere de forma:

GET specificare_resursă HTTP/1.1 CRLF

Forma generală a unui mesaj de cerere este conformă schemei de mai sus:

Metodă resursă versiune_protocol CRLF

Versiunea de protocol trebuie specificată deoarece nu toate serverele au implementat ultima versiune sau nu toţi clienţii o cunosc. Deci, pentru ca totuşi un server “deştept” să se poată înţelege şi cu un client mai puţin dotat, sau invers, şi fără a renunţa la posibilităţile introduse de versiunile (mereu mai) noi ale protocolului, trebuie să se realizeze mai întîi o negociere între server şi client, relativ la ce ştie fiecare şi abia apoi să se desfăşoare transferul propriu-zis de date.

1.5.3. Metodele protocolului HHTP

Metodele sînt de fapt operaţiile care pot fi aplicate obiectelor constituite de resursele din reţea, în accepţiunea protocolului HTTP. Metoda va trebui să fie totdeauna primul element dintr-o linie de cerere. Metodele prevăzute în versiunea 1.1 sînt următoarele: OPTIONS, GET, HEAO, POST, PUT, PATCH, COPY, MOVE, DELETE, LINK, UNLINK, TRACE, WRAPPED.

OPTIONS semnifică o cerere relativă la informaţiile ce definesc opţiunile de comunicare disponibile pe conexiunea către URI-ul specificat în cerere. Metoda permite determinarea opţiunilor şi/sau posibilităţilor unui server, fără să determine o acţiune din partea resursei adresate.

Şi metoda are nevoie de parametri, nu numai resursa, iar în HTTP termenul consacrat pentru parametrii metodelor este “header field” sau “antet de cîmp”. Definite în cadrul protocolului pentru fiecare metodă, antetele de cîmp pot avea valori care la rîndul lor sînt definite (dar nu limitate, extensiile fiind în principiu totdeauna posibile).

Exemplu:

O cerere de tipul

OPTIONS www.xxx.ro HTTP1/1 CRLF Accept: audio/*; q=0.2, audio/basic CRLF

reprezintă o cerere de definire a opţiunilor către serverul www.xxx.ro, în care clientul solicitant spune că preferă audio/basic, dar acceptă orice tip pentru date audio în cazul în care calitatea reprezentării nu scade sub 20%.

Exemplu:

Iar o cerere de genul

OPTIONS www.xxx.ro HTTP1/1 CRLF Accept: text/plain; q=0.5, text/html, text/x-dvi;

q=0.8; mxb=100000, text/x-c CRLF

specifică următoarele preferinţe relative la modul de reprezentare al textului: x-c sau html, dacă sînt disponibile; dacă nu, x-dvi, dar numai dacă textul nu depăşeşte 100000 de octeţi, sau plain altfel.

Virgula separă opţiuni posibile, punct-virgulă separă determinările sau preferinţele suplimentare relative la o anumită opţiune.

GET este una dintre cele mai importante metode şi singura care era disponibilă în prima versiune a protocolului, HTTP/0.9. GET este metoda care “aduce” ceva de la resursă; mai concret, dacă resursa este un proces care produce date (o căutare de pildă), răspunsul la metoda GET va fi o entitate care să cuprindă acele date. Răspunsul este unul singur: aceasta este o caracteristică de bază a protocolului. Chiar dacă volumul de date care trebuie incluse în răspuns este mare, nu se face o fracţionare în bucăţele mai mici, care să permită transferul mai uşor al răspunsului. Din punct de vedere al protocolului HTTP, discuţia este totdeauna simplă: o întrebare are un răspuns. Nu se pot pune mai multe întrebări pentru a obţine un singur răspuns, nu se pot formula mai multe răspunsuri la o întrebare.

Există totuşi două posibilităţi de a micşora volumul de date care să circule pe reţea în urma elaborării unui răspuns; o condiţionare de genul “dacă s-a schimbat ceva” şi posibilitatea de a prelua numai o parte din acesta. De exemplu, o cerere de genul:

GET www.xxx.ro/?cerere HTTP/1.1 If-Modified-Since: Wed, 24 Mar 1999 1:00:00 GMT

va aduce ceea ce s-a cerut numai dacă s-a modificat ceva după data şi ora specificate în parametrii metodei.

HEAD este o metodă similară cu GET, folosită în principiu pentru testarea validităţii şi/sau accesibilităţii unei resurse, sau pentru a afla dacă s-a schimbat ceva. Sintaxa este similară metodei GET; spre deosebire de GET însă, datele eventual produse de resursă în urma cererii nu sînt transmise; doar caracteristicile acestora, şi un cod de succes sau eroare. Ceva de genul “dacă ţi-aş cere să execuţi cererea mea, ce mi-ai răspunde?”.

POST este metoda prin care resursei specificate în cerere i se cere să îşi subordoneze datele incluse în entitatea care trebuie să însoţească cererea. Cu POST se poate adăuga un fişier unui anumit director, se poate trimite un mesaj prin poştă electronică, se poate adăuga un mesaj unui grup de ştiri, se pot adăuga date unei baze de date existente, etc. Metoda POST este generală; care sînt procesele pe care un anumit server le acceptă sau cunoaşte îi sînt strict specifice.

PUT este o metodă care cere serverului ceva mai mult decît POST: să stocheze/memoreze entitatea cuprinsă în cerere cu numele specificat în URI. Dacă resursa specificată există deja, entitatea nouă trebuie privită ca o versiune modificată care ar trebui să o înlocuiască pe cea existentă. Serverul, bineînţeles, va accepta sau nu această cerere, funcţie de drepturile de acces pe care i le-a acordat clientului, şi va răspunde cererii cu informaţii corespunzătoare (“s-a făcut”, “nu pot”, “nu ai voie să faci treaba asta” etc.). Pentru a evita situaţii care să ducă la încărcarea excesivă si nejustificată a reţelei - de exemplu, un client care vrea să “posteze” un text de 10 MB, fără să ţină seama de faptul că serverul nu mai are atît loc atît o cerere de tipul POST cît şi una de tipul PUT se desfăşoară în doi timpi: întîi, clientul trimite numai parametrii metodei, fără să trimită datele efective pe care le vrea postate. După care aşteaptă 5 secunde. În acest timp, dacă serverul răspunde, clientul ia în seamă şi analizează răspunsul serverului (iar dacă acesta este “nu mai am loc”, datele nu se mai transmit). Dacă nu soseşte nici un răspuns în timpul de aşteptare, se consideră implicit că serverul acceptă datele şi acestea sînt transmise de către client.

PATCH este o metodă similară lui PUT, dar nu conţine toate datele care să definească resursa, ci numai diferenţele faţă de versiunea existentă pe server. Cu toate informaţiile necesare care să îi permită serverului să reconstruiască o versiune la zi a resursei.

COPY, MOVE şi DELETE sînt metode prin care se cere ca resursa specificată în URI-ul din cerere să fie copiată în locaţiile specificate ca parametri pentru metodă, mutată acolo sau respectiv doar ştearsă.

LINK şi UNLINK sînt metode prin care resursa specificată în cerere este legată/dezlegată de alte resurse, stabilind una sau mai multe relaţii cu acestea din urmă, specificate ca parametrii pentru metodă. Ar putea fi de exemplu un index pentru o bază de date, un cuprins pentru un set de documente, etc.

TRACE este o metodă care îi permite clientului să vadă cum ajung cererile sale la server, pentru a verifica/diagnostica conexiunea, pentru a se verifica pe sine sau pentru a determina felul în care eventualele proxy-uri de pe parcurs au modificat cererea iniţială. Serverul, în răspuns la această cerere, va trimite în ecou cererile care îi vin de la client, fără să le mai trateze ca cereri “reale”.

WRAPPED este o metodă care “contrazice” principiul protocolului de a trimite totdeauna o singură cerere şi a aştepta un singur răspuns. Via WRAPPED, mai multe cereri, care în mod obişnuit ar fi succesive, sînt “împachetate” într-una singură. Iar o altă aplicare a metodei ţinteşte măsuri de securizare - o cerere poate fi cifrată şi transmisă prin metoda WRAPPED, ceea ce va determina serverul să acţioneze în doi paşi: întîi să descifreze cererea reală, iar apoi să îi dea curs acesteia.

Capitolul 2.

Descriere generală a limbajului HTML

2.1. Introducere, istorie, versiuni

Ce este HTML?

Limbajul a fost dezvoltat iniţial de oamenii de ştiinţă ca o unealtă utilizată la partajarea documentelor (rapoarte de cercetare, documentaţii, etc) în întreaga comunitate ştiinţifică internaţională care utiliza (şi utilizează) Internetul. Pentru a publica informaţii care să fie distribuite global în Internet este necesar un limbaj universal de descriere a acestora (o „mamă a tuturor limbajelor de publicare“), limbaj care să fie potenţial înţeles de toate computerele din Internet. Limbajul folosit de World Wide Web este HTML.

HTML se aseamănă cu modalităţile de formatare a textelor de la un procesor de texte uzual în sensul că adaugă textului ce se doreşte a fi publicat (afişat) informaţii de formatare şi permite înglo-barea şi altor tipuri de informaţii (imagini, sunete, etc). Toate acestea indică modul de afişare (prezentare) pentru programele capabile să înţeleagă aceste informaţii. Ceea ce îl deosebeşte de toate celelalte formate ale procesoarelor de texte este faptul că un document HTML este un document ce conţine informaţie în format „text-pur“ (numai caractere ASCII), în timp ce procesoarele de texte folosesc formate particulare (proprietare). Astfel, un document HTML poate fi afişat (prezentat) de un număr mare de programe (browsere Web) care rulează pe un mare număr de platforme.

Documentele HTML pot fi create cu un editor de texte (document salvat ca „text only with line breaks“) sau cu editoare HTML care permit crearea vizuală (WYSIWYG) a documentelor HTML, rezultînd însă tot documente în format text pur.

Limbajul HTML dă autorilor posibilitatea:

· să publice documente cu headere, texte, tabele, liste, fotografii, etc...

· să regăsească on-line informaţii prin intermediul hiperlink-urilor accesate printr-un simplu click de mouse

· să proiecteze formulare pentru realizarea tranzacţiilor cu servere aflate la distanţă, pentru căutari de informaţie sau pentru activităţi specifice comerţului

· să includă foi de calcul tabelar, clipuri video, sunete şi alte aplicaţii direct în documente

Caracteristicile limbajului HTML.

HTML are patru caracteristici principale:

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 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 oriunde pe Net, independent de platformă şi de navigator, a condus la răspîndirea sa foarte rapidă.

Orice versiune a HTML include elemente cum ar fi: text centrat sau aliniat dreapta, tabele, formule matematice, aliniere imagine şi text. Extensiile, care au apărut în număr mare în ultima vreme, sînt seturi de tag-uri HTML introduse de diverse companii (în general cele producătoare de navigatoare) care permit autorilor de documente HTML să evite o parte din constrîngerile standardului. Cele mai răspîndite sînt extensiile Netscape şi Internet Explorer.

Dar de ce a fost preferat HTML pentru publicaţii pe Web, cînd pentru realizarea publicaţiilor electronice există mai multe tehnologii? Primul motiv este simplitatea. Al doilea este că permite formatarea textului ASCII cu tag-uri în format ASCII. Rezultă de aici o compresie bună, suport pentru legături hypertext şi uşurinţă în a scrie navigatoare pentru vizualizarea documentelor.

Istoria HTML.

Născut în urmă cu aproximativ 30 de ani, într-o tentativă de a rezolva unele probleme ivite la transportul documentelor între diferite computere, limbajul hypertext a evoluat încet. HTML din prima generaţie este înţeles de primele navigatoare (modul text). Nivelul 1 este obligatoriu pentru toate navigatoarele şi înseamnă posibilitatea de a interpreta (hyper)text plus imagini. Nivelul 2 (HTML 2.0) a adus o contribuţie deosebită la realizarea unei interactivităţi reale prin intermediul formularelor (forms). HTML 3.0 (cunoscut anterior ca HTML+) aduce în plus tabelele, formatarea paragrafelor (alinieri stînga, centru şi dreapta), curgerea textului pe lîngă imagini, tabele, formule matematice, taburi, note şi o mulţime de alte trăsături în aparenţă de mai mică importanţă dar care fac munca cu HTML mult mai plăcută. Cele mai importante modificări şi îmbunătaţiri sînt aduse însă de HTML 4.0, versiune care îmbunătăţeşte totodată şi conceptele de accesibilitate şi structuralitate a limbajului de marcare. Informaţii despre dezvoltarea HTML se pot prelua de la adresa: http://www.w3.org

Limbajul HTML a fost dezvoltat iniţial de Tim Berners-Lee la Laboratorul European pentru Fizica Particulelor (CERN) şi popularizat de browser-ul Mosaic dezvoltat la NCSA şi a beneficiat de explozia Web-ului din anii 90. În această perioadă HTML-ul s-a dezvoltat în multiple direcţii, dar era dependent de autorii paginilor HTML şi producătorilor de echipamente care, deşi foloseau aceleaşi convenţii pentru limbaj, aveau implementări incompatibile. De aceea s-a impus ca o necesitate absolută standardizarea HTML-ului într-un efort global al întregii comunităţi a Internetului. Şi acum HTML este un limbaj marcat de un deosebit dinamism, standardizarea diverselor versiuni fiind însă deosebit de anevoioasă datorită lipsei consensului.

Organismul care „guverna“ protocolul TCP/IP („fundamentul“ Internetului), standardele arhitecturale ale Internetului, precum şi reţeaua Internet a Statelor Unite era în acea perioadă IAB – Internet Arhitecture Board, cunoscut la începuturile sale ca Internet Activities Board. Acesta delega responsabilităţile de dezvoltare, operare şi management a Internetului şi a protocoalelor şi serviciilor legate de acesta unor subcomitete, grupuri de lucru şi organizaţii de lucru pe care le controla. În plus avea contracte cu companii comerciale specializate în comunicaţii pentru gestionarea infrastructurii Internetului.

Subgrupul care se ocupa (şi se ocupă şi acum) cu dezvoltarea şi implementarea protocoalelor este IETF - Internet Engineering Task Force. Acesta este alcătuit dintr-un comitet director (care raportează la IAB) şi o serie de grupuri de lucru, fiecare dintre acestea responsabile cu un anumit protocol sau serviciu aflat în dezvoltare sau întreţinere. Grosul activtăţii de dezvoltare şi standardizare a protocoalelor este astfel realizat de aceste grupuri de lucru din cadrul IETF.

Documentele care specifică aceste protocoale şi servicii sînt numite Request for Comments, mai cunoscute sub numele de RFC. Acestea primesc coduri numerice prin intermediul cărora sînt referite ulterior. Chiar dacă numele sugerează o „solicitare de comentarii“ asupra unui subiect (ceea ce constituie, de altfel, şi modalitatea principală de dezvoltare a acestor documente – prin intermediul comentariilor, propunerilor şi discuţiilor membrilor comunităţii Internetului), RFC-urile standard (care se numesc... Recommendation) au putere de lege (decret) în cadrul comunităţii Internet (TCP/IP). Aceste documente (standardele) reprezintă doar o parte din întreaga colecţie de RFC-uri, dar practic dictează cum trebuie să se comporte un protocol şi ce funcţii trebuie să realizeze. În timpul dezvoltării RFC-urile se numesc RFC Working Drafts.

Dacă un protocol (sau produs) nu se conformează unui RFC standard, atunci cel ce îl dezvoltă riscă să piardă contactul (şi contractele) cu organismele ce aparţin de Departamentul Apărării al SUA, precum şi cu toate celelalte organisme şi organizaţii care le adoptă şi le respectă (ceea ce este echivalent cu excluderea din competiţia economică). În orice dispută din cadrul Internetului RFC-urile şi IETF sînt autorităţile supreme.

RFC-urile se pot obţine de pe site-ul ds.internic.net (organizate după numărul ataşat fiecărui RFC) sau de pe alte site-uri care oferă posibilităţi extinse de căutare/prelucrare, cum ar fi, de exemplu, site-ul de la adresa http://www.cis.ohio-state.edu/hypertext/information/rfc.html.

Organismul care se ocupă (şi) cu standardizarea limbajului HTML (din noiembrie 1995) se numeşte „The World Wide Web Consortium (W3C)“ şi include CERN, universitatea MIT (Cambridge, Massachusetts), precum şi alte organizaţii. În afara HTML, W3C are „custodia“ şi a protocolului HTTP, precum şi a altor produse şi standarde ce se referă la Web.

Filozofia W3C se bazează pe promovarea interoperabilităţii în World Wide Web. Aceasta necesită standarde. Aprobarea şi în special acceptarea unui standard este însă un proces extrem de mare consumator de timp, cu atît mai mult cu cît ambiţiile sînt mai mari (ISO a abandonat modelul celor 7 nivele după ce mulţi ani a încercat să-l impună). Plecînd de la păţaniile predecesorilor, pionierii Webului au împămîntenit obiceiul de a-şi construi singuri standarde şi nu de a le importa. Esenţa filozofiei W3C este implementată în grupurile de lucru (Working Group), un comitet mic de specialişti care se întîlnesc sau discută în teleconferinţe pînă la atingerea unui consens. W3C are 18 astfel de grupuri, fiecare cu 18-25 membri provenind de la orice companie ce are interese în subiectul abordat de respectivul grup. Se ajunge astfel ca rivalii să stea alături şi să coopereze, conducînd în cele din urmă la o acceptare mult mai rapidă din partea pieţii. Durata de viaţă a unui astfel de standard (unei specificaţii stabilită în acest mod) dă de fapt măsura autorităţii organizaţiei W3C.0

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

· orice standard îşi începe aventura ca W3C Note

· de aici este preluat de către un grup particular de lucru (Working Group) şi este discutat pînă cînd se atinge consensul

· în acest moment este publicat ca propunere (Working Draft) şi acum oricine poate face comentarii

· în momentul în care se obţine o susţinere şi un consens suficient de larg, directorul W3C (acum este Time Berners-Lee) decide dacă specificaţia este gata să devină propunere de recomandare (Proposed Recommendation)

· urmează o perioadă de 6 săptămîni în care toţi membrii W3C au şansa să voteze această propunere de recomandare; votul nu este obligatoriu şi se poate vota în 4 moduri diferite:

· da

· da, sub rezerva unor îmbunătăţiri

· nu, pînă cînd anumite sarcini nu sînt îndeplinite

· nu, specificaţia trebuie abandonată

· charta W3C stipulează necesitatea obţinerii consensului complet, astfel că fiecare vot trebuie să fie un da fără rezerve

· dacă toţi paşii anteriori au fost îndepliniţi, specificaţia trebuie aprobată în final de Director şi se publică sub forma unui standard (W3C Recommendation)

HTML 2.0 a fost publicat ca standard (versiune „oficială“) sub forma Request for Comments RFC 1866 în noiembrie 1995 şi reprezintă eforturile de codificare şi standardizare ale Internet Engineering Task Force. Poate fi preluat de la adresa ftp://ds.internic.net/rfc/rfc1866.txt

A urmat apoi propunerea (draft) HTML 3.0 (în septembrie 1995), în mare măsură bazat pe HTML+ (apărut în 1993) care, deşi nu a fost adoptată ca standard a dus la adoptarea a numeroase îmbunătăţiri. Unul dintre motivele care au condus la neacceptarea draftului a fost marimea considerată exagerată a acestuia. De aceea următoarele versiuni au fost şi vor fi introduse într-un mod modular. Această versiune se poate prelua de la adresa http://www.w3.org/MarkUp/html3/CoverPage. Ea a venit după ce Netscape începuse să introducă o serie de noi taguri şi atribute care nu erau complet specificate (versiunea aceasta de HTML fiind cunoscută sub numele de cod Mozilla), conducînd în acest fel la o implementare neuniformă în alte browsere.

Eforturile grupului de lucru asupra HTML din cadrul World Wide Web Consortium din această perioadă îndreptate spre eliminarea inconsistenţelor între specificaţiile diverselor firme/browsere au avut ca rezultat apariţia standardului (cu numele de cod Wilbur) HTML 3.2, în 11 ianuarie 1997, acestea putînd fi accesate la adresa http://www.w3.org/TR/REC-html32. Împreună cu W3C au lucrat la aceste specificaţii IBM, Microsoft, Netscape Communications Corporation, Novell, SoftQuad, Spyglass şi Sun Microsystems. Această versiune este o aplicaţie SGML ce se conformează standardului internaţional ISO 8879 ale cărui specificaţii se află la adresa http://www.iso.ch/cate/d16387.html. Ca aplicaţie SGML, sintaxa documentelor este definită de combinaţia dintre o declaraţie SGML (SGML declaration) şi definirea tipului documentului (document type definition - DTD).

Versiunea HTML 4.0 a devenit o recomandare (standard) W3C la 18 decembrie 1997 (avînd numele de cod Cougar) şi poate fi accesată la adresa http://www.w3.org/TR/REC-html40. Şi această versiune este o aplicaţie SGML ce se conformează standardului internaţional ISO 8879 ale cărui specificaţii se află la adresa http://www.iso.ch/cate/d16387.html. Ca aplicaţie SGML, specificaţia HTML 4.0 include o declaraţie SGML (1 SGML declaration), trei definiţii ale tipului documentului (3 document type definition - DTD) şi o listă de referinţe la caractere. În momentul apariţiei acestui standard, W3C recomandă autorilor producerea de documente HTML 4.0, dar pentru motive evidente de compatibilitate cu versiunile anterioare, W3C recomandă uneltelor ce interpretează şi suportă 4.0 să continue să suporte şi HTML 3.2, precum şi HTML 2.0.

În ianuarie 1999 există şi propunerea (draftul) HTML 5.0.

Întreaga comunitate a Internetului este de acord că documentele dezvoltate cu HTML trebuie să fie identice în diversele browsere şi pe diversele platforme ale Internetului. Interoperabilitatea va asigura astfel costuri reduse furnizorilor (autorilor) de pagini HTML (nu este nevoie decît de o singură versiune!), în caz contrar răspîndirea într-o multitudine de formate particulare (şi proprietare ale unor firme) incompatibile reducînd dramatic potenţialul (inclusiv comercial) al tuturor participanţilor. Fiecare nouă versiune a încercat să reflecte un consens din ce în ce mai mare între participanţi, astfel ca investiţiile făcute să nu fie irosite, iar documentele dezvoltate să devină imposibil de folosit după o perioadă foarte scurtă de timp. Limbajul HTML se dezvoltă cu dorinţa ca toate tipurile de computere şi diversele periferice ale acestora să poată folosi informaţia de pe Web: PC-urile cu display-uri de diverse rezoluţii şi capabilităţi de redare a culorii, periferice pentru cuplare prin intermediul vocii, telefoane celulare, etc...

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

HTML 4.0 este în acest moment (ianuarie 1999) standardul acceptat de comunitatea Internet şi de către producătorii majori de browsere şi unelte de dezvoltare pentru Internet (Netscape – cu browserul Navigator 4.x şi – cu browserul Microsoft Internet Explorer 4.x), primind suport aproape universal. W3C recomandă chiar autorilor de documente şi unelte pentru HTML să producă documente HTML 4.0 în locul HTML 3.2, dar din motive de compatibilitate (uşor de înţeles) se recomandă ca uneltele ce interpreteză HTML 4.0 să suporte în continuare HTML 3.2 şi 2.0.

Bătăliile se dau în continuare pentru standardele legate de DHTML (CSS Level 2 şi DOM). Chiar dacă modul în care a fost creată versiunea 4.0 şi soliditatea organismului care a generat-o indică o mare stabilitate, Microsoft a făcut deja paşi importanţi pe cale 5.0 şi spre DHTML, urmată, aproape cu disperare, şi de către Netscape (la sfîrşitul anului 1998 cumpărată de AOL). Concluzia ce se poate desprinde este aceea că dinamismul procesului nu poate fi „combătut“ decît printr-o permanentă informare de la organismul care impune standardele (W3C) şi adaptare la cerinţele acestora.

Revoluţia HTML 4.0.

Elementul esenţial diferit adus de versiunea 4.0 faţă de versiunea 3.2 este posibilitatea separării structurii unui document de prezentarea lui prin introducerea „stilurilor de documente“ (style sheet). Utilizînd limbajul HTML pentru descrierea structurii unui document şi style sheet-urile pentru a sugera prezentarea acestuia, autorii obţin mult mai uşor independenţa de periferic/computer/platformă hard-soft care a făcut HTML-ul atît de popular. Un document cu o structură complexă poate fi prezentat în diferite moduri pe medii diferite, permiţînd documentului însuşi să se adapteze mai uşor noilor tehnologii (cum ar fi, de exemplu, browser-ele capabile să vorbească, cititoarelor braille, etc.).

În plus separarea conţinutului de prezentare permite modificarea înfăţişării eventual chiar a unui întreg site doar prin modificarea unui style-sheet (unui document care descrie stilul). Experienţa a demonstrat că o astfel de abordare reduce dramatic costurile de deservire a unui spectru larg de platforme, facilitînd şi o întreţinere şi modificare mult mai uşoare.

Alte îmbunătăţiri semnificative aduse de 4.0 pot fi considerate şi:

I. Tehnologia client-side scripting.

Prin intermediul scripturilor autorii pot realiza pagini HTML dinamice (care reacţionează la acţiunile utilizatorilor) sau se pot realiza aplicaţii distribuite. Mecanismul de includere a scripturilor în paginile HTML este independent de limbaj. Se poate specifica limbajul scriptului, se poate include un script extern sau se poate referi rezultatul execuţiei unui script. Aceste scripturi se execută pe computerul care rulează browserul Web (clientul).

II. Documentele compuse

HTML oferă acum un mecanism standard pentru a îngloba obiecte generice şi aplicaţii în documentele HTML. Elementul OBJECT permite includerea imaginilor, clipurilor video, sunetului, formulelor matematice, aplicaţii specializate şi alte obiecte într-un document.

III. Internaţionalizarea

Această versiune a fost proiectată cu ajutorul experţilor în internaţionalizare, astfel încit documentele pot fi scrise în orice limbă şi transportate uşor oriunde în lume. Elementul cheie îl constituie adoptarea standardului ISO/IEC 10646 ca set de caractere pentru HTML. Acest standard este cel mai complet standard ce permite reprezentarea oricăror caractere internaţionale, direcţie a textului, punctuaţie sau cerinţe specifice ale unei limbi.

IV. Accesibilitatea

Odată cu creşterea diversităţii lumii Webului, s-au diversificat şi capabilităţile utilizatorilor acestuia, astfel încît a devenit importantă suportarea diverselor tehnologii pentru a suplinii unele limitări fizice.

V. Tabele îmbunătăţite

În această versiune se implementează un model de tabel, bazat pe RFC 1942. Autorii au acum un control sporit asupra structurii şi paginaţiei. Sînt incluse posibilităţi de definire a grupurilor de rînduri şi/sau coloane, mai mare flexibilitate în definirea regulilor unui tabel. În plus afişarea tabelelor se face acum incremental, pe măsura încărcării paginii, nemaifiind necesară aşteptarea încărcării integrale a tabelelor.

VI. Model îmbunătăţit de împărţire a unui document în frame-uri

Includerea frame-urilor în HTML 4.0 oferă posibilitatea de a prezenta documente multiple într-o singură fereastră. Modelul este preluat din propunerea originală a firmei Netscape.

VII. Imprimare îmbunătăţită a paginilor Web

Operaţia de imprimare a unui număr mai mare de pagini legate între ele poate fi simplificată mult prin descrierea relaţiilor dintre ele utilizînd elementul LINK sau limbajul specializat RDF (Resource Description Language) dezvoltat de W3C.

Validarea documentelor HTML.

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

2.2. Reprezentarea documentelor HTML

Ca aplicaţie (standard) SGML, limbajul HTML trebuie (pentru a se supune normelor de interoperabilitate) să specifice propriul set de caractere care se foloseşte în codificarea documentelor.

Un set de caractere al unui document constă din:

· un repertoar: un set de caractere abstracte, cum sînt litera alfabetului latin „A“, litera alfabetului chirilic „I“ sau semnul chinezesc care înseamnă apă

· poziţiile codurilor: un set de întregi ce referă caracterele din repertoar

Fiecare document HTML este o secvenţă de caractere din repertoar. Computerele identifică aceste caractere prin poziţia acestora în repertoar. De exemplu în setul de caractere ASCII poziţiile 65, 66 şi 67 referă caracterele A, B şi C.

Caracterele utilizate pentru editarea textelor în documentele HTML ar trebui să aparţină setului standard ASCII (caractere pe 7 biţi) şi fără a include caractere din setul extins (pe 8 biţi) deoarece diversele platforme utilizează definiţii diferite pentru caracterele din setul superior ASCII. Dar, acest set de caractere este insuficient pentru un sistem informaţional global, aşa cum este Webul. De aceea limbajul HTML utilizează un set de caractere mult mai comple, numit Universal Character Set – UCS (Setul de caractere universal) definit de standardul ISO 10646, standard ce defineşte un repertoar de mii de caractere utilizate în întreaga lume. Acest set de caractere este echivalent caracter-cu-caracter cu setul Unicode 2.0 definit de W3C.

Acest set de caractere nu este însă suficient pentru agenţii utilizator ca să interpreteze corect un document HTML transmis ca o secvenţă de bytes într-un fişier sau în reţea. În afara setului de caractere, aceştia trebuie să cunoască şi codificarea caracterelor (character encoding) folosită la transformarea documentului într-un stream de bytes. Prin codificarea caracterelor (termenul utilizat fiind acela de „charset“) se poate înţelege metoda de conversie a unei secvenţe de bytes într-o secvenţă de caractere. Această conversie se potriveşte perfect cu schema activităţilor Webului: serverele trimit documentele utilizatorilor (agenţilor utilizatori) ca un stream (şir) de bytes, iar aceştia îi interpretează ca şiruri de caractere. Metoda de conversie poate să mergă de la o corespondenţă simpla unu-la-unu pînă la scheme şi algoritmi complexe. O singură corespondenţă simplă unu-la-unu nu este însă suficientă pentru un repertoar aşa de complex ca cel definit de ISO 10646 (sau de Unicode). De aceea există diferite codificări ale unor părţi ale acestui repertoar pentru a-l acoperi în întregime. Cele mai uzuale codificări sînt: ISO-8859-1/ISO Latin 1 (utilizat pentru limbile Europei de vest), ISO-8859-2/ISO Latin 2 (care suportă alfabetul chirilic), SHIFT_JIS (codificare japoneză), ş.a.

Uneltele software care produc documente HTML le pot codifica oricum (nu se impune nimic) încercînd să „acopere“ cît mai multe dintre caracterele acestuia. Cele care nu se pot codifica cu schema folosită se pot totuşi referi prin intermediul caracterelor entităţi (acestea referindu-se la setul de caractere şi nu la schema de codificare). Cel care foloseşte aceste documente (agenţii utilizatori) poate modifica această codificare (proces numit transcodare) şi nu este obligat să proceseze documentul utilizînd aceeaşi codificare sau o codificare care să acopere întregul set de caractere. DAR, pentru a obţine aceleaşi rezultate cu cele dorite de autorul documentului, agenţii utilizatori trebuie să fie în primul rînd „conformi Unicode“ (adică să mapeze corect toate caracterele Unicode în toate codificările recunoscute) şi să cunoască schema de codificare folosită de autor.

Informaţia care specifică schema de codificare trebuie să fie oferită de server. Cea mai simplă şi directă modalitate de a o specifica este utilizarea unui parametru specific (charset) într-un cîmp (Content-type) al antetului protocolului HTTP utilizat la transmiterea documentelor.

De exemplu, următorul antet HTTP anunţă că pentru documentul solicitat s-a folosit schema de codificare EUC-JP:

Content-Type: text/html; charset=EUC-JP

Dar nu toate serverele ştiu să folosească acest parametru. Pentru a fixa această problemă, documentele HTML pot include informaţii explicite despre schema de codificare folosită. Pentru aceasta se foloseşte un element specific al limbajului (META). Pentru cazul de mai sus:

<META http-equiv="Content-Type" content="text/html; charset=EUC-JP">

Mai mult, dacă nu se foloseşte nici această metodă, limbajul HTML a prevăzut un atribut special (charset) ce se poate ataşa elementelor din cadrul documentului.

Implicit, dacă nu este folosită nici una dintre aceste 3 posibilităţi, se consideră documentul codificat ISO-8859-1. Fiecare agent utilizator trebuie să ofere o metodă/mecanism de a suprapune/suprascrie o informaţie incorectă despre charsetul (codificarea) folosită.

2.3. Structura şi logica limbajului HTML

HTML este un limbaj care descrie modul de afişare a unui document (text şi informaţii de alt tip, de exemplu imagini, animaţie, sunete,) folosind două tipuri de elemente: caractere entităţi şi taguri.

Tagurile HTML sînt elementele specifice limbajului care determină acţiunile ce trebuie efectuate la afişarea şi parcurgerea ulterioară a documentului (pot fi asimilate cu instrucţiunile unui limbaj de programare). Caracterele entităţi se folosesc la descrierea caracterelor din document care nu fac parte din setul standard ASCII.

I. Tag-urile HTML

Toate tag-urile au nume scrise între paranteze unghiulare <NumeTag> şi (eventual) cîteva atribute care pot lua anumite valori. Formatul general al „instrucţiunilor“ (tag-urilor) HTML este următorul:

<NumeTag Atribute> Textul afectat de acest tag </NumeTag>

Tagurile pot fi de două feluri:

1. Nevide (perechi), între care apare textul afectat. Ele au efect numai asupra textului inclus între ele şi sînt de două tipuri:

· de început şi au formatul <NUME>

· de sfîrşit şi au formatul </NUME>

Exemple de tag-uri nevide:

<I>Acest text va fi afişat italic</I>

<B>Acest text va fi afişat îngroşat</B>

2. Vide (singulare), au efect imediat în punctul din document în care apar.

Exemple de tag-uri vide:

<HR> Inserează o linie orizontală în locul în care apare.

<IMG SRC="poza.gif"> Specifică inserarea unei imagini.

Tag-urile şi atributele pot fi editate atît cu caractere mici cît si cu caractere mari, şi au acelaşi efect.

Atributele tag-urilor au la rîndul lor nume şi pot lua numai anumite valori. Forma în care sînt editate atributele este NUME="valoare". Valoarea trebuie inclusă în ghilimele. Dacă în tag există mai multe atribute, ele trebuie separate prin spaţiu. Formatul general al unui tag ce are şi atribute este următorul:

<NumeTag NumeAtribut="ValoareAtribut">Textul afectat de tag</NumeTag>

Exemplu:

<IMG src="poza.gif" align="bottom">

Aici NumeTag este IMG şi specifică inserarea unei imagini. NumeAtribut1 este SRC şi are ca valoare calea şi numele fişierului imagine (poza.gif). NumeAtribut2 este ALIGN, priveşte alinierea imaginii şi are ca valoare BOTTOM (jos, în raport cu rîndul).

Formatul tag-urilor trebuie respectat cu stricteţe. Chiar dacă, în general, aproape toate caracterele de control ASCII sînt ignorate cînd apar în textul HTML (de pildă ENTER sau TAB), dacă sînt introduse între parantezele unghiulare ale tag-urilor le vor face neinterpretabile de către navigatoare şi prin urmare nu vor avea nici un efect.

Tag-urile pot fi utilizate şi în interiorul altor tag-uri. Acest lucru se face de forma:

<Tagl><Tag2>Textul afectat de tag</Tag2></Tagl>

Exemplu:

<A HREF="poza-mare.gif"><IMG SRC="poza-mică.gif"></A>

În acest exemplu, primul tag este <A>...</A> ce indică existenţa unei „legături“ spre alt document, iar al doilea tag este <IMG> ce indică inserarea în document a unei imagini. Astfel „poza-mică.gif“ este imagine activă, selectabilă, datorită faptului că este cuprinsă între tag-urile <A>...</A>. Activarea ei de către cel care priveşte documentul cu un navigator, va determina serverul să-i trimită documentul aflat în fişierul „poza-mare.gif“, specificată ca valoare a atributului HREF.

II. Caractere entităţi

Deoarece o codificare (charset) poate să nu fie capabilă să exprime toate caracterele unui set de caractere ale unui document şi datorită faptului că codarea internă a computerului care produce caracterele speciale prin apăsarea altor taste (de pildă ALT + codul numeric) nu este aceeaşi pentru diferitele sisteme, pentru afişarea lor corectă şi pentru a permite translatarea caracterelor speciale este necesară definirea unui set special de coduri, numite caractere entităţi (referinţe), care pot fi incluse în documentele HTML pentru reprezentarea acestor caractere speciale. Cînd sînt interpretate de către navigatoare caracterele entităţi sînt afişate în mod corespunzător ţinînd cont de platforma pe care rulează navigatorul si de fontul utilizat.

Caracterele entităţi sînt predefinite şi pot lua una din două forme posibile:

· entităţi nume (referinţe caractere) &nume;

· entităţi numere (referinţe numerice) &#numar; sau &#xnumar;

Toate caracterele entităţi nume încep cu semnul & (ampersand), urmat de numele entităţii (de exemplu &acirc; 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ă &#126; 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). &copy;r&icirc;ndunica

b). &#169;r&#238;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: &atilde; &Atilde; &acirc; &Acirc; &icirc; &Icirc; (Latinl). Aici &atilde nu este chiar ă ci un a cu tilda şi lipsesc literele ş şi ţ. Reprezentarea lor prin numerele de cod este: &#227; &#195; &#226; &#194; &#238; &#206; &#186; &#170; &#254; &#222; (Latin2)

Caractere speciale

Cîteva dintre caracterele speciale mai des utilizate sînt:

Entitate	Semnificaţie
&lt;	< (mai mic)
&gt;	> (mai mare)
&amp;	& (ampersand)
&quot;	" (ghilimele)
&emsp;	Inserează un spaţiu dublu celui dintre caracterele monospaţiate (lărgime de un EM, sau un punct)
&nbsp;	Inserează un spaţiu care nu permite ruperea rîndului în acel loc
&endash;	Dash de lărgime un EN
&emdash;	Dash de lărgime un EM

Caractere neafişabile

Un agent utilizator poate să nu fie capabil să afişeze (sau să ofere utilizatorului) corect (sau inteligibil) toate caracterele dintr-un document. Aceasta se poate întîmpla cînd, spre exemplu, nu este disponibil un anumit font, un caracter are o valoare ce nu poate fi exprimată de codificarea internă a agentului utilizator, etc...

Deoarece sînt prea multe cauzele ce pot duce la o astfel de situaţie nu se impune ca fiind obligatoriu nimic, DAR fiecare agent utilizator trebuie:

· să adopte un mecanism clar de alertare a utilizatorului (de exemplu afişarea unui caracter sugestiv; în astfel de cazuri Netscape Navigator foloseşte semnul întrebării)

· să afişeze reprezentarea numerică a acelui caracter în cazul în care în document acesta apare ca entitate numerică

Capitolul 3.

Structura documentelor HTML

3.1. Structura generală a unui document HTML

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

Documentele HTML (4.0) au structura generală:

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

"http://www.w3.org/TR/REC-html40/strict.dtd">

<HTML>

< HEAD>

<TITLE>Titlul documentului</TITLE>

... alte declaraţii/informaţii despre document...

</HEAD>

<BODY>

...Textul documentului propriu-zis...

</ BODY>

</HTML>

Notă importantă:

Dacă se foloseşte un document multiplu definit cu FRAMESET, atunci elementul FRAMESET înlocuieşte elementul BODY.

Un document HTML (uneori referit şi ca pagină HTML) este structurat în trei părţi:

1. Începutul unui document HTML este o declaraţie (<!DOCTYPE... >) care specifică versiunea limbajului HTML căruia i se conformează acesta. Restul documentului este conţinut în cadrul elementului de limbaj (tagului) <HTML>.

2. O secţiune declarativă numită antet (head) definită cu tagul <HEAD>. Aceasta conţine informaţii (declaraţii) despre document (cum ar fi titlul şi cuvinte cheie asociate cu documentul)

3. O secţiune numită conţinut (body) definită cu tagul <BODY> sau <FRAMESET> şi care înseamnă de fapt (hyper)textul documentului. Acesta este alcătuit din elemente de tip bloc şi elemente de tip inline.

1. Elementul DOCTYPE

Un document valid HTML trebuie să declare ce versiune utilizează pentru descrierea sa. Declaraţia tipului documentului (document type declaration) defineşte ce DTD se foloseşte în documentul respectiv.

De exemplu, HTML 4.0 poate specific 3 DTD, astfel că un autor trebuie să includă una dintre următoarele declaraţii ale tipului de document:

· HTML 4.0 Strict DTD include toate elementele şi atributele ce nu sînt „obsolete“ (inutile, depăşite) sau nu apar în documente definite cu FRAMESET. Pentru astfel de documente se foloseşte următoarea declaraţie de tip:

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

"http://www.w3.org/TR/REC-html40/strict.dtd">

· HTML 4.0 Transitional DTD include tot ceea ce este în declaraţia anterioară la care se adaugă elementele şi atributele depăşite (vechi, redefinite, dar nu eronate!). Pentru astfel de documente se foloseşte următoarea declaraţie de tip:

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

"http://www.w3.org/TR/REC-html40/loose.dtd">

· HTML 4.0 Frameset DTD include tot ceea ce este în declaraţia anterioară la care se adaugă documentele multiple (create frame-uri). Pentru astfel de documente se foloseşte următoarea declaraţie de tip:

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

"http://www.w3.org/TR/REC-html40/frameset.dtd">

Adresele ce apar în fiecare declaraţie permit agenţilor utilizatori să acceseze (şi să descarce) DTD-ul documentului (descrierea formală) şi orice set de caractere de care are nevoie. Următoarele adrese se folosesc pentru accesarea descrierilor (DTD-urilor) şi seturilor de caractere utilizate de HTML 4.0.

· http://www.w3.org/TR/REC-html40/strict.dtd DTD strict (implicit)

· http://www.w3.org/TR/REC-html40/loose.dtd DTD Transitional

· http://www.w3.org/TR/REC-html40/frameset.dtd DTD pentru documente cu frameset

· http://www.w3.org/TR/REC-html40/HTMLlat1.ent setul de caractere Latin-1

· http://www.w3.org/TR/REC-html40/HTMLsymbol.ent setul de caractere Symbol

· http://www.w3.org/TR/REC-html40/HTMLspecial.ent setul de caractere Special

2. Elementul HTML

Sintaxa:

<HTML>...</HTML>

Atribute posibile:

· VERSION = xxx

· atribute de internaţionalizare: LANG, DIR

Conţine:

· In HTML 4.0 Strict şi Transitional: HEAD urmat de BODY

· In HTML 4.0 Frameset: HEAD urmat de FRAMESET

Conţinut în:

· Nu se aplică, este element de nivel 0

Descriere:

Acest element conţine de fapt documentul (pagina) HTML şi este alcătuit din HEAD urmat de BODY (sau FRAMESET). Atît tagul de început cît şi cel de sfîrşit ale elementului sînt opţionale.

Atributele LANG şi DIR se folosesc cu HTML pentru a specifica limba (de bază) în care este creat documentul (şi „direcţia“ în care se citeşte textul). Se foloseşte în special cu tehnica style-sheet-urilor pentru a crea un document cu text în mai multe limbi.

Atributul VERSION specifică DTD-ul din document (versiunea de HTML) şi nu mai trebuie folosit întrucît este redundant cînd se foloseşte DOCTYPE.

3. Elementul HEAD

Sintaxa:

<HEAD>...</HEAD>

Atribute posibile:

· PROFILE = uri (dicţionar de meta informaţii)

· atribute de internaţionalizare: LANG, DIR

Conţine:

· TITLE (exact un element)

· BASE (optional)

· ISINDEX (optional)

· SCRIPT (zero sau mai multe elemente)

· STYLE (zero sau mai multe elemente)

· META (zero sau mai multe elemente)

· LINK (zero sau mai multe elemente)

· OBJECT (zero sau mai multe elemente)

Conţinut în:

· Elementul HTML

Descriere:

Acest element conţine informaţii despre document (cum ar fi titlul său, cuvinte cheie utilizabile de motoarele de căutare, descrierea documentului şi style-sheet-uri asociate/utilizate. HEAD este solicitat în toate documentele, dar tagurile sale de început/sfîrşit sînt opţionale. Dacă tagul de sfîrşit lipseşte primul element BODY sau FRAMESET determină sfîrşitul lui. Este urmat de BODY în documentele Strict şi Transitional şi de FRAMESET în cele Frameset.

Atributul optional PROFILE oferă locaţia în care se află un profil de metadate. Un profil este un fişier ce defineşte proprietăţile ce pot fi utilizate de elementele META şi LINK din header, neavînd un format standard stabilit.

Conţinutul acestui element (cu excepţia lui TITLE care este afişat de browsere) nu este prelucrat în mod uzual.

4. Elementul BODY

Sintaxa:

<BODY>...</BODY>

Atribute posibile:

· BACKGROUND = URI (imaginea de background a documentului)

· BGCOLOR = Color (culoarea de background a documentului)

· TEXT = Color (culoarea textului documentului)

· LINK = Color (culoarea link-urilor documentului)

· VLINK = Color (culoarea link-urilor deja vizitate ale documentului)

· ALINK = Color (culoarea link-urilor active ale documentului)

· ONLOAD = Script (documentul a fost încărcat de browser/agentul utilizator)

· ONUNLOAD = Script (documentul a fost parăsit de browser/agentul utilizator)

· atribute comune (vezi nota de mai jos)

Conţine:

· În HTML 4.0 Strict:

· elemente de tip bloc (nivel bloc), unul sau mai multe

· SCRIPT, INS, DEL

· În HTML 4.0 Transitional:

· elemente de tip bloc (nivel bloc)

· elemente de tip inline

· INS, DEL

Conţinut în:

· In HTML 4.0 Strict or Transitional: HTML

· In HTML 4.0 Frameset: NOFRAMES

Descriere:

Acest element conţine de fapt corpul (conţinutul) documentului (paginii) HTML. BODY este cerut de documentele în care nu apar frame-uri, dar tagurile de început/sfîrşit sînt opţionale. În documentele ce conţin frame-uri, BODY trebuie obligatoriu conţinut în elementul NOFRAMES, dacă este utilizat.

Conţinutul documentului apare în cadrul elementelor de tip bloc sau în corpul elementului SCRIPT, iar în cazul documentelor HTML 4.0 de tip Transitional sînt permise şi elemente de tip inline direct în cadrul elementului BODY.

BODY poate avea atribute care specifică background-ul (fundalul) şi culoarea documentului sau a unor elemente din cadrul său. Această metodă este însă considerată depăşită, preferîndu-se utilizarea stilurilor de documente (style-sheet). Dacă unul dintre atributele ce se referă la link-uri este setat, atunci se recomandă folosirea tuturor pentru a se asigura ca diferă culorile diverselor tipuri de legături. Aceste culori pot fi însă suprapuse de setările din browsere.

Atributul BACKGROUND sugerează o imagine de fundal care va fi folosită pentru document (prin extindere pe verticală şi/sau orizontală). Dacă acest atribut este setat se recomandă utilizarea şi a atributelor BGCOLOR, TEXT, LINK, VLINK şi ALINK pentru a fi siguri că documentul poate fi citit. BGCOLOR se foloseşte pentru fundalul imaginilor neîncărcate.

Style-sheet-urile (stilurile de documente) permit o mai mare flexibilitate în specificarea imaginii de background, chiar a poziţiei şi modalităţii de extindere pe întreaga suprafaţă ocupată de document, sau dacă imaginea să se deplaseze (scroll) sau nu cu documentul, etc...

În plus faţă de evenimentele ce pot fi generate de orice element, BODY acceptă următoarele atribute de tip eveniment utilizate în tehnologia client-scripting:

· ONLOAD, apare atunci cînd documentul a fost încărcat;

· ONUNLOAD, apare atunci cînd documentul este părăsit.

Atributele comune ce pot apare în acest element sînt comune mai multor elemente şi sînt împărţite în:

· atribute fundamentale (core): ID, CLASS, STYLE, TYTLE

· atribute de internaţionalizare: LANG, DIR

· evenimente scriptabile (ce pot fi tratate cu ajutorul scripturilor): ONCLICK, ONDBLCLICK, ONMOUSEDOWN, ONMOUSEUP, ONMOUSEOVER, ONMOUSEMOVE, ONMOUSEOUT, ONKEYPRESS, ONKEYDOWN, ONKEYUP.

Elementele de tip bloc şi cele de tip inline sînt definite mai departe.

Exemple:

1. O variantă de pagină HTML care conţine ca şi „body“ (conţinut) textul: „The scariest jungle: Follow the map to see lions and tigers and bears. Oh, my!“ arată astfel:

<HTML>

<HEAD>

<TITLE>My Jungle Home Page</TITLE>

</HEAD>

<BODY>

The scariest jungle: Follow the map to see lions and tigers and bears.

Oh, my!

</BODY>

</HTML>

Iar ceea ce se va vedea cu un browser (aici Internet Explorer) este prezentat în figura următoare:

O variantă „depăşită“ (fără a fi eronată, dar nerecomandată ca stil) de pagină HTML care ilustrează utilizarea atributelor depăşite este prezentată în continuare. Culoarea de background se stabileşte ca fiind albă, textul negru, iar legăturile iniţial roşii, active ca fiind de culoare fuchsia, iar cele deja vizitate maron.

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

"http://www.w3.org/TR/REC-html40/loose.dtd">

<HTML>

<HEAD>

<TITLE>Exemplu depasit</TITLE>

</HEAD>

<BODY bgcolor="white" text="black"

link="red" alink="fuchsia" vlink="maroon">

... document body...

</BODY>

</HTML>

2. Prin folosirea style-sheet-urilor (stilurilor), acelaşi efect se poate obţine şi astfel:

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

"http://www.w3.org/TR/REC-html40/strict.dtd">

<HTML>

<HEAD>

<TITLE>Un exmplu cu stiluri incluse</TITLE>

<STYLE type="text/css">

BODY { background: white; color: black}

A:link { color: red }

A:visited { color: maroon }

A:active { color: fuchsia }

</STYLE>

</HEAD>

<BODY>

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

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

"http://www.w3.org/TR/REC-html40/strict.dtd">

<HTML>

<HEAD>

<TITLE>A study of population dynamics</TITLE>

<LINK rel="stylesheet" type="text/css" href="smartstyle.css">

</HEAD>

<BODY>

... document body...

</BODY>

</HTML>

5. Elementul FRAMESET

Sintaxa:

<FRAMESET>...</FRAMESET>

Atribute posibile:

· ROWS = MultiLengths (lungimile rîndurilor)

· COLS = MultiLengths (lungimile coloanelor)

· ONLOAD = Script (toate frame-urile au fost încărcate)

· ONUNLOAD = Script (toate frame-urile au fost eliminate/părăsite)

· atribute comune

Conţine:

· FRAMESET (unul sau mai multe elemente)

· FRAME (unul sau mai multe elemente)

· NOFRAMES (un singur element, opţional)

Conţinut în:

· HTML

Descriere:

Elementul FRAMESET este un container de frame-uri folosit pentru a diviza fereastra în subspaţii dreptunghiulare numite frame-uri. Într-un document ce conţine frame-uri, elementul FRAMESET exterior ia locul lui BODY şi urmează imediat lui HEAD. Elementul FRAMESET conţine unul sau mai multe elemente FRAMESET sau FRAME, împreună cu elementul opţional NOFRAMES pentru a oferi un conţinut alternativ browser-elor care nu suportă frame-urile (sau le au dezactivate). Se recomandă însă să existe întotdeauna şi să ofere informaţie utilă pentru astfel de cazuri (cel puţin, de exemplu, o legătură către frame-ul principal).

Atributele ROWS şi COLS definesc dimensiunile exacte ale fiecărui frame din set. Fiecare atribut are formatul unei liste de lungimi (cu elemente separate de virgulă) care specifică în pixeli, ca procent sau ca lungime relativă dimensiunea (lungimea sau lăţimea) fiecărui frame. O dimensiune relativă se exprimă ca i*, unde i este un întreg. Dacă lipseşte întregul se consideră egal cu 1. De exemplu, un set de frame-uri definit cu ROWS="3*,*" va avea primul rînd cu o înălţime de 3 ori mai mare decît al doilea rînd.

Valorile specificate pentru ROWS dau înălţimea fiecărui rînd, din partea de sus a ecranului înspre baza acestuia. Atributul COLS defineşte lăţimea fiecărei coloane, începînd de la stînga la dreapta.. Dacă ROWS sau COLS lipsesc, valoarea implicită a atributului este 100%. Dacă ambele atribute sînt specificate, ecranul se „împarte“ dpdv logic într-o matrice care se „umple“ mai întîi de la stînga la dreapta şi apoi de sus în jos.

Cînd se utilzează dimensiuni în pixeli, acestea trebuie combinate întotdeauna cu lungimi relative pentru a acoperi diferitele dimensiuni ale ferestrelor (determinate de diferitele rezoluţii la care se utilizează ecranele). Dimensiunile în pixeli trebuie folosite doar cînd frame-urile conţin în principal imagini sau alte obiecte cu o dimensiune fixă (în pixeli). Preferată este însă exprimarea în procente şi dimensiuni relative, datorită capacităţii acesteia de adaptare la diferitele dimensiuni de ferestre.

Elementul FRAMESET acceptă atributele ONLOAD şi ONUNLOAD pentru a specifica acţiuni de tip client-side (executate în agentul utilizator) cînd toate frame-urile au fost încărcate sau descărcate (eliminate din browser).

Exemple:

Exemplul următor determină împărţirea ecranului în 2 rînduri şi 3 coloane.

<FRAMESET ROWS="70%,30%" COLS="33%,33%,34%">

<FRAME NAME="Photo1" SRC="Row1_Column1.html">

<FRAME NAME="Photo2" SRC="Row1_Column2.html">

<FRAME NAME="Photo3" SRC="Row1_Column3.html">

<FRAME NAME="Caption1" SRC="Row2_Column1.html">

<FRAME NAME="Caption2" SRC="Row2_Column2.html">

<FRAME NAME="Caption3" SRC="Row2_Column3.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>

<A HREF="Row1_Column2.html">Photo 2</A>

(<A HREF="Row2_Column2.html">Caption</A>)

</LI>

<LI>

<A HREF="Row1_Column3.html">Photo 3</A>

(<A HREF="Row2_Column3.html">Caption</A>)

</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>

<H1>Table of Contents</H1>

<UL>

<LI><A HREF="reference/html40/">HTML 4.0 Reference</A></LI>

<LI><A HREF="reference/wilbur/">HTML 3.2 Reference</A></LI>

<LI><A HREF="reference/css/">CSS Guide</A></LI>

</UL>

<P>

<IMG SRC="ad.gif" ALT="Advertising">

</P>

</BODY>

</NOFRAMES>

</FRAMESET>

3.2. Structura header-ului unui document HTML (elementul HEAD)

Headerul (antetul) unui document (definit cu elementul HEAD) conţine informaţii despre documentul curent, cum ar fi titlul documentului, cuvinte cheie utilizate de motoarele de căutare şi alte date care nu sînt considerate conţinut al documentului. Agenţii utilizatori (browser-ele) nu afişează în general aceste informaţii, prelucrînd elementele ce apar aici şi făcînd disponibile informaţiile intr-un alt mod decît conţinutul documentului. De exemplu, browser-ele afişează titlul documentului încărcat în caption-line (linia de titlu) a browserului, alături de numele browser-ului însuşi.

Elementul HEAD poate conţine următoarele elemente:

· TITLE – stabileşte titlul documentului

· BASE – defineşte adresa (URI) de bază a documentului

· STYLE – defineşte stilurile de document (style-sheet) folosite în document

· LINK – defineşte relaţiile documentului propriu-zis cu alte documente auxiliare

· META – defineşte un set de „metadate“ (date auxiliare utilizate în diverse alte scopuri)

· SCRIPT – defineşte un script client-side (secvenţă de instrucţiuni ce se execută în client)

· ISINDEX – defineşte textul prompterului utilizat la preluarea datelor de la utilizator

· OBJECT – permite includerea unor obiecte externe (sunete, imagini, animaţii, etc)

1. Elementul TITLE

Sintaxa:

<TITLE>...</TITLE>

Atribute posibile:

· atribute de internaţionalizare (vezi mai sus)

Conţine:

· Text (inclusiv caractere entităţi)

Conţinut în:

· HEAD

Descriere:

Acest element dă titlul documentului. Fiecare document trebuie să aibă exact 1 titlu (un singur element TITLE în HEAD). Conţine text şă/sau caractere entităţi, dar nu poate conţine alte elemente de marcare. Un titlu bun trebuie să fie scurt şi specific conţinutului documentului, astfel încît să poată fi utilizat ca bookmark (semn de carte) în browsere, ca titlu pentru fereastra în care se afişează şi ca legătură pentru motoarele de căutare. Lungimea limită a unui titlu se recomandă a fi 60 caractere.

Exemplu:

Exemplul următor de pagina HTML setează titlul la „valoarea“ (şirul de caractere) „My Jungle Home Page“ şi va arăta ca în figură (aici încărcată în browserul Internet Explorer).

<HTML>

<HEAD>

<TITLE>My Jungle Home Page</TITLE>

</HEAD>

</HTML>

2. Elementul BASE

Sintaxa:

<BASE>

Atribute posibile:

· HREF = uri (adresa/url de bază)

· TARGET = destinaţia frame-ului (unde se încarcă ceea ce indică legătura)

Conţine:

· Gol (nu conţine nimic)

Conţinut în:

· HEAD

Descriere:

Acest element defineşte adresa de bază (uri, url) a documentului, cea care este folosită la rezolvarea (determinarea) adreselor relative din cadrul documentului. Ea trebuie să fie unică. Dacă este prezent, elementul BASE trebuie să apară în HEAD înaintea oricărui alt element ce conţine o referire la o adresă (uri, url).

Atributul HREF specifică adresa propriu-zisă (url).

Cele mai multe pagini de Web nu necesită o astfel de adresă (adresa documentului însuşi, de unde a fost încărcat, este adresa de bază, folosită la cele relative). Cazurile în care este necesară sînt: cînd adresa de bază diferă de adresa documentului sau cînd acesta nu are o adresă de la care să fi fost încărcat (de exemplu a fost trimis prin email).

Atributul TARGET este folosit cînd documentul este împărţit în frame-uri, specificînd frame-ul în care se afişeaza implicit porţiunile din document dacă nu sînt specificate explicit.

3. Elementul STYLE

Sintaxa:

<STYLE>...</STYLE>

Atribute posibile:

· TYPE = ContentType (tipul conţinutului)

· MEDIA = MediaDesc (tipul de media căruia i se aplică stilul)

· TITLE = text (titlul stilului - style sheet)

· atribute de internaţionalizare (pentru TITLE)

Conţine:

· An embedded style sheet

Conţinut în:

· HEAD

Descriere:

Acest element înglobează (inserează) în document un stil (style sheet). Într-un HEAD pot fi conţinute oricîte elemente STYLE.

Atributul TYPE se foloseşte pentru a specifica tipul de media (în standardul Internet). Pentru stilurile definite de metoda Cascading Style Sheets atributul TYPE are valoarea text/css.

Atributul opţional TITLE dă un titlu style-sheet-ului. Fără acesta, style-sheet-ul respectiv este aplicat întotdeauna cînd sînt active stilurile pentru documentul respectiv. Cu acest atribut se pot activa sau dezactiva style-sheet-uri individuale. Însă nu toate browser-ele implementează această facilitate.

Atributul MEDIA specifică media pe care acest stil se aplică. Aceasta permite autorilor restricţionarea unui stil la anumite dispozitive de ieşire. Valoarea acestui atribut este o listă de nume de medii separate prin virgulă. HTML 4.0 defineşte următoarele nume de medii (literele mari/mici sînt diferite):

· screen (implicit), display-urile uzuale (fără paginare);

· print, ieşirea pe imprimantă;

· tty, display-uri ce folosesc caractere de dimensiune fixă (ca cele folosite de Lynx);

· tv, dispozitive tip televizor (rezoluţie mică şi derulabilitate redusă);

· projection, pentru proiectoare;

· handheld, dispozitive handheld (de ţinut în mînă), caracterizate de un disply mic, monocrom şi cu bandă limitată;

· braille, dispozitive tactile braille tactile;

· aural, pentru sintetizatoare de voce;

· all, pentru toate dispozitivele.

Browser-ele pre-HTML 3.2 care nu cunoşteau elementul STYLE afişau conţinutul său ca şi cum ar fi făcut parte din corpul documentului (din BODY). Pentru a preîntîmpina aceasta se permite ca definiţia de stil să apară într-un comentariu (<!-- comment -->).

Un stil definit în acest mod este util cînd stilul respectiv se aplică unui singur document. Dacă acesta trebuie aplicat mai multor documente se foloseşte tehnica stilurilor externe.

Exemplu:

Un exemplu de descriere şi includere a unui stil într-un document:

<STYLE TYPE="text/css" MEDIA=screen>

<!--

BODY { background: url(foo.gif) red; color: black }

P EM { background: yellow; color: black }

.note { margin-left: 5em; margin-right: 5em }

-->

</STYLE>

Se defineşte ca background pentru corpul documentului (BODY) imaginea aflată în fişierul „foo.gif“, iar culoarea de background ca fiind negru. În cadrul unui paragraf (P) backgroundul este galben iar textul are culoarea neagră. Un stil cu numele „note“ începe de la 5 unităţi în stînga şi se întinde pînă cu 5 unităţi faţă de margine din dreapta.

4. Elementul LINK

Sintaxa:

<LINK>

Atribute posibile:

· REL = LinkTypes (relaţiile CĂTRE link)

· REV = LinkTypes (relaţiile DE LA link)

· HREF = URI (referinţa hypertext)

· TYPE = ContentType (tipul conţinutului legăturii)

· TARGET = FrameTarget (frame-ul în care se încarcă link-ul)

· MEDIA = MediaDesc (mediul pentru care e linkul)

· HREFLANG = LanguageCode (limba în care e descrisă legătura/linkul)

· CHARSET = Charset (setul de caractere folosit pentru link)

· atribute comune

Conţine:

· Nimic

Conţinut în:

· HEAD

Descriere:

Acest element defineşte „relaţiile“ documentului cu alte documente în ceea ce priveşte localizarea (adresele lor). Într-un HEAD pot apare oricîte elemente LINK. Nu toate browser-ele suportă însă elementul LINK, astfel încît un document nu trebuie să depindă de relaţiile definite de acest element, ci trebuie folosit doar pentru a îmbunătăţi performanţele per ansamblu.

Atributele REL şi REV definesc natura relaţiei dintre document şi resursele legate (specificate) de acestea. REL defineşte o relaţie de la documentul curent la resursa legată, în timp ce REV defineşte o relaţie în direcţia opusă. De exemplu:

<LINK REL=Glossary HREF="foo.html">

indică faptul că fişierul "foo.html" este un glosar pentru documentul curent, în timp ce

<LINK REV=Subsection HREF="bar.html">

indică faptul că documentul curent este o subsecţiune a lui "bar.html". Valoarea lui REL şi REV este o listă de linkuri separate prin spaţii.

Relaţiile comune între documente includ şi următorul sau precedentul într-o secvenţă, pagina de start într-o colecţie, un document cu informaţii de copyright şi informaţii despre autor. Un document ar putea defini aceste relaţii astfel:

<LINK REL=Prev HREF="base.html" TITLE="BASE - Document Base URI">
<LINK REL=Next HREF="meta.html" TITLE="META - Metadata">
<LINK REL=Start HREF="../" TITLE="HTML 4.0 Reference">
<LINK REL=Copyright HREF="/copyright.html" TITLE="Copyright Notice">
<LINK REV=Made HREF="mailto:lp@foo.com" TITLE="Feedback">

Elementul LINK se poate folosi şi pentru a aplica un stil extern. REL=StyleSheet specifică un stil persisitent sau preferat, în timp ce REL="Alternate StyleSheet" defineşte un stil alternativ.

Un stil persisitent este acela care se aplică întotdeauna cînd style sheet-urile sînt active. Absenţa atributului TITLE indică un astfel de stil.

Un stil preferat este acela care se aplică automat. Combinaţia dintre REL=StyleSheet şi TITLE specifică un stil preferat. Un autor nu poate specifica mai mult de un astfel de stil.

Un stil alternativ este indicat de REL="Alternate StyleSheet". Utilizatorul poate alege să schimbe stilul preferat cu unul dintre cele alternative, dacă broeserul permite acest lucru (nu toate o şi fac, însă).

Un stil poate fi specificat prin intermediul mai multor style-sheet-uri (fişiere de descriere a stilurilor), ca în exemplu următor:

<LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary" TYPE="text/css">
<LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary" TYPE="text/css">
<LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary" TYPE="text/css">

Aici se combină 3 style-sheet-uri pentru a forma stilul "Contemporary", aplicat ca şi stil preferat. Pentru a se combina style-sheet-urile trebuie să folosească acelaşi TITLE.

Atributul MEDIA specifică media pentru care sînt proiectate resursele legate de acest document. Cu REL=StyleSheet autorii restricţionează un stil la un anumit dispozitiv. Are aceleaşi valori ca la elementul STYLE.

Atributele opţionale HREFLANG şi CHARSET ale lui LINK descriu limba (de exemplu en pentru English, en-US pentru American English şi ja pentru Japoneză) şi schema de codificare a legăturii (de exemplu ISO-8859-1, SHIFT_JIS, and UTF-8).

Relaţia legăturii Alternate defineşte o versiune alternativă a documentului. Traduceri ale unei pagini pot fi identificate folosind REL=Alternate împreună cu atributul HREFLANG, iar versiuni ale unei pagini potrivite pentru un mediu specific se pot oferi prin combinarea REL=Alternate cu atributul MEDIA ca în exemplele următoare:

<LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
<LINK REL=Alternate HREF="index.ja.html" HREFLANG=ja CHARSET="SHIFT_JIS" TITLE="Japan version">
<LINK REL=Alternate HREF="index.pdf" TYPE="application/pdf" MEDIA=print TITLE="PDF version">

De remarcat că atributele LANG şi DIR se aplică textului atributului TITLE şi NU conţinutului legăturii.

Atributul TARGET se foloseşte în cazul documentelor definite cu frame-uri.

5. Elementul META

Sintaxa:

<META>

Atribute posibile:

· NAME = nume (numele proprietăţii)

· HTTP-EQUIV = nume (numele răspunsului din headerul HTTP)

· CONTENT = CDATA (datele asociate)

· SCHEME = CDATA (formatul datelor)

· atribute de internaţionalizare pentru CONTENT (vezi mai sus)

Conţine:

· Nimic

Conţinut în:

· HEAD

Descriere:

Acest element defineşte metadatele documentului: cuvintele cheie asociate cu acestea, descrierea documentului şi autorul său. Pot apare oricîte elemente META în cadrul elementului HEAD. Nu există o listă standard de metadate/proprietăţi (fiecare autor poate defini orice metadată îi este necesară).

Atributul NAME defineşte un nume de proprietate, în timp ce CONTENT dă valoarea corespun-zătoare a acelei proprietăţi. CONTENT poate conţine text şi caractere entitate, dar făra taguri.

Atributul opţional SCHEME defineşte formatul proprietăţii respective. De exemplu, proprietatea dată calendaristică poate cere SCHEME="Month-Day-Year" pentru a o deosebi de formatul definit de SCHEME="Day-Month-Year".

Exemplul următor defineşte autorul unui document:

<META NAME=author CONTENT="Laurenţiu Pădeanu">

Unele motoare de căutare folosesc cuvinte cheie şi proprietăţi de descriere pe care le asociază cu legătura către documentul respectiv (şi care pot oferi chiar informaţii asemănătoare ponderilor). De exemplu:

<META NAME="description" CONTENT="Pagina clubului de fotbal Universitatea Craiova">
<META NAME="keywords" CONTENT="U Craiova, stiinţa, craiova, soccer, football">

Pentru a evita ca aceste motoare să trunchieze descrierea documentului, aceasta trebuie să fie sumară (să nu depăşească 200 de caractere). Cuvintele cheie sînt separate prin virgulă şi literele mari sînt diferite de cele mici. Motoarele de căutare procesează de obicei primele 1000 de caractere, iar dacă un cuvînt se repetă prea des există pericolul ca documentul să nu fie indexat.

Unele motoare de căutare suportă proprietatea robots pentru a indica dacă un document să fie indexat şi care dintre link-urile sale să fie urmate. Valoarea asociată a lui CONTENT este o listă de directive separate prin virgulă:

· index – specifică posibilitatea ca această pagină sa fie indexată

· noindex – indică neindexarea aceastei pagini

· follow – indică motoarelor de căutare să urmeze linkurile din pagină

· nofollow – indică motoarelor de căutare să NU urmeze linkurile din pagină

· all – echivalent cu index, follow (implicit)

· none – echivalent cu noindex, nofollow

De exemplu, următorul element META le spune motoarelor de căutare să nu indexeze pagina, dar să urmărească link-urile din pagină:

<META NAME=robots CONTENT="noindex, follow">

De remarcat, însă, că NU toate motoarele de căutare suportă această proprietate.

Atributul HTTP-EQUIV poate fi folosit în locul lui NAME pentru a indica faptul că acea proprietate este (aparţine) header-ului HTTP (a protocolului de preluare a documentelelor). Această proprietate este transformată şi transmisă de unele servere HTTP (nu toate1), dar clienţii (browser-ele) recunosc această caracteristică (faptul că aparţin headerului HTTP) chiar dacă nu este trimisă în antetul protocolului. Exemple (a se vedea şi descrierea protocolului HTTP):

1. setarea datei de expirare a unui document

<META HTTP-EQUIV=Expires CONTENT="Sun, 22 Mar 1998 16:18:35 GMT">

2. setarea limbajului scripturilor inline din document ca fiind javascript

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

3. setarea limbii în care sînt descrise stilurile inline din document

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

4. setarea codificării unui document (la setul de caractere japonez)

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS">

Folosirea acestei metode în locul specificării în antetul protocolului HTTP poate avea ca efect reafişarea paginii încă o dată după ce a fost încărcată de anumite browsere.

5. setarea timpului şi adresei de încărcare a unei alte pagini după ce s-a încărcat documentul curent: <META HTTP-EQUIV=Refresh CONTENT="10; URL=http://www.alta.com/">

După 10 secunde de la încărcarea paginii curente, browserul trebuie să încarce pagina de la adresa www.alta.com. De remarcat că nu toate browserele suportă această proprietate, astfel că e preferată şi oferirea unei alte modalităţi de a încărca pagina respectivă. Cel mai uzual motiv de folosire a lui Refresh este mutarea unei pagini la o altă adresă şi păstrarea (cel puţin pentru un timp) şi a vechii adrese, pentru utilizatorii ce şi-au marcat cu bookmark pagina mutată.

6. Elementul SCRIPT

Sintaxa:

<SCRIPT>... </SCRIPT>

Atribute posibile:

· TYPE = ContentType (tipul conţinutului limbajului scriptului)

· LANGUAGE=CDATA (numele limbajului din script)

· SRC=URI (locaţia scriptului extern)

· CHARSET=Charset (setul de caractere folosit de scriptul extern)

· DEFER (execuţia scriptului poate aştepta)

Conţine:

· Înglobează un script

Conţinut în:

· HEAD, inline elements, block-level elements

Descriere:

Acest element include un script de tip client-side în document. Această tehnică permite o mai mare interactivitate într-un document prin acţiunile ce pot fi întreprinse ca răspunsuri la evenimente utilizator. De exemplu, un script poate fi folosit la verificarea elementelor introduse de utilizator într-un formular ÎNAINTE ca acestea să fie transmise, oferindu-se în acest mod posibilitatea de notoficare imediată a utilizatorului în caz de eroare.

Nu toate browserele suportă tehnica scripturilor client-side, iar unele dintre cele care o suportă permit dezactivarea ei la solicitarea utilizatorului. În acest scop se foloseşte elementul NOSCRIPT care oferă posibilitatea înglobarii în document a acţiunilor ce trebuie executate în acest caz. Mai mult, în cazul unor validări ale unor elemente ce se transmit unor cgi-uri, acestea trebuie să repete aceste verificări pentru a se acoperi şi cazurile de invalidare/nesuportare a scripturilor client-side.

Mai mult, trebuie reţinut că diversele browsere suportă DIVERSE VARIANTE ale limbajelor utilizate pentru scrierea scripturilor, fiecare cu bug-urile sale. Browser-ele cele mai cunoscute ce suportă scripturile client-side sînt Netscape Navigator versiunea 2.0 şi superioară, Microsoft Internet Explorer versiunea 3.0 şi superioară, şi Opera versiunea 3.0 şi superioară.

Atributul TYPE specifică tipul mediului ce conţine limbajul de scriptare, adică text/javascript. Majoritatea browser-elor suportă însă numai atributul depăşit LANGUAGE, cel care specifică numele limbajului folosit. Exemple ale valorilor suportate de LANGUAGE includ JavaScript, JavaScript1.1, and VBScript. Browser-ele vor ignora scripturile cu valori ale acestui atribut pe care nu le suportă. De exemplu, Netscape Navigator 3.0 va executa scripturile cu LANGUAGE = "JavaScript" sau LANGUAGE="JavaScript1.1" dar va ignora scripturile cu LANGUAGE = "JavaScript1.2" sau LANGUAGE="VBScript". Implicit se presupune ca este JavaScript 1.0.

Un script embedded (înglobat) este dat ca şi conţinut al elementului SCRIPT. Atributul SRC permite autorilor să refolosească codul prin specificarea unui script extern. Atributul opţional CHARSET oferă metoda de codificare (setul de caractere) al scriptului extern (tipic ISO-8859-1). Dacă browser-ul nu poate încărca scriptul extern va executa scriptul embeded, în caz contrar ignorîndu-l pe acesta.

Exemplu:

<SCRIPT TYPE="text/javascript" SRC="foo.js" CHARSET="ISO-8859-1">

<!—

// script embedded, executat NUMAI DACĂ foo.js este nedisponibil

// -->

</SCRIPT>

Netscape Navigator cere ca scripturile externe să-i fie oferite printr-un tip al conţinutului (cîmpul Content-Type al headerului HTTP) cu o valoare application/x-javascript.

Atributul DEFER indică posibilitatea ca browserul să poată aştepta parcurgerea scriptului pînă cînd şi restul documentului a fost prelucrat (afişat, de exemplu). Scripturile ce utilizează acest atribut nu trebuie să genereze nici un conţinut al documentului şi nu trebuie să răspundă la evenimente utilizator ce pot apare în timp ce documentul se încarcă (de exemplu transmiterea unui formular). Acesta poate fi util în cazul întîrzierii scripturilor ce preîncarcă imagini, chiar dacă browserele nu îl suportă, în general.

Elementul SCRIPT poate apare de un număr oarecare de ori în headerul sau corpul unui document (HEAD sau BODY). În mod tipic este amplasat în HEAD, dacă nu generează conţinut pentru corpul documentului.

Browserele dinaintea lui HTML 3.2 nu recunosc elementul SCRIPT şi îi tratează conţinutul ca şi cum ar fi HTML normal. Pentru a evita aceste cazuri, se permite plasarea comentariilor în jurul conţinutului scriptului embedded. De exemplu:

<SCRIPT TYPE="text/javascript">

<!-- comment to end of line

document.write("foo");

// comment to end of line -->

</SCRIPT>

Atenţie la faptul că "-->" este conţinut într-un comentariu pe o singură linie a limbajului JavaScript (început cu două caractere slash „/“). Din punct de vedere practic, prima apariţie a lui "</" urmat de orice literă este considerat tag de sfîrşit pentru elementul SCRIPT. Autorii trebuie să evite utilizarea şirurilor de tipul "</P>" în scripturile embedded. JavaScript permite folosirea caracterului \ (backslash) pentru a evita terminarea prematură a elementului SCRIPT, ca în exemplul acesta: document.write("<\/P>").

7. Elementul ISINDEX

Sintaxa:

<ISINDEX>

Atribute posibile:

· PROMPT = text (mesajul promptului)

· atribute fundamentale (core atributes, vezi mai sus)

· atribute de internaţionalizare (vezi mai sus)

Conţine:

· Nimic

Conţinut în:

· APPLET, BLOCKQUOTE, BODY, CENTER, DD, DEL, DIV, FIELDSET, FORM, HEAD, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Descriere:

Acest element defineşte o linie singulară de introducere a datelor. Eticheta cîmpului de intrare este specificată folosind atributul PROMPT. ISINDEX este depăşit în HTML 4.0 de către elementul INPUT. Este echivalent cu FORM cu un singur element de intrare de tip text, o metodă get şi o acţiune indicînd la adresa (uri) documentului ce conţine elementul ISINDEX.

8. Elementul OBJECT

Sintaxa:

<OBJECT>...</OBJECT>

Atribute posibile:

· DATA=URI (datele obiectului)

· CLASSID=URI (adresa de implementare)

· ARCHIVE=CDATA (fişierele arhivă)

· CODEBASE=URI (adresa de bază/URI pentru CLASSID, DATA, ARCHIVE)

· WIDTH=Length (lăţimea obiectului)

· HEIGHT=Height (inălţimea obiectului)

· NAME=CDATA (numele pentru transmiterea formularelor)

· USEMAP=URI (imaginea senzitivă/image map de tip client-side)

· TYPE=ContentType (tipul conţinutului obiectului)

· CODETYPE=ContentType (tipul conţinutului codului)

· STANDBY=Text (mesajul ce se va afişa în timp ce se încarcă)

· TABINDEX=NUMBER (poziţia în ordinea de parcurgere)

· DECLARE (nu se instanţiază obiectul)

· ALIGN=[ top | middle | bottom | left | right ] (modul de aliniere a obiectului)

· BORDER=Length (lăţimea/grosimea marginii linkului)

· HSPACE=Pixels (spaţiu lăsat orizontal)

· VSPACE=Pixels (spaţiu lăsat vertical)

· atribute comune

Conţine:

· Elemente PARAM urmate de elemente de tip bloc şi/sau inline

Conţinut în:

· HEAD, elemente de tip inline, elemente de tip bloc cu excepţia lui PRE

Descriere:

Acest element este folosit pentru a include „obiecte“ ca imagini, secvenţe video, applet-uri Java sau elemente VRML în documentele HTML. Este utilizat pentru a înlocui elementele mai specifice IMG şi APPLET definite în versiunile anterioare, precum şi extensiile proprietare (ale diferiţilor producători de browsere), cum ar fi EMBED şi BGSOUND. Utilizarea acestui element asigură atît o portabilitate superioară, cît şi o compatibilitate între browsere şi versiuni.

Atributul DATA specifică adresa obiectului înglobat în document. Adresele relative sînt interpretate în concordanţă cu atributul CODEBASE.

Atributele WIDTH şi HEIGHT definesc dimensiunile obiectului. Valorile pot fi în pixeli sau în procente relative la dimensiunea părintelui. Majoritatea browsere-lor cer obligatoriu aceste atribute.

CLASSID poate fi folositor pentru a specifica implementarea obiectului. Applet-urile Java, Python şi controalele ActiveX oferă implementări pentru obiectul înglobat, fiind astfel specificate cu atributul CLASSID, ca în exemplul următor:

<OBJECT CLASSID="yahtzee.py" CODETYPE="application/x-python"

STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
<OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java"

WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
<OBJECT DATA="yahtzee.gif" TYPE="image/gif"

TITLE="A Yahtzee animation" WIDTH=200 HEIGHT=100>
Yahtzee is my <EM>favorite</EM> game!
</OBJECT>
</OBJECT>
</OBJECT>

Acest exemplu demonstrează şi metoda de utilizare a conţinutului alternativ pentru browserele care nu pot afişa obiectele înglobate. În acest exemplu, se foloseşte întîi „varianta“ scrisă în Python a jocului Yahtzee, dacă browserul îl suportă. Pentru browserele care nu suportă appleturile Python se oferă o alternativă cu versiunea Java. Mai mult, dacă nici acest tip de applet nu e recunoscut (şi executat) se oferă o imagine (un gif). La limită este oferit şi un text, ca alternativă extremă. De remarcat că acest exemplu este compatibil şi cu versiunile anterioare care ignoră tagul OBJECT, afişind conţinutul elementului din interior (aici un text!).

Tot în acest exemplu este prezentată şi modalitatea de utilizare a atributelor TYPE şi CODETYPE pentru a permite browserelor evitarea solicitării explicite şi suplimentare a unui fişier pe care nu îl pot prelucra (afişa). Atributul TYPE specifică tipul suportului referit de resursa referită de DATA, iar CODETYPE specifică tipul suportului cerut de datele specificate de CLASSID. Exemplul utilizează şi atributul STANDBY care afişează un text (scurt) în timpul încărcării obiectului respectiv.

Atributul ARCHIVE poate specifica o listă (cu elemente separate prin blancuri, elemente ce sînt adrese absolute sau relative la CODEBASE), permiţînd browserului să încarce mai multe fişiere cu o singură conexiune, ceea ce conduce la scăderea timpului total de încărcare a unui document compus. Formatul standard de arhivă pentru Java este JAR. Aceste arhive se pot crea cu utilitarul jar oferit de kitul de dezvoltare jdk.

Atributul DECLARE face ca obiectul să fie doar o declaraţie ce NU este instanţiată imediat. Aceasta permite instanţierea obiectelor prin intermediul unei legături, unui buton sau unui obiect mai tîrziu în acelaşi document. Atributul ID trebuie să fie utilizat cu obiectele estfel declarate pentru ca mai tîrziu acestea să se poată instanţia prin intermediul identificatorului atribuit aici.

Exemplu:

<OBJECT DECLARE ID=yahtzee CLASSID="java:Yahtzee.class" CODETYPE="application/java"

WIDTH=400 HEIGHT=250 TITLE="My Yahtzee Game">
<IMG SRC="yahtzee.gif" ALT="You get the dice!" TITLE="Yahtzee animation">
</OBJECT>
...
<P>Ready to <A HREF="#yahtzee">play Yahtzee</A>?</P>

Elementul OBJECT poate conţine şi elemente PARAM, înaintea oricărui alt conţinut, pentru a oferi datele de iniţializare la execuţie. Exemplul următor include o secvenţă video şi un clip audio ca alternativă. Se folosesc parametri recunoscuţi în mod normal de orice plug-in pentru audio/video, plasaţi înainte de specificarea conţinutului alternativ:

<OBJECT DATA="mlk.mov" TYPE="video/quicktime"

TITLE="Martin Luther King's &quot;I Have a Dream&quot; 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 &quot;I Have a Dream&quot; speech">
<PARAM NAME=autostart VALUE=true>
<PARAM NAME=hidden VALUE=true>
<A HREF="mlk.html">Full text of Martin Luther King's "I Have a Dream" speech</A>
</OBJECT>
</OBJECT>

Atributul USEMAP poate fi folosit cu OBJECT pentru a include o imagine „clicabilă“ – o imagine care este echivalentă cu o serie de legături activate cu un click de mouse (spre adrese diferite în funcţie de zona de imagine pe care se face clic). Acestea se mai pot realiza şi cu elementul IMG (fiind mai bine suportate de browsere), dar cele definite cu OBJECT permit o alternativă textuală completă pentru browserele ce nu încarcă imaginile. Atributul USEMAP indică spre un element MAP al cărui conţinut defineşte legăturile în funcţie de coordonatele zonei în care se face clic. Elementul MAP poate fi inclus în OBJECT, caz în care conţinutul său nu este afişat (ci interpretat aşa cum e descris anterior), sau în afara lui OBJECT şi atunci conţinutul său este afişat.

Exemplul următor prezintă un document cu două imagini (cea de a doua ca alternativă la prima, dacă aceasta nu este suportată). Ambele partajează o definiţie de „hartă“ (zonele de pe imagine) care este inclusă în elementul OBJECT. Elementul MAP conţine un meniu de legături care sînt afişate de browserele care nu încarcă imaginile:

<OBJECT DATA="sitemap.png" USEMAP="#map" TYPE="image/png"

TITLE="Site map" WIDTH=300 HEIGHT=200>

<OBJECT DATA="sitemap.gif" USEMAP="#map" TYPE="image/gif"

TITLE="Site map" WIDTH=300 HEIGHT=200>

<MAP NAME=map>

<UL>

<LI><A HREF="/reference/" COORDS="5,5,95,195">HTML and CSS Reference</A></LI>
<LI><A HREF="/design/" COORDS="105,5,195,195">Design Guide</A></LI>
<LI><A HREF="/tools/index.html" COORDS="205,5,295,195">Tools</A></LI>

</UL>

</MAP>
</OBJECT>
</OBJECT>

Atributul TABINDEX specifică (prin intermediul unui număr întreg între 0 şi 32767) ordinea de parcurgere a elementului dacă se foloseşte tasta TAB. Un element cu TABINDEX’0 sau fără TABINDEX va fi vizitat după toate elementele care au un TABINDEX pozitiv. Dintre elementele care au un TABINDEX pozitiv, cele care au o valoare mai mică vor primi focusul (vor fi vizitate) mai întîi. Dacă au aceeaşi valoare se vizitează întîi cele care apar întîi în document.

Atributul ALIGN, depăşit în HTML 4.0, specifică modul de aliniere a unui obiect. Valorile top, middle şi bottom specifică poziţia obiectului faţă de conţinutul documentului ce-l înconjoară la stînga şi dreapta. ALIGN=middle aliniază centrul obiectului cu linia de bază a textului (baseline). Pentru a centra un obiect orizontal în pagină se plasează într-un bloc centrat, ca în exemplul următor:

<P ALIGN=center><OBJECT DATA="foo.mov" TYPE="video/quicktime"></OBJECT></P>

Celelalte valori (left şi right) specifică un obiect flotant (ca poziţie): el este plasat la marginea din stînga sau din dreapta şi restul conţinutului curge pe lîngă el. Pentru a se plasa restul conţinutului sub obiect se foloseşte <BR CLEAR=left|right|all> (cel care se impune în situaţia respectivă). Metodele moderne de aliniere sînt oferite de proprietăţile vertical-align and float ale stilurilor cascadate (Cascading Style Sheets).

Atributul BORDER (este şi el depăşit în HTML 4.0) specifică grosimea marginii obiectului. Valoarea 0 are ca efect marginea din jurul unei legături (link) şi trebuie folosită cu precauţie. Exemplu:

<A HREF="reference/">

<OBJECT DATA="icon/reference.gif" WIDTH=90 HEIGHT=90 BORDER=0></OBJECT>

Web Authoring Reference

</A>

Atributele HSPACE şi VSPACE (şi ele depăşite în HTML 4.0) permit sugerarea unor spaţii goale verticale şi orizontale în jurul obiectelor a căror dimensiune este dată în pixeli, egală pentru ambele margini. Metoda modernă este prin intermediul style-sheet-urilor.

Obiectul OBJECT este cel mai utilizat ca un element BODY şi poate fi conţinut atît în elemente inline cît şi în elemente de nivel bloc. Conţinutul lui OBJECT trebuie să fie alcătuit din elementele care pot fi conţinute în părintele lui OBJECT. De exemplu un element A conţinînd un OBJECT nu poate avea nici un element de nivel bloc ca şi conţinut al elementului OBJECT.

3.3. Structura corpului unui document HTML (elementul BODY)

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

I. Elementele de tip bloc (block level elements)

Elementele de tip bloc în mod tipic conţin elemente inline şi alte elemente de tip bloc. Cînd sînt prelucrate vizual (afişate pe ecran), de obicei încep cu o linie nouă (de la capătul rîndului).

Sînt considerate de tip bloc următoarele elemente (unele dintre ele asimilate prin extensie, pentru că pot include elemente de tip bloc, specificate mai jos cu simbolul ¨):

1. Elementele de tip header (Hn)

· H1 - header de nivelul 1

· H2 - header de nivelul 2

· H3 - header de nivelul 3

· H4 - header de nivelul 4

· H5 - header de nivelul 5

· H6 - header de nivelul 6

2. Containere de text

· P - definirea unui paragraf

· DIV - definirea unei diviziuni logice de text

· CENTER - definirea unei diviziuni logice de text centrat în pagină

· PRE - definirea unui text preformatat

· BLOCKQUOTE - definirea unui citat de dimensiuni mari

· ADDRESS - definirea unui bloc cu informaţii specifice de adresă

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

· UL - definirea unei liste neordonate

· OL - definirea unei liste ordonate

· DIR - definirea unei liste de tip director

· MENU - definirea unei liste de tip menu

· DL - definirea unei liste de definiţii

· LI - definirea unui element ce aparţine unei liste ordonate/neordonate (¨)

· DT - definirea unui termen/definiţie a unui liste de definiţii (¨)

· DD – descriea unei definiţii (¨)

4. Elemente ce definesc tabelele

· TABLE - definirea unui tabel

· CAPTION - definirea titlului unui tabel

· TBODY - definirea corpului tabelului (¨)

· TR - definirea unui rînd al unui tabel (¨)

· TD - definirea unei celule de date (¨)

· TH - definirea unei celule de tip header (¨)

· COLGRUP - definirea unui grup de coloane într-un tabel

· COL - definirea unei coloane a unui tabel (atributele comune)

· THEAD - definirea unui antet al unui tabel (¨)

· TFOOT - definirea unui footer al unui tabel (¨)

5. Alte elemente

· HR - inserarea unei linii orizontale

· FORM - definirea unui formular pentru a introduce date

· FIELDSET - definirea unui grup de controale într-un formular

· ISINDEX - definirea unui text pentru promterul de cerut date de intrare

· FRAMESET - definirea unui „frameset“ (set de frame-uri pentru un document) (¨)

· NOFRAMES - definirea conţinutului alternativ la setul de frame-uri

· NOSCRIPT - definirea conţinutului alternativ la script-uri

II. Elementele de tip inline (inline level elements)

Elementele de tip inline pot conţine, în mod normal, numai text sau alte elemente de tip inline. Cînd sînt prelucrate vizual (afişate pe ecran), de obicei NU încep cu o linie nouă (efectul se propagă din locul în care apar, chiar dacă este în mijlocul unui rînd). Sînt considerate de tip inline următoarele:

1. Elemente de marcare logică a proprietăţilor unei porţiuni de text/unei fraze – stilurile logice

· EM - Text scos în evidenţă

· STRONG - Text puternic scos în evidenţă

· CODE - Fragment de cod (bloc de instrucţiuni)

· SAMP - Mostră de text generat de un program

· CITE / Q - Citat scurt / Scurt text reluat după altă sursă

· ABBR - Abreviere

· ACRONYM - Acronim

· DFN - Definiţia unui termen

· KBD - Text ce trebuie introdus de la tastatură

· VAR - Variabilă

2. Elemente de marcare fizică a proprietăţilor unei porţiuni de text – stilurile fizice

· I - Italic

· B - Bold

· U - Subliniat

· STRIKE - Tăiat cu o linie

· S - Text cu o linie pe mijlocul caracterelor

· BIG - Text mai mare

· SMALL - Text mai mic

· SUB - Subscript (indice)

· SUP - Superscript (putere)

· TT - Teletype (stilul maşinilor de scris)

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

· SPAN - Container generic de text inline

· BR - Line break (sfîrşit de linie)

· A - Anchor (ancoră, legătură hypertext)

· IMG - Imagine

· FONT - Modificarea fontului

· BASEFONT - Modificarea fontului de bază

· BDO - Redefinirea direcţiei în care se citeşte textul

4. Elemente de definire a controalelor din interiorul unui formular

· INPUT - Cîmp de introducere a unor date (button, etc.)

· SELECT - Listă de selecţie

· FIELDSET - Grup de controale ale unui formular

· LEGEND - Titlul unui fieldset

· TEXTAREA - Cîmp de introducere a unui text

· LABEL - Eticheta unui cîmp

· BUTTON - Buton

· OPTGROUP - Grup de opţiuni de meniu

· OPTION - Listă de selecţie a unor opţiune de meniu

5. Alte elemente

· ! - Comentarii

· Textul documentului

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

Elementele următoare pot fi folosite atît ca elemente de tip bloc cît şi ca elemente de tip inline. Dacă sînt utilizate ca elemente inline (adică sînt în interiorul unui alt element inline sau P) ele nu trebuie să conţină nici un element de tip bloc.

· MAP - Definirea unei imagini senzitive (prelucrată client-side)

· AREA - Zonă activă într-o imagine senzitivă

· APPLET - Inserarea unui applet Java

· PARAM - Parameterii unui applet Java

· TEXTFLOW - Text alternativ la un applet

· DEL - Text şters

· INS - Text inserat

· OBJECT - Includerea unui obiect

· SCRIPT - Includerea unui script client-side

· IFRAME - Definirea unei frame inline (în punctul în care apare elementul)

Capitolul 4.

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

4.1. Elemente utilizate la formatarea textului unui document HTML

HTML este construit pe ideea ierarhiilor de informaţii şi pe specificarea elementelor care reflectă această ierarhie. Într-un document aceasta înseamnă că unele informaţii sînt mai importante ca altele şi că, de obicei, sînt părţi de text (informaţie) care includ alte (sub)părţi de text. Cînd se descrie această situaţie într-un document se obţine o structură care reflectă ierarhia într-un mod asemănător exemplului următor:

I. Primul element principal (Major Topic)

A. Primul Sub-Topic

1. Primul sub-sub-topic care se intinde...<„CR/LF“>

....şi aici... rîndul de sus trebuind să fie întrerupt...

2. Al doilea sub-sub-topic

B. Al doilea Sub-Topic

II. Al doilea element principal (Major Topic)...etc., etc.

Uneori documentul doreşte reflectarea acestei logici. Pentru aceasta este pusă la dispoziţia autorului posibilitatea definirii de titluri şi/sau subtitluri pe diverse nivele.

De remarcat că un rînd de text afişat de un browser se termină doar atunci cînd se „termină“ ecranul sau se specifică explicit acest lucru cu un tag special. Inserarea de linii în document (CR/LF cu „Enter“) nu se reflectă şi la afişare. Browserele ignoră toate “spaţiile albe“ (white-spaces) din documente (caracterele de tip CR, LF, TAB, etc).

1. Terminarea rîndului (elementul BR)

Sintaxa:

<BR>

Atribute posibile:

· CLEAR=[ left | all | right | none ] (ştergerea/setarea poziţiei obiectelor flotante)

· atribute comune core

Conţine:

· Nimic (gol)

Conţinut în:

· elemente de tip inline

· elemente de tip block

Descriere:

Tag-ul <BR> termină rîndul de text acolo unde este inserat. Cînd navigatorul întîlneşte tag-ul <BR>, afişează textul care urmează acestui tag începînd de la marginea din stînga, indiferent unde anume este această margine. De pildă în cazul în care elementul <BR> este inserat într-o listă, marginea din stînga este alta decît în cazul unui text normal. Tag-ul se foloseşte cînd dorim să terminăm afişarea rîndului într-un anumit loc.

Trebuie avută grijă la inserarea acetui tag deoarece modul în care apare un text/linie depinde şi de fontul utilizat şi dimensiunea sa.

Atributul CLEAR mută dedesubt obiectele flotante (care pot apare în diverse poziţii în pagină, cum ar fi imaginile şi tabelele). Mult mai flexibilă este metoda stilurilor deoarece proprietate clear se poate aplica oricărui element).

Exemplu:

Textul următor dintr-un document HTML

Şi dacă ramuri bat în geam,<BR>De ce nu tai copacul?

Are ca efect afişarea în browser:

Şi dacă ramuri bat în geam,

De ce nu tai copacul?

2. Titluri (elementul Hi)

Sintaxa:

<H1>Titlu de nivel 1</H1>

<H2>Titlu de nivel 2</H2>

<H3>Titlu de nivel 3</H3>

<H4>Titlu de nivel 4</H4>

<H5>Titlu de nivel 5</H5>

<H6>Titlu de nivel 6</H6>

Atribute posibile:

· ALIGN = [ left | center | right | justify ] (alinierea orizontală)

· atribute comune (atribute core, atribute de internaţionalizare şi evenimente scriptabile)

Conţine:

· elemente de tip inline

Conţinut în:

· APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DEL, DD, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Descriere:

Titlurile sînt utilizate pentru ierarhizarea diferitelor secţiuni de text. HTML defineşte şase nivele pentru titluri, indicate în formatul <Hl> <H2>...<H6>. La afişare titlurile nu sînt numerotate, diversele navigatoare afişîndu-le astfel încît să iasă în evidenţă (centrat, îngroşat, subliniat, mărit, etc). Ele nu trebuie identate în document, identările fiind ignorate de navigatoare. Spre deosebire de titlul documentului (<TITLE> Titlul documentului </TITLE>), titlurile utilizate la structurarea documentului (<H1> Titlul de ordinul 1 </H1>) pot avea orice lungime.

H1 defineşte headerul (titlul) de nivel 1, adică cel mai important. În mod normal, într-un document nu trebuie să existe decît un singur astfel de header. Autorii nu trebuie să se bazeze pe dimensiunea fontului utilizat în acest caz, ci doar pe importanţa headerului (titlului) respectiv.

Autorii pot să sugere cum să apară titlurile prin folosirea stilurilor.

Exemplu:

1. Headerul H1 poate fi sugerat astfel:

h1 {

color: #c33;

background: transparent;

font-weight: bold;

text-align: center

}

2. Dimensiunile (normale) ale acestor taguri sînt:

<H1> Header 1 </H1>

<H2> Header 2 </H2>

<H3> Header 3 <H3>

<H4> Header 4 </H4>

<H5> Header 5 </H5>

<H6> Header 6 </H6>

3. Containere de text (stiluri ale unui bloc)

A. Paragrafe (elementul P)

Sintaxa:

<P> Paragraful conţinut </P>

Atribute posibile:

· ALIGN=[ left | center | right | justify ] (aliniere orizontală)

· atribute comune

Conţine:

· elemente inline

Conţinut în:

· ADDRESS, APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD

Descriere:

Prima versiune HTML specifică tag-ul <P> ca tag vid (fără un corespondent </P>. Cele mai multe navigatoare presupun că paragrafele sînt formatate de această manieră. Cînd întîlnesc un tag <P>, încep un nou rînd, lăsînd cîteva spaţii verticale (rînduri) libere între paragraful care tocmai s-a terminat şi cel care tocmai începe. În HTML 2.0 şi HTML 3.0, tag-ul paragraf este nevid <P>...</P>, tag-ul </P> fiind însă opţional, dar se recomandă folosirea lui cînd se folosesc style-sheet-uri.

Chiar dacă HTMLnu specifică un mod special de prezentare pentru acest tag, autorii o pot face, sugerînd, de exemplu, identarea paragrafului sau spaţierea prin intermediul style-sheet-urilor. De exemplu:

P { margin-top: 0; text-indent: 5% }

B. Containerul logic de tip bloc (elementul DIV)

Sintaxa:

<DIV>...</DIV>

Atribute posibile:

· ALIGN=[ left | center | right | justify ] (aliniere orizontală)

· atribute comune

Conţine:

· elemente inline şi elemente de tip bloc (block level)

Conţinut în:

· APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Descriere:

Acest element defineşte un container de tip bloc (block-level) generic, permiţînd autorilor să specifice diverse atribute globale blocului respectiv (cum ar fi, de exemplu, stilul sau limba). Cea mai importantă utilizare a acestui element este în combinaţie cu elementele CLASS, ID sau LANG, elemente definitorii în folosirea stilurilor (style-sheet). Atributul (depăşit) ALIGN sugerează alinierea orizontală a conţinutului diviziunii de text definită cu acest element, avînd ca argumente posibile: left, right, center şi justify. Un echivalent (alias) pentru valoarea center (<DIV ALIGN=center>) este elementul (preferabil a fi folosit ) <CENTER>. Elementul DIV are un echivalent la nivelul text – SPAN, utilizat în interiorul paragrafelor şi al elementelor de tip inline. De remarcat că browserele adaugă, de obicei, o linie nouă atît înainte cît şi după elementul DIV. De exemplu:

<P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>ccccc<P>ccccc</DIV>

va fi afişată astfel: (o linie goală)

aaaaaaaaa

bbbbbbbbb

ccccc

ccccc (şi apoi încă o linie goală)

C. Containerul logic de tip text/inline (elementul SPAN)

Sintaxa:

<SPAN>...</SPAN>

Atribute posibile:

· atribute comune

Conţine:

· elemente inline

Conţinut în:

· elemente inline şi elemente de tip bloc (block level)

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.

<!-- Exemplu de date pentru o bază de date: -->

<!-- Nume: Ion Ionescu, Tel: (51) 123-121, Email: ii@foo.ro -->

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

<!-- Nume: Victor Popescu, Tel: (51) 123-212, Email: pv@qwe.ro -->

<DIV id="client-popescu" class="client">

<P><SPAN class="client-titlu">Informaţii despre client:</SPAN>

<TABLE class="client-data">

<TR><TH>Nume:<TD>Popescu</TR>

<TR><TH>Prenume:<TD>Victor</TR>

<TR><TH>Tel:<TD>(51) 123-212</TR>

<TR><TH>Email:<TD>pv@qwe.ro</TR>

</TABLE>

</DIV>

D. Textul centrat (elementul CENTER)

Sintaxa:

<CENTER>Text Centrat</CENTER>

Atribute posibile:

· atribute comune

Conţine:

· elemente inline şi elemente de tip bloc (block level)

Conţinut în:

· APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Descriere:

Acest element defineşte un bloc al cărui conţinut este centrat orizontal. Este o prescurtare pentru elementul <DIV ALIGN=center>, dar rămîne folositor în special pentru tabele pe care le centrează (pe ele, nu conţinutul lor!!!) în pagină, evitînd folosirea lui <TABLE ALIGN=center> care nu este suportat de toate browserele.

Există două modalităţi de centrare a textului. Una cu ajutorul tag-ului <CENTER> iar cealaltă cu ajutorul atributului ALIGN care ia valoarea CENTER. ALIGN=CENTER este un atribut care poate fi utilizat în conjuncţie cu majoritatea tag-urilor.

Exemplu:

<CENTER>

<TABLE>

<TR ALIGN=center>

<TH SCOPE=col>Name</TH>

<TH SCOPE=col>Age</TH>

<TH SCOPE=col>Country</TH>

</TR>

<TR ALIGN=center>

<TD>Liam Quinn</TD>

<TD>20</TD>

<TD>Canada</TD>

</TR>

</TABLE>

</CENTER>

E. Textul preformatat (elementul PRE)

Sintaxa:

<PRE> text preformatat (conţine tab-uri, multe spaţii, etc) </PRE>

Atribute posibile:

· WIDTH=Număr (lăţimea unei linii)

· atribute comune

Conţine:

· elemente inline cu excepţia: IMG, OBJECT, APPLET, BIG, SMALL, SUB, SUP, FONT, BASEFONT

Conţinut în:

· APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Descriere:

Majoritatea documentelor HTML conţin text marcat cu tag-uri HTML. Aceasta face ca textul să fie afectat de restricţiile HTML în sensul că toate spaţiile suplimentare (tab-uri, mai multe spaţii, RETURN) să fie ignorate de către navigator. Afişarea acestor texte, aşa cum sînt ele, se poate face prin utilizarea tag-urilor <PRE> ... </PRE>. Toate spaţiile suplimentare cuprinse între aceste două tag-uri vor fi afişate aşa cum sînt. Aceasta ne permite utilizarea textului preformatat pentru afişarea tabelelor şi chiar a unei grafici rudimentare obţinute cu caractere ASCII. Textul preformatat este afişat în majoritatea cazurilor cu fontul Courier monospaţiat. Atributul WIDTH oferă informaţii despre lăţimea liniei, astfel ca browserul să aleagă un font şi o spaţiere adecvată, dar de obicei este ignorat.

Autorii care folosesc PRE trebuie să evite dependenţa de elementele înconjurătoare datorită modului specific de afişare (de la un browser la altul) a unui astfel de text. Se foloseşte în special la inserarea unor bucăţi de program (cod), pentru care eliminarea spaţiilor ar face citirea mult mai grea. Exemplu de cod Java inserat CA TEXT!!! într-o pagină HTML:

<PRE><CODE CLASS=Java>

class HelloWorld {

public static void main(String[] args) {

System.out.println("Hello World!");

}

}

</CODE></PRE>

CODE este un element care se utilizează pentru a oferi informaţie structurală.

F. Adrese (elementul ADDRESS)

Sintaxa:

<ADDRESS>Informaţii de contact</ADDRESS>

Atribute posibile:

· atribute comune

Conţine:

· elemente inline şi P

Conţinut în:

· APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Descriere:

Tag-ul adresă este utilizat pentru entităţile gen semnătură. De regulă este folosit la sfîrşitul documentelor, acolo unde sînt inserate informaţiile cu privire la autorul documentului, data publicării şi adresa de contact. De regulă, adresele sînt precedate de o linie orizontală iar informaţiile conţinute sînt afişate pe rînduri diferite cu ajutorul tag-ului <BR>.

Exemplu:

Dacă într-un document apar informaţiile de adresă de tipul:

<ADDRESS>

Most recent update: 28/01/99 <BR>

For more information contact &lt;<A HREF="mailto:lp@lp.ro"> lp@lp.com</A>&gt;

</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:

· APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Descriere:

Acest element este utilizat pentru citate mai lungi care pot conţine elemente de tip bloc (de exemplu P sau TABLE), spre deosebire de <Q> ... </Q> utilizat în citate scurte.

Atributul opţional CITE indică adresa sursei citate, oferind posibilitatea de verificare şi oferind referinţe suplimentare. Nu este însă suportat de toate browserele.

Punerea în evidenţă a citatelor se face de regulă prin identare diferită faţă de restul textului. De aceea, pînă la implementarea style-sheet-urilor, elementul se folosea mai ales pentru identarea unui bloc de text faţă de textul înconjurător. Acum această metodă este considerată depăşită.

Exemplu:

Citatul definit în modul următor:

<BLOCKQUOTE CITE="http://www.bibliomania.com/Fiction/xxx.html" >

...orice generalizare presupune într-o anumită măsură credinţa în unitate şi simplitatea naturii. <p>În ceea ce priveşte unitatea aici nu poate exista vreo dificultate.

</BLOCKQUOTE>

va apărea astfel:

"...orice generalizare presupune într-o anumită măsură credinţa în unitate şi simplitatea naturii.

În ceea ce priveşte unitatea aici nu poate exista vreo dificultate."

H. Citate scurte (elementul Q)

Sintaxa:

<Q> Citat scurt </Q>

Atribute posibile:

· CITE=URI (sursa de unde se citează)

· atribute comune

Conţine:

· elemente inline

Conţinut în:

· elemente inline şi elemente de tip bloc

Descriere:

Acest element este utilizat pentru citate scurte, care nu necesită paragrafe, spre deosebire de <BLOCKQUOTE> utilizat în citate lungi. Atributul opţional CITE indică adresa sursei citate, oferind posibilitatea de verificare şi oferind referinţe suplimentare. Nu este însă suportat de toate browserele.

Punerea în evidenţă a acestor citate se face de regulă prin introducerea lui între ghilimele, de fapt între simbolurile folosite pentru citate în limba în care este dat citatul, dacă aceasta este specificată cu elementul LANG. Astfel, nu este responsabilitatea autorului să pună aceste simboluri!

Exemplu:

Citatul definit în modul următor:

John said, <Q lang="en-us">I saw Lucy at lunch, she says <Q lang="en-us">Mary wants you to get some ice cream on your way home.</Q> I think I will get some at Ben and Jerry's, on Gloucester Road.</Q>

va apare (datorită specificării limbii engleze americane) astfel:

John said, "I saw Lucy at lunch, she told me 'Mary wants you to get some ice cream on your way home.' I think I will get some at Ben and Jerry's, on Gloucester Road."

4. Stilurile caracterelor

Utilizarea tag-urilor pentru paragrafe, titluri sau liste afectează textul ca un întreg schimbînd fontu-rile, spaţierea verticală, adăugînd o bulină sau un număr. Tag-urile pentru stilurile caracterelor afec-tează felul în care vor fi afişate numai anumite cuvinte sau chiar numai anumite caractere (de pildă afişîndu-le italic, îngroşat sau subliniat). Există două tipuri de stiluri ale caracterelor: stiluri logice şi stiluri fizice. Disticţia între stilurile logice şi fizice a fost importantă în era browserelor ce nu afişau decît text simplu (cum a fost, de exemplu, LYNX) şi nu erau capabile să afişeze texte italice, bold, etc, de aceea se recomanda folosirea stilurilor logice. Dar odată cu apariţia browserelor de tip GUI nu mai există nici un motiv pentru a evita stilurile fizice sau pentru a ţine cont de distincţia dintre ele (B şi STRONG vor apare în multe din aceste browsere la fel, fără a fi însă siguri de aceasta). Se recomandă astfel în primul rînd consistenţa de-a lungul textului atunci cînd se doreşte scoaterea în evidenţă a unei porţiuni de text.

4.1. Stilurile logice

Tag-urile pentru stilurile logice indică doar cum anume să fie utilizat textul marcat nu şi cum anume să fie afişat. Din acest punct de vedere sînt asemănătoare tag-urilor folosite la marcarea paragrafelor sau titlurilor. Tag-urile stilurilor logice indică doar faptul că textul este o definiţie, o bucată de cod sau doar o porţiune de text care trebuie scoasă în evidenţă în raport cu contextul. Este complet la latitudinea navigatorului (şi uneori, a utilizatorului acestuia prin anumite setări ale browserului) să determine cum anume va fi prezentat textul marcat cu aceste tag-uri, dacă va fi îngroşat, italic sau evidenţiat în alt mod.

Toate tag-urile stilurilor logice sînt nevide. Există mai multe tipuri de tag-uri pentru aceste stiluri:

Tag	Utilizare
</EM> ... </EM>	Text accentuat
<STRONG> ... </STRONG>	Textul marcat va fi mai puternic accentuat
<CODE> ... </CODE>	Secvenţă de cod afişată cu font fix (ex Courier)
<SAMP> ... </SAMP>	Eşantion; similar lui <CODE>
<KBD> ... </KBD>	Text tastat de utilizator
<VAR> ... </VAR>	Nume de variabilă
<DFN> ... </DFN>	Definiţie (cuvînt care va fi definit)
<CITE> . . </CITE>	Un scurt citat
<DFN>	Definiţia unui termen
<Q>	Un citat scurt, în interiorul unui paragraf.
<ACRONYM>	Un acronim
<ABBR>	O abreviere
<INS>	Un text inserat (un document, de pildă)
<DEL>	Text marcat ca şters
<SUB>	Indice
<SUP>	Exponent

4.2. Stilurile fizice

Tag-urile pentru stilurile fizice indică navigatorului cum anume să fie afişat textul marcat, de pildă îngroşat (bold), italic sau uniform (monospaţiat) spaţiat (asemănător textului produs de maşinile de scris). Utilizarea stilurilor fizice are neajunsul că dacă navigatorul nu poate afişa acel stil el îl va substitui cu un altul. Tag-urile stilurilor fizice sînt:

Tag	Utilizare
<B> ... </B>	Text îngroşat (aldin)
<I> ... </I>	Textul italic (cursiv)
<U> ... </U>	Text subliniat
<S> ... </S> sau <STRIKE> ... </STRIKE>	Text tăiat
<BIG> ... </BIG>	Text afişat cu un font mai mare decît restul
<SMALL> ... </SMALL>	Text afişat cu un font mai mic decît restul
<TT> ... </TT>	Text monospaţiat

Exemplu: Utilizarea acestor taguri:

<P><b>bold</b>, <i>italic</i>, <b><i>bold italic</i></b>, <tt>teletype text</tt>, and

<big>big</big> and <small>small</small> text.

poate produce efecte ca în figura următoare:

5. Elemente de modificare a fontului caracterelor

A. Dimensiunea fontului

Sintaxa:

<FONT> Text cu font schimbat</FONT>

Atribute posibile:

· SIZE = Dimensiune (dimensiunea fontului)

· COLOR = Culoarea (culoarea fontului)

· FACE = Felul fontului (felul fontului/font face)

· atribute core

· atribute de internaţionalizare

Conţine:

· elemente inline

Conţinut în:

· inline elements, block-level elements, cu excepţia lui PRE

Descriere:

Tag-urile <FONT> ... < / FONT>, împreună cu atributul SIZE permit modificarea dimensiunii fontului de bază, a cărui valoare implicită este 3 (specificată printr-o altă extensie, şi anume <BASEFONT>, font de bază care are de asemenea atributul SIZE). Valorile atributului SIZE sînt între 1 şi 7. Dimensiunea fontului poate fi specificată şi relativ la fontul de bază, situaţie în care valorile lui SIZE sînt între -3 şi +4.

Acest tag, total depăşit în HTML 4.0, este folosit pentru modificări rudimentare ale caracteristicilor fontului cu care e afişat textul. Folosirea acestuia introduce numeroase probleme legate de accesibilitatea pe diverse platforme (care pot să nu aibă instalat un anumit font, de exemplu), probleme ce se pot evita prin utilizarea stilurilor (style-sheet).

Exemplu: Dimensiunile fonturilor (văzute în browsere) sînt:

FONT SIZE=1

FONT SIZE=2

FONT SIZE=3

FONT SIZE=4

FONT SIZE=5

FONT SIZE=6

FONT SIZE=7

Exemplu: Dimensiunile fonturilor (văzute în browsere) specificate relativ arată astfel:

Exemplu: Următorul fragment de text, descris cu aceste caracteristici, arată ca în figura de mai jos:

<FONT FACE="ARIAL" SIZE=2 COLOR="#339966">

<H1>The Scariest Jungle</H1>

</FONT>

<FONT FACE="ARIAL" SIZE=2>

Follow the map to see <I>lions</I> and <I>tigers</I> and <I>bears</I>.

<B>Oh, my!</B>

</FONT>

B. Stabilirea fontului de bază

Sintaxa:

<BASEFONT>

Atribute posibile:

· SIZE = Dimensiune (dimensiunea fontului)

· COLOR = Culoarea (culoarea fontului)

· FACE = Fel (felul fontului/font face)

· ID = ID (identificator)

Conţine:

· nimic

Conţinut în:

· inline elements, block-level elements, cu excepţia lui PRE

Descriere:

Spre deosebire de FONT, tagul BASEFONT modifică fontul de bază, aplicîndu-se tuturor elementelor care urmează, cu excepţia titlurilor (Hn). Chiar dacă nu e specificat, utilizarea lui BASEFONT în tabele (cu elementul TABLE) produce efecte imprevizibile şi diferite, de la browser la browser.

Acest tag, total depăşit în HTML 4.0, este folosit pentru modificări rudimentare ale caracteristicilor fontului cu care e afişat textul. Folosirea acestuia introduce numeroase probleme legate de accesibilitatea pe diverse platforme (care pot să nu aibă instalat un anumit font, de exemplu), probleme ce se pot evita prin utilizarea stilurilor (style-sheet).

Atributul SIZE specifică dimensiunea fontului ce se doreşte folosit, dimensiune dependentă de browser, pe o scală de la 1 la 7, cu o valoare implicită de 3. Atributele COLOR şi FACE, suportate foarte slab sugerează culoarea şi felul fontului. Mult mai bine suportată şi mai adecvată este folosirea style-sheet-urilor pentru aceste atribute.

4.2. Definirea şi utilizarea listelor

HTML oferă mai multe mecanisme prin care să se poată defini liste de informaţii, avînd în vedere larga utilizare a acestora. Există mai multe feluri de liste, toate avînd însă cîteva elemente comune:

· Întreaga listă este încadrată de tag-uri de început şi de sfîrşit de listă: <UL> şi </UL>, <OL> şi </OL>, etc.

· Fiecare element al listei are propriul lui tag: <DT> şi <DD> pentru listele glosar şi <LI> pentru toate celelalte liste.

Există trei tipuri standard de liste: neordonate (UL), ordonate (OL) şi liste de definiţii (DL). Se mai pot defini şi liste de tip MENU şi DIR (definite iniţial în 2.0) dar care sînt acum considerate depăşite şi vor fi afişate la fel ca UL si DL.

1. Definirea listelor ordonate (cu elemente numerotate)

Sintaxa:

<OL>

<LI> Primul element al listei ordonate

<LI> Al doilea element

<LI> A1 treilea element...

</OL>

Atribute posibile:

· TYPE=[ 1 | a | A | i | I ] (stilul de numerotare)

· START=Number (numărul de început al elementelor)

· COMPACT (afişare compactă)

· atribute comune

Conţine:

· unul sau mai multe elemente LI

Conţinut în:

· APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Descriere:

Listele ordonate încep cu <OL> şi se încheie cu </OL> (OL este o abreviere de la Ordered List) şi fiecare element este introdus în listă cu ajutorul tag-ului vid <LI>. Cînd navigatorul interpretează o listă ordonată el numerotează secvenţial fiecare element întîlnit (nu se numerotează în document). Identarea în textul original (cel ce va fi afişat) nu este obligatorie, folosindu-se doar pentru a putea fi mai uşor reperate listele din restul textului.

Atributul TYPE sugereză stilul de numerotare. Valorile pe care le poate lua sînt (literele mici diferă de cele mari):

· 1 (numere zecimale: 1, 2, 3, 4, 5, ...)

· a (literele mici ale alfabetului: a, b, c, d, e, ...)

· A (literele mari ale alfabetului: A, B, C, D, E, ...)

· i (numerele Romane scrise cu litere mici: i, ii, iii, iv, v, ...)

· I (numerele Romane scrise cu litere mari: I, II, III, IV, V, ...)

Atributul START indică primul număr folosit la numerotarea elementelor listei.

Exemplu:

Prepararea unei căni de ceai.

<OL>

<LI> Puneţi apa la fiert

<LI> Puneţi ceaiul preferat într-o cană de porţelan

<LI> Turnaţi apa fierbinte peste ceai şi acoperiţi cana

<LI> Aşteptaţi 3 minute

</OL>

2. Definirea listelor neordonate (nenumerotate)

Sintaxa:

<UL>

<LI> Primul element al listei neordonate

<LI> Al doilea element

<LI> A1 treilea element...

</UL>

Atribute posibile:

· TYPE=[ disc | square | circle ] (stilul bulletului folosit pentru elemente)

· COMPACT (afişare compactă)

· atribute comune

Conţine:

· unul sau mai multe elemente LI

Conţinut în:

· APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Descriere:

Diferenţa faşă de lista ordonată (OL) este că elementele nu vor apare numerotate, ele fiind afişate identat, unele sub altele, precedate de un semn specific elementelor listelor (de exemplu bulina •). Acest semn este determinat de atributul TYPE şi poate lua valorile:

· disc (cerc umplut/plin)

· square (pătrat)

· circle (circumferinţa unui cerc)

Acestea arată, de obicei, astfel:

Exemplu: Un meniu la restaurant poate fi descris astfel:

<UL>

<LI> Ciorbă de burtă

<LI> Ciorbă de perişoare

<LI> Alte ciorbe

</UL>

Listele neordonate trebuie marcate cu tag-urile <UL> iar elementele listei se introduc la fel ca în listele ordonate. Rezultatul este o listă ale cărei elemente sînt marcate cu buline sau alte caractere (dacă „nivelul“ pe care apar este mai mare de 1). Forma lor (pentru sub-liste) poate fi schimbată definind o nouă listă în interiorul primeia, după modelul următor:

<UL>

<UL>

<LI> Element al noii liste

<LI> Un alt element, etc

</UL>

</UL>

3. Definirea elementelor unei liste (tagul LI)

Sintaxa:

<LI> Element al listei... </LI>

Atribute posibile:

· TYPE=[ disc | square | circle | 1 | a | A | i | I ] (stilul de marcare a elementelor listei)

· VALUE=Number (numărul elementului din secvenţă)

· atribute comune

Conţine:

· elemente inline şi elemente de tip bloc (bloc level)

Conţinut în:

· OL, UL, MENU, DIR

Descriere:

Elementele listelor se definesc folosind acest tag. Atributul VALUE poate specifica numărul din secvenţă care se „atribuie“ acelui element. Atributul TYPE specifică elementul grafic/alfabetic ce va marca elementul respectiv. Valorile pe care le poate lua sînt:

· Valorile pentru LI în UL, DIR sau MENU:

· disc (cerc umplut/plin)

· square (pătrat)

· circle (circumferinţa unui cerc)

· Valorile pentru LI în OL:

· 1 (numere zecimale: 1, 2, 3, 4, 5, ...)

· a (literele mici ale alfabetului: a, b, c, d, e, ...)

· A (literele mari ale alfabetului: A, B, C, D, E, ...)

· i (numerele Romane scrise cu litere mici: i, ii, iii, iv, v, ...)

· I (numerele Romane scrise cu litere mari: I, II, III, IV, V, ...)

4. Definirea listelor de definiţii (glosar)

Sintaxa:

<DL>

<DT> Termen care urmează să fie definit </DT>

<DD> Definiţia termenului </DD>

<DT> Alt termen </DT>

<DD> Altă definiţie </DD>

</DL>

Atribute posibile:

· COMPACT (afişare compactă)

· atribute comune

Conţine:

· unul sau mai multe elemente DT sau DD

Conţinut în:

· APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Descriere:

Listele de definiţii (uneori numite şi liste glosar) sînt uşor diferite faţă de celelalte liste. Fiecare element al listei este format din două părţi: termenul de definit şi definiţia. Listele de definiţii încep cu <DL> şi se termină cu </DL>. Termenii care trebuie definiţi sînt inseraţi cu ajutorul etichetei <DT> iar definiţiile corespunzătoare se introduc cu ajutorul etichetei <DD>.

O listă de definiţii poate avea mai mulţi termeni pentru o definiţie dată, precum şi mai multe definiţii pentru un termen. De asemenea se poate da un termen fără o definiţie corespunzătoare şi vice versa (!), dar o astfel de structură are sens în cazuri extrem de rare.

Listele de definiţii sînt formatate de navigatoare astfel încît termenii şi definiţiile sînt separaţi prin linii iar marginile definiţiilor sînt identate. Cu ajutorul atributului COMPACT, <DL COMPACT>, lista de definiţii ar trebui să fie formatată pe o suprafaţă ecran mai mică. Se pare însă că majoritatea navigatoarelor ignoră acest atribut.

O listă de acest tip poate fi adaptată şi pentru utilizarea cu structuri care nu sînt termeni stricţi şi definiţii (în sensul uzual), această practică fiind justificată cînd alte elemente HTML nu pot descrie adecvat acea structură. De exemplu, o listă cu programul unei persoane dintr-o săptămînă ar putea fi definită astfel:

<H1>Programul săptămînal</H1>

<DL CLASS=calendar>

<DT>21 ianuarie</DT>

<DD>

Minerii din Valea Jiului prezintă <CITE>Lupta cu jandarmii</CITE> în comuna Costeşti. Trebuie văzută.

</DD>

<DT>22 ianuarie</DT>

<DD>

Marius Tucă Show, de la 7:00 la 9:00, invitaţie la <ABBR TITLE=Street>St.</ABBR> Ploieştului numărul 1

</DD>

</DL>

5. Definirea termenilor unei liste de definiţii (tagul DT)

Sintaxa:

<DT> Element al listei... </DT>

Atribute posibile:

· atribute comune

Conţine:

· elemente inline

Conţinut în:

· DL

Descriere:

DT defineşte un termen într-o listă de definiţii. Tagul de sfîrşit este opţional dar se recomandă a fi folosit pentru a preveni anumite erori cînd se folosesc stilurile (style-sheets). DT nu poate conţine elemente de tip bloc (ca de exemplu P sau Hn). În general tagul este urmat de un element DD pentru denirea termenului respectiv. Un termen poate avea mai multe definiţii asociate cu el, după cum şi o singură definiţie poate avea mai mulţi termeni.

6. Definirea definiţiei unui termen al unei liste de definiţii (tagul DD)

Sintaxa:

<DD> Element al listei... </DD>

Atribute posibile:

· atribute comune

Conţine:

· elemente inline şi elemente de tip bloc (bloc level)

Conţinut în:

· DL

Descriere:

Elementul DD oferă definiţia unui termen dintr-o listă de definiţii. Tagul de sfirşit este opţional dar se recomandă a fi folosit pentru a preveni anumite erori cînd se folosesc stilurile (style-sheets). DT poate conţine elemente de tip bloc (ca de exemplu P, Hn, TABLE sau chiar DL). Astfel listele de definiţii pot fi îmbricate.

7. Definirea listelor de tip meniu şi director

Sintaxa:

<MENU>

<LI> Primul element din meniu

<LI> Al doilea element din meniu

<LI> Al treilea element din meniu

</MENU>

<DIR>

<LI> fişiere/

<LI> aplicaţii/

<LI> poştă/

</DIR>

Descriere:

Meniurile sînt liste simple de elemente sau scurte paragrafe care nu sînt inserate cu ajutorul numerelor sau bulinelor. Afişarea lor se face prin identare diferită sau o formatare diferită de restul textului. Listele director sînt şi mai scurte decît listele meniu, sînt identate şi formatate în coloane de către navigatoare, în mod asemănător listelor director din Unix. Meniurile au fost proiectate pentru a fi folosite ca liste cu o singură coloană.

În practică un browser va afişa listele definite cu DIR şi MENU exact ca cele definite cu UL!

8. Imbricarea listelor

Imbricarea listelor se realizează simplu: se inserează o nouă listă în interiorul primei liste. Se pot insera liste neordonate în interiorul celor ordonate si viceversa. Felul în care apar afişate listele imbricate diferă mult de la un navigator la altul.

Exemplu: Meniul (mai complet) de la restaurant:

<OL>

<LI> Ciorbe

<UL>

<LI> Ciorbă de burtă

<LI> Ciorbă de perişoare

<LI> Alte ciorbe

</UL>

<LI> Felul doi

<LI> Desert

</OL>

9. Formatarea listelor

Pentru liste, navigatorul este acela care hotărăşte forma bulinelor sau schema de numerotare. Netscape a introdus cîteva atribute prin care se oferă un mai mare control asupra tipurilor de buline utilizate pentru marcarea elementelor din listele neordonate.

Atributul TYPE determină forma „bulinei“:

TYPE=DISC, pentru o bulină circulară, compactă (implicită)

TYPE=CIRCLE, pentru un contur circular

TYPE=SQUARE, pentru un contur de forma unui pătrat

Exemplu:

<UL>

<LI TYPE=DISC >Disc

<LI TYPE=CIRCLE>Cerc

<LI TYPE=SQUARE>Patrat

</UL>

Pentru listele ordonate, atributul TYPE are un alt set de valori care indică schema de numărare:

TYPE=1, implicit, ordonează elementele listei prin numere arabe (1, 2, 3,...)

TYPE=A, ordonează elementele listei prin litere mari (A, B, C, ...)

TYPE=a, ordonează elementele listei prin litere mici (a, b, c, ...)

TYPE=I, ordonează elementele listei prin numere romane mari (I, II, III, ...)

TYPE=i, ordonează elementele listei prin numere romane mici (i, ii, iii, ...)

4.3. Tag-uri (elemente) pentru legături hypertext

Adevărata putere a limbajului HTML stă în capacitatea sa de a include în documentele HTML a unor legături (link-uri) către alte „documente“ de pe Web. Legăturile transformă documentele simple afişate doar pe ecran într-o „bibliotecă universală“ în care materialele dorite a fi consultate vin la cititor aproape instantaneu, iar documentele statice devine în acest fel documente interactive.

Legătura/link-ul (hyperlegătura, hyperlink-ul) este construcţia de bază, putînd fi definită ca o conexiune de la o resursă Web la alta. Chiar dacă pare un concept simplu, ea a fost forţa primară care a asigurat succesul Webului. O legătură (link) are două capete, numite uneori ancore, şi o direcţie. Link-ul porneşte de la ancora sursă şi indică spre ancora destinaţie care poate fi orice resursă Web (un document HTML, un element din interiorul unui document HTML, o imagine, un clip, un sunet, un program, etc).

Acţiunea implicită asociată cu o legătură este aducerea (încărcarea) în navigator (browser) a resursei către care indică legătura. Acest comportament este obţinut de obicei (şi implicit) prin selectarea legăturii (de exemplu cu mouse-ul prin clic, de la tastatură, etc). Elementul esenţial al unei legături este tagul <A>...</A> utilizat pentru marcarea (hyper)legăturilor. El are întotdeauna atribute asociate pentru a indica ce tip de legătură este. Există două tipuri de bază:

1. Ancora NUME care marchează o locaţie particulară din document ca ţintă la care pot indica (la care se pot cupla) alte documente; atributul definitoriu este NAME (sau un echivalent: un alt element împreună cu atributul ID).

Exemplu:

<A HREF="document.html">Text activ</A>

HREF (provenind de la Hypertext REFerence = referinţă hypertext) este atributul care are ca valoare numele documentului HTML care va fi adus dacă textul dintre tag-uri (afişat de navigator astfel încît să iasă în evidenţă) va fi selectat.

2. Ancora LEGĂTURĂ, indicată de atributul HREF, care indică browserului să „sară“ la altă resursă (să o încarce), dacă legătura curentă este selectată.

Exemplu:

<P><A href="#section1">Introduction</A><BR>

...

<H2 id="section1">Introduction</H2>

...section 1...

Textul „Introduction“ este un text activ care dacă este selectat are ca efect „saltul“ la resursa identificată prin numele „section1“. Această resursă este de fapt o porţiune din document care începe cu titlul (headerul H2) care are ca atribut id="section1".

Sintaxa:

<A>...</A>

Atribute posibile:

· HREF=URI (referinţa hypertext)

· NAME=CDATA (destinaţia)

· REL=LinkTypes (relaţii către legătură)

· REV=LinkTypes (relaţii de la legătură)

· TYPE=ContentType (tipul conţinutului destinaţiei)

· TARGET=FrameTarget (frame-ul în care se aduce resursa indicată de legătură)

· HREFLANG=LanguageCode (limba în care e scrisă legătura)

· CHARSET=Charset (setul de caractere utilizat la scrierea legăturii)

· ACCESSKEY=Character (combinaţie de taste de acces / shortcut key)

· TABINDEX=Number (poziţia în ordinea de parcurgere cu TAB)

· SHAPE=[ rect | circle | poly | default ] (hartă senzitivă / client-side image map)

· COORDS=Coords (hartă senzitivă / client-side image map)

· ONFOCUS=Script (elementul a primit focusul)

· ONBLUR=Script (elementul a pierdut focusul)

· atribute comune

Conţine:

· elemente inline, fără A

Conţinut în:

· elemente de tip block-level, elemente de tip inline, fără A

Descriere:

Pentru crearea unei legături este nevoie de două lucruri:

· Numele documentului / resursei la care se face legătura

· Textul care va deveni activ

Marcarea textului activ în documentul iniţial (de la care porneşte legătura) se face cu tag-ul nevid <A>...</A>. Tot textul dintre tag-ul de început (<A>) şi cel de sfîrşit (</A>) va deveni capătul legăturii afişat pe ecran şi va fi prezentat de navigator altfel decît textul obişnuit. <A> (numită şi tag-ul ancoră) include şi informaţii suplimentare despre legătură (atribute). Navigatorul utilizează ancora pointer dintr-un document pentru a găsi cel de-al doilea document. Pentru a identifica ancorele pointer se marchează o porţiune de text (sau o imagine) astfel încît navigatorul să le deosebească de restul documentului.

Atributul HREF (de la Hypertext REFerence) este utilizat pentru specificarea URI-ului documentului ţintă. Este de fapt modul de localizare a documentului care va fi adus la selectarea textului activ. Atributul suplimentar TYPE poate fi folosit pentru a indica tipul (în categorisirea Internet) a resursei către care se indică, permiţînd browserelor care nu pot interpreta (afişa) un anumit tip de resurse să nu le mai încarce. Acest atribut specifică legăturile către resursele Internet în concordanţă cu diverse protocoale de acces a acestora, protocoale specificate, ca parte integrantă din URI. Cele mai utilizate protocoale:

· HTTP:// - legătură la un alt document HTML

· FTP:// - legătură (anonimă) la un server FTP

· MAILTO:// - se activează editorul de e-mail pentru a se compune un mesaj şi a se trimite la adresa specificată

· TELNET:// - legătură la o adresă Telnet

· WAIS:// - legătură la un server de indexare WAIS

· USENET:// - legătură la o adresă Usenet

· GOPHER:// - legătură la un server Gopher

Atributul opţional TITLE indică titlul documentului către care punctează legătura (o scurtă descriere a acesteia) şi poate fi astfel afişat împreună cu URL-ul (sub forma unui tool-tip). Uneori, dacă legătura este de tip „mailto“, valoarea acestui atribut e folosită ca subiect al e-mail-ului care se va trimite.

Atributul NAME defineşte o destinaţie pentru o legătură. De exemplu, un document ce conţine:

<H1><A NAME=foo>My Heading</A></H1>

defineşte o destinaţie pentru legături numită „foo“. Se poate astfel folosi HREF="#foo" într-un element A din acelaşi document, sau HREF="somedoc.html#foo", din alt document.

Un element A nu poate conţine un alt element A, astfel că trebuie avut în vedere că ancorele ce definesc nume de secţiuni NU pot conţine ancore care indică legături. Dar se pot utiliza atît NAME cît şi HREF într-un singur element A pentru a se evita aceste probleme.

ID este atributul care înlocuieşte atributul NAME şi care poate fi folosit cu aproape orice element pentru a defini o destinaţie. Exemplul anterior poate fi scris:

<H1 ID=foo>My heading</H1>

Nu toate browserele oferă suport însă pentru ID, astfel că NAME se mai păstrează încă. Atît NAME cît şi ID trebuie să fie unice într-un document şi să difere şi prin altceva în afara literelor mici/mari. Valorile admise trebuie să înceapă cu o literă din intervalul A-Z sau a-z şi trebuie să urmeze numai caracterele A-Z, a-z, 0-9, liniuţa de despărţire, de subliniere, virgula, punctul. Cînd este folosit ca şi destinaţie a unei legături, numele astfel definit este case sensitive (literele mari/mici diferă).

Atributele REL şi REV indică relaţiile între o ancoră şi resursa indicată de legătură. REL defineşte o relaţie de la documentul curent la cel indicat de legătură, în timp ce REV defineşte o relaţie în sensul opus. De exemplu:

<A HREF="foo.html" REL=glossary>...</A>

indică faptul că foo.html este glosar pentru documentul curent, în timp ce

<A HREF="bar.html" REV=subsection>...</A>

indică faptul că documentul curent este o subsecţiune a lui bar.html.

Atributul TARGET indică în ce frame să se încarce resursa indicată de legătură. Dacă nu există un astfel de frame (cadru-pagină) se va deschide o feeastră nouă. Se pot folosi şi nume speciale (care încep cu o liniuţă de subliniere) de frame-uri:

· _blank – fereastră nouă

· _self – în fereastra curentă (utilă pentru suprapunerea unui atribut BASE TARGET)

· _parent – în părintele frame-ului din frameset

· _top – în întreaga fereastră, fără frame-uri

Atributele SHAPE şi COORDS oferă posibilitatea utilizatorului să specifice o hartă de imagini senzitive (client-side image maps, prin intermediul elementului OBJECT), adică un număr oarecare de zone în interiorul unei imagini şi un set de documente/resurse către care să indice fiecare zonă anterior definită. Valoarea implicită pentru SHAPE este rect, care defineşte o regiune dreptunghiulară folosind COORDS="left, top, right, bottom". Alte valori posibile:

· circle – specifică un cerc; se utilizează: COORDS="center-x, center-y, radius";

· poly – specifică un poligon; se utilizează: COORDS="x₁, y₁, x₂, y₂, ..., x_N, y_N".

· default – specifică întreaga imagine (ce a rămas eventual nedefinită);

Coordonatele sînt relativ la colţul stînga sus al imaginii şi pot fi exprimate în pixeli sau procente. O rază a unui cerc dată ca procent este calculată relativ la cea mai mica dimensiune a imaginii/obiectului (lăţimea sau înălţimea). Dacă două sau mai multe regiuni se suprapun are prioritate cea definită întîi.

Exemple:

· <A HREF="album.html">My photo album</A>

· <A HREF="../images/me.jpg">Picture of me</A>

· <A HREF="/sounds/song.mid" TYPE="audio/midi" ACCESSKEY=A>Cintecel (5 kB MIDI)</A>

· <A HREF="section2.html" TARGET="content" TITLE="Elements of the HEAD" REL=next>Section 2</A>

· <A HREF="mailto:lp@lp.com" TITLE="Feedback on Document">lp@lp.com</A>

· <A HREF="http://www.lp.com/" TARGET="_top">Web Design</A>

· <A HREF="http://babel.alis.com:8080/langues/iso639.zh.htm" CHARSET="big5" HREFLANG=zh>ISO 639</A>

Legăturile se pot face la documente locale (care rezidă pe acelaşi server (dar nu neapărat în acelaşi director), la documente aflate pe alte servere (legături îndepărtate) sau intern (în interiorul unui document; acelaşi în cazul în care documentul este mare şi se doreşte un salt pînă la o secţiune a sa, sau o secţiune a unui alt document, atunci cînd se doreşte o indicare mai rafinată a părţii din resursa-document ce se referă).

1. Legături locale

Legăturile locale se fac utilizînd căi (referinţe) relative sau absolute.

A. Referinţe absolute

Cea mai simplă legătură se realizează precizînd calea relativă a documentului. Selectarea unei legături fără specificarea nici unui alt element suplimentar de localizare, determină serverul să caute documentul solicitat în acelaşi folder ca şi documentul în care a început legătura.

Căile relative pot include directoare sau pot indica o cale pe care trebuie să o urmăm pentru a naviga la documentul ţintă, pornind de la documentul pointer (de start). O cale poate include şi direcţii, cum ar fi, de exemplu, coboară două directoare spre rădăcină şi apoi mergi în sus două directoare pentru a găsi documentul.

Specificarea căilor relative în legături se face ca în Unix, indiferent de sistemul pe care este găzduită pagina/paginile HTML. Asta înseamnă că numele de directoare sau foldere sînt separate de slash-uri (/) şi referirea la directorul părinte se face cu două puncte (..).

Iată un tabel cu referirea relativă a documentelor:

Cale	Semnificaţie
HREF="doc.html"	doc.html se găseşte în directorul curent
HREF="dir/doc.html"	doc.html este localizat în folderul (directorul) dir
HREF="dir/subdir/doc.html"	doc.html se află în directorul dir, subdirectorul subdir
HREF="../doc.html"	doc.html se găseşte într-un director aflat cu un nivel mai sus decît directorul curent
HREF="../../subdir/doc. 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:

Cale	Semnificaţie
HREF="/home/pub/doc.html"	doc.html se găseşte în directorul /home/pub
HREF="/c|/pub/doc.html"	doc.html este localizat pe discul c: în directorul /pub
HREF="/Server/Site/doc.html"	doc.html se află pe discul Server, în folderul Site (Macintosh)

Ori de cîte ori este posibil trebuie folosite referinţele relative deoarece cele absolute nu sînt portabile. Specificarea relativă a localizării documentelor permite menţinerea uşoară şi mutarea documentelor HTML de pe un sistem pe altul (sau dintr-un loc în altul chiar pe acelaşi sistem) fără modificări majore în surse.

2. Legături îndepărtate

Marcarea documentelor HTML pentru legături îndepărtate se face asemănător cu marcarea în cazul referinţelor la documente locale. Tag-ul de început este <A> şi cel de sfîrşit </A>. Textul dintre tag-uri va fi afişat diferit faţă de restul documentului pentru a arăta că este selectabil. Referinţa hypertext (HREF) va conţine însă URL-ul documentului, de forma:

<A HREF="http://www.w3.org/">The World Wide Web Consortium</A>

3. Legături interne (către secţiunile unui document/resursă)

Ideea este de a realiza o legătură nu numai între un anumit punct al unui document şi un alt document ci una ceva mai exactă, între un anumit punct al unui document şi un alt anumit punct al aceluiaşi document sau al altuia. Acest lucru se realizează prin crearea unei ancore în locul din document unde dorim să ne conducă legătura şi apoi în realizarea unei legături care va indica atît documentul referit cît şi paragraful (sau secţiunea de document) la care facem referire.

Crearea unei ancore se face în aproape acelaşi fel ca şi crearea unei legături, utilizînd tag-ul <A> numai că de această dată îi este asociat un alt atribut: NAME. Atributul va avea ca valoare un anumit cuvînt (sau grup de cuvinte) care vor fi folosite pentru a face referinţă la această anumită secţiune.

Exemplu: <A NAME="cuvînt_cheie">Paragraf ţintă</A>

Atunci cînd se va face referinţă la această ancoră, documentul ţintă va fi derulat de către navigator pînă cînd textul dintre <A> şi </A> va ajunge în partea de sus a ecranului. Spre deosebire de legături, ancorele nu sînt afişate diferit faţă de restul documentului în documentul ţintă.

Referirea la o ancoră în documentul pointer (documentul de la care porneşte legătura) se face în acelaşi fel ca şi cînd ar fi referit un document întreg (cu URL-ul documentului ca valoare a atributului HREF) şi prin includerea numelui ancorei, precedat de semnul #.

Exemplu:

<A HREF="/cale/doc.html#cuvint cheie">Salt la paragraful ţintă</A>

Legătura cere navigatorului să încarce documentul doc.html a cărui cale este precizată în HREF şi să deruleze doc.html pînă cînd „Paragraf_ţintă“ ajunge în partea de sus a ecranului.

Ancorele pot fi create chiar în acelaşi document în care se găsesc şi legăturile în ideea de a uşura navigarea printr-un document mai mare. În acest caz, valoarea atributului HREF este chiar cuvîntul cheie. De pildă în cazul unui singur document organizat pe secţiuni, cuprinsul poate fi prezentat la începutul documentului şi poate avea legături care punctează spre diferitele secţiuni. Tot ce avem de făcut este să dăm nume ancorelor şi apoi să le referim în legături.

4.4. Imagini în documentele HTML

Imaginile inserate în documentele HTML îmbogăţesc paginile Web nu numai sub raport decorativ; bogăţia informaţiei şi noile posibilităţi de organizare a resurselor fac din imagini un element indispensabil din publicaţiile Web. Inserarea se face într-un mod asemănător unei legături: se specifică URL-ul imaginii ce se inserează, URL ce aparţine însă unei resurse diferite de documentul propriu-zis (un alt fişier!), chiar dacă apare în aceeaşi pagină în browser.

1. Formatele suportate

Există două tipuri de imagini care pot fi văzute de navigatoare: imagini inline (în text, line = rînd) şi imagini externe.

Imaginile inline sînt imagini care apar direct în paginile Web fiind încărcate odată cu pagina (presupunînd că se utilizează un navigator grafic şi că nu este inhibată încărcarea automată a imaginilor). O condiţie pentru ca imaginile să poată fi afişate este salvarea lor într-unul din formatele recunoscute de navigatoare: GIF sau JPEG. Fără multe amănunte, diferenţele principale între aceste formate sînt legate de dimensiune (la aceeaşi imagine formatul JPEG are o dimensiune mai mică, ceea ce înseamnă că se încarcă mai repede în paginile Web) şi de calitate (care este, de obicei, superioară la GIF, folosită atunci cînd imaginea ce se inserează trebuie să fie de o foarte bună calitate, rezoluţie sau adîncime de culoare).

Imaginile externe sînt imagini care nu sînt afişate direct la încărcarea paginii. Ele pot fi încărcate însă la cererea utilizatorului. Navigatoarele pot fi configurate să manipuleze fişiere imagine de diferite tipuri prin utilizarea unor aplicaţii auxiliare aşa că imaginile externe pot fi salvate în formate diferite: PCX, XBM, PICT, etc. Există mai multe programe de editare de imagine care sînt capabile să deschidă imagini în formate diferite şi să le convertească în formatul JPEG/GIF, între cele mai răspîndite fiind Adobe Photoshop şi Paint Shop Pro. Există şi programe care fac numai conversia în GIF, cum ar fi De Babelizer pe Mac sau pachetul de filtre PBM pentru UNIX.

Două trăsături fac noile formate GIF (numite GIF89) mai deosebite: formatul întreţesut şi fundalul transparent. Imaginile transparente sînt imagini la care culoarea (sau modelul) din fundalul paginii va transpare, dînd senzaţia că imaginea pluteşte pe suprafaţa paginii. Înainte de a le converti (cu un program special) trebuie să ne asigurăm că imaginile au fundalul într-o singură culoare. Dacă fundalul este format din mai multe culori, chiar dacă acestea sînt apropiate ca tonalitate, numai una singură va fi făcută transparentă. Fundalul unei imagini se poate izola utilizînd un program de editare de imagine.

Întreţeserea (interlacing) nu schimbă felul în care este văzută imaginea în document ci doar aspectul ei în timp ce este încărcată. Pe măsură ce imaginea este adusă de pe Web, apariţia ei poate fi gradată, de la o imagine de rezoluţie joasă la una de rezoluţie mai înaltă. Pentru crearea acestui efect este nevoie nu numai ca imaginea să fie salvată într-un format special (GIF întreţesut) ci şi ca navigatorul să fie capabil să prezinte imaginea în timp ce aceasta este încărcată.

În mod normal, un fişier GIF este salvat în fişier linie cu linie (scan lines), începînd cu partea de sus a imaginii şi continuînd progresiv în jos. Dacă navigatorul poate afişa imaginile în timp ce acestea sînt încărcate, se vede mai întîi partea de sus a imaginii şi apoi tot mai mult din ea pe măsură ce informaţia imaginii ajunge pe sistem.

Imaginile întreţesute sînt salvate diferit. La început este salvată fiecare a opta linie (începînd cu prima), apoi fiecare a opta linie (începînd cu a patra), apoi fiecare a patra linie (începînd cu a treia), apoi restul rîndurilor.

La încărcarea imaginii fie liniile lipsă sînt umplute cu informaţie din liniile sosite deja (imaginea apare neclară pînă la încărcarea completă) fie sînt afişate doar liniile sosite (efect veneţian). Dacă navigatorul nu suportă imaginile întreţesute sau dacă este setat să aştepte pînă la sosirea întregii imagini înainte de afişare, efectul nu va fi observat.

Avantajul unui format întreţesut este că utilizatorul poate căpăta o idee despre ce anume reprezintă imaginea înainte ca aceasta să sosească în întregime şi poate hotărî dacă să aştepte să se încarce sau să oprească transferul. Unelte pentru crearea acestor efecte sînt destule.

2. Inserarea imaginilor în text

După convertirea imaginii într-un format suportat, aceasta poate fi inserată în document. Imaginile inline sînt specificate în HTML cu ajutorul tag-ului <IMG>. Acesta este un tag vid din aceeaşi familie cu <HR> şi <BR>.

Sintaxa:

<IMG>

Atribute posibile:

· SRC=URI (locaţia imaginii)

· ALT=Text (text alternativ)

· LONGDESC=URI (link la o descriere lungă)

· WIDTH=Length (lăţimea imaginii)

· HEIGHT=Length (înălţimea imaginii)

· USEMAP=URI (figură senzitivă - client-side image map)

· ISMAP (figură senzitivă - server-side image map)

· ALIGN=top|middle|bottom|left|right (alinierea imaginii)

· BORDER=Length (grosimea marginii)

· HSPACE=Pixels (spaţiu liber lăsat pe orizontală)

· VSPACE=Pixels (spaţiu liber lăsat pe verticală)

· atribute comune

Conţine:

· nimic

Conţinut în:

· elemente de tip inline, elemente de tip bloc (block-level elements), cu excepţia lui PRE

Descriere:

Atributul SRC indică URL-ul imaginii care va fi inserată în document. Dacă numele imaginii este „poza.gif“ şi imaginea se află în acelaşi director ca şi documentul HTML, atunci integrarea imaginii se face cu tag-ul: <IMG SRC="poza.gif">, iar pentru o imagine aflată în directorul imediat superior celui în care se află documentul, forma tag-ului este: <IMG SRC="../poza.gif">.

Specificarea căii către imagine se face urmînd aceleaşi reguli ca şi la specificarea URL pentru orice alt document/resursă. Dacă se utilizează aceeaşi imagine de mai multe ori în interiorul aceluiaşi document, este indicat să se facă referinţe relative (spre aceeaşi resursă!) în locul celor absolute pentru a permite navigatorului să folosească aceeaşi copie a resursei (din cache) şi a evita astfel ca acesta să aducă imaginea de pe server de mai multe ori.

Atributul ALT ia ca valoare textul care va fi afişat de navigatoarele care nu lucrează în modul grafic (sau care au inhibată funcţia de încărcare automată a imaginilor), iar LOWSRC="..." indică URL-ul unei imagini care va fi încărcată înaintea imaginii specificate în SRC. Valoarea atributului LOWSRC este de regulă URL-ul unei versiuni de o mai mică rezoluţie a imaginii specificate în SRC. Textul ce apare la ALT trebuie să indice (de obicei) funcţia acelei imagini (mai mult decît descrierea ei) avînd în vedere că trebuie folosit cînd imaginea nu e încărcată (şi nu mai apare sugestia dată de conţinutul acesteia).

Atributul WIDTH="..." rezervă un spaţiu (în pixeli) pentru lăţimea imaginii. Dacă imaginea este de altă lăţime, va fi scalată (redimensionată) astfel încît să încapă în (sau să umplă) spaţiul rezervat; iar HEIGHT="..." rezervă un spaţiu (în pixeli) pentru înălţimea imaginii. Dacă imaginea este de altă înălţime, va fi scalată/redimensionatăcorespunzător. Atenţie, însă: redimensionarea se face după algoritmi extrem de simpli şi rezultatele sînt extrem de departe de cele obţinute cu unelte adecvate. Utilitatea acestor atribute apare atunci cînd se specifică dimensiunile reale (adevărate) ale imaginii. În acest fel browserul va rezerva un spaţiu corect în pagină, dînd încă de la început imaginea reprezentării paginii respective.

Atributul VSPACE="..." stabileşte spaţiul dintre imagine şi textul aflat deasupra şi sub imagine (pe verticală), iar HSPACE="..." stabileşte spaţiul dintre imagine şi textul aflat la stînga şi la dreapta imaginii (pe orizontală). Sînt considerate depăşite, recomandîndu-se utilizarea style-sheet-urilor în locul lor.

Atributul BORDER="..." desenează o margine de grosimea specificată, în jurul imaginii şi dacă imaginea este activă, face marginea de asemenea activă. Dacă se specifică BORDER=0, marginea va fi eliminată chiar dacă imaginea este o ancoră/link spre altă resursă. De exemplu:

<A HREF="reference.html">

<IMG SRC="icon/reference.gif" ALT="" WIDTH=90 HEIGHT=90 BORDER=0>Web Authoring Reference

</A>

are ca efect afişarea unei imagini (din fişierul reference.gif, care se găseşte în subfolderul icon al folderului curent) şi a unui text, transformarea acestora într-o ancoră (link) care indică spre documentul reference.html, dar fără ca imaginea să aibă margine în jurul ei, ca în figura următoare:

Web Authoring Reference

Atributul LONGDESC dă o descriere mai lungă a imaginii şi poate fi folosit acolo unde este necesară, de exemplu, ca alternativă la reprezentarea uzuală a imaginii (în browserele ce suportă doar text sau cele utilizate de persoanele care nu văd).

Exemple:

1. Inserarea unei imagini şi specificarea unui text (alternativ) care să se afişeze dacă nu se poate afişa imaginea sau ca „explicaţie“ (tooltip) cînd se pune cursorul mouse-ului pe ea, se poate face cu secvenţa:

<P>

<IMG SRC="bear.jpg" WIDTH="201" HEIGHT="132" BORDER=0 ALT="A big, brown bear">

Şi are ca efect inserarea în pagină a unei imagini, de exemplu ca cea de mai jos:

2. Aceeaşi imagine inserată în cadrul unui paragraf cu text:

<HTML>

<HEAD>

<TITLE>My Jungle Home Page</TITLE>

</HEAD>

<BODY>

<FONT FACE="ARIAL" SIZE=2 COLOR="#339966">

<H1>The Scariest Jungle</H1>

</FONT>

<FONT FACE="ARIAL" SIZE=2>

Follow the map to see <I>lions</I> and <I>tigers</I> and <I>bears</I>.

<P> <IMG SRC="bear.jpg" WIDTH="201" HEIGHT="132" BORDER=0 ALT="A big, brown bear">

<P><B>Oh, my!</B>

</FONT>

</BODY>

</HTML>

Şi va arată astfel:

3. Alinierea imaginilor în text

Imaginile pot fi aliniate în document cu ajutorul atributului ALIGN, cel care permite controlul alinierii imaginii cu linia de text alăturată. Există următoarele valori posibile pentru controlul alinierii.

· ALIGN=TOP, care aliniază imaginea cu partea cea mai de sus a rîndului

· ALIGN=MIDDLE, care aliniază imaginea cu mijlocul rîndului (de fapt cu linia de bază)

· ALIGN=BOTTOM, care aliniază imaginea cu cea mai de jos parte a rîndului sau cu partea de jos a celei mai mari imagini de pe rînd

· ALIGN=TEXTOP care aliniază partea de sus a imaginii cu cele mai înalte caractere din rînd

· ALIGN=ABSMIDDLE care aliniază mijlocul imaginii cu mijlocul celui mai mare element

· ALIGN=BASELINE care aliniază partea de jos a imaginii cu linia de bază a textului

· ALIGN=ABSBOTTOM care aliniază partea de jos a imaginii cu cea mai de jos parte a unui element de pe rînd

· ALIGN=LEFT şi ALIGN=RIGHT care aliniază imaginea în stînga, respectiv dreapta paginii

4. Imagini flotante

Imaginile şi obiectele pot apare direct în text (in-line) sau pot fi „flotante“ pe o margine a paginii alterînd astfel temporar marginile textului care „curge“ pe lîngă aceasta. Elementul care determină modul în care o va face este BR.

Fie următoarea situaţie, în care avem alăturate o imagine şi un text care are o linie terminată cu BR:

********* -------

| | -------

| image | --<BR>

| |

*********

Elementul BR are ca efect inserarea în punctul în care apare a unei noi linii. Dar, prin valoarile pe care le poate lua atributul său clear determină şi modul în care se va afişa şi textul în continuare (unde va apare noua linie de text după acest element). Valorile pe care le poate lua clear sînt:

clear = none|left|right|all

Semnificaţia fiecărei valori este:

1. none: Noua linie va începe normal. Este valoarea implicită. În acest caz, pentru situaţia din figura de mai sus, noua linie (marcată cu semne +) va începe imediat sub cea intreruptă, la marginea din dreapta a imaginii:

********* -------

| | -------

| image | --<BR>

| | +++++++

*********

2. left: Noua linie va începe în prima poziţie disponibilă SUB obiectul flotant, la marginea din stînga. În acest caz, pentru situaţia din figura de mai sus, noua linie (marcată cu semne +) va începe sub imagine, de la marginea din stînga:

********* -------

| | -------

| image | --<BR clear="left">

| |

*********

++++++++++++++++++

3. right: Noua linie va începe în prima poziţie disponibilă SUB obiectul flotant, la marginea din dreapta.

4. all: Noua linie va începe în prima poziţie disponibilă SUB obiectul flotant, la oricare margine. În acest caz, pentru situaţia din figura de mai sus, noua linie (marcată cu semne +) va începe asemănător situaţiei clear=left:

********* -------

| | -------

| image | --<BR clear="all">

| |

*********

++++++++++++++++++

5. Includerea de „obiecte“ generale (elementul OBJECT).

Începînd cu HTML 4.0 se restrînge utilizarea lui <IMG> pentru inserarea imaginilor, chiar dacă rămîne permisă. Explicaţia este dată de încercarea de generalizare a procesului de inserare şi a altor „obiecte“ (cum sînt, de exemplu, appleturile) sub un singur tag: OBJECT. Pînă la HTML 4.0 fiecare tip de resursă ce se putea insera în paginile HTML îşi avea propriul tag.

Această abordare introducea cîteva dezavantaje majore:

· nu permitea extensii ale altor tipuri de resurse

· fiecare tag nu se putea folosi decît cu acel tip de resursă (de exemplu o imagine se insera cu IMG, un applet cu APPLET, etc)

· se introduceau probleme de accesibilitate, tagurile vechi neindicînd mai nimic despre resursa care se ingloba în pagină, browserul nefiind capabil să determine dacă poate sau nu să prezinte resursa respectivă

Pentru a rezolva aceste probleme s-a introdus elementul OBJECT care oferă o soluţie generală de inserare a unui obiect generic în paginile HTML. El permite specificarea tuturor caracteristicilor necesare pentru a fi prezentate de un browser: codul sursă, valori iniţiale, date necesare la execuţie. În acestă accepţiune termenul de „obiect“ denotă ceva ce se inserează în pagina HTML şi are ca sinonime: applet, plug-in, media handler, etc.

Astfel funcţionalitatea acestor taguri a fost preluată de noul tag, după schema prezentată în tabelul următor:

Tipul resursei care se inserează	Elementul specific	Elementul generic
Imagini (gif, jpg)	IMG	OBJECT
Applet	APPLET	OBJECT
Alt document HTML	IFRAME	OBJECT

Tabelul indică faptul că fiecare tip de resursă ce poate fi inclusă are o soluţie specifică şi o soluţie generală. Elementul generic OBJECT va servi şi ca soluţie pentru implementarea altor tipuri.

Sintaxa:

<OBJECT>...</OBJECT>

Atribute posibile:

· DATA=URI (adresa de unde se încarcă datele obiectului)

· CLASSID=URI (locaţia implementării)

· ARCHIVE=CDATA (fişierele archivă)

· CODEBASE=URI (adresa de bază pentru CLASSID, DATA, ARCHIVE)

· WIDTH=Length (lăţimea obiectului)

· HEIGHT=Length (înălţimea obiectului)

· NAME=CDATA (numele folosit la trimiterea unui formular)

· USEMAP=URI (client-side image map)

· TYPE=ContentType (tipul obiectului)

· CODETYPE=ContentType (tipul codului)

· STANDBY=Text (mesajul ce se va afişa în timpul încărcării)

· TABINDEX=NUMBER (poziţia în ordinea de parcurgere cu Tab)

· DECLARE (obiectul nu se instanţiază)

· ALIGN=[ top | middle | bottom | left | right ] (alinierea obiectului)

· BORDER=Length (grosimea marginii)

· HSPACE=Pixels (spaţiu lăsat orizontal)

· VSPACE=Pixels (spaţiu lăsat vertical)

· atribute comune

Conţine:

· elemente PARAM urmate de elemente de tip bloc şi/sau elemente de tip inline

Conţinut în:

· HEAD, elemente de tip inline, elemente de tip bloc, cu excepţia lui PRE

Descriere:

OBJECT intenţionează să înlocuiască tagurile specifice IMG şi APPLET, precum şi tagurile „proprietare“ EMBED şi BGSOUND (definite de anumite browsere şi suportate doar de ele!) care produc multe neajunsuri şi erori. Cu el se includ imagini, clipuri video, appleturi Java, elemente VRML.

Aproape toate atributele tag-ului <IMG> se pot folosi şi cu <OBJECT>. Modul de utilizare este identic. O descriere mai amănunţită este prezentată într-un paragraf anterior.

4.5. Imagini senzitive

Imaginile senzitive permit specificarea unor regiuni ale unei imagini (sau obiect, mai general) cărora să li se asocieze o acţiune specifică (de exemplu încărcarea unei resurse, lansarea unui program, etc). Cînd regiunea este activată de utilizator se execută acţiunea respectivă. O imagine senzitivă este creată prin asocierea unui obiect cu o specificaţie a zonelor suprafeţei obiectului respectiv. Există două tipuri de imagini senzitive:

· Client-side. Cînd utilizatorul activează o regiune a unei imagini senzitive de acest tip cu mouse-ul coordonatele punctului respectiv (în pixeli) sînt interpretate de către agentul utilizatorului (browserul acestuia). Navigatorul selectează o legătură ce a fost specificată pentru regiunea activată şi o urmează.

· Server-side. Cînd utilizatorul activează o regiune a unei imagini senzitive de acest tip cu mouse-ul coordonatele punctului respectiv (în pixeli) sînt trimise agentului serverului (programului de pe server) şi care e specificat de atributul HREF al elementului A. Programul de pe server este cel care interpretează aceste coordonate şi realizează o anumită acţiune.

De obicei sînt preferate imaginile senzitive client în faţa celor de tip server-side din două motive: sînt accesibile şi celor ce folosesc browsere fără facilităţi grafice şi oferă un feed-back imediat, indiferent dacă se pointează într-o zonă activă sau nu.

1. Imagini senzitive client-side

Acest tip de imagini senzitive realizează senzitivitatea imaginii prin legături în textul care însoţeşte figura şi care desemnează zonele active din figură. Această metodă nu numai că este mult mai rapidă decît cea care implică programe care rulează pe server, dar permite şi ceva ce varianta cu imagini senzitive de tip sever-side nu putea realiza: utilizarea figurilor senzitive şi în navigatoarele care lucrează în mod text deoarece textul care descrie figura este cel care defineşte maparea figurii.

Imaginea senzitivă de tip client-side poate fi definită cu unul dintre elementele IMG, OBJECT sau INPUT. Cu aceasta se asociază o hartă de legături ce se defineşte cu elementul MAP. Legătura dintre cele două componenete se realizează prin intermediul atributului USEMAP al elementului cu care se defineşte imaginea senzitivă.

Prezenţa atributului USEMAP la definirea unui obiect (cu OBJECT) impune ca obiectul respectiv (ce este inclus) să fie o imagine. Mai mult, cînd acesta are o hartă asociată cu el, browserele trebuie să implementeze acţiunea cu obiectul respectiv exclusiv în termenii imaginii senzitive, putînd fi chiar omisă încărcarea sau procesarea conţinutului propriu-zis al acestuia (dacă nu poate fi făcută de browserul respectiv). Fiecare element MAP poate conţine cel puţin unul dintre următoarele elemente:

1. Unul sau mai multe elemente AREA. Acestea nu au conţinut dar specifică regiunile geometrice ale hărţii asociate cu imaginea şi legăturile asociate cu fiecare regiune în parte. De notat că atunci cînd această metodă este folosită elementul MAP nu afişează nimic. Autorii trebuie să ofere un text alternativ pentru fiecare porţiune definită cu AREA, utilizînd atributul ALT.

2. Conţinut de tip bloc (block-level). Acesta va include elemente A ce specifică regiunile geometrice ale hărţii şi legăturile asociate cu fiecare regiune în parte. De notat că atunci cînd se foloseşte această metodă elementul MAP poate fi afişat de browser, rezultînd o metodă de creare a unor documente mai accesibile decît cea descrisă anterior.

Dacă două sau mai multe regiuni se suprapun, elementul definit în regiunea ce apar mai devreme în document este cel luat în consideraţie.

A. Elementul MAP

Sintaxa:

<MAP>...</MAP>

Atribute posibile:

· NAME=CDATA (numele hărţii)

· atribute comune

Conţine:

· Unul sau mai multe elemente AREA, sau unul sau mai multe elemente de tip bloc

Conţinut în:

· elemente de tip inline, elemente de tip bloc (block-level)

Descriere:

Acest element defineşte o imagine senzitivă de tip client-side pentru a fi utilizată cu un element IMG sau OBJECT. Atributul NAME este folosit ca ancoră pentru atributul USEMAP al elementelor IMG sau OBJECT. În timp ce MAP poate defini imagini senzitive incluse în alte fişiere, browserele suportă de obicei numai imagini care au definită harta de legături cu MAP doar în acelaşi fişier cu imaginea. Iniţial MAP a fost definit să aibă asociat unul sau mai multe elemente AREA care să specifice coordonatele unei regiuni active (clicabile).

HTML 4.0 extinde acest element astfel încît să poată avea ca atribute unul sau mai multe elemente de tip bloc ca o alternativă la utilizarea elementelor de tip AREA. Combinate cu OBJECT acestea permit o alternativă cu conţinut mai bogat la imagini. Dar nu toate browserele suportă acestea variantă (cu OBJECT), astfel că varianta cu IMG este mult mai sigură. Cînd MAP se foloseşte cu OBJECT, conţinutul acesteia nu este afişat de browser.

B. Elementul AREA

Sintaxa:

<AREA>

Atribute posibile:

· SHAPE = [ rect | circle | poly | default ] (forma regiunii)

· COORDS=Coords (coordonatele regiunii)

· HREF=URI (resursa indicată de legătură)

· TARGET=FrameTarget (frame-ul în care se încarcă legătura)

· NOHREF (regiune inactivă)

· ALT=Text (text alternativ)

· TABINDEX=Number (poziţia în ordinea de parcurgere cu TAB-ul)

· ONFOCUS=Script (regiunea a primit focusul)

· ONBLUR=Script (regiunea a pierdut focusul)

· atribute comune

Conţine:

· nimic

Conţinut în:

· elementul MAP

Descriere:

Acest element defineşte o regiune într-o imagine senzitivă. Fiecare regiune este o bucată de imagine care are asociată a altă acţiune cînd se face clic cu mouse-ul pe ea.

Atributele SHAPE şi COORDS specifică partea din imagine ce este inclusă în acea regiune. Valoarea implicită este „rect“ care defineşte un dreptunghi folosind COORDS="left, top, right, bottom". Alte valori ale lzui SHAPE:

· default, specifică toată imaginea;

· circle, specifică o regiune circulară folosind COORDS="center-x, center-y, radius";

· poly, specifică o regiune poligonală folosind COORDS="x₁, y₁, x₂, y₂, ..., x_N, y_N".

Valorile coordonatelor sînt relative la colţul stînga-sus şi sînt exprimate în pixeli sau procente.

Atributul HREF specifică o legătură la o altă resursă (ca de exemplu un document HTML sau o imagine JPEG). TITLE poate fi folosit pentru a descrie pe scurt conţinutul legăturii şi se foloseşte ca „tool-tip“. Atributul boolean NOHREF indică faptul că regiunea respectivă nu are legătură asociată.

Atributul ALT oferă text alternativ pentru cazul în care nu se încarcă imaginea. Se recomandă ca acesta să descrie funcţia şi nu regiunea.

Atributul TARGET este folosit cu frame-uri pentru a indica în ce frame se încarcă resursa indicată de legătură. Dacă numele indicat nu există se va folosi o fereastră nouă. Numele speciale de frame-uri încep cu underscore (liniuţa de subliniere):

· _blank, indică fereastră nouă

· _self, indică frame-ul curent

· _parent, indică frame-ul parinte al celui curent

· _top, indică o fereastră nouă, fără frame-uri

Atributul ACCESSKEY specifică un caracter unic UNICODE folosit ca tastă de activare (shortcut) pentru urmărirea legăturii. TABINDEX specifică un număr între 0 şi 32767 care indică ordinea de parcurgere cu tasta TAB. O regiune cu TABINDEX=0 sau fără TABINDEX va fi vizitată după toate elementele cu o valoare pozitivă a acestui atribut. Cu cît valoarea pozitivă este mai mică cu atît regiunea va fi vizitată mai devreme. În caz de ambiguitate elementul ce apare mai întîi în document are prioritate.

AREA acdeptă în plus faţă de evenimentele uzuale (core) acceptate de majoritatea elementelor şi atribute folosite de scripturile client:

· ONFOCUS, ce apare cînd regiunea primeşte focusul;

· ONBLUR, ce apare cînd regiunea pierde focusul.

Exemplu:

Acest exemplu defineşte o hartă numită „mymap“ ale cărei zone active (3) sînt dreptunghiuri care indică spre trei adrese diferite, fiecare avînd şi alternative pentru cazul cînd imaginea nu este încărcată:

<MAP NAME=mymap>

<AREA HREF="/reference/" ALT="HTML and CSS Reference" COORDS="5,5,95,195">
<AREA HREF="/design/" ALT="Design Guide" COORDS="105,5,195,195">
<AREA HREF="/tools/" ALT="Tools" COORDS="205,5,295,195">

</MAP>

Această hartă este folosită cu imaginea încărcată din fişierul „sitemap.gif“, de dimensiuni 300 pixeli x 200 pixeli, plasată în documentul HTML cu tagul:

<IMG SRC="sitemap.gif" ALT="Site map" USEMAP="#mymap" WIDTH=300 HEIGHT=200>

Exemplu:

Acest exemplu foloseşte două imagini, de tipuri diferite, a doua fiind o alternativă a primeia în cazul în care aceasta nu este suportată. Ambele imagini partajează o hartă comună care este inclusa în fiecare dintre elementele definite cu OBJECT. Elementul MAP conţine şi o listă de legături de meniu care sînt afişate dacă browserul nu încarcă imaginile:

<OBJECT DATA="sitemap.png" USEMAP="#map" TYPE="image/png" TITLE="Sitemap" WIDTH=300

HEIGHT=200>

<OBJECT DATA="sitemap.gif" USEMAP="#map" TYPE="image/gif" TITLE="Site map" WIDTH=300

HEIGHT=200>

<MAP NAME=map>

<UL>
<LI><A HREF="/reference/" COORDS="5,5,95,195"> HTML and CSS Reference </A></LI>
<LI><A HREF="/design/" COORDS="105,5,195,195"> Design Guide </A></LI>
<LI><A HREF="/tools/index.html" COORDS="205,5,295,195"> Tools </A></LI>
</UL>

</MAP>

</OBJECT>
</OBJECT>

În acest mod, maparea figurii (şi transformarea ei într-o imagine senzitivă) se realizează în următorii paşi:

a). Definirea legăturilor

Exemplu: Pentru o bară de butoane:

<UL>

<LI><A HREF=" Editorial.html">Editorial</A>

<LI><A HREF=" Index.html">Index</A>

<LI><A HREF=" Presa.html">Presa</A>

<LI><A HREF=" Oaspeţi.html">Oaspeţi</A>

</UL>

b). Adăugarea figurii:

<IMG SRC=logo.gif>

<UL>

<LI><A HREF="Editorial.html">Editorial</A>

<LI><A HREF="Index.html">Index</A>

<LI><A HREF="Presa.html">Presa</A>

<LI><A HREF="Oaspeţi.html">Oaspeţi</A>

</UL>

</IMG>

c). Adăugarea atributul SHAPE pentru a indica localizarea şi forma zonelor active. Valorile lui sînt cele cunoscute din meniurile grafice de selecţie:

· SHAPE="default" pentru selecţia implicită

· SHAPE="circle x,y,r" pentru a defini un cerc de rază r, cu centrul în x,y.

· SHAPE="rect x,y,l,h" pentru dreptunghi (x,y stînga sus, l lăţime, h înălţime)

· SHAPE="polygon x1,y1,x2,y2..." pentru poligon determinat de punctele xi,yi

Exemplu:

<IMG SRC=logo.gif>

<UL>

<LI><A HREF="Editorial.html" SHAPE="rect 0,0,100,100"> Editorial</A>

<LI><A HREF="Index.html" SHAPE="rect 100,0,100,100"> Index</A>

<LI><A HREF="Presa.html" SHAPE="rect 200,0,100,100"> Presa</A>

<LI><A HREF="Oaspeţi.html" SHAPE="rect 300,0,100,100"> Oaspeţi</A>

</UL>

</IMG>

2. Imagini senzitive server-side

Dacă harta imaginii senzitive este mult prea complicată (şi, implicit, dificil de descris cu metoda anterioară) se poate lăsa sarcina aceasta pe seama serverului. Imaginile senzitive de scest tip lucrează cu ajutorul unui script CGI (un program rezident pe server). Cînd navigatorul activează o legătură de pe o imagine senzitivă, apelează de fapt (indirect) un program special (dedicat acestei acţiuni) din folderul (directorul) cgi-bin al serverului căruia îi trimite coordonatele (x,y) ale punctului în care a fost activată imaginea (unde s-a făcut clic cu mouse-ul).

Programul special pentru imaginile mapate caută într-un fişier-hartă unde sînt stabilite corespondenţele între diversele regiuni ale imaginii şi resursele/documentele care sînt apelate. Face apoi cîteva calcule pentru a vedea ce pagină să încarce şi încarcă pagina.

Din cauza naturii grafice a imaginilor senzitive, ele pot fi "văzute" numai de navigatoarele grafice. De fapt dacă se încearcă să se vadă o astfel de imagine senzitivă cu un navigator care lucrează numai în modul text (de pildă Lynx) nu se poate vedea nici măcar că o astfel de imagine există. Prima grijă deci, dacă se utilizează o imagine senzitivă, este să se creeze un text echivalent pentru utilizatorii care se conectează în modul text.

Ca şi în cazul altor scripturi CGI, fiecare server are o altă metodă de implementare a mapării imaginilor, mai mult chiar, metodele pot diferi chiar pentru serverele de pe aceeaşi platformă. De pildă, serverele de tip CERN şi NCSA utilizează metode diferite pentru implementarea imaginilor senzitive. Totuşi, toate serverele utilizează aceleaşi elemente de bază:

· Marcarea cu tag-uri HTML a imaginii (în document) pentru a arăta că aceasta este o imagine senzitivă.

· Scrierea unui fişier de mapare a imaginii, care va specifica legătura între diferite regiuni ale imaginii şi URL-urile documentelor Web la care acestea fac referinţă.

· Un script CGI (program) în directorul cgi-bin care le ajută să funcţioneze împreună.

Procesul de realizare a unei imagini senzitive de tip server side, pentru diverse servere HTTP mai cunoscute şi utilizate (CERN şi NCSA) este descris în continuare.

A. Tag-urile imaginii senzitive

Primul pas este alegerea unei imagini care satisface anumite criterii pentru a fi potrivită ca imagine senzitivă. Cele mai potrivite sînt cele care conţin arii vizuale distincte care pot fi selectate individual (de pildă, imagini care pot fi cu uşurinţă împărţite în poligoane). Fotografiile sînt mai dificil de mapat deoarece elementele tind să aibă o anumită continuitate (prin tonurile de culoare, de pildă) sau sînt de forme complicate.

Marcarea imaginii în documentul HTML se face de forma:

<a href="http://nume_server/cgi-bin/nume_script/cale/fişier_de_mapare_imagine.map">

<img src="nume_imagine_senzitivă.jpg" ISMAP alt="mesaj pentru text">

</a>

unde:

· <a> şi </a> sînt etichetele nevide pentru ancora imagine

· href = indică fişierul de mapare a zonelor de pe imagine cu diferite resurse

· http = protocolul de aducere a fişierului

· cgi-bin = directorul în care sînt rezidente script-urile

· nume_script = numele script-ului care face legătura între fişierul imagine.map, care conţine maparea imaginii şi documentele HTML asociate legăturii (htimage pentru serverul CERN sau imagemap pentru serverul NCSA)

· imagine.map = fişierul care conţine maparea imaginii

· ISMAP = tag-ul care declară că imaginea este senzitivă

· <img> = eticheta pentru imagine, cu atributul src cel care specifică fişierul imagine

Exemplu:

Imaginea pentru a fi prelucrată este logo.jpg. Marcarea ei în documentul HTML s-a făcut cu:

<a href="http://www.comp-craiova.ro/cgibin/htimage/maps/poza.map">

<img src="logo.jpg" ISMAP alt="CSD Site" border=0 height=160 width =500></a>

Tag-ul border a luat aici valoarea zero. Atributele height şi width declară înălţimea respectiv lăţimea imaginii pentru ca navigatorul să rezerve loc pentru imagine şi să continue să afişeze textul chiar dacă imaginea nu este încă adusă. Dacă valorile specificate sînt mai mici decît dimensiunea imaginii, aceasta este scalată pentru spaţiul rezervat.

B. Maparea imaginii

Procesul de mapare înseamnă alegerea regiunilor active şi a fişierelor (sau documentelor HTML) apelate, găsirea coordonatelor regiunilor desemnate şi scrierea fişierului de mapare (poza.map, în cazul nostru). Forma fişierului de mapare depinde de scriptul CGI utilizat de server.

Pentru serverul CERN fişierul arată de forma:

default URL

circle (x,y) r URL

rectangle (x,y) (x,y) URL

polygon (x_l,y_l) (x₂,y₂) ... (x_n,y_n) 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 x_l,y_l x₂,y₂ ... x_n,y_n

point URL x,y

Semnificaţia este:

· pentru cerc: coordonatele centrului şi raza (m pixeli)

· pentru dreptunghi: colţul stînga sus şi dreapta jos

· pentru poligon: coordonatele fiecărui nod

· pentru puncte: coordonatele punctelor

Originea sistemului de coordonate (0,0) se află în colţul din stînga sus al imaginii iar direcţia pozitivă a axei Oy este în jos.

Exemplu:

default /diropt/fisopt1.html default

rect (16,65) (122,100) /diropt/fisopt2.html

rect (319,68) (431,98) /diropt/fisopt3.html

poly (92,158) (149,85) (302,90) (375,156) (95,154) /diropt/fisopt4.html

Observaţii:

1. URL-ul implicit (default) este utilizat ori de cîte ori mouse-ul activează o regiune care nu trimite spre un anumit document (în acest caz unul dintre dreptunghiuri sau regiunea trapezoidală).

2. Ordinea regiunilor din fişierul de mapare contează. Dacă de pildă două regiuni selectate se suprapun parţial (sau total) regiunea menţionată mai la începutul fişierului are prioritate la activare.

3. Punctele (în mapările NCSA) permit specificarea faptului că un clic care nu cade direct pe o anumită regiune, va activa cel mai apropiat punct definit în fişierul de mapare care apare pe imagine. Includerea opţiunii default într-un fişier pentru serverul NCSA presupune că nu veţi introduce nici un punct activ deoarece existenţa unui asemenea punct inhibă opţiunea default.

Maparea imaginii se poate face fie manual, încărcînd imaginea într-un program care să permită notarea coordonatelor zonelor de interes, fie automat, utilizînd unul din produsele care permit desenarea regiunilor selectate cu ajutorul mouse-ului. Programe de acest tip: Mapedit (sub Windows) HotSpots for Windows, WebMap for Macintosh sau Mapedit (pentru X). Toate permit salvarea fişierului .map fie în format CERN fie în format NCSA.

C. Script-ul

Mai întîi scriptul (programul) pentru maparea imaginilor trebuie să fie instalat în directorul cgi-bin (htimage pentru CERN sau imagemap pentru NCSA) şi apoi fişierul poza.map (creat anterior) trebuie depus într-un director (să zicem maps) aflat la acelaşi nivel cu cgi-bin. Legătura între scriptul htimage şi fişierul de mapare a imaginii se face ataşînd calea către acesta din urmă imediat după numele scriptului (htimage).

Exemplu:

<a href="http://www.comp-craiova.ro/cgi-bin/htimage/maps/poza.map"> <img src="logo.jpg" ISMAP> </a>

Activarea unei zone a imaginii senzitive înseamnă transmiterea către script a coordonatelor punctului activat. Coordonatele sînt exprimate ca valori (în pixeli) relative la colţul stînga-sus al imaginii. Modalitatea prin care se transmit aceste coordonate este urmatoarea: se deriveză o nouă adresă (URI) din cea specificată de atributul href a elementului A prin adăugarea caracterului ? urmat de coordonatele x şi z, separate de virgulă. Legătura care se urmează este dată de această nouă adresă. De exemplu, dacă pentru imaginea senzitivă definită astfel:

<A href="http://www.acme.com/cgi-bin/competition"> <IMG src="game.gif" ismap alt="target"> </A>

se face click în punctul de coordonate x=10, y=27, noua adresă derivată ce va fi folosită pentru navigare va fi: „http://www.acme.com/cgi-bin/competition?10,27“

4.6. Alte elemente legate de text şi imagini

1. Comentariile în documentele HTML

Sintaxa:

<!-- Acesta este un comentariu -->

Descriere:

În toate documentele HTML se pot introduce comentarii. Acestea vor fi complet ignorate de navigatoare la afişare/interpretare. Comentariile încep cu şirul <!--, pot conţine orice caracter şi se termină la apariţia şirului -->. 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, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Descriere:

Tag-ul <HR> poate fi vid şi are ca efect crearea unei linii orizontale pe pagină. Liniile orizontale pot fi utilizate pentru separarea diferitelor secţiuni ale unei pagini Web sau pentru punerea în evidenţă a unor porţiuni de document cum ar fi liste, meniuri, informaţii de contact.

Atributul ALIGN specifică alinierea în apgină, SIZE determină grosimea (înălţimea), iar WIDTH lungimea pe orizontală (poate fi şi procent din lăţimea paginii).

NOSHADE este un atribut care indică faptul că linia este fără efectul tridimensional dat de umbră, asemănătoare cu o linie solidă.

Liniile se pot substitui şi cu imagini care îndeplinesc acelaşi rol.

Exemplu:

Urmează o linie de 3 pixeli grosime

<HR SIZE=3>

Urmează o linie de 6 pixeli grosime

<HR SIZE=6>

Exemplu:

Pentru liniile definite astfel:

<HR width="50%" align="center">

<HR size="5" width="50%" align="center">

<HR noshade size="5" width="50%" align="center">

Efectul este cel din figura următoare:

Se poate înlocui linia desenată de navigator cu o imagine, ca mai jos:

3. Fundalul unui document

Sintaxa:

<BODY BGCOLOR=#FFFFCA> sau

<BODY BACKGROUND="imagine.gif">

Descriere:

Cel mai simplu mod de a schimba fundalul se realizează utilizînd o culoare de fond. Aceasta poate fi setată în tag-ul <BODY> prin atributul BGCOLOR. Culoarea trebuie specificată în RGB pe 8 biţi. Fiecare culoare folosită la sinteza aditivă RGB poate avea o valoare între 0 şi 255 (0 0 0 fiind negru şi 256 256 256 fiind alb). Singura dificultate este că valoarea lui BGCOLOR trebuie dată în hexazecimal.

Exemplu:

<BODY BGCOLOR=#FFFFCA>

<BODY BGCOLOR=<#FFFFFO>

Pentru fundaluri pot fi folosite şi imagini sau, mai bine, o singură imagine aşezată alăturat de mai multe ori pînă la acoperirea completă a fundalului. Problema este alegerea unei imagini care alăturată sie însăşi să dea impresia de continuitate.

4. Culoarea textului şi a legăturilor

Setul de atribute care urmează oferă un control crescut asupra felului în care apare afişat textul documentului HTML şi legăturile.

Atribut=Valoare	Semnificaţie
TEXT	Controlează culoarea întregului text din document
LINK	Controlează culoarea legăturilor nevizitate (implicit, albastru)
VLINK	Controlează culoarea legăturilor vizitate (implicit, purpuriu)
ALINK	Controlează culoarea unei legături asupra căreia este apăsat butonul mouse-lui (implicit, roşu)

Exemplu:

<body bgcolor="#fffff0" text="#000000" link="#00009c" vlink="#ffffca" alink="#ffff00">

Se pot obţine efecte de culoare cu o succesiune de tag-uri de forma:

<BODY BGCOLOR="diverse_coduri de culoare">

care determină schimbarea dinamică a culorii fundalului. Utilizate insistent, aceste efecte simple (ieftine) pot deveni iritante pentru vizitator.

Capitolul 5.

Utilizarea tabelelor în limbajul HTML

Din elementele noi introduse de HTML 3.0, tabelele reprezintă primul care a ajuns pe Web. Ele sînt suportate de Netscape Navigator, începînd cu versiunea 1.1, iar de către Microsoft Internet Explorer, începînd cu versiunea 2.0.

Utilizarea fundamentală a tabelelor este aceeaşi cu a celorlalte forme de comunicare: tabelele se folosesc pentru a afişa informaţii în două dimensiuni şi nu liniar, adică informaţia este mai sugestivă dacă este prezentată sub forma unei matrici cu rînduri şi coloane.

În afara acestei utilizări, pînă la apariţia style-sheet-urilor, tabelele se utilizau (în unele cazuri) şi pentru a produce efecte speciale, cum ar fi: poziţionări în pagină ale textului sau al imaginilor grafice, poziţionări pe rînd ale imaginilor, poziţionări ale elementelor grafice în interiorul textului, etc. Avînd în vedere că pot apare probleme în aceste cazuri (la browserele non-vizuale sau cînd paginile sînt proiectate pentru displayuri mai mari decît cel pe care este afişat ori cînd fontul utilizat la vizualizare diferă ca mărime de cel presupus la proiectare), pentru a le minimiza, se recomandă în HTML 4.0 folosirea style-sheet-urilor pentru controlul aranjării în pagină (controlul layout-ului)

Elementele luate în consideraţie de HTML 4.0 pentru codarea tabelelor sînt:

· Explicaţia (elementul CAPTION), care oferă o scurtă descriere a conţinutul tabelului. Se poate oferi şi o descriere mai largă (prin intermediul atributului SUMMARY) pentru cazul cînd browserul este utilizat de persoane care folosesc alfabetul Braille sau este un browser ce sintetizează voce

· Rîndurile tabelului care pot fi grupate în secţiuni de antet/head, explicaţii/footer şi corp/body (prin intermediul elementelor THEAD, TFOOT şi respectiv TBODY). Grupurile de rînduri oferă informaţie structurală suplimentară şi pot fi utilizate de browsere astfel încît să sugereze mai bine structura tabelului, de exemplu permiţînd deplasarea (scroll) individuală a acestor secţiuni sau repetînd informaţia cuprinsă în header şi/sau footer pe fiecare pagină (eventual tipărită) a unor tabele mai lungi.

· Grupuri de coloane (care oferă informaţie structurală suplimentară) pot fi definite la începutul definiţiei unui tabel (prin intermediul elementelor COLGRUP şi COL), dînd posibilitatea browserelor să afişeze tabelele incremental, fără a mai fi nevoite să aştepte tot conţinutul tabelului pentru a-l afişa.

· Capul de tabel (elementul TH), atît în cazul că este aşezat pe rînd cît şi în cazul aşezării pe coloană, va fi scos în evidenţă faţă de restul tabelului.

· Celulele tabelului (elementul TD), adică dreptunghiurile individuale. Acestea se pot întinde pe mai multe rînduri şi/sau coloane. HTML 4.0 permite ataşarea unei etichete fiecărei celule astfel încît browserele non-vizuale să poată comunica mai uşor informaţia din celulă.

· Datele din tabel, adică valorile înscrise în celulele tabelului. Specificaţiile HTML 4.0 permit ca în celulele tabelelor să fie introdus orice element HTML: text simplu, text (pre)formatat, imagini, legături, formulare, alte tabele, etc.

1. Descrierea tabelelor (elementul TABLE)

Descrierea unui tabel se face cu elementul TABLE. Acesta conţine toate elementele ce specifică titlul, rîndurile, conţinutul şi formatul acestora.

Tabelele sînt specificate în HTML rînd cu rînd, fiecare rînd conţinînd definiţii pentru fiecare din celulele care îl formează. Prin urmare, pentru a defini un tabel se începe prin a defini rîndul din partea de sus, celulă cu celulă, apoi se defineşte al doilea rînd, celulă cu celulă ş.a.m.d. Coloanele sînt calculate automat pe baza numărului de celule care sînt în fiecare rînd. Perechea <TR>...</TR> defineşte începutul, respectiv sfîrşitul rîndului, perechea <TH>...</TH> defineşte o celulă cap de tabel pe acest rînd, iar perechea <TD>...</TD> defineşte o celulă de date din rînd.

Exemplu:

<TABLE>

<TR>

<TH>Cap de tabel</TH>

<TD>Celula 1-1</TD>

<TD>Celula 1-2</TD>

<TD>Celula 1-3</TD>

</TR>

</TABLE>

De remarcat că forma de scriere a codului HTML de mai sus are în vedere doar uşurarea înţelegerii codului de la o primă privire. Marea majoritate a navigatoarelor ignoră spaţiile libere şi caracterul <CR>. O excepţie totuşi: atunci cînd inseraţi o imagine într-una din celulele tabelului, pentru a obţine plasarea corectă a imaginii în toate browserele, se recomandă punerea tag-urile în acelaşi rînd.

Exemplu:

<TD><IMG SRC="A.GIF"></TD>

La afişarea unui tabel, un browser trebuie să realizeze următoarele operaţii:

· să facă disponibil sumarul (definit cu summary) utilizatorului

· să afişeze titlul (explicaţia) tabelului

· să afişeze antetul/headerul tabelului, apoi footerul, dacă sînt specificate. Locul în care apar sînt bine definite (de exemplu la începutul/sfîrşitul fiecărei pagini listate)

· să calculeze numărul de coloane din tabel. Numărul de rînduri se stabileşte simplu: numărul de elemente TR conţinute de TABLE.

· să grupeze coloanele în conformitate cu specificaţiile de grupare a coloanelor

· să afişeze celulele rînd după rînd, grupate în coloanele corespunzătoare, între header şi footer. Browserele vizuale formatează tabelul utulizînd atributele şi specificaţiile de stil (style-sheet).

În acest fel, modelul de tabel din HTML 4.0 este proiectat astfel încît afişarea acestora să se facă incremental, pe măsură ce rîndurile tabelului sosesc, fără a aştepta încărcarea completă.

Elementul TABLE

Sintaxa:

<TABLE> ...</TABLE>

Atribute posibile:

· SUMMARY=Text (descrierea pe larg a conţinutului şi structurii tabelului)

· WIDTH=Length (lăţimea tabelului)

· BORDER=Pixels (lăţimea marginii tabelului)

· FRAME=[ void | above | below | hsides | lhs | rhs | vsides | box | border ] (margini externe)

· RULES=[ none | groups | rows | cols | all ] (margini interne)

· CELLSPACING=Length (spaţierea între celule)

· CELLPADDING=Length (spaţierea în interiorul celulelor)

· ALIGN=[ left | center | right ] (alinierea tabelului)

· BGCOLOR=Color (culoarea de background a tabelului)

· atribute comune

Conţine:

· Un element opţional CAPTION, urmat de zero sau mai multe elemente COL şi COLGROUP, urmat de un element opţional THEAD, un element opţional TFOOT, şi apoi un element sau mai 7multe elemente opţionale TBODY.

Conţinut în:

· APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Descriere:

Orice tabel începe cu tag-ul: <TABLE> şi se termină cu </TABLE>, între ele fiind conţinutul tabelului propriu-zis care poate conţine o explicaţie cu <CAPTION> şi, în esenţă, un număr oarecare de rînduri definite în principal cu <TR>.

CAPTION poate fi urmat, opţional, de elemente COL şi COLGROUP care specifică lăţimea coloanelor şi modul de grupare al acestora. Apoi urmează THEAD, TFOOT şi TBODY care definesc grupurile de rînduri. Un grup de rînduri conţine elemente TR ce definesc rîndurile individual, care, la rîndul lor, conţin elemente TH sau TD pentru celulele header sau de date.

Într-un tabel definit cu TABLE este necesar cel puţin un element TBODY, dar ambele taguri de definire a acestui element sînt opţionale dacă nu există decît un element TBODY şi nu există nici un THEAD sau TFOOT.

Atributul tag-ului <TABLE> WIDTH indică lăţimea tabelului în pagină dată ca număr de pixeli sau ca procent din spaţiul orizontal disponibil. Laţimile date în pixeli (în special cele peste 500) ar trebui evitate întrucît, uneori, cauzează scroll inutil orizontal.

Un număr de atribute specifice tabelelor permit un control mai bun asupra poziţiei tabelelor în pagină şi asupra textului care (eventual) curge pe lîngă tabel:

Atribut=Valoare	Semnificaţie
ALIGN=LEFT	Aliniază tabelul cu marginea din stînga a textului; textul va curge pe marginea din dreapta a tabelului
ALIGN=CENTER	Aliniază tabelul în mijlocul paginii; textul nu va curge prin nici una din părţile tabelului
ALIGN=RIGHT	Aliniază tabelul cu marginea din dreapta a textului; textul va curge pe marginea din stînga a tabelului

Browser-ele tratează în general tabelele ca fiind „flotante“, conţinutul care urmează lui TABEL curgînd pe lîngă el (dacă se poate). Pentru a preveni această manifestare se poate folosi elementul „break“ <BR CLEAR=all> la sfirşitul lui TABLE.

<TABLE> mai poate fi folosit împreună cu atributele UNITS şi COLSPEC. UNITS poate avea ca valori PIXELS, EN (implicit) sau procente (RELATIVE) din dimensiunea totală a tabelului.

Atributul tag-ului <TABLE> FRAME, puţin suportat acum de browsere, specifică marginile exterioare vizibile ale tabelului. Valorile posibile sînt:

· void – nici o margine vizibilă

· above – marginea de sus

· below– marginea de jos

· hsides – marginile din stînga şi dreapta

· vsides – marginile de sus şi jos

· lhs – numai marginea din stînga

· rhs – numai marginea din dreapta

· box (border) – toate marginile

Valoarea implicită este void, dacă nu este specificat atributul BORDER cu o valoare pozitivă, caz în care valoarea implicită este box. <TABLE BORDER> este o abreviere foarte bine suportată pentru <TABLE FRAME=border>.

Atributul RULES, şi el destul de puţin suportat de browsere, specifică marginile interioare vizibile (între celulele tabelului). Valorile posibile sînt:

· none – nici o margine interioară vizibilă

· groups – numai marginile între grupurile de rînduri şi coloane

· rows – numai marginile între rînduri

· cols – numai marginile între coloane

· all – toate marginile interioare

Valoarea implicită este none dacă BORDER=0 (sau se foloseşte atributul no BORDER). Orice altă folosire a lui BORDER are ca efect trecerea lui all ca valoare implicită.

Atributul BGCOLOR sugerează o culoare de background pentru tabel. Poate fi folosită în combinaţie cu <FONT COLOR=...>, dar efectele pot fi imprevizibile dacă se ia în considerare posibilitatea de suprascriere a acestor atribute de către browsere. Metoda recomandată este cea a style-sheet-urilor.

Atributul tag-ului <TABLE> BORDER indică lăţimea chenarului tabelului, CELLSPACING - spaţiul dintre celulele tabelului, iar CELLPADDING - spaţiul dintre marginile celulelor şi conţinut. Figura următoare sugerează aceste elemente:

Exemplu:

Un tabel simplu ar putea fi descris astfel:

<TABLE>

<CAPTION>Common Usenet Abbreviations</CAPTION>

<THEAD>

<TR>

<TH>Abbreviation</TH>

<TH>Long Form</TH>

</TR>

</THEAD>

<TBODY>

<TR>

<TD>AFAIK</TD>

<TD>As Far As I Know</TD>

</TR>

<TR>

<TD>IMHO</TD>

<TD>In My Humble Opinion</TD>

</TR>

<TR>

<TD>OTOH</TD>

<TD>On The Other Hand</TD>

</TR>

</TBODY>

</TABLE>

Exemplu:

Un alt exemplu de tabel poate fi următorul:

<TABLE border="1"

summary="This table gives some statistics about... ">

<CAPTION><EM>A test table with merged cells</EM></CAPTION>

<TR>

<TH rowspan="2">

<TH colspan="2">Average

<TH rowspan="2">Red<BR>eyes

<TR>

<TH>height

<TH>weight

<TR>

<TH>Males

<TD>1.9

<TD>0.003

<TD>40%

<TR>

<TH>Females

<TD>1.7

<TD>0.002

<TD>43%

</TABLE>

Şi el ar putea arăta cu un browser negrafic ca în figura următoare:

A test table with merged cells

/-----------------------------------------\

| | Average | Red |

| |-------------------| eyes |

| | height | weight | |

|-----------------------------------------|

| Males | 1.9 | 0.003 | 40% |

|-----------------------------------------|

| Females | 1.7 | 0.002 | 43% |

\-----------------------------------------/

iar cu unul grafic astfel:

2. Explicaţia unui tabel (elementul CAPTION)

Natura unui tabel (ce conţine sau cum se foloseşte, etc) este descrisă de elementul CAPTION. Acesta este permis doar imediat după tagul de început al lui TABLE şi poate apare maxim o dată în descrierea unui tabel.

Acest element permite deducerea rapidă structurii unui tabel, întocmai ca headerele acestuia. Ca o consecinţă, rezultă că este inadecvat ca sumar (descriere mai pe larg) din perspectiva unor utilizatori ai unor browsere nevizuale. De aceea, informaţiile adiţionale (mai bogate) descriind scopul tabelului şi structura lui se oferă prin atributul summary al elementului TABEL. Aceasta este important mai ales la tabelele care nu au explicaţii date cu CAPTION. Se recomandă să se evite depăşirea dimensiunilor tabelului în ceea ce priveşte explicaţia, pentru ca aceasta să fie nevoită să facă scroll.

Elementul CAPTION

Sintaxa:

<CAPTION>...</CAPTION>

Atribute posibile:

· ALIGN=[ top | bottom | left | right ] (alinierea explicaţiei)

· atribute comune

Conţine:

· elemente inline

Conţinut în:

· TABLE

Descriere:

Elementul CAPTION defineşte o explicaţie pentru un tabel. O explicaţie bună trebuie să ofere un scurt antet pentru tabel. Pentru tabelele simple poate să fie şi un sumar, dar pentru cele mai complexe trebuie completat cu un sumar adevărat, implementat de atributul SUMMARY.

Explicaţia tabelului poate fi dată şi printr-un paragraf separat sau printr-un titlu de structură introdus chiar înainte de tabel dar este de preferat să fie introdusă prin <CAPTION> deoarece explicaţiile pot fi tratate special de către navigatoare. De pildă explicaţiile pot fi extrase într-un fişier separat sau pot fi numerotate.

Atributul ALIGN specifică modalitatea de aliniere faţă de tabel. Valoarea implicită este top.

Exemplu:

Un exemplu de utilizare a acestui element este dat în cele ce urmează:

<TABLE>

<CAPTION>Common Usenet Abbreviations</CAPTION>

<THEAD>

...

</TABLE>

iar o completare cu un sumar poate arăta astfel:

<TABLE SUMMARY="This table gives the character entity reference,

decimal character reference, and hexadecimal character

reference for symbols and Greek letters.">

<CAPTION>Symbols and Greek Letters in HTML 4.0</CAPTION>

...

</TABLE>

3. Grupuri de rînduri (elementele THEAD, TFOOT şi TBODY)

Rîndurile unui tabel pot fi grupate în cap de tabel (head), legendă a tabelului (foot) şi una sau mai multe secţiuni, utilizînd elementele THEAD, TFOOT şi, respectiv, TBODY. Această divizare permite browserelor să suporte scrollul corpului tabelului independent de headerul şi footerul tabelului, care, la rîndul lor, pot fi repetate pe fiecare pagină cînd astfel de tabele se listează. Headerul şi footerul trebuie să conţină informaţii despre coloanele tabelului, iar corpul acestuia să conţină rîndurile de date.

Secţiunile definite de THEAD, TFOOT şi TBODY trebuie să conţină acelaşi număr de coloane.

Cînd sînt prezente, fiecare element THEAD, TFOOT şi TBODY conţine grupuri de rînduri. Fiecare astfel de grup trebuie să conţină cel puţin un rînd definit cu TR.

Exemplul următor ilustrează ordinea şi structura headerului, footerului şi corpurilor unui tabel:

<TABLE>

<THEAD>

<TR> ... informaţii de header ...

</THEAD>

<TFOOT>

<TR> ... informaţii de footer ...

</TFOOT>

<TBODY>

<TR> ... primul rînd al primului bloc de date ...

<TR> ... al doilea rînd al primului bloc de date ...

</TBODY>

<TBODY>

<TR> ... primul rînd al blocului doi de date ...

<TR> ... al doilea rînd al blocului doi de date ...

<TR> ... al treilea rînd al blocului doi de date ...

</TBODY>

</TABLE>

TFOOT trebuie să apară înainte de TBODY în cadrul lui TABLE, astfel ca browserele să poată interpreta (afişa) footerul înainte de recepţionarea tuturor (potenţial) numeroaselor rînduri de date.

În cele ce urmează se sintetizează ce taguri sînt obligatorii şi care pot fi omise:

· Tagul de start al lui TBODY este necesar întotdeauna cu excepţia cazului cînd tabelul conţine doar un grup de rînduri definit cu un singur TBODY şi nu apare nici un header sau footer. Tagul de final al lui TBODY poate fi omis întotdeauna fără probleme.

· Tagurile de start pentru THEAD şi TFOOT sînt necesare cînd apar secţiunile descrise de acestea, dar cele de final pot fi omise şi ele fără probleme.

Astfel, tabelul anterior poate fi descris mai pe scurt astfel:

<TABLE>

<THEAD>

<TR> ... informaţii de header ...

<TFOOT>

<TR> ... informaţii de footer ...

<TBODY>

<TR> ... primul rînd al primului bloc de date ...

<TR> ... al doilea rînd al primului bloc de date ...

<TBODY>

<TR> ... primul rînd al blocului doi de date ...

<TR> ... al doilea rînd al blocului doi de date ...

<TR> ... al treilea rînd al blocului doi de date ...

</TABLE>

A. Elementul THEAD

Sintaxa:

<THEAD>...</THEAD>

Atribute posibile:

· ALIGN=[ top | bottom | left | right ] (alinierea orizontală a celulelor din grup)

· VALIGN=[ top | middle | bottom | baseline ] (alinierea verticală a celulelor din grup)

· CHAR=Character (caracterul după care se face alinierea)

· CHAROFF=Length (offsetul caracterului după care se face alinierea)

· atribute comune

Conţine:

· unul sau mai multe elemente TR

Conţinut în:

· TABLE

Descriere:

Elementul THEAD defineşte un grup de rînduri de tip header (antet) într-un tabel. Un tabel definit cu TABLE poate avea un singur THEAD, care poate apare după CAPTION, COL sau COLGROUP, şi poate preceda elementele TFOOT (opţional) şi TBODY (obligatoriu).

Prin gruparea explicită a rîndurilor de antet cu THEAD, autorii oferă browserelor posibilitatea de a include acele rînduri pe fiecare pagină tipărită a unui tabel mare, precum şi posibilitatea de prezenta tabele care permit scroll doar rîndurilor de date, cele de antet rămînînd fixe pe ecran.

Nu toate browserele suportă acest element, dar folosirea lui nu conduce la nici o problemă la acestea.

THEAD permite specificarea unor atribute de prezentare pentru alinierea celulelor de date ale tabelului. Întrucît nu toate browserele îl suportă, aceste atribute se pot specifica şi direct celulelor (definite cu TR, TH, TD).

Atributul ALIGN specifică alinierea orizontală pentru fiecare celulă din grupul de rînduri. ALIGN=char aliniază conţinutul după un anumit caracter dat de atributul CHAR, a cărui valoare implicită este punctul zecimal. CHAROFF specifică offsetul primei apariţii a caracterului de aliniere. Valoarea lui este un număr de pixeli sau un procent din lăţimea celulei. CHAROFF="50%" aliniază caracterul de aliniere în centru celulei.

Atributul VALIGN specifică poziţia verticală a conţinutului celulelor şi poate lua valorile:

· top, care poziţionează datele la marginea de sus a celulei;

· middle, valoarea implicită, care poziţionează datele în centrul celulei;

· bottom, care poziţionează datele la marginea de jos a celulei;

· baseline, care specifică alinierea primei linii a celulei (indiferent ce conţine) la o linie de bază a fontului (baseline) comună.

B. Elementul TFOOT

Sintaxa:

<TFOOT>...</TFOOT>

Atribute posibile:

· 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 TFOOT defineşte un grup de rînduri de tip footer într-un tabel. Un tabel definit cu TABLE poate avea un singur TFOOT, care poate apare după THEAD (opţional) şi poate preceda elementul TBODY (obligatoriu).

Prin gruparea explicită a rîndurilor de footer cu TFOOT, autorii oferă browserelor posibilitatea de a include acele rînduri pe fiecare pagină tipărită a unui tabel mare, precum şi posibilitatea de prezenta tabele care permit scroll doar rîndurilor de date, cele de footer rămînînd fixe pe ecran.

Nu toate browserele suportă acest element, iar cerinţa de a fi plasat înainte de TBODY îl face nerecomandat pentru acestea.

Atributele (şi semnificaţiile lor) sînt aceleaşi cu cele de la THEAD.

Un footer poate oferi un rînd special, de tip sumar sau de tip „notă de pagină/picior“, ce se aplică unui tabel întreg sau numai unei porţiuni din el.

Exemplu:

Următorul exemplu foloseşte TFOOT pentru a defini „note de pagină/picior“ pentru tot tabelul:

<TABLE SUMMARY="This table lists...">

<CAPTION>Programs Available</CAPTION>

<THEAD>

<TR>

...

</TR>

</THEAD>

<TFOOT CLASS=footnote>

<TR>

<TD COLSPAN=5>

Many disciplines are also available as Minors and Joint

Honors programs.

</TD>

</TR>

<TR>

<TD COLSPAN=5>

* Preprofessional programs ...

</TD>

</TR>

</TFOOT>

<TBODY>...

</TBODY>

</TABLE>

C. Elementul TBODY

Sintaxa:

<TBODY>...</TBODY>

Atribute posibile:

· 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 TBODY defineşte un grup de rînduri de date într-un tabel. Un tabel definit cu TABLE poate avea unul sau mai multe elemente TBODY, care pot apărea după elementul TFOOT (opţional). Tagul de sfîrşit este întotdeauna opţional. Tagul de început este opţional cînd tabelul conţine doar un TBODY şi nu conţine nici un THEAD sau TFOOT. Aceasta permite ca structura simplă a tabelelelor din HTML 3.2 să rămînă validă:

<TABLE>

<TR>

<TH>Abbreviation</TH>

<TH>Long Form</TH>

</TR>

<TR>

<TD>AFAIK</TD>

<TD>As Far As I Know</TD>

</TR>

</TABLE>

Prin gruparea explicită a rîndurilor de date cu TBODY, autorii oferă browserelor posibilitatea de a prezenta tabele care permit scroll doar rîndurilor de date, cele de header şi footer rămînînd fixe pe ecran. În plus, gruparea rîndurilor de date în mai multe TBODY permite sugerarea unor prezentări diverse pentru diferitele grupuri, prin intermediul style-sheet-urilor.

Nu toate browserele suportă acest element, dar folosirea lui nu conduce la nici o problemă la acestea. Atributele au aceeaşi semnificaţia ca la THEAD şi TFOOT.

4. Definirea rîndurilor (elementul TR)

Un tabel este alcătuit, în esenţă din rînduri care conţin celulele în care se introduc elementele ce fac parte din tabel (datele). Un rînd de date este descris prin intermediul elementului TR. Atributele acestui element permit descrierea unor caracteristici comune tuturor celulelor din acel rînd, chiar dacă acestea pot fi specificate ulterior şi individual, pentru fiecare celulă în parte. Aceste caracteristici sînt:

· Alinierea orizontală a textului (ALIGN [=right, left, center])

· Alinierea verticală a textului (VALIGN [=top, middle, bottom])

· Culoarea de background (BGCOLOR [=valoarea culorii în hexa])

· Culoarea marginilor [a se vedea atributele lui TABLE]

Elementul TR

Sintaxa:

<TR>...</TR>

Atribute posibile:

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

· BGCOLOR=Color (culoarea de background a rîndului)

· atribute comune

Conţine:

· unul sau mai multe elemente TH sau TD

Conţinut în:

· TABLE, TFOOT, TBODY

Descriere:

Elementul TR defineşte un rînd într-un tabel. Elementele TR pot fi grupate cu ajutorul lui THEAD, TFOOT sau TBODY. Întrucît tagurile de început şi de sfîrşit ale lui TBODY sînt opţionale, structura simplă a tabelului din HTML 3.2 rămîne validă.

TR conţine elemente TH sau TD, care la rîndul lor conţin datele propriu-zise din tabel. În plus faţă de atributele comune prezente la cele mai multe elemente, TR poate avea şi atribute de prezentare pentru alinierea celulelor în rînd şi specificarea culorii de background. Semnificaţia acestora este aceeaşi cu cea de la elementele anterioare.

5. Definirea celulelor unui tabel (elementele TH şi TD)

Celule unui tabel pot conţine două tipuri de informaţie: informaţie antet (header, cap de tabel) şi date. Această distincţie permite browserelor să prezinte diferit cele două feluri de celule, chiar şi în absenţa style-sheet-urilor. De exemplu browserele vizuale pot prezenta headerele cu un font bold, iar cele care sintetizează vocea cu o inflexiune specială a vocii.

Informaţia de tip header se descrie cu elementul TH. Există două tipuri de astfel de informaţie: cea descrisă cu TH şi valoarea atributului ABBR. Un browser trebuie să prezinte sau una sau alte dintre cele două tipuri, ABBR fiind preferată atunci cînd nu există suficient spaţiu pentru a prezenta în întregime informaţia din TH.

Datele propriu-zise ale tabelului se inserează în celule descrise cu elementul TD.

Celulele unui tabel pot fi goale (fără nici un conţinut). În acest caz pot apare probleme la afişarea marginilor celulei respective (unele browsere nu desenează marginile celulelor goale, acestea trebuind să conţină un element invizibil, de exemplu un blanc, pentru ca marginea rîndului să nu fie întreruptă).

De exemplu, următorul tabel conţine (descrie) 2 rînduri cu cîte 4 coloane (celule) pe fiecare rînd, fiecare coloană avînd un header (cap de coloană) care o descrie:

<TABLE summary=" Tabel care indică nr. de ceşti de cafea băute la o reuniune,

felul cafelei (normă/decofeinizată) şi dacă este cu/fără

zahăr. ">

<CAPTION>Cups of coffee consumed by each</CAPTION>

<TR>

<TH>Name</TH>

<TH>Cups</TH>

<TH>Type of Coffee</TH>

<TH>Sugar?</TH>

<TR>

<TD>T. Sexton</TD>

<TD>10</TD>

<TD>Espresso</TD>

<TD>No</TD>

<TR>

<TD>J. Dinnen</TD>

<TD>5</TD>

<TD>Decaf</TD>

<TD>Yes</TD>

</TABLE>

Acest tabel poate arăta astfel:

Name Cups Type of Coffee Sugar?

T. Sexton 10 Espresso No

J. Dinnen 5 Decaf Yes

A. Elementul TH

Sintaxa:

<TH>...</TH>

Atribute posibile:

· ROWSPAN=Number (rînduri suprapuse/depăşite de celulă)

· COLSPAN=Number (coloane suprapuse/depăşite de celulă)

· HEADERS=IDREFS (lista celulelor header pentru celula curentă)

· ABBR=Text (abrevierea celulei header)

· SCOPE=[ row | col | rowgroup | colgroup ] (celulele acoperite de celula header)

· AXIS=CDATA (categoria celulei header)

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

· BGCOLOR=Color (culoarea de background a rîndului)

· WIDTH=Pixels (lăţimea celulei)

· HEIGHT=Pixels (înălţimea celulei)

· NOWRAP (suprimă continuarea conţinutului pe un alt rînd/word wrap)

· atribute comune

Conţine:

· elemente inline, elemente tip bloc

Conţinut în:

· TR

Descriere:

Elementul TH defineşte o celulă de tip header (antet, cap de tabel). Dacă o celulă este şi antet şi dată trebuie folosit TD.

Atributele ROWSPAN şi COLSPAN specifică numărul de rînduri şi respectiv numărul de coloane care sînt depăşite de celulă (sînt suprapuse de celulă, peste care se intinde celula). Valoarea implicită este 1. Valoarea specială 0 indică suprapunerea tuturor rîndurilor sau coloanelor pînă la sfîrşitul tabelului, dar este ignorată de majoritatea browserelor.

Atributul HEADERS specifică celulele header ce se aplică lui TH. valoarea este o listă a valorilor atributului ID a acelor celule. Se foloseşte de browserele nevizuale. Atributul SCOPE specifică celulele pentru care elementul descris cu TH oferă informaţii de header (antet).

Atributul ABBR dă o versiune abreviată a conţinutului celulei, utilizată în cazul în care nu există suficient spaţiu pentru a vizualiza conţinutul celulei.

Atributul AXIS oferă o metodă de a clasifica celulele. Valoarea acestui atribut este o listă de nume de categorii.

Atributele ALIGN, VALIGN, CHAR, CHAROFF, BGCOLOR au aceeaşi semnificaţie ca la TR, iar WIDTH, HEIGHT, NOWRAP şi BGCOLOR sînt depăşite în favoarea style-sheet-urilor.

B. Elementul TD

Sintaxa:

<TD>...</TD>

Atribute posibile:

· ROWSPAN=Number (rînduri suprapuse/depăşite de celulă)

· COLSPAN=Number (coloane suprapuse/depăşite de celulă)

· HEADERS=IDREFS (lista celulelor header pentru celula curentă)

· ABBR=Text (abrevierea celulei header)

· SCOPE=[ row | col | rowgroup | colgroup ] (celulele acoperite de celula header)

· AXIS=CDATA (categoria celulei header)

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

· BGCOLOR=Color (culoarea de background a rîndului)

· WIDTH=Pixels (lăţimea celulei)

· HEIGHT=Pixels (înălţimea celulei)

· NOWRAP (suprimă continuarea conţinutului pe un alt rînd/word wrap)

· atribute comune

Conţine:

· elemente inline, elemente tip bloc

Conţinut în:

· TR

Descriere:

Elementul TD defineşte o celulă de date. Elementele TD sînt conţinute în TR, care poate să conţină şi elemente TH. Dacă o celulă este şi antet şi dată trebuie folosit TD.

Semnificaţia atributele este aceeaşi cu cea de la TH.

6. Definirea celulelor extinse (atributele COLSPAN şi ROWSPAN)

Sintaxa:

<TH COLSPAN=nr. coloane></TH> sau <TH ROWSPAN=nr. rînduri></TH>

Descriere:

Pentru nevoi de organizare a datelor din tabel sau pentru obţinerea de efecte, celulele pot fi extinse atît orizontal (pe mai multe coloane) cît şi vertical (pe mai multe rînduri). Extinderea se obţine cu ajutorul atributelor COLSPAN şi ROWSPAN utilizate cu tag-urile <TH> sau <TD>. Celulele se extind întotdeauna în jos şi/sau spre dreapta; deci, pentru a crea o celulă care se extinde peste cîteva coloane se utilizează atributul COLSPAN în conjuncţie cu tag-ul de început a celei mai din stînga celule din rînd, iar pentru a obţine extinderea unei celule peste mai multe rînduri se utilizează atributul ROWSPAN în conjuncţie cu tag-ul de început a celei mai de sus celule de pe coloană. Valorile atributelor reprezintă numărul de coloane, respectiv rînduri peste care se doreşte să fie extinsă celula.

Trebuie avut în vedere că în cazul unor descrieri eronate (cu celule care se „suprapun“) browserele reacţionează diferit, efectele putînd fi uneori imprevizibile.

Exemplu greşit (cu celule extinse/suprapuse):

În acest tabel celula "5" este extinsă peste două rînduri şi celula "7" este extinsă peste două coloane, rezultînd o suprapunere între celulele "7" şi "9":

<TABLE border="1">

<TR><TD>1 <TD>2 <TD>3

<TR><TD>4 <TD rowspan="2">5 <TD>6

<TR><TD colspan="2">7 <TD>9

</TABLE>

Exemplu:

Un tabel cu celule extinse descris corect ar putea fi următorul:

<TABLE BORDER>

<TR>

<TH COLSPAN=2></TH>

<TH>Celula din stînga este<BR>extinsă pe două coloane<BR>Rîndul 1</TH>

</TR>

<TR ALIGN=CENTER>

<TH ROWSPAN=2>Celulă extinsă<BR>pe două rînduri</TH>

<TH>Capul rîndului 2</TH>

<TD>Rîndul 2</TD>

</TR>

<TR ALIGN=CENTER>

<TH>Capul rîndului 3</TH>

<TD>Rîndul 3</TD>

</TR>

</TABLE>

Exemplu:

Acest exemplu ilustrează cum afectează definirea unei celule extinse vecinii săi (aici celula de sub):

<TABLE border="1">

<TR><TD>1 <TD rowspan="2">2 <TD>3

<TR><TD>4 <TD>6

<TR><TD>7 <TD>8 <TD>9

</TABLE>

Întrucît celula "2" se extinde pe primul şi al doilea rînd, definirea celui de al doilea rînd o va lua în considerare. Astfel, în rîndul doi, al doile TD defineşte de fapt celula a treia de pe rînd, rezultînd un tabel ca în figura următoare:

Exemplu:

Acelaşi tabel, cu o extindere pe rînd, poate fi descris astfel:

<TABLE border="1">

<TR><TD>1 <TD>2 <TD>3

<TR><TD colspan="2">4 <TD>6

<TR><TD>7 <TD>8 <TD>9

</TABLE>

aici celula "4" se extinde pe două coloane şi, astfel, al doilea TD din rînd defineşte a treia celulă ("6"):

7. Grupuri de coloane (elementul COLGROUP)

Într-un tabel se pot grupa şi coloanele, nu numai rîndurile, folosind elementul COLGROUP. Numărul de coloane ce fac parte dintr-un grup se poate specifica în două moduri (mutual exclusive):

1. Cu atributul SPAN al elementului (valoare implicită 1)

2. Cu elementul COL, inclus în COLGROUP, se reprezintă una sau mai multe coloane din grupul respectiv.

Avantajul folosirii atributului SPAN (metoda 1) este că se pot grupa informaţii despre lăţimile coloanelor. De exemplu, dacă un tabel conţine 40 de coloane, fiecare cu o lăţime de 20 pixeli, este mult mai uşor de scris:

<COLGROUP span="40" width="20">

</COLGROUP>

de cît:

<COLGROUP>

<COL width="20">

<COL width="20">

...pînă la 40 de coloane...

</COLGROUP>

Cînd este necesar să se individualizeze o coloană (pentru stil, lăţime, etc) într-un grup, se poate identifica acea coloană cu un element COL. Astfel, pentru a aplica un stil special ultimei coloane a tabelului dat ca exemplu anterior se poate folosi:

<COLGROUP width="20">

<COL span="39">

<COL id="format-special">

</COLGROUP>

Atributul width al lui COLGROUP este moştenit de toate cele 40 de coloane. Primul element COL se referă la primele 39 de coloane (nu e nimic special cu ele) şi al doilea atribuie o valoare identificatorului reprezentat de atributul ID, astfel ca un stil defint cu tehnica style-sheet-urilor să se refere la el.

În exemplul următor se descrie un tabel cu două grupe de coloane. Prima conţine 10 coloane, iar cea de a doua 5. Lăţimea implicită pentru fiecare coloană din primul grup va fi 50 de pixeli, iar lăţimea fiecărei coloane din a doua grupă va fi minimul necesar pentru acea coloană:

<TABLE>

<COLGROUP span="10" width="50">

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

· 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:

· Zero sau mai nmulte elemente COL

Conţinut în:

· TABLE

Descriere:

Acest element defineşte un grup de coloane într-un tabel. Dacă e folosit, COLGROUP trebuie să apară după elementul (opţional) CAPTION şi înaintea elementului (tot opţional) THEAD. Diviziunea structurală definită de COLGROUP permite sugerarea unei prezentări comune pentru tot grupul de coloane prin intermediul style-sheet-urilor.

Atributul SPAN defineşte numărul de coloane din grup; valoarea implicită este 1. Celelalte atribute permise cu acest element sînt comune coloanelor din tabel. Poate conţine, de asemenea, elemente COL care definesc atributele pentru celulele din coloane în mod individual, suprapunîndu-se în acest fel atributele definite pentru grup. Atributul SPAN nu trebuie utilizat dacă COLGROUP conţine COL.

COLGROUP poate avea şi un număr de atribute de prezentare, multe dintre ele neputînd fi însă înlocuite complet de style-sheet-uri. Întrucît nu toate browserele suportă COLGROUP, se pot specifica aceste atribute şi celulelor individuale (elementelor TH şi TD).

Atributul WIDTH specifică lăţimea fiecarei coloane din grup. Valoarea trebuie să fie un număr de pixeli, procent din lăţimea tabelului sau o lăţime relativă exprimată ca i*, cu i intreg. O coloană care are WIDTH="3*" va avea lăţimea de 3 ori cît una care are WIDTH="1*". Valoarea WIDTH="0*" este echivalentul minimului necesar pentru afişarea conţinutului coloanei.

Atributele celelalte au aceeaşi semnificaţie ca la elementele anterioare.

Exemplu:

Acest exemplu oferă o perspectivă asupra divizării structurale a unui tabel în 3 părţi. Prima parte este alcătuită dintr-o singură coloană care dă descrierea unui caracter. O doua, de 3 coloane, dă diverse moduri de a reprezenta caracterul respectiv în HTML. A treia parte, tot de 3 coloane, arată cum va apare caracterul respectiv în diverse browsere.

<TABLE SUMMARY="This table gives the character entity reference,

decimal character reference, and hexadecimal character

reference for 8-bit Latin-1 characters, as well as the

rendering of each in your browser.">

<COLGROUP>

<COLGROUP SPAN=3>

<COLGROUP SPAN=3>

<THEAD>

<TR>

<TH SCOPE=col ROWSPAN=2>Character</TH>

<TH SCOPE=col ROWSPAN=2>Entity</TH>

<TH SCOPE=col ROWSPAN=2>Decimal</TH>

<TH SCOPE=col ROWSPAN=2>Hex</TH>

<TH SCOPE=colgroup COLSPAN=3>Rendering in Your Browser</TH>

</TR>

<TR>

<TH SCOPE=col>Entity</TH>

<TH SCOPE=col>Decimal</TH>

<TH SCOPE=col>Hex</TH>

</TR>

</THEAD>

<TBODY>

<TR>

<TD SCOPE=row>non-breaking space</TD>

<TD>&amp;nbsp;</TD>

<TD>&amp;#160;</TD>

<TD>&amp;#xA0;</TD>

<TD>&nbsp;</TD>

<TD>&#160;</TD>

<TD>&#xA0;</TD>

</TR>

...

</TBODY>

</TABLE>

În locul lui <COLGROUP SPAN=3> se poate folosi un COLGROUP cu 3 elemente COL, astfel:

<COLGROUP>

<COL CLASS=entity>

<COL CLASS=decimal>

<COL CLASS=hex>

</COLGROUP>

S-a folosit atributul CLASS pentru a se face disticţie între coloane individuale ale grupului, permiţînd astfel sugerarea diferită a prezentării pentru respectivele coloane, prin folosirea style-sheet-urilor.

8. Definirea atributelor comune coloanelor (elementul COL)

Elementul COL permite autorilor paginilor HTML gruparea împreună a atributelor unor coloane. COL nu grupează coloane (dpdv structural) – acesta fiind rolul lui COLGROUP. Elementel COL sînt vide şi servesc doar ca suport pentru atribute. Ele pot apare în interiorul sau exteriorul unui grup explicit de coloane (defint cu COLGROUP).

Elementul COL

Sintaxa:

<COL>

Atribute posibile:

· SPAN=Number (numărul de coloane în grup)

· WIDTH=MultiLength (lăţimea fiecărei coloane)

· 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:

· 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:

<TABLE SUMMARY="This table gives the character entity reference,

decimal character reference, and hexadecimal character

reference for 8-bit Latin-1 characters, as well as the

rendering of each in your browser.">

<COLGROUP CLASS="character-description">

<COLGROUP>

<COL CLASS=entity>

<COL SPAN=2 CLASS=numeric>

<COLGROUP>

<COL CLASS="entity-rendering">

<COL CLASS="decimal-rendering">

<COL CLASS="hex-rendering">

<THEAD>

<TR>

<TH SCOPE=col ROWSPAN=2>Character</TH>

<TH SCOPE=col ROWSPAN=2>Entity</TH>

<TH SCOPE=col ROWSPAN=2>Decimal</TH>

<TH SCOPE=col ROWSPAN=2>Hex</TH>

<TH SCOPE=colgroup COLSPAN=3>Rendering in Your Browser</TH>

</TR>

<TR>

<TH SCOPE=col>Entity</TH>

<TH SCOPE=col>Decimal</TH>

<TH SCOPE=col>Hex</TH>

</TR>

</THEAD>

<TBODY>

<TR>

<TD SCOPE=row>non-breaking space</TD>

<TD>&amp;nbsp;</TD>

<TD>&amp;#160;</TD>

<TD>&amp;#xA0;</TD>

<TD>&nbsp;</TD>

<TD>&#160;</TD>

<TD>&#xA0;</TD>

</TR>

...

</TBODY>

</TABLE>

9. Calculul numărului de coloane dintr-un tabel

Pentru calculul numărului de coloane ale unui tabel se folosesc două metode prezentate în continuare în ordinea precedenţei (ordinea în care sînt folosite):

1. Dacă TABLE conţine un element COLGROUP sau COL numărul coloanelor se calculează adunînd:

· Pentru fiecare COL valoarea atributului SPAN (valoarea implicită 1).

· Pentru fiecare COLGROUP ce conţine cel puţin un COL se ignoră atributul SPAN al fiecărui COLGROUP. Pentru fiecare COL se aplică pasul 1.

· Pentru fiecare COLGROUP vid se ia valoarea lui SPAN (valoarea implicită 1).

2. Altfel, dacă TABLE nu conţine COLGROUP sau COL numărul de coloane se determină din descrierea rîndurilor. Numărul de coloane este egal cu numărul maxim de elemente ce par pe un rînd (incluzînd şi celule ce se extind pe mai multe coloane). Pentru toate rîndurile care au mai puţine coloane se adaugă la sfîrşit celule goale.

Dacă tabelul conţine COLGROUP şi COL şi cele două metode de calcul nu dau acelaşi rezultat atunci este vorba despre o eroare. Odată ce s-a calculat numărul de coloane, acestea pot fi grupate.

Exemplu: Pentru fiecare dintre tabelele descrise în continuare, cele 2 metode trebuie să dea acelaşi rezultat: 3 coloane. Primele trei tabele pot fi afişate incremental:

1.

<TABLE>

<COLGROUP span="3"></COLGROUP>

<TR><TD> ...

...rîndurile tabelului...

</TABLE>

2.

<TABLE>

<COLGROUP>

<COL>

<COL span="2">

</COLGROUP>

<TR><TD> ...

... rîndurile tabelului...

</TABLE>

3.

<TABLE>

<COLGROUP>

<COL>

</COLGROUP>

<COLGROUP span="2">

<TR><TD> ...

... rîndurile tabelului...

</TABLE>

4.

<TABLE>

<TR>

<TD><TD><TD>

</TR>

</TABLE>

10. Calculul lăţimii coloanelor dintr-un tabel

Lăţimea unei coloane poate fi specificată în trei moduri:

1. Fix

Specificarea unei lăţimi fixe este dată în pixeli (ex. width="30"). Această metodă permite afişarea tabelelor în mod incremental (pe măsură ce se încarcă rîndurile tabelului).

2. Procent

Specificarea unei lăţimi ca procent (ex. width="20%") este dată în funcţie de lăţimea disponibilă pentru întreg tabelul. Aceasta nu depinde de tabelulul însuşi, şi astfel această metodă permite şi ea afişarea tabelelor incremental.

3. Proporţional

Specificarea unei lăţimi în mod proporţional (ex. width="3*") se referă la porţiunile de spaţiu orizontal solicitate de tabel. Dacă lăţimea tabelului este dată ca o valoare fixă, prin intermediul atributului width al elementului TABLE, atunci şi această metodă permite afişarea tabelelor incremental.

Dacă, însă, tabelul nu are o lăţime fixă, browserele trebuie să aştepte încărcarea integrală a tabelului înainte de a determina lăţimea orizontală cerută de tabel. Numai atunci se poate determina şi lăţimea coloanelor.

Dacă nu se specifică nici o informaţie despre lăţimea unei coloane, browserele nu vor capabile să formateze tabelul incremental, întrucît trebuie să aştepte întregul conţinut al coloanei pentru a determina lăţimea acesteia.

Dacă lăţimea coloanei se dovedeşte prea mică pentru conţinutul acesteia, browserele pot alege să reformateze tabelul.

Exemplu:

Tabelul următor are 6 coloane. Prima nu aparţine explicit nici unui grup. Urmatoarele trei aparţin explicit primului grup şi ultimele două aparţin celui de al doilea grup explicit. Acest tabel nu poate fi afişat incremental întrucît conţine coloane cu lăţimi specificate proporţional şi atributul width al lui TABLE nu are specificat nici o valoare.

<TABLE>

<COLGROUP>

<COL width="30">

<COLGROUP>

<COL width="30">

<COL width="0*">

<COL width="2*">

<COLGROUP align="center">

<COL width="1*">

<COL width="3*" align="char" char=":">

<THEAD>

<TR><TD> ...

...rîndurile tabelului...

</TABLE>

În momentul în care browserul recepţionează toate datele din tabel, speţiul orizontal disponibil va fi alocat coloanelor după cum urmează:

1. Se alocă 30 de pixeli coloanelor unu şi doi.

2. Se rezervă spaţiul minimal pentru coloana trei.

3. Spaţiul orizontal rămas disponibil este împăţit în 6 părţi egale (întrucît 2* + 1* + 3* = 6 părţi egale).

4. Coloana a patra (2*) va primi 2 părţi, coloana a cincea (1*) o parte şi coloana a şasea (3*) va primi 3 parţi.

Valoarea atributului align din coloana a treia este "center". Toate celule din fiecare coloană din acest grup vor moşteni această valoare, dar o pot suprapune. De fapt, COL chiar asta şi face prin specificarea faptului că fiecare celulă din coloana a şasea va fi aliniată după caracterul ":".

Exemplu:

Tabelul următor, aşa cum are descrisă lăţimea, permite formatarea (şi implicit şi afişarea) incremental:

<TABLE width="200">

<COLGROUP span="10" width="15">

<COLGROUP width="*">

<COL id="penultima-coloană">

<COL id="ultima-coloană">

<THEAD>

<TR><TD> ...

...rîndurile tabelului...

</TABLE>

Primele 10 coloane au fiecare cîte 15 pixeli lăţime. Ultimele două coloane vor primi fiecare jumătate din cei 50 de pixeli care mai rămîn. Elementele COL apar doar pentru a se specifica o valoare atributului id.

11. Afişarea marginilor exterioare şi interioare

Atributele care determină modul de afişare al marginilor exterioare şi liniilor interioare (dintre celule) sînt următoarele:

1. frame = void|above|below|hsides|lhs|rhs|vsides|box|border

Acest atribut specifică marginile exterioare (care înconjoară tabelul) care vor fi vizibile.

2. rules = none|groups|rows|cols|all

Acest atribut specifică marginile interioare (care delimitează celulele tabelului) care vor fi vizibile. Modul în care sînt afişate depinde de browser.

3. border = pixels

Acest atribut specifică lăţimea (în pixeli) a marginilor exterioare.

Pentru a se păstra compatibilitatea cu versiunile anterioare, se impun următoarele reguli:

· Dacă border="0" atunci frame="void" şi, dacă nu este specificat altfel, rules="none".

· Orice altă valoare pentru border implică frame="border" şi, dacă nu este specificat altfel, rules= "all".

· Valoarea "border" în tagul de început al lui TABLE trebuie interpretat ca valoare a atributului frame. Aceasta implică rules="all" şi o valoare diferită de zero pentru atributul border.

Exemplu:

Următoarele 2 definiţii sînt echivalente:

<TABLE border="2">

<TABLE border="2" frame="border" rules="all">

este aceeaşi cu:

<TABLE border>

<TABLE frame="border" rules="all">

Exemplu:

În exemplul următor este descris un tabel care are margine exterioară vizibilă, de 5 pixeli grosime, în partea stîngă şi dreaptă, precum şi margini interne vizibile între celule:

<TABLE border="5" frame="vsides" rules="cols">

<TR> <TD>1 <TD>2 <TD>3

<TR> <TD>4 <TD>5 <TD>6

<TR> <TD>7 <TD>8 <TD>9

</TABLE>

12. Alinierea datelor din celule

Pentru estetica conţinutului tabelului există cîteva opţiuni care permit alinierea datelor în interiorul celulelor atît pe orizontală cît şi pe verticală. Opţiunile sînt exprimabile prin intermediul unor atribute ale tag-urilor TR, TH, TD, COL, COLGROUP.

Atributele care afectează alinierea datelor în celule unui tabel sînt:

1. align = left|center|right|justify|char

Atributul ALIGN este utilizat pentru aliniere orizontală şi poate lua următoarele valori:

Valoare	Descriere
LEFT	Datele din celulă sînt aliniate la marginea din stînga celulei
RIGHT	Datele din celulă sînt aliniate la marginea din dreapta celulei
CENTER	Datele din celulă sînt centrate orizontal la mijlocul celulei
JUSTIFY	Datele din celulă sînt aliniate atît la marginea din stînga a celulei cît şi la marginea din dreapta
CHAR	Datele din celulă sînt aliniate după un anumit caracter

2. valign = top|middle|bottom|baseline

Atributul VALIGN este utilizat pentru aliniere verticală şi poate lua următoarele valori:

Valoare	Descriere
TOP	Datele din celulă sînt aliniate la marginea de sus a celulei
BOTTOM	Datele din celulă sînt aliniate la baza celulei
MIDDLE	Datele din celulă sînt centrate vertical la mijlocul celulei
BASELINE	Aliniere similară cu TOP dar alinierea se face cu baza primului rînd text din fiecare celulă.

3. char = character

Acest atribut specifică un caracter (unic într-un fragment de text) care joacă rolul de axă după care se aliniază restul. Valoarea implicită este punctul zecimal.

4. charoff = length

Cînd este prezent acest atribut specifică affsetul primei aparaţii a caracterului după care se face alinierea pe fiecare linie. Dacă o linie nu conţine caracterul de aliniere ea poate fi deplasată la sfîrşitul poziţieie de aliniere.

Exemplu:

Tabele cu aliniere orizontală şi verticală:

1.

<TABLE BORDER>

<CAPTION>Aliniere orizontală</CAPTION>

<TR>

<TD ALIGN=LEFT>&nbsp;<BR> Left&nbsp; <BR>&nbsp;</TD>

<TD ALIGN=Center>&nbsp;<BR>&nbsp;Center&nbsp;<BR>&nbsp;</TD>

<TD ALIGN=RIGHT> &nbsp;<BR>&nbsp; Right <BR>&nbsp;</TD>

</TR>

</TABLE>

2.

<TABLE BORDER>

<CAPTION>Aliniere verticală</CAPTION>

<TR ALIGN=CENTER>

<TD VALIGN=TOP>Top<BR> &nbsp;<BR>&nbsp;</TD>

<TD VALIGN=MIDDLE>Center</TD>

<TD VALIGN=BOTTOM>&nbsp;<BR><BR>&nbsp;Bottom </TD>

</TR>

</TABLE>

Exemplu:

Tabel cu combinaţie de alinieri:

<TABLE BORDER>

<TR>

<TH></TH>

<TH>Left (Stînga)</TH>

<TH>Center (Centru)</TH>

<TH>Right (Dreapta)</TH>

<TH>Top<BR>(Sus)<BR></TH>

<TD ALIGN=LEFT VALIGN=TOP><IMG SRC="A.gif"></TD>

<TD ALIGN=CENTER VALIGN=TOP><IMG SRC="A.gif"></TD>

<TD ALIGN=RIGHT VALIGN=TOP><IMG SRC="A.gif"></TD>

<TH>Center<BR>(Centru)<BR></TH>

<TD ALIGN=LEFT VALIGN=MIDDLE><IMG SRC="A.gif"></TD>

<TD ALIGN=CENTER VALIGN=MIDDLE><IMG SRC="A.gif"></TD>

<TD ALIGN=RIGHT VALIGN=MIDDLE><IMG SRC="A.gif"></TD>

</TR>

<TR>

<TH>Bottom<BR>(Jos)<BR></TH>

<TD ALIGN=LEFT VALIGN=BOTTOM><IMG SRC="A.gif"></TD>

<TD ALIGN=CENTER VALIGN=BOTTOM><IMG SRC="A.gif"></TD>

<TD ALIGN=RIGHT VALIGN=BOTTOM><IMG SRC="A.gif"></TD>

</TR>

</TABLE>

Exemplu:

Tabelul următor aliniază un rînd de valori ce reprezintă preţuri după punctul zecimal, caracter de aliniere setat explicit:

<TABLE border="1">

<COLGROUP>

<COL>

<COL align="char" char=".">

<THEAD>

<TR>

<TH>Vegetable

<TH>Cost per kilo

<TBODY>

<TR>

<TD>Lettuce

<TD>$1

<TR>

<TD>Silver carrots

<TD>$10.50

<TR>

<TD>Golden turnips

<TD>$100.30

</TABLE>

Tabelul ar putea arăta astfel:

------------------------------

| Vegetable |Cost per kilo|

|--------------|-------------|

|Lettuce | $1 |

|--------------|-------------|

|Silver carrots| $10.50|

|--------------|-------------|

|Golden turnips| $100.30|

------------------------------

Atributele de aliniere inserate în tag-urile de început de rînd (<TR>) au efect asupra tuturor celulelor din rînd. Atributele de aliniere inserate în tag-urile care definesc celule au precedenţă faţă de atributele de aliniere inserate în tag-urile început de rînd.

Moştenirea specificaţiilor de aliniere

Alinierea conţinutului celulelor poate fi specificată individual fiecărei celule sau poate fi moştenită de la elementele ce includ celula respectivă (rînd, coloană, tabel).

Ordinea de precedenţă (de la cea mai mare la cea mai mică) pentru atributele align, char şi charoff este:

1. Atributul de aliniere setat pentru un element din celulă (ex. P).

2. Atributul de aliniere setat pentru o celulă (TH sau TD).

3. Atributul de aliniere setat pentru o coloană sau grup de coloane (COL şi COLGROUP). Cînd o celulă face parte dintr-o celulă extinsă pe coloane, proprietăţile de aliniere sînt moştenite de la celula de unde începe extensia.

4. Atributul de aliniere setat pentru un rînd sau grup de rînduri (TR, THEAD, TFOOT şi TBODY). Cînd o celulă face parte dintr-o celulă extinsă pe mai multe rînduri, proprietăţile de aliniere sînt moştenite de la celula de unde începe extensia.

5. Atributul de aliniere setat pentru tabel (TABLE).

6. Valoarea implicită de aliniere.

Ordinea de precedenţă (de la cea mai mare la cea mai mică) pentru atributul valign este:

1. Atributul de aliniere setat pentru un element din celulă (ex. P).

2. Atributul de aliniere setat pentru o celulă (TH sau TD).

3. Atributul de aliniere setat pentru un rînd sau grup de rînduri (TR, THEAD, TFOOT şi TBODY). Cînd o celulă face parte dintr-o celulă extinsă pe mai multe rînduri, proprietăţile de aliniere sînt moştenite de la celula de unde începe extensia.

4. Atributul de aliniere setat pentru o coloană sau grup de coloane (COL şi COLGROUP). Cînd o celulă face parte dintr-o celulă extinsă pe coloane, proprietăţile de aliniere sînt moştenite de la celula de unde începe extensia.

5. Atributul de aliniere setat pentru tabel (TABLE).

6. Valoarea implicită de aliniere.

La afişarea celulelor, alinierea orizontală este determinată de coloane înaintea rîndurilor, în timp ce pentru alinierea verticală ordinea de preferinţă este rînduri şi apoi coloane.

Alinierea implicită depinde de browser dar, în cele mai multe cazuri este: informaţiile din celulele cap de tabel sînt centrate atît orizontal cît şi vertical iar informaţiile din celulele de date sînt centrate vertical dar aliniate orizontal la stînga.

Exemplu:

Un exemplu complet de tabel cu diverse atribute este prezentat în continuare:

<TABLE border="2" frame="hsides" rules="groups"

summary="Code page support in different versions of MS Windows.">

<CAPTION>CODE-PAGE SUPPORT IN MICROSOFT WINDOWS</CAPTION>

<COLGROUP align="center">

<COLGROUP align="left">

<COLGROUP align="center" span="2">

<COLGROUP align="center" span="3">

<THEAD valign="top">

<TR>

<TH>Code-Page<BR>ID

<TH>Name

<TH>ACP

<TH>OEMCP

<TH>Windows<BR>NT 3.1

<TH>Windows<BR>NT 3.51

<TH>Windows<BR>95

<TBODY>

<TR><TD>1200<TD>Unicode (BMP of ISO/IEC-10646)<TD><TD><TD>X<TD>X<TD>*

<TR><TD>1250<TD>Windows 3.1 Eastern European<TD>X<TD><TD>X<TD>X<TD>X

<TR><TD>1251<TD>Windows 3.1 Cyrillic<TD>X<TD><TD>X<TD>X<TD>X

<TR><TD>1252<TD>Windows 3.1 US (ANSI)<TD>X<TD><TD>X<TD>X<TD>X

<TR><TD>1253<TD>Windows 3.1 Greek<TD>X<TD><TD>X<TD>X<TD>X

<TR><TD>1254<TD>Windows 3.1 Turkish<TD>X<TD><TD>X<TD>X<TD>X

<TR><TD>1255<TD>Hebrew<TD>X<TD><TD><TD><TD>X

<TR><TD>1256<TD>Arabic<TD>X<TD><TD><TD><TD>X

<TR><TD>1257<TD>Baltic<TD>X<TD><TD><TD><TD>X

<TR><TD>1361<TD>Korean (Johab)<TD>X<TD><TD><TD>**<TD>X

<TBODY>

<TR><TD>437<TD>MS-DOS United States<TD><TD>X<TD>X<TD>X<TD>X

<TR><TD>708<TD>Arabic (ASMO 708)<TD><TD>X<TD><TD><TD>X

<TR><TD>709<TD>Arabic (ASMO 449+, BCON V4)<TD><TD>X<TD><TD><TD>X

<TR><TD>710<TD>Arabic (Transparent Arabic)<TD><TD>X<TD><TD><TD>X

<TR><TD>720<TD>Arabic (Transparent ASMO)<TD><TD>X<TD><TD><TD>X

</TABLE>

Acesta poate arăta ca în figura următoare:

Capitolul 6.

Utilizarea frame-urilor în limbajul HTML

Frame-urile HTML permit autorilor de pagini Web prezentarea documentelor în zone de ecran multiple, zone care pot fi ferestre independente sau subferestre ale ferestrei principale a browserului. Fereastra browserului este astfel divizată la fel cum un tabel împarte o pagină. În fiecare dintre aceste zone se pot încărca diverse şi diferite (!) documente HTML.

Aceste zone multiple oferă posibilitatea de a păstra anumite informaţii vizibile în timp ce altele sînt derulate (scroll) sau înlocuite. de exemplu în aceeaşi fereastră un frame poate afişa un banner static, un altul un meniu de navigare şi al treilea documentul propriu-zis care poate fi derulat (deplasat, scroll) sau înlocuit prin comenzile din cel de-al doilea frame. Dincolo şi de avantajele legate de prezentarea mult mai potrivită a informaţiilor, această posibilitate oferă şi o creştere a vitezei de încărcare a unor pagini. Dacă meniu de navigare este alcătuit din butoane (care sînt elemente grafice), acestea pot fi încărcate doar o singură dată şi folosite cu diverse contexte (pagini), fără ca browserul să fie nevoit să le încarce sau chiar să le afişeze de fiecare dată cînd se schimbă pagina.

În continuare se prezintă un document simplu care conţine frame-uri:

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

"http://www.w3.org/TR/REC-html40/frameset.dtd">

<HTML>

<HEAD>

<TITLE>A simple frameset document</TITLE>

</HEAD>

<FRAMESET cols="20%, 80%">

<FRAMESET rows="100, 200">

<FRAME src="contents_of_frame1.html">

<FRAME src="contents_of_frame2.gif">

</FRAMESET>

<FRAME src="contents_of_frame3.html">

<NOFRAMES>

<P>This frameset document contains:

<UL>

<LI><A href="contents_of_frame1.html">Some neat contents</A>

<LI><IMG src="contents_of_frame2.gif" alt="A neat image">

<LI><A href="contents_of_frame3.html">Some other neat contents</A>

</UL>

</NOFRAMES>

</FRAMESET>

</HTML>

care ar putea arăta astfel:

+---------------------------------------+

| | |

| Frame 1 | |

| | |

|---------| |

| | Frame 3 |

| | |

| Frame 2 | |

| | |

| | |

+ --------------------------------------+

Pentru browserele care nu pot afişa frame-uri se oferă un element special NOFRAMES în care se descrie pagina pentru acest caz (din ce în ce mai rar!).

Un document care descrie modalitatea în care frame-urile sînt poziţionate pe ecran (layout-ul frame-urilor) se numeşte document frameset şi are o structură diferită de cea a unui document fără frame-uri. Un document standard are o secţiune HEAD şi una (sau mai multe) secţiuni BODY. Un document cu frame-uri are şi el o secţiune HEAD dar în locul secţiunii BODY are o secţiune specială descrisă de elementul FRAMESET.

Secţiunea descrisă de FRAMESET specifică modul de aranjare (layout-ul) zonelor ocupate de frame-uri în fereastra principală a browserului. În plus această secţiune poate conţine şi un element NOFRAMES pentru browserele ce nu pot afişa frame-uri.

Elementele ce în mod normal apăreau în BODY nu trebuie să apară înaintea primului element FRAMESET, pentru că în acest caz elementul FRAMESET va fi ignorat.

Relativ la frame-uri există trei elemente (seturi de taguri):

· <FRAMESET> ... </FRAMESET> - divide fereastra browserului (sau un alt frame deja definit) în frame-uri specificate ca rînduri sau coloane din fereastra respectivă (acest element trebuie să apară între tagul de sfîrşit </HEAD> şi tagul <BODY>);

· <FRAME> ... </FRAME> defineşte caracteristicile unui frame particular dintr-un set de frame-uri (tagurile elementului FRAME trebuie să apară în interiorul tagurilor elementului FRAMESET);

· <NOFRAMES> ... </NOFRAMES> descrie informaţia care se afişează dacă browserul nu suportă frame-uri (tagul NOFRAMES nu trebuie să includă elementul BODY).

1. Descrierea layout-ului documentului cu frame-uri (elementul FRAMESET)

Modul de aranjare al subspaţiilor ocupate de frame-uri (al setului de frame-uri, frameset-ului) într-o fereastră se descrie cu elementul FRAMESET. Acesta are ca „argumente“ ROWS, care defineşte numărul de subspaţii orinzontale şi COLS care defineşte numărul de subspaţii verticale. Folosirea simultană a ambelor atribute împarte spaţiul ocupat de frame-uri într-un grid, umplut de la stînga la dreapta şi de sus în jos: întîi rîndul de sus, de la stînga la dreapta, apoi rîndul al doilea, tot de la stînga la dreapta, ş.a.m.d.

Dacă ROWS nu are valoare, fiecare coloană se extinde pe lungimea întregii pagini, iar dacă lipseşte COLS fiecare rînd se extinde pe întreaga lăţime. Dacă lipsesc amîndouă frame-ul ia exact dimensiunea paginii care-l defineşte.

Exemple:

1. Împărţirea ecranului vertical în două parţi egale:

<FRAMESET rows="50%, 50%">

... restul definiţiilor ...

</FRAMESET>

2. Crearea a 3 coloane: a doua cu dimensiune fixă de 250 pixeli (utilă dacă are în ea o imagine de această lăţime), prima primind 25% din spaţiul care mai rămîne şi a treia cu 75% din acesta:

<FRAMESET cols="1*,250,3*">

... restul definiţiilor...

</FRAMESET>

3. Grid de 2x3 subspaţii:

<FRAMESET rows="30%,70%" cols="33%,34%,33%">

... restul definiţiilor ...

</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*">

... restul definiţiilor ...

</FRAMESET>

Dacă dimensiunile nu fac 100%, diferenţa este gestionată de browser: dacă mai rămîne se alocă fiecărui frame proprţional cu dimensiunea sa, dacă e prea mult se reduce dimensiunea fiecărui frame în funcţie de proporţia din spaţiul total ocupat de fiecare frame.

Elementul FRAMESET

Sintaxa:

<FRAMESET>... </FRAMESET>

Atribute posibile:

· ROWS=MultiLengths (lungimile rîndurilor)

· COLS=MultiLengths (lungimile coloanelor)

· ONLOAD=Script (toate frame-urile au fost încărcate)

· ONUNLOAD=Script (toate frame-urile au fost eliminate)

· atribute core

Conţine:

· Unul sau mai multe elemente FRAMESET şi FRAME şi, opţional, un element NOFRAMES

Conţinut în:

· HTML

Descriere:

Acest element este un container de frame-uri, utilizat pentru a împărţi o fereastră în subspaţii dreptunghiulare numite frame-uri. Documentul care include acest element (document cu frame-uri sau frameset document) elementul FRAMESET cel mai din exterior ia locul lui BODY şi urmează imediat elementul HEAD.

Atributele ROWS şi COLS definesc dimensiunea fiecarui frame din set. Fiecare atribut ia ca valoare o listă de lungimi specificate în pixeli, ca procent sau ca lungime relativă. O lungime relativă este exprimată ca i*, unde i este un întreg. De exemplu un set de frame-uri definit cu ROWS="3*,*" (* este echivalent cu 1*) va avea primul rînd de trei ori mai înalt decît al doilea.

Valorile specificate pentru ROWS dau înălţimea fiecărui rînd, de sus în jos, iar cele date pentru COLS dau lăţimea fiecărei coloane, de la stînga la dreapta. Dacă ROWS sau COLS sînt omise, valoare implicită pentru fiecare dintre aceste atribute este 100%. Dacă sînt specificate ambele, se defineşte un grid („caroiaj“) care se umple de la stînga la dreapta şi de sus în jos.

Cînd se folosesc dimensiuni în pixeli acestea trebuie combinate cu lungimi relative pentru a acoperi diversele dimensiuni ale ferestrelor. Dimensiunile fixe în pixeli se folosesc doar în frame-urile care conţin imagini sau alte obiecte de dimensiune fixă şi cunoscută. În general, însă, se preferă procentele datorită capacităţii de adaptare la diversele dimensiuni ale ferestrelor.

Elementul FRAMESET acceptă, de asemenea, şi atributele ONLOAD şi ONUNLOAD pentru a specifica acţiuni client-side executate de scripturi cînd frame-urile sînt încărcate, respectiv eliminate.

Exemplu:

Acest exemplu descrie un document (grid) cu 2 rînduri şi 3 coloane. De remarcat încercarea de a formata documentul şi în cazul în care browserul nu suportă frame-uri asemănător cu originalul.

<FRAMESET ROWS="70%,30%" COLS="33%,33%,34%">

<FRAME NAME="Photo1" SRC="Row1_Column1.html">

<FRAME NAME="Photo2" SRC="Row1_Column2.html">

<FRAME NAME="Photo3" SRC="Row1_Column3.html">

<FRAME NAME="Caption1" SRC="Row2_Column1.html">

<FRAME NAME="Caption2" SRC="Row2_Column2.html">

<FRAME NAME="Caption3" SRC="Row2_Column3.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>

<A HREF="Row1_Column2.html">Photo 2</A>

(<A HREF="Row2_Column2.html">Caption</A>)

</LI>

<LI>

<A HREF="Row1_Column3.html">Photo 3</A>

(<A HREF="Row2_Column3.html">Caption</A>)

</LI>

</UL>

</BODY>

</NOFRAMES>

</FRAMESET>

Iar exemplul următor foloseşte elemente FRAMESET îmbricate pentru a defini 2 frame-uri în primul rînd şi un frame în rîndul al doilea:

<FRAMESET ROWS="*,100">

<FRAMESET COLS="40%,*">

<FRAME NAME="Menu" SRC="nav.html" TITLE="Menu">

<FRAME NAME="Content" SRC="main.html" TITLE="Content">

</FRAMESET>

<FRAME NAME="Ad" SRC="ad.html" TITLE="Advertisement">

<NOFRAMES>

<BODY> ...

</BODY>

</NOFRAMES>

</FRAMESET>

2. Seturi de frame-uri îmbricate

Frame-urile descrise de un document pot fi îmbricate oricît de mult prin includerea unui element FRAMESET în alt element FRAMESET.

În exemplul următor primul element FRAMESET (cel din „exterior“) divide tot spaţiul disponibil în 3 coloane egale. Al doilea FRAMESET, din interiorul primului, divide a doua zonă în rînduri de înălţime inegală.

<FRAMESET cols="33%, 33%, 34%">

...conţinutul primului frame ...

<FRAMESET rows="40%, 50%">

... conţinutul celui de al doilea frame, primul rînd ...

... conţinutul celui de al doilea frame, al doilea rînd ...

</FRAMESET>

... conţinutul celui de al treilea frame ...

</FRAMESET>

3. Partajarea datelor între frame-uri

Se pot partaja date între diverse frame-uri prin includerea acestora într-un element OBJECT. Acesta va fi inclus în elementul HEAD al documentului care descrie frame-urile şi va fi denumit cu atributul ID. Orice document ce reprezintă conţinutul unei frame îl va putea accesa prin intermediul acestui identificator.

Exemplul următor ilustrează modul în care un script poate referi un element OBJECT definit pentru tot setul de frame-uri:

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

"http://www.w3.org/TR/REC-html40/frameset.dtd">

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

<!-- In AnotherPage.html -->

<HTML>

<HEAD>

<TITLE>... Page title bla, bla, bla ... </TITLE>

</HEAD>

<BODY>

... începutul documentului ...

<P>

<SCRIPT type="text/javascript">

parent.myobject.myproperty

</SCRIPT>

... restul documentului ...

</BODY>

</HTML>

4. Definirea conţinutului şi atributelor unui frame (elementul FRAME)

Conţinutul (documentul care se încarcă în frame) şi înfăţişarea unui frame (detalii despre marginile frame-ului şi despre posibilităţile de scroll) sînt definite de elementul FRAME prin intermediul unor atribute specifice. În plus frame-urile se pot identifica prin nume care pot fi utilizate la navigare: tagul ANCHOR poate specifica un atribut (NAME) care să indice frame-ul în care se încarcă documentul indicat de legătură.

Elementul FRAME

Sintaxa:

<FRAME>

Atribute posibile:

· NAME=CDATA (numele frame-ului)

· SRC=URI (conţinutul frame-ului)

· LONGDESC=URI (descriere lungă a frame-ului)

· FRAMEBORDER=[ 1 | 0 ] (marginea frame-ului)

· MARGINWIDTH=Pixels (lăţimea marginii)

· MARGINHEIGHT=Pixels (înălţimea marginii)

· NORESIZE (dezactivează posibilitatea de redimensionare a frame-ului)

· SCROLLING=[ yes | no | auto ] (posibilitatea de scroll)

· atribute core

Conţine:

· vid (nu conţine nimic)

Conţinut în:

· FRAMESET

Descriere:

Acest element defineşte un frame – un subspaţiu dreptunghiluar dintr-un document cu frame-uri (dintr-un set de frame-uri). Fiecare element FRAME trebuie să apară într-un element FRAMESET care îi defineşte dimensiunea.

Atributul SRC oferă adresa (URI) de unde se va înărca conţinutul frame-ului, care este, în mod tipic, un document HTML. Dacă este însă o imagine, o secvenţă video sau un alt obiect similar şi acesta nu poate fi descris în mod adecvat cu atributul TITLE al lui FRAME, atunci autorul paginii respective va trebui să folosescă atributul LONGDESC pentru a oferi a adresă (URI) a descrierii HTML a obiectului respectiv. Nu se recomandă însă această metodă, pentru a se permite o indexare eficientă de către motoarele de căutare, precum şi o utilizare accesibilă în cazule browsere-lor nevizuale.

Atributul NAME dă un nume frame-ului respectiv pentru a putea fi utilizat cu atributul TARGET al elementelor A, BASE, FORM şi LINK. Valoarea acestui atribut trebuie să înceapă cu un caracter din domeniul A-Z sau a-z. Aceasta trebuie să fie „citibilă“ şi să se bazeze pe conţinutul frame-ului respectiv. De exemplu NAME=left este nerecomandat, întrucît nu spune nimic despre ce se găseşte în frame-ul respectiv, în timp ce NAME=nav este şi aceasta nerecomandată, nefiind suficient de clară (nu este „citibilă“). Mult mai sugestivă este o atrbuire de genul NAME=Content sau NAME=Navigation. Şi atributul TITLE poate fi, de asemenea, folosit pentru a oferi un titlu mai lung pentru frame, dar acesta nu este suportat de toate browserele.

Atributele prezentaţionale acceptate pot fi înlocuite de style-sheet-uri (şi e recomandabil să fie aşa), dar sînt, încă, mai mult suportate de browsere.

Atributul FRAMEBORDER specifică dacă un frame are (valoarea 1) sau nu (valoarea 0) margine vizibilă. Valoarea implicită este 1. Acest atribut poate fi suprapus de cel al frame-urilor adiacente. Un frame care nu are margine nu poate fi nici redimensionat.

Atributele MARGINWIDTH şi MARGINHEIGHT definesc numărul de pixeli folosiţi ca margini stînga/dreapta şi, respectiv, sus/jos. Valorile trenuie să fie mai mari ca 1 pixel, iar atributul boolean NORESIZE împiedică utilizatorul să redimensioneze frame-ul.

Atributul SCROLLING specifică dacă se vor oferi scroll-bar-uri pentru frame-uri. Valoarea implicită (auto) le generează atunci cînd este cazul. Valoarea yes le afisează tot timpul, iar valoarea no le suprimă, chiar cînd sînt necesare.

Exemplu:

Fie următorul document cu frame-uri:

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

"http://www.w3.org/TR/REC-html40/frameset.dtd">

<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">

<FRAME src="contents_of_frame4.html" frameborder="0">

</FRAMESET>

</HTML>

Acest exemplu crează 4 frame-uri cu layout-ul (poziţionarea) ca în figura următoare:

+------------------------------------------+

|Frame 1 |Frame 3 |Frame 4 |

| | | |

| | | |

+------------| | |

|Frame 2 | | |

| | | |

+ -----------------------------------------+

şi ilustrează utilizarea atributelor lui FRAME. Frame-ul 1 nu are bare de scroll; frame-ul 2 lasă spaţiu în jurul conţinutului său (care este iniţial o imagine) şi nu este redimensionabil; între frame-urile 3 şi 4 nu este desenată marginea, care va fi, totşi desenată (implicit, nefiind specificat altfel) între frame-urile 1, 2 şi 3.

5. Specificarea conţinutului iniţial al unui frame (atributul SRC)

Conţinutul iniţial al unui frame (resursa care se încarcă în acel frame: document HTML, imagine, animaţie, etc) se specifică cu atributul SRC al elementului FRAME.

Pentru exemplul anterior, reluat aici:

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

"http://www.w3.org/TR/REC-html40/frameset.dtd">

<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">

<FRAME src="contents_of_frame4.html" frameborder="0">

</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):

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

"http://www.w3.org/TR/REC-html40/frameset.dtd">

<HTML>

<HEAD>

<TITLE>A frameset document</TITLE>

</HEAD>

<FRAMESET cols="50%,50%">

<FRAME src="contents_of_frame1.html">

<FRAME src="#anchor_in_acelasi_document">

<NOFRAMES>

...text...

<H2><A name="anchor_in_acelasi_document">Important section</A></H2>

...alt text...

</NOFRAMES>

</FRAMESET>

</HTML>

6. Specificarea numelui unui frame (atributul NAME) şi utilizarea lui într-un link (TARGET)

Prin asignarea unui nume uneu frame cu ajutorul atributului NAME, autorii pot referi acel frame ca „ţintă“ (destinaţie) pentru legăturile definite de alte elemente. Aceasta se realizează cu atributul TARGET al acestora şi poate fi utlizat pentru crearea link-urilor uzuale (A, LINK), imaginilor senzitive (AREA) şi a formelor (FORM).

Se prezintă în continuare un exemplu care sugerează o modalitate de a modifica dinamic conţinutul unui frame. Definim întîi setul de frame-uri în documentul frameset.html:

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

"http://www.w3.org/TR/REC-html40/frameset.dtd">

<HTML>

<HEAD>

<TITLE>A frameset document</TITLE>

</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:

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

"http://www.w3.org/TR/REC-html40/loose.dtd">

<HTML>

<HEAD>

<TITLE>Document cu legături ţintă într-un frame cu nume</TITLE>

</HEAD>

<BODY>

...partea de început...

<P>Aici se poate avansa la

<A href="slide2.html" target="dynamic">Slide-ul 2.</A>

...altele...

<P>Iar aici se poate avansa la

<A href="slide3.html" target="dynamic">Slide-ul 3.</A>

</BODY>

</HTML>

Activarea oricărei legături va deschide un nou document, dar de fiecare dată în frame-ul numit "dynamic", în timp ce conţinutul celuilalt frame "fixed" rămîne neschimbat.

De reţinut:

1. O definiţie a setului de frame-ului NU POATE FI MODIFICATĂ niciodată, doar conţinutul acestora putînd fi modificat dinamic. Din momentul în care apare prima modificare dinamică, definiţia iniţială a frame-urilor (frameset-ului) nu mai reflectă starea curentă a acestora.

2. Nu se poate codifica (şi reţine) starea globală a unui set de frame-uri şi, de aceea, multe browsere nu permit asignarea unui bookmark („semn de carte“) unui astfel de frameset.

3. Dacă se utilizează frame-uri, navigarea înainte şi înapoi se complică, autorii fiind responsabili de modalitatea de a parcurge astfel de documente, prin intermediul legăturilor din interiorul acestora.

Cînd mai multe legături din acelaşi document indică aceeaşi ţintă (acelaşi frame) este posibil să se specifice aceasta o singură dată, renunţîndu-se la atributul TARGET setat la fiecare element în parte. Aceasta se poate realiza prin setarea atributului TARGET al elementului BASE.

Pentru exemplul anterior se poate defini un element BASE. căruia i se poate specifica o valoare pentru atributul TARGET (frame-ul "dynamic"), renunţînd la specificarea lui în elementele A care încarcă documentele în acesată ţintă:

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

"http://www.w3.org/TR/REC-html40/loose.dtd">

<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:

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

"http://www.w3.org/TR/REC-html40">

<HTML>

<HEAD>

<TITLE>Un document ce defineşte GREŞIT un frameset</TITLE>

</HEAD>

<FRAMESET cols="20%, 80%">

<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ă:

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

"http://www.w3.org/TR/REC-html40">

<HTML>

<HEAD>

<TITLE>Un document ce defineşte CORECT un frameset</TITLE>

</HEAD>

<FRAMESET cols="20%, 80%">

<FRAME src="table_of_contents.html">

<FRAME src="ostrich-container.html">

</FRAMESET>

</HTML>

<!-- In ostrich-container.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:

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

"http://www.w3.org/TR/REC-html40">

<HTML>

<HEAD>

<TITLE>Un document ce defineşte un frameset dar are şi NOFRAMES</TITLE>

</HEAD>

<FRAMESET cols="50%, 50%">

<FRAME src="main.html">

<FRAME src="table_of_contents.html">

<NOFRAMES>

<P>Aici este

<A href="main-noframes.html"> versiunea documentului fără frame-uri.</A>

</NOFRAMES>

</FRAMESET>

</HTML>

Elementul NOFRAMES

Sintaxa:

<NOFRAMES>... </ NOFRAMES >

Atribute posibile:

· atribute comune

Conţine:

· În HTML 4.0 Transitional: elemente inline, elemente tip block level

· În HTML 4.0 Frameset: un element BODY care trebuie să nu conţină nici un NOFRAMES

Conţinut în:

· APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, FRAMESET, IFRAME, INS, LI, MAP, NOSCRIPT, OBJECT, TD, TH

Descriere:

Acest element descrie conţinutul unui document ce trebuie afişat cînd frame-urile nu sînt afişate. NOFRAMES este folosit în mod tipic într-un document cu frame-uri (ce defineşte un frameset) pentru a oferi informaţia care trebuie afişată de browser-ele care nu suportă frame-uri.

Cînd este folosit într-un FRAMESET, NOFRAMES trebuie să conţină un element BODY. În acest caz nu mai trebuie să apară însă nici un element NOFRAMES în elementul BODY.

Este recomandabil să se ofere un element NOFRAMES care are semnificaţie, şi care, la limită, să conţină cel puţin un link spre o variantă de document fără frame-uri.

9. Frame-uri inline (elementul IFRAME)

Este posibil să se includă un frame într-un bloc de text. Elementul ce permite această operaţie este IFRAME. Inserarea unui astfel de frame este foarte asemănătoare cu inserarea unui obiect prin intermediul elementului OBJECT, permiţînd în ultimă imstanţă inserarea unui document HTML în mijlocul altuia.

Informaţia care se inserează este specificată prin atributul SRC, iar conţinutul unui element IFRAME va fi afişat doar dacă browser-ul nu suportă frame-uri.

De exemplu, pentru browserele care suportă frame-uri, exemplul următor va insera un frame, înconjurat de margine, în mijlocul unui text:

<IFRAME src="foo.html" width="400" height="500"

scrolling="auto" frameborder="1">

[Browserul dvs. nu suportă frame-uri.

Puteţi însă vedea totuşi

<A href="foo.html">documentul </A>

ce ar fi trebuit să vă apară într-un frame inline.]

</IFRAME>

Spre deosebire de frame-urile obişnuite, frame-urile inline nu pot fi redimensionate şi de aceea nu au atributul NORESIZE.

De remarcat că un document HTML poate fi inserat (înglobat) în altul prin intermediul lui OBJECT.

Elementul IFRAME

Sintaxa:

<IFRAME>... </ IFRAME >

Atribute posibile:

· SRC=URI (adresa URI a conţinutului frame-ului)

· NAME=CDATA (numele frame-ului)

· LONGDESC=URI (link către descrierea lungă)

· WIDTH=Length (lăţimea frame-ului)

· HEIGHT=Length (lăţimea frame-ului)

· ALIGN=[ top | middle | bottom | left | right ] (alinierea frame-ului)

· FRAMEBORDER=[ 1 | 0 ] (marginea frame-ului)

· MARGINWIDTH=Pixels (lăţimea marginii)

· MARGINHEIGHT=Pixels (înălţimea marginii)

· SCROLLING=[ yes | no | auto ] (posibilitatea de scroll)

· atribute core

Conţine:

· inline elements, block-level elements

Conţinut în:

· inline elements, block-level elements

Descriere:

Acest element defineşte un frame inline pentru a include obiecte externe (incluzănd alte documente HTML). IFRAME oferă un subset de funcţii ale lui OBJECT, singurul avantaj fiin acela că poate fi specificată ca TARGET de către alte legături. OBJECT este mai bine suportat decît IFRAME.

Atributul SRC oferă adresa de unde se va încărca conţinutul frame-ului – în mod tipic un document HTML. Atributul opţional NAME specifică numele frame-ului permiţînd astfel legături care să specifice acest frame ca ţintă în care să se încarce.

Conţinutul elementului IFRAME (ce este între tagul de început şi cel de sfîrşit) este alternativă pentru browser-ele care nu suportă frame-uri. Pot apare aici elemente inline sau bloc: orice element de tip bloc este permis în interiorul elementului ce-l conţine pe IFRAME. De exemplu un IFRAME într-un H1 nu poate conţine un H2, dar un IFRAME într-un DIV poate conţine orice element de tip bloc.

LONGDESC dă adresa unei resurse care descrie pe larg conţinutul frame-ului. Similar cu atributul elementului FRAME.

Atributele WIDTH şi HEIGHT specifică dimensiunile frame-ului în pixeli sau procente din spaţiul disponibil, iar FRAMEBORDER stabileşte dacă se deseneză sau nu marginea. ALIGN specifică modul de aliniere faţă de conţinutul adiacent a frame-ului inclus. ALIGN=middle aliniază frame-ul faţă de linia de bază (baseline), iar pentru a centra în document (pagină) frame-ul se recomandă includerea într-un bloc centrat: <P ALIGN=center><IFRAME SRC="foo.html" WIDTH=300 HEIGHT=100></IFRAME></P>. Celelalte valori (left şi right) indică un frame flotant, care poate fi plasat la marginea din stînga sau dreapta, iar conţinutul să curgă pe lîngă. MARGINWIDTH şi MARGINHEIGHT definesc un număr de pixeli ce se folosesc ca margine stînga/dreapta, respectiv sus/jos, iar SCROLLING dacă sînt permise barele scroll.

O mai mare flexibilitate în prezentarea frame-urilor este dată de style-sheet-uri.

Exemplu:

Acest exemplu include documentul reteta.html şi oferă şi un conţinut alternativ:

<IFRAME SRC="reteta.html" TITLE="Reteta lui Petrisor">
<!-- Conţinut alternativ pentru browser-ele care nu suportă IFRAME -->

<H2>Reţeta lui Petrişor</H2>
<H3>Ingrediente</H3>
...

</IFRAME>

Capitolul 7.

Utilizarea formulalelor interactive (forms)

În marea majoritate a documentelor (mai ales cele mai vechi), singura interactivitate dintre aplicaţie (browser) şi cel ce o foloseşte (utilizatorul) constă în faptul că acesta decide ce legătură hypertext din respectivul document să urmărească.

Specificaţiile HTML includ însă şi o altă metodă (de asemenea simplă, primitivă) de creştere a gradului de interactivitate a unui document HTML: formularele (forms) care permit integrarea în document a unor elemente preluate din interfaţa aplicaţiilor de tip Windows sau X Windows – cîmpurile text statice şi editabile, butoanele radio, căsuţele de selecţie, listele de selecţie şi cîmpurile de editare. Interactivitatea se bazează pe faptul că acestea pot fi utilizate pentru introducerea unor date / strîngerea de informaţie necesară unei alte aplicaţii aflată în "spatele" documentului, aplicaţie care va utiliza aceste date (introduse de utilizatorul browser-ului şi a documentului HTML) şi care hotărăşte ce anume şi cum anume va fi oferit clientului, ca rezultat al acestor informaţii noi, introduse cu ajutorul formularului. Modul de introducere a datelor în formulare este similară cu modul de a introduce date într-o aplicaţie Windows.

Ca exemple tipice de acţiuni realizate cu ajutorul (prin intermediul formularelor) pot fi date:

· o selecţie dintr-o bază de date (starea vremii dintr-o anumită regiune, de pildă)

· un rezultat al unui sondaj (la care a participat cel ce a introdus datele tocmai a participat)

· vizualizarea la un document cu acces restrîns

· sau orice altceva care îndeplineşte criteriile de selecţie prezentate în formular

În procesul de proiectare a unui document care utilizează un formular HTML există trei etape:

1. designul şi implementarea (în HTML) a formularului de intrare, care va fi vizualizat, explorat şi completat de utilizator

2. scrierea unei aplicaţii care să interpreteze datele cu care utilizatorul completează formularul (aplicaţie care primeşte datele şi care este executată de un alt calculator decît cel al utilizatorului, cel care rulează browser-ul – un server, de obicei cel care gazduieşte serverul HTTP şi care a oferit pagina cu formularul respectiv)

3. designul şi implementarea documentului generat de aplicaţia de la punctul 2, ca răspuns la cererea utilizatorului. De regulă acest document este scris în HTML, dar această restricţie nu este obligatorie.

Un formular HTML este o secţiune de document care conţine text, elemente HTML uzuale, dar şi elemente speciale numite controale (similare celor din interfaţa aplicaţiilor Windows – căsuţe de selecţie, butoane radio, etc), precum şi etichete ale acestor controale. Utilizatorii vor „completa“ formularul prin modificarea controalelor (sau conţinutului acestora prin introducerea unui text, selectarea unui element dintr-o listă, etc) înainte ca acesta să fie trimis unui agent (program) pentru a fi prelucrat (de exemplu unui server Web, unui server de mail, etc).

Fiecare control are un nume dat de atributul NAME al acelui control, nume ce este definit (utilizabil, domeniul de definiţie) în cadrul elementului FORM în care acesta apare. În plus, fiecare control are o valoare iniţială şi o valoare curentă, fiecare fiind şiruri de caractere (valorile posibile şi restricţiile ce se aplică asupra acestora diferă de la un control la altul).

În general, valoarea iniţială poate fi specificată prin intermediul valorii atributului VALUE, dar la un element de tip TEXTAREA valoarea iniţială este dată de conţinutul acestuia, pe cînd valoarea iniţială a unui element OBJECT este determinată de implementarea acestuia.

Valoarea curentă a unui control este iniţial setată la valoarea iniţială, apoi ea poate fi modificată de utilizator prin intermediul acţiunilor ce sînt permise asupra controlului sau de scripturi.

Valoarea iniţială a unui control nu se modifică şi de aceea atunci cînd un formular este resetat valorile curente ale fiecărui control sînt readuse la valorile iniţiale. Dacă un control nu are specificată valoarea iniţială, efectul acestei operaţii este nedefinit (poate fi imprevizibil).

Cînd un formular este transmis pentru a fi prelucrat, unele controale au numele legat de valoarea curentă, astfel că se va transmite agentului (programului) care-l prelucrează un set de dublete alcătuite din numele coontrolului şi valoarea sa curentă. Astfel de controale sînt numite controale de succes (successful controls).

Limbajul HTML 4.0 defineşte următoarele tipuri de controale:

butoane

Autorii paginilor HTML pot crea 3 tipuri de butoane:

· butoane submit: Cînd este activat (apăsat), un astfel de buton trimite un formular unui agent (program) de prelucrare. Un formular poate conţine mai mult de un buton submit.

· butoane reset: Cînd este activat (apăsat), un astfel de buton resetează toate controalele la valorile lor inţiale.

· butoane push: Aceste butoane nu au o acţiune implicită atunci cind sînt activate (apăsate). Fiecare astfel de buton poate avea asociat un script de tip client-side şi generează evenimente care determină execuţia unor astfel de scripturi (de exemplu cînd se apasă un astfel de buton se poate apela un script specific).

Autorii crează butoane cu unul din elementele BUTON sau INPUT, prima variantă fiin mai bogată în opţiuni.

checkbox (căsuţe de marcare)

Checkbox-urile (căsuţele de marcare), ca şi butoanele radio, sînt elemente cu 2 stări on/off (selectat/deselectat) care pot fi trecute dintr-o stare în alte de către utilizitator. Un astfel de element (switch) este "on" (selectat) cînd atributul selected al lui este setat. Cînd un formular este trimis unui agent de prelucrare numai controalele checkbox ce au valoarea "on" devin controale de succes. Într-un formular mai multe checkbox-uri pot avea acelaşi nume.

Pentru crearea unui checkbox se foloseşte elementul INPUT.

butoane radio

Butoanele radio sînt exact ca checkbox-urile, cu excepţia faptului că atunci cînd apar mai multe într-un formular sînt mutual exclusive: cînd un astfel de buton este "on" (selectat), toate celelalte care au acelaţi nume sînt trecute automat pe "off".

Pentru crearea unui buton radio se foloseşte elementul INPUT.

meniuri

Menurile oferă utilizatorilor posibilitatea de a alege dintre mai multe opţiuni.

Pentru crearea unui control de tip meniu se foloseşte elementul SELECT în combinaţie cu elementele OPTGROUP şi OPTION.

text input

Autorii pot crea două tipuri de controale pentru a permite utilizatorilor introducerea unui text. Elementul INPUT crează un control care are doar o singură linie disponibilă pentru introducerea textului, iar elementul TEXTAREA crează un control cu mai multe linii în care se poate introduce text. În ambele cazuri textul ce se introduce devine valoarea curentă a controlului.

file select (selecţie de fişiere)

Acest control permite utilizatorilor să selecteze fişiere astfel încît conţinutul acestora să fie transmis odată cu formularul.

Pentru crearea unui control tip file select se foloseşte elementul INPUT.

controale ascunse (hidden controls)

Se pot crea controale care să nu fie afişate de către browsere, dar a căror valori să fie transmise odată cu formularul. Acest tip de control este util pentru a păstra informaţie între schimburile client/server ce altfel s-ar pierde, datorită naturii „fără stare“ (stateless) a protocolului HTTP.

Pentru crearea unui control ascuns se foloseşte elementul INPUT.

controale tip obiect (object controls)

Autorii pot insera obiecte generice astfel ca valorile asociate acestora să fie transmise împreună cu celelalte controale.

Pentru crearea unui control ascuns se foloseşte elementul OBJECT.

Elementele utilizate pentru crearea controalelor apar, în general, într-un element FORM, dar pot apare şi în afara declaraţiei acestui element cînd sînt utilizate pentru a crea interfeţe, caz în care nu pot fi controale de succes.

1. Descrierea unui formular (elementul FORM)

Elementul care descrie un formular este FORM. El se comportă ca un container pentru controale şi specifică:

· Layout-ul (înfăţisarea) formularului (prin conţinutul elementului).

· Programul ce va prelua formularul completat şi transmis (atributul ACTION). Programul care-l recepţionează trebuie să fie capabil să preia corect şi să decodifice perechile nume/valoare transmise pentru a le putea folosi.

· Metoda prin care datele introduse de utilizator vor fi trimise serverului (atributul METHOD).

· O codificare a caracterelor acceptabilă pentru server, astfel ca acesta să poată prelua formularul (atributul ACCEPT-CHARSET). Browserele utilizatorilor trebuie să-i avertizeze asupra valorilor setului de caractere acceptat şi/sau să restricţioneze posibilitatea acestora de a introduce caractere necunoscute.

Un formular poate conţine în afara controalelor şi text şi elemente HTML (paragrafe, liste, etc.)

Exemplul următor arată un formular care va fi procesat de un program numit "adduser", în momentul în care va fi transmis de browser. Metoda utilizată pentru transmitere va fi "post":

<FORM action="http://somesite.com/prog/adduser" method="post">

...conţinutul formularului...

</FORM>

Iar exemplul următor arată cum se trimite un formular la o adresă de email:

<FORM action="mailto:L.P@alpha.comp-craiova.ro" method="post">

...conţinutul formularului...

</FORM>

Elementul FORM

Sintaxa:

<FORM>... </FORM>

Atribute posibile:

· ACTION=URI (handler-ul formularului / programul care îl va prelucra)

· METHOD=[ get | post ] (metoda HTTP folosită la trimiterea formularului)

· ENCTYPE=ContentType (tipul conţinutului / content type utilizat pentru trimitere)

· ACCEPT-CHARSET=Charsets (codificarea suportată a setului caractere)

· TARGET=FrameTarget (frame-ul în care se afişează rezultatele)

· ONSUBMIT=Script (scriptul care se execută după trimiterea formularului)

· ONRESET=Script (scriptul care se execută după resetarea formularului)

· atribute comune

Conţine:

· În HTML 4.0 Strict, unul sau mai multe elemente SCRIPT sau elemente de tip bloc (block-level elements) cu excepţia lui FORM

· In HTML 4.0 Transitional, elemente de tip inline sau elemente tip block-level, exceptînd FORM

Conţinut în:

· 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, SELECT, TEXTAREA şi BUTON) prin intermediul cărora utilizatorul interacţionează cu acesta, precum şi butoanele „speciale“ SUBMIT şi, opţional, RESET care acţionează asupra formularului ca entitate.

Cele mai importante atribute ale tag-ului sînt ACTION (acţiune) şi METHOD (metodă), astfel încît tag-ul de început apare de forma:

<FORM ACTION="acţiune" METHOD="metodă">

Valorile lui ACTION specifică natura acţiunii, care va avea loc printr-un program care va fi executat de serverul care este gazdă pentru document. Acest program va trebui să preia datele din formular şi să le prelucreze. Astfel:

· ACTION="URL" specifică URL-ul programului care va fi executat, de obicei un program CGI sau un servlet Java.

· ACTION="mailto: adresă@domeniu" specifică un program de expediere a conţinutului formularului. Această acţiune nu este însă suportată de toate browserele (de exemplu Microsoft Internet Explorer 3.x) care, în acest caz, în mod tipic, vor deschide o fereastră de compoziţie a unui mesaj email. În afara acestor neajunsuri, lipsa unui feed-back imediat face această metodă de acţiune nu foarte recomandată pentru a fi utilizată.

Atributele METHOD şi ENCTYPE specifică metoda utilizată pentru a trimite datele formularului serverului care gazduieşte programul specificat în ACTION.

Cînd metoda este get (implicită), datele formularului sînt transmise ca o cerere HTTP GET cu ?form_data adăugat la adresa URI specificată de atributul ACTION. Utilizarea metodei get permite ca transmiterea (datelor) formularului să fie conţinută complet în URL. Avantajul este ca se pot crea bookmark-uri („semne de carte“) pe astfel de adrese, dar are şi dezavantajul că nu poate conţine caractere non-ASCII ca "é" and "©". Cea mai importantă limitare este dată de cantitatea de date care se pot transmite şi care depinde de lungimea maximă a adresei URL permisă de browser şi server. De aceea, pentru siguranţă, orice formular care conţine caractere non-ASCII sau mai mult de 100 caractere trebuie să utilizeze METHOD=post.

Cînd metoda este post, datele formularului sînt transmise ca o cerere HTTP POST cu datele formularului în corpul cererii. Majoritatea browserelor sînt incapabile să creeze un bookmark pe o astfel de cerere, dar posibilitatea transmiteri de caractere non-ASCII şi posibilitatea de transmite date oricît de mari sînt avantajele faţă de GET.

Atributul ENCTYPE specifică tipul conţinutului (content type) folosit în transmiterea formularului şi are ca valoare implicită application/x-www-form-urlencoded. Acesta are ca rezultat perechi nume/valoare trimise serverului sub forma name1=value1&name2=value2..., cu caracterul spaţiu înlocuit de "+" şi cu caracterele speciale (ca, de exemplu, "#") înlocuite de "%HH", unde HH este codul hexa al caracterului respectiv. Sfîrşitul de linie (line break) este codificat ca "%0D%0A" – un carriage return urmat de un line feed.

Dacă formularul conţine un element INPUT cu atributul TYPE=file, atunci este preferabil să se folosească un ENCTYPE de tipul multipart/form-data iar METHOD să fie post.

Pentru preluarea datelor din formularele transmise la server autorii nu trebuie să cunoască exact formatul în care sînt codificate datele, întrucît există biblioteci publice, free (ca de exemplu CGI.pm) care oferă rutine ce preiau transparent ceea ce se trimite cu get sau post (ca application/x-www-form-urlencoded sau multipart/form-data). Se poate şi simula o astfel de transmitere cu unelte ca cg-eye care permit vizualizarea imediat, „în oglindă“ a datelor ce s-ar trimite.

Atributul ACCEPT-CHARSET specifică lista de codificări acceptate de handlerul formularului (programul care-l primeşte şi prelucrează). Valoarea acestui atribut este o listă de seturi de caractere ("charsets") separate cu virgulă sau blanc. Valoarea implicită este UNKNOWN şi este considerată, de obicei, codificarea folosită pentru transmiterea documentului ce conţine formularul.

Atributul TARGET este folosit în cazul frame-urilor pentru a specifica în care frame se afişează răspunsul. Dacă nu e specificat nici un frame (sau numele nu există), valoarea implicită este o fereastră nouă. Se pot folosi şi numele speciale de frame-uri:

· _blank – ferastră nouă, fără nume

· _self – răspunsul se afişează în frame-ul curent (util pentru suprascrierea atributului

BASE al elementului TARGET)

· _parent – răspunsul se afişează în părintele imediat din FRAMESET

· _top – răspunsul se afişează în fereastra întreagă, fără frame-uri

FORM mai are şi atribute pentru a specifica acţiuni de tip „client-side scripting“ în cazul anumitor evenimente (ONSUBMIT şi ONRESET).

2. Crearea controalelor de bază ale unui formular (INPUT, BUTTON, TEXTAREA)

Elementul INPUT este cel mai frecvent întîlnit deoarece crează mai multe tipuri de controale care permit utilizatorului să aleagă. Controalele includ trei tipuri de butoane care pot fi apăsate, două tipuri de butoane pe care utilizatorul le poate seta închis/deschis, un element de selecţie fişiere şi cîmpuri în care poate fi tastat text. Tag-ul INPUT este nevid.

Controalele de bază pe care le poate utiliza un autor în cadrul formularelor interactive sînt create cu elementul INPUT, individualizarea lor făcîndu-se prin intermediul atributului său TYPE. Pe acestea (ca de fapt pe toate controalele unui formular) utilizatorul le expediază prin intermediul unui buton creat cu INPUT de tipul SEND sau le reintroduce după acţionarea unui buton de tipul RESET. Nu există o limită asupra numărului de elemente conţinute într-un formular.

Valorile atributului TYPE care crează diversele tipuri de controale (pentru elementul INPUT) sînt:

text

Crează un control de introducere a unui text pe o singură linie: text input control.

password

La fel ca şi "text", dar textul introdus este afişat astfel ca să nu fie descifrabil / să fie „ascuns“ (de exemplu cîte un asterix pentru fiecare caracter introdus), de aceea se şi numeşte parolă. Valoarea curentă a acestui control este textul introdus de utilizator, nu cel afişat de formular! De remarcat că protecţia oferită în acest fel este minimă, textul transmiţîndu-se, dacă nu se folosesc tehnici adecvate, în clar!

checkbox

Crează o căsuţă de marcare: checkbox.

radio

Crează un buton radio: radio button.

file

Crează un control utilizat la selecţia fişierelor: file select control. Se foloseşte valoarea atributului VALUE ca nume iniţial de fişier.

button

Crează un buton care poate fi apăsat. Este utilizat prin intermediul valorii atributului VALUE care de fapt şi este textul ce apare pe acesta.

submit

Crează un buton care trimite datele din formular: submit button.

reset

Crează un buton care reiniţializează datele din formular: reset button.

image

Crează un buton de submit dar care are o înfăţişare grafică. Valoare atributului SRC specifică adresa URI a imaginii care e folosită la „decorarea“ butonului. Se recomandă folosirea şi a unui text alternativ (cu atributul ALT) pentru cazul cînd imaginea nu e vizibilă.

Cînd imaginea este apăsată (cu mouse-ul, de exemplu) formularul este transmis serverului împreună cu coordonatele punctului apăsat exprimate în pixeli faţă de colţul stînga-sus. Datele transmise includ name.x=x-value şi name.y=y-value, unde "name" este valoarea atributului NAME, iar x-value şi y-value sînt valorile coordonatelor.

Dacă serverul are implementate diferite acţiuni în funcţie de punctul apăsat, utilizatorii cu browsere non-grafice vor fi dezavantajaţi şi de aceea se pot lua în considerare următoarele alternative:

· Utilizarea butoanelor SUBMIT multiple (fiecare cu imaginea lui). Poziţia acestora poate fi controlată cu style-sheet-uri.

· Utilizarea unei hărţi senzitive de tip client-side image map, care rulează pe client, împreună cu un script.

hidden

Crează un control ascuns: hidden control.

Exemplu:

Acest exemplu defineşte un formular simplu care permite utilizatorului introducerea numelui, prenumelui, adresei de email şi sexului. Cînd se activează (apasă) butonul de trimitere (submit) formularul va fi trimis programului specificat de atributul ACTION (aici adduser):

<FORM action="http://somesite.com/prog/adduser" method="post">

First name: <INPUT type="text" name="firstname"><BR>

Last name: <INPUT type="text" name="lastname"><BR>

email: <INPUT type="text" name="email"><BR>

<INPUT type="radio" name="sex" value="Male"> Male<BR>

<INPUT type="radio" name="sex" value="Female"> Female<BR>

<INPUT type="submit" value="Send">

<INPUT type="reset">

</FORM>

Astfel, acest formular poate apărea astfel:

Exemplu:

Acest exemplu foloseşte o funcţie (verify) scrisă în JavaScript care este activată cînd apare evenimentul "onclick" pentru butonul care are pe el textul „Click Me“:

<HEAD>

<META http-equiv="Content-Script-Type" content="text/javascript">

</HEAD>

<BODY>

<FORM action="..." method="post">

<INPUT type="button" value="Click Me" onclick="verify()">

</FORM>

</BODY>

Exemplu:

Acest exemplu sugerează cum poate fi transmis conţinutul unui fişier indicat de utilizator prin intermediul unui formular. Utilizatorul este întrebat de numele său şi de lista fişierelor al căror conţinut se doreşte a fi transmis. Prin specificarea valorii atributului ENCTYPE ca "multipart/form-data", fiecare conţinut va fi „împachetat“ pentru a fi transmis într-o secţiune separată a unui document de tip „multipart“.

<FORM action="http://server.dom/cgi/handle"

enctype="multipart/form-data" method="post">

What is your name? <INPUT type="text" name="name_of_sender">

What files are you sending? <INPUT type="file" name="name_of_files">

</FORM>

Elementul INPUT

Sintaxa:

<INPUT>

Atribute posibile:

· TYPE=[ text | password | checkbox | radio | submit | reset | file | hidden | image | button ]

· NAME=CDATA (numele care se va asocia elementului)

· VALUE=CDATA (valoarea introdusă)

· CHECKED (buton radio sau checkbox setat/apăsat)

· SIZE=CDATA (număr sugerat de caractere pentru introducerea unui text)

· MAXLENGTH=Number (număr maxim de caractere pentru introducerea unui text)

· SRC=URI (sursa imaginii)

· ALT=CDATA (text alternativ pentru o imagine)

· USEMAP=URI (hartă senzitivă de tip client-side image map)

· ALIGN=[ top | middle | bottom | left | right ] (alinierea imaginii)

· DISABLED (element inactiv/dezactivat)

· READONLY (previne modificări asupra elementului)

· ACCEPT=ContentTypes (tipul de media folosit la transmiterea fişierelor)

· ACCESSKEY=Character (shortcut key)

· TABINDEX=Number (poziţia în ordinea de parcurgere cu TAB)

· ONFOCUS=Script (elementul a primit focusul)

· ONBLUR=Script (elementul a pierdut focusul)

· ONSELECT=Script (elementul de tip text a fost selectat)

· ONCHANGE=Script (valoarea elementului a fost modificată)

· atribute comune

Conţine:

· Nimic

Conţinut în:

· block-level elements, inline elements, cu excepţia lui BUTTON

Descriere:

Acest element defineşte un control al unui formular (form control) pentru a permite unui utilizator să introducă date. El este utilizat de obicei în cadrul lui FORM, dar HTML 4.0 permite şi folosirea lui în orice element block-level sau inline (cu excepţia lui BUTTON). De remarcat, totuşi că Netscape Navigator NU va afişa nici un element INPUT în afara unui FORM.

Cînd formularul este transmis valoarea curentă a fiecărui element INPUT din FORM este trimisă sub forma unei perechi name/value. Atributul NAME oferă numele ce va fi folosit pentru identificarea controlului respectiv. Tipul valorii depinde de tipul elementului INPUT.

Un formular care include un element INPUT trebuie să specifice în tagul elementului FORM METHOD=post şi ENCTYPE="multipart/form-data". Nu toate browserele permit trimiterea, odată cu formularul şi a conţinutului unui fişier. În acest caz trebuie utilizate alte metode:

Exemplu:

În exemplul următor se trimite un document HTML pemtru a fi validat. Numele lui se cere de la utilizator prin intermediul unui formular:

<FORM METHOD=post ACTION="/cgi-bin/validate.cgi" ENCTYPE="multipart/form-data">

<P>

Selectaţi un document HTML pentru a fi trimis spre validare. Dacă browser-ul Dvs. nu suportă această metodă folosiţi <A HREF="methods.html">metodele alternative de validare</A>.</P>

<P><INPUT TYPE=file NAME="html_file" ACCEPT="text/html"></P>

<P><INPUT TYPE=submit VALUE="Validate it!"></P>

</FORM>

Elementul INPUT poate avea mai mulţi parametri, cel mai important fiind TYPE, fiecare element TYPE avînd proprii lui parametri pentru definirea în continuare a elementului. Parametrul TYPE specifică ce fel de INPUT se aşteaptă de la utilizator şi poate primi următoarele valori:

Valoare	Descriere
Text	Permite utilizatorului să introducă un singur rînd de text
Password	La fel ca şi Text, dar caracterele tastate de utilizator au ca ecou asteriscul „*“ sau un alt semn echivalent menit să "ascundă" textul introdus
Check box	Implementează un buton care poate fi setat activ/inactiv (închis/deschis)
Radio button	Permite implementarea unui grup de butoane în care, la un moment dat, numai unul poate fi activ (setat/deschis)
Button	Determină apariţia unui buton care poate fi apăsat
Reset	Determină apariţia unui buton care, cînd este selectat, resetează toate celelalte elemente ale formularului la valorile lor implicite
Submit	Afişează un buton care, dacă este apăsat, transmite formularul URL-ului specificat în ACTION
Image	Afişează un buton Submit grafic (cu o imagine)
File	Permite selecţia unui fişier
Hidden	Invizibil în browser

Exemplu:

<INPUT TYPE="CHECKBOX" NAME="TEST">

Dacă nu este specificat TYPE în elementul INPUT, valoarea implicită atribuită este TYPE=TEXT.

Atributul NAME este un parametru cerut de toate elementele INPUT, cu excepţia elementelor SUBMIT şi RESET. Parametrul NAME crează un nume generic care va fi asociat cu răspunsul utilizatorului şi permite serverului să interpreteze formularul pentru a determina corelaţia dintre fiecare răspuns al utilizatorului şi elementele formularului. NAME poate avea orice valoare.

Exemplu:

NAME="cîini" – într-o selecţie de rase de cîini

NAME="profesii" – într-o selecţie de profesii

NAME="adresă" – pentru un cîmp text

Elementul tip text (TYPE=TEXT)

Sintaxa:

<INPUT TYPE="text" NAME="nume" VALUE="valoare" SIZE=xx MAXLENGTH=yy>

Cîmpul text este utilizat frecvent ca formă de intrare a datelor pentru culegerea unor informaţii cum ar fi nume, adrese e-mail, numere de telefon, comentarii scurte sau orice altceva care poate fi tastat pe un rînd. Ca majoritatea elementelor INPUT, un rînd text trebuie să aibă un nume (NAME). La trimiterea datelor din formular la server, numelui îi va fi asociată valoarea tastată. De pildă, pentru culegerea unor adrese email, dacă am ales ca nume al rîndului NAME=adresă, la server va fi trimisă secvenţa adresă=ce s-a tastat.

Parametrul VALUE este egal cu textul implicit pe care îl dorim introdus în rîndul text. Dacă VALUE lipseşte, rîndul va fi iniţial blanc.

Parametrul SIZE (dimensiune) permite setarea lungimii rîndului în număr de caractere. Dacă numărul de caractere este mai mare (pînă la valoarea maximă admisă prin MAXLENGTH), rîndul se va derula (scroll orizontal). Numărul maxim specificat de MAXLENGTH nu reprezintă o cale sigură de a limita numărul de caractere introduse de utilizator care, de exemplu, poate edita pagina ce conţine formularul şi trimite un număr oricît de mare de caractere pentru text. Această limitare trebuie luată în considerare şi de programul care primeşte formularul. Dacă parametrul SIZE lipseşte, se consideră că are valoarea implicită de 20 de caractere.

Majoritatea navigatoarelor suportă cîmpuri text formate din mai multe rînduri, definite prin SIZE=X,Y unde X=număr de caractere pe rînd si Y=număr de rînduri. Deoarece HTML suportă şi comanda TEXTAREA (zonă text), elementul tip text se foloseşte aproape exclusiv la definirea unui singur rînd.

Atributul READONLY, nou în HTML 4.0, este destul de puţin suportat de browsere. El previne editarea conţinutului unui control de tip text sau parolă, dar totuţi sînt trimise cu formularul.

Exemplu:

<FORM>

Tastaţi numele Dvs.:

<INPUT TYPE="text" NAME="nume" SIZE=40 MAXLENGTH=60></input>

Si adresa e-mail:

<INPUT TYPE="text" NAME="adresa" SIZE=30 MAXLENGTH=40></input>

</FORM>

Tot un control utilizat la introducerea textelor pe o linie se poate crea şi cu elementul ISINDEX. Cu ajutorul lui se poate introduce un text avînd oricîte caractere. Acesta este însă un element depăşit, chiar şi pentru crearea unui prompter simplu.

Exemplu:

Se poate înlocui declaraţia lui ISINDEX:

<ISINDEX prompt="Enter your search phrase: ">

cu:

<FORM action="..." method="post">

<P>Enter your search phrase: <INPUT type="text"></P>

</FORM>

Elementul parolă (TYPE=PASSWORD)

Sintaxa:

<INPUT TYPE="password" NAME="nume" VALUE="Valoare" SIZE=xx MAXLENGTH=yy></input>

Acest tip de intrări este folosit dacă se acceptă date de la utilizator dar nu se doreşte ca informaţiile tastate să apară pe ecran (de pildă în cazul furnizării unor informaţii confidenţiale; dar atenţie, această modalitate nu realizează o criptare a datelor). Parametrii NAME, VALUE şi MAXLENGTH acţionează exact ca şi în cazul elementului TEXT.

Exemplu:

Se utilizează elemente tip text şi parolă care au şi etichete ataşate cu LABEL:

<LABEL ACCESSKEY=U>

User name: <INPUT TYPE=text NAME=username SIZE=8 MAXLENGTH=8>

</LABEL>
<LABEL ACCESSKEY=P>

Password: <INPUT TYPE=password NAME=pw SIZE=12 MAXLENGTH=12>

</LABEL>

Căsuţe de selecţie (TYPE=CHECKBOX)

Sintaxa:

<INPUT TYPE="CHECKBOX" NAME="nume" VALUE="valoare" CHECKED>

Tipul CHECKBOX (căsuţe de selecţie) permite crearea unui buton pe care utilizatorul îl poate seta activ/inactiv (închis/deschis). Funcţia îndeplinită de CHECKBOX permite culegerea de răspunsuri la întrebări simple, pentru care nu există decît două răspunsuri posibile. Într-un formular se pot include oricîte căsuţe de selecţie. Fiecare va fi independentă de celelalte. La trimiterea formularului, vor fi remise serverului doar căsuţele selectate. Căsuţa selectată implicit are parametrul CHECKED (selectat) în elementul formularului.

Elementele CHECKBOX pot conţine de asemenea un parametru VALUE care permite setarea şirului de caractere care va fi trimis serverului la selectarea căsuţei. Dacă VALUE nu apare, valoare implicită asignată este ON.

Utilizatorul poate selecta nici una, una sau mai multe căsuţe. Pentru fiecare căsuţă selectată va fi trimis serverului un şir nume=valoare.

Exemplu:

<FORM>

<INPUT TYPE="CHECKBOX" NAME="cîini" VALUE="Cocker"> Cocker <P>

<INPUT TYPE="CHECKBOX" NAME="cîini" VALUE="Setter"> Setter <P>

<INPUT TYPE="CHECKBOX" NAME="cîini" VALUE="Mioritic"> Mioritic <P>

</FORM>

Butoane Radio (TYPE=RADIO)

Sintaxa:

<INPUT TYPE="radio" NAME="nume" VALUE="valoare" CHECKED>

Elementele tip butoane radio funcţionează asemănător cu căsuţele de selecţie, adică pot fi în poziţiile selectat/deselectat. Diferenţa constă că într-un grup de butoane, numai unul poate fi selectat la un moment dat. Selectarea altuia conduce automat la deselectarea celui selectat anterior. Elementul este util pentru a forţa selecţia unui singur element dintr-o listă multiplă. Ca şi căsuţele de selecţie, butoanele radio pot avea nume generice, acelaşi pentru toate butoanele unui anumit grup. Într-un grup poate fi activat un singur buton.

Butonul selectat implicit (care este necesar pentru unele browsere) este marcat cu CHECKED.

Exemplu:

<FORM>

<INPUT TYPE="RADIO" NAME="abonament" VALUE="3_luni"> 3_luni <P>

<INPUT TYPE="RADIO" NAME="abonament" VALUE="6_luni"> 6_luni <P>

<INPUT TYPE="RADIO" NAME="abonament" VALUE="12:luni"> 12 luni <P>

</FORM>

Exemplu:

În exemplul următor se selectează o metodă de plată prin intermediul butoanelor radio. De remarcat că toate butoanele au acelaşi nume, atributul NAME), deci fac parte din acelaşi grup. Se mai foloseşte şi o căsuţă (un buton) de marcare.

<P>Please indicate your method of payment:</P>
<P>

<LABEL ACCESSKEY=C>

<INPUT TYPE=radio NAME="payment_method" VALUE="credit card" CHECKED> Credit card

</LABEL><BR>

<LABEL ACCESSKEY=D>

<INPUT TYPE=radio NAME="payment_method" VALUE="debit card"> Debit card

</LABEL><BR>

<LABEL ACCESSKEY=M>

<INPUT TYPE=radio NAME="payment_method" VALUE="money order"> Money order</LABEL>

</P><P>

<LABEL ACCESSKEY=S>

<INPUT TYPE=checkbox NAME="send_receipt" VALUE="yes" CHECKED> Send receipt by e-mail

</LABEL></P>

Elemente tip push-buton (TYPE=BUTTON)

Sintaxa:

<INPUT TYPE="button" NAME="nume" VALUE="valoare">

Elementele tip buton specifică un buton care se poate apăsa şi care se foloseşte cu scripturi (client-side). Valoarea atributului VALUE dă textul ce apare pe buton. Atributul ONCLICK este folosit în mod tipic pentru a defini o acţiune ce se declanşează cînd butonul este apăsat, ca în exemplul următor:

<INPUT TYPE=button VALUE="Hide non-strict attributes" ID=toggler ONCLICK="toggle()">

În acest caz, în momentul în care butonul este apăsat (click) se execută funcţia toggle(), definită anterior cu un element SCRIPT.

Întrucît astfel de butoane sînt utile doar cînd posibilitatea de execuţie a scripturilor pe partea de client (client-side scripting) este activă (permisă), se recomandă evitarea unor butoane care nu fac nimic prin inserarea tagului <INPUT TYPE=button> folosind scripturi, ca în exemplul următor:

<SCRIPT TYPE="text/javascript">

<!--

document.write("<INPUT TYPE=button VALUE=\"Hide non-strict attributes\""

+ "ID=toggler ONCLICK=\"toggle()\">");

// -->

</script>

Un set mai complet de opţiuni este oferit de elementul BUTTON, dar suportul scăzut acordat de browsere acestuia fac utilizarea lui INPUT încă extrem de utilă.

Butonul RESET (TYPE=RESET)

Sintaxa:

<INPUT TYPE="reset" VALUE="Resetează">

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

Butonul SUBMIT (TYPE=SUBMIT)

Sintaxa:

<INPUT TYPE="submit" NAME="nume" VALUE="Trimite">

Elementul INPUT TYPE="submit" (trimite) este utilizat pentru crearea butonului care trimite formularul serverului. La apăsarea butonului, formularul şi conţinutul lui curent sînt trimise serverului specificat de atributul ACTION al elementului FORM, utilizînd procedeul specificat cu METHOD. Cîmpurile necompletate şi butoanele neselectate nu vor fi transmise.

Parametru VALUE dă o valoare care va fi înscrisă pe buton. Dacă apare şi atributul NAME, browserul va trimite o pereche name/value şi pentru butonul SUBMIT, aceasta permiţînd existenţa mai multor butoane SUBMIT într-un formular, fiecare cu propria acţiune.

Butonul grafic SUBMIT (TYPE=IMAGE)

Sintaxa:

<INPUT TYPE="image" NAME="nume" VALUE="Trimite"

SRC="URL" ALT="text" USEMAP="URL">

Elementul INPUT TYPE="image" este utilizat pentru crearea unui buton submit grafic. Atributul SRC trebuie inclus pentru a specifica adresa imaginii folosite, atributul ALT oferind o alternativă (un text) pentru browser-ele care nu afişează imagini. Numai HTML 4.0 defineşte acest atribut, browser-ele bazîndu-se pe valorile atributelor NAME sau VALUE, astfel că recomandarea este ca toate să aibă acelaşi text asociat.

Atributul ALIGN, depăşit acum, specifică modul de aliniere al acestui tip de buton. Valorile top, middle şi bottom specifică poziţia butonului în raport de conţinutul adiacent în dreapta şi stînga, iar valorile left şi right transformă butonul într-un element flotant, plasînd imaginea la marginea din stînga, respectiv dreapta, restul conţinutului curgînd pe lîngă el. Pentru a trimite restul conţinutului sub buton se foloseşte <BR CLEAR=left|right|all>. În locul acestui atribut se recomandă folosirea proprietăţilor CSS vertical-align şi float.

Un astfel de buton trimite în plus şi coordonatele punctului în care s-a apăsat sub forma perechilor: name.x=x-value şi name.y=y-value. Dacă se combină atributul USEMAP cu TYPE=image, se defineşte o hartă senzitivă prelucrată de client (client-side image map) dar metoda este foarte puţin suportată.

Selecţia unui fişier (TYPE=FILE)

Sintaxa:

<INPUT TYPE="file" NAME="nume" VALUE="valoare" ACCEPT="lista">

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

Elemente ascunse (TYPE=HIDDEN)

Sintaxa:

<INPUT TYPE="file" NAME="nume" VALUE="valoare" ACCEPT="lista">

Elementele tip ascuns permit inserarea în formulare a unor elemente care nu sînt vizibile (de fapt nu sînt afişate de browser dar ele pot fi văzute în sursa documentului fără nici o problemă). Ele sînt extrem de utile cînd aplicaţiile utilizează mai multe documente HTML: ceea ce introduce utilizatorul poate fi „transportat“ de la un formular la altul fără ca acesta să vadă acest lucru. De asemenea, astfel de elemente sînt utile şi pentru anumite scripturi CGI generale, cînd sînt folosite pentru a defini variabile pentru acesta, ca în exemplul următor (unde se defineşte un subiect şi o adresă de email pentru un răspuns trimis prin email):

<INPUT TYPE=hidden NAME=recipient VALUE="lp@csd.com">
<INPUT TYPE=hidden NAME=subject VALUE="Feedback on your course">

Atribute comune tuturor tipurilor de INPUT

Atributul DISABLED, puţin suportat, dezactivează un control. Astfel, un control devine read-only, nu poate primi focusul, este sărit cînd se navighează cu tasta TAB şi, în plus, valoare sa nu este trimisă serverului.

Atributele ACCESSKEY şi TABINDEX se aplică tuturor, excepţie făcînd hidden. ACCESSKEY specifică un singur caracter Unicode (inclusiv entităţile) ca shortcut pentru a da focusul unui control. Acelaşi rezultat se obţine şi dacă se setează la elementul LABEL Atributul TABINDEX specifică un număr între 0 şi 32767 pentru a indica ordinea elementului în lista de parcurgere (cu TAB). Un element cu TABINDEX=0 sau fără TABINDEX va fi vizitat după toate elementele cu o valoare pozitivă. Între elementele cu valoare pozitivă a lui TABINDEX, primele se vizitează cele cu valori mai mici. În caz de egalitate, primele apărute în document sînt primele vizitate.

Toate variaţiile lui INPUT pot specifica şi atribute utilizate de scripturi pe diverse evenimente. Pe lîngă evenimentele de tip core ce apar pentru majoritatea elementelor, INPUT mai acceptă şi următoarele:

· ONFOCUS, cînd elementul primeşte focusul;

· ONBLUR, cînd elementul pierde focusul;

· ONSELECT, cînd textul dintr-un control de tip text sau password este selectat;

· ONCHANGE, cînd elementul pierde focusul şi valoarea lui a fost schimbată faţă de momentul în care l-a primit

Elementul BUTTON

Sintaxa:

<BUTTON> ... </BUTTON>

Atribute posibile:

· NAME=CDATA (numele care se va asocia elementului)

· VALUE=CDATA (valoarea introdusă)

· TYPE=[ submit | reset | button ] (tipul butonului)

· DISABLED (element inactiv/dezactivat)

· ACCESSKEY=Character (shortcut key)

· TABINDEX=Number (poziţia în ordinea de parcurgere cu TAB)

· ONFOCUS=Script (elementul a primit focusul)

· ONBLUR=Script (elementul a pierdut focusul)

· 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="&#10004;"></BUTTON>
<BUTTON TYPE=reset ACCESSKEY=R>Reset <IMG SRC="x.gif" ALT="&#10008;"></BUTTON>

· <BUTTON TYPE=button ID=toggler ONCLICK="toggle()" ACCESSKEY=H>Hide </BUTTON>

Atributul DISABLE face butonul inaccesibil: nu se mai poate apăsa, nu mai primeşte focusul şi este sărit cînd se navighează cu TAB.

Atributele ACCESSKEY, TABINDEX şi cele care specifică acţiuni de scriptare (ONFOCUS şi ONBLUR) se folosesc la fel ca şi la INPUT.

Exemplu:

Acest exemplu îl extinde pe cel de la INPUT, dar crează butoanele Submit şi Reset cu BUTON în locul lui INPUT. Butoanele pot conţine imagini (inserate cu elementul IMG) şi se recomandă folosirea atributului ALT al acestora pentru cazul în care nu sînt afişate.

<FORM action="http://somesite.com/prog/adduser" method="post">

<P>

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>

<BUTTON name="submit" value="submit" type="submit">

Send<IMG src="/icons/wow.gif" alt="wow">

</BUTTON>

<BUTTON name="reset" type="reset">

Reset<IMG src="/icons/oops.gif" alt="oops">

</BUTTON>

</P>

</FORM>

Exemplu ilegal:

De remarcat că este ilegal să se asocieze o hartă senzitivă cu un IMG care apare ca şi conţinut al unui element BUTTON. De aceea exemplul următor este ILEGAL!

<BUTTON>

<IMG src="foo.gif" usemap="...">

</BUTTON>

Elementul TEXTAREA

Sintaxa:

<TEXTAREA> ... </TEXTAREA>

Atribute posibile:

· NAME=CDATA (numele care se va asocia elementului)

· ROWS=Number (număr de rînduri)

· COLS=Number (număr de coloane)

· DISABLED (element inactiv/dezactivat)

· READONLY (previne modificări asupra elementului)

· ACCESSKEY=Character (shortcut key)

· TABINDEX=Number (poziţia în ordinea de parcurgere cu TAB)

· ONFOCUS=Script (elementul a primit focusul)

· ONBLUR=Script (elementul a pierdut focusul)

· ONSELECT=Script (elementul de tip text a fost selectat)

· ONCHANGE=Script (valoarea elementului a fost modificată)

· atribute comune

Conţine:

· Text (incluzînd entităţi)

Conţinut în:

· Elemente block-level, elemente inline, cu excepţia lui BUTTON

Descriere:

TEXTAREA crează un control pentru introducerea unui text multi-linie, valoarea iniţială fiind afişată de browser la început în interiorul controlului (nu trebuie să conţină taguri HTML). El este utilizat de obicei în cadrul lui FORM, dar HTML 4.0 permite şi folosirea lui în orice element block-level sau inline (cu excepţia lui BUTTON). De remarcat, totuşi că Netscape Navigator NU va afişa nici un element TEXTAREA în afara unui formular definit cu FORM.

Acest element oferă posibilitatea de a accepta de la utilizator un bloc de text, astfel că acesta îşi poate "lipi" un document întreg într-o pagină HTML. Elementul TEXTAREA nu este o comandă de tip INPUT ci una de cu totul alt tip. Ca şi elementele INPUT, regiunile text au un nume care permite identificarea acestui cîmp de către server, care va primi informaţia de formă nume=conţinut.

Elementul TEXTAREA are parametrii (obligatorii) ROWS şi COLS care specifică dimensiunile ferestrei afişate utilizatorului, exprimate în număr de caractere pe orizontală, respectiv verticală. Aceasta nu înseamnă o limitare a utilizatorului în privinţa volumului de informaţie care poate fi tastat deoarece umplerea ferestrei determină apariţia unor bare de derulare. Se limitează totuşi cantitatea totală de text ce se poate introduce (în practică) la 32 ... 64 KB. Limitarea finală este făcută de scriptul CGI sau de servletul Java care primeşte formularul.

Elementul TEXTAREA nu este vid, ceea ce înseamnă că trebuie un terminator </TEXTAREA>. Ceea ce se află între cele două etichete va apare ca text implicit în cîmpul definit.

Atributul READONLY, nou în HTML 4.0 şi destul de puţin suportat, determină afişarea unui text nemodificabil. Diferenţa faţă de textul simplu este ca acesta este trimis serverului odată cu formularul.

Atributul DISABLED se comportă ca şi la INPUT, transformînd textul în read-only.

Atributele ACCESSKEY, TABINDEX şi cele care specifică acţiuni de scriptare (ONFOCUS, ONBLUR, ONSELECT şi ONCHANGE) se folosesc la fel ca şi la INPUT.

Exemplu:

Acest exemplu crează un control TEXTAREA de 20 de rînduri şi 80 de coloane, avînd iniţial 2 linii de text. Acest control este urmat de două butoane: Submit şi Reset.

<FORM action="http://somesite.com/prog/text-read" method="post">

<P>

<TEXTAREA name="thetext" rows="20" cols="80">

Prima linie a textului iniţial.

A doua linie a textului iniţial.

</TEXTAREA>

<INPUT type="submit" value="Send">

<INPUT type="reset">

</P>

</FORM>

3. Crearea controalelor de selecţie într-un formular (SELECT, OPTGROUP, OPTION)

HTML permite crearea mai multor tipuri de liste de selecţie (meniuri), de orice lungime, prin intermediul elementului SELECT. Fiecare listă prezintă utilizatorului unul sau mai multe elemente care pot fi selectate individual sau multiplu. Listele pot fi afişate în interiorul unei ferestre sau de forma drop-down. Ferestrele inserate permit accesarea elementelor conţinute cu ajutorul unor bare de derulare.

În interiorul elementului SELECT sînt permise doar două elemente: text simplu şi cel puţin un element OPTION. Elementul OPTION este utilizat pentru definirea fiecărui element al meniului. OPTION are un singur parametru: SELECTED. Utilizarea lui înseamnă că elementul respectiv este selectat implicit.

Atunci cînd un formular este transmis spre a fi prelucrat (submit), numele (NAME) listei va fi trimis serverului împreună cu elementul selectat din listă.

Elementele unui meniu pot fi grupate logic în grupuri cu ajutorul elementului OPTGROUP. Această posibilitate este utilă cînd trebuie ales dintr-o listă foarte lungă: opţiunile ce au legătură între ele dpdv logic se pot grupa şi utiliza împreună mai uşor decît dacă sînt toate într-o singură listă (la fel ca submeniurile unui meniu). În HTML 4.0 grupurile nu pot fi, însă, îmbricate.

Opţiuni preselectate

Dintre opţiunile unei liste pot fi preselectate zero sau mai multe. Determinarea elementelor preselectate se face după cum urmează:

· Dacă nici un element OPTION nu are atributul SELECTED setat, atunci nu vor fi elemente preselectate.

· Dacă un element OPTION are atributul SELECTED setat, atunci acesta va fi preselectat.

· Daca elementul SELECT are atributul MULTIPLE şi mai mult de un element OPTION are atributul SELECTED setat, atunci toate acestea vor fi preselectate

· Se consideră eroare dacă mai mult de un element OPTION are atributul SELECTED setat şi elementul SELECT nu are atributul MULTIPLE. Fiecare browser va acţiona diferit, dar nu trebuie să fie preselectat mai mult de o singură opţiune

La afişarea unui menu, se foloseşte valoarea atributului LABEL de la fiecare element OPTION pentru afişarea acelei opţiuni. Dacă nu este specificată se foloseşte conţinutul elementului OPTION. În cazul unui grup de opţiuni, atributul LABEL specifică eticheta acelui grup de opţiuni.

Exemplu:

Se crează un meniu ce permite selectarea unor componente software care să se instaleze. Prima şi a doua componentă sînt preselectate şi pot fi deselectate, celelalte nefiind preselectate. Atributul SIZE indică faptul că meniul are doar 4 rînduri, chiar dacă sînt 7 opţiuni. Ce nu se vede se accesează după ce se face scroll. Dupa definirea meniului apar butoanele Submit şi Reset.

<FORM action="http://somesite.com/prog/component-select" method="post">

<P>

<SELECT multiple size="4" name="component-select">

<OPTION selected value="Component_1_a">Component_1</OPTION>

<OPTION selected value="Component_1_b">Component_2</OPTION>

<OPTION>Component_3</OPTION>

<OPTION>Component_4</OPTION>

<OPTION>Component_5</OPTION>

<OPTION>Component_6</OPTION>

<OPTION>Component_7</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

<OPTION label="3.5" value="pm3_3.5">PortMaster 3 with ComOS 3.5

</OPTGROUP>

<OPTGROUP label="PortMaster 2">

<OPTION label="3.7" value="pm2_3.7">PortMaster 2 with ComOS 3.7

<OPTION label="3.5" value="pm2_3.5">PortMaster 2 with ComOS 3.5

</OPTGROUP>

<OPTGROUP label="IRX">

<OPTION label="3.7R" value="IRX_3.7R">IRX with ComOS 3.7R

<OPTION label="3.5R" value="IRX_3.5R">IRX with ComOS 3.5R

</OPTGROUP>

</SELECT>

</FORM>

Grupurile (logice) de opţiuni sînt, în acest caz:

PortMaster 3

3.7.1

3.7

3.5

PortMaster 2

3.7

3.5

IRX

3.7R

3.5R

Browser-ele pot permite utilizatorilor selectarea unei opţiuni dintr-un grup utilizînd, de exemplu, meniuri ierarhice sau alt mecanism asemănător. O posibilă afişare a meniului definit anterior este prezentată în figura următoare:

Elementul SELECT

Sintaxa:

<SELECT> ... </SELECT>

Atribute posibile:

· NAME=CDATA (numele care se va asocia elementului)

· MULTIPLE (permite selecţii multiple)

· SIZE=Number (numărul de opţiuni vizibile)

· DISABLED (element inactiv/dezactivat)

· TABINDEX=Number (poziţia în ordinea de parcurgere cu TAB)

· ONFOCUS=Script (elementul a primit focusul)

· ONBLUR=Script (elementul a pierdut focusul)

· ONCHANGE=Script (valoarea elementului a fost modificată)

· atribute comune

Conţine:

· Unul sau mai multe elemente OPTGROUP sau OPTION

Conţinut în:

· elemente de tip block-level, elemente inline, cu excepţia lui BUTTON

Descriere:

Acest element defineşte un control pentru selecţia dintr-o listă de opţiuni. El este utilizat de obicei în cadrul lui FORM, dar HTML 4.0 permite şi folosirea lui în orice element block-level sau inline (cu excepţia lui BUTTON). De remarcat, totuşi că Netscape Navigator NU va afişa nici un element SELECT în afara unui formular definit cu FORM.

Elementul SELECT conţine unul sau mai multe elemente OPTGROUP sau OPTION pentru a oferi un meniu de posibilităţi de alegere pentru utilizator. Fiecare opţiune este conţinută într-un element OPTION, iar acestea pot fi grupate logic cu OPTGROUP. Valoarea atributului NAME va fi trimisă serverului ca identificator al controlului (împreună cu opţiunea selectată).

Elementul SELECT are un parametru opţional, SIZE. Dacă acest parametru lipseşte, valoarea lui implicită este l, lista va fi de tip drop-down şi din listă poate fi selectat doar un singur element. Utilizarea este pentru situaţii similare celor rezolvate de butoanele radio. Dacă parametrul este mai mare decît 1, lista este prezentată într-o fereastră inserată, valoarea lui SIZE indicînd cîte elemente pot fi văzute simultan. Dacă lista este mai lungă, celelalte elemente pot fi văzute cu ajutorul barei de derulare (scroll) care apare în dreapta listei.

Un alt parametru opţional pentru <SELECT> este MULTIPLE. Parametrul nu are o valoare numerică asociată, iar prezenţa lui asigură doar posibilitatea selecţiei mai multor elemente ale listei simultan (cu ajutorul tastei CTRL) care vor fi trimise la Submit, ca în exemplul următor.

<P>Selectaţi una sau mai multe secţiuni în care doriţi să căutaţi:

<SELECT NAME=sections MULTIPLE>

<OPTION>Web Authoring Reference</OPTION>
<OPTION>FAQ Archives</OPTION>
<OPTION>Design Elements</OPTION>
<OPTION>Tools</OPTION>
<OPTION>Feature Article</OPTION>

</SELECT>

Atributele DISABLED şi TABINDEX, precum şi cele legate de acţiunile de scriptare pe anumite evenimente sînt similare cu cele de la INPUT.

Exemplu:

Exemplul următor crează un meniu de 5 opţiuni (5 elemente OPTION), afişat într-o fereastră în care sînt vizibile simultan 3 opţiuni (SIZE=3), prima fiind selectată implicit (OPTION SELECTED>Roşu), cu posibilitatea de a selecta mai multe opţiuni (MULTIPLE).

<FORM>

Selectaţi culorile favorite din următoare listă:

<SELECT NAME="culori" SIZE=3 MULTIPLE>

<OPTION SELECTED>Roşu

<OPTION>Verde

<OPTION>Albastru

<OPTION>Turcoaz

<OPTION>Magenta

</SELECT>

</FORM>

Elementul OPTGROUP

Sintaxa:

<OPTGROUP> ... </OPTGROUP>

Atribute posibile:

· LABEL=Text (eticheta grupului de opţiuni)

· DISABLED (grupul de opţiuni este dezactivat)

· atribute comune

Conţine:

· Unul sau mai multe elemente OPTION

Conţinut în:

· elementul SELECT

Descriere:

Acest element defineşte un grup de opţiuni într-un meniu definit cu SELECT şi trebuie să conţină cel puţin un element OPTION. Atributul LABEL este obligatoriu, identifică grupul de opţiuni, fiind afişat de browser şi pentru utilizator. El trebuie să descrie grupul de opţiuni grupate dpdv logic împreună cu atributele LABEL ale fiecărei opţiuni în parte.

OPTGROUP nu este foarte bine suportat de toate browserele, dar cele care nu îl recunosc nu crează nici o problemă. Cele care îl suportă permit o afişare mai compactă prin intermediul meniurilor cascadate (submeniuri). Cascadarea este însă în HTML 4.0 doar pe un singur nivel (nu sînt permise OPTGROUP în OPTGROUP)!

Atributul DISABLED face întregul grup de opţiuni inactive (le dezactivează), acestea neputînd fi selectate şi nici trimise la server odată cu formularul.

Exemplu:

Exemplul următor se poate folosi pentru a cere utilizatorului informaţii despre browser-ul pe care îl utilizează mai frecvent. Se utilizează OPTGROUP pentru a grupa informaţiile legate de acelaşi tip de browser (Netscape Navigator, Microsoft Internet Explorer, Opera sau altul).

<P>Ce browser Web folosiţi în mod curent?

<SELECT NAME=browser>

<OPTGROUP LABEL="Netscape Navigator">

<OPTION LABEL="4.x">Netscape Navigator 4.x or higher</OPTION>

<OPTION LABEL="3.x">Netscape Navigator 3.x</OPTION>

<OPTION LABEL="2.x">Netscape Navigator 2.x</OPTION>

<OPTION LABEL="1.x">Netscape Navigator 1.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>

<OPTION LABEL="2.x">Microsoft Internet Explorer 2.x</OPTION>

<OPTION LABEL="1.x">Microsoft Internet Explorer 1.x</OPTION>

</OPTGROUP>

<OPTGROUP LABEL="Opera">

<OPTION LABEL="3.x or higher">Opera 3.x or higher</OPTION>

<OPTION LABEL="2.x">Opera 2.x</OPTION>

</OPTGROUP>

<OPTION>Other</OPTION>

</SELECT>

</P>

Elementul OPTION

Sintaxa:

<OPTION > ... </OPTION >

Atribute posibile:

· VALUE=CDATA (valoarea opţiunii)

· SELECTED (opţiune iniţial selectată)

· DISABLED (dezactivată/inactivă)

· LABEL=Text (eticheta opţiunii)

· atribute comune

Conţine:

· Text (inclusiv entităţi)

Conţinut în:

· elementul SELECT sau OPTGROUP

Descriere:

Acest element defineşte o opţiune (un elemnt de meniu) într-un meniu (listă de opţiuni). Valoarea acestei opţiuni este cea care va fi trimisă la Submit şi este specificată cu atributul VALUE. Dacă lipseşte, se consideră valoare a acestui element conţinutul lui OPTION.

Atributul boolean SELECTED defineşte o opţiune ce este iniţial selectată – preselectată (a se vedea paragraful anterior relativ la elemente preselectate). Există posibilitatea de a stabili ca opţiune preselectată o valoare fără semnificaţie (dummy) pentru a fi siguri că utilizatorul selectează o opţiune şi nu trece doar peste meniu. De exemplu, starea civilă se poate cere astfel:

<SELECT NAME="marital_status">

<OPTION SELECTED VALUE="">Select...</OPTION>

<OPTION>Single</OPTION>

<OPTION>Married</OPTION>

<OPTION>Separated</OPTION>

<OPTION>Divorced</OPTION>

<OPTION>Widowed</OPTION>

</SELECT>

Atributul DISABLED, deşi nu este suportat global, determină transformarea unei opţiuni în opţiune inactivă (nu poate fi selectată, nu este trimisă odată cu formularul).

Atributul LABEL specifică eticheta unei opţiuni, care altfel (implicit) este conţinutul elementului. Se recomandă folosirea ei pentru că permite utilizarea mult mai uşoară a grupării cu OPTGROUP, fără a sacrifica compatibilitatea cu browser-ele care nu suportă acest element.

Exemplu:

<P>Which Web browser do you use most often?

<SELECT NAME=browser>

<OPTGROUP LABEL="Netscape Navigator">

<OPTION LABEL="4.x or higher">Netscape Navigator 4.x</OPTION>

<OPTION LABEL="3.x">Netscape Navigator 3.x</OPTION>

<OPTION LABEL="2.x">Netscape Navigator 2.x</OPTION>

<OPTION LABEL="1.x">Netscape Navigator 1.x</OPTION>

</OPTGROUP>

<OPTGROUP LABEL="Microsoft Internet Explorer">

<OPTION LABEL="4.x or higher">Microsoft Internet Explorer 4.x</OPTION>

<OPTION LABEL="3.x">Microsoft Internet Explorer 3.x</OPTION>

<OPTION LABEL="2.x">Microsoft Internet Explorer 2.x</OPTION>

<OPTION LABEL="1.x">Microsoft Internet Explorer 1.x</OPTION>

</OPTGROUP>

<OPTGROUP LABEL="Opera">

<OPTION LABEL="3.x or higher">Opera 3.x or higher</OPTION>

<OPTION LABEL="2.x">Opera 2.x</OPTION>

</OPTGROUP>

<OPTION>Other</OPTION>

</SELECT>

</P>

Atributul LABEL al elementelor OPTGROUP şi OPTION's LABEL au fost introduse împreună, astfel că un browser sau le suportă pe amîndouă sau pe niciunul. Cele care le suportă vor afişa acest exemplu folosind atributul LABEL al lui OPTION pentru a oferi ca element de selecţie doar numărul de versiune, împreună cu atributul LABEL al lui OPTGROUP care dă numele complet al aplicaţiei (browserului), obţinîndu-se o afişare mai compactă. Celelalte, care nu suportă atributul OPTGROUP, le vor ignora (împreună cu atributele lor, aici LABEL), afişînd numele complet şi versiunea la fiecare opţiune.

4. Etichetele controalelor dintr-un formular (elementul LABEL)

Cîteva controale care se utilizează în formularele interactive au asociate etichete cu ele (butoanele ce se apasă), dar multe nu au (cîmpurile text, checkbox-urile, butoanele radio şi meniu). Pentru controalele care au etichete asociate, browserele trebuie să le folosească ca şiruri de caractere afişate pentru ele. Pentru cele care nu, specificarea se face cu elementul LABEL. Acesta ataşează informaţie pentru un control şi numai unul.

Cînd un element LABEL primeşte focusul îl pasează controlului asociat.

Elementul LABEL are un atribut, FOR, care asociază o etichetă cu un alt control, în mod explicit: valoarea atributului FOR trebuie să fie exact aceeaşi cu valoarea atributului ID al controlului asociat. În acest fel aceluiaşi control i se pot asocia mai multe elemente LABEL prin crearea de referinţe multiple (cu ajutorul lui FOR).

Exemplu:

Acest exemplu crează un tabel care este folosit pentru a alinia două controale text (şi etichetele asociate lor). Fiecare etichetă este asociată explicit cu un control de tip text:

<FORM action=" http://somesite.com/prog/adduser " method="post">

<TABLE>

<TR>

<TD><LABEL for="fname">First Name</LABEL>

<TD><INPUT type="text" name="firstname" id="fname">

<TR>

<TD><LABEL for="lname">Last Name</LABEL>

<TD><INPUT type="text" name="lastname" id="lname">

</TABLE>

</FORM>

Acelaşi lucru se poate face şi prin includerea elementelor explicite LABEL:

<FORM action="http://somesite.com/prog/adduser" method="post">

<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="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>

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:

<FORM action="..." method="post">

<LABEL>

First Name

<INPUT type="text" name="firstname">

</LABEL>

<LABEL>

<INPUT type="text" name="lastname">

Last Name

</LABEL>

</FORM>

Elementul LABEL

Sintaxa:

<LABEL> ... </LABEL>

Atribute posibile:

· FOR=IDREF (cîmpul formularului asociat)

· ACCESSKEY=Character (shortcut key)

· ONFOCUS=Script (elementul a primit focusul)

· ONBLUR=Script (elementul a pierdut focusul)

· atribute comune

Conţine:

· elemente inline cu excepţia lui LABEL

Conţinut în:

· elemente de tip block-level, elemente inline, cu excepţia lui BUTTON

Descriere:

Acest element asociază o etichetă (label) cu un control al unui formular. Prin această asociere autorii paginilor Web oferă sugestii importante utilizatorilor de browsere auditive, iar celor care folosesc browsere vizuale li se permite duplicarea unor caracteristici ale interfeţei utilizator (GUI), cum ar fi, de exemplu, posibilitatea de a apăsa o etichetă (text) pentru a selecta un buton radio sau o căsuţă de marcare.

Fiecare element LABEL este asociat cu exact un control. Conţinutul elementului este eticheta controlului şi poate include elemente inline, ca de exemplu IMG sau STRONG.

Atributul FOR specifică în mod explicit controlul care se asociază cu LABEL. Valoarea lui FOR trebuie să se potrivească cu valoarea atributului ID al controlului asociat. În absenţa lui FOR, elementul LABEL trebuie să conţină controlul asociat! Această metodă (de asociere implicită) funcţionează în majoritatea cazurilor, dar devine inutulizabilă cînd eticheta şi controlul asociat sînt în celule diferite de tabel, în paragrafe sau diviziuni diferite .

Atributul ACCESSKEY, precum şi cele legate de acţiunile de scriptare pe anumite evenimente sînt similare cu cele de la INPUT.

Exemplu:

Acest exemplu ilustrează ambele metode de asociere a unei etichete cu un control: asocierea explicită (cu FOR) şi asocierea implicită (control conţinut de LABEL):

<TABLE>

<TR>

<TD>

<LABEL FOR=user ACCESSKEY=U>User</LABEL>

</TD>

<TD>

<SELECT NAME=user ID=user>

<OPTION>Jean</OPTION>

<OPTION>Kim</OPTION>

<OPTION>Brian</OPTION>

</SELECT>

</TD>

</TR>

<TR>

<TD><LABEL FOR=passwd ACCESSKEY=P>Password</LABEL></TD>

<TD><INPUT TYPE=password NAME=password ID=passwd></TD>

</TR>

</TABLE>

<P>

<LABEL ACCESSKEY=S>

<INPUT TYPE=checkbox NAME=save VALUE=yes>

Save user name and password in a cookie

</LABEL>

</P>

<P>

<LABEL ACCESSKEY=C>

Comments to post:

<TEXTAREA NAME=comments ROWS=8 COLS=50></TEXTAREA>

</LABEL>

</P>

5. Elementele de structură dintr-un formular (elementele FIELDSET, LEGEND)

Elementul FIELDSET permite gruparea tematică a controalelor şi a etichetelor unui formular. Prin această operaţie se uşurează procesul de înţelegere a scopului pentru care au fost introduse controalele (făcînd documentele mai accesibile), oferind în plus şi facilităţi de navigare (pentru browserele vizuale, de exmplu cu tasta TAB).

Elementul LEGEND permite asignarea unei explicaţii (unui titlu, şir de caractere) unui element FIELDSET, îmbunătăţind accesibilitatea la acesta pentru browserele nevizuale.

Fie, pentru exemplificare, un formular care s-ar putea utiliza la un cabinet medical. Este împărţit în 3 secţiuni: informaţii personale, antecedente medicale (istoria bolilor) şi tratamentul curent. Fiecare secţiune conţine controale pentru a se introduce informaţia corespunzătoare.

<FORM action="..." method="post">

<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

<INPUT name="history_illness"

type="checkbox"

value="Varicela" tabindex="21"> Varicela

<INPUT name="history_illness"

type="checkbox"

value="Rubeola" tabindex="22"> Rubeola

<INPUT name="history_illness"

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 de tip bloc, separat de restul formularului.

Conţinutul lui trebuie să înceapă cu un element LEGEND care să ofere un titlu (o explicaţie) pentru grupul de controale, apoi pot să apară oricîte elemente inline sau de tip bloc, inclusiv un alt element FIELDSET.

Exemplu:

Acest exemplu defineşte un formular pentru comanda unor informaţii (manuale): ghid HTML 3.2, ghid HTML 4.0 sau manual de referinţă CSS. Se cer datele clientului (numele, adresa de e-mail, adresa postală), se cer informaţii despre ceea ce se doreşte a se cumpăra şi apoi despre modalitatea de plată. Fiecare grup de informaţii se află într-un FIELDSET separat, fiecare avînd un element LEGEND asociat. La sfîrşit se introduc cele 2 butoane obligatorii într-un formular (Submit şi Reset), trimiterea formularului făcîndu-se către un program CGI (order.cgi) aflat în folderul /cgi.

<FORM METHOD=post ACTION="/cgi-bin/order.cgi">

<FIELDSET>

<LEGEND ACCESSKEY=I>Contact Information</LEGEND>

<TABLE>

<TR>

<TD><LABEL FOR=name ACCESSKEY=N>Name:</LABEL></TD>

<TD><INPUT TYPE=text NAME=name ID=name></TD>

</TR>

<TR>

<TD><LABEL FOR=email ACCESSKEY=E>E-mail Address:</LABEL></TD>

<TD><INPUT TYPE=text NAME=email ID=email></TD>

</TR>

<TR>

<TD><LABEL FOR=addr ACCESSKEY=A>Mailing Address:</LABEL></TD>

<TD><TEXTAREA NAME=address ID=addr ROWS=4 COLS=40></TEXTAREA></TD>

</TR>

</TABLE>

</FIELDSET>

<FIELDSET>

<LEGEND ACCESSKEY=O>Ordering Information</LEGEND>

<P>Please select the product(s) that you wish to order:</P>

<P>

<LABEL ACCESSKEY=3>

<INPUT TYPE=checkbox NAME=products VALUE="HTML 3.2 Reference">

<A HREF="/reference/html32/">HTML 3.2 Reference</A>

</LABEL>

<BR>

<LABEL ACCESSKEY=4>

<INPUT TYPE=checkbox NAME=products VALUE="HTML 4.0 Reference">

<A HREF="/reference/html40/">HTML 4.0 Reference</A>

</LABEL>

<BR>

<LABEL ACCESSKEY=S>

<INPUT TYPE=checkbox NAME=products VALUE="CSS Guide">

<A HREF="/reference/css/">Cascading Style Sheets Guide</A>

</LABEL>

</P>

</FIELDSET>

<FIELDSET>

<LEGEND ACCESSKEY=C>Credit Card Information</LEGEND>

<P>

<LABEL ACCESSKEY=V>

<INPUT TYPE=radio NAME=card VALUE=visa> Visa

</LABEL>

<LABEL ACCESSKEY=M>

<INPUT TYPE=radio NAME=card VALUE=mc> MasterCard

</LABEL>

<BR>

<LABEL ACCESSKEY=u>

Number: <INPUT TYPE=text NAME=number>

</LABEL>

<BR>

<LABEL ACCESSKEY=E>

Expiry: <INPUT TYPE=text NAME=expiry>

</LABEL>

</P>

</FIELDSET>

<P>

<INPUT TYPE=submit VALUE="Submit order">

<INPUT TYPE=reset VALUE="Clear order form">

</P>

</FORM>

Elementul LEGEND

Sintaxa:

<LEGEND> ... </LEGEND>

Atribute posibile:

· ACCESSKEY=Character (shortcut key)

· ALIGN=[ top | bottom | left | right ] (alinierea relativă la FIELDSET)

· atribute comune

Conţine:

· elemente inline

Conţinut în:

· FIELDSET

Descriere:

Acest element defineşte un titlu (explicaţie) pentru un grup de controale definite cu FIELDSET. Elementul LEGEND trebuie să apară la începutul lui FIELDSET, înainte de orice alt element. Chair dacă nu este suportat de toate browserele, poate fi utilizat în siguranţă dacă este urmat imediat de un element de tip bloc. Pentru astfel de browsere se pot folosi elemente ca STRONG, B sau BIG pentru a sugera faptul că acela este titlul unui grup de controale.

Atributul ACCESSKEY se foloseşte la fel ca la INPUT, iar atributul (depăşit) ALIGN sugerează poziţia relativă faţă de FIELDSET. Valorile posibile sînt: top, bottom, left, right. Chair dacă e depăşit, este interesant de remarcat că în tehnica style-sheet-urilor nu există alternativă!

<FIELDSET>

<LEGEND ACCESSKEY=C>Credit Card Information</LEGEND>

<P>

<LABEL ACCESSKEY=V>

<INPUT TYPE=radio NAME=card VALUE=visa> Visa

</LABEL>

<LABEL ACCESSKEY=M>

<INPUT TYPE=radio NAME=card VALUE=mc> MasterCard

</LABEL>

<BR>

<LABEL ACCESSKEY=N>

Number: <INPUT TYPE=text NAME=number>

</LABEL>

<BR>

<LABEL ACCESSKEY=E>

Expiry: <INPUT TYPE=text NAME=expiry>

</LABEL>

</P>

</FIELDSET>

6. Procesarea datelor din formulare

1. Metode de transmitere a formularului

Valorile completate în cadrul unui formular pot fi transmise înspre server pe mai multe căi, metodele de bază fiind GET sau POST, dar pot fi utilizate şi posibilităţile oferite de elementul ISINDEX. Fiecare metodă tratează intrările într-un mod aparte, avînd în comun doar variabilele de mediu.

<ISINDEX> este un tag vid de un tip mai special. Includerea lui în header s-a făcut iniţial (înainte de existenţa formularelor) pentru ca acesta să activeze un cîmp text în bara de butoane sau în fereastra navigatorului. Vizitatorul putea tasta în acel cîmp şirul de caractere dorit şi, apăsînd RETURN, trimitea datele serverului. Este o modalitate de a implementa interacţiunea înainte de existenţa formularelor.

Metoda se alege în funcţie de aplicaţie. GET poate fi folosit în cazul cînd informaţia transmisă este scurtă (de exemplu un cuvînt cheie şi tipul acestuia). Dacă formularul lucrează cu mai multe cîmpuri de date, variabilele de mediu pot fi trunchiate, dar acest defect se poate elimina prin apelul metodei POST.

Metoda folosită de protocolul HTTP pentru a trimite datele la server este stabilită de atributul METHOD al elementului FORM, atribut ce poate lua două valori:

· get: Cu metoda "get" a protocolului HTTP, setul de date al formularului este adăugat la adresa URI specificată de atributul ACTION, folosind semnul întrebării ("?") ca separator. Noua adresă URI este trimisă astfel la agentul (programul) care o procesează.

· post: Cu metoda "post" a protocolului HTTP, setul de date al formularului este inclus în corpul formularului şi transmis agentului (programului) care-l procesează.

Metoda "get" trebuie folosită cînd formularul este idempotent, adică nu cauzează alte efecte laterale. Multe căutări în bazele de date nu au efecte laterale (secundare, ascunse) vizibile şi reprezintă aplicaţii ideale pentru această metodă. În plus datele din setul de date al formularului trebuie să fie obligatoriu, în exclusivitate, caractere ASCII.

Dacă, însă, serviciul asociat cu procesarea formularului are efecte laterale (side-effects), ca de exemplu cazul în care formularul modifică baza de date sau reprezintă o subscriere la un serviciu, se va folosi metoda "post". Aceasta oferă şi posibilitatea de a trimite date din întreg setul de caractere (Unicode), prin specificarea atributului enctype="multipart/form-data".

2. Controalele de succes (successful controls) ale unui formular

Un control de succes este acel control al unui formular „valid“ pentru a fi trimis (la Submit). Fiecare astfel de control are numele său ascociat, într-o pereche, cu valoarea sa curentă. Această pereche face parte din setul de date al formularului. Un control de succes trebuie să fie definit într-un element FORM şi trebuie să aibă un nume. Nu toate controalele unui formular sînt de succes. Astfel:

· Controalele care sînt dezactivate/inactive (disable) nu pot fi de succes

· Dacă un formular conţine mai mult de un buton Submit, numai acela care este activat (apăsat) este de succes

· Toate căsuţele de marcare (checkbox-urile) setate la on (activate), şi numai ele, sînt de succes

· Dintre butoanele radio care au aceeaşi valoare a atributului NAME numai cel care activ/setat (pe "on") poate fi de succes.

· Pentru meniuri (liste de selecţie), numele controlului este oferit de un element SELECT iar valorile sînt date de elementele OPTION. Numai opţiunile selectate sînt de succes.

· Valoarea curentă a unui element de selectare a unui fişier este o listă de unul sau mai multe nume. La transmiterea unui formular, conţinutul fiecărui fişier este transmis cu restul datelor din formular. Conţinutul fişierului este „împachetat“ conform tipului conţinutului formularului (content-type).

· Valoarea curentă a unui obiect este determinată de implementarea specifică a acelui obiect.

Dacă un control nu are o valoare curentă cînd formularul este transmis, browserul nu este obligat să îl trateze ca pe un control de succes. În plus, nu vor fi considerate controale de succes nici:

· Butoanele Reset

· Elementele OBJECT care au atributul DECLARE setat.

Controalele ascunse (hidden) care chiar dacă nu sînt afişate de browsere (nu sînt vizibile) pot fi controale de succes.

Exemplu:

<FORM action="..." method="post">

<P>

<INPUT type="password" style="display:none"

name="invisible-password" value="mypassword">

</P>

</FORM>

va crea un control de succes pentru elementul parolă, adică o pereche din numele "invisible-password" şi valoarea "mypassword".

3. Procesarea datelor unui formular

Cînd utilizatorul trimite un formular (prin activarea butonului Submit), browserul său realizează următorii paşi (următoarele acţiuni):

Pasul 1: Identificarea controalelor de succes (successful controls)

Pasul 2: Crearea unui set de date asociat formularului

Un set de date asociat unui formular este o secvenţă de perechi nume-control/valoare-curentă construită din controale de succes.

Pasul 3: Codificarea setului de date

Setul de date creat la pasul anterior este codificat în conformitate cu tipul conţinutului (content type) specificat de atributul ENCTYPE al elementului FORM.

Pasul 4: Transmiterea setului de date codificat

În final setul de date astfel codificat este trimis de browserul client agentului de prelucrare (programului) desemnat de atributul ACTION, folosind protocolul specificat de atributul METHOD.

Această specificare nu acoperă toate metodele valide de trimitere sau tipurile de conţinut ce pot fi folosite cu formularele. Totuşi, browserele compatibile HTML 4.0 trebuie să suporte convenţiile stabilite în următoarele cazuri:

· Dacă metoda este "get" şi acţiunea (atributul ACTION) este o adresă (URI) HTTP, browserul ia valoarea atributului ACTION, adaugă un „?“ la ea, iar apoi adaugă setul de date asociat cu formularul, stabilind tipul conţinutului (content type) la "application/x-www-form-urlencoded". Browserul urmează apoi noua legătura astfel creată. În acest scenariu, datele formularului sînt restricţionate la codurile ASCII.

· Dacă metoda este "post" şi acţiunea (atributul ACTION) este o adresă (URI) HTTP, browserul va genera o tranzacţie HTTP "post" folosind valoarea atributului ACTION şi un mesaj creat în conformitate cu tipul conţinutului (content type) specificat de atributul ENCTYPE.

Pentru orice altă valoare a atributelor ACTION şi METHOD comportamentul este nespecificat. Browserele trebuie să afişeze răspunsul generat de tranzacţiile HTTP "get" şi "post".

4. Tipurile posibile de conţinut (content-type) pentru un formular

Atributul ENCTYPE al elementului FORM specifică tipul conţinutului folosit pentru a codifica setul de date asociat formularului în momentul transmiterii către server. Browserele utilizatorilor trebuie să suporte tipurile indicate în cele ce urmeză. Comprtamentul pentru alte tipuri este nespecificat:

application/x-www-form-urlencoded

Acesta este tipul implicit. Formularele transmise cu acest tip de conţinut trebuie codificate după cum urmează:

1. Numele controalelor şi valorile sînt „escaped“. Caracterele blanc (spaţiu) sînt înlocuite de `+', iar caracterele rezervate sînt şi ele „escaped“: caracterele non-alphanumeric sînt înlocuite cu `%HH', (semnul procent şi două cifre hexazecimale reprezentînd codul ASCII al caracterului). Sfîrşitul de linie (line break) este reprezentat ca o pereche "CR LF" (adică `%0D%0A').

2. Perechile nume/valoare pentru controale apar în ordinea din document. Numele este separat de valoare prin semnul egal `=' şi fiecare pereche este separată de celelalte prin semnul`&'.

Tipul de conţinut "application/x-www-form-urlencoded" este ineficient pentr a trimite cantităţi mari de date binare sau texte conţinînd caractere non-ASCII. Tipul de conţinut "multipart/form-data" va fi folosit cînd se trimit formulare ce conţin fişiere, date non-ASCII şi date binare.

multipart/form-data

Este tipul folosit cînd conţinutul setului de date este alcătuit din mai multe feluri de (seturi de) date. Se supune regulilor de la toate şirurile de date (stream-urile) de tip multipart MIME. Un stfel de mesaj conţine o serie de părţi, fiecare reprezentînd un control de succes. Părţile sînt trimise agentului care le procesează în ordinea în care apar în document. La fel ca la orice tip multipart MIME, fiecare parte are un header opţional "Content-Type" care implicit are valoarea "text/plain" şi care este însoţit de un parametru "charset". Fiecare parte trebuie să conţină:

1. Un header tip "Content-Disposition" a cărui valoare să fie "form-data".

2. Un atribut NAME care specifică numele controlului corespondent. Numele controalelor care sînt codificate într-un set de caractere non-ASCII pot fi modificate.

Astfel, de exemplu, pentru controlul cu numele "mycontrol" partea corespunzătoare lui va fi specificată astfel: Content-Disposition: form-data; name="mycontrol"

Ca la toate transmiterile MIME, pentru a separa liniile de date se foloseşte "CR LF" (`%0D%0A').

Dacă se trimite un fişier (conţinutul lui) acesta trebuie să fie identificat obligatoriu de tipul conţinutului (de exemplu"application/octet-stream"). Dacă se trimit mai multe (ca rezultat al unei sigure selecţii din formular), ele trebuie trimise ca "multipart/mixed", înăuntrul lui "multipart/form-data". Fiecare fişier trebuie trimis cu un nume, specificat cu parameterul "filename" al headerului 'Content-Disposition: form-data'. Dacă acesta nu este codificat ASCII el trebuie fie aproximat fie codificat.

Exemplu:

Acest exemplu ilustrază codificarea "multipart/form-data". Presupunem că avem următorul formular:

<FORM action=http://server.dom/cgi/handle enctype="multipart/form-data"

method="post">

<P>

Numele Dvs? <INPUT type="text" name="submit-name"><BR>

Fisierele pe care le trimiteti? <INPUT type="file" name="files"><BR>

<INPUT type="submit" value="Send"> <INPUT type="reset">

</FORM>

Dacă utilizatorul introduce "Larry" în controlul de tip text şi selectează "file1.txt", browserul lui va trebui să trimită următoarele date la server:

Content-Type: multipart/form-data; boundary=AaB03x

--AaB03x

Content-Disposition: form-data; name="submit-name"

Larry

--AaB03x

Content-Disposition: form-data; name="files"; filename="file1.txt"

Content-Type: text/plain

... contents of file1.txt ...

--AaB03x--

Dacă utilizatorul selectează al doilea fişier (o imagine), cu numele "file2.gif", browserul va trebui să contruiască părţile componente ale tranzacţiei după cum urmează:

Content-Type: multipart/form-data; boundary=AaB03x

--AaB03x

Content-Disposition: form-data; name="submit-name"

Larry

--AaB03x

Content-Disposition: form-data; name="files"

Content-Type: multipart/mixed; boundary=BbC04y

--BbC04y

Content-Disposition: attachment; filename="file1.txt"

Content-Type: text/plain

... contents of file1.txt ...

--BbC04y

Content-Disposition: attachment; filename="file2.gif"

Content-Type: image/gif

Content-Transfer-Encoding: binary

...contents of file2.gif...

--BbC04y--

--AaB03x—

Capitolul 8.

Alte elemente ale limbajului HTML

8.1. Formule matematice

Una din cele mai ambiţioase caracteristici aduse de specificaţiile HTML 3.0 este posibilitatea de a afişa formule matematice. Toate ecuaţiile matematice încep cu <MATH> şi se termină cu </MATH> care suportă atributele ID (pentru ancore) şi CLASS (pentru subclasele ecuaţiilor; de exemplu CHEM, pentru chimie). Între aceste tag-uri se pot introduce mici ecuaţii matematice (pe un singur rînd). Posibilităţile de aliniere sînt reduse şi recomandarea este să se utilizeze tabele pentru alinierea seturilor multiple de ecuaţii. Entităţile matematice (caractere greceşti, simboluri, săgeţi, etc) le găsiţi listate la adresa http://www.hpl.hp.co.uk/people/dsr/html/maths.html

şi sînt de forma:

&alpha; alfa

&beta; beta

&gamma; 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²+y²=r²

</math>

<math>

&sum;^&inf;_n=1

</math>

Simbolurile anumitor operaţii matematice sînt introduse de forma:

<tag operaţie>expresie afectată</ tag operaţie>

ca în cazul următor, pentru radical de ordinul doi:

<SQRT>x+y</SQRT>

Matricile (arrays) se introduc de o manieră asemănătoare cu tabelele, rînd cu rînd, element cu element:

<math>

<array>

<row><item>a<item>b

<row><item>c<item>d

</array>

</math>

8.2. Documente dinamice

Felul în care este prezentat un document pe Web este, din punctul de vedere al tehnoredactării, cu mult în urma publicaţiilor tradiţionale, pe hîrtie. Limbajul HTML se dezvoltă anevoios. A început prin a imita stîngaci publicaţiile tipărite dar a continuat prin a-şi identifica trăsături aparte, inaccesibile publicaţiilor clasice, de la cele care ţin de tehnologia în sine şi pînă la cele care ţin de noile posibilităţi estetice. Documentele dinamice reprezintă un pas înainte făcut de tehnologia Web în a-şi găsi propria identitate.

1. Client pull

<META HTTP-EQUIV="Refresh" CONTENT="interval_de_timp [;URL]">

Client-pull este capacitatea navigatorului (a clientului) de a cere singur documente noi fără vreo intervenţie a utilizatorului. Browserele realizează acest lucru folosindu-se de header-ul HTTP numit Refresh. Refresh este trimis de la server la navigator şi-i spune navigatorului să ceară un nou document după un anumit număr de secunde (sau imediat). Modalitatea de a lipi headere HTTP în documente HTML este dată de tag-ul <META>.

Exemplu: Inserarea în prima pagină HTML a codului:

<META HTTP-EQUIV="Refresh" CONTENT="1; URL=http://www.xxx.ro/pagina2.htm1">

va determina navigatorul care a cerut-o să aducă după o secundă şi cea de-a doua pagină. O idee bună (pentru a nu bloca vreun vizitator al cărui navigator nu înţelege codul) este introducerea în paginile cu client-pull a unor legături care să-i permită vizitatorului să "evadeze" fără a închide complet aplicaţia.

2. Server push

O altă modalitate de a realiza documente dinamice este server push. Spre deosebire de client pull, unde navigatorul iniţia conectări multiple cu serverul, în acest caz serverul este cel care menţine legătura deschisă şi pompează date către client. Această facilitate poate fi folosită fie pentru a trimite mai multe pagini ale documentului către client (rezultat similar cu client pull) fie pentru a trimite clientului imagini care se înlocuiesc succesiv în acelaşi loc dînd impresia de animaţie în documentul HTML.

Server push se bazează pe un tip de document MIME special, numit multipart/mixed. Acest tip MIME este utilizat pentru mesaje de poştă care conţin diferite tipuri de fişiere de date. Server push utilizează o variantă a tipului multipart MIME numit multipart/x-mixed-replace în care un eşantion de date înlocuieşte integral un eşantion precedent.

Rezultatul este că server-push poate coda şi trimite mai multe tipuri de informaţie (GIF, text HTML, text ASCII, etc) într-unul şi acelaşi document. Headerul dă instrucţiuni navigatorului să înlocuiască fiecare segment de document cu noul element ce a fost încărcat, trimis automat de către server.

Imaginile animate constituie una din cele mai utilizate aplicaţii ale acestei tehnologii; animarea este realizată prin trimiterea unui document multipart ce constă într-o secvenţă liniară de imagini GIF, fiecare dintre aceste imagini reprezentând un cadru de animaţie. Browserul afişează aceste imagini serial, una după alta, producând astfel efectul de mişcare.

Implementarea tehnologiei server-push este mai complicată decât cea de client-pull, deoarece nu există un tag specific şi necesită aplicaţii CGI specifice.

8.3. Utilizarea mediilor externe: imagini, sunete şi video

Mediile externe sînt fişiere care nu pot fi afişate direct de navigatorul Web. Fişiere externe pot fi orice fişiere pe care le puteţi crea (video MPEG, fişiere PostScript, fişiere arhivate, etc). Legătura dintr-un document HTML la un astfel de fişier se face utilizînd tag-ul <A>.

Cînd serverul trimite un anumit fişier navigatorului, el include informaţii despre tipul fişierului utilizînd un mesaj special trimis odată cu fişierul. Dacă navigatorul nu poate afişa acel tip de fişier, el încearcă să identifice (dintr-o listă cunoscută) o aplicaţie ajutătoare (numită uneori helper sau viewer), căreia să-i treacă fişierul. Dacă tipul fişierului este recunoscut şi aplicaţia ajutătoare corespunzătoare este definită, navigatorul startează aplicaţia şi îi trece fişierul. Aplicaţia, la rîndul ei, va prelucra fişierul care constituie mediul extern, care nu a putut fi interpretat de navigator.

Dacă navigatorul nu identifică tipul fişierului atunci îl salvează pe disc după ce în prealabil (de regulă) cere permisiunea utilizatorului. Navigatorul utilizează aplicaţiile ajutătoare şi în cazul în care fişierele sînt încărcate de pe discul local, cu deosebirea că în aceste cazuri utilizează extensiile fişierelor pentru a identifica tipul de fişier. Acesta este de fapt şi motivul pentru care trebuie utilizate extensiile .html sau .gif pentru documentele HTML şi imagini GIF; în cazul că lucrăm local, navigatorul poate identifica tipurile de fişiere.

Acest mod de lucru face ca dimensiunile navigatoarelor să rămînă în continuare mici. De altfel, nu există nici un motiv puternic ca acestea să includă viewere pentru tipuri de fişiere mai rar întîlnite. Fiecare navigator are o listă care mapează extensiile fişierelor şi tipurile corespunzătoare de aplicaţii.

Specificarea mediilor externe în HTML se face cu ajutorul tag-ului <A> şi a atributului HREF, ca în cazul legăturilor la toate celelalte documente HTML:

<A HREF="fişier extern">Textul care descrie fişierul pentru vizitator</A>

Se obişnuieşte inserarea unor informaţii suplimentare despre fişier: formatul fişierului, dimensiune sau orice alte informaţii care l-ar ajuta pe cel ajuns aici să decidă dacă să ia fişierul sau nu.

1. Imagini externe

Formatul cel mai des utilizat în documentele HTML este GIF, afişabil de majoritatea navigatoarelor grafice. Utilizarea imaginilor externe conferă însă o mai mare flexibilitate.

Cîteva din cele mai întîlnite formate sînt următoarele:

Format	Extensie	Utilizări
GIF	.gif	Formatul afişabil direct de navigatoare. Este recomandabilă utilizarea lui şi pentru imagini externe
JPEG	.jpg, .jpeg	Deşi unele navigatoare pot afişa acest format, majoritatea nu o pot face. Este deci recomandabilă utilizarea imaginilor cu acest format ca imagini externe
XBM	.xbm	Numele vine de la X Window System Bitmap. Nu sînt afişabile direct de către navigator
PICT	.PICT	Format grafic obişnuit pentru sistemele Macintosh

Majoritatea programelor bune de grafică pot face conversii între aceste formate. În cazul imaginilor externe mari, este recomandabilă inserarea în document (alături de celelalte informaţii despre fişier) a aceleiaşi imagini (sau porţiune de imagine) mult reduse, pentru a da o idee vizitatorului despre imaginea pe care eventual o va lua.

Exemplu:

<A HREF="imagine_mare.jpg"><IMG SRC="imagine_micşorată.gif">25K fişier JPEG</A>

2. Sunete

Utilizarea sunetelor se poate face fie pentru inserarea unor adnotaţii la fişierele text, fie pentru mesaje de bunvenit sau clipuri audio.

Deocamdată singurul format sonor independent de platformă este AU (utilizat de Sun Microsystem şi NeXT pentru standardul lor audio). AU permite mai multe tipuri de rezoluţii şi eşantionare dar cel mai răspîndit este mono, cu rezoluţie verticală pe 8 biţi şi eşantionare orizontală pe 8kHZ (micro-law), conceput iniţial pentru industria telefonică din Statele Unite. Echivalentul său european este A-law, în mare parte asemănător. Calitatea sunetului este destul de modestă şi din această cauză vor fi întîlnite destul de frecvent formate specifice unei anumite platforme dar care oferă sunet de o mai bună calitate. Cele mai răspîndite sînt:

Format	Extensie	Utilizări
AU	.au	Dezvoltat iniţial pentru eşantionări pe 8 biţi, este în prezent perfecţionat de o versiune pe 11 biţi. Fişierele AU tind să fie mici, compacte, uşor de luat şi utilizabile pe orice tip de computer deşi nu este încă un standard internaţional
WAV	.wav	Este formatul audio pentru Microsoft Windows. Fişierele .wav tind să fie de calitate mai bună decît .au dar si fişierele sînt mai voluminoase. Permit orice rezoluţie verticală şi orice frecventă de eşantionare
MPEG Audio	.mp2, .mp3	MPEG este mai mult cunoscut ca standard video decît audio dar porţiunea de standard pentru audio permite obţinerea unor sunete de foarte bună calitate şi modalităţi de redare există pe mai multe platforme
AIFF/AIFC	.aiff, .aif	AIFF (Audio Interchange File Format) este formatul fişierelor sonore dezvoltat de Apple pentru Macintosh dar adoptat şi de alţii (SGI). Rezoluţie verticală stereo/ mono pe 8 sau 16 biţi. Nu este un fişier foarte comun pentru Web. Formatul are aceleaşi limitări ca şi .wav în ceea ce priveşte compatibilitatea multiplatformă. AIFC este AIFF cu compresie incorporată

Recomandările generale privind inserarea fişierelor externe sînt valabile şi aici. Inserarea unui fişier audio trebuie făcută astfel:

<A HREF="audio_clip.au">Puţină muzică (375K, format AU)</A>

(se adaugă informaţii privind ce anume conţine fişierul, formatul si cît este de mare).

3. Video

Clipurile video sînt o combinaţie de imagine şi sunet asemănătoare unui film. Ca şi în cazul clipurilor audio, fişierele video nu sînt redate direct de navigatoare, acestea avînd nevoie de aplicaţii ajutătoare. Cu alte cuvinte, fişierele trebuie luate mai întîi de către vizitator şi apoi redate cu unul din viewer-ele capabile să redea un clip video.

Marea problemă cu fişierele video este dimensiunea acestora. Clipurile video sînt uriaşe, de regulă de 1-2 MB. Motivul este că aceste fişiere sînt compuse din sute de cadre care sînt afişate cu frecvenţă ridicată unele după altele. Un minut de video poate însemna în jur de 1000 de cadre diferite. Luarea unui asemenea fişier de pe un server poate însemna (la o viteză de transfer de 28,8 baud) aproximativ 20 de minute. Pentru cei care au modemuri cu viteze de transfer mai mici probabil că timpul va fi mult mai mare astfel că aceştia vor fi descurajaţi de fişierele video mari.

Pentru a vedea fişierele video pe un PC este nevoie nu numai de aproximativ 8 MB RAM dar şi de o aplicaţie ajutătoare. Utilizatorii Mac sînt mai norocoşi deoarece au aceste facilităţi încorporate în sistem.

Pentru fişierele video independente de platformă, standardul curent este MPEG dar QuickTime (Apple) cîştigă în ultima vreme tot mai mult teren, pe măsură ce softurile de redare devin disponibile pentru alte platforme. QuickTime are de asemenea avantajul că poate include o pistă audio împreună cu cea video.

Cîteva din formatele mai răspîndite sînt:

Format	Utilizări
MPEG	Unul dintre cele mai vechi formate video, MPEG este similar formatului JPEG pentru grafică, fiind optimizat pentru video. Formatul este răspîndit deoarece clipurile video în acest format sînt de bună calitate. Din nefericire, formatul este foarte pretenţios hard şi RAM
AVI	AVI este formatul Microsoft Windows pentru video. Utilizatorii acestui sistem pot utiliza cu uşurinţă fişiere video AVI deoarece formatul a fost optimizat pentru Windows
QT	QT este abrevierea de la QuickTime şi este formatul dezvoltat şi brevetat de Apple Computer. Este multiplatformă, compact şi uşor de înregistrat

Exemplu:

<A HREF="bunvenit.QT">Un mesaj de bunvenit (QuickTime, 1,5 M)</A>

Capitolul 1. Internet şi World Wide Web

Capitolul 2. Descrierea generală a limbajului HTML

Capitolul 3. Structura documentelor HTML

Capitolul 4. Elemente de bază ale limbajului HTML

Capitolul 5. Utilizarea tabelelor în HTML

Capitolul 6. Utilizarea frame-urilor în HTML

Capitolul 7. Utilizarea formularelor (forms) în HTML

Capitolul 8. Alte elemente ale limbajului HTML