Cuprins CUPRINS BIBLIOGRAFIE CUVÎNT ÎNAINTE CAPITOLUL 1.

INTERNET ŞI WORLD WIDE WEB
1.1. INTRODUCERE
Ce este Internetul? Ce este World Wide Web (WWW, W3)

3 6 7 9
9
9 10

1.2. RESURSELE WORLD WIDE WEB 1.3. ADRESAREA UNEI RESURSE ÎN WEB 1.4. ELEMENTELE CONEXIUNILOR ÎN SPAŢIUL WWW 1.5. PROTOCOLUL HTTP
1.5.1. INTRODUCERE GENERALĂ 1.5.2. MESAJELE PROTOCOLULUI HHTP 1.5.3. METODELE PROTOCOLULUI HHTP

11 11 12 13
13 14 15

CAPITOLUL 2. DESCRIERE GENERALĂ A HTML
2.1. INTRODUCERE, ISTORIE, VERSIUNI
Ce este HTML? Caracteristicile limbajului HTML. De ce HTML? Istoria HTML. Ce trebuie să facă un autor de pagini HTML? Revoluţia HTML 4.0. Validarea documentelor HTML.

19
19
19 19 20 21 24 24 25

3

2.2. REPREZENTAREA DOCUMENTELOR HTML 2.3. STRUCTURA ŞI LOGICA LIMBAJULUI HTML
I. Tag-urile HTML II. Caractere entităţi

26 27
27 28

CAPITOLUL 3. STRUCTURA DOCUMENTELOR HTML
3.1. STRUCTURA GENERALĂ A UNUI DOCUMENT HTML
1. Elementul DOCTYPE 2. Elementul HTML 3. Elementul HEAD 4. Elementul BODY 5. Elementul FRAMESET

31
31
32 33 33 34 37

3.2. STRUCTURA HEADER-ULUI UNUI DOCUMENT (ELEMENTUL HEAD)
1. Elementul TITLE 2. Elementul BASE 3. Elementul STYLE 4. Elementul LINK 5. Elementul META 6. Elementul SCRIPT 7. Elementul ISINDEX 8. Elementul OBJECT

40
40 41 41 43 45 46 49 49

3.3. STRUCTURA CORPULUI UNUI DOCUMENT HTML (ELEMENTUL BODY) 52
I. Elementele de tip bloc (block level elements) II. Elementele de tip inline (inline level elements) III. Elementele de tip nedefinit (pot fi atît inline cît şi block) 53 54 56

CAPITOLUL 4. ELEMENTE DE BAZĂ HTML
4.1. ELEMENTE UTILIZATE LA FORMATAREA TEXTULUI UNUI DOCUMENT
1. Terminarea rîndului (elementul BR) 2. Titluri (elementul Hi) 3. Containere de text (stiluri ale unui bloc) A. Paragrafe (elementul P) B. Containerul logic de tip bloc (elementul DIV) C. Containerul logic de tip text/inline (elementul SPAN) D. Textul centrat (elementul CENTER) E. Textul preformatat (elementul PRE) F. Adrese (elementul ADDRESS) G. Citate lungi (elementul BLOCKQUOTE) H. Citate scurte (elementul Q) 4

57
57
57 58 59 59 60 60 62 62 63 64 65

4. Stilurile caracterelor 5. Elemente de modificare a fontului caracterelor A. Dimensiunea fontului B. Stabilirea fontului de bază

66 67 67 69

4.2. DEFINIREA ŞI UTILIZAREA LISTELOR 4.3. TAG-URI (ELEMENTE) PENTRU LEGĂTURI HYPERTEXT 4.4. IMAGINI ÎN DOCUMENTELE HTML 4.5. IMAGINI SENZITIVE 4.6. ALTE ELEMENTE LEGATE DE TEXT ŞI IMAGINI
1. Comentariile în documentele HTML 2. Linii orizontale de demarcare (elementul HR) 3. Fundalul unui document 4. Culoarea textului şi a legăturilor

70 77 83 90 98
98 98 99 100

CAPITOLUL 5. UTILIZAREA TABELELOR ÎN HTML CAPITOLUL 6. UTILIZAREA FRAME-URILOR ÎN HTML CAPITOLUL 7. UTILIZAREA FORMULALELOR (FORMS)

101 131 145

CAPITOLUL 8. ALTE ELEMENTE ALE LIMBAJULUI HTML 181
8.1. FORMULE MATEMATICE 8.2. DOCUMENTE DINAMICE 8.3. UTILIZAREA MEDIILOR EXTERNE: IMAGINI, SUNETE ŞI VIDEO 181 182 183

5

Inc.0. 1998. Gaither. Maximillan Computer Publishing.. Mike.Bibliografie [1] WWW Consortium. Microsoft Internet Developer Journal.. Ed. 1999 collection [6] Miller Freeman. Jerry. www. HTML 4. Special Edition Using HTML 4. IDG Books Worldwide Inc. 1998 [5] Mat Publishing Limited. Mark. 1999 collection 6 . Microsoft Corp. MCSE Internet Information server . 1998 [3] Tittel. Perkins. SYBEX Corporation. Sebastian.org/TR/REC-html40 [2] Strebe.w3.. Hassinger. Charles. Erwin. Developer Network Journal. 1997 [4] Honeycutt. Foundations of World Wide Programming.Study Guide.0 Specification. 1998. Mathew.

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

8 .

Internetul înseamnă şi mulţimea comunităţilor celor ce îl folosesc. Internetul nu este o organizaţie monolitică. Pe lîngă instrumentul care este această imensă conexiune. INTERNET şi World Wide Web 1.Capitolul 1. Internetul este o societate de reţele de calculatoare interconectate. 9 . Introducere Ce este Internetul? Internetul a fost descris ca „o colecţie largă de reţele“ sau ca o „reţea de reţele“. avînd o conducere şi un grup de control unice. Deşi ambele definiţii sînt corecte. comunitatea economică utilizează Internetul ca pe un mediu de derulare al afacerilor. comunitatea ştiinţifică utilizează Internetul ca pe un instrument de cercetare şi colaborare. independente dar care (din anumite motive) se supun unor protocoale globale. fiecare în scopuri diferite: • • • comunitatea academică utilizează Internetul ca pe cel mai mare. nici una nu surprinde Internetul în totalitatea sa.1. complet şi totodată complex instrument de învăţare (educaţional).

Pentru a face aceste resurse disponibile (utilizabile) unei audienţe cît mai largi. Este un sistem interactiv hipermedia (adică un sistem ce conţine şi suportă patru categorii importante de tipuri de informaţie: texte. Protocoale pentru accesarea resurselor astfel denumite în Web (de exemplu HTTP) Hypertextul pentru navigarea comodă de la o resursă la alta (între resurse). 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. O schemă uniformă de denumire (de stabilire a numelor. Web-ul poate fi utilizat pentru căutarea de informaţii despre produse. în general pentru aflarea unor informaţii despre orice tip de informaţie imaginabilă. imagini. sunete/audio şi imagini video în mişcare) construit peste Internet. Web-ul se sprijină pe 3 mecanisme fundamentale: 1. naming scheme) pentru a localiza resursele în Web (de exemplu URI). 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. 2. păstrarea unor colecţii de informaţii de orice fel de tip (de exemplu de ziare). transferul de software şi versiuni noi ale acestuia. Elementele fundamentale ale WWW sînt prezentate în figura următoare: World Wide Web este cel mai vizibil instrument Internet.Ce este World Wide Web (WWW. 3. 10 .

. adresa_host_in_retea (de exemplu www. Cererea este emisă de un client. poate fi un program căruia trebuie să i se paseze cîţiva parametri şi o anumită cerere: Cale/subcalel/./subcalen/nume_document identifică calea absolută pînă la documentul identificat de nume_document de pe serverul respectiv. se face uz de mesaje... mai general.. el trebuie precizat dat fiind faptul că http nu este singurul protocol prin care poate fi accesată o anumită resursă din Internet. Pentru referirea la o resursă din Internet.domeniu_de_bază Deci www. informaţii relative la client şi un eventual “conţinut” suplimentar. o bază de date.iar pentru a specifica ce metodă se doreşte.paraml.. Dacă se specifică un alt port.ro s-ar citi “serverul www din subdomeniul xxx din domeniul de bază ro.. Unei resurse i se aplică o metodă . sub forma unei metode. caz în care se face referire la fragmentul respectiv: Cale/subcalel/.stpt. 80. la care se adaugă un mesaj de tip MIME conţinînd informaţii relative la server şi eventual un “conţinut” suplimentar. O resursă poate fi un program. Cale/subcalel/.ro sau www. :port poate lipsi.subdomeniu2. Metoda se referă la o anumită resursă.xxx. Paradigma pe care se bazează protocolul este cea de cerere/răspuns.o reprezentare particulară a unor date necesare în cerere sau în răspuns. incluzînd versiunea de protocol utilizată şi un cod de succes sau eroare. Nu întotdeauna însă resursa referită este un document! Poate fi o fracţiune dintr-un document./subcalen/nume_document#capitolul2paragraful3 Sau.2. ce date sau parametrii suplimentari o completează pe aceasta.param2../subcalen/nume_document http: specifică tipul protocolului.este cel de resursă.subdomeniun.1...com) identifică un server sau un gateway din reţea. atît timp cît poate fi referită în mod corect şi fără echivoc. un calculator.. identificată via URI. se foloseşte termenul generic URI (Universal Resource Identifier) care poate specifica fie o locaţie.xxx. care formează corpul entităţii. caz în care se vorbeşte de un URN (Universal Resource Name). mai trebuie adăugate versiunea de protocol utilizată şi un mesaj de tip MIME care să conţină parametrii metodei.preluat şi acceptat şi în alte protocoale utilizate în Internet . caz în care se vorbeşte de un URL (Universal Resource Locator) fie un nume../subcalen/nume_program. ş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.. Acest posibil conţinut suplimentar este de regulă o entitate .3. 1. Adresarea unei resurse în Web Adresarea unei resurse via http se face prin construcţii (şiruri de caractere) de forma http://adresa_host_in_retea[:port]/cale/subcalel/. folosind adresarea uzuală de tip DNS (Domain Name Service) din Internet: numehost.. ceea ce înseamnă că se presupune implicit că se face referinţă la portul standard. acesta stabileşte o conexiune cu un server şi îi trimite acestuia o cerere. un serviciu nu prea are importanţă. un document. se va adresa acesta. Resursele World Wide Web Unul din conceptele de bază . Serverul vă răspunde cu o linie de stare.subdomeniul.paramn?cerere 11 .

cs. iar proxy-ul va face probabil o rescriere a mesajului de răspuns către client. Cu această ocazie el se şi substituie clientului iniţial: răspunsul îi va veni tot lui. 1. Specificarea unei resurse nu trebuie să fie totdeauna absolută. este posibil să existe mai mulţi intermediari în conexiune.Exemplu: Următoarea referinţă http://guaraldi.edu:2000 ne spune că se va face o conexiune via http cu serverul guaraldi..colostate. într-un singur loc. legătura dintre client şi server se realizează prin intermediul unei singure conexiuni. un fel de “cameră de 12 . Aceştia pot fi de trei feluri: proxy. INS şi DEL).colostate. APPLET şi INPUT).4. care omit calea pînă în acel director: “subcalel/subcale2/. Î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. utilizînd portul 2000 al acestuia. • citarea unei referinţe externe (a se vedea elementele Q. Pe acest server se va adresa programul savvy-frontend din directorul cgi-bin/.colostate. după care va transmite mesajul modificat către serverul adresat iniţial. se va citi http://guaraldi. dar pe partea de server.cs. Elementele conexiunilor în spaţiul WWW În cazul cel mai simplu.. ca în exemplul dat. securizare etc. rescrie anumite părţi ale mesajului sau chiar tot mesajul. Acesta poate face în plus. nu se mai “vede” cine este clientul adevărat: toţi clienţii ce trec prin proxy sînt “ascunşi”. • transmiterea unui formular interactiv (a se vedea elementul FORM). dacă resursa se află în acelaşi director. • referirea unor conveţii de metadate care descriu un document (a se vedea elementul HEAD).cs. Este un receptor. De foarte multe ori însă. o serie de verificări. care ar fi greu de implementat pe multe şi diverse maşini . se pot folosi adrese relative. Un gateway este similar unui proxy. • crearea unui document cu frame-uri (a se vedea elementele FRAME şi IFRAME)../subcalem/nume_resursa” sau chiar pur şi simplu “nume resursă”. Un proxy este un intermediar sofisticat: el primeşte cererile adresate unei resurse identificate printrun URI.edu. OBJECT. Un proxy reprezintă înspre restul lumii un grup de clienţi. relative la autentificare.edu:2000/cgi-bin/savvyfrontend?KW=cuvînt_cheie & classic=on & tl=x & Boolean=AND & Hits=10 & Mode=MakePlan & df=normal & AutoStep=on. Dinspre server. BLOCKQUOTE. serverul primind numai cereri de la proxy. 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. gateway sau tunnel.toate calculatoarele client care trec prin acel proxy. • crearea unei imagini senzitive (a se vedea elementele MAP şi AREA). putîndu-i trata pe aceştia diferenţiat. a unui obiect sau a unui applet (a se vedea elementele IMG. Dacă ne-am plasat deja într-un subdirector oarecare al unui server.

“nu accept răspunsuri memorate mai mult de x minute”. de exemplu. înspre protocolul pe care îl cunoaşte sau îl foloseşte un anumit server. Cererile sosite la gateway sînt dirijate către serverele corespunzătoare cererii (sau către serverul cel mai liber. Serverele “de după gateway nu se văd în restul lumii . dacă acesta nu se află în spatele unui tunel.1.5.ele sînt. pe de altă parte. reprezentate de gateway. cererile de la clienţi pot formula anumite opţiuni specifice relative la cache (“nu accept decît răspunsuri de la server direct”. Un tunel este un intermediar neinteligent: el transportă date pe care nu le înţelege sau interpretează în nici un fel între două conexiuni.primire” pusă în faţa unui server sau a unui grup de servere. Introducere generală Este un protocol la nivel aplicaţie destinat sistemelor de informare distribuite. Nu are loc nici un fel de schimbare a mesajelor. există unele opţiuni relative la comunicaţie care se referă numai la primul vecin.) 1. trecînd printr-o formă intermediară. Proxy-ul din figură poate lucra deodată cu mulţi clienţi. Exemplul anterior ilustrează şi drumul unei cereri care s-a mai făcut o dată de către client. care se adresează la mai multe servere şi care pot fi găsiţi prin conexiuni diferite. Protocolul HTTP 1. nu trebuie uitat faptul că fiecare participant poate fi angajat simultan în comunicaţii multiple.5. conţinutul mesajelor nu se schimbă. De regulă are loc şi o conversie de protocol. 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. care nu mai este obligat în felul acesta să “cunoască” http. între intrarea în şi ieşirea din tunel. dacă faptul că există mai multe servere vine din dorinţa de a disponibiliza mai multă putere de calcul). dar se află încă în cache-ul proxy-ului: Desigur. Acest lucru trebuie avut în vedere. de genul hypermedia. a cunoscut o serie de 13 . În cazul unei conexiuni mai complexe. Iar dacă diagrama simplificată de mai sus este lineară. altele care se referă numai la punctele finale ale conexiunii iar altele care se pot referi la toate conexiunile de pe traseu. etc. decît temporar. 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”). Apărut ca protocol de bază pentru WWW încă din 1990. “colaborative“. toate. 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.

ce conţine aceasta.documentele vehiculate cuprinzînd nu numai text. cele două capete ale unei conexiuni . ci şi sunet.cei doi parteneri în discuţie. 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. extrase dintr-o schiţă. 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.0. Nici un nivel nu se preocupă de celălalt. Mesajul va conţine un şi r de caractere de forma: GET specificare_resursă HTTP/1. Aplicaţiile care folosesc protocolul .1 . dar aducînd îmbunătăţiri în special în direcţia folosirii mai eficiente a resurselor . folosind pentru comunicare translatorii care trimit mesajele filozofilor (traduse) prin intermediul poştaşilor. pe diverse calculatoare.5. ca în celebrul exemplu al filozofilor ce vorbesc două limbi diferite.sînt entităţi abstracte din punct de vedere al protocolului. un “draft” care poate se va mai schimba mult. 1. deşi la origine “hypertext” a fost definitoriu. o parte din aspectele care urmează nu trebuie privite ca referinţe “bătute în cuie”. FILOZOFII TRANSLATORII POŞTAŞII Cererile formulate în protocolul HTTP se referă la informaţii care se pot afla stocate în diverse baze de date.2. cu ce protocol lucrăm. Ele trebuie “doar” să poată comunica între ele ceea ce înseamnă. iar versiunea 1. De aceea. în diverse formate.1 CRLF Forma generală a unui mesaj de cerere este conformă schemei de mai sus: 14 . practica curentă l-a dus destul de repede înspre “hypermedia” . în principiu. Cum anume se traduc în cereri “concrete” date diferite.0. Versiunea cea mai folosită este încă 1. Pentru ca această cerere să ajungă la server trebuie să trimitem un mesaj care să conţină şi resursa specificată mai sus.compatibilă “în jos” cu 1.este pe cale să se impună ca nou standard. Numele este acronimul pentru HyperText Transfer Protocol. imagine sau informaţii structurate. ci ca instantanee ale unei specificaţii pe cale să se nască. o versiune “finală” neexistînd nici în prezent.transformări. posibilitatea de a primi sau formula cereri şi de a formula sau recepţiona răspunsuri.

sau plain altfel. MOVE. Metodele protocolului HHTP Metodele sînt de fapt operaţiile care pot fi aplicate obiectelor constituite de resursele din reţea. TRACE. trebuie să se realizeze mai întîi o negociere între server şi client. PATCH. Şi metoda are nevoie de parametri.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. mai concret. q=0. şi fără a renunţa la posibilităţile introduse de versiunile (mereu mai) noi ale protocolului. dar acceptă orice tip pentru date audio în cazul în care calitatea reprezentării nu scade sub 20%. relativ la ce ştie fiecare şi abia apoi să se desfăşoare transferul propriu-zis de date. care să permită transferul mai uşor al răspunsului. HTTP/0. Deci. Exemplu: O cerere de tipul OPTIONS www. PUT.ro HTTP1/1 CRLF Accept: text/plain. nu se pot formula mai multe răspunsuri la o întrebare. în accepţiunea protocolului HTTP. Nu se pot pune mai multe întrebări pentru a obţine un singur răspuns. răspunsul la metoda GET va fi o entitate care să cuprindă acele date. pentru ca totuşi un server “deştept” să se poată înţelege şi cu un client mai puţin dotat.9. x-dvi. LINK. Chiar dacă volumul de date care trebuie incluse în răspuns este mare.ro.3. mxb=100000. nu numai resursa.5. antetele de cîmp pot avea valori care la rîndul lor sînt definite (dar nu limitate. WRAPPED.1 sînt următoarele: OPTIONS. Metoda permite determinarea opţiunilor şi/sau posibilităţilor unui server. dar numai dacă textul nu depăşeşte 100000 de octeţi. Există totuşi două posibilităţi de a micşora volumul de date care să circule pe reţea în urma 15 . iar în HTTP termenul consacrat pentru parametrii metodelor este “header field” sau “antet de cîmp”. UNLINK. HEAO. punct-virgulă separă determinările sau preferinţele suplimentare relative la o anumită opţiune.xxx. Metodele prevăzute în versiunea 1. GET este una dintre cele mai importante metode şi singura care era disponibilă în prima versiune a protocolului.2. Metoda va trebui să fie totdeauna primul element dintr-o linie de cerere. GET. Exemplu: Iar o cerere de genul OPTIONS www. OPTIONS semnifică o cerere relativă la informaţiile ce definesc opţiunile de comunicare disponibile pe conexiunea către URI-ul specificat în cerere.5. q=0. text/x-dvi. POST.ro HTTP1/1 CRLF Accept: audio/*. Virgula separă opţiuni posibile. dacă resursa este un proces care produce date (o căutare de pildă). sau invers. fără să determine o acţiune din partea resursei adresate.xxx. DELETE. nu se face o fracţionare în bucăţele mai mici. q=0. Definite în cadrul protocolului pentru fiecare metodă.xxx. GET este metoda care “aduce” ceva de la resursă. text/html. extensiile fiind în principiu totdeauna posibile). Răspunsul este unul singur: aceasta este o caracteristică de bază a protocolului. dacă sînt disponibile. Din punct de vedere al protocolului HTTP. COPY. 1. text/x-c CRLF specifică următoarele preferinţe relative la modul de reprezentare al textului: x-c sau html. în care clientul solicitant spune că preferă audio/basic.8. audio/basic CRLF reprezintă o cerere de definire a opţiunilor către serverul www. dacă nu. discuţia este totdeauna simplă: o întrebare are un răspuns.

16 . Cu toate informaţiile necesare care să îi permită serverului să reconstruiască o versiune la zi a resursei.ro/?cerere HTTP/1. De exemplu.elaborării unui răspuns. va accepta sau nu această cerere. dar nu conţine toate datele care să definească resursa. “nu pot”. dacă serverul răspunde. un client care vrea să “posteze” un text de 10 MB. Cu POST se poate adăuga un fişier unui anumit director. care sînt procesele pe care un anumit server le acceptă sau cunoaşte îi sînt strict specifice.de exemplu. Metoda POST este generală. Sintaxa este similară metodei GET. 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ă. etc. şi va răspunde cererii cu informaţii corespunzătoare (“s-a făcut”. COPY. sau pentru a afla dacă s-a schimbat ceva. 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. În acest timp. folosită în principiu pentru testarea validităţii şi/sau accesibilităţii unei resurse.). spre deosebire de GET însă. După care aşteaptă 5 secunde. doar caracteristicile acestora. Dacă resursa specificată există deja.xxx. Dacă nu soseşte nici un răspuns în timpul de aşteptare. 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. se poate adăuga un mesaj unui grup de ştiri. o condiţionare de genul “dacă s-a schimbat ceva” şi posibilitatea de a prelua numai o parte din acesta. Serverul. mutată acolo sau respectiv doar ştearsă. clientul trimite numai parametrii metodei. bineînţeles. se poate trimite un mesaj prin poştă electronică. o cerere de genul: GET www. HEAD este o metodă similară cu GET. se consideră implicit că serverul acceptă datele şi acestea sînt transmise de către client. entitatea nouă trebuie privită ca o versiune modificată care ar trebui să o înlocuiască pe cea existentă. Pentru a evita situaţii care să ducă la încărcarea excesivă si nejustificată a reţelei . “nu ai voie să faci treaba asta” etc. Ceva de genul “dacă ţi-aş cere să execuţi cererea mea. clientul ia în seamă şi analizează răspunsul serverului (iar dacă acesta este “nu mai am loc”. 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. fără să trimită datele efective pe care le vrea postate. şi un cod de succes sau eroare. datele nu se mai transmit). se pot adăuga date unei baze de date existente. ce mi-ai răspunde?”.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. datele eventual produse de resursă în urma cererii nu sînt transmise. PATCH este o metodă similară lui PUT. funcţie de drepturile de acces pe care i le-a acordat clientului. ci numai diferenţele faţă de versiunea existentă pe server.

mai multe cereri. iar apoi să îi dea curs acesteia. va trimite în ecou cererile care îi vin de la client.o cerere poate fi cifrată şi transmisă prin metoda WRAPPED.LINK şi UNLINK sînt metode prin care resursa specificată în cerere este legată/dezlegată de alte resurse. pentru a verifica/diagnostica conexiunea. TRACE este o metodă care îi permite clientului să vadă cum ajung cererile sale la server. Via WRAPPED. care în mod obişnuit ar fi succesive. specificate ca parametrii pentru metodă. un cuprins pentru un set de documente. ceea ce va determina serverul să acţioneze în doi paşi: întîi să descifreze cererea reală. 17 . etc. WRAPPED este o metodă care “contrazice” principiul protocolului de a trimite totdeauna o singură cerere şi a aştepta un singur răspuns. Iar o altă aplicare a metodei ţinteşte măsuri de securizare . 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. stabilind una sau mai multe relaţii cu acestea din urmă. în răspuns la această cerere. sînt “împachetate” într-una singură. Ar putea fi de exemplu un index pentru o bază de date. fără să le mai trateze ca cereri “reale”.

18 .

1. rezultînd însă tot documente în format text pur. ca de exemplu <CHAPTER> sau <TITLE> care sînt aplicabile oricărei porţiuni de date corespunzătoare din document. HTML are patru caracteristici principale: 1. 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ţă. 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).. istorie. Toate acestea indică modul de afişare (prezentare) pentru programele capabile să înţeleagă aceste informaţii. 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. pentru căutari de informaţie sau pentru activităţi specifice comerţului să includă foi de calcul tabelar. liste. Limbajul HTML dă autorilor posibilitatea: • • • • să publice documente cu headere. etc) în întreaga comunitate ştiinţifică internaţională care utiliza (şi utilizează) Internetul. etc.. versiuni Ce este HTML? Limbajul a fost dezvoltat iniţial de oamenii de ştiinţă ca o unealtă utilizată la partajarea documentelor (rapoarte de cercetare. tabele. fotografii. Defineşte structuri de documente ierarhice şi (hyper)legături intra. sunete şi alte aplicaţii direct în documente Caracteristicile limbajului HTML. documentaţii. 3. clipuri video.Capitolul 2. O legătură (sau interconexiune) este o relaţie unară între două elemente ale unui document. texte. limbaj care să fie potenţial înţeles de toate computerele din Internet. Limbajul folosit de World Wide Web este HTML. HTML are o descriere a tipului 19 . Structura unui document este însoţită de astfel de legături între elementele sale.şi inter-documente. 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 înglobarea şi altor tipuri de informaţii (imagini. etc). Astfel. 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“). sunete. Limbajul HTML este guvernat de o descriere formală. 2. Introducere. Aceasta înseamnă că părţi ale documentului descris de HTML sînt „marcate“ cu nume descriptive. Foloseşte un „marcaj“ descriptiv pentru a indica diversele acţiuni („instrucţiuni“) ce trebuie executate. 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. Descriere generală a limbajului HTML 2. în timp ce procesoarele de texte folosesc formate particulare (proprietare).

Documentele HTML conţin doar textul propriu-zis şi tag-urile HTML iar sursa lor poate fi uşor văzută din orice navigator. poate să apară într-un element). o aşa-numită aplicaţie a acestuia. De ce HTML? HTML este un limbaj bazat pe SGML (Standard Generalized Markup Language). Cu foarte puţine excepţii. Atît specificaţiile limbajului cît şi limbajul însuşi pot fi „citite“ (interpretate) şi de om dar şi de computer. Deci. el „citeşte“ documentul în căutarea tag-urilor HTML. Cînd navigatorul încarcă un document HTML. DTD defineşte sintaxa limbajului. SGML este un standard internaţional (ISO-8879) aprobat în 1986. În corelaţie cu informaţiile despre elemente. HTML nu descrie modul de prezentare al documentului ca un întreg (layout). fonturile instalate. 4. Este utilizat pentru descrierea structurii generale a diferitelor tipuri de documente fără să fie un limbaj de descrierea a paginii (cum este PostScript). 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. Datorită faptului că elementele de marcare sînt separate de text prin şiruri de delimitare alcătuite din caractere tipăribile. Este ceea ce fac navigatoarele Web. etc). Deşi în această fază de dezvoltare posibilităţile de formatare oferite sînt încă destul de limitate. descrie fiecare element individual al unui document scris în limbajul HTML. poţi marca elementele documentului cu tag-urile corespunzătoare. 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ţă. 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. DTD oferă definiţii pentru entităţile externe ce pot fi referite în HTML (de exemplu. în afara funcţiilor de comunicare şi aducere a documentelor de pe Net. SGML este un sistem complex de descriere a documentelor.documentului (Document Type Definition DTD) care stabileşte specificaţiile formale ale limbajului. setul de caractere ISO-Latin-1 folosit pentru a reprezenta caracterele pe ecranul unui display). fişiere sonore. Deoarece nu cunoaştem posibilităţile platformei pe care va fi văzut documentul (dimensiunea ecranului. nu asupra aspectului lui. Majoritatea tag-urilor HTML arată de forma: <NumeTag> Textul afectat de tag </NumeTag> şi indică navigatorului elemente de structura documentului. paragrafe sau liste) şi că dacă defineşti un set de elemente. avantajul faptului că documentele pot fi transferate şi văzute 20 . Proiectanţii HTML au ales intenţionat această variantă. Este motivul pentru care acelaşi document HTML apare uşor diferit cînd este privit cu navigatoare diferite. SGML oferă o modalitate de a reprezenta structura documentelor şi hyper-documentelor. Teoria din spatele acestui limbaj se bazează pe faptul că majoritatea documentelor au elemente comune (de pildă: titluri. Acesta poate să ia hotărîri privind formatarea documentului pe baza posibilităţilor platformei respective. Motivul este simplu. în virtutea trăsăturilor moştenite de la SGML. textul şi marcajele pot coexista „în pace şi înţelegere“ atît pentru om. cît şi pentru computer. dacă este vreunul. formatează textul şi imaginea şi le afişează pe ecran. formatare. hypertext sau alte elemente (imagini. oferind un control destul de redus asupra formei documentului. etc). HTML oferă (deocamdată) un suport redus în stabilirea plasamentului sau felului în care vor fi afişate elementele documentului. HTML este un limbaj pentru descrierea documentelor structurate. 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. defineşte atributele permise pentru fiecare element şi descrie modelul datelor conţinute în fiecare element (adică stabileşte care alt element.

Orice versiune a HTML include elemente cum ar fi: text centrat sau aliniat dreapta.0.0 (cunoscut anterior ca HTML+) aduce în plus tabelele. tabele. De aceea s-a impus ca o necesitate absolută standardizarea HTML-ului într-un efort global al întregii comunităţi a Internetului. versiune care îmbunătăţeşte totodată şi conceptele de accesibilitate şi structuralitate a limbajului de marcare. În această perioadă HTML-ul s-a dezvoltat în multiple direcţii. Organismul care „guverna“ protocolul TCP/IP („fundamentul“ Internetului). independent de platformă şi de navigator. Informaţii despre dezvoltarea HTML se pot prelua de la adresa: http://www. 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. curgerea textului pe lîngă imagini. fiecare dintre acestea responsabile cu un anumit protocol sau serviciu aflat în dezvoltare sau întreţinere. Nivelul 1 este obligatoriu pentru toate navigatoarele şi înseamnă posibilitatea de a interpreta (hyper)text plus imagini. aveau implementări incompatibile. Documentele care specifică aceste protocoale şi servicii sînt numite Request for Comments. Istoria HTML. formatarea paragrafelor (alinieri stînga. Rezultă de aici o compresie bună. cunoscut la începuturile sale ca Internet Activities Board. Grosul activtăţii de dezvoltare şi standardizare a protocoalelor este astfel realizat de aceste grupuri de lucru din cadrul IETF. tabele. Şi acum HTML este un limbaj marcat de un deosebit dinamism. În plus avea contracte cu companii comerciale specializate în comunicaţii pentru gestionarea infrastructurii Internetului. Nivelul 2 (HTML 2. centru şi dreapta). mai cunoscute sub numele de RFC. HTML 3. aliniere imagine şi text. 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ă. Dar de ce a fost preferat HTML pentru publicaţii pe Web. deşi foloseau aceleaşi convenţii pentru limbaj. taburi. Chiar dacă numele sugerează o „solicitare de comentarii“ asupra unui subiect (ceea ce constituie. Născut în urmă cu aproximativ 30 de ani. suport pentru legături hypertext şi uşurinţă în a scrie navigatoare pentru vizualizarea documentelor. Cele mai răspîndite sînt extensiile Netscape şi Internet Explorer.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. operare şi management a Internetului şi a protocoalelor şi serviciilor legate de acesta unor subcomitete. şi modalitatea principală de dezvoltare a acestor documente – prin 21 . Subgrupul care se ocupa (şi se ocupă şi acum) cu dezvoltarea şi implementarea protocoalelor este IETF .w3. Al doilea este că permite formatarea textului ASCII cu tag-uri în format ASCII. dar era dependent de autorii paginilor HTML şi producătorilor de echipamente care. grupuri de lucru şi organizaţii de lucru pe care le controla. într-o tentativă de a rezolva unele probleme ivite la transportul documentelor între diferite computere. de altfel. precum şi reţeaua Internet a Statelor Unite era în acea perioadă IAB – Internet Arhitecture Board. standardizarea diverselor versiuni fiind însă deosebit de anevoioasă datorită lipsei consensului. Cele mai importante modificări şi îmbunătaţiri sînt aduse însă de HTML 4. formule matematice. formule matematice. cînd pentru realizarea publicaţiilor electronice există mai multe tehnologii? Primul motiv este simplitatea. Acesta este alcătuit dintr-un comitet director (care raportează la IAB) şi o serie de grupuri de lucru. Acesta delega responsabilităţile de dezvoltare. standardele arhitecturale ale Internetului. Extensiile. Acestea primesc coduri numerice prin intermediul cărora sînt referite ulterior. limbajul hypertext a evoluat încet.oriunde pe Net.0) a adus o contribuţie deosebită la realizarea unei interactivităţi reale prin intermediul formularelor (forms). care au apărut în număr mare în ultima vreme. HTML din prima generaţie este înţeles de primele navigatoare (modul text).Internet Engineering Task Force. a condus la răspîndirea sa foarte rapidă.

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 RFCurile şi IETF sînt autorităţile supreme. RFC-urile se pot obţine de pe site-ul ds.internic.net (organizate după numărul ataşat fiecărui RFC) sau de pe alte site-uri care oferă posibilităţi extinse de căutare/prelucrare, cum ar fi, de exemplu, site-ul de la adresa http://www.cis.ohio-state.edu/hypertext/information/rfc.html. Organismul care se ocupă (şi) cu standardizarea limbajului HTML (din noiembrie 1995) se numeşte „The World Wide Web Consortium (W3C)“ şi include CERN, universitatea MIT (Cambridge, Massachusetts), precum şi alte organizaţii. În afara HTML, W3C are „custodia“ şi a protocolului HTTP, precum şi a altor produse şi standarde ce se referă la Web. Filozofia W3C se bazează pe promovarea interoperabilităţii în World Wide Web. Aceasta necesită standarde. Aprobarea şi în special acceptarea unui standard este însă un proces extrem de mare consumator de timp, cu atît mai mult cu cît ambiţiile sînt mai mari (ISO a abandonat modelul celor 7 nivele după ce mulţi ani a încercat să-l impună). Plecînd de la păţaniile predecesorilor, pionierii Webului au împămîntenit obiceiul de a-şi construi singuri standarde şi nu de a le importa. Esenţa filozofiei W3C este implementată în grupurile de lucru (Working Group), un comitet mic de specialişti care se întîlnesc sau discută în teleconferinţe pînă la atingerea unui consens. W3C are 18 astfel de grupuri, fiecare cu 18-25 membri provenind de la orice companie ce are interese în subiectul abordat de respectivul grup. Se ajunge astfel ca rivalii să stea alături şi să coopereze, conducînd în cele din urmă la o acceptare mult mai rapidă din partea pieţii. Durata de viaţă a unui astfel de standard (unei specificaţii stabilită în acest mod) dă de fapt măsura autorităţii organizaţiei W3C.0 Stadiile prin care trece un standard elaborat de W3C sînt: • • • • orice standard îşi începe aventura ca W3C Note de aici este preluat de către un grup particular de lucru (Working Group) şi este discutat pînă cînd se atinge consensul în acest moment este publicat ca propunere (Working Draft) şi acum oricine poate face comentarii în momentul în care se obţine o susţinere şi un consens suficient de larg, directorul W3C (acum este Time Berners-Lee) decide dacă specificaţia este gata să devină propunere de recomandare (Proposed Recommendation)

22

urmează o perioadă de 6 săptămîni în care toţi membrii W3C au şansa să voteze această propunere de recomandare; votul nu este obligatoriu şi se poate vota în 4 moduri diferite: • da • da, sub rezerva unor îmbunătăţiri • nu, pînă cînd anumite sarcini nu sînt îndeplinite • nu, specificaţia trebuie abandonată

• •

charta W3C stipulează necesitatea obţinerii consensului complet, astfel că fiecare vot trebuie să fie un da fără rezerve dacă toţi paşii anteriori au fost îndepliniţi, specificaţia trebuie aprobată în final de Director şi se publică sub forma unui standard (W3C Recommendation)

HTML 2.0 a fost publicat ca standard (versiune „oficială“) sub forma Request for Comments RFC 1866 în noiembrie 1995 şi reprezintă eforturile de codificare şi standardizare ale Internet Engineering Task Force. Poate fi preluat de la adresa ftp://ds.internic.net/rfc/rfc1866.txt A urmat apoi propunerea (draft) HTML 3.0 (în septembrie 1995), în mare măsură bazat pe HTML+ (apărut în 1993) care, deşi nu a fost adoptată ca standard a dus la adoptarea a numeroase îmbunătăţiri. Unul dintre motivele care au condus la neacceptarea draftului a fost marimea considerată exagerată a acestuia. De aceea următoarele versiuni au fost şi vor fi introduse într-un mod modular. Această versiune se poate prelua de la adresa http://www.w3.org/MarkUp/html3/CoverPage. Ea a venit după ce Netscape începuse să introducă o serie de noi taguri şi atribute care nu erau complet specificate (versiunea aceasta de HTML fiind cunoscută sub numele de cod Mozilla), conducînd în acest fel la o implementare neuniformă în alte browsere. Eforturile grupului de lucru asupra HTML din cadrul World Wide Web Consortium din această perioadă îndreptate spre eliminarea inconsistenţelor între specificaţiile diverselor firme/browsere au avut ca rezultat apariţia standardului (cu numele de cod Wilbur) HTML 3.2, în 11 ianuarie 1997, acestea putînd fi accesate la adresa http://www.w3.org/TR/REC-html32. Împreună cu W3C au lucrat la aceste specificaţii IBM, Microsoft, Netscape Communications Corporation, Novell, SoftQuad, Spyglass şi Sun Microsystems. Această versiune este o aplicaţie SGML ce se conformează standardului internaţional ISO 8879 ale cărui specificaţii se află la adresa http://www.iso.ch/cate/d16387.html. Ca aplicaţie SGML, sintaxa documentelor este definită de combinaţia dintre o declaraţie SGML (SGML declaration) şi definirea tipului documentului (document type definition - DTD). Versiunea HTML 4.0 a devenit o recomandare (standard) W3C la 18 decembrie 1997 (avînd numele de cod Cougar) şi poate fi accesată la adresa http://www.w3.org/TR/REC-html40. Şi această versiune este o aplicaţie SGML ce se conformează standardului internaţional ISO 8879 ale cărui specificaţii se află la adresa http://www.iso.ch/cate/d16387.html. Ca aplicaţie SGML, specificaţia HTML 4.0 include o declaraţie SGML (1 SGML declaration), trei definiţii ale tipului documentului (3 document type definition - DTD) şi o listă de referinţe la caractere. În momentul apariţiei acestui standard, W3C recomandă autorilor producerea de documente HTML 4.0, dar pentru motive evidente de compatibilitate cu versiunile anterioare, W3C recomandă uneltelor ce interpretează şi suportă 4.0 să continue să suporte şi HTML 3.2, precum şi HTML 2.0. În ianuarie 1999 există şi propunerea (draftul) HTML 5.0. Întreaga comunitate a Internetului este de acord că documentele dezvoltate cu HTML trebuie să fie identice în diversele browsere şi pe diversele platforme ale Internetului. Interoperabilitatea va

23

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

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

Revoluţia HTML 4.0.
Elementul esenţial diferit adus de versiunea 4.0 faţă de versiunea 3.2 este posibilitatea separării structurii unui document de prezentarea lui prin introducerea „stilurilor de documente“ (style sheet). Utilizînd limbajul HTML pentru descrierea structurii unui document şi style sheet-urile pentru a sugera prezentarea acestuia, autorii obţin mult mai uşor independenţa de periferic/computer/platformă hard-soft care a făcut HTML-ul atît de popular. Un document cu o structură complexă poate fi prezentat în diferite moduri pe medii diferite, permiţînd documentului însuşi să se adapteze mai uşor noilor tehnologii (cum ar fi, de exemplu, browser-ele capabile să vorbească, cititoarelor braille, etc.). În plus separarea conţinutului de prezentare permite modificarea înfăţişării eventual chiar a unui întreg site doar prin modificarea unui style-sheet (unui document care descrie stilul). Experienţa a demonstrat că o astfel de abordare reduce dramatic costurile de deservire a unui spectru larg de platforme, facilitînd şi o întreţinere şi modificare mult mai uşoare.

24

Prin intermediul scripturilor autorii pot realiza pagini HTML dinamice (care reacţionează la acţiunile utilizatorilor) sau se pot realiza aplicaţii distribuite. pe măsura încărcării paginii. Modelul este preluat din propunerea originală a firmei Netscape. III. Mecanismul de includere a scripturilor în paginile HTML este independent de limbaj.org. Validarea documentelor HTML. astfel încît a devenit importantă suportarea diverselor tehnologii pentru a suplinii unele limitări fizice.Alte îmbunătăţiri semnificative aduse de 4. aplicaţii specializate şi alte obiecte într-un document. Tabele îmbunătăţite În această versiune se implementează un model de tabel. VI. Elementul OBJECT permite includerea imaginilor. bazat pe RFC 1942. II. Tehnologia client-side scripting. Validarea documentelor se poate face cu un serviciu special al W3C ce poate fi accesat la adresa http://validator. mai mare flexibilitate în definirea regulilor unui tabel. Autorii au acum un control sporit asupra structurii şi paginaţiei. Fiecare document trebuie validat în vederea eliminării erorilor cum ar fi lipsa ghilimelelor. Accesibilitatea Odată cu creşterea diversităţii lumii Webului. În plus afişarea tabelelor se face acum incremental. formulelor matematice. clipurilor video. se poate include un script extern sau se poate referi rezultatul execuţiei unui script. 25 . Se poate specifica limbajul scriptului. 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. elemente sau atribute scrise greşit şi structuri invalide. Documentele compuse HTML oferă acum un mecanism standard pentru a îngloba obiecte generice şi aplicaţii în documentele HTML. VII. sunetului.0 pot fi considerate şi: I. Elementul cheie îl constituie adoptarea standardului ISO/IEC 10646 ca set de caractere pentru HTML. Sînt incluse posibilităţi de definire a grupurilor de rînduri şi/sau coloane. Internaţionalizarea Această versiune a fost proiectată cu ajutorul experţilor în internaţionalizare. punctuaţie sau cerinţe specifice ale unei limbi. direcţie a textului. Aceste erori nu sînt întotdeauna vizibile în browsere deoarece fiecare le recuperează într-un mod propriu. IV. Aceste scripturi se execută pe computerul care rulează browserul Web (clientul). s-au diversificat şi capabilităţile utilizatorilor acestuia. nemaifiind necesară aşteptarea încărcării integrale a tabelelor.w3. Acest standard este cel mai complet standard ce permite reprezentarea oricăror caractere internaţionale.0 oferă posibilitatea de a prezenta documente multiple într-o singură fereastră. Model îmbunătăţit de împărţire a unui document în frame-uri Includerea frame-urilor în HTML 4. astfel încit documentele pot fi scrise în orice limbă şi transportate uşor oriunde în lume. V. Un validator verifică un document în ceea ce priveşte definiţia tipului documentului (DTD) şi nu siguranţa legăturilor din document.

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). ISO-8859-2/ISO Latin 2 (care suportă alfabetul chirilic). iar aceştia îi interpretează ca şiruri de caractere. cum sînt litera alfabetului latin „A“. De exemplu în setul de caractere ASCII poziţiile 65. Metoda de conversie poate să mergă de la o corespondenţă simpla unu-la-unu pînă la scheme şi algoritmi complexe. 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.2. De aceea există diferite codificări ale unor părţi ale acestui repertoar pentru a-l acoperi în întregime. limbajul HTML trebuie (pentru a se supune normelor de interoperabilitate) să specifice propriul set de caractere care se foloseşte în codificarea documentelor. Acest set de caractere este echivalent caracter-cu-caracter cu setul Unicode 2. Computerele identifică aceste caractere prin poziţia acestora în repertoar. Informaţia care specifică schema de codificare trebuie să fie oferită de server. Un set de caractere al unui document constă din: • un repertoar: un set de caractere abstracte. DAR. numit Universal Character Set – UCS (Setul de caractere universal) definit de standardul ISO 10646. Reprezentarea documentelor HTML Ca aplicaţie (standard) SGML. acest set de caractere este insuficient pentru un sistem informaţional global. 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). 66 şi 67 referă caracterele A. pentru a obţine aceleaşi rezultate cu cele dorite de autorul documentului. B şi C. 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. În afara setului de caractere. aceştia trebuie să cunoască şi codificarea caracterelor (character encoding) folosită la transformarea documentului într-un stream de bytes. 26 . ş. 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.0 definit de W3C.2. 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. 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. Această conversie se potriveşte perfect cu schema activităţilor Webului: serverele trimit documentele utilizatorilor (agenţilor utilizatori) ca un stream (şir) de bytes. aşa cum este Webul. Cele mai uzuale codificări sînt: ISO-8859-1/ISO Latin 1 (utilizat pentru limbile Europei de vest). standard ce defineşte un repertoar de mii de caractere utilizate în întreaga lume. 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. 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. De aceea limbajul HTML utilizează un set de caractere mult mai comple. SHIFT_JIS (codificare japoneză). 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.a.

se consideră documentul codificat ISO-8859-1.) folosind două tipuri de elemente: caractere entităţi şi taguri. animaţie. Pentru a fixa această problemă. 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). sunete. Pentru aceasta se foloseşte un element specific al limbajului (META). între care apare textul afectat. următorul antet HTTP anunţă că pentru documentul solicitat s-a folosit schema de codificare EUC-JP: Content-Type: text/html. 2. limbajul HTML a prevăzut un atribut special (charset) ce se poate ataşa elementelor din cadrul documentului.De exemplu. Fiecare agent utilizator trebuie să ofere o metodă/mecanism de a suprapune/suprascrie o informaţie incorectă despre charsetul (codificarea) folosită. 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. dacă nu este folosită nici una dintre aceste 3 posibilităţi. Pentru cazul de mai sus: <META http-equiv="Content-Type" content="text/html. 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.3. I. de exemplu imagini. dacă nu se foloseşte nici această metodă. charset=EUC-JP Dar nu toate serverele ştiu să folosească acest parametru. Ele au efect numai asupra textului inclus între ele şi sînt de două tipuri: • de început şi au formatul <NUME> • de sfîrşit şi au formatul </NUME> Exemple de tag-uri nevide: <I>Acest text va fi afişat italic</I> <B>Acest text va fi afişat îngroşat</B> 27 . charset=EUC-JP"> Mai mult. Caracterele entităţi se folosesc la descrierea caracterelor din document care nu fac parte din setul standard ASCII. Nevide (perechi). Implicit. Tag-urile HTML Toate tag-urile au nume scrise între paranteze unghiulare <NumeTag> şi (eventual) cîteva atribute care pot lua anumite valori. documentele HTML pot include informaţii explicite despre schema de codificare folosită.

Atributele tag-urilor au la rîndul lor nume şi pot lua numai anumite valori..</A> ce indică existenţa unei „legături“ spre alt document. Exemple de tag-uri vide: <HR> Inserează o linie orizontală în locul în care apare. au efect imediat în punctul din document în care apar. 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. Formatul tag-urilor trebuie respectat cu stricteţe. Acest lucru se face de forma: <Tagl><Tag2>Textul afectat de tag</Tag2></Tagl> Exemplu: <A HREF="poza-mare. Astfel „poza-mică. Chiar dacă. primul tag este <A>. II.gif“ este imagine activă. <IMG SRC="poza. va determina serverul să-i trimită documentul aflat în fişierul „poza-mare.2.</A>. 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..gif" align="bottom"> Aici NumeTag este IMG şi specifică inserarea unei imagini. Valoarea trebuie inclusă în ghilimele. pentru afişarea lor corectă şi pentru a permite translatarea caracterelor speciale este necesară definirea unui set special de coduri.gif"> Specifică inserarea unei imagini. NumeAtribut2 este ALIGN. NumeAtribut1 este SRC şi are ca valoare calea şi numele fişierului imagine (poza. numite caractere entităţi (referinţe). selectabilă. aproape toate caracterele de control ASCII sînt ignorate cînd apar în textul HTML (de pildă ENTER sau TAB). ele trebuie separate prin spaţiu. Tag-urile pot fi utilizate şi în interiorul altor tag-uri. în raport cu rîndul). în general.gif"><IMG SRC="poza-mică. 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. Vide (singulare). Tag-urile şi atributele pot fi editate atît cu caractere mici cît si cu caractere mari. Activarea ei de către cel care priveşte documentul cu un navigator. şi au acelaşi efect. Forma în care sînt editate atributele este NUME="valoare". Dacă în tag există mai multe atribute.gif“.gif"></A> În acest exemplu.gif). care pot fi incluse în documentele HTML pentru reprezentarea acestor caractere speciale. specificată ca valoare a atributului HREF.. priveşte alinierea imaginii şi are ca valoare BOTTOM (jos. iar al doilea tag este <IMG> ce indică inserarea în document a unei imagini. datorită faptului că este cuprinsă între tag-urile <A>. Formatul general al unui tag ce are şi atribute este următorul: <NumeTag NumeAtribut="ValoareAtribut">Textul afectat de tag</NumeTag> Exemplu: <IMG src="poza.. 28 .

Caracterele entităţi sînt predefinite şi pot lua una din două forme posibile: • entităţi nume (referinţe caractere) • entităţi numere (referinţe numerice) &nume; &#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)

29

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

Caractere neafişabile Un agent utilizator poate să nu fie capabil să afişeze (sau să ofere utilizatorului) corect (sau inteligibil) toate caracterele dintr-un document. Aceasta se poate întîmpla cînd, spre exemplu, nu este disponibil un anumit font, un caracter are o valoare ce nu poate fi exprimată de codificarea internă a agentului utilizator, etc... Deoarece sînt prea multe cauzele ce pot duce la o astfel de situaţie nu se impune ca fiind obligatoriu nimic, DAR fiecare agent utilizator trebuie: • • să adopte un mecanism clar de alertare a utilizatorului (de exemplu afişarea unui caracter sugestiv; în astfel de cazuri Netscape Navigator foloseşte semnul întrebării) să afişeze reprezentarea numerică a acelui caracter în cazul în care în document acesta apare ca entitate numerică

30

Capitolul 3. Structura documentelor HTML

3.1. Structura generală a unui document HTML
Întreaga dezvoltare a HTML s-a făcut în ideea creşterii ulterioare a limbajului fără sacrificarea simplităţii. Există puţine reguli generale de care trebuie să se ţină cont în construirea unui document HTML. Documentele HTML (4.0) au structura generală: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <HTML> < HEAD> <TITLE>Titlul documentului</TITLE> ... alte declaraţii/informaţii despre document... </HEAD> <BODY> ...Textul documentului propriu-zis... </ BODY> </HTML> Notă importantă: Dacă se foloseşte un document multiplu definit cu FRAMESET, atunci elementul FRAMESET înlocuieşte elementul BODY. Un document HTML (uneori referit şi ca pagină HTML) este structurat în trei părţi: 1. Începutul unui document HTML este o declaraţie (<!DOCTYPE... >) care specifică versiunea limbajului HTML căruia i se conformează acesta. Restul documentului este conţinut în cadrul elementului de limbaj (tagului) <HTML>. 2. O secţiune declarativă numită antet (head) definită cu tagul <HEAD>. Aceasta conţine informaţii (declaraţii) despre document (cum ar fi titlul şi cuvinte cheie asociate cu documentul) 3. O secţiune numită conţinut (body) definită cu tagul <BODY> sau <FRAMESET> şi care înseamnă de fapt (hyper)textul documentului. Acesta este alcătuit din elemente de tip bloc şi elemente de tip inline.

31

w3. De exemplu.org/TR/REC-html40/HTMLspecial.org/TR/REC-html40/loose.0 Frameset//EN" "http://www. • • • • • • http://www.0 Frameset DTD include tot ceea ce este în declaraţia anterioară la care se adaugă documentele multiple (create frame-uri).ent http://www.dtd"> Adresele ce apar în fiecare declaraţie permit agenţilor utilizatori să acceseze (şi să descarce) DTDul documentului (descrierea formală) şi orice set de caractere de care are nevoie.org/TR/REC-html40/strict.w3.org/TR/REC-html40/frameset. dar nu eronate!).ent DTD strict (implicit) DTD Transitional DTD pentru documente cu setul de caractere Latin-1 setul de caractere Symbol setul de caractere Special 32 .dtd"> • HTML 4.0//EN" "http://www. Pentru astfel de documente se foloseşte următoarea declaraţie de tip: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.dtd http://www.0 poate specific 3 DTD.ent http://www. Pentru astfel de documente se foloseşte următoarea declaraţie de tip: <!DOCTYPE HTML PUBLIC "-//W3C//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.w3.w3.org/TR/REC-html40/HTMLsymbol.1. Următoarele adrese se folosesc pentru accesarea descrierilor (DTD-urilor) şi seturilor de caractere utilizate de HTML 4.dtd"> • HTML 4.w3.dtd frameset http://www.w3.0 Transitional//EN" "http://www.0. HTML 4.org/TR/REC-html40/strict.0 Strict DTD include toate elementele şi atributele ce nu sînt „obsolete“ (inutile.org/TR/REC-html40/frameset.w3. astfel că un autor trebuie să includă una dintre următoarele declaraţii ale tipului de document: • HTML 4. Pentru astfel de documente se foloseşte următoarea declaraţie de tip: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. Declaraţia tipului documentului (document type declaration) defineşte ce DTD se foloseşte în documentul respectiv. redefinite. Elementul DOCTYPE Un document valid HTML trebuie să declare ce versiune utilizează pentru descrierea sa.org/TR/REC-html40/loose.dtd http://www.w3. depăşite) sau nu apar în documente definite cu FRAMESET.w3.org/TR/REC-html40/HTMLlat1.

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). Elementul HTML Sintaxa: <HTML>. Elementul HEAD Sintaxa: <HEAD>. DIR Conţine: • In HTML 4.0 Frameset: HEAD urmat de FRAMESET Conţinut în: • Nu se aplică.2.</HTML> Atribute posibile: • VERSION = xxx • 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: 33 . 3. 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).</HEAD> Atribute posibile: • PROFILE = uri (dicţionar de meta informaţii) • atribute de internaţionalizare: LANG...0 Strict şi Transitional: HEAD urmat de BODY • In HTML 4. Atît tagul de început cît şi cel de sfîrşit ale elementului sînt opţionale.. 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. Se foloseşte în special cu tehnica stylesheet-urilor pentru a crea un document cu text în mai multe limbi..

descrierea documentului şi style-sheet-uri asociate/utilizate. Elementul BODY Sintaxa: <BODY>. unul sau mai multe SCRIPT.. cuvinte cheie utilizabile de motoarele de căutare.. Dacă tagul de sfîrşit lipseşte primul element BODY sau FRAMESET determină sfîrşitul lui. HEAD este solicitat în toate documentele. Conţinutul acestui element (cu excepţia lui TITLE care este afişat de browsere) nu este prelucrat în mod uzual.0 Transitional: 34 . neavînd un format standard stabilit. dar tagurile sale de început/sfîrşit sînt opţionale. DEL elemente de tip bloc (nivel bloc) elemente de tip inline INS. INS.0 Strict or Transitional: HTML elemente de tip bloc (nivel bloc).• Elementul HTML Descriere: Acest element conţine informaţii despre document (cum ar fi titlul său. DEL (imaginea de background a documentului) (culoarea de background a documentului) (culoarea textului documentului) (culoarea link-urilor documentului) (culoarea link-urilor deja vizitate ale documentului) (culoarea link-urilor active ale documentului) (documentul a fost încărcat de browser/agentul utilizator) (documentul a fost parăsit de browser/agentul utilizator) (vezi nota de mai jos) Conţine: În HTML 4. Este urmat de BODY în documentele Strict şi Transitional şi de FRAMESET în cele Frameset.</BODY> Atribute posibile: • • • • • • • • • • BACKGROUND = URI BGCOLOR = Color TEXT = Color LINK = Color VLINK = Color ALINK = Color ONLOAD = Script ONUNLOAD = Script atribute comune În HTML 4. 4. Atributul optional PROFILE oferă locaţia în care se află un profil de metadate.0 Strict: • • • • • • Conţinut în: • In HTML 4. Un profil este un fişier ce defineşte proprietăţile ce pot fi utilizate de elementele META şi LINK din header.

În documentele ce conţin frame-uri.0 de tip Transitional sînt permise şi elemente de tip inline direct în cadrul elementului BODY. BODY acceptă următoarele atribute de tip eveniment utilizate în tehnologia client-scripting: • • ONLOAD. ONMOUSEDOWN. ONMOUSEMOVE. BODY poate avea atribute care specifică background-ul (fundalul) şi culoarea documentului sau a unor elemente din cadrul său. În plus faţă de evenimentele ce pot fi generate de orice element. chiar a poziţiei şi modalităţii de extindere pe întreaga suprafaţă ocupată de document. Style-sheet-urile (stilurile de documente) permit o mai mare flexibilitate în specificarea imaginii de background. Această metodă este însă considerată depăşită.• In HTML 4. apare atunci cînd documentul este părăsit. preferîndu-se utilizarea stilurilor de documente (style-sheet). dacă este utilizat. ONKEYUP. ONUNLOAD. ONKEYDOWN. ONMOUSEOUT. dar tagurile de început/sfîrşit sînt opţionale. Dacă acest atribut este setat se recomandă utilizarea şi a atributelor BGCOLOR. Dacă unul dintre atributele ce se referă la link-uri este setat. TEXT. LINK. 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. Aceste culori pot fi însă suprapuse de setările din browsere. ONDBLCLICK. BODY trebuie obligatoriu conţinut în elementul NOFRAMES. sau dacă imaginea să se deplaseze (scroll) sau nu cu documentul. TYTLE atribute de internaţionalizare: LANG..0 Frameset: NOFRAMES Descriere: Acest element conţine de fapt corpul (conţinutul) documentului (paginii) HTML.. atunci se recomandă folosirea tuturor pentru a se asigura ca diferă culorile diverselor tipuri de legături. STYLE. etc. BODY este cerut de documentele în care nu apar frame-uri. Conţinutul documentului apare în cadrul elementelor de tip bloc sau în corpul elementului SCRIPT. DIR evenimente scriptabile (ce pot fi tratate cu ajutorul scripturilor): ONCLICK. ONMOUSEUP. CLASS. ONMOUSEOVER. iar în cazul documentelor HTML 4. Elementele de tip bloc şi cele de tip inline sînt definite mai departe. BGCOLOR se foloseşte pentru fundalul imaginilor neîncărcate. apare atunci cînd documentul a fost încărcat. ONKEYPRESS. VLINK şi ALINK pentru a fi siguri că documentul poate fi citit. 35 . Atributul BACKGROUND sugerează o imagine de fundal care va fi folosită pentru document (prin extindere pe verticală şi/sau orizontală).

dar nerecomandată ca stil) de pagină HTML care ilustrează utilizarea atributelor depăşite este prezentată în continuare. iar legăturile iniţial roşii.. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.Exemple: 1..org/TR/REC-html40/loose. active ca fiind de culoare fuchsia. 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ă. Culoarea de background se stabileşte ca fiind albă. 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. 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. document body.dtd"> <HTML> <HEAD> <TITLE>Exemplu depasit</TITLE> </HEAD> <BODY bgcolor="white" text="black" link="red" alink="fuchsia" vlink="maroon"> .. Oh. textul negru. iar cele deja vizitate maron..w3. </BODY> </HTML> 36 . Oh.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.</FRAMESET> Atribute posibile: • • • • • ROWS = MultiLengths COLS = MultiLengths ONLOAD = Script ONUNLOAD = Script atribute comune • FRAMESET (unul sau mai multe elemente) • FRAME (unul sau mai multe elemente) • NOFRAMES (un singur element. Elementul FRAMESET Sintaxa: <FRAMESET>.. Orice modificare de stil se face fără a accesa documentul HTML..w3. Cea mai flexibilă soluţie este dată de posibilitatea de a specifica un stil definit într-un alt fişier (stiluri externe). color: black} A:link { color: red } A:visited { color: maroon } A:active { color: fuchsia } </STYLE> </HEAD> <BODY> . </BODY> </HTML> 3.....dtd"> <HTML> <HEAD> <TITLE>Un exmplu cu stiluri incluse</TITLE> <STYLE type="text/css"> BODY { background: white. document body.css"> </HEAD> <BODY> .org/TR/REC-html40/strict. document body. </BODY> </HTML> 5.0//EN" "http://www... acelaşi efect se poate obţine şi astfel: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. opţional) Conţinut în: • HTML (lungimile rîndurilor) (lungimile coloanelor) (toate frame-urile au fost încărcate) (toate frame-urile au fost eliminate/părăsite) Conţine: 37 ..w3. Prin folosirea style-sheet-urilor (stilurilor).org/TR/REC-html40/strict.2.dtd"> <HTML> <HEAD> <TITLE>A study of population dynamics</TITLE> <LINK rel="stylesheet" type="text/css" href="smartstyle..

html">Photo 2</A> (<A HREF="Row2_Column2. Cînd se utilzează dimensiuni în pixeli. O dimensiune relativă se exprimă ca i*. Atributele ROWS şi COLS definesc dimensiunile exacte ale fiecărui frame din set.html"> <FRAME NAME="Caption1" SRC="Row2_Column1. Valorile specificate pentru ROWS dau înălţimea fiecărui rînd. împreună cu elementul opţional NOFRAMES pentru a oferi un conţinut alternativ browser-elor care nu suportă frame-urile (sau le au dezactivate). Dimensiunile în pixeli trebuie folosite doar cînd frame-urile conţin în principal imagini sau alte obiecte cu o dimensiune fixă (în pixeli). din partea de sus a ecranului înspre baza acestuia.30%" COLS="33%. Într-un document ce conţine frame-uri. un set de frame-uri definit cu ROWS="3*.Descriere: Elementul FRAMESET este un container de frame-uri folosit pentru a diviza fereastra în subspaţii dreptunghiulare numite frame-uri. De exemplu. <FRAMESET ROWS="70%. Fiecare atribut are formatul unei liste de lungimi (cu elemente separate de virgulă) care specifică în pixeli. de exemplu. acestea trebuie combinate întotdeauna cu lungimi relative pentru a acoperi diferitele dimensiuni ale ferestrelor (determinate de diferitele rezoluţii la care se utilizează ecranele). unde i este un întreg.html"> <NOFRAMES> <BODY> <H1>Table of Contents</H1> <UL> <LI> <A HREF="Row1_Column1. elementul FRAMESET exterior ia locul lui BODY şi urmează imediat lui HEAD.html">Caption</A>) </LI> <LI> <A HREF="Row1_Column2.34%"> <FRAME NAME="Photo1" SRC="Row1_Column1. o legătură către frame-ul principal). 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).html"> <FRAME NAME="Caption2" SRC="Row2_Column2. Atributul COLS defineşte lăţimea fiecărei coloane.html"> <FRAME NAME="Photo2" SRC="Row1_Column2. valoarea implicită a atributului este 100%. Elementul FRAMESET conţine unul sau mai multe elemente FRAMESET sau FRAME.html">Photo 1</A> (<A HREF="Row2_Column1.33%. Dacă lipseşte întregul se consideră egal cu 1. Exemple: Exemplul următor determină împărţirea ecranului în 2 rînduri şi 3 coloane.html">Photo 3</A> 38 . datorită capacităţii acesteia de adaptare la diferitele dimensiuni de ferestre.. începînd de la stînga la dreapta.*" va avea primul rînd cu o înălţime de 3 ori mai mare decît al doilea rînd. ca procent sau ca lungime relativă dimensiunea (lungimea sau lăţimea) fiecărui frame.html"> <FRAME NAME="Photo3" SRC="Row1_Column3.html"> <FRAME NAME="Caption3" SRC="Row2_Column3. Dacă ambele atribute sînt specificate.html">Caption</A>) </LI> <LI> <A HREF="Row1_Column3. 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. Dacă ROWS sau COLS lipsesc. Se recomandă însă să existe întotdeauna şi să ofere informaţie utilă pentru astfel de cazuri (cel puţin. Preferată este însă exprimarea în procente şi dimensiuni relative.

2 Reference</A></LI> <LI><A HREF="reference/css/">CSS Guide</A></LI> </UL> <P> <IMG SRC="ad. 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.100"> <FRAMESET COLS="40%.html">Caption</A>) </LI> </UL> </BODY> </NOFRAMES> </FRAMESET> Se remarcă utilizarea elementui NOFRAMES pentru cazul în care frame-urile nu pot fi afişate. <FRAMESET ROWS="*. 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.*"> <FRAME NAME="Menu" SRC="nav.gif" ALT="Advertising"> </P> </BODY> </NOFRAMES> </FRAMESET> 39 .0 Reference</A></LI> <LI><A HREF="reference/wilbur/">HTML 3.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.(<A HREF="Row2_Column3.html" TITLE="Menu"> <FRAME NAME="Content" SRC="main.

etc) 1. cuvinte cheie utilizate de motoarele de căutare şi alte date care nu sînt considerate conţinut al documentului. cum ar fi titlul documentului. Exemplu: 40 .3. imagini. browser-ele afişează titlul documentului încărcat în caption-line (linia de titlu) a browserului. Structura header-ului unui document HTML (elementul HEAD) Headerul (antetul) unui document (definit cu elementul HEAD) conţine informaţii despre documentul curent.</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.2. De exemplu. Elementul HEAD poate conţine următoarele elemente: • • • • • • • • TITLE BASE STYLE LINK META scopuri) SCRIPT client) ISINDEX OBJECT – stabileşte titlul documentului – defineşte adresa (URI) de bază a documentului – defineşte stilurile de document (style-sheet) folosite în document – defineşte relaţiile documentului propriu-zis cu alte documente auxiliare – defineşte un set de „metadate“ (date auxiliare utilizate în diverse alte – defineşte un script client-side (secvenţă de instrucţiuni ce se execută în – defineşte textul prompterului utilizat la preluarea datelor de la utilizator – permite includerea unor obiecte externe (sunete. 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. 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.. animaţii.. Un titlu bun trebuie să fie scurt şi specific conţinutului documentului. dar nu poate conţine alte elemente de marcare. Lungimea limită a unui titlu se recomandă a fi 60 caractere. Conţine text şă/sau caractere entităţi. alături de numele browser-ului însuşi. Fiecare document trebuie să aibă exact 1 titlu (un singur element TITLE în HEAD). Elementul TITLE Sintaxa: <TITLE>.

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

<STYLE>...</STYLE> Atribute posibile: • TYPE = ContentType (tipul conţinutului) • MEDIA = MediaDesc (tipul de media căruia i se aplică stilul) • TITLE = text (titlul stilului - style sheet) • atribute de internaţionalizare (pentru TITLE) Conţine: • An embedded style sheet Conţinut în: • HEAD Descriere: Acest element înglobează (inserează) în document un stil (style sheet). Într-un HEAD pot fi conţinute oricîte elemente STYLE. Atributul TYPE se foloseşte pentru a specifica tipul de media (în standardul Internet). Pentru stilurile definite de metoda Cascading Style Sheets atributul TYPE are valoarea text/css. Atributul opţional TITLE dă un titlu style-sheet-ului. Fără acesta, style-sheet-ul respectiv este aplicat întotdeauna cînd sînt active stilurile pentru documentul respectiv. Cu acest atribut se pot activa sau dezactiva style-sheet-uri individuale. Însă nu toate browser-ele implementează această facilitate. Atributul MEDIA specifică media pe care acest stil se aplică. Aceasta permite autorilor restricţionarea unui stil la anumite dispozitive de ieşire. Valoarea acestui atribut este o listă de nume de medii separate prin virgulă. HTML 4.0 defineşte următoarele nume de medii (literele mari/mici sînt diferite): • • • • • • • • • screen (implicit), display-urile uzuale (fără paginare); print, ieşirea pe imprimantă; tty, display-uri ce folosesc caractere de dimensiune fixă (ca cele folosite de Lynx); tv, dispozitive tip televizor (rezoluţie mică şi derulabilitate redusă); projection, pentru proiectoare; handheld, dispozitive handheld (de ţinut în mînă), caracterizate de un disply mic, monocrom şi cu bandă limitată; braille, dispozitive tactile braille tactile; aural, pentru sintetizatoare de voce; all, pentru toate dispozitivele.

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

42

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

43

REL=StyleSheet specifică un stil persisitent sau preferat. Un stil poate fi specificat prin intermediul mai multor style-sheet-uri (fişiere de descriere a stilurilor). Atributul TARGET se foloseşte în cazul documentelor definite cu frame-uri. în timp ce REL="Alternate StyleSheet" defineşte un stil alternativ. însă). Absenţa atributului TITLE indică un astfel de stil.css" TITLE="Contemporary" TYPE="text/css"> <LINK REL=StyleSheet HREF="tables. ca în exemplu următor: <LINK REL=StyleSheet HREF="basics. Are aceleaşi valori ca la elementul STYLE. aplicat ca şi stil preferat. un document cu informaţii de copyright şi informaţii despre autor. and UTF-8).com" TITLE="Feedback"> Elementul LINK se poate folosi şi pentru a aplica un stil extern. Cu REL=StyleSheet autorii restricţionează un stil la un anumit dispozitiv. Relaţiile comune între documente includ şi următorul sau precedentul într-o secvenţă.0 Reference"> HREF="/copyright. Valoarea lui REL şi REV este o listă de linkuri separate prin spaţii.html" HREFLANG=ja CHARSET="SHIFT_JIS" TITLE="Japan version"> <LINK REL=Alternate HREF="index. Traduceri ale unei pagini pot fi identificate folosind REL=Alternate împreună cu atributul HREFLANG.. Un autor nu poate specifica mai mult de un astfel de stil. Un stil persisitent este acela care se aplică întotdeauna cînd style sheet-urile sînt active. Utilizatorul poate alege să schimbe stilul preferat cu unul dintre cele alternative.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.html" TITLE="META . 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.Metadata"> HREF=". Atributul MEDIA specifică media pentru care sînt proiectate resursele legate de acest document. 44 . dacă broeserul permite acest lucru (nu toate o şi fac. SHIFT_JIS.html" TITLE="BASE .indică faptul că documentul curent este o subsecţiune a lui "bar. Un stil alternativ este indicat de REL="Alternate StyleSheet".html" TITLE="Copyright Notice"> HREF="mailto:lp@foo. Pentru a se combina style-sheet-urile trebuie să folosească acelaşi TITLE.ja.html". en-US pentru American English şi ja pentru Japoneză) şi schema de codificare a legăturii (de exemplu ISO-8859-1.Document Base HREF="meta.html" HREFLANG=fr LANG=fr TITLE="Version française"> <LINK REL=Alternate HREF="index.css" TITLE="Contemporary" TYPE="text/css"> <LINK REL=StyleSheet HREF="forms./" TITLE="HTML 4. Combinaţia dintre REL=StyleSheet şi TITLE specifică un stil preferat. Relaţia legăturii Alternate defineşte o versiune alternativă a documentului. Un document ar putea defini aceste relaţii astfel: <LINK REL=Prev URI"> <LINK REL=Next <LINK REL=Start <LINK REL=Copyright <LINK REV=Made HREF="base.fr. Un stil preferat este acela care se aplică automat. Atributele opţionale HREFLANG şi CHARSET ale lui LINK descriu limba (de exemplu en pentru English. pagina de start într-o colecţie.css" TITLE="Contemporary" TYPE="text/css"> Aici se combină 3 style-sheet-uri pentru a forma stilul "Contemporary".

football"> Pentru a evita ca aceste motoare să trunchieze descrierea documentului. Motoarele de căutare procesează de obicei primele 1000 de caractere. Atributul opţional SCHEME defineşte formatul proprietăţii respective. dar făra taguri. stiinţa. aceasta trebuie să fie sumară (să nu depăşească 200 de caractere). Atributul NAME defineşte un nume de proprietate. De exemplu. 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. 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. iar dacă un cuvînt se repetă prea des există pericolul ca documentul să nu fie indexat. CONTENT poate conţine text şi caractere entitate. craiova. Cuvintele cheie sînt separate prin virgulă şi literele mari sînt diferite de cele mici. De exemplu: <META NAME="description" CONTENT="Pagina clubului de fotbal Universitatea Craiova"> <META NAME="keywords" CONTENT="U Craiova. soccer. Valoarea asociată a lui CONTENT este o listă de directive separate prin virgulă: • • • index – specifică posibilitatea ca această pagină sa fie indexată noindex – indică neindexarea aceastei pagini follow – indică motoarelor de căutare să urmeze linkurile din pagină 45 . descrierea documentului şi autorul său. Pot apare oricîte elemente META în cadrul elementului HEAD. în timp ce CONTENT dă valoarea corespunzătoare a acelei proprietăţi. Nu există o listă standard de metadate/proprietăţi (fiecare autor poate defini orice metadată îi este necesară). 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).5.

dar clienţii (browser-ele) recunosc această caracteristică (faptul că aparţin headerului HTTP) chiar dacă nu este trimisă în antetul protocolului. setarea codificării unui document (la setul de caractere japonez) <META HTTP-EQUIV="Content-Type" CONTENT="text/html. De remarcat că nu toate browserele suportă această proprietate. follow (implicit) none – echivalent cu noindex.• • • nofollow – indică motoarelor de căutare să NU urmeze linkurile din pagină all – echivalent cu index. pentru utilizatorii ce şi-au marcat cu bookmark pagina mutată. următorul element META le spune motoarelor de căutare să nu indexeze pagina. URL=http://www. astfel că e preferată şi oferirea unei alte modalităţi de a încărca pagina respectivă. însă.alta. 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. dar să urmărească link-urile din pagină: <META NAME=robots CONTENT="noindex.alta. setarea datei de expirare a unui document <META HTTP-EQUIV=Expires CONTENT="Sun. Elementul SCRIPT Sintaxa: <SCRIPT>. Această proprietate este transformată şi transmisă de unele servere HTTP (nu toate1). Exemple (a se vedea şi descrierea protocolului HTTP): 1. browserul trebuie să încarce pagina de la adresa www. 6. 22 Mar 1998 16:18:35 GMT"> 2. 5. că NU toate motoarele de căutare suportă această proprietate. follow"> De remarcat. setarea limbii în care sînt descrise stilurile inline din document <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> 4... 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.com. </SCRIPT> Atribute posibile: • TYPE = ContentType (tipul conţinutului limbajului scriptului) • LANGUAGE=CDATA (numele limbajului din script) • SRC=URI (locaţia scriptului extern) • CHARSET=Charset (setul de caractere folosit de scriptul extern) • DEFER (execuţia scriptului poate aştepta) 46 . 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). nofollow De exemplu. setarea limbajului scripturilor inline din document ca fiind javascript <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> 3. 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.com/"> După 10 secunde de la încărcarea paginii curente.

Această tehnică permite o mai mare interactivitate într-un document prin acţiunile ce pot fi întreprinse ca răspunsuri la evenimente utilizator. Nu toate browserele suportă tehnica scripturilor client-side. un script poate fi folosit la verificarea elementelor introduse de utilizator într-un formular ÎNAINTE ca acestea să fie transmise. Exemplu: <SCRIPT TYPE="text/javascript" SRC="foo.1" dar va ignora scripturile cu LANGUAGE = "JavaScript1.2" sau LANGUAGE="VBScript". Mai mult. şi Opera versiunea 3. Atributul SRC permite autorilor să refolosească codul prin specificarea unui script extern. Browser-ele vor ignora scripturile cu valori ale acestui atribut pe care nu le suportă. De exemplu. Atributul TYPE specifică tipul mediului ce conţine limbajul de scriptare. acestea trebuie să repete aceste verificări pentru a se acoperi şi cazurile de invalidare/nesuportare a scripturilor client-side. block-level elements Descriere: Acest element include un script de tip client-side în document.0. Scripturile ce utilizează acest atribut nu trebuie să genereze nici un conţinut al documentului şi nu trebuie să răspundă la evenimente utilizator ce pot apare în timp ce documentul se încarcă (de 47 . oferindu-se în acest mod posibilitatea de notoficare imediată a utilizatorului în caz de eroare. Un script embedded (înglobat) este dat ca şi conţinut al elementului SCRIPT.0 şi superioară. în caz contrar ignorîndu-l pe acesta. inline elements. în cazul unor validări ale unor elemente ce se transmit unor cgi-uri. Mai mult. Dacă browser-ul nu poate încărca scriptul extern va executa scriptul embeded. cel care specifică numele limbajului folosit. adică text/javascript. executat NUMAI DACĂ foo.0 şi superioară. fiecare cu bug-urile sale. Majoritatea browser-elor suportă însă numai atributul depăşit LANGUAGE.js" CHARSET="ISO-8859-1"> <!— // script embedded. Atributul opţional CHARSET oferă metoda de codificare (setul de caractere) al scriptului extern (tipic ISO-88591). Exemple ale valorilor suportate de LANGUAGE includ JavaScript.1. JavaScript1. de exemplu). În acest scop se foloseşte elementul NOSCRIPT care oferă posibilitatea înglobarii în document a acţiunilor ce trebuie executate în acest caz. Microsoft Internet Explorer versiunea 3.0 şi superioară. trebuie reţinut că diversele browsere suportă DIVERSE VARIANTE ale limbajelor utilizate pentru scrierea scripturilor. Atributul DEFER indică posibilitatea ca browserul să poată aştepta parcurgerea scriptului pînă cînd şi restul documentului a fost prelucrat (afişat. Browser-ele cele mai cunoscute ce suportă scripturile client-side sînt Netscape Navigator versiunea 2. Implicit se presupune ca este JavaScript 1. and VBScript.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. Netscape Navigator 3. De exemplu.Conţine: • Înglobează un script Conţinut în: • HEAD. iar unele dintre cele care o suportă permit dezactivarea ei la solicitarea utilizatorului.0 va executa scripturile cu LANGUAGE = "JavaScript" sau LANGUAGE="JavaScript1.

chiar dacă browserele nu îl suportă. Elementul SCRIPT poate apare de un număr oarecare de ori în headerul sau corpul unui document (HEAD sau BODY). Acesta poate fi util în cazul întîrzierii scripturilor ce preîncarcă imagini. ca în exemplul acesta: document. se permite plasarea comentariilor în jurul conţinutului scriptului embedded. // 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 „/“). În mod tipic este amplasat în HEAD. 48 . Pentru a evita aceste cazuri. De exemplu: <SCRIPT TYPE="text/javascript"> <!-. Din punct de vedere practic. prima apariţie a lui "</" urmat de orice literă este considerat tag de sfîrşit pentru elementul SCRIPT.exemplu transmiterea unui formular).write("<\/P>").write("foo").comment to end of line document. JavaScript permite folosirea caracterului \ (backslash) pentru a evita terminarea prematură a elementului SCRIPT. dacă nu generează conţinut pentru corpul documentului.2 nu recunosc elementul SCRIPT şi îi tratează conţinutul ca şi cum ar fi HTML normal. în general. Autorii trebuie să evite utilizarea şirurilor de tipul "</P>" în scripturile embedded. Browserele dinaintea lui HTML 3.

CENTER. FORM. 8. Elementul OBJECT Sintaxa: <OBJECT>. DEL. DD. INS. OBJECT.0 de către elementul INPUT. BODY. FIELDSET.7. DATA. ARCHIVE) WIDTH=Length (lăţimea obiectului) HEIGHT=Height (inălţimea obiectului) NAME=CDATA (numele pentru transmiterea formularelor) USEMAP=URI (imaginea senzitivă/image map de tip client-side) TYPE=ContentType (tipul conţinutului obiectului) CODETYPE=ContentType (tipul conţinutului codului) STANDBY=Text (mesajul ce se va afişa în timp ce se încarcă) TABINDEX=NUMBER (poziţia în ordinea de parcurgere) DECLARE (nu se instanţiază obiectul) ALIGN=[ top | middle | bottom | left | right ] (modul de aliniere a obiectului) 49 ..</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. vezi mai sus) • atribute de internaţionalizare (vezi mai sus) Conţine: • Nimic Conţinut în: • APPLET. Este echivalent cu FORM cu un singur element de intrare de tip text. IFRAME. Elementul ISINDEX Sintaxa: <ISINDEX> Atribute posibile: • PROMPT = text (mesajul promptului) • atribute fundamentale (core atributes. BLOCKQUOTE. NOFRAMES. ISINDEX este depăşit în HTML 4. TH Descriere: Acest element defineşte o linie singulară de introducere a datelor.. HEAD. DIV. MAP. NOSCRIPT. o metodă get şi o acţiune indicînd la adresa (uri) documentului ce conţine elementul ISINDEX. Eticheta cîmpului de intrare este specificată folosind atributul PROMPT. TD. LI.

py" CODETYPE="application/x-python" STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game"> <OBJECT CLASSID="java:Yahtzee. afişind conţinutul elementului din interior (aici un text!). De remarcat că acest exemplu este compatibil şi cu versiunile anterioare care ignoră tagul OBJECT. dacă browserul îl suportă. Valorile pot fi în pixeli sau în procente relative la dimensiunea părintelui. ca alternativă extremă. Pentru browserele care nu suportă appleturile Python se oferă o alternativă cu versiunea Java. 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). elemente de tip bloc cu excepţia lui PRE Descriere: Acest element este folosit pentru a include „obiecte“ ca imagini. Este utilizat pentru a înlocui elementele mai specifice IMG şi APPLET definite în versiunile anterioare. Applet-urile Java.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. ca în exemplul următor: <OBJECT CLASSID="yahtzee. Utilizarea acestui element asigură atît o portabilitate superioară. 50 . Atributul TYPE specifică tipul suportului referit de resursa referită de DATA. precum şi extensiile proprietare (ale diferiţilor producători de browsere). applet-uri Java sau elemente VRML în documentele HTML. dacă nici acest tip de applet nu e recunoscut (şi executat) se oferă o imagine (un gif). iar CODETYPE specifică tipul suportului cerut de datele specificate de CLASSID. Majoritatea browsere-lor cer obligatoriu aceste atribute. La limită este oferit şi un text. CLASSID poate fi folositor pentru a specifica implementarea obiectului. Mai mult. se foloseşte întîi „varianta“ scrisă în Python a jocului Yahtzee.• • • • Conţine: BORDER=Length (lăţimea/grosimea marginii linkului) HSPACE=Pixels (spaţiu lăsat orizontal) VSPACE=Pixels (spaţiu lăsat vertical) atribute comune • Elemente PARAM urmate de elemente de tip bloc şi/sau inline Conţinut în: • HEAD. cît şi o compatibilitate între browsere şi versiuni. Atributele WIDTH şi HEIGHT definesc dimensiunile obiectului. Atributul DATA specifică adresa obiectului înglobat în document. Adresele relative sînt interpretate în concordanţă cu atributul CODEBASE.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game"> <OBJECT DATA="yahtzee. secvenţe video. Python şi controalele ActiveX oferă implementări pentru obiectul înglobat. cum ar fi EMBED şi BGSOUND. În acest exemplu. elemente de tip inline. Exemplul utilizează şi atributul STANDBY care afişează un text (scurt) în timpul încărcării obiectului respectiv. fiind astfel specificate cu atributul CLASSID.

Atributul ARCHIVE poate specifica o listă (cu elemente separate prin blancuri.I Have a Dream&quot.gif" ALT="You get the dice!" TITLE="Yahtzee animation"> </OBJECT> . Aceste arhive se pot crea cu utilitarul jar oferit de kitul de dezvoltare jdk.95. caz în care conţinutul său nu este afişat (ci interpretat aşa cum e descris anterior). Formatul standard de arhivă pentru Java este JAR. Exemplul următor include o secvenţă video şi un clip audio ca alternativă. 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.5. 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. speech"> <PARAM NAME=autostart VALUE=true> <PARAM NAME=hidden VALUE=true> <A HREF="mlk.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 TITLE="My Yahtzee Game"> <IMG SRC="yahtzee. speech" WIDTH=150 HEIGHT=150> <PARAM NAME=pluginspage VALUE="http://quicktime. Exemplu: <OBJECT DECLARE ID=yahtzee CLASSID="java:Yahtzee.com/"> <PARAM NAME=autoplay VALUE=true> <OBJECT DATA="mlk. Aceasta permite instanţierea obiectelor prin intermediul unei legături. Ambele partajează o definiţie de „hartă“ (zonele de pe imagine) care este inclusă în elementul OBJECT. ceea ce conduce la scăderea timpului total de încărcare a unui document compus. Exemplul următor prezintă un document cu două imagini (cea de a doua ca alternativă la prima. sau în afara lui OBJECT şi atunci conţinutul său este afişat. Elementul MAP poate fi inclus în OBJECT. dar cele definite cu OBJECT permit o alternativă textuală completă pentru browserele ce nu încarcă imaginile. Acestea se mai pot realiza şi cu elementul IMG (fiind mai bine suportate de browsere). Se folosesc parametri recunoscuţi în mod normal de orice plug-in pentru audio/video.195">HTML and CSS Reference</A></LI> 51 . pentru a oferi datele de iniţializare la execuţie.apple..mov" TYPE="video/quicktime" TITLE="Martin Luther King's &quot. unui buton sau unui obiect mai tîrziu în acelaşi document. elemente ce sînt adrese absolute sau relative la CODEBASE). plasaţi înainte de specificarea conţinutului alternativ: <OBJECT DATA="mlk. Elementul MAP conţine un meniu de legături care sînt afişate de browserele care nu încarcă imaginile: <OBJECT DATA="sitemap. înaintea oricărui alt conţinut.. <P>Ready to <A HREF="#yahtzee">play Yahtzee</A>?</P> Elementul OBJECT poate conţine şi elemente PARAM.gif" USEMAP="#map" TYPE="image/gif" TITLE="Site map" WIDTH=300 HEIGHT=200> <MAP NAME=map> <UL> <LI><A HREF="/reference/" COORDS="5. Atributul DECLARE face ca obiectul să fie doar o declaraţie ce NU este instanţiată imediat.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). permiţînd browserului să încarce mai multe fişiere cu o singură conexiune. dacă aceasta nu este suportată).I Have a Dream&quot.png" USEMAP="#map" TYPE="image/png" TITLE="Site map" WIDTH=300 HEIGHT=200> <OBJECT DATA="sitemap.wav" TYPE="audio/x-wav" TITLE="Martin Luther King's &quot.

5. Un element cu TABINDEX’0 sau fără TABINDEX va fi vizitat după toate elementele care au un TABINDEX pozitiv.block-level elements.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. fie ca elemente de tip inline – inline elements.gif" WIDTH=90 HEIGHT=90 BORDER=0></OBJECT> Web Authoring Reference </A> Atributele HSPACE şi VSPACE (şi ele depăşite în HTML 4. Atributul BORDER (este şi el depăşit în HTML 4. 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. Valorile top. depăşit în HTML 4. Dintre elementele care au un TABINDEX pozitiv. Metoda modernă este prin intermediul style-sheet-urilor. Metodele moderne de aliniere sînt oferite de proprietăţile vertical-align and float ale stilurilor cascadate (Cascading Style Sheets). middle şi bottom specifică poziţia obiectului faţă de conţinutul documentului ce-l înconjoară la stînga şi dreapta. Atributul ALIGN. 3. ALIGN=middle aliniază centrul obiectului cu linia de bază a textului (baseline). Dacă au aceeaşi valoare se vizitează întîi cele care apar întîi în document. Valoarea 0 are ca efect marginea din jurul unei legături (link) şi trebuie folosită cu precauţie. 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) . Pentru a centra un obiect orizontal în pagină se plasează într-un bloc centrat. specifică modul de aliniere a unui obiect.195.5.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. 52 . Conţinutul lui OBJECT trebuie să fie alcătuit din elementele care pot fi conţinute în părintele lui OBJECT.<LI><A HREF="/design/" COORDS="105.195">Design Guide</A></LI> <LI><A HREF="/tools/index. Exemplu: <A HREF="reference/"> <OBJECT DATA="icon/reference. egală pentru ambele margini. 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. ca în exemplul următor: <P ALIGN=center><OBJECT DATA="foo. 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ă).0.html" COORDS="205.3. cele care au o valoare mai mică vor primi focusul (vor fi vizitate) mai întîi.0) specifică grosimea marginii obiectului.0) permit sugerarea unor spaţii goale verticale şi orizontale în jurul obiectelor a căror dimensiune este dată în pixeli.

definirea unei liste de tip menu 4. de obicei încep cu o linie nouă (de la capătul rîndului). Cînd sînt prelucrate vizual (afişate pe ecran).header de nivelul 1 • H2 .definirea unei liste de tip director .definirea unui bloc cu informaţii specifice de adresă 3. Elementele ce definesc (sau sînt strîns legate de) liste • UL • OL • DIR • DL • LI • DT • DD • TABLE • CAPTION • TBODY • TR . pentru că pot include elemente de tip bloc. Containere de text • P • DIV • CENTER • PRE • BLOCKQUOTE • ADDRESS .definirea unui citat de dimensiuni mari .definirea unei liste ordonate .header de nivelul 5 • H6 .header de nivelul 2 • H3 . Elemente ce definesc tabelele 53 .definirea unui paragraf . Elementele de tip header (Hn) • H1 .definirea unui element ce aparţine unei liste ordonate/neordonate (♦) .definirea corpului tabelului (♦) .definirea unei diviziuni logice de text .definirea unei liste neordonate .definirea unui text preformatat .definirea unei diviziuni logice de text centrat în pagină . Sînt considerate de tip bloc următoarele elemente (unele dintre ele asimilate prin extensie.definirea unui tabel .definirea unui termen/definiţie a unui liste de definiţii (♦) – descriea unei definiţii (♦) .header de nivelul 3 • H4 .definirea unui rînd al unui tabel (♦) • MENU .definirea unei liste de definiţii .header de nivelul 4 • H5 . specificate mai jos cu simbolul ♦): 1.header de nivelul 6 2.definirea titlului unui tabel . Elementele de tip bloc (block level elements) Elementele de tip bloc în mod tipic conţin elemente inline şi alte elemente de tip bloc.I.

definirea unui antet al unui tabel (♦) . numai text sau alte elemente de tip inline.definirea unui grup de controale într-un formular • FRAMESET .definirea conţinutului alternativ la script-uri II.Mostră de text generat de un program .Tăiat cu o linie . Elemente de marcare fizică a proprietăţilor unei porţiuni de text – stilurile fizice • STRIKE . Elementele de tip inline (inline level elements) Elementele de tip inline pot conţine. Sînt considerate de tip inline următoarele: 1.definirea unui „frameset“ (set de frame-uri pentru un document) (♦) • NOFRAMES.inserarea unei linii orizontale .Text scos în evidenţă .definirea unei celule de tip header (♦) .Definiţia unui termen .Acronim .Text cu o linie pe mijlocul caracterelor .definirea unui text pentru promterul de cerut date de intrare • COLGRUP .Bold . în mod normal.Variabilă 2. de obicei NU încep cu o linie nouă (efectul se propagă din locul în care apar. Cînd sînt prelucrate vizual (afişate pe ecran).Citat scurt / Scurt text reluat după altă sursă .definirea conţinutului alternativ la setul de frame-uri • NOSCRIPT .Text ce trebuie introdus de la tastatură . chiar dacă este în mijlocul unui rînd).definirea unui footer al unui tabel (♦) .definirea unui formular pentru a introduce date .• TD • TH • COL • THEAD • TFOOT 5.Italic .Subliniat .definirea unei coloane a unui tabel (atributele comune) . Alte elemente • HR • FORM • ISINDEX . Elemente de marcare logică a proprietăţilor unei porţiuni de text/unei fraze – stilurile logice • EM • STRONG • CODE • SAMP • CITE / Q • ABBR • ACRONYM • DFN • KBD • VAR • I • B • U • S 54 .Abreviere .definirea unui grup de coloane într-un tabel • FIELDSET .Fragment de cod (bloc de instrucţiuni) .Text puternic scos în evidenţă .definirea unei celule de date (♦) .

Listă de selecţie a unor opţiune de meniu 55 .Modificarea fontului de bază .) .Redefinirea direcţiei în care se citeşte textul 4. legătură hypertext) .Superscript (putere) .Imagine .Teletype (stilul maşinilor de scris) • SMALL . etc.Modificarea fontului .• BIG • SUB • SUP • TT .Listă de selecţie .Line break (sfîrşit de linie) .Eticheta unui cîmp .Anchor (ancoră.Grup de opţiuni de meniu . Elemente de marcare a proprietăţilor speciale ale unei porţiuni de document • SPAN • BR • A • IMG • FONT • BASEFONT • BDO .Container generic de text inline .Cîmp de introducere a unui text . Elemente de definire a controalelor din interiorul unui formular • INPUT • SELECT • FIELDSET • LEGEND • TEXTAREA • LABEL • BUTTON • OPTGROUP • OPTION .Subscript (indice) .Text mai mic 3.Buton .Cîmp de introducere a unor date (button.Grup de controale ale unui formular .Text mai mare .Titlul unui fieldset .

Definirea unei imagini senzitive (prelucrată client-side) .Includerea unui obiect .Text inserat .Includerea unui script client-side .Text şters .Definirea unei frame inline (în punctul în care apare elementul) 56 . 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.Comentarii • Textul documentului III.Parameterii unui applet Java . Alte elemente • ! . • MAP • AREA • APPLET • PARAM • TEXTFLOW • DEL • INS • OBJECT • SCRIPT • IFRAME .5. 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.Text alternativ la un applet .Inserarea unui applet Java .Zonă activă într-o imagine senzitivă .

. Pentru aceasta este pusă la dispoziţia autorului posibilitatea definirii de titluri şi/sau subtitluri pe diverse nivele... 1. Terminarea rîndului (elementul BR) Sintaxa: <BR> Atribute posibile: • CLEAR=[ left | all | right | none ] • atribute comune core Conţine: • Nimic (gol) Conţinut în: • elemente de tip inline • elemente de tip block Descriere: (ştergerea/setarea poziţiei obiectelor flotante) 57 ... TAB. Legături. Inserarea de linii în document (CR/LF cu „Enter“) nu se reflectă şi la afişare...<„CR/LF“> .. etc). sînt părţi de text (informaţie) care includ alte (sub)părţi de text. 2. 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... 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.. 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. Într-un document aceasta înseamnă că unele informaţii sînt mai importante ca altele şi că.. LF. Imagini 4. Al doilea sub-sub-topic B. etc. de obicei. Al doilea element principal (Major Topic). Primul Sub-Topic 1. Uneori documentul doreşte reflectarea acestei logici.şi aici.1. Elemente de bază ale documentelor: Texte. rîndul de sus trebuind să fie întrerupt.etc. Browserele ignoră toate “spaţiile albe“ (white-spaces) din documente (caracterele de tip CR. Primul element principal (Major Topic) A. Al doilea Sub-Topic II.Capitolul 4. Primul sub-sub-topic care se intinde.

identările fiind ignorate de navigatoare. TD. Atributul CLEAR mută dedesubt obiectele flotante (care pot apare în diverse poziţii în pagină. Ele nu trebuie identate în document. DIV. Tag-ul se foloseşte cînd dorim să terminăm afişarea rîndului într-un anumit loc.. La afişare titlurile nu sînt numerotate. etc). BODY. OBJECT. indicate în formatul <Hl> <H2>. atribute de internaţionalizare şi evenimente scriptabile) Conţine: • elemente de tip inline Conţinut în: • APPLET. marginea din stînga este alta decît în cazul unui text normal. DD.Tag-ul <BR> termină rîndul de text acolo unde este inserat. titlurile utilizate la structurarea documentului (<H1> Titlul de ordinul 1 </H1>) pot avea orice lungime.<H6>. BUTTON. Trebuie avută grijă la inserarea acetui tag deoarece modul în care apare un text/linie depinde şi de fontul utilizat şi dimensiunea sa.<BR>De ce nu tai copacul? Are ca efect afişarea în browser: Şi dacă ramuri bat în geam. cum ar fi imaginile şi tabelele). CENTER. INS. îngroşat.. indiferent unde anume este această margine. NOFRAMES. De ce nu tai copacul? 2. NOSCRIPT. afişează textul care urmează acestui tag începînd de la marginea din stînga. diversele navigatoare afişîndu-le astfel încît să iasă în evidenţă (centrat. DEL. mărit. MAP. TH Descriere: Titlurile sînt utilizate pentru ierarhizarea diferitelor secţiuni de text. Mult mai flexibilă este metoda stilurilor deoarece proprietate clear se poate aplica oricărui element). LI. 58 . Exemplu: Textul următor dintr-un document HTML Şi dacă ramuri bat în geam. IFRAME. HTML defineşte şase nivele pentru titluri. De pildă în cazul în care elementul <BR> este inserat într-o listă. FIELDSET. Cînd navigatorul întîlneşte tag-ul <BR>. subliniat. BLOCKQUOTE. FORM. Spre deosebire de titlul documentului (<TITLE> Titlul documentului </TITLE>). 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.

MAP. încep un nou rînd. Autorii pot să sugere cum să apară titlurile prin folosirea stilurilor. NOFRAMES. FORM. LI.H1 defineşte headerul (titlul) de nivel 1. NOSCRIPT. Autorii nu trebuie să se bazeze pe dimensiunea fontului utilizat în acest caz. Cînd întîlnesc un tag <P>. CENTER. Containere de text (stiluri ale unui bloc) A. ci doar pe importanţa headerului (titlului) respectiv. DEL. lăsînd cîteva spaţii verticale (rînduri) libere între paragraful care 59 . TD Descriere: Prima versiune HTML specifică tag-ul <P> ca tag vid (fără un corespondent </P>. într-un document nu trebuie să existe decît un singur astfel de header. Exemplu: 1. background: transparent. APPLET. 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. text-align: center } 2. adică cel mai important. BUTTON. Headerul H1 poate fi sugerat astfel: h1 { color: #c33. OBJECT. DD. font-weight: bold. DIV. FIELDSET. BODY. În mod normal. IFRAME. INS. Cele mai multe navigatoare presupun că paragrafele sînt formatate de această manieră. Dimensiunile (normale) ale acestor taguri sînt: <H1> Header 1 </H1> <H2> <H3> <H4> <H5> <H6> Header 2 Header 3 Header 4 Header 5 Header 6 </H2> <H3> </H4> </H5> </H6> 3. BLOCKQUOTE.

center şi justify. 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. text-indent: 5% } B. elemente definitorii în folosirea stilurilor (style-sheet). NOSCRIPT. permiţînd autorilor să specifice diverse atribute globale blocului respectiv (cum ar fi. tag-ul paragraf este nevid <P>. De remarcat că browserele adaugă. de exemplu. avînd ca argumente posibile: left. right. de obicei.</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. TH Descriere: Acest element defineşte un container de tip bloc (block-level) generic.. FIELDSET. DIV.0 şi HTML 3. sugerînd. BODY. ID sau LANG. INS. LI. TD..</SPAN> Atribute posibile: 60 . BUTTON. NOFRAMES. de exemplu. Atributul (depăşit) ALIGN sugerează alinierea orizontală a conţinutului diviziunii de text definită cu acest element. Cea mai importantă utilizare a acestui element este în combinaţie cu elementele CLASS. Containerul logic de tip text/inline (elementul SPAN) Sintaxa: <SPAN>. o linie nouă atît înainte cît şi după elementul DIV. MAP. autorii o pot face. CENTER.0.. stilul sau limba). Chiar dacă HTMLnu specifică un mod special de prezentare pentru acest tag. De exemplu: P { margin-top: 0. Containerul logic de tip bloc (elementul DIV) Sintaxa: <DIV>. DD.. dar se recomandă folosirea lui cînd se folosesc style-sheet-uri. utilizat în interiorul paragrafelor şi al elementelor de tip inline. Un echivalent (alias) pentru valoarea center (<DIV ALIGN=center>) este elementul (preferabil a fi folosit ) <CENTER>. OBJECT. identarea paragrafului sau spaţierea prin intermediul style-sheet-urilor.tocmai s-a terminat şi cel care tocmai începe.. În HTML 2. DEL.. FORM. tag-ul </P> fiind însă opţional.</P>. IFRAME. Elementul DIV are un echivalent la nivelul text – SPAN. BLOCKQUOTE.

Tel: (51) 123-121. Întrucît HTML nu are elemente specifice pentru a identifica. Dar dacă există un astfel de element atunci acesta este preferabil. stilul sau limba).• 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. de exemplu. De exemplu. se folosesc DIV şi SPAN pentru a obţine efectul structural (şi chiar şi de prezentare) dorit. Fiecare cîmp ar trebui să poată fi identificat în mod unic pentru a putea fi prelucrat separat (validat. elemente definitorii în folosirea stilurilor (style-sheet).Exemplu de date pentru o bază de date: --> <!-. numele persoanei. SPAN se foloseşte doar acolo unde nici un alt element de tip inline nu este potrivit. se poate folosi: <P><I LANG=ro> Mineriadele anilor 90</I> au şocat opinia publică. pentru a se obţine efectele de poziţionare şi aliniere asemănătoare controalelor vizuale din interfeţele grafice. de exemplu.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.Nume: Victor Popescu. ID. în locul: <P><SPAN LANG=ro>Mineriadele anilor 90</SPAN> 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. de exemplu. Cea mai importantă utilizare a acestui element este în combinaţie cu elementele CLASS. <!-.ro</TR> </TABLE> </DIV> <!-.Nume: Ion Ionescu.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. De remarcat că fiecare cîmp este plasat într-o celulă a unui tabel. permiţînd autorilor să specifice diverse atribute globale textului (zonei de document) respectiv (cum ar fi. Email: ii@foo. DIR sau LANG. Email: pv@qwe.ro</TR> </TABLE> </DIV> 61 . Exemplu: Presupunem că vrem să scriem o pagină HTML care să conţină un formular care să preia date pentru o bază de date. Tel: (51) 123-212. cu un script).

BUTTON. ALIGN=CENTER este un atribut care poate fi utilizat în conjuncţie cu majoritatea tag-urilor. MAP. LI. FIELDSET. Textul preformatat (elementul PRE) Sintaxa: <PRE> text preformatat (conţine tab-uri. nu conţinutul lor!!!) în pagină. 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. TH Descriere: Acest element defineşte un bloc al cărui conţinut este centrat orizontal. DD. dar rămîne folositor în special pentru tabele pe care le centrează (pe ele. Există două modalităţi de centrare a textului. NOSCRIPT.D. Una cu ajutorul tag-ului <CENTER> iar cealaltă cu ajutorul atributului ALIGN care ia valoarea CENTER. CENTER. FORM. BLOCKQUOTE. IFRAME. etc) </PRE> Atribute posibile: • WIDTH=Număr (lăţimea unei linii) • atribute comune 62 . DIV. NOFRAMES. OBJECT. TD. DEL. multe spaţii. Este o prescurtare pentru elementul <DIV ALIGN=center>. 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. INS. BODY. evitînd folosirea lui <TABLE ALIGN=center> care nu este suportat de toate browserele.

pentru care eliminarea spaţiilor ar face citirea mult mai grea. De regulă este folosit la sfîrşitul documentelor. IFRAME. SUB. NOSCRIPT.println("Hello World!"). Aceasta ne permite utilizarea textului preformatat pentru afişarea tabelelor şi chiar a unei grafici rudimentare obţinute cu caractere ASCII. astfel ca browserul să aleagă un font şi o spaţiere adecvată. Textul preformatat este afişat în majoritatea cazurilor cu fontul Courier monospaţiat. SMALL.. MAP. se poate face prin utilizarea tag-urilor <PRE> . INS. TD.Conţine: • elemente inline cu excepţia: IMG. BODY. SUP. LI. MAP. Exemplu de cod Java inserat CA TEXT!!! într-o pagină HTML: <PRE><CODE CLASS=Java> class HelloWorld { public static void main(String[] args) { System. FIELDSET. RETURN) să fie ignorate de către navigator. 63 . OBJECT. OBJECT. dar de obicei este ignorat. DEL. De regulă. NOSCRIPT. BUTTON. LI.out. } } </CODE></PRE> CODE este un element care se utilizează pentru a oferi informaţie structurală. BIG. IFRAME. TD. TH Conţinut în: Descriere: Tag-ul adresă este utilizat pentru entităţile gen semnătură. DIV. FORM. Atributul WIDTH oferă informaţii despre lăţimea liniei. data publicării şi adresa de contact. aşa cum sînt ele. mai multe spaţii. F. FORM. Adrese (elementul ADDRESS) Sintaxa: <ADDRESS>Informaţii de contact</ADDRESS> Atribute posibile: • atribute comune Conţine: • • elemente inline şi P APPLET. BLOCKQUOTE. 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>. APPLET.. BLOCKQUOTE. FONT. BASEFONT APPLET. CENTER. acolo unde sînt inserate informaţiile cu privire la autorul documentului. BUTTON. OBJECT. NOFRAMES. </PRE>. DEL. BODY. DIV. CENTER. 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. DD. Se foloseşte în special la inserarea unor bucăţi de program (cod). Aceasta face ca textul să fie afectat de restricţiile HTML în sensul că toate spaţiile suplimentare (tab-uri. FIELDSET. TH Conţinut în: • Descriere: Majoritatea documentelor HTML conţin text marcat cu tag-uri HTML. NOFRAMES. Afişarea acestor texte. INS. DD. Toate spaţiile suplimentare cuprinse între aceste două tag-uri vor fi afişate aşa cum sînt.

De aceea. IFRAME. elementul se folosea mai ales pentru identarea unui bloc de text faţă de textul înconjurător. 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 APPLET. Atributul opţional CITE indică adresa sursei citate. pînă la implementarea style-sheet-urilor. Exemplu: Citatul definit în modul următor: <BLOCKQUOTE CITE="http://www. Nu este însă suportat de toate browserele. FIELDSET. FORM.<A HREF="mailto:lp@lp. BODY..bibliomania.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. OBJECT. spre deosebire de <Q> . NOFRAMES.html" > . TD.ro"> lp@lp.orice generalizare presupune într-o anumită măsură credinţa în unitate şi simplitatea naturii.com/Fiction/xxx.com> G. </Q> utilizat în citate scurte. BLOCKQUOTE.. Acum această metodă este considerată depăşită. Punerea în evidenţă a citatelor se face de regulă prin identare diferită faţă de restul textului. <p>În ceea ce priveşte unitatea aici nu poate exista vreo dificultate. DIV. </BLOCKQUOTE> va apărea astfel: ". TH Conţinut în: Descriere: Acest element este utilizat pentru citate mai lungi care pot conţine elemente de tip bloc (de exemplu P sau TABLE).com</A>&gt. LI. DD. MAP. oferind posibilitatea de verificare şi oferind referinţe suplimentare.orice generalizare presupune într-o anumită măsură credinţa în unitate şi simplitatea naturii. DEL. În ceea ce priveşte unitatea aici nu poate exista vreo dificultate.. BUTTON.... INS. </ADDRESS> în browser va apare: Most recent update: 28/01/99 For more information contact <lp@lp. CENTER. NOSCRIPT." 64 .

<Q lang="en-us">I saw Lucy at lunch. on Gloucester Road. de fapt între simbolurile folosite pentru citate în limba în care este dat citatul.' I think I will get some at Ben and Jerry's.H." 65 . Nu este însă suportat de toate browserele. she told me 'Mary wants you to get some ice cream on your way home. oferind posibilitatea de verificare şi oferind referinţe suplimentare. Punerea în evidenţă a acestor citate se face de regulă prin introducerea lui între ghilimele.</Q> va apare (datorită specificării limbii engleze americane) astfel: John said. care nu necesită paragrafe. Astfel. on Gloucester Road. 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. "I saw Lucy at lunch. Atributul opţional CITE indică adresa sursei citate. spre deosebire de <BLOCKQUOTE> utilizat în citate lungi. nu este responsabilitatea autorului să pună aceste simboluri! Exemplu: Citatul definit în modul următor: John said. dacă aceasta este specificată cu elementul LANG. Citate scurte (elementul Q) Sintaxa: <Q> Citat scurt </Q> Atribute posibile: • CITE=URI (sursa de unde se citează) • atribute comune Conţine: • • elemente inline elemente inline şi elemente de tip bloc Conţinut în: Descriere: Acest element este utilizat pentru citate scurte.

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. 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. </DFN> <CITE> . spaţierea verticală. Toate tag-urile stilurilor logice sînt nevide.1. </STRONG> <CODE> .. de pildă) Text marcat ca şters Indice Exponent Utilizare 66 . 4... </CITE> <DFN> <Q> <ACRONYM> <ABBR> <INS> <DEL> <SUB> <SUP> 4. similar lui <CODE> Text tastat de utilizator Nume de variabilă Definiţie (cuvînt care va fi definit) Un scurt citat Definiţia unui termen Un citat scurt... Stilurile fizice Text accentuat Textul marcat va fi mai puternic accentuat Secvenţă de cod afişată cu font fix (ex Courier) Eşantion.2.. dacă va fi îngroşat. în interiorul unui paragraf. bold.. adăugînd o bulină sau un număr. </EM> <STRONG> .. Există mai multe tipuri de tag-uri pentru aceste stiluri: Tag </EM> . Tag-urile stilurilor logice indică doar faptul că textul este o definiţie. Din acest punct de vedere sînt asemănătoare tag-urilor folosite la marcarea paragrafelor sau titlurilor.. </CODE> <SAMP> . Tag-urile pentru stilurile caracterelor afectează felul în care vor fi afişate numai anumite cuvinte sau chiar numai anumite caractere (de pildă afişîndu-le italic. titluri sau liste afectează textul ca un întreg schimbînd fonturile. </VAR> <DFN> . LYNX) şi nu erau capabile să afişeze texte italice. de aceea se recomanda folosirea stilurilor logice. 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. etc. .. </SAMP> <KBD> . Disticţia între stilurile logice şi fizice a fost importantă în era browserelor ce nu afişau decît text simplu (cum a fost. îngroşat sau subliniat). Un acronim O abreviere Un text inserat (un document. de exemplu. Stilurile caracterelor Utilizarea tag-urilor pentru paragrafe. italic sau evidenţiat în alt mod. Stilurile logice Tag-urile pentru stilurile logice indică doar cum anume să fie utilizat textul marcat nu şi cum anume să fie afişat.... </KBD> <VAR> .. fără a fi însă siguri de aceasta). Există două tipuri de stiluri ale caracterelor: stiluri logice şi stiluri fizice.

.. <b><i>bold italic</i></b>. <tt>teletype text</tt>. cu excepţia lui PRE Descriere: Tag-urile <FONT> .. Tag-urile stilurilor fizice sînt: Tag <B> . </I> <U> . and <big>big</big> and <small>small</small> text..... </S> sau <STRIKE> . Utilizare Text îngroşat (aldin) Textul italic (cursiv) Text subliniat Text tăiat Text afişat cu un font mai mare decît restul Text afişat cu un font mai mic decît restul Text monospaţiat poate produce efecte ca în figura următoare: 5. <i>italic</i>. </STRIKE> <BIG> ... </B> <I> .. </SMALL> <TT> .. italic sau uniform (monospaţiat) spaţiat (asemănător textului produs de maşinile de scris).. de pildă îngroşat (bold). împreună cu atributul SIZE permit modificarea dimensiunii 67 .Tag-urile pentru stilurile fizice indică navigatorului cum anume să fie afişat textul marcat. 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. Utilizarea stilurilor fizice are neajunsul că dacă navigatorul nu poate afişa acel stil el îl va substitui cu un altul. </BIG> <SMALL> ... </U> <S> .. </TT> Exemplu: Utilizarea acestor taguri: <P><b>bold</b>.. < / FONT>...

şi anume <BASEFONT>. descris cu aceste caracteristici. situaţie în care valorile lui SIZE sînt între -3 şi +4. 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. Acest tag. <B>Oh.0. a cărui valoare implicită este 3 (specificată printr-o altă extensie. total depăşit în HTML 4. Dimensiunea fontului poate fi specificată şi relativ la fontul de bază.fontului de bază. Valorile atributului SIZE sînt între 1 şi 7. Folosirea acestuia introduce numeroase probleme legate de accesibilitatea pe diverse platforme (care pot să nu aibă instalat un anumit font. font de bază care are de asemenea atributul SIZE). este folosit pentru modificări rudimentare ale caracteristicilor fontului cu care e afişat textul. my!</B> </FONT> 68 . 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>. de exemplu).

cu excepţia lui PRE Descriere: Spre deosebire de FONT. aplicîndu-se tuturor elementelor care urmează. este folosit pentru modificări rudimentare ale caracteristicilor fontului cu care e afişat textul. total depăşit în HTML 4. tagul BASEFONT modifică fontul de bază. dimensiune dependentă de browser. cu excepţia titlurilor (Hn). Folosirea acestuia introduce numeroase probleme legate de accesibilitatea pe diverse platforme (care pot să nu aibă instalat un anumit font. Atributele COLOR şi FACE.B. Chiar dacă nu e specificat. pe o scală de la 1 la 7. Acest tag. suportate foarte slab sugerează culoarea şi felul fontului. de exemplu). probleme ce se pot evita prin utilizarea stilurilor (style-sheet). de la browser la browser. cu o valoare implicită de 3.0. Mult mai bine suportată şi mai adecvată este folosirea style-sheet-urilor pentru aceste atribute. utilizarea lui BASEFONT în tabele (cu elementul TABLE) produce efecte imprevizibile şi diferite. 69 . block-level elements. 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. Atributul SIZE specifică dimensiunea fontului ce se doreşte folosit.

Există mai multe feluri de liste. ordonate (OL) şi liste de definiţii (DL). FORM. . OBJECT.2. DIV. Fiecare element al listei are propriul lui tag: <DT> şi <DD> pentru listele glosar şi <LI> pentru toate celelalte liste. BLOCKQUOTE. IFRAME.. 1. 4. Valorile pe care le poate lua sînt (literele mici diferă de cele mari): • 1 (numere zecimale: 1. <OL> şi </OL>. NOSCRIPT. Identarea în textul original (cel ce va fi afişat) nu este obligatorie. etc. TD. Definirea şi utilizarea listelor HTML oferă mai multe mecanisme prin care să se poată defini liste de informaţii. FIELDSET. 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>.. DEL.) 70 . 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>. </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. avînd în vedere larga utilizare a acestora. 5.4. INS. MAP.. BODY. 3. BUTTON. Atributul TYPE sugereză stilul de numerotare. Cînd navigatorul interpretează o listă ordonată el numerotează secvenţial fiecare element întîlnit (nu se numerotează în document). LI. 2. DD. Definirea listelor ordonate (cu elemente numerotate) Sintaxa: <OL> <LI> Primul element al listei ordonate <LI> Al doilea element <LI> A1 treilea element. Se mai pot defini şi liste de tip MENU şi DIR (definite iniţial în 2. Există trei tipuri standard de liste: neordonate (UL). CENTER.0) dar care sînt acum considerate depăşite şi vor fi afişate la fel ca UL si DL.. folosindu-se doar pentru a putea fi mai uşor reperate listele din restul textului. NOFRAMES.

BLOCKQUOTE. III. INS. ii. iv.. BODY.. iii.) Atributul START indică primul număr folosit la numerotarea elementelor listei.. C. B. v. LI.) I (numerele Romane scrise cu litere mari: I. c. . IV. V. TD. CENTER. unele sub altele.) A (literele mari ale alfabetului: A. . IFRAME. OBJECT. 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. DIV. D.) i (numerele Romane scrise cu litere mici: i.. FIELDSET. DD. FORM. E. . NOSCRIPT. II. d. . Acest semn este determinat de atributul TYPE şi poate lua valorile: • • disc (cerc umplut/plin) square (pătrat) 71 .. TH Descriere: Diferenţa faşă de lista ordonată (OL) este că elementele nu vor apare numerotate. NOFRAMES. </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. ele fiind afişate identat.. DEL. b. e. MAP.• • • • Exemplu: a (literele mici ale alfabetului: a. BUTTON... precedate de un semn specific elementelor listelor (de exemplu bulina •).

MENU. Valorile pe care le poate lua sînt: 72 .. Forma lor (pentru sub-liste) poate fi schimbată definind o nouă listă în interiorul primeia. UL.. 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.• circle (circumferinţa unui cerc) Acestea arată. Atributul VALUE poate specifica numărul din secvenţă care se „atribuie“ acelui element. DIR Descriere: Elementele listelor se definesc folosind acest tag. etc </UL> </UL> 3. după modelul următor: <UL> <UL> <LI> Element al noii liste <LI> Un alt element. Definirea elementelor unei liste (tagul LI) Sintaxa: <LI> Element al listei. 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). </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. Atributul TYPE specifică elementul grafic/alfabetic ce va marca elementul respectiv. de obicei.

...) a (literele mici ale alfabetului: a. <DL COMPACT>.) • Valorile pentru LI în OL: • • • • • 4. 5. IFRAME. INS.) i (numerele Romane scrise cu litere mici: i. . c. LI. precum şi mai multe definiţii pentru un termen. 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. DIV. DD. De asemenea se poate da un termen fără o definiţie corespunzătoare şi vice versa (!). CENTER. B.• Valorile pentru LI în UL. lista de definiţii ar trebui să fie formatată pe o suprafaţă ecran mai mică. TD. iii. D.) I (numerele Romane scrise cu litere mari: I. C. E. 4. ii. MAP. . . Listele de definiţii încep cu <DL> şi se termină cu </DL>. d.. . Se pare 73 . NOSCRIPT. Cu ajutorul atributului COMPACT. BLOCKQUOTE..) A (literele mari ale alfabetului: A.. b. V. e. iv.. . BODY. IV. BUTTON. Fiecare element al listei este format din două părţi: termenul de definit şi definiţia. FORM.. Termenii care trebuie definiţi sînt inseraţi cu ajutorul etichetei <DT> iar definiţiile corespunzătoare se introduc cu ajutorul etichetei <DD>. v. OBJECT.. FIELDSET. TH Descriere: Listele de definiţii (uneori numite şi liste glosar) sînt uşor diferite faţă de celelalte liste.. DEL. O listă de definiţii poate avea mai mulţi termeni pentru o definiţie dată. 2. II. III. dar o astfel de structură are sens în cazuri extrem de rare. NOFRAMES. 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. 3. DIR sau MENU: • • • disc (cerc umplut/plin) square (pătrat) circle (circumferinţa unui cerc) 1 (numere zecimale: 1.

De exemplu..</ABBR> Ploieştului numărul 1 </DD> </DL> 5. </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. de la 7:00 la 9:00. invitaţie la <ABBR TITLE=Street>St. această practică fiind justificată cînd alte elemente HTML nu pot descrie adecvat acea structură. Definirea termenilor unei liste de definiţii (tagul DT) Sintaxa: <DT> Element al listei. DT nu poate conţine elemente de tip bloc (ca de exemplu P sau Hn). după cum şi o singură definiţie poate avea mai mulţi termeni. 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.. 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).însă că majoritatea navigatoarelor ignoră acest atribut. În general tagul este urmat de un element DD pentru denirea termenului respectiv. 74 . Un termen poate avea mai multe definiţii asociate cu el. 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). Trebuie văzută. </DD> <DT>22 ianuarie</DT> <DD> Marius Tucă Show.

6. 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. sînt identate şi formatate în coloane de către navigatoare.. Tagul de sfirşit este opţional dar se recomandă a fi folosit pentru a preveni anumite erori cînd se folosesc stilurile (stylesheets). Definirea definiţiei unui termen al unei liste de definiţii (tagul DD) Sintaxa: <DD> Element al listei. În practică un browser va afişa listele definite cu DIR şi MENU exact ca cele definite cu UL! 75 . Listele director sînt şi mai scurte decît listele meniu. în mod asemănător listelor director din Unix. Astfel listele de definiţii pot fi îmbricate. Meniurile au fost proiectate pentru a fi folosite ca liste cu o singură coloană. </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. DT poate conţine elemente de tip bloc (ca de exemplu P. Hn. Afişarea lor se face prin identare diferită sau o formatare diferită de restul textului. 7. TABLE sau chiar DL)..

ordonează elementele listei prin litere mici (a. II. 2. . 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. . Felul în care apar afişate listele imbricate diferă mult de la un navigator la altul. III.. navigatorul este acela care hotărăşte forma bulinelor sau schema de numerotare. 3. pentru un contur circular TYPE=SQUARE. ordonează elementele listei prin numere romane mari (I. implicit.. ordonează elementele listei prin numere romane mici (i..) TYPE=a. ordonează elementele listei prin numere arabe (1.. . compactă (implicită) TYPE=CIRCLE. Atributul TYPE determină forma „bulinei“: TYPE=DISC. ii. iii. .. 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..) TYPE=I.8. Formatarea listelor Pentru liste. ordonează elementele listei prin litere mari (A. b. C. Se pot insera liste neordonate în interiorul celor ordonate si viceversa. 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. c..) TYPE=i.. atributul TYPE are un alt set de valori care indică schema de numărare: TYPE=1...) 76 . pentru o bulină circulară. B.) TYPE=A.. Imbricarea listelor Imbricarea listelor se realizează simplu: se inserează o nouă listă în interiorul primei liste.

care indică browserului să „sară“ la altă resursă (să o încarce). un clip... Ancora LEGĂTURĂ. Textul „Introduction“ este un text activ care dacă este selectat are ca efect „saltul“ la resursa identificată prin numele „section1“.. indicată de atributul HREF. O legătură (link) are două capete. un element din interiorul unui document HTML.. 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. şi o direcţie. o imagine. de la tastatură. putînd fi definită ca o conexiune de la o resursă Web la alta. Exemplu: <A HREF="document. etc). Există două tipuri de bază: 1. Link-ul porneşte de la ancora sursă şi indică spre ancora destinaţie care poate fi orice resursă Web (un document HTML. 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. 2.. Chiar dacă pare un concept simplu. Acest comportament este obţinut de obicei (şi implicit) prin selectarea legăturii (de exemplu cu mouse-ul prin clic. numite uneori ancore. etc).. un program.. iar documentele statice devine în acest fel documente interactive. <H2 id="section1">Introduction</H2> . Elementul esenţial al unei legături este tagul <A>.4..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.3. Această resursă este de fapt o porţiune din document care începe cu titlul (headerul H2) care are ca atribut id="section1". Exemplu: <P><A href="#section1">Introduction</A><BR> . 77 .</A> utilizat pentru marcarea (hyper)legăturilor. El are întotdeauna atribute asociate pentru a indica ce tip de legătură este.section 1. ea a fost forţa primară care a asigurat succesul Webului. dacă legătura curentă este selectată. un sunet. Ancora NUME care marchează o locaţie particulară din document ca ţintă la care pot indica (la care se pot cupla) alte documente. Acţiunea implicită asociată cu o legătură este aducerea (încărcarea) în navigator (browser) a resursei către care indică legătura. hyperlink-ul) este construcţia de bază. Legătura/link-ul (hyperlegătura. atributul definitoriu este NAME (sau un echivalent: un alt element împreună cu atributul ID).

. Atributul HREF (de la Hypertext REFerence) este utilizat pentru specificarea URI-ului documentului ţintă.. Acest atribut specifică legăturile către resursele 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 78 .. Este de fapt modul de localizare a documentului care va fi adus la selectarea textului activ. 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>.. Atributul suplimentar TYPE poate fi folosit pentru a indica tipul (în categorisirea Internet) a resursei către care se indică. 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).Sintaxa: <A>. 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. permiţînd browserelor care nu pot interpreta (afişa) un anumit tip de resurse să nu le mai încarce. fără A Conţinut în: • elemente de tip block-level.</A>.</A> Atribute posibile: • • • • • • • • • • • • • • • Conţine: • elemente inline. elemente de tip inline.

Cele mai utilizate protocoale: • • • • • • • HTTP:// . sau HREF="somedoc.html" REL=glossary>. virgula.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).legătură (anonimă) la un server FTP MAILTO:// . astfel că NAME se mai păstrează încă. Cînd este folosit ca şi destinaţie a unei legături. Se pot folosi şi nume speciale (care încep cu o liniuţă de subliniere) de frame-uri: • _blank – fereastră nouă 79 .legătură la un alt document HTML FTP:// . Uneori.legătură la o adresă Usenet GOPHER:// . Atributul NAME defineşte o destinaţie pentru o legătură.</A> indică faptul că foo. Valorile admise trebuie să înceapă cu o literă din intervalul A-Z sau a-z şi trebuie să urmeze numai caracterele A-Z..html#foo". Atributele REL şi REV indică relaţiile între o ancoră şi resursa indicată de legătură.</A> indică faptul că documentul curent este o subsecţiune a lui bar. De exemplu. ID este atributul care înlocuieşte atributul NAME şi care poate fi folosit cu aproape orice element pentru a defini o destinaţie. punctul.html. protocoale specificate. dacă legătura este de tip „mailto“.. REL defineşte o relaţie de la documentul curent la cel indicat de legătură.html" REV=subsection>. valoarea acestui atribut e folosită ca subiect al e-mailului care se va trimite. De exemplu: <A HREF="foo. Dar se pot utiliza atît NAME cît şi HREF într-un singur element A pentru a se evita aceste probleme. a-z. numele astfel definit este case sensitive (literele mari/mici diferă). 0-9. 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.. în timp ce <A HREF="bar. Exemplul anterior poate fi scris: <H1 ID=foo>My heading</H1> Nu toate browserele oferă suport însă pentru ID. în timp ce REV defineşte o relaţie în sensul opus. Dacă nu există un astfel de frame (cadru-pagină) se va deschide o feeastră nouă. Un element A nu poate conţine un alt element A. din alt document.Internet în concordanţă cu diverse protocoale de acces a acestora. liniuţa de despărţire. Se poate astfel folosi HREF="#foo" într-un element A din acelaşi document.legătură la o adresă Telnet WAIS:// .se activează editorul de e-mail pentru a se compune un mesaj şi a se trimite la adresa specificată TELNET:// ..legătură la un server de indexare WAIS USENET:// . astfel că trebuie avut în vedere că ancorele ce definesc nume de secţiuni NU pot conţine ancore care indică legături. ca parte integrantă din URI. de subliniere. un document ce conţine: <H1><A NAME=foo>My Heading</A></H1> defineşte o destinaţie pentru legături numită „foo“.html este glosar pentru documentul curent. Atributul TARGET indică în ce frame să se încarce resursa indicată de legătură.

. care defineşte o regiune dreptunghiulară folosind COORDS="left. Exemple: • • • • • • • <A HREF="album.. Dacă două sau mai multe regiuni se suprapun are prioritate cea definită întîi. xN.jpg">Picture of me</A> <A HREF="/sounds/song. 80 .com</A> <A HREF="http://www. y2. radius".html">My photo album</A> <A HREF=". 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ă. top. Alte valori posibile: • • • circle – specifică un cerc. Valoarea implicită pentru SHAPE este rect.. la documente aflate pe alte servere (legături îndepărtate) sau intern (în interiorul unui document.lp. se utilizează: COORDS="x1.• • • _self – în fereastra curentă (utilă pentru suprapunerea unui atribut BASE TARGET) _parent – în părintele frame-ului din frameset _top – în întreaga fereastră.zh. Coordonatele sînt relativ la colţul stînga sus al imaginii şi pot fi exprimate în pixeli sau procente. bottom". sau o secţiune a unui alt document. center-y. prin intermediul elementului OBJECT).com" TITLE="Feedback on Document">lp@lp.alis. acelaşi în cazul în care documentul este mare şi se doreşte un salt pînă la o secţiune a sa.. fără frame-uri Atributele SHAPE şi COORDS oferă posibilitatea utilizatorului să specifice o hartă de imagini senzitive (client-side image maps.com/" TARGET="_top">Web Design</A> <A HREF="http://babel. . right.com:8080/langues/iso639.mid" TYPE="audio/midi" ACCESSKEY=A>Cintecel (5 kB MIDI)</A> <A HREF="section2. 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).html" TARGET="content" TITLE="Elements of the HEAD" REL=next>Section 2</A> <A HREF="mailto:lp@lp. y1. default – specifică întreaga imagine (ce a rămas eventual nedefinită). atunci cînd se doreşte o indicare mai rafinată a părţii din resursa-document ce se referă). poly – specifică un poligon./images/me. x2. se utilizează: COORDS="center-x. yN".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).

html. Referinţele absolute localizează documentele specificînd directorul de cel mai înalt nivel şi toată calea pînă la document. Căile relative pot include directoare sau pot indica o cale pe care trebuie să o urmăm pentru a naviga la documentul ţintă./d|/alt_director/subdirector/ţintă..html se găseşte într-un director aflat cu două nivele mai sus. 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. şi se face o referinţă la documentul aflat în d:\alt_director\subdirector\ţintă.1./subdir/doc. 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). html" doc.html..). pornind de la documentul pointer (de start). în directorul subdir Pe Macintosh. Deci. 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 (. indiferent de sistemul pe care este găzduită pagina/paginile HTML. B.html" HREF=". De pildă. referirea relativă la acele documente se va face de forma: HREF="ServerWWW/SiteWWW/nume_document. coboară două directoare spre rădăcină şi apoi mergi în sus două directoare pentru a găsi documentul. cu ajutorul literelor. cum ar fi. subdirectorul subdir doc. anume în specificarea legăturilor. numele discului este chiar cel care apare pe disc. Referinţe absolute Cea mai simplă legătură se realizează precizînd calea relativă a documentului.html se află în directorul dir.html" HREF="dir/doc./doc. Iată un tabel cu referirea relativă a documentelor: Cale HREF="doc.html referinţa la el se va face de forma: HREF=".html este localizat în folderul (directorul) dir doc.html" HREF="dir/subdir/doc. dacă există un disc numit ServerWWW şi documentele HTML se găsesc într-un folder numit SiteWWW. Legături locale Legăturile locale se fac utilizînd căi (referinţe) relative sau absolute.. Cele două puncte verticale au o altă semnificaţie..html se găseşte în directorul curent doc. Referinţele absolute încep întotdeauna cu un slash (/) urmat de succesiunea directoarelor pînă la documentul la care faceţi referinţă. Iată un tabel cu referirea absolută a documentelor: 81 .. dacă fişierul se află în directorul c:\nume_director\document. Specificarea căilor relative în legături se face ca în Unix. numai că cele două puncte verticale (c:) sînt înlocuite de o bară verticală (c|).html se găseşte într-un director aflat cu un nivel mai sus decît directorul curent HREF=". discurile sînt referite în mod obişnuit.html Pe sistemele care rulează Win/DOS./.html" Semnificaţie doc. de exemplu. A. O cale poate include şi direcţii.

html" Semnificaţie doc.html este localizat pe discul c: în directorul /pub doc.w3. cuprinsul poate fi prezentat la începutul documentului şi poate avea legături care punctează spre diferitele secţiuni. precedat de semnul #. Exemplu: <A HREF="/cale/doc. 2.html a cărui cale este precizată în HREF şi să deruleze doc. Textul dintre taguri va fi afişat diferit faţă de restul documentului pentru a arăta că este selectabil. 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. Referinţa hypertext (HREF) va conţine însă URL-ul documentului. 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. În acest caz. Spre deosebire de legături. de forma: <A HREF="http://www.Cale HREF="/home/pub/doc. 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.html se găseşte în directorul /home/pub doc.html se află pe discul Server. 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.html" HREF="/c|/pub/doc. 82 . 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. 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. 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.org/">The World Wide Web Consortium</A> 3. ancorele nu sînt afişate diferit faţă de restul documentului în documentul ţintă. între un anumit punct al unui document şi un alt anumit punct al aceluiaşi document sau al altuia. Exemplu: <A NAME="cuvînt_cheie">Paragraf ţintă</A> Atunci cînd se va face referinţă la această ancoră. utilizînd tag-ul <A> numai că de această dată îi este asociat un alt atribut: NAME. Tag-ul de început este <A> şi cel de sfîrşit </A>. Tot ce avem de făcut este să dăm nume ancorelor şi apoi să le referim în legături.html pînă cînd „Paragraf_ţintă“ ajunge în partea de sus a ecranului. 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ă. De pildă în cazul unui singur document organizat pe secţiuni.html#cuvint cheie">Salt la paragraful ţintă</A> Legătura cere navigatorului să încarce documentul doc.html" HREF="/Server/Site/doc. în folderul Site (Macintosh) Ori de cîte ori este posibil trebuie folosite referinţele relative deoarece cele absolute nu sînt portabile. valoarea atributului HREF este chiar cuvîntul cheie.

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). 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. 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. 1. La început este salvată fiecare a opta linie (începînd cu prima). efectul nu va fi observat. 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. 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). apoi fiecare a patra linie (începînd cu a treia). Formatele suportate Există două tipuri de imagini care pot fi văzute de navigatoare: imagini inline (în text. Imaginile externe sînt imagini care nu sînt afişate direct la încărcarea paginii. Dacă navigatorul nu suportă imaginile întreţesute sau dacă este setat să aştepte pînă la sosirea întregii imagini înainte de afişare. chiar dacă acestea sînt apropiate ca tonalitate. un fişier GIF este salvat în fişier linie cu linie (scan lines). etc. 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ă. folosită atunci cînd imaginea ce se inserează trebuie să fie de o foarte bună calitate. line = rînd) şi imagini externe. Două trăsături fac noile formate GIF (numite GIF89) mai deosebite: formatul întreţesut şi fundalul transparent. Pe măsură ce imaginea este adusă de pe Web. de la o imagine de rezoluţie joasă la una de rezoluţie mai înaltă. rezoluţie sau adîncime de culoare). Înainte de a le converti (cu un program special) trebuie să ne asigurăm că imaginile au fundalul într-o singură culoare. Întreţeserea (interlacing) nu schimbă felul în care este văzută imaginea în document ci doar aspectul ei în timp ce este încărcată. XBM.4.4. apoi restul rîndurilor. bogăţia informaţiei şi noile posibilităţi de organizare a resurselor fac din imagini un element indispensabil din publicaţiile Web. între cele mai răspîndite fiind Adobe Photoshop şi Paint Shop Pro. apoi fiecare a opta linie (începînd cu a patra). dînd senzaţia că imaginea pluteşte pe suprafaţa paginii. chiar dacă apare în aceeaşi pagină în browser. PICT. Fără multe amănunte. începînd cu partea de sus a imaginii şi continuînd progresiv în jos. Fundalul unei imagini se poate izola utilizînd un program de editare de imagine. 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. URL ce aparţine însă unei resurse diferite de documentul propriu-zis (un alt fişier!). Dacă fundalul este format din mai multe culori. În mod normal. 83 . O condiţie pentru ca imaginile să poată fi afişate este salvarea lor într-unul din formatele recunoscute de navigatoare: GIF sau JPEG. Există şi programe care fac numai conversia în GIF. Inserarea se face într-un mod asemănător unei legături: se specifică URL-ul imaginii ce se inserează. numai una singură va fi făcută transparentă. cum ar fi De Babelizer pe Mac sau pachetul de filtre PBM pentru UNIX. superioară la GIF. Imaginile întreţesute sînt salvate diferit. Imaginile transparente sînt imagini la care culoarea (sau modelul) din fundalul paginii va transpare. Dacă navigatorul poate afişa imaginile în timp ce acestea sînt încărcate. apariţia ei poate fi gradată. Imagini în documentele HTML Imaginile inserate în documentele HTML îmbogăţesc paginile Web nu numai sub raport decorativ.

Acesta este un tag vid din aceeaşi familie cu <HR> şi <BR>.gif“ şi imaginea se află în acelaşi director ca şi documentul HTML..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 . 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. cu excepţia lui PRE Descriere: Atributul SRC indică URL-ul imaginii care va fi inserată în document. Imaginile inline sînt specificate în HTML cu ajutorul tag-ului <IMG>. atunci integrarea imaginii se face cu tag-ul: <IMG SRC="poza. Dacă numele imaginii este „poza.." indică URL-ul unei imagini care va fi încărcată înaintea imaginii specificate în SRC. forma tag-ului este: <IMG SRC=". Inserarea imaginilor în text După convertirea imaginii într-un format suportat. elemente de tip bloc (block-level elements). aceasta poate fi inserată în document.client-side image map) ISMAP (figură senzitivă ./poza. 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). Dacă se utilizează aceeaşi imagine de mai multe ori în interiorul aceluiaşi document. 2.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. iar pentru o imagine aflată în directorul imediat superior celui în care se află documentul.gif">. Specificarea căii către imagine se face urmînd aceleaşi reguli ca şi la specificarea URL pentru orice alt document/resursă. Sintaxa: <IMG> Atribute posibile: • • • • • • • • • • • • Conţine: • nimic Conţinut în: • elemente de tip inline. Valoarea atributului LOWSRC este de regulă URL-ul unei versiuni de o mai mică rezoluţie a imaginii 84 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ă . Unelte pentru crearea acestor efecte sînt destule. iar LOWSRC=".gif">..

transformarea acestora într-o ancoră (link) care indică spre documentul reference. iar HSPACE=". Utilitatea acestor atribute apare atunci cînd se specifică dimensiunile reale (adevărate) ale imaginii.gif" ALT="" WIDTH=90 HEIGHT=90 BORDER=0>Web Authoring Reference </A> are ca efect afişarea unei imagini (din fişierul reference. recomandîndu-se utilizarea stylesheet-urilor în locul lor..." stabileşte spaţiul dintre imagine şi textul aflat deasupra şi sub imagine (pe verticală).specificate în SRC.." stabileşte spaţiul dintre imagine şi textul aflat la stînga şi la dreapta imaginii (pe orizontală). 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="..jpg" WIDTH="201" HEIGHT="132" BORDER=0 ALT="A big. Atributul VSPACE="... Dacă se specifică BORDER=0.. va fi scalată/redimensionatăcorespunzător. marginea va fi eliminată chiar dacă imaginea este o ancoră/link spre altă resursă.gif. Dacă imaginea este de altă înălţime. În acest fel browserul va rezerva un spaţiu corect în pagină. Sînt considerate depăşite. va fi scalată (redimensionată) astfel încît să încapă în (sau să umplă) spaţiul rezervat. însă: redimensionarea se face după algoritmi extrem de simpli şi rezultatele sînt extrem de departe de cele obţinute cu unelte adecvate. ca alternativă la reprezentarea uzuală a imaginii (în browserele ce suportă doar text sau cele utilizate de persoanele care nu văd)." desenează o margine de grosimea specificată. de exemplu. 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ă. dînd încă de la început imaginea reprezentării paginii respective. brown bear"> 85 . De exemplu: <A HREF="reference." rezervă un spaţiu (în pixeli) pentru lăţimea imaginii. Exemple: 1.. Dacă imaginea este de altă lăţime. iar HEIGHT=". Atenţie.html. dar fără ca imaginea să aibă margine în jurul ei. care se găseşte în subfolderul icon al folderului curent) şi a unui text. face marginea de asemenea activă.. Atributul BORDER=". 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.html"> <IMG SRC="icon/reference. în jurul imaginii şi dacă imaginea este activă." rezervă un spaţiu (în pixeli) pentru înălţimea imaginii. se poate face cu secvenţa: <P> <IMG SRC="bear..

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>. de exemplu ca cea de mai jos: 2. my!</B> </FONT> </BODY> </HTML> Şi va arată astfel: 3. <P> <IMG SRC="bear.Şi are ca efect inserarea în pagină a unei imagini.jpg" WIDTH="201" HEIGHT="132" BORDER=0 ALT="A big. brown bear"> <P><B>Oh. Alinierea imaginilor în text 86 .

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. pentru situaţia din figura de mai sus. pentru situaţia din figura de mai sus. Fie următoarea situaţie. care aliniază imaginea cu partea cea mai de sus a rîndului ALIGN=MIDDLE. left: Noua linie va începe în prima poziţie disponibilă SUB obiectul flotant. 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. • • • • • • • • ALIGN=TOP. care aliniază imaginea cu mijlocul rîndului (de fapt cu linia de bază) ALIGN=BOTTOM. noua linie (marcată cu semne +) va începe sub imagine. la marginea din stînga. cel care permite controlul alinierii imaginii cu linia de text alăturată. none: Noua linie va începe normal. la marginea din dreapta a imaginii: ********* | | | image | | | ********* --------------<BR> +++++++ 2. de la marginea din stînga: ********* | | | image | | | --------------<BR clear="left"> 87 . respectiv dreapta paginii 4. În acest caz. În acest caz. 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. Există următoarele valori posibile pentru controlul alinierii. Este valoarea implicită. Elementul care determină modul în care o va face este BR. noua linie (marcată cu semne +) va începe imediat sub cea intreruptă.Imaginile pot fi aliniate în document cu ajutorul atributului ALIGN. Dar. î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.

pentru situaţia din figura de mai sus.0 se restrînge utilizarea lui <IMG> pentru inserarea imaginilor. plug-in. tagurile vechi neindicînd mai nimic despre resursa care se ingloba în pagină. all: Noua linie va începe în prima poziţie disponibilă SUB obiectul flotant. chiar dacă rămîne permisă. un applet cu APPLET. după schema prezentată în tabelul următor: Tipul resursei care se inserează Imagini (gif. Explicaţia este dată de încercarea de generalizare a procesului de inserare şi a altor „obiecte“ (cum sînt. la marginea din dreapta. 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.0 fiecare tip de resursă ce se putea insera în paginile HTML îşi avea propriul tag. Pînă la HTML 4. la oricare margine. date necesare la execuţie. Începînd cu HTML 4. În acestă accepţiune termenul de „obiect“ denotă ceva ce se inserează în pagina HTML şi are ca sinonime: applet. etc) se introduceau probleme de accesibilitate. 4. 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. right: Noua linie va începe în prima poziţie disponibilă SUB obiectul flotant. Astfel funcţionalitatea acestor taguri a fost preluată de noul tag. de exemplu.. Includerea de „obiecte“ generale (elementul OBJECT). etc. jpg) Applet Alt document HTML Elementul specific IMG APPLET IFRAME Elementul generic OBJECT OBJECT OBJECT Tabelul indică faptul că fiecare tip de resursă ce poate fi inclusă are o soluţie specifică şi o soluţie generală. Sintaxa: <OBJECT>.********* ++++++++++++++++++ 3. valori iniţiale.. Elementul generic OBJECT va servi şi ca soluţie pentru implementarea altor tipuri. media handler. În acest caz.</OBJECT> 88 . El permite specificarea tuturor caracteristicilor necesare pentru a fi prezentate de un browser: codul sursă. noua linie (marcată cu semne +) va începe asemănător situaţiei clear=left: ********* ------| | ------| image | --<BR clear="all"> | | ********* ++++++++++++++++++ 5. appleturile) sub un singur tag: OBJECT.

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.Atribute posibile: • • • • • • • • • • • • • • • • • • Conţine: • elemente PARAM urmate de elemente de tip bloc şi/sau elemente de tip inline Conţinut în: • HEAD. 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. O descriere mai amănunţită este prezentată într-un paragraf anterior. appleturi Java. Cu el se includ imagini. Modul de utilizare este identic. elemente VRML. elemente de tip bloc. DATA. elemente de tip inline. Aproape toate atributele tag-ului <IMG> se pot folosi şi cu <OBJECT>. clipuri video. 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 89 .

Există două tipuri de imagini senzitive: • Client-side. Conţinut de tip bloc (block-level). lansarea unui program. putînd fi chiar omisă încărcarea sau procesarea conţinutului propriu-zis al acestuia (dacă nu poate fi făcută de browserul respectiv). Server-side.4. Autorii trebuie să ofere un text alternativ pentru fiecare porţiune definită cu 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. indiferent dacă se pointează într-o zonă activă sau nu. 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). Imaginea senzitivă de tip client-side poate fi definită cu unul dintre elementele IMG. 2. 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. Dacă două sau mai multe regiuni se suprapun. Unul sau mai multe elemente AREA. Imagini senzitive Imaginile senzitive permit specificarea unor regiuni ale unei imagini (sau obiect. OBJECT sau INPUT. 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. O imagine senzitivă este creată prin asocierea unui obiect cu o specificaţie a zonelor suprafeţei obiectului respectiv. Această metodă nu numai că este mult mai rapidă decît cea care implică programe care rulează pe server. 90 . Programul de pe server este cel care interpretează aceste coordonate şi realizează o anumită acţiune. Cînd regiunea este activată de utilizator se execută acţiunea respectivă. Legătura dintre cele două componenete se realizează prin intermediul atributului USEMAP al elementului cu care se defineşte imaginea senzitivă. Mai mult. Acesta va include elemente A ce specifică regiunile geometrice ale hărţii şi legăturile asociate cu fiecare regiune în parte. Cu aceasta se asociază o hartă de legături ce se defineşte cu elementul MAP. Prezenţa atributului USEMAP la definirea unui obiect (cu OBJECT) impune ca obiectul respectiv (ce este inclus) să fie o imagine. 1. De notat că atunci cînd această metodă este folosită elementul MAP nu afişează nimic. Fiecare element MAP poate conţine cel puţin unul dintre următoarele elemente: 1.5. • 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. rezultînd o metodă de creare a unor documente mai accesibile decît cea descrisă anterior. 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ă. De notat că atunci cînd se foloseşte această metodă elementul MAP poate fi afişat de browser. browserele trebuie să implementeze acţiunea cu obiectul respectiv exclusiv în termenii imaginii senzitive. Navigatorul selectează o legătură ce a fost specificată pentru regiunea activată şi o urmează. utilizînd atributul ALT. cînd acesta are o hartă asociată cu el. elementul definit în regiunea ce apar mai devreme în document este cel luat în consideraţie. etc). mai general) cărora să li se asocieze o acţiune specifică (de exemplu încărcarea unei resurse.

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.</MAP> Atribute posibile: • NAME=CDATA (numele hărţii) • atribute comune Conţine: • Unul sau mai multe elemente AREA. 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. Elementul AREA Sintaxa: <AREA> Atribute posibile: • • • • • • • • • Conţine: 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 91 . conţinutul acesteia nu este afişat de browser. Iniţial MAP a fost definit să aibă asociat unul sau mai multe elemente AREA care să specifice coordonatele unei regiuni active (clicabile).. Cînd MAP se foloseşte cu OBJECT. B. Combinate cu OBJECT acestea permit o alternativă cu conţinut mai bogat la imagini. astfel că varianta cu IMG este mult mai sigură. Atributul NAME este folosit ca ancoră pentru atributul USEMAP al elementelor IMG sau OBJECT.A. Elementul MAP Sintaxa: <MAP>. sau unul sau mai multe elemente de tip bloc Conţinut în: • elemente de tip inline. HTML 4. Dar nu toate browserele suportă acestea variantă (cu OBJECT).. browserele suportă de obicei numai imagini care au definită harta de legături cu MAP doar în acelaşi fişier cu imaginea. În timp ce MAP poate defini imagini senzitive incluse în alte fişiere.

O regiune cu TABINDEX=0 sau fără TABINDEX va fi vizitată după toate elementele cu o valoare pozitivă a acestui atribut. y2..• nimic Conţinut în: • elementul MAP Descriere: Acest element defineşte o regiune într-o imagine senzitivă. TITLE poate fi folosit pentru a descrie pe scurt conţinutul legăturii şi se foloseşte ca „tool-tip“. top. AREA acdeptă în plus faţă de evenimentele uzuale (core) acceptate de majoritatea elementelor şi atribute folosite de scripturile client: • • ONFOCUS. 92 . Valoarea implicită este „rect“ care defineşte un dreptunghi folosind COORDS="left. right. yN". Atributul boolean NOHREF indică faptul că regiunea respectivă nu are legătură asociată. Atributul TARGET este folosit cu frame-uri pentru a indica în ce frame se încarcă resursa indicată de legătură. specifică o regiune circulară folosind COORDS="center-x. radius". center-y. fără frame-uri Atributul ACCESSKEY specifică un caracter unic UNICODE folosit ca tastă de activare (shortcut) pentru urmărirea legăturii. . Dacă numele indicat nu există se va folosi o fereastră nouă. y1. Valorile coordonatelor sînt relative la colţul stînga-sus şi sînt exprimate în pixeli sau procente.. ONBLUR. x2. xN. circle. Atributele SHAPE şi COORDS specifică partea din imagine ce este inclusă în acea regiune. indică fereastră nouă _self. Se recomandă ca acesta să descrie funcţia şi nu regiunea. indică o fereastră nouă. Atributul HREF specifică o legătură la o altă resursă (ca de exemplu un document HTML sau o imagine JPEG). Fiecare regiune este o bucată de imagine care are asociată a altă acţiune cînd se face clic cu mouse-ul pe ea. Alte valori ale lzui SHAPE: • • • default. specifică o regiune poligonală folosind COORDS="x1. ce apare cînd regiunea primeşte focusul. Numele speciale de frame-uri încep cu underscore (liniuţa de subliniere): • • • • _blank. indică frame-ul parinte al celui curent _top. bottom". Cu cît valoarea pozitivă este mai mică cu atît regiunea va fi vizitată mai devreme.. TABINDEX specifică un număr între 0 şi 32767 care indică ordinea de parcurgere cu tasta TAB. Atributul ALT oferă text alternativ pentru cazul în care nu se încarcă imaginea. poly. ce apare cînd regiunea pierde focusul. indică frame-ul curent _parent. În caz de ambiguitate elementul ce apare mai întîi în document are prioritate. specifică toată imaginea.

195"> </MAP> Această hartă este folosită cu imaginea încărcată din fişierul „sitemap.png" USEMAP="#map" TYPE="image/png" TITLE="Sitemap" WIDTH=300 HEIGHT=200> <OBJECT DATA="sitemap. 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.295.195"> Design Guide </A></LI> <LI><A HREF="/tools/index.5. Definirea legăturilor Exemplu: Pentru o bară de butoane: <UL> <LI><A HREF=" Editorial.html">Oaspeţi</A> </UL> 93 . Ambele imagini partajează o hartă comună care este inclusa în fiecare dintre elementele definite cu OBJECT. plasată în documentul HTML cu tagul: <IMG SRC="sitemap.5. de dimensiuni 300 pixeli x 200 pixeli.gif" ALT="Site map" USEMAP="#mymap" WIDTH=300 HEIGHT=200> Exemplu: Acest exemplu foloseşte două imagini.gif“. a doua fiind o alternativă a primeia în cazul în care aceasta nu este suportată.5.95.html">Editorial</A> <LI><A HREF=" Index.html" COORDS="205.5.195. maparea figurii (şi transformarea ei într-o imagine senzitivă) se realizează în următorii paşi: a).295.html">Presa</A> <LI><A HREF=" Oaspeţi. 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. de tipuri diferite.195"> HTML and CSS Reference </A></LI> <LI><A HREF="/design/" COORDS="105.195"> Tools </A></LI> </UL> </MAP> </OBJECT> </OBJECT> În acest mod.html">Index</A> <LI><A HREF=" Presa.195.5.195"> <AREA HREF="/design/" ALT="Design Guide" COORDS="105.195"> <AREA HREF="/tools/" ALT="Tools" COORDS="205.Exemplu: Acest exemplu defineşte o hartă numită „mymap“ ale cărei zone active (3) sînt dreptunghiuri care indică spre trei adrese diferite.gif" USEMAP="#map" TYPE="image/gif" TITLE="Site map" WIDTH=300 HEIGHT=200> <MAP NAME=map> <UL> <LI><A HREF="/reference/" COORDS="5.

100"> Editorial</A> <LI><A HREF="Index..100"> Index</A> <LI><A HREF="Presa.100.100"> Oaspeţi</A> </UL> </IMG> 2.html" SHAPE="rect 200. pentru dreptunghi (x. Face apoi cîteva calcule pentru a vedea ce pagină să încarce şi încarcă pagina.gif> <UL> <LI><A HREF="Editorial. ele pot fi "văzute" numai de navigatoarele grafice. 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 stînga sus.x2.html">Oaspeţi</A> </UL> </IMG> c).l. h înălţime) • SHAPE="polygon x1. dificil de descris cu metoda anterioară) se poate lăsa sarcina aceasta pe seama serverului.yi 94 . Adăugarea figurii: <IMG SRC=logo.0.html">Presa</A> <LI><A HREF="Oaspeţi. l lăţime.y. Valorile lui sînt cele cunoscute din meniurile grafice de selecţie: • SHAPE="default" • SHAPE="circle x.html" SHAPE="rect 0. cu centrul în x.r" • SHAPE="rect x.100. Din cauza naturii grafice a imaginilor senzitive.b).y) ale punctului în care a fost activată imaginea (unde s-a făcut clic cu mouse-ul).html" SHAPE="rect 100. Imaginile senzitive de scest tip lucrează cu ajutorul unui script CGI (un program rezident pe server).html" SHAPE="rect 300.html">Editorial</A> <LI><A HREF="Index.y.y.100"> Presa</A> <LI><A HREF="Oaspeţi. Prima grijă deci." pentru poligon determinat de punctele xi. este să se creeze un text echivalent pentru pentru selecţia implicită pentru a defini un cerc de rază r. Imagini senzitive server-side Dacă harta imaginii senzitive este mult prea complicată (şi.gif> <UL> <LI><A HREF="Editorial.html">Index</A> <LI><A HREF="Presa. Cînd navigatorul activează o legătură de pe o imagine senzitivă.y1.100. 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ă..0. Adăugarea atributul SHAPE pentru a indica localizarea şi forma zonelor active.0.100. dacă se utilizează o imagine senzitivă.h" Exemplu: <IMG SRC=logo. 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.0. implicit.y2.

imagini care pot fi cu uşurinţă împărţite în poligoane). metodele pot diferi chiar pentru serverele de pe aceeaşi platformă. Ca şi în cazul altor scripturi CGI. 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ă.map = fişierul care conţine maparea imaginii ISMAP = tag-ul care declară că imaginea este senzitivă <img> = eticheta pentru imagine. Marcarea imaginii în documentul HTML se face de forma: <a href="http://nume_server/cgi-bin/nume_script/cale/fişier_de_mapare_imagine. De pildă. Tag-urile imaginii senzitive Primul pas este alegerea unei imagini care satisface anumite criterii pentru a fi potrivită ca imagine senzitivă.map. pentru diverse servere HTTP mai cunoscute şi utilizate (CERN şi NCSA) este descris în continuare. de pildă) sau sînt de forme complicate. cu atributul src cel care specifică fişierul imagine • • • 95 . care va specifica legătura între diferite regiuni ale imaginii şi URL-urile documentelor Web la care acestea fac referinţă. mai mult chiar. Scrierea unui fişier de mapare a imaginii. Un script CGI (program) în directorul cgi-bin care le ajută să funcţioneze împreună. Cele mai potrivite sînt cele care conţin arii vizuale distincte care pot fi selectate individual (de pildă. A.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"> <img src="nume_imagine_senzitivă. Totuşi. fiecare server are o altă metodă de implementare a mapării imaginilor. Fotografiile sînt mai dificil de mapat deoarece elementele tind să aibă o anumită continuitate (prin tonurile de culoare. care conţine maparea imaginii şi documentele HTML asociate legăturii (htimage pentru serverul CERN sau imagemap pentru serverul NCSA) imagine. Procesul de realizare a unei imagini senzitive de tip server side. serverele de tip CERN şi NCSA utilizează metode diferite pentru implementarea imaginilor senzitive.utilizatorii care se conectează în modul text.

aceasta este scalată pentru spaţiul rezervat.Exemplu: Imaginea pentru a fi prelucrată este logo.html poly (92.map. Marcarea ei în documentul HTML s-a făcut cu: <a href="http://www.98) /diropt/fisopt3. Forma fişierului de mapare depinde de scriptul CGI utilizat de server.y2 .. xn.68) (431.158) (149.90) (375.yn) URL Pentru serverul NCSA fişierul va fi de forma: default URL circle URL x. 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ă. Maparea imaginii Procesul de mapare înseamnă alegerea regiunilor active şi a fişierelor (sau documentelor HTML) apelate.154) /diropt/fisopt4.y r rectangle URL x.y x. Pentru serverul CERN fişierul arată de forma: default URL circle (x.65) (122.map"> <img src="logo.. Exemplu: default /diropt/fisopt1.100) /diropt/fisopt2.yl) (x2. URL-ul implicit (default) este utilizat ori de cîte ori mouse-ul activează o regiune care nu trimite 96 .85) (302. B.0) se află în colţul din stînga sus al imaginii iar direcţia pozitivă a axei Oy este în jos.156) (95.y) URL polygon (xl..yl x2.html Observaţii: 1.html rect (319. Dacă valorile specificate sînt mai mici decît dimensiunea imaginii.ro/cgibin/htimage/maps/poza. în cazul nostru).y polygon URL xl. găsirea coordonatelor regiunilor desemnate şi scrierea fişierului de mapare (poza.y) (x.. (xn.jpg" ISMAP alt="CSD Site" border=0 height=160 width =500></a> Tag-ul border a luat aici valoarea zero.y2) .html default rect (16.comp-craiova.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.yn point URL x.y) r URL rectangle (x.jpg.

Toate permit salvarea fişierului . noua adresă derivată ce va fi folosită pentru navigare va fi: „http://www.ro/cgi-bin/htimage/maps/poza. y=27.map fie în format CERN fie în format NCSA.acme.com/cgi-bin/competition?10.gif" ismap alt="target"> </A> se face click în punctul de coordonate x=10. Ordinea regiunilor din fişierul de mapare contează. 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). separate de virgulă. 2.spre un anumit document (în acest caz unul dintre dreptunghiuri sau regiunea trapezoidală). va activa cel mai apropiat punct definit în fişierul de mapare care apare pe imagine. fie automat.27“ 97 . Punctele (în mapările NCSA) permit specificarea faptului că un clic care nu cade direct pe o anumită regiune. utilizînd unul din produsele care permit desenarea regiunilor selectate cu ajutorul mouse-ului.jpg" ISMAP> </a> Activarea unei zone a imaginii senzitive înseamnă transmiterea către script a coordonatelor punctului activat. Maparea imaginii se poate face fie manual. 3.comp-craiova. Programe de acest tip: Mapedit (sub Windows) HotSpots for Windows.acme.map (creat anterior) trebuie depus într-un director (să zicem maps) aflat la acelaşi nivel cu cgi-bin.map"> <img src="logo.com/cgi-bin/competition"> <IMG src="game. Dacă de pildă două regiuni selectate se suprapun parţial (sau total) regiunea menţionată mai la începutul fişierului are prioritate la activare. 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. încărcînd imaginea într-un program care să permită notarea coordonatelor zonelor de interes. 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. 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. Exemplu: <a href="http://www. De exemplu. WebMap for Macintosh sau Mapedit (pentru X). C. Coordonatele sînt exprimate ca valori (în pixeli) relative la colţul stînga-sus al imaginii. dacă pentru imaginea senzitivă definită astfel: <A href="http://www. Legătura care se urmează este dată de această nouă adresă.

NOSHADE este un atribut care indică faptul că linia este fără efectul tridimensional dat de umbră. 2. & sau !. meniuri. Acestea vor fi complet ignorate de navigatoare la afişare/interpretare. Comentariile în documentele HTML Sintaxa: <!-. TD. Alte elemente legate de text şi imagini 1. 98 . FORM. Fiecare rînd de comentariu trebuie formatat în acest fel. BODY. SIZE determină grosimea (înălţimea). DEL. BUTTON. CENTER. iar WIDTH lungimea pe orizontală (poate fi şi procent din lăţimea paginii). NOSCRIPT.6. DIV. pot conţine orice caracter şi se termină la apariţia şirului -->. Comentariile încep cu şirul <!--. informaţii de contact. 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. MAP. TH Descriere: Tag-ul <HR> poate fi vid şi are ca efect crearea unei linii orizontale pe pagină. OBJECT. asemănătoare cu o linie solidă. 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 <. Liniile se pot substitui şi cu imagini care îndeplinesc acelaşi rol.Acesta este un comentariu --> Descriere: În toate documentele HTML se pot introduce comentarii. INS. IFRAME. Atributul ALIGN specifică alinierea în apgină. FIELDSET. LI. DD. BLOCKQUOTE. Nu este indicat să se includă alte tag-uri HTML între tag-urile de comentariu.4. NOFRAMES. 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. >.

gif"> Descriere: Cel mai simplu mod de a schimba fundalul se realizează utilizînd o culoare de fond. 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). Culoarea trebuie specificată în RGB pe 8 biţi. ca mai jos: 3. Fundalul unui document Sintaxa: <BODY BGCOLOR=#FFFFCA> <BODY BACKGROUND="imagine.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. Problema este alegerea unei imagini care alăturată sie însăşi să dea impresia de continuitate. Aceasta poate fi setată în tag-ul <BODY> prin atributul BGCOLOR. mai bine. sau 99 . o singură imagine aşezată alăturat de mai multe ori pînă la acoperirea completă a fundalului. 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.

Utilizate insistent. Atribut=Valoare TEXT LINK VLINK ALINK Semnificaţie Controlează culoarea întregului text din document Controlează culoarea legăturilor nevizitate (implicit. 100 . 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. purpuriu) Controlează culoarea unei legături asupra căreia este apăsat butonul mouse-lui (implicit. aceste efecte simple (ieftine) pot deveni iritante pentru vizitator.4. albastru) Controlează culoarea legăturilor vizitate (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.

cum ar fi: poziţionări în pagină ale textului sau al imaginilor grafice. 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. iar de către Microsoft Internet Explorer.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ă. etc. TFOOT şi respectiv TBODY). poziţionări ale elementelor grafice în interiorul textului. 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.Capitolul 5.0 permit ca în celulele tabelelor să fie introdus orice element HTML: text simplu. atît în cazul că este aşezat pe rînd cît şi în cazul aşezării pe coloană. adică dreptunghiurile individuale. Grupurile de rînduri oferă informaţie structurală suplimentară şi pot fi utilizate de browsere astfel încît să sugereze mai bine structura tabelului. imagini. HTML 4. adică valorile înscrise în celulele tabelului. tabelele reprezintă primul care a ajuns pe Web. tabelele se utilizau (în unele cazuri) şi pentru a produce efecte speciale. 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. pînă la apariţia style-sheet-urilor.1. fără a mai fi nevoite să aştepte tot conţinutul tabelului pentru a-l afişa. alte tabele. începînd cu versiunea 1. text (pre)formatat. se recomandă în HTML 4. Grupuri de coloane (care oferă informaţie structurală suplimentară) pot fi definite la începutul definiţiei unui tabel (prin intermediul elementelor COLGRUP şi COL). care oferă o scurtă descriere a conţinutul tabelului. legături. explicaţii/footer şi corp/body (prin intermediul elementelor THEAD.0 pentru codarea tabelelor sînt: • Explicaţia (elementul CAPTION).0 folosirea style-sheet-urilor pentru controlul aranjării în pagină (controlul layout-ului) Elementele luate în consideraţie de HTML 4. Celulele tabelului (elementul TD). Ele sînt suportate de Netscape Navigator. Acestea se pot întinde pe mai multe rînduri şi/sau coloane. formulare. dînd posibilitatea browserelor să afişeze tabelele incremental. 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). • • • • • 101 . Capul de tabel (elementul TH). Specificaţiile HTML 4. etc. Datele din tabel.0. Utilizarea tabelelor în limbajul HTML Din elementele noi introduse de HTML 3. În afara acestei utilizări. va fi scos în evidenţă faţă de restul tabelului. începînd cu versiunea 2.0. adică informaţia este mai sugestivă dacă este prezentată sub forma unei matrici cu rînduri şi coloane. poziţionări pe rînd ale imaginilor. pentru a le minimiza.

fără a aştepta încărcarea completă. Numărul de rînduri se stabileşte simplu: numărul de elemente TR conţinute de TABLE. grupate în coloanele corespunzătoare.</TH> defineşte o celulă cap de tabel pe acest rînd. celulă cu celulă ş.a. între header şi footer. pe măsură ce rîndurile tabelului sosesc.GIF"></TD> La afişarea unui tabel. 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. 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. să grupeze coloanele în conformitate cu specificaţiile de grupare a coloanelor să afişeze celulele rînd după rînd. rîndurile. Browserele vizuale formatează tabelul utulizînd atributele şi specificaţiile de stil (style-sheet). Acesta conţine toate elementele ce specifică titlul.. Perechea <TR>.. 102 . Marea majoritate a navigatoarelor ignoră spaţiile libere şi caracterul <CR>.d.. 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.1. perechea <TH>. În acest fel. fiecare rînd conţinînd definiţii pentru fiecare din celulele care îl formează. se recomandă punerea tag-urile în acelaşi rînd. Prin urmare.. Descrierea tabelelor (elementul TABLE) Descrierea unui tabel se face cu elementul TABLE. iar perechea <TD>.m. apoi footerul.0 este proiectat astfel încît afişarea acestora să se facă incremental. dacă sînt specificate. pentru a defini un tabel se începe prin a defini rîndul din partea de sus. O excepţie totuşi: atunci cînd inseraţi o imagine într-una din celulele tabelului.</TR> defineşte începutul. Tabelele sînt specificate în HTML rînd cu rînd. apoi se defineşte al doilea rînd. modelul de tabel din HTML 4. conţinutul şi formatul acestora. celulă cu celulă. Exemplu: <TD><IMG SRC="A. Coloanele sînt calculate automat pe baza numărului de celule care sînt în fiecare rînd. respectiv sfîrşitul rîndului. pentru a obţine plasarea corectă a imaginii în toate browserele..</TD> defineşte o celulă de date din rînd..

LI. textul 103 . un număr oarecare de rînduri definite în principal cu <TR>. CAPTION poate fi urmat. BODY. Laţimile date în pixeli (în special cele peste 500) ar trebui evitate întrucît. TH 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ţinut în: • Descriere: Orice tabel începe cu tag-ul: <TABLE> şi se termină cu </TABLE>. IFRAME. conţin elemente TH sau TD pentru celulele header sau de date. NOFRAMES. FORM. de elemente COL şi COLGROUP care specifică lăţimea coloanelor şi modul de grupare al acestora.Elementul TABLE Sintaxa: <TABLE> . în esenţă. DEL. Apoi urmează THEAD. OBJECT. FIELDSET. opţional. şi apoi un element sau mai 7multe elemente opţionale TBODY. între ele fiind conţinutul tabelului propriu-zis care poate conţine o explicaţie cu <CAPTION> şi. 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 ALIGN=LEFT Semnificaţie Aliniază tabelul cu marginea din stînga a textului. MAP.</TABLE> Atribute posibile: • • • • • • • • • • Conţine: • Un element opţional CAPTION. INS. un element opţional 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. Un grup de rînduri conţine elemente TR ce definesc rîndurile individual. uneori. DIV. BLOCKQUOTE. CENTER. care. cauzează scroll inutil orizontal. NOSCRIPT. BUTTON. Într-un tabel definit cu TABLE este necesar cel puţin un element TBODY. la rîndul lor.. TFOOT şi TBODY care definesc grupurile de rînduri. APPLET. urmat de zero sau mai multe elemente COL şi COLGROUP.. TD. urmat de un element opţional THEAD. DD. 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.

>. conţinutul care urmează lui TABEL curgînd pe lîngă el (dacă se poate). Metoda recomandată este cea a style-sheet-urilor. dar efectele pot fi imprevizibile dacă se ia în considerare posibilitatea de suprascriere a acestor atribute de către browsere. EN (implicit) sau procente (RELATIVE) din dimensiunea totală a tabelului. Atributul RULES. UNITS poate avea ca valori PIXELS. 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. <TABLE> mai poate fi folosit împreună cu atributele UNITS şi COLSPEC. 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). textul va curge pe marginea din stînga a tabelului Browser-ele tratează în general tabelele ca fiind „flotante“. dacă nu este specificat atributul BORDER cu o valoare pozitivă.. textul nu va curge prin nici una din părţile tabelului Aliniază tabelul cu marginea din dreapta a textului. caz în care valoarea implicită este box. Orice altă folosire a lui BORDER are ca efect trecerea lui all ca valoare implicită. <TABLE BORDER> este o abreviere foarte bine suportată pentru <TABLE FRAME=border>. puţin suportat acum de browsere. Atributul BGCOLOR sugerează o culoare de background pentru tabel. Poate fi folosită în combinaţie cu <FONT COLOR=. 104 . şi el destul de puţin suportat de browsere. specifică marginile interioare vizibile (între celulele tabelului). Atributul tag-ului <TABLE> FRAME. Pentru a preveni această manifestare se poate folosi elementul „break“ <BR CLEAR=all> la sfirşitul lui TABLE.va curge pe marginea din dreapta a tabelului ALIGN=CENTER ALIGN=RIGHT Aliniază tabelul în mijlocul paginii.. specifică marginile exterioare vizibile ale tabelului.

Figura următoare sugerează aceste elemente: Exemplu: Un tabel simplu ar putea fi descris astfel: <TABLE> <CAPTION>Common Usenet Abbreviations</CAPTION> <THEAD> <TR> <TH>Abbreviation</TH> <TH>Long Form</TH> </TR> </THEAD> <TBODY> <TR> <TD>AFAIK</TD> <TD>As Far As I Know</TD> </TR> <TR> <TD>IMHO</TD> <TD>In My Humble Opinion</TD> </TR> <TR> <TD>OTOH</TD> <TD>On The Other Hand</TD> </TR> </TBODY> </TABLE> Exemplu: Un alt exemplu de tabel poate fi următorul: <TABLE border="1" summary="This table gives some statistics about... "> <CAPTION><EM>A test table with merged cells</EM></CAPTION> <TR> <TH rowspan="2"> <TH colspan="2">Average <TH rowspan="2">Red<BR>eyes <TR> <TH>height 105 .spaţiul dintre marginile celulelor şi conţinut.Atributul tag-ului <TABLE> BORDER indică lăţimea chenarului tabelului. CELLSPACING spaţiul dintre celulele tabelului. iar CELLPADDING .

7 | 0.9 | 0. informaţiile adiţionale (mai bogate) descriind scopul tabelului şi structura lui se oferă prin atributul summary al elementului TABEL. Acesta este permis doar imediat după tagul de început al lui TABLE şi poate apare maxim o dată în descrierea unui tabel.9 <TD>0. Explicaţia unui tabel (elementul CAPTION) Natura unui tabel (ce conţine sau cum se foloseşte. 106 . rezultă că este inadecvat ca sumar (descriere mai pe larg) din perspectiva unor utilizatori ai unor browsere nevizuale.7 <TD>0.003 <TD>40% <TR> <TH>Females <TD>1. 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. întocmai ca headerele acestuia.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. Acest element permite deducerea rapidă structurii unui tabel. pentru ca aceasta să fie nevoită să facă scroll.002 | 43% | \-----------------------------------------/ iar cu unul grafic astfel: 2.<TH>weight <TR> <TH>Males <TD>1.003 | 40% | |-----------------------------------------| | Females | 1. De aceea. etc) este descrisă de elementul CAPTION. Ca o consecinţă.

utilizînd elementele THEAD.</CAPTION> Atribute posibile: • • Conţine: • • elemente inline TABLE Conţinut în: Descriere: Elementul CAPTION defineşte o explicaţie pentru un tabel. De pildă explicaţiile pot fi extrase într-un fişier separat sau pot fi numerotate. 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. dar pentru cele mai complexe trebuie completat cu un sumar adevărat. respectiv. legendă a tabelului (foot) şi una sau mai multe secţiuni. iar corpul acestuia să conţină rîndurile de date. pot fi repetate pe fiecare pagină cînd astfel de tabele se listează. Cînd sînt prezente.. fiecare element THEAD.. Exemplu: Un exemplu de utilizare a acestui element este dat în cele ce urmează: <TABLE> <CAPTION>Common Usenet Abbreviations</CAPTION> <THEAD> ."> <CAPTION>Symbols and Greek Letters in HTML 4. 107 . Secţiunile definite de THEAD.. Valoarea implicită este top. implementat de atributul SUMMARY..0</CAPTION> . TFOOT şi TBODY) Rîndurile unui tabel pot fi grupate în cap de tabel (head). decimal character reference. Headerul şi footerul trebuie să conţină informaţii despre coloanele tabelului. TFOOT şi. and hexadecimal character reference for symbols and Greek letters.. </TABLE> 3. TFOOT şi TBODY conţine grupuri de rînduri.. la rîndul lor. Fiecare astfel de grup trebuie să conţină cel puţin un rînd definit cu TR. Atributul ALIGN specifică modalitatea de aliniere faţă de tabel. TFOOT şi TBODY trebuie să conţină acelaşi număr de coloane. Această divizare permite browserelor să suporte scrollul corpului tabelului independent de headerul şi footerul tabelului. care.Elementul CAPTION Sintaxa: <CAPTION>. Grupuri de rînduri (elementele THEAD. Pentru tabelele simple poate să fie şi un sumar. O explicaţie bună trebuie să ofere un scurt antet pentru tabel. TBODY. </TABLE> ALIGN=[ top | bottom | left | right ] (alinierea explicaţiei) atribute comune iar o completare cu un sumar poate arăta astfel: <TABLE SUMMARY="This table gives the character entity reference.

. al treilea rînd al blocului doi de date ... .. 108 . tabelul anterior poate fi descris mai pe scurt astfel: . primul rînd al primului bloc de date . . .. informaţii de header ..... primul rînd al blocului doi de date .. al doilea rînd al blocului doi de date .... . al doilea rînd al primului bloc de date .. dar cele de final pot fi omise şi ele fără probleme.... Î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. al treilea rînd al blocului doi de date ... footerului şi corpurilor unui tabel: <TABLE> <THEAD> <TR> </THEAD> <TFOOT> <TR> </TFOOT> <TBODY> <TR> <TR> </TBODY> <TBODY> <TR> <TR> <TR> </TBODY> </TABLE> .. informaţii de footer . primul rînd al primului bloc de date . al doilea rînd al blocului doi de date . <TABLE> <THEAD> <TR> <TFOOT> <TR> <TBODY> <TR> <TR> <TBODY> <TR> <TR> <TR> </TABLE> • Astfel.....Exemplul următor ilustrează ordinea şi structura headerului... primul rînd al blocului doi de date .. informaţii de footer . Tagul de final al lui TBODY poate fi omis întotdeauna fără probleme.......... . astfel ca browserele să poată interpreta (afişa) footerul înainte de recepţionarea tuturor (potenţial) numeroaselor rînduri de date. . .. Tagurile de start pentru THEAD şi TFOOT sînt necesare cînd apar secţiunile descrise de acestea.. . al doilea rînd al primului bloc de date . .. ....... .. TFOOT trebuie să apară înainte de TBODY în cadrul lui TABLE..... .... informaţii de header ....

care poziţionează datele în centrul celulei. a cărui valoare implicită este punctul zecimal. TH. cele de antet rămînînd fixe pe ecran. care poziţionează datele la marginea de sus a celulei.</THEAD> Atribute posibile: • • • • • Conţine: • • unul sau mai multe elemente TR TABLE Conţinut în: Descriere: Elementul THEAD defineşte un grup de rînduri de tip header (antet) într-un tabel. precum şi posibilitatea de prezenta tabele care permit scroll doar rîndurilor de date. TD).. ALIGN=char aliniază conţinutul după un anumit caracter dat de atributul CHAR. care poate apare după CAPTION. CHAROFF="50%" aliniază caracterul de aliniere în centru celulei.. care specifică alinierea primei linii a celulei (indiferent ce conţine) la o linie de bază a fontului (baseline) comună. care poziţionează datele la marginea de jos a celulei. 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 B. Elementul TFOOT Sintaxa: 109 . Valoarea lui este un număr de pixeli sau un procent din lăţimea celulei. Elementul THEAD Sintaxa: <THEAD>. COL sau COLGROUP. CHAROFF specifică offsetul primei apariţii a caracterului de aliniere. middle. autorii oferă browserelor posibilitatea de a include acele rînduri pe fiecare pagină tipărită a unui tabel mare. bottom. Întrucît nu toate browserele îl suportă. baseline. dar folosirea lui nu conduce la nici o problemă la acestea. valoarea implicită. Prin gruparea explicită a rîndurilor de antet cu THEAD. Atributul VALIGN specifică poziţia verticală a conţinutului celulelor şi poate lua valorile: • • • • top. Nu toate browserele suportă acest element. şi poate preceda elementele TFOOT (opţional) şi TBODY (obligatoriu). Atributul ALIGN specifică alinierea orizontală pentru fiecare celulă din grupul de rînduri. Un tabel definit cu TABLE poate avea un singur THEAD. aceste atribute se pot specifica şi direct celulelor (definite cu TR. THEAD permite specificarea unor atribute de prezentare pentru alinierea celulelor de date ale tabelului.A.

</TFOOT> Atribute posibile: • • • • • Conţine: • • unul sau mai multe elemente TR TABLE Conţinut în: Descriere: Elementul TFOOT defineşte un grup de rînduri de tip footer într-un tabel.. Nu toate browserele suportă acest element. precum şi posibilitatea de prezenta tabele care permit scroll doar rîndurilor de date. cele de footer rămînînd fixe pe ecran."> <CAPTION>Programs Available</CAPTION> <THEAD> <TR> ... Atributele (şi semnificaţiile lor) sînt aceleaşi cu cele de la THEAD. Prin gruparea explicită a rîndurilor de footer cu TFOOT.<TFOOT>. Exemplu: Următorul exemplu foloseşte TFOOT pentru a defini „note de pagină/picior“ pentru tot tabelul: <TABLE SUMMARY="This table lists. care poate apare după THEAD (opţional) şi poate preceda elementul TBODY (obligatoriu).... de tip sumar sau de tip „notă de pagină/picior“.. Un tabel definit cu TABLE poate avea un singur TFOOT.... iar cerinţa de a fi plasat înainte de TBODY îl face nerecomandat pentru acestea. Un footer poate oferi un rînd special. ce se aplică unui tabel întreg sau numai unei porţiuni din el. </TR> </THEAD> <TFOOT CLASS=footnote> <TR> <TD COLSPAN=5> Many disciplines are also available as Minors and Joint Honors programs. </TD> </TR> </TFOOT> <TBODY>. </TD> </TR> <TR> <TD COLSPAN=5> * Preprofessional programs . </TBODY> 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 110 . autorii oferă browserelor posibilitatea de a include acele rînduri pe fiecare pagină tipărită a unui tabel mare.

autorii oferă browserelor posibilitatea de a prezenta tabele care permit scroll doar rîndurilor de date. în esenţă din rînduri care conţin celulele în care se introduc elementele ce fac parte din tabel (datele).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> 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 Prin gruparea explicită a rîndurilor de date cu TBODY.. Un tabel definit cu TABLE poate avea unul sau mai multe elemente TBODY. cele de header şi footer rămînînd fixe pe ecran. gruparea rîndurilor de date în mai multe TBODY permite sugerarea unor prezentări diverse pentru diferitele grupuri. prin intermediul style-sheet-urilor. left. Tagul de sfîrşit este întotdeauna opţional. Aceste caracteristici sînt: • Alinierea orizontală a textului (ALIGN [=right.</TBODY> Atribute posibile: • • • • • Conţine: • • unul sau mai multe elemente TR TABLE Conţinut în: Descriere: Elementul TBODY defineşte un grup de rînduri de date într-un tabel. Un rînd de date este descris prin intermediul elementului TR. Elementul TBODY Sintaxa: <TBODY>. center]) 111 . Atributele au aceeaşi semnificaţia ca la THEAD şi TFOOT. dar folosirea lui nu conduce la nici o problemă la acestea. care pot apărea după elementul TFOOT (opţional). Definirea rîndurilor (elementul TR) Un tabel este alcătuit. pentru fiecare celulă în parte.. Nu toate browserele suportă acest element.</TABLE> C. 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. Atributele acestui element permit descrierea unor caracteristici comune tuturor celulelor din acel rînd. În plus. 4. chiar dacă acestea pot fi specificate ulterior şi individual.

structura simplă a tabelului din HTML 3. Întrucît tagurile de început şi de sfîrşit ale lui TBODY sînt opţionale.. bottom]) Culoarea de background (BGCOLOR [=valoarea culorii în hexa]) Culoarea marginilor [a se vedea atributele lui TABLE] Elementul TR Sintaxa: <TR>.</TR> Atribute posibile: • • • • • • Conţine: • • unul sau mai multe elemente TH sau TD TABLE. middle. TFOOT sau TBODY. Semnificaţia acestora este aceeaşi cu cea de la elementele anterioare. În plus faţă de atributele comune prezente la cele mai multe elemente. Elementele TR pot fi grupate cu ajutorul lui THEAD. TFOOT. 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 112 . TBODY Conţinut în: Descriere: Elementul TR defineşte un rînd într-un tabel. care la rîndul lor conţin datele propriu-zise din tabel. TR poate avea şi atribute de prezentare pentru alinierea celulelor în rînd şi specificarea culorii de background.2 rămîne validă. TR conţine elemente TH sau TD.• • • Alinierea verticală a textului (VALIGN [=top..

de ceşti de cafea băute la o felul cafelei (normă/decofeinizată) şi dacă este cu/fără zahăr. Tabel care indică nr. Datele propriu-zise ale tabelului se inserează în celule descrise cu elementul TD. chiar şi în absenţa style-sheet-urilor. fiecare coloană avînd un header (cap de coloană) care o descrie: <TABLE summary=" reuniune. următorul tabel conţine (descrie) 2 rînduri cu cîte 4 coloane (celule) pe fiecare rînd. "> <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. iar cele care sintetizează vocea cu o inflexiune specială a vocii. Sexton J. În acest caz pot apare probleme la afişarea marginilor celulei respective (unele browsere nu desenează marginile celulelor goale.5. acestea trebuind să conţină un element invizibil. Definirea celulelor unui tabel (elementele TH şi TD) Celule unui tabel pot conţine două tipuri de informaţie: informaţie antet (header. 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. cap de tabel) şi date. Dinnen</TD> <TD>5</TD> <TD>Decaf</TD> <TD>Yes</TD> </TABLE> Acest tabel poate arăta astfel: Name T. pentru ca marginea rîndului să nu fie întreruptă). De exemplu browserele vizuale pot prezenta headerele cu un font bold. Această distincţie permite browserelor să prezinte diferit cele două feluri de celule. Dinnen Cups 10 5 Type of Coffee Espresso Decaf Sugar? No Yes 113 . de exemplu un blanc. Celulele unui tabel pot fi goale (fără nici un conţinut). Există două tipuri de astfel de informaţie: cea descrisă cu TH şi valoarea atributului ABBR. Informaţia de tip header se descrie cu elementul TH. De exemplu.

Atributul HEADERS specifică celulele header ce se aplică lui TH. Valoarea implicită este 1. Valoarea specială 0 indică suprapunerea tuturor rîndurilor sau coloanelor pînă la sfîrşitul tabelului. valoarea este o listă a valorilor atributului ID a acelor celule. cap de tabel). Atributul SCOPE specifică celulele pentru care elementul descris cu TH oferă informaţii de header (antet). 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. Dacă o celulă este şi antet şi dată trebuie folosit TD. peste care se intinde celula). elemente tip bloc TR Conţinut în: Descriere: Elementul TH defineşte o celulă de tip header (antet.A. dar este ignorată de majoritatea browserelor. Atributul ABBR dă o versiune abreviată a conţinutului celulei.</TH> Atribute posibile: • • • • • • • • • • • • • • • Conţine: • • elemente inline. 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ă.. Se foloseşte de browserele nevizuale. Elementul TH Sintaxa: <TH>. Valoarea acestui atribut este o listă de nume de categorii. 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 114 ..

care poate să conţină şi elemente TH. iar WIDTH. elemente tip bloc TR Conţinut în: Descriere: Elementul TD defineşte o celulă de date.. Semnificaţia atributele este aceeaşi cu cea de la TH. NOWRAP şi BGCOLOR sînt depăşite în favoarea style-sheet-urilor. CHAROFF.Atributele ALIGN. 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 115 . BGCOLOR au aceeaşi semnificaţie ca la TR. Elementul TD Sintaxa: <TD>. CHAR..</TD> Atribute posibile: • • • • • • • • • • • • • • • Conţine: • • elemente inline. Elementele TD sînt conţinute în TR. HEIGHT. B. Dacă o celulă este şi antet şi dată trebuie folosit TD. VALIGN.

respectiv rînduri peste care se doreşte să fie extinsă celula. Extinderea se obţine cu ajutorul atributelor COLSPAN şi ROWSPAN utilizate cu tag-urile <TH> sau <TD>. Valorile atributelor reprezintă numărul de coloane. 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. 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. celulele pot fi extinse atît orizontal (pe mai multe coloane) cît şi vertical (pe mai multe rînduri). Trebuie avut în vedere că în cazul unor descrieri eronate (cu celule care se „suprapun“) browserele reacţionează diferit. Definirea celulelor extinse (atributele COLSPAN şi ROWSPAN) Sintaxa: <TH COLSPAN=nr. rezultînd o suprapunere între celulele "7" şi "9": <TABLE border="1"> <TR><TD>1 <TD>2 <TD>3 <TR><TD>4 <TD rowspan="2">5 <TD>6 <TR><TD colspan="2">7 <TD>9 </TABLE> Exemplu: Un tabel cu celule extinse descris corect ar putea fi următorul: <TABLE BORDER> <TR> <TH COLSPAN=2></TH> <TH>Celula din stînga este<BR>extinsă pe două coloane<BR>Rîndul 1</TH> </TR> <TR ALIGN=CENTER> <TH ROWSPAN=2>Celulă extinsă<BR>pe două rînduri</TH> <TH>Capul rîndului 2</TH> <TD>Rîndul 2</TD> </TR> <TR ALIGN=CENTER> <TH>Capul rîndului 3</TH> <TD>Rîndul 3</TD> </TR> </TABLE> Exemplu: Acest exemplu ilustrează cum afectează definirea unei celule extinse vecinii săi (aici celula de sub): <TABLE border="1"> <TR><TD>1 <TD rowspan="2">2 <TD>3 <TR><TD>4 <TD>6 <TR><TD>7 <TD>8 <TD>9 </TABLE> 116 . rînduri></TH> Descriere: Pentru nevoi de organizare a datelor din tabel sau pentru obţinerea de efecte. coloane></TH> sau <TH ROWSPAN=nr. 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ă. efectele putînd fi uneori imprevizibile.6.

folosind elementul COLGROUP. lăţime. Numărul de coloane ce fac parte dintr-un grup se poate specifica în două moduri (mutual exclusive): 1.Î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. Cu atributul SPAN al elementului (valoare implicită 1) 2. rezultînd un tabel ca în figura următoare: Exemplu: Acelaşi tabel. astfel.. Avantajul folosirii atributului SPAN (metoda 1) este că se pot grupa informaţii despre lăţimile coloanelor. 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... etc) într-un grup. Grupuri de coloane (elementul COLGROUP) Într-un tabel se pot grupa şi coloanele. fiecare cu o lăţime de 20 pixeli. </COLGROUP> Cînd este necesar să se individualizeze o coloană (pentru stil. se poate identifica acea coloană cu un element COL. inclus în COLGROUP. Astfel. De exemplu. pentru a aplica un stil special ultimei coloane a tabelului dat ca exemplu anterior se poate folosi: 117 .pînă la 40 de coloane. al doilea TD din rînd defineşte a treia celulă ("6"): 7. este mult mai uşor de scris: <COLGROUP span="40" width="20"> </COLGROUP> de cît: <COLGROUP> <COL width="20"> <COL width="20"> .. Cu elementul COL. se reprezintă una sau mai multe coloane din grupul respectiv. în rîndul doi. Astfel. dacă un tabel conţine 40 de coloane. al doile TD defineşte de fapt celula a treia de pe rînd. cu o extindere pe rînd. nu numai rîndurile.

</TABLE> Elementul COLGROUP Sintaxa: <COLGROUP>.<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.. În exemplul următor se descrie un tabel cu două grupe de coloane. elemente COL care definesc atributele pentru celulele din coloane în mod individual... Atributul SPAN nu trebuie utilizat dacă COLGROUP conţine COL. COLGROUP trebuie să apară după elementul (opţional) CAPTION şi înaintea elementului (tot opţional) THEAD. 118 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 . 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. Diviziunea structurală definită de COLGROUP permite sugerarea unei prezentări comune pentru tot grupul de coloane prin intermediul style-sheet-urilor. 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> . valoarea implicită este 1. Atributul SPAN defineşte numărul de coloane din grup. </COLGROUP> Atribute posibile: • • • • • • • Conţine: • Zero sau mai nmulte elemente COL Conţinut în: • TABLE Descriere: Acest element defineşte un grup de coloane într-un tabel. Lăţimea implicită pentru fiecare coloană din primul grup va fi 50 de pixeli. Celelalte atribute permise cu acest element sînt comune coloanelor din tabel. astfel ca un stil defint cu tehnica style-sheet-urilor să se refere la el. de asemenea. suprapunîndu-se în acest fel atributele definite pentru grup. Dacă e folosit. Prima conţine 10 coloane.. Poate conţine. iar cea de a doua 5.

A treia parte.. de 3 coloane. 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.</TD> <TD>&#xA0.. procent din lăţimea tabelului sau o lăţime relativă exprimată ca i*. Valoarea WIDTH="0*" este echivalentul minimului necesar pentru afişarea conţinutului coloanei. O doua. permiţînd astfel sugerarea diferită a prezentării pentru respectivele coloane. multe dintre ele neputînd fi însă înlocuite complet de style-sheet-uri. as well as the rendering of each in your browser. and hexadecimal character reference for 8-bit Latin-1 characters.COLGROUP poate avea şi un număr de atribute de prezentare."> <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.</TD> <TD>&#160. cu i intreg.</TD> </TR> . arată cum va apare caracterul respectiv în diverse browsere.</TD> <TD>&amp. Valoarea trebuie să fie un număr de pixeli.</TD> <TD>&amp. </TBODY> </TABLE> În locul lui <COLGROUP SPAN=3> se poate folosi un COLGROUP cu 3 elemente COL. Întrucît nu toate browserele suportă COLGROUP.#xA0. prin folosirea style119 . Atributele celelalte au aceeaşi semnificaţie ca la elementele anterioare. se pot specifica aceste atribute şi celulelor individuale (elementelor TH şi TD). Atributul WIDTH specifică lăţimea fiecarei coloane din grup. Exemplu: Acest exemplu oferă o perspectivă asupra divizării structurale a unui tabel în 3 părţi.</TD> <TD>&nbsp. O coloană care are WIDTH="3*" va avea lăţimea de 3 ori cît una care are WIDTH="1*".nbsp. Prima parte este alcătuită dintr-o singură coloană care dă descrierea unui caracter. <TABLE SUMMARY="This table gives the character entity reference. tot de 3 coloane. decimal character reference.#160. dă diverse moduri de a reprezenta caracterul respectiv în HTML.

COLGROUP Descriere: Acest element defineşte doar atributele comune unei coloane a unui tabel şi. 8. 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.sheet-urilor. as well as the rendering of each in your browser. 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). COL trebuie să apară după elementul (opţional) CAPTION şi înaintea elementului (tot opţional) THEAD. decimal character reference. caz în care suprascrie atributele definite de acesta. Atributul SPAN defineşte numărul de coloane care partajează aceleaşi atribute."> <COLGROUP CLASS="character-description"> 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 120 . Elementul COL Sintaxa: <COL> Atribute posibile: • • • • • • • Conţine: • vid (nu conţine nimic) Conţinut în: • TABLE. Celelalte atribute au aceeaşi semnificaţie ca la elementul COLGROUP. COL poate fi conţinut direct în TABLE sau poate apare în COLGROUP. nu grupează structural coloanele tabelului. spre deosebire de COLGROUP. and hexadecimal character reference for 8-bit Latin-1 characters. Definirea atributelor comune coloanelor (elementul COL) Elementul COL permite autorilor paginilor HTML gruparea împreună a atributelor unor coloane. Dacă e folosit. valoarea implicită este 1.

</TD> <TD>&#xA0.#xA0.nbsp.</TD> <TD>&amp.<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.#160.</TD> <TD>&nbsp..</TD> <TD>&#160. </TBODY> </TABLE> 121 .</TD> </TR> .</TD> <TD>&amp..

..rîndurile tabelului. Pentru fiecare COLGROUP ce conţine cel puţin un COL se ignoră atributul SPAN al fiecărui COLGROUP.... Odată ce s-a calculat numărul de coloane. . </TABLE> 4. cele 2 metode trebuie să dea acelaşi rezultat: 3 coloane..9.. <TABLE> <COLGROUP> <COL> </COLGROUP> <COLGROUP span="2"> <TR><TD> .. . Pentru fiecare COL se aplică pasul 1. <TABLE> <COLGROUP> <COL> <COL span="2"> </COLGROUP> <TR><TD> . . <TABLE> <COLGROUP span="3"></COLGROUP> <TR><TD> . 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).. 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. Altfel. rîndurile tabelului. acestea pot fi grupate. Calculul lăţimii coloanelor dintr-un tabel 122 . Primele trei tabele pot fi afişate incremental: 1. <TABLE> <TR> <TD><TD><TD> </TR> </TABLE> 10. Exemplu: Pentru fiecare dintre tabelele descrise în continuare.. Pentru toate rîndurile care au mai puţine coloane se adaugă la sfîrşit celule goale.. </TABLE> 3. Pentru fiecare COLGROUP vid se ia valoarea lui SPAN (valoarea implicită 1). rîndurile tabelului... 2..... </TABLE> 2. Dacă tabelul conţine COLGROUP şi COL şi cele două metode de calcul nu dau acelaşi rezultat atunci este vorba despre o eroare. dacă TABLE nu conţine COLGROUP sau COL numărul de coloane se determină din descrierea rîndurilor. 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)..

şi astfel această metodă permite şi ea afişarea tabelelor incremental. 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. 2. Dacă lăţimea coloanei se dovedeşte prea mică pentru conţinutul acesteia. width="3*") se referă la porţiunile de spaţiu orizontal solicitate de tabel. . Urmatoarele trei aparţin explicit primului grup şi ultimele două aparţin celui de al doilea grup explicit.. Procent Specificarea unei lăţimi ca procent (ex. <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> .Lăţimea unei coloane poate fi specificată în trei moduri: 1. Dacă. Numai atunci se poate determina şi lăţimea coloanelor... Dacă lăţimea tabelului este dată ca o valoare fixă. însă. 3.. width="20%") este dată în funcţie de lăţimea disponibilă pentru întreg tabelul. tabelul nu are o lăţime fixă. Aceasta nu depinde de tabelulul însuşi. Prima nu aparţine explicit nici unui grup. </TABLE> 123 . atunci şi această metodă permite afişarea tabelelor incremental.. browserele nu vor capabile să formateze tabelul incremental. prin intermediul atributului width al elementului TABLE.rîndurile tabelului. Dacă nu se specifică nici o informaţie despre lăţimea unei coloane. Proporţional Specificarea unei lăţimi în mod proporţional (ex. întrucît trebuie să aştepte întregul conţinut al coloanei pentru a determina lăţimea acesteia. Această metodă permite afişarea tabelelor în mod incremental (pe măsură ce se încarcă rîndurile tabelului). width="30"). browserele trebuie să aştepte încărcarea integrală a tabelului înainte de a determina lăţimea orizontală cerută de tabel.. Exemplu: Tabelul următor are 6 coloane. browserele pot alege să reformateze tabelul. Fix Specificarea unei lăţimi fixe este dată în pixeli (ex.

4. Modul în care sînt afişate depinde de browser. COL chiar asta şi face prin specificarea faptului că fiecare celulă din coloana a şasea va fi aliniată după caracterul ":". Valoarea atributului align din coloana a treia este "center".În momentul în care browserul recepţionează toate datele din tabel. </TABLE> Primele 10 coloane au fiecare cîte 15 pixeli lăţime.. 3. speţiul orizontal disponibil va fi alocat coloanelor după cum urmează: 1. border = pixels Acest atribut specifică lăţimea (în pixeli) a marginilor exterioare. 2. . Exemplu: Tabelul următor. Toate celule din fiecare coloană din acest grup vor moşteni această valoare. 2. 124 . Se rezervă spaţiul minimal pentru coloana trei.. rules = none|groups|rows|cols|all Acest atribut specifică marginile interioare (care delimitează celulele tabelului) care vor fi vizibile. 11. 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> . Se alocă 30 de pixeli coloanelor unu şi doi.. De fapt.. coloana a cincea (1*) o parte şi coloana a şasea (3*) va primi 3 parţi. dar o pot suprapune. 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). Ultimele două coloane vor primi fiecare jumătate din cei 50 de pixeli care mai rămîn. aşa cum are descrisă lăţimea. 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.rîndurile tabelului. Coloana a patra (2*) va primi 2 părţi... Elementele COL apar doar pentru a se specifica o valoare atributului id. 3.

Orice altă valoare pentru border implică frame="border" şi. TD. Opţiunile sînt exprimabile prin intermediul unor atribute ale tag-urilor TR. Valoarea "border" în tagul de început al lui TABLE trebuie interpretat ca valoare a atributului frame. TH. Atributele care afectează alinierea datelor în celule unui tabel sînt: 1. rules= "all". rules="none". în partea stîngă şi dreaptă. se impun următoarele reguli: • • • Dacă border="0" atunci frame="void" şi. dacă nu este specificat altfel. dacă nu este specificat altfel. COLGROUP. 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ă. 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ă. 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. Aceasta implică rules="all" şi o valoare diferită de zero pentru atributul border.Pentru a se păstra compatibilitatea cu versiunile anterioare. COL. de 5 pixeli grosime. align = left|center|right|justify|char Atributul ALIGN este utilizat pentru aliniere orizontală şi poate lua următoarele valori: Valoare LEFT RIGHT CENTER JUSTIFY CHAR Descriere Datele din celulă sînt aliniate la marginea din stînga celulei Datele din celulă sînt aliniate la marginea din dreapta celulei Datele din celulă sînt centrate orizontal la mijlocul celulei Datele din celulă sînt aliniate atît la marginea din stînga a celulei cît şi la marginea din dreapta Datele din celulă sînt aliniate după un anumit caracter 125 .

valign = top|middle|bottom|baseline Atributul VALIGN este utilizat pentru aliniere verticală şi poate lua următoarele valori: Valoare TOP BOTTOM MIDDLE BASELINE 3.<BR> Left&nbsp. <TABLE BORDER> <CAPTION>Aliniere verticală</CAPTION> <TR ALIGN=CENTER> <TD VALIGN=TOP>Top<BR> &nbsp.<BR><BR>&nbsp. <TABLE BORDER> <CAPTION>Aliniere orizontală</CAPTION> <TR> <TD ALIGN=LEFT>&nbsp.gif"></TD> <TD ALIGN=RIGHT VALIGN=TOP><IMG SRC="A.gif"></TD> <TD ALIGN=CENTER VALIGN=TOP><IMG SRC="A.gif"></TD> 126 . char = character Acest atribut specifică un caracter (unic într-un fragment de text) care joacă rolul de axă după care se aliniază restul.Center&nbsp.<BR>&nbsp. Right <BR>&nbsp. Valoarea implicită este punctul zecimal. Exemplu: Tabele cu aliniere orizontală şi verticală: 1. <BR>&nbsp.<BR>&nbsp.</TD> <TD VALIGN=MIDDLE>Center</TD> <TD VALIGN=BOTTOM>&nbsp.2.<BR>&nbsp.</TD> </TR> </TABLE> Descriere Datele din celulă sînt aliniate la marginea de sus a celulei Datele din celulă sînt aliniate la baza celulei Datele din celulă sînt centrate vertical la mijlocul celulei Aliniere similară cu TOP dar alinierea se face cu baza primului rînd text din fiecare celulă. 4.<BR>&nbsp.</TD> <TD ALIGN=Center>&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. Dacă o linie nu conţine caracterul de aliniere ea poate fi deplasată la sfîrşitul poziţieie de aliniere. 2. charoff = length Cînd este prezent acest atribut specifică affsetul primei aparaţii a caracterului după care se face alinierea pe fiecare linie.</TD> <TD ALIGN=RIGHT> &nbsp.

127 .50 <TR> <TD>Golden turnips <TD>$100.30 </TABLE> Tabelul ar putea arăta astfel: -----------------------------| Vegetable |Cost per kilo| |--------------|-------------| |Lettuce | $1 | |--------------|-------------| |Silver carrots| $10.gif"></TD> </TR> </TABLE> Exemplu: Tabelul următor aliniază un rînd de valori ce reprezintă preţuri după punctul zecimal. 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.gif"></TD> <TD ALIGN=CENTER VALIGN=BOTTOM><IMG SRC="A.gif"></TD> <TD ALIGN=RIGHT VALIGN=BOTTOM><IMG SRC="A.gif"></TD> <TD ALIGN=RIGHT VALIGN=MIDDLE><IMG SRC="A.gif"></TD> <TD ALIGN=CENTER VALIGN=MIDDLE><IMG SRC="A."> <THEAD> <TR> <TH>Vegetable <TH>Cost per kilo <TBODY> <TR> <TD>Lettuce <TD>$1 <TR> <TD>Silver carrots <TD>$10. caracter de aliniere setat explicit: <TABLE border="1"> <COLGROUP> <COL> <COL align="char" char=".50| |--------------|-------------| |Golden turnips| $100.<TH>Center<BR>(Centru)<BR></TH> <TD ALIGN=LEFT VALIGN=MIDDLE><IMG SRC="A.30| ------------------------------ Atributele de aliniere inserate în tag-urile de început de rînd (<TR>) au efect asupra tuturor celulelor din rînd.gif"></TD> </TR> <TR> <TH>Bottom<BR>(Jos)<BR></TH> <TD ALIGN=LEFT VALIGN=BOTTOM><IMG SRC="A.

proprietăţile de aliniere sînt moştenite de la celula de unde începe extensia. Atributul de aliniere setat pentru un element din celulă (ex. Atributul de aliniere setat pentru o coloană sau grup de coloane (COL şi COLGROUP).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. Valoarea implicită de aliniere. proprietăţile de aliniere sînt moştenite de la celula de unde începe extensia. Cînd o celulă face parte dintr-o celulă extinsă pe coloane. Ordinea de precedenţă (de la cea mai mare la cea mai mică) pentru atributul valign este: 1. 3. Ordinea de precedenţă (de la cea mai mare la cea mai mică) pentru atributele align. Atributul de aliniere setat pentru o celulă (TH sau TD). proprietăţile de aliniere sînt moştenite de la celula de unde începe extensia. 3. Valoarea implicită de aliniere. 5. 5. Alinierea implicită depinde de browser dar. TFOOT şi TBODY). Atributul de aliniere setat pentru un element din celulă (ex. Cînd o celulă face parte dintr-o celulă extinsă pe mai multe rînduri. Cînd o celulă face parte dintr-o celulă extinsă pe coloane. tabel). alinierea orizontală este determinată de coloane înaintea rîndurilor. Atributul de aliniere setat pentru tabel (TABLE). î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. 6. La afişarea celulelor. 2. Atributul de aliniere setat pentru o coloană sau grup de coloane (COL şi COLGROUP). 4. Atributul de aliniere setat pentru tabel (TABLE). 4. 6. Cînd o celulă face parte dintr-o celulă extinsă pe mai multe rînduri. coloană. TFOOT şi TBODY). Atributul de aliniere setat pentru un rînd sau grup de rînduri (TR. THEAD. P). char şi charoff este: 1. proprietăţile de aliniere sînt moştenite de la celula de unde începe extensia. THEAD. 2. P). Atributul de aliniere setat pentru un rînd sau grup de rînduri (TR. 128 . Atributul de aliniere setat pentru o celulă (TH sau TD). în timp ce pentru alinierea verticală ordinea de preferinţă este rînduri şi apoi coloane.

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+.1 <TH>Windows<BR>NT 3.51 <TH>Windows<BR>95 <TBODY> <TR><TD>1200<TD>Unicode (BMP of ISO/IEC10646)<TD><TD><TD>X<TD>X<TD>* <TR><TD>1250<TD>Windows 3.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. BCON V4)<TD><TD>X<TD><TD><TD>X <TR><TD>710<TD>Arabic (Transparent Arabic)<TD><TD>X<TD><TD><TD>X <TR><TD>720<TD>Arabic (Transparent ASMO)<TD><TD>X<TD><TD><TD>X </TABLE> Acesta poate arăta ca în figura următoare: 129 .1 Eastern European<TD>X<TD><TD>X<TD>X<TD>X <TR><TD>1251<TD>Windows 3."> <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 Greek<TD>X<TD><TD>X<TD>X<TD>X <TR><TD>1254<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.

130 .

un altul un meniu de navigare şi al treilea documentul propriu-zis care poate fi derulat (deplasat. Dacă meniu de navigare este alcătuit din butoane (care sînt elemente grafice). 80%"> <FRAMESET rows="100. Dincolo şi de avantajele legate de prezentarea mult mai potrivită a informaţiilor.dtd"> <HTML> <HEAD> <TITLE>A simple frameset document</TITLE> </HEAD> <FRAMESET cols="20%.w3.gif" alt="A neat image"> <LI><A href="contents_of_frame3.html">Some neat contents</A> <LI><IMG src="contents_of_frame2. această posibilitate oferă şi o creştere a vitezei de încărcare a unor pagini. Fereastra browserului este astfel divizată la fel cum un tabel împarte o pagină.gif"> </FRAMESET> <FRAME src="contents_of_frame3. scroll) sau înlocuit prin comenzile din cel de-al doilea frame.html"> <NOFRAMES> <P>This frameset document contains: <UL> <LI><A href="contents_of_frame1. 200"> <FRAME src="contents_of_frame1.html"> <FRAME src="contents_of_frame2.0 Frameset//EN" "http://www.html">Some other neat contents</A> </UL> </NOFRAMES> </FRAMESET> </HTML> care ar putea arăta astfel: +---------------------------------------+ | | | | Frame 1 | | | | | |---------| | | | Frame 3 | | | | | Frame 2 | | | | | | | | + --------------------------------------+ 131 . Aceste zone multiple oferă posibilitatea de a păstra anumite informaţii vizibile în timp ce altele sînt derulate (scroll) sau înlocuite. acestea pot fi încărcate doar o singură dată şi folosite cu diverse contexte (pagini). de exemplu în aceeaşi fereastră un frame poate afişa un banner static. zone care pot fi ferestre independente sau subferestre ale ferestrei principale a browserului. În continuare se prezintă un document simplu care conţine frame-uri: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.org/TR/REC-html40/frameset. În fiecare dintre aceste zone se pot încărca diverse şi diferite (!) documente HTML.Capitolul 6. Utilizarea frame-urilor în limbajul HTML Frame-urile HTML permit autorilor de pagini Web prezentarea documentelor în zone de ecran multiple. fără ca browserul să fie nevoit să le încarce sau chiar să le afişeze de fiecare dată cînd se schimbă pagina.

fiecare coloană se extinde pe lungimea întregii pagini..3*"> ..d.. apoi rîndul al doilea. Un document standard are o secţiune HEAD şi una (sau mai multe) secţiuni BODY. Relativ la frame-uri există trei elemente (seturi de taguri): • <FRAMESET> . restul definiţiilor.70%" cols="33%.. </FRAMESET> 3.. Împărţirea ecranului vertical în două parţi egale: <FRAMESET rows="50%. iar dacă lipseşte COLS fiecare rînd se extinde pe întreaga lăţime. Dacă ROWS nu are valoare. 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*.a. <NOFRAMES> . ş. restul definiţiilor .. Descrierea layout-ului documentului cu frame-uri (elementul FRAMESET) Modul de aranjare al subspaţiilor ocupate de frame-uri (al setului de frame-uri.. </FRAME> defineşte caracteristicile unui frame particular dintr-un set de frame-uri (tagurile elementului FRAME trebuie să apară în interiorul tagurilor elementului FRAMESET). 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. tot de la stînga la dreapta.m. Folosirea simultană a ambelor atribute împarte spaţiul ocupat de frame-uri într-un grid. Grid de 2x3 subspaţii: <FRAMESET rows="30%. • • 1. Exemple: 1.. </NOFRAMES> descrie informaţia care se afişează dacă browserul nu suportă frame-uri (tagul NOFRAMES nu trebuie să includă elementul BODY). Secţiunea descrisă de FRAMESET specifică modul de aranjare (layout-ul) zonelor ocupate de frame-uri în fereastra principală a browserului.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>).. pentru că în acest caz elementul FRAMESET va fi ignorat... </FRAMESET> 2. <FRAME> . Dacă lipsesc amîndouă frame-ul ia exact dimensiunea paginii care-l defineşte.34%. </FRAMESET> . În plus această secţiune poate conţine şi un element NOFRAMES pentru browserele ce nu pot afişa frame-uri.33%"> 132 . Elementele ce în mod normal apăreau în BODY nu trebuie să apară înaintea primului element FRAMESET... umplut de la stînga la dreapta şi de sus în jos: întîi rîndul de sus. Acesta are ca „argumente“ ROWS.250.. de la stînga la dreapta. care defineşte numărul de subspaţii orinzontale şi COLS care defineşte numărul de subspaţii verticale. frameset-ului) într-o fereastră se descrie cu elementul FRAMESET. 50%"> . Un document care descrie modalitatea în care frame-urile sînt poziţionate pe ecran (layout-ul frameurilor) se numeşte document frameset şi are o structură diferită de cea a unui document fără frameuri.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!).

Fiecare atribut ia ca valoare o listă de lungimi specificate în pixeli. ca procent sau ca lungime relativă... se 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 133 . restul definiţiilor .2*"> . O lungime relativă este exprimată ca i*.*. </FRAMESET> Dacă dimensiunile nu fac 100%... înseamnă că are 200 pixeli înălţime. un element NOFRAMES Conţinut în: • HTML Descriere: Acest element este un container de frame-uri. Documentul care include acest element (document cu frameuri sau frameset document) elementul FRAMESET cel mai din exterior ia locul lui BODY şi urmează imediat elementul HEAD. unde i este un întreg. de sus în jos. Presupunem că ferestra browserului are dimensiunea curentă de 1000 pixeli înălţime..*" (* este echivalent cu 1*) va avea primul rînd de trei ori mai înalt decît al doilea. Elementul FRAMESET Sintaxa: <FRAMESET>. utilizat pentru a împărţi o fereastră în subspaţii dreptunghiulare numite frame-uri. opţional. Al patrulea rînd are dimensiunea ("2*") de două ori cît al treilea ("*"). </FRAMESET> 4. Dacă ROWS sau COLS sînt omise. Atributele ROWS şi COLS definesc dimensiunea fiecarui frame din set. al doilea cu dimensiunea exact de 400 de pixeli. de la stînga la dreapta... 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. valoare implicită pentru fiecare dintre aceste atribute este 100%. Valorile specificate pentru ROWS dau înălţimea fiecărui rînd. restul definiţiilor . De exemplu un set de frame-uri definit cu ROWS="3*. Dacă sînt specificate ambele. </FRAMESET> Atribute posibile: • • • • • Conţine: • Unul sau mai multe elemente FRAMESET şi FRAME şi... iar cele date pentru COLS dau lăţimea fiecărei coloane. Rămîn astfel 300 de pixeli pentru a fi împărţiţi între rîndurile 3 şi 4.. iar ultimul are 100 <FRAMESET rows="30%..400. Definim 4 rînduri care au: primul cu 30% din această dimensiune (300 de pixeli).

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.100"> <FRAMESET COLS="40%..*"> <FRAME NAME="Menu" SRC="nav. De remarcat încercarea de a formata documentul şi în cazul în care browserul nu suportă frame-uri asemănător cu originalul. respectiv eliminate.html" TITLE="Content"> </FRAMESET> <FRAME NAME="Ad" SRC="ad.33%. </BODY> </NOFRAMES> </FRAMESET> 2. 134 .html">Photo 3</A> (<A HREF="Row2_Column3.defineşte un grid („caroiaj“) care se umple de la stînga la dreapta şi de sus în jos.html"> <FRAME NAME="Photo2" SRC="Row1_Column2.html"> <FRAME NAME="Caption1" SRC="Row2_Column1. Exemplu: Acest exemplu descrie un document (grid) cu 2 rînduri şi 3 coloane.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="*.html"> <FRAME NAME="Caption3" SRC="Row2_Column3.html" TITLE="Menu"> <FRAME NAME="Content" SRC="main. În general. Cînd se folosesc dimensiuni în pixeli acestea trebuie combinate cu lungimi relative pentru a acoperi diversele dimensiuni ale ferestrelor. se preferă procentele datorită capacităţii de adaptare la diversele dimensiuni ale ferestrelor.html" TITLE="Advertisement"> <NOFRAMES> <BODY> .30%" COLS="33%. Dimensiunile fixe în pixeli se folosesc doar în frame-urile care conţin imagini sau alte obiecte de dimensiune fixă şi cunoscută. Elementul FRAMESET acceptă.. însă.html"> <FRAME NAME="Photo3" SRC="Row1_Column3. şi atributele ONLOAD şi ONUNLOAD pentru a specifica acţiuni client-side executate de scripturi cînd frame-urile sînt încărcate.34%"> <FRAME NAME="Photo1" SRC="Row1_Column1.html"> <FRAME NAME="Caption2" SRC="Row2_Column2. de asemenea.html">Caption</A>) </LI> <LI> <A HREF="Row1_Column3.html">Photo 2</A> (<A HREF="Row2_Column2.html">Caption</A>) </LI> <LI> <A HREF="Row1_Column2. <FRAMESET ROWS="70%.html">Photo 1</A> (<A HREF="Row2_Column1.html"> <NOFRAMES> <BODY> <H1>Table of Contents</H1> <UL> <LI> <A HREF="Row1_Column1.

myproperty </SCRIPT> . conţinutul celui de al doilea frame... </FRAMESET> ..html" name="AnotherPage"> </FRAMESET> </HTML> <!-...In AnotherPage.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.. Î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ă.... bla. Acesta va fi inclus în elementul HEAD al documentului care descrie frame-urile şi va fi denumit cu atributul ID... 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...myobject.. începutul documentului ... 135 . bla .0 Frameset//EN" "http://www.. primul rînd . <FRAMESET cols="33%.html --> <HTML> <HEAD> <TITLE>.. 34%"> .În exemplul următor primul element FRAMESET (cel din „exterior“) divide tot spaţiul disponibil în 3 coloane egale. Partajarea datelor între frame-uri Se pot partaja date între diverse frame-uri prin includerea acestora într-un element OBJECT... restul documentului .bar"></OBJECT> </HEAD> <FRAMESET> <FRAME src="AnotherPage.. al doilea rînd ..conţinutul primului frame . conţinutul celui de al doilea frame. <P> <SCRIPT type="text/javascript"> parent. </TITLE> </HEAD> <BODY> .org/TR/REC-html40/frameset..w3. 50%"> . 33%.. . divide a doua zonă în rînduri de înălţime inegală.. conţinutul celui de al treilea frame . 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. Page title bla. </BODY> </HTML> 4. </FRAMESET> 3.. <FRAMESET rows="40%. din interiorul primului. Orice document ce reprezintă conţinutul unei frame îl va putea accesa prin intermediul acestui identificator. Al doilea FRAMESET...

Atributul FRAMEBORDER specifică dacă un frame are (valoarea 1) sau nu (valoarea 0) 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 136 . De exemplu NAME=left este nerecomandat. Nu se recomandă însă această metodă. nefiind suficient de clară (nu este „citibilă“). atunci autorul paginii respective va trebui să folosescă atributul LONGDESC pentru a oferi a adresă (URI) a descrierii HTML a obiectului respectiv. de asemenea. Valoarea acestui atribut trebuie să înceapă cu un caracter din domeniul A-Z sau a-z. Dacă este însă o imagine. Fiecare element FRAME trebuie să apară într-un element FRAMESET care îi defineşte dimensiunea. dar sînt. pentru a se permite o indexare eficientă de către motoarele de căutare. mai mult suportate de browsere. Aceasta trebuie să fie „citibilă“ şi să se bazeze pe conţinutul frame-ului respectiv. FORM şi LINK. dar acesta nu este suportat de toate browserele. un document HTML. precum şi o utilizare accesibilă în cazule browsere-lor nevizuale. întrucît nu spune nimic despre ce se găseşte în frame-ul respectiv. în timp ce NAME=nav este şi aceasta nerecomandată. în mod tipic. Mult mai sugestivă este o atrbuire de genul NAME=Content sau NAME=Navigation. Atributul NAME dă un nume frame-ului respectiv pentru a putea fi utilizat cu atributul TARGET al elementelor A. folosit pentru a oferi un titlu mai lung pentru frame. încă. BASE. Atributele prezentaţionale acceptate pot fi înlocuite de style-sheet-uri (şi e recomandabil să fie aşa). care este. o secvenţă video sau un alt obiect similar şi acesta nu poate fi descris în mod adecvat cu atributul TITLE al lui FRAME.Elementul FRAME Sintaxa: <FRAME> Atribute posibile: • • • • • • • • • 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). Atributul SRC oferă adresa (URI) de unde se va înărca conţinutul frame-ului. Şi atributul TITLE poate fi.

Un frame care nu are margine nu poate fi nici redimensionat. iar valoarea no le suprimă. Valoarea implicită este 1. care va fi. Exemplu: Fie următorul document cu frame-uri: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.200"> <FRAME src="contents_of_frame1.dtd"> <HTML> <HEAD> <TITLE>A frameset document</TITLE> </HEAD> <FRAMESET cols="33%.margine vizibilă.33%"> <FRAMESET rows="*.w3.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.33%. chiar cînd sînt necesare. frame-ul 2 lasă spaţiu în jurul conţinutului său (care este iniţial o imagine) şi nu este redimensionabil.gif" marginwidth="10" marginheight="15" noresize> </FRAMESET> <FRAME src="contents_of_frame3. Valoarea yes le afisează tot timpul.html" scrolling="no"> <FRAME src="contents_of_frame2. 2 şi 3. Valorile trenuie să fie mai mari ca 1 pixel. Frame-ul 1 nu are bare de scroll. totşi desenată (implicit. între frame-urile 3 şi 4 nu este desenată marginea. Acest atribut poate fi suprapus de cel al frame-urilor adiacente. Atributul SCROLLING specifică dacă se vor oferi scroll-bar-uri pentru frame-uri. iar atributul boolean NORESIZE împiedică utilizatorul să redimensioneze frame-ul. sus/jos. nefiind specificat altfel) între frame-urile 1. respectiv.0 Frameset//EN" "http://www. 137 . Valoarea implicită (auto) le generează atunci cînd este cazul.org/TR/REC-html40/frameset.html" frameborder="0"> <FRAME src="contents_of_frame4. Atributele MARGINWIDTH şi MARGINHEIGHT definesc numărul de pixeli folosiţi ca margini stînga/dreapta şi.

gif)....html" frameborder="0"> </FRAMESET> </HTML> se crează 4 frame-uri în care se încarcă 3 documente HTML (în frame-urile 1.. animaţie.. imagine. etc) se specifică cu atributul SRC al elementului FRAME. 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..org/TR/REC-html40/frameset..33%.33%"> <FRAMESET rows="*. reluat aici: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. </NOFRAMES> </FRAMESET> </HTML> 138 .html" frameborder="0"> <FRAME src="contents_of_frame4. <H2><A name="anchor_in_acelasi_document">Important section</A></H2> . 3 şi 4 din documentele contents_of_frame1.html şi. Pentru exemplul anterior.org/TR/REC-html40/frameset.html.5. contents_of_frame3.50%"> <FRAME src="contents_of_frame1.0 Frameset//EN" "http://www.html"> <FRAME src="#anchor_in_acelasi_document"> <NOFRAMES> .w3..w3.gif" marginwidth="10" marginheight="15" noresize> </FRAMESET> <FRAME src="contents_of_frame3.0 Frameset//EN" "http://www.html) şi o imagine (în frame-ul 2. 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.html" scrolling="no"> <FRAME src="contents_of_frame2.dtd"> <HTML> <HEAD> <TITLE>A frameset document</TITLE> </HEAD> <FRAMESET cols="33%.200"> <FRAME src="contents_of_frame1.dtd"> <HTML> <HEAD> <TITLE>A frameset document</TITLE> </HEAD> <FRAMESET cols="50%.alt text.text. din fişierul contents_of_frame2. respectiv contents_of_frame4.

html"> <FRAME name="dynamic" src="init_dynamic.0 Frameset//EN" "http://www.6.w3.. 2. De reţinut: 1. definiţia iniţială a frame-urilor (frameset-ului) nu mai reflectă starea curentă a acestora.. O definiţie a setului de frame-ului NU POATE FI MODIFICATĂ niciodată.0 Transitional//EN" "http://www. prin intermediul legăturilor din interiorul acestora. <P>Iar aici se poate avansa la <A href="slide3.</A> </BODY> </HTML> Activarea oricărei legături va deschide un nou document. în timp ce conţinutul celuilalt frame "fixed" rămîne neschimbat. Aceasta se realizează cu atributul TARGET al acestora şi poate fi utlizat pentru crearea link-urilor uzuale (A. Definim întîi setul de frame-uri în documentul frameset. dar de fiecare dată în frame-ul numit "dynamic".html.html" target="dynamic">Slide-ul 3.altele.html"> </FRAMESET> </HTML> Acesta defineşte 2 frame-uri în care se vor încărca 2 documente HTML.dtd"> <HTML> <HEAD> <TITLE>A frameset document</TITLE> </HEAD> <FRAMESET rows="50%. autorii fiind responsabili de modalitatea de a parcurge astfel de documente. imaginilor senzitive (AREA) şi a formelor (FORM). încărcat în frame-ul denumit "dynamic" ar putea fi: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. Nu se poate codifica (şi reţine) starea globală a unui set de frame-uri şi. LINK). navigarea înainte şi înapoi se complică..partea de început.w3. autorii pot referi acel frame ca „ţintă“ (destinaţie) pentru legăturile definite de alte elemente. multe browsere nu permit asignarea unui bookmark („semn de carte“) unui astfel de frameset.. Se prezintă în continuare un exemplu care sugerează o modalitate de a modifica dinamic conţinutul unui frame.org/TR/REC-html40/frameset. 139 .dtd"> <HTML> <HEAD> <TITLE>Document cu legături ţintă într-un frame cu nume</TITLE> </HEAD> <BODY> . 3. <P>Aici se poate avansa la <A href="slide2.. Conţinutul lui init_dynamic. Dacă se utilizează frame-uri..html" target="dynamic">Slide-ul 2. Specificarea numelui unui frame (atributul NAME) şi utilizarea lui într-un link (TARGET) Prin asignarea unui nume uneu frame cu ajutorul atributului NAME.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4..</A> . doar conţinutul acestora putînd fi modificat dinamic.org/TR/REC-html40/loose. de aceea.50%"> <FRAME name="fixed" src="init_fixed. Din momentul în care apare prima modificare dinamică..

html">Slide-ul 2. click pe un link) resursa indicată de element se încarcă în acel frame. renunţîndu-se la atributul TARGET setat la fiecare element în parte. Aceasta se poate realiza prin setarea atributului TARGET al elementului BASE. browser-ul va crea o nouă fereastră şi un nou frame în aceasta..dtd"> <HTML> <HEAD> <TITLE>Document cu legături ţintă într-un frame cu nume</TITLE> <BASE href="http://www.. asignează numele necunoscut pînă în acel moment acelui frame şi încarcă resursa în acesta. cînd elementul este activat (de ex. 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. în timp. 4. Pentru exemplul anterior se poate defini un element BASE.pal. nu cu conţinutul acestuia.partea de început. iar frame-ul din dreapta. dar îl are elementul BASE. renunţînd la specificarea lui în elementele A care încarcă documentele în acesată ţintă: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. 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.org/TR/REC-html40"> 140 . atunci acesta determină frame-ul în care se încarcă resursa. 6.. căruia i se poate specifica o valoare pentru atributul TARGET (frame-ul "dynamic").</A> </BODY> </HTML> Browserele determină în care frame vor încărca o resursă după următorul algoritm (după următoarele priorităţi..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ă. iniţial va conţine o imagine: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.altele..</A> .ro/Slides" target="dynamic"> </HEAD> <BODY> . descrierea lungă poate deveni neadecvată conţinutului la un moment de timp (după schimbarea conţinutului frame-ului respectiv). Dacă un atribut TARGET referă un frame necunoscut.org/TR/REC-html40/loose..w3. ca în exemplul următor: Următorul set de 2 frame-uri conţine: în frame-ul din stînga un cuprins. Mai bine este înglobarea imaginii respective într-un al document şi specificarea acestuia ca şi conţinut al unui frame. <P>Aici se poate avansa la <A href="slide2..0 Frameset//EN" "http://www.w3. <P>Iar aici se poate avansa la <A href="slide3. Dacă un element NU are atributul TARGET specificat. O consecinţă a acestui comportament este recomandarea de a nu include o imagine ca singur conţinut al unui frame. Această resursă este asociată cu frame-ul. Dacă un element are atributul TARGET setat la un frame cunsocut. 5. Acest atribut defineşte o resursă care oferă o descriere mai lungă (pe larg) a unui frame.0 Transitional//EN" "http://www. şi de aceea. 7. de la cele mai mari spre cele mai mici): 3. În plus browserele pot oferi mecanisme de suprapunere a atributului TARGET..html">Slide-ul 3.

Această alternativă va fi folosită şi de browser-ele care pot afişa frame-uri dar au fost configurate să nu le afişeze. 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. 50%"> <FRAME src="main. se poate specifica o alternativă la acesta prin intermediul elementului NOFRAMES.html: --> <HTML> <HEAD> <TITLE>The fast and powerful ostrich</TITLE> </HEAD> <P> <OBJECT data="ostrich.html"> <FRAME src="ostrich-container. independent de orice alt element.html"> <FRAME src="table_of_contents. în locul specificării directe a imaginii ca şi conţinut al frame-ului din dreapta. nu mai există altă posibilitate de a specifica un text alternativ la acea imagine în afara atributului LONGDESC.<HTML> <HEAD> <TITLE>Un document ce defineşte GREŞIT un frameset</TITLE> </HEAD> <FRAMESET cols="20%.gif" type="image/gif"> These ostriches sure taste good! <!— conţinut alternativ --> </OBJECT> </HTML> 8. fără nici o posibilitate de a redescrie noul conţinut (într-o manieră alternativă).In ostrich-container.w3. Dacă se va schimba conţinutul frame-ului din dreapta. 80%"> <FRAME src="table_of_contents.gif" longdesc="ostrich-desc.html"> </FRAMESET> </HTML> <!-. se specifică un al document HTML care va conţine imaginea respectivă: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.org/TR/REC-html40"> <HTML> <HEAD> <TITLE>Un document ce defineşte CORECT un frameset</TITLE> </HEAD> <FRAMESET cols="20%.0 Frameset//EN" "http://www. descrierea acestuia va rămîne aceeaşi.0 Frameset//EN" "http://www. De aceea.html"> <NOFRAMES> <P>Aici este 141 .w3. Elementul NOFRAMES poate fi folosit într-o secţiune FRAMESET a unui document: Exemplu: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.org/TR/REC-html40"> <HTML> <HEAD> <TITLE>Un document ce defineşte un frameset dar are şi NOFRAMES</TITLE> </HEAD> <FRAMESET cols="50%. 80%"> <FRAME src="table_of_contents.html"> <FRAME src="ostrich.html"> </FRAMESET> </HTML> Dacă se include direct imaginea în frame.

DEL. la limită. înconjurat de margine. FRAMESET. FIELDSET. </ NOFRAMES > Atribute posibile: • atribute comune Conţine: • • În HTML 4.. permiţînd în ultimă imstanţă inserarea unui document HTML în mijlocul altuia.</A> </NOFRAMES> </FRAMESET> </HTML> Elementul NOFRAMES Sintaxa: <NOFRAMES>. să conţină cel puţin un link spre o variantă de document fără frame-uri. IFRAME. BLOCKQUOTE. TD. elemente tip block level În HTML 4. 9. iar conţinutul unui element IFRAME va fi afişat doar dacă browser-ul nu suportă frame-uri. DD. LI. DIV. CENTER. FORM. pentru browserele care suportă frame-uri. Inserarea unui astfel de frame este foarte asemănătoare cu inserarea unui obiect prin intermediul elementului OBJECT. NOSCRIPT. TH Conţinut în: • Descriere: Acest element descrie conţinutul unui document ce trebuie afişat cînd frame-urile nu sînt afişate.<A href="main-noframes. OBJECT.0 Transitional: elemente inline. MAP.. Frame-uri inline (elementul IFRAME) Este posibil să se includă un frame într-un bloc de text. În acest caz nu mai trebuie să apară însă nici un element NOFRAMES în elementul BODY. INS. BUTTON. Elementul ce permite această operaţie este IFRAME. BODY. şi care.0 Frameset: un element BODY care trebuie să nu conţină nici un NOFRAMES APPLET. 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.html"> versiunea documentului fără frame-uri. NOFRAMES trebuie să conţină un element BODY. Cînd este folosit într-un FRAMESET. Informaţia care se inserează este specificată prin atributul SRC. Este recomandabil să se ofere un element NOFRAMES care are semnificaţie. exemplul următor va insera un frame. De exemplu. în mijlocul unui text: 142 .

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. singurul avantaj fiin acela că poate fi specificată ca TARGET de către alte legături. 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 143 . block-level elements Descriere: Acest element defineşte un frame inline pentru a include obiecte externe (incluzănd alte documente HTML). Elementul IFRAME Sintaxa: <IFRAME>. nu suportă frame-uri. Atributul SRC oferă adresa de unde se va încărca conţinutul frame-ului – în mod tipic un document HTML..<IFRAME src="foo. OBJECT este mai bine suportat decît IFRAME. IFRAME oferă un subset de funcţii ale lui OBJECT.html" width="400" height="500" scrolling="auto" frameborder="1"> [Browserul dvs. </ IFRAME > Atribute posibile: • • • • • • • • • • • Conţine: • inline elements. block-level elements Conţinut în: • inline elements. 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. De remarcat că un document HTML poate fi inserat (înglobat) în altul prin intermediul lui OBJECT.

Pot apare aici elemente inline sau bloc: orice element de tip bloc este permis în interiorul elementului ce-l conţine pe IFRAME.. iar SCROLLING dacă sînt permise barele scroll.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.html şi oferă şi un conţinut alternativ: <IFRAME SRC="reteta. iar conţinutul să curgă pe lîngă. iar pentru a centra în document (pagină) frameul se recomandă includerea într-un bloc centrat: <P ALIGN=center><IFRAME SRC="foo. dar un IFRAME într-un DIV poate conţine orice element de tip bloc. respectiv sus/jos. Atributele WIDTH şi HEIGHT specifică dimensiunile frame-ului în pixeli sau procente din spaţiul disponibil. LONGDESC dă adresa unei resurse care descrie pe larg conţinutul frame-ului.html" TITLE="Reteta lui Petrisor"> <!-.. O mai mare flexibilitate în prezentarea frame-urilor este dată de style-sheet-uri. ALIGN=middle aliniază frame-ul faţă de linia de bază (baseline). MARGINWIDTH şi MARGINHEIGHT definesc un număr de pixeli ce se folosesc ca margine stînga/dreapta. De exemplu un IFRAME într-un H1 nu poate conţine un H2. </IFRAME> 144 .html" WIDTH=300 HEIGHT=100></IFRAME></P>. care poate fi plasat la marginea din stînga sau dreapta. Celelalte valori (left şi right) indică un frame flotant. ALIGN specifică modul de aliniere faţă de conţinutul adiacent a frame-ului inclus. iar FRAMEBORDER stabileşte dacă se deseneză sau nu marginea.Conţinut alternativ pentru browser-ele care nu suportă IFRAME --> <H2>Reţeta lui Petrişor</H2> <H3>Ingrediente</H3> . Exemplu: Acest exemplu include documentul reteta. Similar cu atributul elementului FRAME.

etc) înainte ca acesta să fie trimis unui agent (program) pentru a fi prelucrat (de exemplu unui server Web. butoane radio. În plus. nume ce este definit (utilizabil. cel care rulează browser-ul – un server. căsuţele de selecţie. 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 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. listele de selecţie şi cîmpurile de editare. Un formular HTML este o secţiune de document care conţine text.Capitolul 7. 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. 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ă. etc). În general. explorat şi completat de utilizator 2. domeniul de definiţie) în cadrul elementului FORM în care acesta apare. 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. designul şi implementarea (în HTML) a formularului de intrare. fiecare fiind şiruri de caractere (valorile posibile şi restricţiile ce se aplică asupra acestora diferă de la un control la altul). care va fi vizualizat. Utilizatorii vor „completa“ formularul prin modificarea controalelor (sau conţinutului acestora prin introducerea unui text. Fiecare control are un nume dat de atributul NAME al acelui control. fiecare control are o valoare iniţială şi o valoare curentă. Modul de introducere a datelor în formulare este similară cu modul de a introduce date într-o aplicaţie Windows. precum şi etichete ale acestor controale. ca răspuns la cererea utilizatorului. elemente HTML uzuale. 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. De regulă acest document este scris în HTML. valoarea iniţială poate fi specificată prin intermediul valorii atributului VALUE. dar şi elemente speciale numite controale (similare celor din interfaţa aplicaţiilor Windows – căsuţe de selecţie. de obicei cel care gazduieşte serverul HTTP şi care a oferit pagina cu formularul respectiv) 3. etc). introduse cu ajutorul formularului. 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. selectarea unui element dintr-o listă. dar la 145 . dar această restricţie nu este obligatorie. designul şi implementarea documentului generat de aplicaţia de la punctul 2. unui server de mail. ca rezultat al acestor informaţii noi. Specificaţiile HTML includ însă şi o altă metodă (de asemenea simplă. Utilizarea formulalelor interactive (forms) În marea majoritate a documentelor (mai ales cele mai vechi).

unele controale au numele legat de valoarea curentă. Un formular poate conţine mai mult de un buton submit. Pentru crearea unui checkbox se foloseşte elementul INPUT. Astfel de controale sînt numite controale de succes (successful controls). ca şi butoanele radio. 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. toate celelalte care au acelaţi nume sînt trecute automat pe "off". Un astfel de element (switch) este "on" (selectat) cînd atributul selected al lui este setat. 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). Limbajul HTML 4. sînt elemente cu 2 stări on/off (selectat/deselectat) care pot fi trecute dintr-o stare în alte de către utilizitator. Dacă un control nu are specificată valoarea iniţială. 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).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). Cînd un formular este transmis pentru a fi prelucrat. Pentru crearea unui buton radio se foloseşte elementul INPUT. astfel că se va transmite agentului (programului) care-l prelucrează un set de dublete alcătuite din numele coontrolului şi valoarea sa curentă. un astfel de buton resetează toate controalele la valorile lor inţiale. butoane radio Butoanele radio sînt exact ca checkbox-urile. Autorii crează butoane cu unul din elementele BUTON sau INPUT. apoi ea poate fi modificată de utilizator prin intermediul acţiunilor ce sînt permise asupra controlului sau de scripturi. butoane reset: Cînd este activat (apăsat). efectul acestei operaţii este nedefinit (poate fi imprevizibil). 146 . Cînd un formular este trimis unui agent de prelucrare numai controalele checkbox ce au valoarea "on" devin controale de succes. pe cînd valoarea iniţială a unui element OBJECT este determinată de implementarea acestuia. checkbox (căsuţe de marcare) Checkbox-urile (căsuţele de marcare). butoane push: Aceste butoane nu au o acţiune implicită atunci cind sînt activate (apăsate).un element de tip TEXTAREA valoarea iniţială este dată de conţinutul acestuia. Valoarea curentă a unui control este iniţial setată la valoarea iniţială. Într-un formular mai multe checkbox-uri pot avea acelaşi nume. un astfel de buton trimite un formular unui agent (program) de prelucrare. prima variantă fiin mai bogată în opţiuni.

caz în care nu pot fi controale de succes. Elementul INPUT crează un control care are doar o singură linie disponibilă pentru introducerea textului. text input Autorii pot crea două tipuri de controale pentru a permite utilizatorilor introducerea unui text. controale tip obiect (object controls) Autorii pot insera obiecte generice astfel ca valorile asociate acestora să fie transmise împreună cu celelalte controale. dar pot apare şi în afara declaraţiei acestui element cînd sînt utilizate pentru a crea interfeţe. • 147 . El se comportă ca un container pentru controale şi specifică: • • Layout-ul (înfăţisarea) formularului (prin conţinutul elementului). Programul care-l recepţionează trebuie să fie capabil să preia corect şi să decodifice perechile nume/valoare transmise pentru a le putea folosi. în general. În ambele cazuri textul ce se introduce devine valoarea curentă a controlului. Pentru crearea unui control ascuns se foloseşte elementul OBJECT.meniuri Menurile oferă utilizatorilor posibilitatea de a alege dintre mai multe opţiuni. iar elementul TEXTAREA crează un control cu mai multe linii în care se poate introduce text. dar a căror valori să fie transmise odată cu formularul. Metoda prin care datele introduse de utilizator vor fi trimise serverului (atributul METHOD). 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. Acest tip de control este util pentru a păstra informaţie între schimburile client/server ce altfel s-ar pierde. Elementele utilizate pentru crearea controalelor apar. Descrierea unui formular (elementul FORM) Elementul care descrie un formular este FORM. Pentru crearea unui control de tip meniu se foloseşte elementul SELECT în combinaţie cu elementele OPTGROUP şi OPTION. 1. controale ascunse (hidden controls) Se pot crea controale care să nu fie afişate de către browsere. Pentru crearea unui control tip file select se foloseşte elementul INPUT. într-un element FORM. Programul ce va prelua formularul completat şi transmis (atributul ACTION). datorită naturii „fără stare“ (stateless) a protocolului HTTP. Pentru crearea unui control ascuns se foloseşte elementul INPUT.

comp-craiova. BLOCKQUOTE.P@alpha. FIELDSET. </FORM> Elementul FORM Sintaxa: <FORM>.. TD. Un formular poate conţine în afara controalelor şi text şi elemente HTML (paragrafe. TH 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ţinut în: • Descriere: Orice formular interactiv începe cu tagul <FORM> şi se termină cu </FORM>. CENTER. BODY.. DIV. </FORM> Atribute posibile: • • • • • • • • Conţine: • • În HTML 4.0 Strict.. INS.. iar undeva în interiorul formularului se găsesc tag-urile (elementele) care definesc controalele (INPUT.ro" method="post"> .) Exemplul următor arată un formular care va fi procesat de un program numit "adduser". LI. Browserele utilizatorilor trebuie să-i avertizeze asupra valorilor setului de caractere acceptat şi/sau să restricţioneze posibilitatea acestora de a introduce caractere necunoscute.. NOFRAMES. NOSCRIPT.0 Transitional. Metoda utilizată pentru transmitere va fi "post": <FORM action="http://somesite. în momentul în care va fi transmis de browser.• O codificare a caracterelor acceptabilă pentru server. OBJECT. DEL. DD. exceptînd FORM APPLET.com/prog/adduser" method="post"> .. 148 . etc. </FORM> Iar exemplul următor arată cum se trimite un formular la o adresă de email: <FORM action="mailto:L.conţinutul formularului. unul sau mai multe elemente SCRIPT sau elemente de tip bloc (block-level elements) cu excepţia lui FORM In HTML 4.. astfel ca acesta să poată prelua formularul (atributul ACCEPT-CHARSET).conţinutul formularului. IFRAME. elemente de tip inline sau elemente tip block-level.. liste.. MAP..

Acest program va trebui să preia datele din formular şi să le prelucreze. Se poate şi simula o astfel de transmitere cu unelte ca cg-eye care permit vizualizarea imediat. de exemplu. astfel încît tag-ul de început apare de forma: <FORM ACTION="acţiune" METHOD="metodă"> Valorile lui ACTION specifică natura acţiunii. în acest caz. Cînd metoda este get (implicită). dar posibilitatea transmiteri de caractere non-ASCII şi posibilitatea de transmite date oricît de mari sînt avantajele faţă de GET. • ACTION="mailto: adresă@domeniu" specifică un program de expediere a conţinutului formularului. TEXTAREA şi BUTON) prin intermediul cărora utilizatorul interacţionează cu acesta.. Cele mai importante atribute ale tag-ului sînt ACTION (acţiune) şi METHOD (metodă). Atributul ENCTYPE specifică tipul conţinutului (content type) folosit în transmiterea formularului şi are ca valoare implicită application/x-www-form-urlencoded.. RESET care acţionează asupra formularului ca entitate. Astfel: • ACTION="URL" specifică URL-ul programului care va fi executat. dar are şi dezavantajul că nu poate conţine caractere non-ASCII ca "é" and "©". În afara acestor neajunsuri. Sfîrşitul de linie (line break) este codificat ca "%0D%0A" – un carriage return urmat de un line feed. Cînd metoda este post. care va avea loc printr-un program care va fi executat de serverul care este gazdă pentru document. unde HH este codul hexa al caracterului respectiv. 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.x) care. Atributele METHOD şi ENCTYPE specifică metoda utilizată pentru a trimite datele formularului serverului care gazduieşte programul specificat în ACTION. atunci este preferabil să se folosească un ENCTYPE de tipul multipart/form-data iar METHOD să fie post.. "#") înlocuite de "%HH". Atributul ACCEPT-CHARSET specifică lista de codificări acceptate de handlerul formularului (programul care-l primeşte şi prelucrează). întrucît există biblioteci publice. în mod tipic. opţional. free (ca de exemplu CGI. De aceea.SELECT. datele formularului sînt transmise ca o cerere HTTP POST cu datele formularului în corpul cererii. Pentru preluarea datelor din formularele transmise la server autorii nu trebuie să cunoască exact formatul în care sînt codificate datele. Utilizarea metodei get permite ca transmiterea (datelor) formularului să fie conţinută complet în URL. de obicei un program CGI sau un servlet Java. Valoarea acestui atribut este o listă de seturi de 149 . pentru siguranţă. vor deschide o fereastră de compoziţie a unui mesaj email. Dacă formularul conţine un element INPUT cu atributul TYPE=file. Acesta are ca rezultat perechi nume/valoare trimise serverului sub forma name1=value1&name2=value2.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). Această acţiune nu este însă suportată de toate browserele (de exemplu Microsoft Internet Explorer 3. lipsa unui feed-back imediat face această metodă de acţiune nu foarte recomandată pentru a fi utilizată. „în oglindă“ a datelor ce s-ar trimite. cu caracterul spaţiu înlocuit de "+" şi cu caracterele speciale (ca. orice formular care conţine caractere non-ASCII sau mai mult de 100 caractere trebuie să utilizeze METHOD=post. precum şi butoanele „speciale“ SUBMIT şi. Majoritatea browserelor sînt incapabile să creeze un bookmark pe o astfel de cerere. Avantajul este ca se pot crea bookmark-uri („semne de carte“) pe astfel de adrese. datele formularului sînt transmise ca o cerere HTTP GET cu ?form_data adăugat la adresa URI specificată de atributul ACTION.

Dacă nu e specificat nici un frame (sau numele nu există). Valoarea implicită este UNKNOWN şi este considerată. BUTTON. 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. 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ă. Valoarea curentă a acestui control este textul introdus de utilizator. valoarea implicită este o fereastră nouă. textul transmiţîndu-se. TEXTAREA) Elementul INPUT este cel mai frecvent întîlnit deoarece crează mai multe tipuri de controale care permit utilizatorului să aleagă. 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). Se pot folosi şi numele speciale de frame-uri: • • • • _blank – ferastră nouă. Crearea controalelor de bază ale unui formular (INPUT. două tipuri de butoane pe care utilizatorul le poate seta închis/deschis. file 150 . 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). un element de selecţie fişiere şi cîmpuri în care poate fi tastat text. de aceea se şi numeşte parolă. codificarea folosită pentru transmiterea documentului ce conţine formularul.caractere ("charsets") separate cu virgulă sau blanc. 2. Atributul TARGET este folosit în cazul frame-urilor pentru a specifica în care frame se afişează răspunsul. Controalele de bază pe care le poate utiliza un autor în cadrul formularelor interactive sînt create cu elementul INPUT. de obicei. 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". Nu există o limită asupra numărului de elemente conţinute într-un formular. dacă nu se folosesc tehnici adecvate. în clar! checkbox Crează o căsuţă de marcare: checkbox. Tag-ul INPUT este nevid. individualizarea lor făcîndu-se prin intermediul atributului său TYPE. nu cel afişat de formular! De remarcat că protecţia oferită în acest fel este minimă. radio Crează un buton radio: radio button. Controalele includ trei tipuri de butoane care pot fi apăsate.

care rulează pe client. Valoare atributului SRC specifică adresa URI a imaginii care e folosită la „decorarea“ butonului. 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. Datele transmise includ name. de exemplu) formularul este transmis serverului împreună cu coordonatele punctului apăsat exprimate în pixeli faţă de colţul stînga-sus. submit Crează un buton care trimite datele din formular: submit button. Poziţia acestora poate fi controlată cu style-sheet-uri.y=y-value. 151 .x=x-value şi name. utilizatorii cu browsere non-grafice vor fi dezavantajaţi şi de aceea se pot lua în considerare următoarele alternative: • • hidden Crează un control ascuns: hidden control. Se foloseşte valoarea atributului VALUE ca nume iniţial de fişier. iar x-value şi y-value sînt valorile coordonatelor. 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ă. împreună cu un script. Cînd imaginea este apăsată (cu mouse-ul. unde "name" este valoarea atributului NAME.Crează un control utilizat la selecţia fişierelor: file select control. Dacă serverul are implementate diferite acţiuni în funcţie de punctul apăsat. Se recomandă folosirea şi a unui text alternativ (cu atributul ALT) pentru cazul cînd imaginea nu e vizibilă. Utilizarea butoanelor SUBMIT multiple (fiecare cu imaginea lui). Utilizarea unei hărţi senzitive de tip client-side image map.

Prin specificarea valorii atributului ENCTYPE ca "multipart/form-data".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. fiecare conţinut va fi „împachetat“ pentru a fi transmis într-o secţiune separată a unui document de tip „multipart“. 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. <FORM action="http://server.dom/cgi/handle" enctype="multipart/form-data" method="post"> What is your name? <INPUT type="text" name="name_of_sender"> What files are you sending? <INPUT type="file" name="name_of_files"> </FORM> Elementul INPUT Sintaxa: <INPUT> 152 .. adresei de email şi sexului. prenumelui.Exemplu: Acest exemplu defineşte un formular simplu care permite utilizatorului introducerea numelui. Cînd se activează (apasă) butonul de trimitere (submit) formularul va fi trimis programului specificat de atributul ACTION (aici adduser): <FORM action="http://somesite..

Cînd formularul este transmis valoarea curentă a fiecărui element INPUT din FORM este trimisă sub forma unei perechi name/value. odată cu formularul şi a conţinutului unui fişier. totuşi că Netscape Navigator NU va afişa nici un element INPUT în afara unui FORM. Atributul NAME oferă numele ce va fi folosit pentru identificarea controlului respectiv.0 permite şi folosirea lui în orice element block-level sau inline (cu excepţia lui BUTTON). El este utilizat de obicei în cadrul lui FORM. Tipul valorii depinde de tipul elementului INPUT. În acest caz trebuie utilizate alte metode: Exemplu: 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 153 . 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. De remarcat. Un formular care include un element INPUT trebuie să specifice în tagul elementului FORM METHOD=post şi ENCTYPE="multipart/form-data". dar HTML 4. Nu toate browserele permit trimiterea.Atribute posibile: • • • • • • • • • • • • • • • • • • • • Conţine: • Nimic Conţinut în: • block-level elements. inline elements.

cînd este selectat. Parametrul TYPE specifică ce fel de INPUT se aşteaptă de la utilizator şi poate primi următoarele valori: Valoare Text Password Descriere Permite utilizatorului să introducă un singur rînd de text La fel ca şi Text. transmite formularul URL-ului specificat în ACTION Afişează un buton Submit grafic (cu o imagine) Permite selecţia unui fişier Invizibil în browser Check box Radio button Button Reset Submit Image File Hidden Exemplu: <INPUT TYPE="CHECKBOX" NAME="TEST"> Dacă nu este specificat TYPE în elementul INPUT. dacă este apăsat. dar caracterele tastate de utilizator au ca ecou asteriscul „*“ sau un alt semn echivalent menit să "ascundă" textul introdus Implementează un buton care poate fi setat activ/inactiv (închis/deschis) Permite implementarea unui grup de butoane în care. cel mai important fiind TYPE. la un moment dat. Dacă browser-ul Dvs. 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. fiecare element TYPE avînd proprii lui parametri pentru definirea în continuare a elementului. valoarea implicită atribuită este TYPE=TEXT.</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. NAME poate avea orice valoare. 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. cu excepţia elementelor SUBMIT şi RESET.În exemplul următor se trimite un document HTML pemtru a fi validat. resetează toate celelalte elemente ale formularului la valorile lor implicite Afişează un buton care. Exemplu: NAME="cîini" NAME="profesii" 154 – într-o selecţie de rase de cîini – într-o selecţie de profesii . Atributul NAME este un parametru cerut de toate elementele INPUT. numai unul poate fi activ (setat/deschis) Determină apariţia unui buton care poate fi apăsat Determină apariţia unui buton care. nu suportă această metodă folosiţi <A HREF="methods.html">metodele alternative de validare</A>.

Această limitare trebuie luată în considerare şi de programul care primeşte formularul. Deoarece HTML suportă şi comanda TEXTAREA (zonă text). se consideră că are valoarea implicită de 20 de caractere. comentarii scurte sau orice altceva care poate fi tastat pe un rînd. definite prin SIZE=X. Atributul READONLY. Parametrul VALUE este egal cu textul implicit pe care îl dorim introdus în rîndul text. Dacă VALUE lipseşte.. dacă am ales ca nume al rîndului NAME=adresă.. nou în HTML 4.: <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. La trimiterea datelor din formular la server. chiar şi pentru crearea unui prompter simplu. Acesta este însă un element depăşit. poate edita pagina ce conţine formularul şi trimite un număr oricît de mare de caractere pentru text. De pildă. Majoritatea navigatoarelor suportă cîmpuri text formate din mai multe rînduri. pentru culegerea unor adrese email. Numărul maxim specificat de MAXLENGTH nu reprezintă o cale sigură de a limita numărul de caractere introduse de utilizator care. dar totuţi sînt trimise cu formularul. numere de telefon. rîndul va fi iniţial blanc. Exemplu: <FORM> Tastaţi numele Dvs.Y unde X=număr de caractere pe rînd si Y=număr de rînduri. elementul tip text se foloseşte aproape exclusiv la definirea unui singur rînd. este destul de puţin suportat de browsere." method="post"> <P>Enter your search phrase: <INPUT type="text"></P> </FORM> 155 . de exemplu. Exemplu: Se poate înlocui declaraţia lui ISINDEX: <ISINDEX prompt="Enter your search phrase: "> cu: <FORM action=". Dacă parametrul SIZE lipseşte. numelui îi va fi asociată valoarea tastată. un rînd text trebuie să aibă un nume (NAME). adrese e-mail. Dacă numărul de caractere este mai mare (pînă la valoarea maximă admisă prin MAXLENGTH). Ca majoritatea elementelor INPUT. Cu ajutorul lui se poate introduce un text avînd oricîte caractere.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. rîndul se va derula (scroll orizontal).0. la server va fi trimisă secvenţa adresă=ce s-a tastat. El previne editarea conţinutului unui control de tip text sau parolă. Parametrul SIZE (dimensiune) permite setarea lungimii rîndului în număr de caractere.

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). VALUE şi MAXLENGTH acţionează exact ca şi în cazul elementului TEXT. valoare implicită asignată este ON. această modalitate nu realizează o criptare a datelor). Dacă VALUE nu apare. adică pot fi în 156 . Într-un formular se pot include oricîte căsuţe de selecţie. Funcţia îndeplinită de CHECKBOX permite culegerea de răspunsuri la întrebări simple. 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. Parametrii NAME. vor fi remise serverului doar căsuţele selectate. Pentru fiecare căsuţă selectată va fi trimis serverului un şir nume=valoare. La trimiterea formularului. Fiecare va fi independentă de celelalte.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. Utilizatorul poate selecta nici una. 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. pentru care nu există decît două răspunsuri posibile. dar atenţie. una sau mai multe căsuţe.

Elementul este util pentru a forţa selecţia unui singur element dintr-o listă multiplă. deci fac parte din acelaşi grup. butoanele radio pot avea nume generice. Ca şi căsuţele de selecţie.poziţiile selectat/deselectat. Se mai foloseşte şi o căsuţă (un buton) de marcare. Valoarea atributului VALUE dă textul ce apare pe buton. Selectarea altuia conduce automat la deselectarea celui selectat anterior. Î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ă). Diferenţa constă că într-un grup de butoane. atributul NAME). Butonul selectat implicit (care este necesar pentru unele browsere) este marcat cu CHECKED. acelaşi pentru toate butoanele unui anumit grup. <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). Într-un grup poate fi activat un singur buton. definită anterior cu un element SCRIPT. ca în exemplul următor: <INPUT TYPE=button VALUE="Hide non-strict attributes" ID=toggler ONCLICK="toggle()"> În acest caz. 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. în momentul în care butonul este apăsat (click) se execută funcţia toggle(). numai unul poate fi selectat la un moment dat. Atributul ONCLICK este folosit în mod tipic pentru a defini o acţiune ce se declanşează cînd butonul este apăsat. se recomandă evitarea unor butoane care nu 157 . De remarcat că toate butoanele au acelaşi nume.

restul conţinutului curgînd pe lîngă el. // --> </script> Un set mai complet de opţiuni este oferit de elementul BUTTON. Valorile top. aceasta permiţînd existenţa mai multor butoane SUBMIT într-un formular. atributul ALT oferind o alternativă (un text) pentru browser-ele care nu afişează imagini. 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. Atributul SRC trebuie inclus pentru a specifica adresa imaginii folosite. ca în exemplul următor: <SCRIPT TYPE="text/javascript"> <!-document. Numai HTML 4. dar suportul scăzut acordat de browsere acestuia fac utilizarea lui INPUT încă extrem de utilă. 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. utilizînd procedeul specificat cu METHOD. Atributul ALIGN.write("<INPUT TYPE=button VALUE=\"Hide non-strict attributes\"" + "ID=toggler ONCLICK=\"toggle()\">").fac nimic prin inserarea tagului <INPUT TYPE=button> folosind scripturi. apăsarea lui afectînd doar navigatorul utilizatorului. plasînd imaginea la marginea din stînga.0 defineşte acest atribut. Cîmpurile necompletate şi butoanele neselectate nu vor fi transmise. astfel că recomandarea este ca toate să aibă acelaşi text asociat. La apăsarea butonului. Dacă apare şi atributul NAME. 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. formularul şi conţinutul lui curent sînt trimise serverului specificat de atributul ACTION al elementului FORM. Butonul de resetare nu are nume deoarece starea lui nu este niciodată transmisă serverului. specifică modul de aliniere al acestui tip de buton. iar valorile left şi right transformă butonul într-un element flotant. Resetarea aduce toţi parametrii la valorile lor implicite. respectiv dreapta. middle şi bottom specifică poziţia butonului în raport de conţinutul adiacent în dreapta şi stînga. browser-ele bazîndu-se pe valorile atributelor NAME sau VALUE. Parametru VALUE dă o valoare care va fi înscrisă pe buton. browserul va trimite o pereche name/value şi pentru butonul SUBMIT. fiecare cu propria acţiune. a cărui valoare va fi înscrisă pe buton. Singurul parametru pentru RESET este VALUE. depăşit acum. Pentru a trimite restul 158 .

Valoarea atributului VALUE specifică numele fişierului iniţial. 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. 159 . este sărit cînd se navighează cu tasta TAB şi. permiţînd browser-elor un filtru asupra acestora. Astfel. INPUT mai acceptă şi următoarele: • ONFOCUS. cînd elementul primeşte focusul. De asemenea. excepţie făcînd hidden. puţin suportat. nu poate primi focusul. primele se vizitează cele cu valori mai mici. Un element cu TABINDEX=0 sau fără TABINDEX va fi vizitat după toate elementele cu o valoare pozitivă. Atributele ACCESSKEY şi TABINDEX se aplică tuturor. se defineşte o hartă senzitivă prelucrată de client (client-side image map) dar metoda este foarte puţin suportată. dezactivează un control.y=y-value. Atributul ACCEPT oferă o listă cu tipurile de media (fişiere) suportate. 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. Între elementele cu valoare pozitivă a lui TABINDEX. astfel de elemente sînt utile şi pentru anumite scripturi CGI generale. 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. În locul acestui atribut se recomandă folosirea proprietăţilor CSS vertical-align şi float. cînd sînt folosite pentru a defini variabile pentru acesta.com"> <INPUT TYPE=hidden NAME=subject VALUE="Feedback on your course"> Atribute comune tuturor tipurilor de INPUT Atributul DISABLED. Dacă se combină atributul USEMAP cu TYPE=image. În caz de egalitate. primele apărute în document sînt primele vizitate. dar este ignorată (în mod normal) de toate browser-ele din motive de securitate. dar în general este ignorat. un control devine readonly. 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). 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. 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ă). în plus. valoare sa nu este trimisă serverului. 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.conţinutului sub buton se foloseşte <BR CLEAR=left|right|all>.

</BUTTON> Atribute posibile: • • • • • • • • • Conţine: • Elemente inline exceptînd A. Atributele NAME şi VALUE determină perechea name/value trimisă la server. ISINDEX.gif" ALT="&#10004. 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. cînd elementul pierde focusul. reset button şi push button şi sînt stabilite de valoarea lui TYPE. FIELDSET Conţinut în: • Elemente block-level. INPUT. elemente inline. oferind posibilitatea de avea mai multe butoane submit într-un formular. cînd textul dintr-un control de tip text sau password este selectat. IFRAME • Elemente block-level exceptînd FORM. toate browser-ele sugerează pentru aceste butoane apăsarea. dar oferă mai multe posibilităţi de afişare (mai multe etichete. asocierea cu imagini. TEXTAREA. conţinut). spre deosebire de cele definite cu INPUT care pot fi „plate“. BUTTON.."></BUTTON> 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 160 . SELECT.• • • ONBLUR.0 şi există browsere care încă nu-l suportă! Butoanele care pot fi definite cu acest element sînt submit button (implicit). LABEL. Totuşi elementul este nou în HTML 4. cu excepţia lui BUTTON Descriere: Acest element crează butoane într-un mod similar cu INPUT.."></BUTTON> <BUTTON TYPE=reset ACCESSKEY=R>Reset <IMG SRC="x. ONCHANGE.gif" ALT="&#10008. cînd elementul pierde focusul şi valoarea lui a fost schimbată faţă de momentul în care l-a primit Elementul BUTTON Sintaxa: <BUTTON> . ONSELECT. Mai mult.

• <BUTTON TYPE=button ID=toggler ONCLICK="toggle()" ACCESSKEY=H>Hide </BUTTON> Atributul DISABLE face butonul inaccesibil: nu se mai poate apăsa. dar crează butoanele Submit şi Reset cu BUTON în locul lui INPUT. Exemplu: Acest exemplu îl extinde pe cel de la INPUT. Atributele ACCESSKEY. <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. TABINDEX şi cele care specifică acţiuni de scriptare (ONFOCUS şi ONBLUR) se folosesc la fel ca şi la INPUT.gif" alt="oops"> </BUTTON> </P> </FORM> 161 . nu mai primeşte focusul şi este sărit cînd se navighează cu TAB.gif" alt="wow"> </BUTTON> <BUTTON name="reset" type="reset"> Reset<IMG src="/icons/oops. 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.

Ca şi elementele INPUT. totuşi că Netscape Navigator NU va afişa nici un element TEXTAREA în afara unui formular definit cu FORM. El este utilizat de obicei în cadrul lui FORM. </TEXTAREA> Atribute posibile: • • • • • • • • • • • • Conţine: • Text (incluzînd entităţi) Conţinut în: • Elemente block-level..0 permite şi folosirea lui în orice element block-level sau inline (cu excepţia lui BUTTON). regiunile text au un nume care permite identificarea acestui cîmp de către server. 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). De remarcat.. dar HTML 4.. Elementul TEXTAREA are parametrii (obligatorii) ROWS şi COLS care specifică dimensiunile 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 162 .gif" usemap=". Elementul TEXTAREA nu este o comandă de tip INPUT ci una de cu totul alt tip. elemente inline. care va primi informaţia de formă nume=conţinut.."> </BUTTON> Elementul TEXTAREA Sintaxa: <TEXTAREA> . astfel că acesta îşi poate "lipi" un document întreg într-o pagină HTML. De aceea exemplul următor este ILEGAL! <BUTTON> <IMG src="foo.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. Acest element oferă posibilitatea de a accepta de la utilizator un bloc de text.

Acest control este urmat de două butoane: Submit şi Reset. Determinarea elementelor preselectate se face după cum urmează: 163 . Elementele unui meniu pot fi grupate logic în grupuri cu ajutorul elementului OPTGROUP. <FORM action="http://somesite. determină afişarea unui text nemodificabil.ferestrei afişate utilizatorului. ceea ce înseamnă că trebuie un terminator </TEXTAREA>.. nou în HTML 4. În HTML 4.0 şi destul de puţin suportat. </TEXTAREA> <INPUT type="submit" value="Send"> <INPUT type="reset"> </P> </FORM> 3. Elementul OPTION este utilizat pentru definirea fiecărui element al meniului. Atunci cînd un formular este transmis spre a fi prelucrat (submit). Atributul DISABLED se comportă ca şi la INPUT. ONSELECT şi ONCHANGE) se folosesc la fel ca şi la INPUT. TABINDEX şi cele care specifică acţiuni de scriptare (ONFOCUS. îmbricate.com/prog/text-read" method="post"> <P> <TEXTAREA name="thetext" rows="20" cols="80"> Prima linie a textului iniţial. Exemplu: Acest exemplu crează un control TEXTAREA de 20 de rînduri şi 80 de coloane. respectiv verticală. OPTION are un singur parametru: SELECTED. Fiecare listă prezintă utilizatorului unul sau mai multe elemente care pot fi selectate individual sau multiplu. Elementul TEXTAREA nu este vid. transformînd textul în read-only. Listele pot fi afişate în interiorul unei ferestre sau de forma drop-down. 64 KB. avînd iniţial 2 linii de text. de orice lungime. Atributele ACCESSKEY. În interiorul elementului SELECT sînt permise doar două elemente: text simplu şi cel puţin un element OPTION. OPTGROUP. Utilizarea lui înseamnă că elementul respectiv este selectat implicit. prin intermediul elementului SELECT. Opţiuni preselectate Dintre opţiunile unei liste pot fi preselectate zero sau mai multe. numele (NAME) listei va fi trimis serverului împreună cu elementul selectat din listă. Limitarea finală este făcută de scriptul CGI sau de servletul Java care primeşte formularul. OPTION) HTML permite crearea mai multor tipuri de liste de selecţie (meniuri). exprimate în număr de caractere pe orizontală.0 grupurile nu pot fi. A doua linie a textului iniţial. 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). Diferenţa faţă de textul simplu este ca acesta este trimis serverului odată cu formularul. ONBLUR. 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. Crearea controalelor de selecţie într-un formular (SELECT. Ferestrele inserate permit accesarea elementelor conţinute cu ajutorul unor bare de derulare. Se limitează totuşi cantitatea totală de text ce se poate introduce (în practică) la 32 . însă. Atributul READONLY.. Ceea ce se află între cele două etichete va apare ca text implicit în cîmpul definit.

• • • • Dacă nici un element OPTION nu are atributul SELECTED setat. Dacă nu este specificată se foloseşte conţinutul elementului OPTION. Daca elementul SELECT are atributul MULTIPLE şi mai mult de un element OPTION are atributul SELECTED setat.5" value="pm2_3. <FORM action="http://somesite. În cazul unui grup de opţiuni.1" value="pm3_3. Ce nu se vede se accesează după ce se face scroll.7. atunci nu vor fi elemente preselectate. Exemplu: Se crează un meniu ce permite selectarea unor componente software care să se instaleze.7R">IRX with ComOS 3.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. celelalte nefiind preselectate.7R <OPTION label="3.7 <OPTION label="3. 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. se foloseşte valoarea atributului LABEL de la fiecare element OPTION pentru afişarea acelei opţiuni. dar nu trebuie să fie preselectat mai mult de o singură opţiune La afişarea unui menu. atunci acesta va fi preselectat. Dacă un element OPTION are atributul SELECTED setat. Atributul SIZE indică faptul că meniul are doar 4 rînduri.5R </OPTGROUP> </SELECT> 164 .1 <OPTION label="3.7" value="pm2_3.5R" value="IRX_3.com/prog/someprog" method="post"> <P> <SELECT name="ComOS"> <OPTGROUP label="PortMaster 3"> <OPTION label="3.7" value="pm3_3.7">PortMaster 3 with ComOS 3.5">PortMaster 3 with ComOS 3.5 </OPTGROUP> <OPTGROUP label="IRX"> <OPTION label="3.7. Dupa definirea meniului apar butoanele Submit şi Reset. Prima şi a doua componentă sînt preselectate şi pot fi deselectate. atributul LABEL specifică eticheta acelui grup de opţiuni. chiar dacă sînt 7 opţiuni.7">PortMaster 2 with ComOS 3.5">PortMaster 2 with ComOS 3.7.7R" value="IRX_3.5" value="pm3_3.7 <OPTION label="3.5 </OPTGROUP> <OPTGROUP label="PortMaster 2"> <OPTION label="3.1">PortMaster 3 with ComOS 3.5R">IRX with ComOS 3. Fiecare browser va acţiona diferit.

</FORM> Grupurile (logice) de opţiuni sînt.5 PortMaster 2 3.5 IRX 3. cu excepţia lui BUTTON Descriere: Acest element defineşte un control pentru selecţia dintr-o listă de opţiuni. El este utilizat de 165 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 .7 3. elemente inline..1 3. </SELECT> Atribute posibile: • • • • • • • • • Conţine: • Unul sau mai multe elemente OPTGROUP sau OPTION Conţinut în: • elemente de tip block-level.7.7R 3..7 3. de exemplu. O posibilă afişare a meniului definit anterior este prezentată în figura următoare: Elementul SELECT Sintaxa: <SELECT> . în acest caz: PortMaster 3 3. meniuri ierarhice sau alt mecanism asemănător.5R Browser-ele pot permite utilizatorilor selectarea unei opţiuni dintr-un grup utilizînd.

Parametrul nu are o valoare numerică asociată.0 permite şi folosirea lui în orice element block-level sau inline (cu excepţia lui BUTTON). Utilizarea este pentru situaţii similare celor rezolvate de butoanele radio. dar HTML 4. Valoarea atributului NAME va fi trimisă serverului ca identificator al controlului (împreună cu opţiunea selectată). SIZE. valoarea lui implicită este l. prima fiind selectată implicit (OPTION SELECTED>Roşu). Elementul SELECT are un parametru opţional. celelalte elemente pot fi văzute cu ajutorul barei de derulare (scroll) care apare în dreapta listei.obicei în cadrul lui FORM. Dacă acest parametru lipseşte. <FORM> Selectaţi culorile favorite din următoare listă: <SELECT NAME="culori" SIZE=3 MULTIPLE> <OPTION SELECTED>Roşu <OPTION>Verde <OPTION>Albastru <OPTION>Turcoaz <OPTION>Magenta </SELECT> </FORM> Elementul OPTGROUP Sintaxa: 166 . afişat într-o fereastră în care sînt vizibile simultan 3 opţiuni (SIZE=3). 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. Fiecare opţiune este conţinută într-un element OPTION. 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. lista va fi de tip drop-down şi din listă poate fi selectat doar un singur element. precum şi cele legate de acţiunile de scriptare pe anumite evenimente sînt similare cu cele de la INPUT. Un alt parametru opţional pentru <SELECT> este MULTIPLE. <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. cu posibilitatea de a selecta mai multe opţiuni (MULTIPLE). ca în exemplul următor. iar acestea pot fi grupate logic cu OPTGROUP. 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. Dacă lista este mai lungă. Exemplu: Exemplul următor crează un meniu de 5 opţiuni (5 elemente OPTION). De remarcat.

x</OPTION> <OPTION LABEL="1. acestea neputînd fi selectate şi nici trimise la server odată cu formularul.x</OPTION> <OPTGROUP LABEL="Microsoft Internet Explorer"> <OPTION LABEL="4. Microsoft Internet Explorer.x or higher</OPTION> 3.x">Microsoft Internet Explorer 1.x or higher</OPTION> <OPTION LABEL="2. Exemplu: Exemplul următor se poate folosi pentru a cere utilizatorului informaţii despre browser-ul pe care îl utilizează mai frecvent. identifică grupul de opţiuni.x">Microsoft Internet Explorer 3.x</OPTION> </OPTGROUP> <OPTGROUP LABEL="Opera"> <OPTION LABEL="3. Cele care îl suportă permit o afişare mai compactă prin intermediul meniurilor cascadate (submeniuri).x">Microsoft Internet Explorer 2. <P>Ce browser Web folosiţi în mod curent? <SELECT NAME=browser> <OPTGROUP LABEL="Netscape Navigator"> <OPTION LABEL="4.x">Netscape Navigator <OPTION LABEL="2. OPTGROUP nu este foarte bine suportat de toate browserele. El trebuie să descrie grupul de opţiuni grupate dpdv logic împreună cu atributele LABEL ale fiecărei opţiuni în parte.x</OPTION> 2.x </OPTION> <OPTION LABEL="3. dar cele care nu îl recunosc nu crează nici o problemă. Opera sau altul).x">Opera 2. fiind afişat de browser şi pentru utilizator.x">Netscape Navigator </OPTGROUP> LABEL=Text (eticheta grupului de opţiuni) DISABLED (grupul de opţiuni este dezactivat) atribute comune 4. Se utilizează OPTGROUP pentru a grupa informaţiile legate de acelaşi tip de browser (Netscape Navigator.x</OPTION> <OPTION LABEL="2.x</OPTION> 1.x">Microsoft Internet Explorer 4.. Atributul LABEL este obligatoriu.x</OPTION> </OPTGROUP> <OPTION>Other</OPTION> </SELECT> </P> 167 .x">Netscape Navigator <OPTION LABEL="3. Cascadarea este însă în HTML 4. </OPTGROUP> Atribute posibile: • • • 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.0 doar pe un singur nivel (nu sînt permise OPTGROUP în OPTGROUP)! Atributul DISABLED face întregul grup de opţiuni inactive (le dezactivează).x">Netscape Navigator <OPTION LABEL="1.x or higher">Opera 3..<OPTGROUP> .

Atributul LABEL specifică eticheta unei opţiuni. care altfel (implicit) este conţinutul elementului.x">Netscape Navigator 3. determină transformarea unei opţiuni în opţiune inactivă (nu poate fi selectată..Elementul OPTION Sintaxa: <OPTION > .x">Netscape Navigator 2. De exemplu.x">Netscape Navigator 1.x</OPTION> <OPTION LABEL="2. fără a sacrifica compatibilitatea cu browser-ele care nu suportă acest element. Dacă lipseşte.x</OPTION> <OPTION LABEL="3.x or higher">Netscape Navigator 4. Valoarea acestei opţiuni este cea care va fi trimisă la Submit şi este specificată cu atributul VALUE.x</OPTION> <OPTION LABEL="1.. se consideră valoare a acestui element conţinutul lui OPTION. nu este trimisă odată cu formularul). Se recomandă folosirea ei pentru că permite utilizarea mult mai uşoară a grupării cu OPTGROUP. Exemplu: <P>Which Web browser do you use most often? <SELECT NAME=browser> <OPTGROUP LABEL="Netscape Navigator"> <OPTION LABEL="4.x</OPTION> </OPTGROUP> <OPTGROUP LABEL="Microsoft Internet Explorer"> 168 . 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. 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> VALUE=CDATA (valoarea opţiunii) SELECTED (opţiune iniţial selectată) DISABLED (dezactivată/inactivă) LABEL=Text (eticheta opţiunii) atribute comune Atributul DISABLED. deşi nu este suportat global.. Atributul boolean SELECTED defineşte o opţiune ce este iniţial selectată – preselectată (a se vedea paragraful anterior relativ la elemente preselectate). </OPTION > Atribute posibile: • • • • • 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)..

x</OPTION> <OPTION LABEL="1.x">Microsoft Internet Explorer 3.x</OPTION> </OPTGROUP> <OPTION>Other</OPTION> </SELECT> </P> Atributul LABEL al elementelor OPTGROUP şi OPTION's LABEL au fost introduse împreună. afişînd numele complet şi versiunea la fiecare opţiune.x</OPTION> <OPTION LABEL="2.x">Microsoft Internet Explorer 2.x or higher</OPTION> <OPTION LABEL="2. 169 .<OPTION LABEL="4.x or higher">Opera 3. aici LABEL). care nu suportă atributul OPTGROUP.x or higher">Microsoft Internet Explorer 4. împreună cu atributul LABEL al lui OPTGROUP care dă numele complet al aplicaţiei (browserului). le vor ignora (împreună cu atributele lor.x">Opera 2. 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.x</OPTION> </OPTGROUP> <OPTGROUP LABEL="Opera"> <OPTION LABEL="3. Celelalte.x">Microsoft Internet Explorer 1. obţinîndu-se o afişare mai compactă.x</OPTION> <OPTION LABEL="3. astfel că un browser sau le suportă pe amîndouă sau pe niciunul.

În acest caz. specificarea se face cu elementul LABEL.. checkbox-urile. Pentru a se asocia implicit o etichetă cu un alt control. browserele trebuie să le folosească ca şiruri de caractere afişate pentru ele. care asociază o etichetă cu un alt control. cînd eticheta este într-o celulă şi controlul asociat în alta. butoanele radio şi meniu). Exemplu: În acest exemplu asociem implicit două etichete cu două controale de tip text: <FORM action=". FOR. LABEL poate conţine doar un singur control. 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ă). în mod explicit: valoarea atributului FOR trebuie să fie exact aceeaşi cu valoarea atributului ID al controlului asociat.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). Acesta ataşează informaţie pentru un control şi numai unul.4.com/prog/adduser " method="post"> for="fname">First Name</LABEL> type="text" name="firstname" id="fname"> for="lname">Last Name</LABEL> type="text" name="lastname" id="lname"> Acelaşi lucru se poate face şi prin includerea elementelor explicite LABEL: <FORM action="http://somesite. Elementul LABEL are un atribut. Exemplu: Acest exemplu crează un tabel care este folosit pentru a alinia două controale text (şi etichetele asociate lor).. În acest fel aceluiaşi control i se pot asocia mai multe elemente LABEL prin crearea de referinţe multiple (cu ajutorul lui FOR). Pentru cele care nu. Pentru controalele care au etichete asociate. Cînd un element LABEL primeşte focusul îl pasează controlului asociat. controlul trebuie să apară în interiorul (conţinutul) elementului LABEL. Fiecare etichetă este asociată explicit cu un control de tip text: <FORM action=" <TABLE> <TR> <TD><LABEL <TD><INPUT <TR> <TD><LABEL <TD><INPUT </TABLE> </FORM> http://somesite. dar multe nu au (cîmpurile text. Eticheta însăşi poate fi poziţionată sau înainte sau după controlul asociat." method="post"> <LABEL> First Name <INPUT type="text" name="firstname"> </LABEL> <LABEL> <INPUT type="text" name="lastname"> 170 .

elementul LABEL trebuie să conţină controlul asociat! Această metodă (de asociere implicită) funcţionează în majoritatea cazurilor. cum ar fi. Valoarea lui FOR trebuie să se potrivească cu valoarea atributului ID al controlului asociat. de exemplu. dar devine inutulizabilă cînd eticheta şi controlul asociat sînt în celule diferite de tabel. ca de exemplu IMG sau STRONG. Prin această asociere autorii paginilor Web oferă sugestii importante utilizatorilor de browsere auditive. </LABEL> Atribute posibile: • • • • • Conţine: • elemente inline cu excepţia lui LABEL Conţinut în: • elemente de tip block-level. posibilitatea de a apăsa o etichetă (text) pentru a selecta un buton radio sau o căsuţă de marcare. Atributul ACCESSKEY. Conţinutul elementului este eticheta controlului şi poate include elemente inline. iar celor care folosesc browsere vizuale li se permite duplicarea unor caracteristici ale interfeţei utilizator (GUI). în paragrafe sau diviziuni diferite .. Fiecare element LABEL este asociat cu exact un control. Atributul FOR specifică în mod explicit controlul care se asociază cu LABEL.Last Name </LABEL> </FORM> Elementul LABEL Sintaxa: <LABEL> . precum şi cele legate de acţiunile de scriptare pe anumite evenimente sînt similare cu cele de la INPUT.. cu excepţia lui BUTTON Descriere: Acest element asociază o etichetă (label) cu un control al unui formular. 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> FOR=IDREF (cîmpul formularului asociat) ACCESSKEY=Character (shortcut key) ONFOCUS=Script (elementul a primit focusul) ONBLUR=Script (elementul a pierdut focusul) atribute comune 171 . elemente inline. În absenţa lui FOR.

un formular care s-ar putea utiliza la un cabinet medical. îmbunătăţind accesibilitatea la acesta pentru browserele nevizuale. Fiecare secţiune conţine controale pentru a se introduce informaţia corespunzătoare. oferind în plus şi facilităţi de navigare (pentru browserele vizuale. Elementul LEGEND permite asignarea unei explicaţii (unui titlu. pentru exemplificare. Fie. Este împărţit în 3 secţiuni: informaţii personale. 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). <FORM action=". LEGEND) Elementul FIELDSET permite gruparea tematică a controalelor şi a etichetelor unui formular.. şir de caractere) unui element FIELDSET.. de exmplu cu tasta TAB). Elementele de structură dintr-un formular (elementele FIELDSET.<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. antecedente medicale (istoria bolilor) şi tratamentul curent." 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" 172 .

alte boli mai vechi. zona în care se scriu medicamentele curente doar dacă se selectează butonul radio cu „Da“). Elementul FIELDSET Sintaxa: <FIELDSET> .value="Rubeola" tabindex="22"> Rubeola <INPUT name="history_illness" type="checkbox" value="Pojar" tabindex="23"> Pojar .. </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. FORM. LI. DIV.. DEL. Prin această operaţie de grupare. BLOCKQUOTE. MAP. NOSCRIPT. NOFRAMES. IFRAME. </ FIELDSET > Atribute posibile: • atribute comune • Un element LEGEND urmat de zero sau mai multe elemente de tip bloc sau in-line. formularele se divid în părţi mai mici.. 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). DD. mai uşor de întreţinut. Conţinut în: • APPLET.. Chiar dacă FIELDSET nu este suportat de toate browser-ele. FIELDSET. de exemplu. TH Conţine: Descriere: Acest element defineşte un grup de controale într-un formular. BODY. adăugînd scripturi (activînd. el poate fi utilizat în deplină siguranţă prin includerea lui între tagurile <P> şi </P>. utilizatorul putîndu-se orienta mai uşor... TD. OBJECT. etc. sau prin inserarea unui tag P înainte de FIELDSET. îmbunătăţind modul de utilizare atît pentru browserele vizuale cît şi pentru cele auditive. în acest fel browser-ele care nu-l recunosc vor include conţinutul lui într-un element 173 . prin adăugarea de informaţii de culoare şi stil (utilizînd tot style-sheet-urile). CENTER. INS.

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. ghid HTML 4. fiecare avînd un element LEGEND asociat. trimiterea formularului făcîndu-se către un program CGI (order. se cer informaţii despre ceea ce se doreşte a se cumpăra şi apoi despre modalitatea de plată.de tip bloc.0 Reference</A> </LABEL> <BR> <LABEL ACCESSKEY=S> <INPUT TYPE=checkbox NAME=products VALUE="CSS Guide"> <A HREF="/reference/css/">Cascading Style Sheets Guide</A> </LABEL> </P> </FIELDSET> <FIELDSET> <LEGEND ACCESSKEY=C>Credit Card Information</LEGEND> <P> <LABEL ACCESSKEY=V> <INPUT TYPE=radio NAME=card VALUE=visa> Visa </LABEL> 174 . La sfîrşit se introduc cele 2 butoane obligatorii într-un formular (Submit şi Reset). adresa postală).cgi) aflat în folderul /cgi.0 Reference"> <A HREF="/reference/html40/">HTML 4. apoi pot să apară oricîte elemente inline sau de tip bloc.0 sau manual de referinţă CSS. inclusiv un alt element FIELDSET. separat de restul formularului. Exemplu: Acest exemplu defineşte un formular pentru comanda unor informaţii (manuale): ghid HTML 3. Conţinutul lui trebuie să înceapă cu un element LEGEND care să ofere un titlu (o explicaţie) pentru grupul de controale.2 Reference"> <A HREF="/reference/html32/">HTML 3. Se cer datele clientului (numele. Fiecare grup de informaţii se află într-un FIELDSET separat. <FORM METHOD=post ACTION="/cgi-bin/order. adresa de email.2.2 Reference</A> </LABEL> <BR> <LABEL ACCESSKEY=4> <INPUT TYPE=checkbox NAME=products VALUE="HTML 4.

Valorile posibile sînt: top.. B sau BIG pentru a sugera faptul că acela este titlul unui grup de controale. bottom. left. Atributul ACCESSKEY se foloseşte la fel ca la INPUT.. iar atributul (depăşit) ALIGN sugerează poziţia relativă faţă de FIELDSET. 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 Conţine: 175 . Chair dacă nu este suportat de toate browserele. right. Elementul LEGEND trebuie să apară la începutul lui FIELDSET.<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> . poate fi utilizat în siguranţă dacă este urmat imediat de un element de tip bloc. înainte de orice alt element. </LEGEND> Atribute posibile: • • • ACCESSKEY=Character (shortcut key) ALIGN=[ top | bottom | left | right ] (alinierea relativă la FIELDSET) atribute comune • elemente inline Conţinut în: • FIELDSET Descriere: Acest element defineşte un titlu (explicaţie) pentru un grup de controale definite cu FIELDSET. Pentru astfel de browsere se pot folosi elemente ca STRONG.

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

conţinutul fiecărui fişier este transmis cu restul datelor din formular. nu vor fi considerate controale de succes nici: • • Butoanele Reset Elementele OBJECT care au atributul DECLARE setat. într-o pereche. Controalele ascunse (hidden) care chiar dacă nu sînt afişate de browsere (nu sînt vizibile) pot fi controale de succes. browserul nu este obligat să îl trateze ca pe un control de succes. Procesarea datelor unui formular Cînd utilizatorul trimite un formular (prin activarea butonului Submit). şi numai ele. 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. adică o pereche din numele "invisiblepassword" şi valoarea "mypassword". Un control de succes trebuie să fie definit întrun element FORM şi trebuie să aibă un nume.. numele controlului este oferit de un element SELECT iar valorile sînt date de elementele OPTION. Exemplu: <FORM action=". Această pereche face parte din setul de date al formularului. Conţinutul fişierului este „împachetat“ conform tipului conţinutului formularului (content-type). cu valoarea sa curentă." 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ă. browserul său realizează următorii paşi (următoarele acţiuni): 177 . numai acela care este activat (apăsat) este de succes Toate căsuţele de marcare (checkbox-urile) setate la on (activate). • Dacă un control nu are o valoare curentă cînd formularul este transmis. În plus. 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. La transmiterea unui formular. 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. Fiecare astfel de control are numele său ascociat. Valoarea curentă a unui obiect este determinată de implementarea specifică a acelui obiect. 3. 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). Pentru meniuri (liste de selecţie).2.

Sfîrşitul de linie (line break) este reprezentat ca o pereche "CR LF" (adică `%0D%0A'). Browserele utilizatorilor trebuie să suporte tipurile indicate în cele ce urmeză. 4. În acest scenariu. Formularele transmise cu acest tip de conţinut trebuie codificate după cum urmează: 1. 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. browserul ia valoarea atributului ACTION. 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). • Pentru orice altă valoare a atributelor ACTION şi METHOD comportamentul este nespecificat. Această specificare nu acoperă toate metodele valide de trimitere sau tipurile de conţinut ce pot fi folosite cu formularele. folosind protocolul specificat de atributul METHOD. Totuşi. Comprtamentul pentru alte tipuri este nespecificat: application/x-www-form-urlencoded Acesta este tipul implicit. 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. 2. Browserele trebuie să afişeze răspunsul generat de tranzacţiile HTTP "get" şi "post". Numele controalelor şi valorile sînt „escaped“. Perechile nume/valoare pentru controale apar în ordinea din document. datele formularului sînt restricţionate la codurile ASCII. 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. Numele este separat de valoare prin semnul egal `=' şi fiecare pereche este separată de celelalte prin semnul`&'. 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.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. iar apoi adaugă setul de date asociat cu formularul. Dacă metoda este "post" şi acţiunea (atributul ACTION) este o adresă (URI) HTTP.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. 178 . Caracterele blanc (spaţiu) sînt înlocuite de `+'. Browserul urmează apoi noua legătura astfel creată. adaugă un „?“ la ea. browserele compatibile HTML 4. stabilind tipul conţinutului (content type) la "application/x-wwwform-urlencoded".

.. contents of file1. cu numele "file2. de exemplu.txt . Un atribut NAME care specifică numele controlului corespondent. 2. fiecare parte are un header opţional "Content-Type" care implicit are valoarea "text/plain" şi care este însoţit de un parametru "charset". specificat cu parameterul "filename" al headerului 'Content-Disposition: form-data'. Presupunem că avem următorul formular: <FORM action=http://server. filename="file1. multipart/form-data Este tipul folosit cînd conţinutul setului de date este alcătuit din mai multe feluri de (seturi de) date. Tipul de conţinut "multipart/form-data" va fi folosit cînd se trimit formulare ce conţin fişiere. boundary=AaB03x --AaB03x Content-Disposition: form-data.. Dacă se trimit mai multe (ca rezultat al unei sigure selecţii din formular).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. înăuntrul lui "multipart/formdata". fiecare reprezentînd un control de succes. name="submit-name" Larry --AaB03x Content-Disposition: form-data..txt". pentru a separa liniile de date se foloseşte "CR LF" (`%0D%0A'). pentru controlul cu numele "mycontrol" partea corespunzătoare lui va fi specificată astfel: Content-Disposition: form-data. Numele controalelor care sînt codificate într-un set de caractere non-ASCII pot fi modificate. name="mycontrol" Ca la toate transmiterile MIME.gif". Un header tip "Content-Disposition" a cărui valoare să fie "form-data".txt" Content-Type: text/plain . --AaB03x-- Dacă utilizatorul selectează al doilea fişier (o imagine). Astfel. Părţile sînt trimise agentului care le procesează în ordinea în care apar în document.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. date non-ASCII şi date binare. Fiecare fişier trebuie trimis cu un nume. Dacă se trimite un fişier (conţinutul lui) acesta trebuie să fie identificat obligatoriu de tipul conţinutului (de exemplu"application/octet-stream"). browserul va trebui să contruiască părţile componente ale tranzacţiei după cum urmează: 179 . Un stfel de mesaj conţine o serie de părţi. Fiecare parte trebuie să conţină: 1. ele trebuie trimise ca "multipart/mixed". La fel ca la orice tip multipart MIME. Se supune regulilor de la toate şirurile de date (stream-urile) de tip multipart MIME. Dacă acesta nu este codificat ASCII el trebuie fie aproximat fie codificat. name="files". Exemplu: Acest exemplu ilustrază codificarea "multipart/form-data". browserul lui va trebui să trimită următoarele date la server: Content-Type: multipart/form-data.

Content-Type: multipart/form-data; boundary=AaB03x --AaB03x Content-Disposition: form-data; name="submit-name" Larry --AaB03x Content-Disposition: form-data; name="files" Content-Type: multipart/mixed; boundary=BbC04y --BbC04y Content-Disposition: attachment; filename="file1.txt" Content-Type: text/plain ... contents of file1.txt ... --BbC04y Content-Disposition: attachment; filename="file2.gif" Content-Type: image/gif Content-Transfer-Encoding: binary ...contents of file2.gif... --BbC04y---AaB03x—

180

Capitolul 8. Alte elemente ale limbajului HTML
8.1. Formule matematice
Una din cele mai ambiţioase caracteristici aduse de specificaţiile HTML 3.0 este posibilitatea de a afişa formule matematice. Toate ecuaţiile matematice încep cu <MATH> şi se termină cu </MATH> care suportă atributele ID (pentru ancore) şi CLASS (pentru subclasele ecuaţiilor; de exemplu CHEM, pentru chimie). Între aceste tag-uri se pot introduce mici ecuaţii matematice (pe un singur rînd). Posibilităţile de aliniere sînt reduse şi recomandarea este să se utilizeze tabele pentru alinierea seturilor multiple de ecuaţii. Entităţile matematice (caractere greceşti, simboluri, săgeţi, etc) le găsiţi listate la adresa http://www.hpl.hp.co.uk/people/dsr/html/maths.html şi sînt de forma: &alpha; &beta; &gamma; alfa beta gama, etc.

Exponenţii sînt introduşi de forma <SUP>Exponent</SUP> (superscript), iar indicii sînt introduşi prin <SUB>Indice</SUB> (subscript). Exemple: <math> x<sup>2</sup>+y<sup>2</sup>=r<sup>2</sup> </math> <math> &sum;<sup>&inf;</sup><sub>n=1</sub> </math> Simbolurile anumitor operaţii matematice sînt introduse de forma: <tag operaţie>expresie afectată</ tag operaţie> ca în cazul următor, pentru radical de ordinul doi: <SQRT>x+y</SQRT> Matricile (arrays) se introduc de o manieră asemănătoare cu tabelele, rînd cu rînd, element cu element: <math> <array> <row><item>a<item>b <row><item>c<item>d </array> </math>

181

8.2. Documente dinamice
Felul în care este prezentat un document pe Web este, din punctul de vedere al tehnoredactării, cu mult în urma publicaţiilor tradiţionale, pe hîrtie. Limbajul HTML se dezvoltă anevoios. A început prin a imita stîngaci publicaţiile tipărite dar a continuat prin a-şi identifica trăsături aparte, inaccesibile publicaţiilor clasice, de la cele care ţin de tehnologia în sine şi pînă la cele care ţin de noile posibilităţi estetice. Documentele dinamice reprezintă un pas înainte făcut de tehnologia Web în a-şi găsi propria identitate. 1. Client pull <META HTTP-EQUIV="Refresh" CONTENT="interval_de_timp [;URL]"> Client-pull este capacitatea navigatorului (a clientului) de a cere singur documente noi fără vreo intervenţie a utilizatorului. Browserele realizează acest lucru folosindu-se de header-ul HTTP numit Refresh. Refresh este trimis de la server la navigator şi-i spune navigatorului să ceară un nou document după un anumit număr de secunde (sau imediat). Modalitatea de a lipi headere HTTP în documente HTML este dată de tag-ul <META>. Exemplu: Inserarea în prima pagină HTML a codului:
<META HTTP-EQUIV="Refresh" CONTENT="1; URL=http://www.xxx.ro/pagina2.htm1">

va determina navigatorul care a cerut-o să aducă după o secundă şi cea de-a doua pagină. O idee bună (pentru a nu bloca vreun vizitator al cărui navigator nu înţelege codul) este introducerea în paginile cu client-pull a unor legături care să-i permită vizitatorului să "evadeze" fără a închide complet aplicaţia. 2. Server push O altă modalitate de a realiza documente dinamice este server push. Spre deosebire de client pull, unde navigatorul iniţia conectări multiple cu serverul, în acest caz serverul este cel care menţine legătura deschisă şi pompează date către client. Această facilitate poate fi folosită fie pentru a trimite mai multe pagini ale documentului către client (rezultat similar cu client pull) fie pentru a trimite clientului imagini care se înlocuiesc succesiv în acelaşi loc dînd impresia de animaţie în documentul HTML. Server push se bazează pe un tip de document MIME special, numit multipart/mixed. Acest tip MIME este utilizat pentru mesaje de poştă care conţin diferite tipuri de fişiere de date. Server push utilizează o variantă a tipului multipart MIME numit multipart/x-mixed-replace în care un eşantion de date înlocuieşte integral un eşantion precedent. Rezultatul este că server-push poate coda şi trimite mai multe tipuri de informaţie (GIF, text HTML, text ASCII, etc) într-unul şi acelaşi document. Headerul dă instrucţiuni navigatorului să înlocuiască fiecare segment de document cu noul element ce a fost încărcat, trimis automat de către server. Imaginile animate constituie una din cele mai utilizate aplicaţii ale acestei tehnologii; animarea este realizată prin trimiterea unui document multipart ce constă într-o secvenţă liniară de imagini GIF, fiecare dintre aceste imagini reprezentând un cadru de animaţie. Browserul afişează aceste imagini serial, una după alta, producând astfel efectul de mişcare. Implementarea tehnologiei server-push este mai complicată decât cea de client-pull, deoarece nu există un tag specific şi necesită aplicaţii CGI specifice.

182

PICT Majoritatea programelor bune de grafică pot face conversii între aceste formate. Utilizarea imaginilor externe conferă însă o mai mare flexibilitate. el include informaţii despre tipul fişierului utilizînd un mesaj special trimis odată cu fişierul. Este recomandabilă utilizarea lui şi pentru imagini externe Deşi unele navigatoare pot afişa acest format. Cîteva din cele mai întîlnite formate sînt următoarele: Format GIF JPEG Extensie . căreia să-i treacă fişierul. care nu a putut fi interpretat de navigator. va prelucra fişierul care constituie mediul extern. Legătura dintr-un document HTML la un astfel de fişier se face utilizînd tag-ul <A>.3. Specificarea mediilor externe în HTML se face cu ajutorul tag-ului <A> şi a atributului HREF. Utilizarea mediilor externe: imagini. Nu sînt afişabile direct de către navigator Format grafic obişnuit pentru sistemele Macintosh XBM PICT . majoritatea nu o pot face. Dacă navigatorul nu identifică tipul fişierului atunci îl salvează pe disc după ce în prealabil (de regulă) cere permisiunea utilizatorului. 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. afişabil de majoritatea navigatoarelor grafice. . el încearcă să identifice (dintr-o listă cunoscută) o aplicaţie ajutătoare (numită uneori helper sau viewer). la rîndul ei. nu există nici un motiv puternic ca acestea să includă viewere pentru tipuri de fişiere mai rar întîlnite. cu deosebirea că în aceste cazuri utilizează extensiile fişierelor pentru a identifica tipul de fişier.jpg. De altfel.jpeg Utilizări Formatul afişabil direct de navigatoare. Navigatorul utilizează aplicaţiile ajutătoare şi în cazul în care fişierele sînt încărcate de pe discul local.gif . în cazul că lucrăm local. Dacă tipul fişierului este recunoscut şi aplicaţia ajutătoare corespunzătoare este definită. este recomandabilă inserarea în document (alături de celelalte informaţii despre fişier) 183 . 1. sunete şi video Mediile externe sînt fişiere care nu pot fi afişate direct de navigatorul Web. Dacă navigatorul nu poate afişa acel tip de fişier. navigatorul poate identifica tipurile de fişiere. În cazul imaginilor externe mari. Acest mod de lucru face ca dimensiunile navigatoarelor să rămînă în continuare mici. fişiere arhivate. Este deci recomandabilă utilizarea imaginilor cu acest format ca imagini externe Numele vine de la X Window System Bitmap.gif pentru documentele HTML şi imagini GIF.xbm . dimensiune sau orice alte informaţii care l-ar ajuta pe cel ajuns aici să decidă dacă să ia fişierul sau nu. Cînd serverul trimite un anumit fişier navigatorului. Fiecare navigator are o listă care mapează extensiile fişierelor şi tipurile corespunzătoare de aplicaţii.8. Fişiere externe pot fi orice fişiere pe care le puteţi crea (video MPEG.html sau . navigatorul startează aplicaţia şi îi trece fişierul. Acesta este de fapt şi motivul pentru care trebuie utilizate extensiile . etc). Aplicaţia. fişiere PostScript. Imagini externe Formatul cel mai des utilizat în documentele HTML este GIF.

a aceleiaşi imagini (sau porţiune de imagine) mult reduse. AU permite mai multe tipuri de rezoluţii şi eşantionare dar cel mai răspîndit este mono. conceput iniţial pentru industria telefonică din Statele Unite. Cele mai răspîndite sînt: Format AU Extensie . Formatul are aceleaşi limitări ca şi . Deocamdată singurul format sonor independent de platformă este AU (utilizat de Sun Microsystem şi NeXT pentru standardul lor audio). Fişierele AU tind să fie mici.gif">25K fişier JPEG</A> 2. 3. cu rezoluţie verticală pe 8 biţi şi eşantionare orizontală pe 8kHZ (micro-law).au Utilizări Dezvoltat iniţial pentru eşantionări pe 8 biţi.wav MPEG Audio . este în prezent perfecţionat de o versiune pe 11 biţi.aiff. Exemplu: <A HREF="imagine_mare. 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. în mare parte asemănător. Sunete Utilizarea sunetelor se poate face fie pentru inserarea unor adnotaţii la fişierele text. Rezoluţie verticală stereo/ mono pe 8 sau 16 biţi.wav tind să fie de calitate mai bună decît . . format AU)</A> (se adaugă informaţii privind ce anume conţine fişierul.aif Recomandările generale privind inserarea fişierelor externe sînt valabile şi aici.au">Puţină muzică (375K.mp3 AIFF/AIFC . Nu este un fişier foarte comun pentru Web. Inserarea unui fişier audio trebuie făcută astfel: <A HREF="audio_clip. AIFC este AIFF cu compresie incorporată WAV . Video 184 . Echivalentul său european este A-law.au dar si fişierele sînt mai voluminoase. uşor de luat şi utilizabile pe orice tip de computer deşi nu este încă un standard internaţional Este formatul audio pentru Microsoft Windows. pentru a da o idee vizitatorului despre imaginea pe care eventual o va lua. formatul si cît este de mare). Fişierele .mp2. fie pentru mesaje de bunvenit sau clipuri audio. compacte. Permit orice rezoluţie verticală şi orice frecventă de eşantionare 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 (Audio Interchange File Format) este formatul fişierelor sonore dezvoltat de Apple pentru Macintosh dar adoptat şi de alţii (SGI).wav în ceea ce priveşte compatibilitatea multiplatformă. .jpg"><IMG SRC="imagine_micşorată.

formatul este foarte pretenţios hard şi RAM AVI este formatul Microsoft Windows pentru video. pe măsură ce softurile de redare devin disponibile pentru alte platforme. MPEG este similar formatului JPEG pentru grafică. QuickTime are de asemenea avantajul că poate include o pistă audio împreună cu cea video. 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.8 baud) aproximativ 20 de minute. Cu alte cuvinte. Pentru fişierele video independente de platformă. fiind optimizat pentru video. Ca şi în cazul clipurilor audio. 1. Un minut de video poate însemna în jur de 1000 de cadre diferite. Clipurile video sînt uriaşe.5 M)</A> 185 .QT">Un mesaj de bunvenit (QuickTime. Utilizatorii acestui sistem pot utiliza cu uşurinţă fişiere video AVI deoarece formatul a fost optimizat pentru Windows QT este abrevierea de la QuickTime şi este formatul dezvoltat şi brevetat de Apple Computer. acestea avînd nevoie de aplicaţii ajutătoare. 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. fişierele video nu sînt redate direct de navigatoare. de regulă de 1-2 MB. compact şi uşor de înregistrat AVI QT Exemplu: <A HREF="bunvenit. 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. Formatul este răspîndit deoarece clipurile video în acest format sînt de bună calitate. Utilizatorii Mac sînt mai norocoşi deoarece au aceste facilităţi încorporate în sistem. Din nefericire. Este multiplatformă. Luarea unui asemenea fişier de pe un server poate însemna (la o viteză de transfer de 28. Marea problemă cu fişierele video este dimensiunea acestora.Clipurile video sînt o combinaţie de imagine şi sunet asemănătoare unui film. Motivul este că aceste fişiere sînt compuse din sute de cadre care sînt afişate cu frecvenţă ridicată unele după altele. standardul curent este MPEG dar QuickTime (Apple) cîştigă în ultima vreme tot mai mult teren. Cîteva din formatele mai răspîndite sînt: Format MPEG Utilizări Unul dintre cele mai vechi formate video.

Structura documentelor HTML Capitolul 4. Internet şi World Wide Web Capitolul 2. Alte elemente ale limbajului HTML 186 . Utilizarea frame-urilor în HTML Capitolul 7. Utilizarea tabelelor în HTML Capitolul 6. Descrierea generală a limbajului HTML Capitolul 3.Capitolul 1. Elemente de bază ale limbajului HTML Capitolul 5. Utilizarea formularelor (forms) în HTML Capitolul 8.

Sign up to vote on this title
UsefulNot useful