Cuprins CUPRINS 3

BIBLIOGRAFIE

CUVNT NAINTE

CAPITOLUL 1. INTERNET I WORLD WIDE WEB

1.1. INTRODUCERE Ce este Internetul? Ce este World Wide Web (WWW, W3) 1.2. RESURSELE WORLD WIDE WEB 1.3. ADRESAREA UNEI RESURSE N WEB 1.4. ELEMENTELE CONEXIUNILOR N SPAIUL WWW 1.5. PROTOCOLUL HTTP 1.5.1. INTRODUCERE GENERAL 1.5.2. MESAJELE PROTOCOLULUI HHTP 1.5.3. METODELE PROTOCOLULUI HHTP CAPITOLUL 2. DESCRIERE GENERAL A HTML 13 14 15 19

9 9 10 11 11 12 13

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? Revoluia HTML 4.0.

19 19 19 20 21 24 24

Validarea documentelor HTML.

25

2.2. REPREZENTAREA DOCUMENTELOR HTML 2.3. STRUCTURA I LOGICA LIMBAJULUI HTML I. Tag-urile HTML II. Caractere entiti CAPITOLUL 3. STRUCTURA DOCUMENTELOR HTML 31

26 27 27 28

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

31 32 33 33 34 37 40

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 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) 53 II. Elementele de tip inline (inline level elements) 54 III. Elementele de tip nedefinit (pot fi att inline ct i block) 56 CAPITOLUL 4. ELEMENTE DE BAZ HTML 57

4.1. ELEMENTE UTILIZATE LA FORMATAREA TEXTULUI UNUI DOCUMENT 1. Terminarea rndului (elementul BR) 57 2. Titluri (elementul Hi) 58 3. Containere de text (stiluri ale unui bloc) 59 A. Paragrafe (elementul P) 59 B. Containerul logic de tip bloc (elementul DIV) 60 C. Containerul logic de tip text/inline (elementul SPAN) 60 D. Textul centrat (elementul CENTER) 62 E. Textul preformatat (elementul PRE) 62 F. Adrese (elementul ADDRESS) 63 G. Citate lungi (elementul BLOCKQUOTE) 64 H. Citate scurte (elementul Q) 65 4. Stilurile caracterelor 5. Elemente de modificare a fontului caracterelor 67 A. Dimensiunea fontului 67 B. Stabilirea fontului de baz 69 4.2. DEFINIREA I UTILIZAREA LISTELOR 4.3. TAG-URI (ELEMENTE) PENTRU LEGTURI 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) 98 3. Fundalul unui document 4. Culoarea textului i a legturilor CAPITOLUL 5. UTILIZAREA TABELELOR N HTML 98 70 77 83 90 98

57

66

99 100 101

CAPITOLUL 6. UTILIZAREA FRAME-URILOR N HTML

131

CAPITOLUL 7. UTILIZAREA FORMULALELOR (FORMS)

145

CAPITOLUL 8. ALTE ELEMENTE ALE LIMBAJULUI HTML

181

8.1. FORMULE MATEMATICE 8.2. DOCUMENTE DINAMICE

181 182

8.3. UTILIZAREA MEDIILOR EXTERNE: IMAGINI, SUNETE I VIDEO 183

Bibliografie [1] WWW Consortium, HTML 4.0 Specification, www.w3.org/TR/REC-html40 [2] Strebe, Mathew, Perkins, Charles, MCSE Internet Information server - Study Guide, SYBEX Corporation, 1998 [3] Tittel, Ed, Gaither, Mark, Hassinger, Sebastian, Erwin, Mike, Foundations of World Wide Programming, IDG Books Worldwide Inc., 1997 [4] Honeycutt, Jerry, Special Edition Using HTML 4.0, Maximillan Computer Publishing, 1998

[5] Mat Publishing Limited, Developer Network Journal, 1998, 1999 collection [6] Miller Freeman, Inc., Microsoft Corp., Microsoft Internet Developer Journal, 1998, 1999 collection

Cuvnt nainte Aplicaiile distribuite snt de o bun perioad de timp o prezen uzual n peisajul IT chiar i din ara noastr. Ultimii ani au nsemnat, de asemenea, i pai semnificativi i concrei n impunerea Inter-netului n ntreaga economie i societate. Odat cu acesta, aplicaiile distribuite care au ca suport Internetul i tehnologiile dezvoltate pentru acesta i mpreun cu el, au trecut de la stadiul de nouti tehnologice la cel de prezen real n comunitatea IT. Procesul de educaie a tinerilor specialiti IT simte nevoia plonjrii n aceast realitate. Tehnologia Java, DHTML, tehnologia de scripting (Java Script, VB Script), bazele de date distribuite n Inter-net i accesul la ele, interfeele utilizator flexibile, bazate pe browsere capabile de performane din ce mai apropiate de necesiti, tehnologia componentelor, toate acestea snt necesiti stringente ale tehno-logiei IT i, implicit, ale procesului educaional din acest domeniu. n acest spirit am ncercat s aduc n faa studenilor problematica fascinant a lumii distribuite, dar cooperante, dezvoltat de aceste tehnologii. Suportul acestei fascinaii st, far ndoial, n geniul i viziunea celor care au fcut din Internet o comunitate. Fundamentul acestei realiti este, nu ncape ndoial, limbajul HTML, cel care a fcut posibil explozia de comunicare actual, cel care a adus aproape oameni, altfel att de diferii: de la cercettori la studeni, de la oameni de tiin la copiii care abia descoper computerul, dar care descoper odat cu el Internetul. Aceasta este prima parte a unui suport de curs la disciplina Dezvoltarea aplicaiilor distribuite n Internet, introdus n acest an, la anul IV, n semestrul al doilea, la secia de calculatoare a Facult-ii de Automatic, Calculatoare i Electronic din Craiova. Studenilor acestei faculti li se adreseaz, n primul rnd. Dimensiunea lucrrii a fost determinat de dorina de a pune la dispoziia celor care au preocupri n acest domeniu a unui material ct mai complet n limba romn referitor la limbajul HTML. Versiunea descris aici este HTML 4.0 i este impus de realitatea Web-ului nceputului de an 1999. Structurat n 8 capitole, prezentul suport de curs, prezint gradual i ct mai compet cu putin limbajul HTML. Capitolul 1 face o scurt prezentare a noiunilor eseniale legate de Internet i Web, iar Capitolul 2 o descriere general i o scurt incursiune n istoria limbajului HTML. Este partea intro-ductiv care este urmat apoi de capitolele ce descriu structura unui document scris n HTML Capi-tolul 3) i elementele de baz utilizate n documentele HTML texte, legturi, imagini (Capitolul 4). Capitolele 5, 6 i 7 detaliaz modalitile de utilizare a tabelelor, frameurilor i a formularelor inter-active, adic partea mai avansat a limbajului HTML. Capitolul 8 prezint, pe scurt, elemente mai deosebite ale limbajului. Reprezentnd doar fundamentul, prezentul suport de curs nu face dect s incite i s promit adevratele performane ale tehnologiei Internetului. Va urma partea a doua a acestui suport de curs care va acoperi (cel puin) o parte dintre ele: Cascading Style Sheet, Dynamic HTML, tehnologiile de scripting i, bineneles, limbajul Java . Acest suport reprezint ncununarea unei perioade de mare efort, dar extrem de rodnice, perioad petrecut de autor n Germania, la Fachhochschule Regensburg, iar apariia lui, n aceast form, se sprijin pe sprijinul material oferit de Uniunea European prin programele Tempus. Un gnd plin de recunotiin, profesorului Oleg Cernian, coordonatorul Programelor Tempus din Facultatea de Automatic, Calculatoare i Electronic, al crui merit n dezvoltarea Catedrei de Calculatoare devine, odat cu trecerea timpului, tot mai clar i mai evident.

Craiova, martie 1999

Autorul

Capitolul 1. INTERNET i World Wide Web 1.1. Introducere Ce este Internetul? Internetul a fost descris ca o colecie larg de reele sau ca o reea de reele. Dei ambele definiii snt corecte, nici una nu surprinde Internetul n totalitatea sa. Pe lng instrumentul care este aceast imens conexiune, Internetul nseamn i mulimea comunitilor celor ce l folosesc, fiecare n scopuri diferite: comunitatea academic utilizeaz Internetul ca pe cel mai mare, complet i totodat complex instrument de nvare (educaional); comunitatea tiinific utilizeaz Internetul ca pe un instrument de cercetare i colaborare; comunitatea economic utilizeaz Internetul ca pe un mediu de derulare al afacerilor. Internetul nu este o organizaie monolitic, avnd o conducere i un grup de control unice; Internetul este o societate de reele de calculatoare interconectate, independente dar care (din anumite motive) se supun unor protocoale globale.

Ce este World Wide Web (WWW, W3) World Wide Web (WWW sau W3) este o reea de resurse informaionale de o extraordinar de mare diversitate n ceea ce privete coninutul. Este un sistem interactiv hipermedia (adic un sistem ce conine i suport patru categorii importante de tipuri de informaie: texte, imagini, sunete/audio i imagini video n micare) construit peste Internet. Pentru a face aceste resurse disponibile (utilizabile) unei audiene ct mai largi, Web-ul se sprijin pe 3 mecanisme fundamentale: 1. O schem uniform de denumire (de stabilire a numelor, naming scheme) pentru a localiza resursele n Web (de exemplu URI). 2. Protocoale pentru accesarea resurselor astfel denumite n Web (de exemplu HTTP) 3. Hypertextul pentru navigarea comod de la o resurs la alta (ntre resurse).

Elementele fundamentale ale WWW snt prezentate n figura urmtoare:

World Wide Web este cel mai vizibil instrument Internet, transformndu-l (prin capacitile sale de a prezenta informaiile) n cel mai important instrument al zilelor noastre i ntr-o surs de informaii fr egal. Web-ul poate fi utilizat pentru cutarea de informaii despre produse, transferul de software i versiuni noi ale acestuia, pstrarea unor colecii de informaii de orice fel de tip (de exemplu de ziare), n general pentru aflarea unor informaii despre orice tip de informaie imaginabil.

1.2. Resursele World Wide Web Unul din conceptele de baz - preluat i acceptat i n alte protocoale utilizate n Internet - este cel de resurs. O resurs poate fi un program, un calculator, un document, o baz de date, un serviciu - nu prea are importan, att timp ct poate fi referit n mod corect i fr echivoc. Pentru referirea la o resurs din Internet, se folosete termenul generic URI (Universal Resource Identifier) care poate specifica fie o locaie, caz n care se vorbete de un URL (Universal Resource Locator) fie un nume, caz n care se vorbete de un URN (Universal Resource Name). Unei resurse i se aplic o metod - iar pentru a specifica ce metod se dorete, ce date sau parametrii suplimentari o completeaz pe aceasta, se face uz de mesaje. Paradigma pe care se bazeaz protocolul este cea de cerere/rspuns. Cererea este emis de un client; acesta stabilete o conexiune cu un server i i trimite acestuia o cerere, sub forma unei metode. Metoda se refer la o anumit resurs, identificat via URI; mai trebuie adugate versiunea de protocol utilizat i un mesaj de tip MIME care s conin parametrii metodei, informaii relative la client i un eventual coninut suplimentar. Serverul v rspunde cu o linie de stare, incluznd versiunea de protocol utilizat i un cod de succes sau eroare, la care se adaug un mesaj de tip MIME coninnd informaii relative la server i eventual un coninut suplimentar. Acest posibil coninut suplimentar este de regul o entitate - o reprezentare particular a unor date necesare n cerere sau n rspuns, i este structurat ntr-un antet (header) coninnd metainformaii relative la date (o descriere a felului n care trebuie citite datele) i datele propriu-zise, care formeaz corpul entitii. 1.3. Adresarea unei resurse n Web Adresarea unei resurse via http se face prin construcii (iruri de caractere) de forma http://adresa_host_in_retea[:port]/cale/subcalel/.../subcalen/nume_document http: specific tipul protocolului; el trebuie precizat dat fiind faptul c http nu este singurul protocol prin care poate fi accesat o anumit resurs din Internet. adresa_host_in_retea (de exemplu www.xxx.ro sau www.stpt.com) identific un server sau un gateway din reea, folosind adresarea uzual de tip DNS (Domain Name Service) din Internet: numehost.subdomeniul.subdomeniu2..subdomeniun.domeniu_de_baz Deci www.xxx.ro s-ar citi serverul www din subdomeniul xxx din domeniul de baz ro. :port poate lipsi, ceea ce nseamn c se presupune implicit c se face referin la portul standard, 80. Dac se specific un alt port, se va adresa acesta. Cale/subcalel/.../subcalen/nume_document identific calea absolut pn la documentul identificat de nume_document de pe serverul respectiv. Nu ntotdeauna ns resursa referit este un document! Poate fi o fraciune dintr-un document, caz n care se face referire la fragmentul respectiv: Cale/subcalel/.../subcalen/nume_document#capitolul2paragraful3 Sau, mai general, poate fi un program cruia trebuie s i se paseze civa parametri i o anumit cerere: Cale/subcalel/.../subcalen/nume_program;paraml;param2;...;paramn?cerere

Exemplu: Urmtoarea referin http://guaraldi.cs.colostate.edu:2000/cgi-bin/savvyfrontend?KW=cuvnt_cheie & classic=on & tl=x & Boolean=AND & Hits=10 & Mode=MakePlan & df=normal & AutoStep=on. se va citi http://guaraldi.cs.colostate.edu:2000 ne spune c se va face o conexiune via http cu serverul guaraldi.cs.colostate.edu, utiliznd portul 2000 al acestuia. Pe acest server se va adresa programul savvy-frontend din directorul cgi-bin/, cruia nu i se paseaz ali parametri dect cei inclui n felul n care a fost formulat cererea: KW=cuvnt_cheie & classic=on & tl=x & Boolean=AND & Hits=10 & Mode=MakePlan & df=normal &A utoStep=on. Specificarea unei resurse nu trebuie s fie totdeauna absolut, ca n exemplul dat. Dac ne-am plasat deja ntr-un subdirector oarecare al unui server, se pot folosi adrese relative, care omit calea pn n acel director: subcalel/subcale2/.../subcalem/nume_resursa sau chiar pur i simplu nume resurs, dac resursa se afl n acelai director. n HTML adresarea URI se folosete pentru: crearea unei legturi spre un alt document sau spre o alt resurs (a se vedea elementele A i LINK) crearea unei legturi spre un stil de pagin (style-sheet) extern sau spre un script aflat ntr-un fiier surs extern (a se vedea elementele LINK i SCRIPT) Includerea ntr-o pagin a unei imagini, a unui obiect sau a unui applet (a se vedea elementele IMG, OBJECT, APPLET i INPUT). crearea unei imagini senzitive (a se vedea elementele MAP i AREA). transmiterea unui formular interactiv (a se vedea elementul FORM). crearea unui document cu frame-uri (a se vedea elementele FRAME i IFRAME). citarea unei referine externe (a se vedea elementele Q, BLOCKQUOTE, INS i DEL).

referirea unor conveii de metadate care descriu un document (a se vedea elementul HEAD).

1.4. Elementele conexiunilor n spaiul WWW n cazul cel mai simplu, legtura dintre client i server se realizeaz prin intermediul unei singure conexiuni. De foarte multe ori ns, este posibil s existe mai muli intermediari n conexiune. Acetia pot fi de trei feluri: proxy, gateway sau tunnel. Un proxy este un intermediar sofisticat: el primete cererile adresate unei resurse identificate printr-un URI, rescrie anumite pri ale mesajului sau chiar tot mesajul, dup care va transmite mesajul modificat ctre serverul adresat iniial. Cu aceast ocazie el se i substituie clientului iniial: rspunsul i va veni tot lui, iar proxy-ul va face probabil o rescriere a mesajului de rspuns ctre client. Dinspre server, nu se mai vede cine este clientul adevrat: toi clienii ce trec prin proxy snt ascuni, serverul primind numai cereri de la proxy. Acesta poate face n plus, ntr-un singur loc, o serie de verificri, relative la autentificare, securizare etc., care ar fi greu de implementat pe multe i diverse maini - toate calculatoarele client care trec prin acel proxy. Un proxy reprezint nspre restul lumii un grup de clieni, putndu-i trata pe acetia difereniat. Un gateway este similar unui proxy, dar pe partea de server. Este un receptor, un fel de camer de primire pus n faa unui server sau a unui grup de servere. Serverele de dup gateway nu se vd n restul lumii - ele snt, toate, reprezentate de gateway. Cererile sosite la gateway snt dirijate ctre serverele corespunztoare cererii (sau ctre serverul cel mai liber, de exemplu, dac faptul c exist mai multe servere vine din dorina de a disponibiliza mai mult putere de calcul). De regul

are loc i o conversie de protocol, nspre protocolul pe care l cunoate sau l folosete un anumit server, care nu mai este obligat n felul acesta s cunoasc http. Un tunel este un intermediar neinteligent: el transport date pe care nu le nelege sau interpreteaz n nici un fel ntre dou conexiuni. Nu are loc nici un fel de schimbare a mesajelor, dect temporar, trecnd printr-o form intermediar, ntre intrarea n i ieirea din tunel; coninutul mesajelor nu se schimb.

n cazul unei conexiuni mai complexe, o situaie comun ar putea fi cea din figura urmtoare: O cerere sau un rspuns care parcurge drumul din figur va traversa patru conexiuni. Acest lucru trebuie avut n vedere; exist unele opiuni relative la comunicaie care se refer numai la primul vecin, dac acesta nu se afl n spatele unui tunel, altele care se refer numai la punctele finale ale conexiunii iar altele care se pot referi la toate conexiunile de pe traseu. Iar dac diagrama simplificat de mai sus este linear, nu trebuie uitat faptul c fiecare participant poate fi angajat simultan n comunicaii multiple. Proxy-ul din figur poate lucra deodat cu muli clieni, care se adreseaz la mai multe servere i care pot fi gsii prin conexiuni diferite. Oricare dintre participanii la conexiune cu excepia tunelului poate face uz de un cache intern care s scurteze drumul unui ciclu cerere/rspuns. Exemplul anterior ilustreaz i drumul unei cereri care s-a mai fcut o dat de ctre client, dar se afl nc n cache-ul proxy-ului: Desigur, nu toate rspunsurile se preteaz la a fi pstrate un timp n cache (pe ideea c poate mai cere cineva acelai lucru); pe de alt parte, cererile de la clieni pot formula anumite opiuni specifice relative la cache (nu accept dect rspunsuri de la server direct, nu accept rspunsuri memorate mai mult de x minute, etc.) 1.5. Protocolul HTTP 1.5.1. Introducere general Este un protocol la nivel aplicaie destinat sistemelor de informare distribuite, colaborative, de genul hypermedia. Aprut ca protocol de baz pentru WWW nc din 1990, a cunoscut o serie de transformri, o versiune final neexistnd nici n prezent. Versiunea cea mai folosit este nc 1.0, iar versiunea 1.1 - compatibil n jos cu 1.0, dar aducnd mbuntiri n special n direcia folosirii mai eficiente a resurselor - este pe cale s se impun ca nou standard. De aceea, o parte din aspectele care urmeaz nu trebuie privite ca referine btute n cuie, ci ca instantanee ale unei specificaii pe cale s se nasc, extrase dintr-o schi, un draft care poate se va mai schimba mult.

Numele este acronimul pentru HyperText Transfer Protocol, dei la origine hypertext a fost definitoriu, practica curent l-a dus destul de repede nspre hypermedia - documentele vehiculate cuprinznd nu numai text, ci i sunet, imagine sau informaii structurate. Aplicaiile care folosesc protocolul - cei doi parteneri n discuie, cele dou capete ale unei conexiuni - snt entiti abstracte din punct de vedere al protocolului. Ele trebuie doar s poat comunica ntre ele ceea ce nseamn, n principiu, posibilitatea de a primi sau formula cereri i de a formula sau recepiona rspunsuri, ca n celebrul exemplu al filozofilor ce vorbesc dou limbi diferite, folosind pentru comunicare translatorii care trimit mesajele filozofilor (traduse) prin intermediul potailor. Nici un nivel nu se preocup de cellalt.

Cererile formulate n protocolul HTTP se refer la informaii care se pot afla stocate n diverse baze de date, n diverse formate, pe diverse calculatoare. Cum anume se traduc n cereri concrete date diferite, este o problem care depete protocolul: sarcina lui este doar s fixeze regulile care trebuie respectate de cele dou aplicaii participante la un moment dat n comunicare pentru ca s se poat nelege fr nici un fel de risc de interpretare eronat a unei cereri sau a unui rspuns.

1.5.2. Mesajele protocolului HHTP Atunci cnd se transfer ceva utiliznd WWW se specific o resurs: serverul cruia am vrea s-i adresm cererea, ce conine aceasta, cu ce protocol lucrm. Pentru ca aceast cerere s ajung la server trebuie s trimitem un mesaj care s conin i resursa specificat mai sus. Mesajul va conine un i r de caractere de forma: GET specificare_resurs HTTP/1.1 CRLF versiune_protocol CRLF Forma general a unui mesaj de cerere este conform schemei de mai sus: Metod resurs Versiunea de protocol trebuie specificat deoarece nu toate serverele au implementat ultima versiune sau nu toi clienii o cunosc. Deci, pentru ca totui un server detept s se poat nelege i cu un client mai puin dotat, sau invers, i fr a renuna la posibilitile introduse de versiunile (mereu mai) noi ale protocolului, trebuie s se realizeze mai nti o negociere ntre server i client, relativ la ce tie fiecare i abia apoi s se desfoare transferul propriu-zis de date.

1.5.3. Metodele protocolului HHTP Metodele snt de fapt operaiile care pot fi aplicate obiectelor constituite de resursele din reea, n accepiunea protocolului HTTP. Metoda va trebui s fie totdeauna primul element dintr-o linie de cerere. Metodele prevzute n versiunea 1.1 snt urmtoarele: OPTIONS, GET, HEAO, POST, PUT, PATCH, COPY, MOVE, DELETE, LINK, UNLINK, TRACE, WRAPPED. OPTIONS semnific o cerere relativ la informaiile ce definesc opiunile de comunicare disponibile pe conexiunea ctre URI-ul specificat n cerere. Metoda permite determinarea opiunilor i/sau posibilitilor unui server, fr s determine o aciune din partea resursei adresate. i metoda are nevoie de parametri, nu numai resursa, iar n HTTP termenul consacrat pentru parametrii metodelor este header field sau antet de cmp. Definite n cadrul protocolului pentru fiecare metod, antetele de cmp pot avea valori care la rndul lor snt definite (dar nu limitate, extensiile fiind n principiu totdeauna posibile). Exemplu: O cerere de tipul OPTIONS www.xxx.ro HTTP1/1 CRLF Accept: audio/*; q=0.2, audio/basic CRLF reprezint o cerere de definire a opiunilor ctre serverul www.xxx.ro, n care clientul solicitant spune c prefer audio/basic, dar accept orice tip pentru date audio n cazul n care calitatea reprezentrii nu scade sub 20%. Exemplu: Iar o cerere de genul OPTIONS www.xxx.ro HTTP1/1 CRLF Accept: text/plain; q=0.5, text/html, text/xdvi; q=0.8; mxb=100000, text/x-c CRLF specific urmtoarele preferine relative la modul de reprezentare al textului: x-c sau html, dac snt disponibile; dac nu, x-dvi, dar numai dac textul nu depete 100000 de octei, sau plain altfel. Virgula separ opiuni posibile, punct-virgul separ determinrile sau preferinele suplimentare relative la o anumit opiune. GET este una dintre cele mai importante metode i singura care era disponibil n prima versiune a protocolului, HTTP/0.9. GET este metoda care aduce ceva de la resurs; mai concret, dac resursa este un proces care produce date (o cutare de pild), rspunsul la metoda GET va fi o entitate care s cuprind acele date. Rspunsul este unul singur: aceasta este o caracteristic de baz a protocolului. Chiar dac volumul de date care trebuie incluse n rspuns este mare, nu se face o fracionare n bucele mai mici, care s permit transferul mai uor al rspunsului. Din punct de vedere al protocolului HTTP, discuia este totdeauna simpl: o ntrebare are un rspuns. Nu se pot pune mai multe ntrebri pentru a obine un singur rspuns, nu se pot formula mai multe rspunsuri la o ntrebare. Exist totui dou posibiliti de a micora volumul de date care s circule pe reea n urma elaborrii unui rspuns; o condiionare de genul dac s-a schimbat ceva i posibilitatea de a prelua numai o parte din acesta. De exemplu, o cerere de genul: GET www.xxx.ro/?cerere HTTP/1.1 If-Modified-Since: Wed, 24 Mar 1999 1:00:00 GMT va aduce ceea ce s-a cerut numai dac s-a modificat ceva dup data i ora specificate n parametrii metodei. HEAD este o metod similar cu GET, folosit n principiu pentru testarea validitii i/sau accesibilitii unei resurse, sau pentru a afla dac s-a schimbat ceva. Sintaxa este similar metodei GET; spre deosebire de GET ns, datele eventual produse de resurs n urma cererii nu snt transmise; doar caracteristicile acestora, i un cod de succes sau eroare. Ceva de genul dac i-a cere s execui cererea mea, ce mi-ai rspunde?.

POST este metoda prin care resursei specificate n cerere i se cere s i subordoneze datele incluse n entitatea care trebuie s nsoeasc cererea. Cu POST se poate aduga un fiier unui anumit director, se poate trimite un mesaj prin pot electronic, se poate aduga un mesaj unui grup de tiri, se pot aduga date unei baze de date existente, etc. Metoda POST este general; care snt procesele pe care un anumit server le accept sau cunoate i snt strict specifice. PUT este o metod care cere serverului ceva mai mult dect POST: s stocheze/memoreze entitatea cuprins n cerere cu numele specificat n URI. Dac resursa specificat exist deja, entitatea nou trebuie privit ca o versiune modificat care ar trebui s o nlocuiasc pe cea existent. Serverul, bineneles, va accepta sau nu aceast cerere, funcie de drepturile de acces pe care i le-a acordat clientului, i va rspunde cererii cu informaii corespunztoare (s-a fcut, nu pot, nu ai voie s faci treaba asta etc.). Pentru a evita situaii care s duc la ncrcarea excesiv si nejustificat a reelei - de exemplu, un client care vrea s posteze un text de 10 MB, fr s in seama de faptul c serverul nu mai are att loc att o cerere de tipul POST ct i una de tipul PUT se desfoar n doi timpi: nti, clientul trimite numai parametrii metodei, fr s trimit datele efective pe care le vrea postate. Dup care ateapt 5 secunde. n acest timp, dac serverul rspunde, clientul ia n seam i analizeaz rspunsul serverului (iar dac acesta este nu mai am loc, datele nu se mai transmit). Dac nu sosete nici un rspuns n timpul de ateptare, se consider implicit c serverul accept datele i acestea snt transmise de ctre client. PATCH este o metod similar lui PUT, dar nu conine toate datele care s defineasc resursa, ci numai diferenele fa de versiunea existent pe server. Cu toate informaiile necesare care s i permit serverului s reconstruiasc o versiune la zi a resursei. COPY, MOVE i DELETE snt metode prin care se cere ca resursa specificat n URI-ul din cerere s fie copiat n locaiile specificate ca parametri pentru metod, mutat acolo sau respectiv doar tears.

LINK i UNLINK snt metode prin care resursa specificat n cerere este legat/dezlegat de alte resurse, stabilind una sau mai multe relaii cu acestea din urm, specificate ca parametrii pentru metod. Ar putea fi de exemplu un index pentru o baz de date, un cuprins pentru un set de documente, etc. TRACE este o metod care i permite clientului s vad cum ajung cererile sale la server, pentru a verifica/diagnostica conexiunea, pentru a se verifica pe sine sau pentru a determina felul n care eventualele proxy-uri de pe parcurs au modificat cererea iniial. Serverul, n rspuns la aceast cerere, va trimite n ecou cererile care i vin de la client, fr s le mai trateze ca cereri reale. WRAPPED este o metod care contrazice principiul protocolului de a trimite totdeauna o singur cerere i a atepta un singur rspuns. Via WRAPPED, mai multe cereri, care n mod obinuit ar fi succesive, snt mpachetate ntr-una singur. Iar o alt aplicare a metodei intete msuri de securizare - o cerere poate fi cifrat i transmis prin metoda WRAPPED, ceea ce va determina serverul s acioneze n doi pai: nti s descifreze cererea real, iar apoi s i dea curs acesteia.

Capitolul 2. Descriere general a limbajului HTML 2.1. Introducere, istorie, versiuni Ce este HTML? Limbajul a fost dezvoltat iniial de oamenii de tiin ca o unealt utilizat la partajarea documentelor (rapoarte de cercetare, documentaii, etc) n ntreaga comunitate tiinific internaional care utiliza (i utilizeaz) Internetul. Pentru a publica informaii care s fie distribuite global n Internet este necesar un limbaj universal de descriere a acestora (o mam a tuturor limbajelor de publicare), limbaj care s fie potenial neles de toate computerele din Internet. Limbajul folosit de World Wide Web este HTML. HTML se aseamn cu modalitile de formatare a textelor de la un procesor de texte uzual n sensul c adaug textului ce se dorete a fi publicat (afiat) informaii de formatare i permite nglo-barea i altor tipuri de informaii (imagini, sunete, etc). Toate acestea indic modul de afiare (prezentare) pentru programele capabile s neleag aceste informaii. Ceea ce l deosebete de toate celelalte formate ale procesoarelor de texte este faptul c un document HTML este un document ce conine informaie n format text-pur (numai caractere ASCII), n timp ce procesoarele de texte folosesc formate particulare (proprietare). Astfel, un document HTML poate fi afiat (prezentat) de un numr mare de programe (browsere Web) care ruleaz pe un mare numr de platforme. Documentele HTML pot fi create cu un editor de texte (document salvat ca text only with line breaks) sau cu editoare HTML care permit crearea vizual (WYSIWYG) a documentelor HTML, rezultnd ns tot documente n format text pur. Limbajul HTML d autorilor posibilitatea: s publice documente cu headere, texte, tabele, liste, fotografii, etc... s regseasc on-line informaii prin intermediul hiperlink-urilor accesate printr-un simplu click de mouse s proiecteze formulare pentru realizarea tranzaciilor cu servere aflate la distan, pentru cutari de informaie sau pentru activiti specifice comerului s includ foi de calcul tabelar, clipuri video, sunete i alte aplicaii direct n documente Caracteristicile limbajului HTML. HTML are patru caracteristici principale: 1. Folosete un marcaj descriptiv pentru a indica diversele aciuni (instruciuni) ce trebuie executate. Aceasta nseamn c pri ale documentului descris de HTML snt marcate cu nume descriptive, ca de exemplu <CHAPTER> sau <TITLE> care snt aplicabile oricrei poriuni de date corespunztoare din document. 2. Definete structuri de documente ierarhice i (hyper)legturi intra- i inter-documente. O legtur (sau interconexiune) este o relaie unar ntre dou elemente ale unui document. Structura unui document este nsoit de astfel de legturi ntre elementele sale. 3. Limbajul HTML este guvernat de o descriere formal. HTML are o descriere a tipului documentului (Document Type Definition DTD) care stabilete specificaiile formale ale limbajului. DTD definete sintaxa limbajului, descrie fiecare element individual al unui document scris n limbajul HTML, definete atributele permise pentru fiecare element i descrie modelul datelor coninute n fiecare element (adic stabilete care alt element, dac este vreunul, poate s apar ntr-un element). n corelaie cu informaiile despre elemente,

DTD ofer definiii pentru entitile externe ce pot fi referite n HTML (de exemplu, setul de caractere ISO-Latin-1 folosit pentru a reprezenta caracterele pe ecranul unui display). 4. Att specificaiile limbajului ct i limbajul nsui pot fi citite (interpretate) i de om dar i de computer. Datorit faptului c elementele de marcare snt separate de text prin iruri de delimitare alctuite din caractere tipribile, textul i marcajele pot coexista n pace i nelegere att pentru om, ct i pentru computer. De ce HTML? HTML este un limbaj bazat pe SGML (Standard Generalized Markup Language), o aanumit aplicaie a acestuia. SGML este un standard internaional (ISO-8879) aprobat n 1986. SGML ofer o modalitate de a reprezenta structura documentelor i hyper-documentelor. Este totodat i o cale de a codifica hyper-documentele astfel ca acesta s poat fi interschimbate asemntor procesului de interschimbare a unor documente n cazul mai multor autori care colaboreaz utiliznd platforme diferite aflate la distan. SGML este un sistem complex de descriere a documentelor. Este utilizat pentru descrierea structurii generale a diferitelor tipuri de documente fr s fie un limbaj de descrierea a paginii (cum este PostScript). Principala preocupare a SGML (i prin urmare i a HTML care a fost preferat pentru publicaiile pe Web fiind mai simplu) se rsfrnge asupra coninutului documentului, nu asupra aspectului lui. Deci, n virtutea trsturilor motenite de la SGML, HTML este un limbaj pentru descrierea documentelor structurate. Teoria din spatele acestui limbaj se bazeaz pe faptul c majoritatea documentelor au elemente comune (de pild: titluri, paragrafe sau liste) i c dac defineti un set de elemente, poi marca elementele documentului cu tag-urile corespunztoare. Majoritatea tag-urilor HTML arat de forma: <NumeTag> Textul afectat de tag </NumeTag> i indic navigatorului elemente de structura documentului, formatare, hypertext sau alte elemente (imagini, fiiere sonore, etc). Documentele HTML conin doar textul propriu-zis i tag-urile HTML iar sursa lor poate fi uor vzut din orice navigator. Diferena major dintre procesoarele de texte i procesoarele HTML este c acesta din urm nu se preocup de cum anume vor aprea pe ecran elementele (marcate ale) documentului. Cu foarte puine excepii, HTML nu descrie modul de prezentare al documentului ca un ntreg (layout). HTML ofer (deocamdat) un suport redus n stabilirea plasamentului sau felului n care vor fi afiate elementele documentului. Proiectanii HTML au ales intenionat aceast variant. Motivul este simplu. Deoarece nu cunoatem posibilitile platformei pe care va fi vzut documentul (dimensiunea ecranului, fonturile instalate, etc), prin separarea structurii documentului de felul n care este afiat se ofer o mai mare libertate programului care nelege HTML i afieaz documentul. Acesta poate s ia hotrri privind formatarea documentului pe baza posibilitilor platformei respective. Este ceea ce fac navigatoarele Web, n afara funciilor de comunicare i aducere a documentelor de pe Net. Cnd navigatorul ncarc un document HTML, el citete documentul n cutarea tag-urilor HTML, formateaz textul i imaginea i le afieaz pe ecran. Este motivul pentru care acelai document HTML apare uor diferit cnd este privit cu navigatoare diferite. Dei n aceast faz de dezvoltare posibilitile de formatare oferite snt nc destul de limitate, oferind un control destul de redus asupra formei documentului, avantajul faptului c documentele pot fi transferate i vzute oriunde pe Net, independent de platform i de navigator, a condus la rspndirea sa foarte rapid. Orice versiune a HTML include elemente cum ar fi: text centrat sau aliniat dreapta, tabele, formule matematice, aliniere imagine i text. Extensiile, care au aprut n numr mare n ultima vreme, snt seturi de tag-uri HTML introduse de diverse companii (n general cele productoare de navigatoare) care permit autorilor de documente HTML s evite o parte din constrngerile standardului. Cele mai rspndite snt extensiile Netscape i Internet Explorer. Dar de ce a fost preferat HTML pentru publicaii pe Web, cnd pentru realizarea publicaiilor electronice exist mai multe tehnologii? Primul motiv este simplitatea. Al doilea este c permite

formatarea textului ASCII cu tag-uri n format ASCII. Rezult de aici o compresie bun, suport pentru legturi hypertext i uurin n a scrie navigatoare pentru vizualizarea documentelor. Istoria HTML. Nscut n urm cu aproximativ 30 de ani, ntr-o tentativ de a rezolva unele probleme ivite la transportul documentelor ntre diferite computere, limbajul hypertext a evoluat ncet. HTML din prima generaie este neles de primele navigatoare (modul text). Nivelul 1 este obligatoriu pentru toate navigatoarele i nseamn posibilitatea de a interpreta (hyper)text plus imagini. Nivelul 2 (HTML 2.0) a adus o contribuie deosebit la realizarea unei interactiviti reale prin intermediul formularelor (forms). HTML 3.0 (cunoscut anterior ca HTML+) aduce n plus tabelele, formatarea paragrafelor (alinieri stnga, centru i dreapta), curgerea textului pe lng imagini, tabele, formule matematice, taburi, note i o mulime de alte trsturi n aparen de mai mic importan dar care fac munca cu HTML mult mai plcut. Cele mai importante modificri i mbuntairi snt aduse ns de HTML 4.0, versiune care mbuntete totodat i conceptele de accesibilitate i structuralitate a limbajului de marcare. Informaii despre dezvoltarea HTML se pot prelua de la adresa: http://www.w3.org Limbajul HTML a fost dezvoltat iniial de Tim Berners-Lee la Laboratorul European pentru Fizica Particulelor (CERN) i popularizat de browser-ul Mosaic dezvoltat la NCSA i a beneficiat de explozia Web-ului din anii 90. n aceast perioad HTML-ul s-a dezvoltat n multiple direcii, dar era dependent de autorii paginilor HTML i productorilor de echipamente care, dei foloseau aceleai convenii pentru limbaj, aveau implementri incompatibile. De aceea s-a impus ca o necesitate absolut standardizarea HTML-ului ntr-un efort global al ntregii comuniti a Internetului. i acum HTML este un limbaj marcat de un deosebit dinamism, standardizarea diverselor versiuni fiind ns deosebit de anevoioas datorit lipsei consensului. Organismul care guverna protocolul TCP/IP (fundamentul Internetului), standardele arhitecturale ale Internetului, precum i reeaua Internet a Statelor Unite era n acea perioad IAB Internet Arhitecture Board, cunoscut la nceputurile sale ca Internet Activities Board. Acesta delega responsabilitile de dezvoltare, operare i management a Internetului i a protocoalelor i serviciilor legate de acesta unor subcomitete, grupuri de lucru i organizaii de lucru pe care le controla. n plus avea contracte cu companii comerciale specializate n comunicaii pentru gestionarea infrastructurii Internetului. Subgrupul care se ocupa (i se ocup i acum) cu dezvoltarea i implementarea protocoalelor este IETF - Internet Engineering Task Force. Acesta este alctuit dintr-un comitet director (care raporteaz la IAB) i o serie de grupuri de lucru, fiecare dintre acestea responsabile cu un anumit protocol sau serviciu aflat n dezvoltare sau ntreinere. Grosul activtii de dezvoltare i standardizare a protocoalelor este astfel realizat de aceste grupuri de lucru din cadrul IETF. Documentele care specific aceste protocoale i servicii snt numite Request for Comments, mai cunoscute sub numele de RFC. Acestea primesc coduri numerice prin intermediul crora snt referite ulterior. Chiar dac numele sugereaz o solicitare de comentarii asupra unui subiect (ceea ce constituie, de altfel, i modalitatea principal de dezvoltare a acestor documente prin intermediul comentariilor, propunerilor i discuiilor membrilor comunitii Internetului), RFCurile standard (care se numesc... Recommendation) au putere de lege (decret) n cadrul comunitii Internet (TCP/IP). Aceste documente (standardele) reprezint doar o parte din ntreaga colecie de RFC-uri, dar practic dicteaz cum trebuie s se comporte un protocol i ce funcii trebuie s realizeze. n timpul dezvoltrii 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 aparin de Departamentul Aprrii al SUA, precum i cu toate celelalte organisme i organizaii care le adopt i le respect (ceea ce este echivalent cu excluderea din competiia economic). n orice disput din cadrul Internetului RFC-urile i IETF snt autoritile supreme. RFC-urile se pot obine de pe site-ul ds.internic.net (organizate dup numrul ataat fiecrui RFC) sau de pe alte site-uri care ofer posibiliti extinse de cutare/prelucrare, cum ar fi, de exemplu, site-ul de la adresahttp://www.cis.ohio-state.edu/hypertext/information/rfc.html.

Organismul care se ocup (i) cu standardizarea limbajului HTML (din noiembrie 1995) se numete The World Wide Web Consortium (W3C) i include CERN, universitatea MIT (Cambridge, Massachusetts), precum i alte organizaii. 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 interoperabilitii 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 att mai mult cu ct ambiiile snt mai mari (ISO a abandonat modelul celor 7 nivele dup ce muli ani a ncercat s-l impun). Plecnd de la paniile predecesorilor, pionierii Webului au mpmntenit obiceiul de a-i construi singuri standarde i nu de a le importa. Esena filozofiei W3C este implementat n grupurile de lucru (Working Group), un comitet mic de specialiti care se ntlnesc sau discut n teleconferine pn 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 alturi i s coopereze, conducnd n cele din urm la o acceptare mult mai rapid din partea pieii. Durata de via a unui astfel de standard (unei specificaii stabilit n acest mod) d de fapt msura autoritii organizaiei W3C.0 Stadiile prin care trece un standard elaborat de W3C snt: orice standard i ncepe aventura ca W3C Note de aici este preluat de ctre un grup particular de lucru (Working Group) i este discutat pn cnd se atinge consensul n acest moment este publicat ca propunere (Working Draft) i acum oricine poate face comentarii n momentul n care se obine o susinere i un consens suficient de larg, directorul W3C (acum este Time Berners-Lee) decide dac specificaia este gata s devin propunere de recomandare (Proposed Recommendation)

 urmeaz o perioad de 6 sptmni n care toi 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 mbuntiri nu, pn cnd anumite sarcini nu snt ndeplinite nu, specificaia trebuie abandonat

charta W3C stipuleaz necesitatea obinerii consensului complet, astfel c fiecare vot trebuie s fie un da fr rezerve dac toi paii anteriori au fost ndeplinii, specificaia 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 msur bazat pe HTML+ (aprut n 1993) care, dei nu a fost adoptat ca standard a dus la adoptarea a numeroase mbuntiri. Unul dintre motivele care au condus la neacceptarea draftului a fost marimea considerat exagerat a acestuia. De aceea urmtoarele versiuni au fost i vor fi introduse ntrun 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), conducnd 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 inconsistenelor ntre specificaiile diverselor firme/browsere au avut ca rezultat apariia standardului (cu numele de cod Wilbur) HTML 3.2, n 11 ianuarie 1997, acestea putnd fi accesate la adresa http://www.w3.org/TR/REC-html32. mpreun cu W3C au lucrat la aceste specificaii IBM, Microsoft, Netscape Communications Corporation, Novell, SoftQuad, Spyglass i Sun Microsystems. Aceast versiune este o aplicaie SGML ce se conformeaz standardului internaional ISO 8879 ale crui specificaii se afl la adresa http://www.iso.ch/cate/d16387.html. Ca aplicaie SGML, sintaxa documentelor este definit de combinaia dintre o declaraie 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 (avnd numele de cod Cougar) i poate fi accesat la adresa http://www.w3.org/TR/REC-html40. i aceast versiune este o aplicaie SGML ce se conformeaz standardului internaional ISO 8879 ale crui specificaii se afl la adresa http://www.iso.ch/cate/d16387.html. Ca aplicaie SGML, specificaia HTML 4.0 include o declaraie SGML (1 SGML declaration), trei definiii ale tipului documentului (3 document type definition - DTD) i o list de referine la caractere. n momentul apariiei acestui standard, W3C recomand autorilor producerea de documente HTML 4.0, dar pentru motive evidente de compatibilitate cu versiunile anterioare, W3C recomand uneltelor ce interpreteaz i suport 4.0 s continue s suporte i HTML 3.2, precum i HTML 2.0. n ianuarie 1999 exist i propunerea (draftul) HTML 5.0. ntreaga comunitate a Internetului este de acord c documentele dezvoltate cu HTML trebuie s fie identice n diversele browsere i pe diversele platforme ale Internetului. Interoperabilitatea va asigura astfel costuri reduse furnizorilor (autorilor) de pagini HTML (nu este nevoie dect de o singur versiune!), n caz contrar rspndirea ntr-o multitudine de formate particulare (i proprietare ale unor firme) incompatibile reducnd dramatic potenialul (inclusiv comercial) al tuturor participanilor. Fiecare nou versiune a ncercat s reflecte un consens din ce n ce mai mare ntre participani, astfel ca investiiile fcute s nu fie irosite, iar documentele dezvoltate s

devin imposibil de folosit dup o perioad foarte scurt de timp. Limbajul HTML se dezvolt cu dorina ca toate tipurile de computere i diversele periferice ale acestora s poat folosi informaia de pe Web: PC-urile cu display-uri de diverse rezoluii i capabiliti 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 ctre productorii 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 (uor de neles) se recomand ca uneltele ce interpretez HTML 4.0 s suporte n continuare HTML 3.2 i 2.0. Btliile 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 fcut deja pai importani pe cale 5.0 i spre DHTML, urmat, aproape cu disperare, i de ctre Netscape (la sfritul anului 1998 cumprat de AOL). Concluzia ce se poate desprinde este aceea c dinamismul procesului nu poate fi combtut dect printr-o permanent informare de la organismul care impune standardele (W3C) i adaptare la cerinele acestora. Revoluia HTML 4.0. Elementul esenial diferit adus de versiunea 4.0 fa de versiunea 3.2 este posibilitatea separrii structurii unui document de prezentarea lui prin introducerea stilurilor de documente (style sheet). Utiliznd limbajul HTML pentru descrierea structurii unui document i style sheet-urile pentru a sugera prezentarea acestuia, autorii obin mult mai uor independena de periferic/computer/platform hard-soft care a fcut HTML-ul att de popular. Un document cu o structur complex poate fi prezentat n diferite moduri pe medii diferite, permind documentului nsui s se adapteze mai uor noilor tehnologii (cum ar fi, de exemplu, browser-ele capabile s vorbeasc, cititoarelor braille, etc.). n plus separarea coninutului de prezentare permite modificarea nfirii eventual chiar a unui ntreg site doar prin modificarea unui style-sheet (unui document care descrie stilul). Experiena a demonstrat c o astfel de abordare reduce dramatic costurile de deservire a unui spectru larg de platforme, facilitnd i o ntreinere i modificare mult mai uoare.

Alte mbuntiri semnificative aduse de 4.0 pot fi considerate i: I. Tehnologia client-side scripting. Prin intermediul scripturilor autorii pot realiza pagini HTML dinamice (care reacioneaz la aciunile utilizatorilor) sau se pot realiza aplicaii distribuite. Mecanismul de includere a scripturilor n paginile HTML este independent de limbaj. Se poate specifica limbajul scriptului, se poate include un script extern sau se poate referi rezultatul execuiei unui script. Aceste scripturi se execut pe computerul care ruleaz browserul Web (clientul). II. Documentele compuse HTML ofer acum un mecanism standard pentru a ngloba obiecte generice i aplicaii n documentele HTML. Elementul OBJECT permite includerea imaginilor, clipurilor video, sunetului, formulelor matematice, aplicaii specializate i alte obiecte ntr-un document. III. Internaionalizarea Aceast versiune a fost proiectat cu ajutorul experilor n internaionalizare, astfel ncit documentele pot fi scrise n orice limb i transportate uor oriunde n lume. Elementul cheie l constituie adoptarea standardului ISO/IEC 10646 ca set de caractere pentru HTML. Acest standard este cel mai complet standard ce permite reprezentarea oricror caractere internaionale, direcie a textului, punctuaie sau cerine specifice ale unei limbi. IV. Accesibilitatea Odat cu creterea diversitii lumii Webului, s-au diversificat i capabilitile utilizatorilor acestuia, astfel nct a devenit important suportarea diverselor tehnologii pentru a suplinii unele limitri fizice. V. Tabele mbuntite n aceast versiune se implementeaz un model de tabel, bazat pe RFC 1942. Autorii au acum un control sporit asupra structurii i paginaiei. Snt incluse posibiliti de definire a grupurilor de rnduri i/sau coloane, mai mare flexibilitate n definirea regulilor unui tabel. n plus afiarea tabelelor se face acum incremental, pe msura ncrcrii paginii, nemaifiind necesar ateptarea ncrcrii integrale a tabelelor. VI. Model mbuntit de mprire a unui document n frame-uri Includerea frame-urilor n HTML 4.0 ofer posibilitatea de a prezenta documente multiple ntr-o singur fereastr. Modelul este preluat din propunerea original a firmei Netscape. VII. Imprimare mbuntit a paginilor Web Operaia de imprimare a unui numr mai mare de pagini legate ntre ele poate fi simplificat mult prin descrierea relaiilor dintre ele utiliznd elementul LINK sau limbajul specializat RDF (Resource Description Language) dezvoltat de W3C. Validarea documentelor HTML. Fiecare document trebuie validat n vederea eliminrii erorilor cum ar fi lipsa ghilimelelor, elemente sau atribute scrise greit i structuri invalide. Aceste erori nu snt ntotdeauna vizibile n browsere deoarece fiecare le recupereaz ntr-un mod propriu. Validarea documentelor se poate face cu un serviciu special al W3C ce poate fi accesat la adresa http://validator.w3.org. Un validator verific un document n ceea ce privete definiia tipului documentului (DTD) i nu sigurana legturilor din document. 2.2. Reprezentarea documentelor HTML Ca aplicaie (standard) SGML, limbajul HTML trebuie (pentru a se supune normelor de interoperabilitate) s specifice propriul set de caractere care se folosete n codificarea documentelor. Un set de caractere al unui document const din:

 un repertoar: un set de caractere abstracte, cum snt litera alfabetului latin A, litera alfabetului chirilic I sau semnul chinezesc care nseamn ap poziiile codurilor: un set de ntregi ce refer caracterele din repertoar Fiecare document HTML este o secven de caractere din repertoar. Computerele identific aceste caractere prin poziia acestora n repertoar. De exemplu n setul de caractere ASCII poziiile 65, 66 i 67 refer caracterele A, B i C. Caracterele utilizate pentru editarea textelor n documentele HTML ar trebui s aparin setului standard ASCII (caractere pe 7 bii) i fr a include caractere din setul extins (pe 8 bii) deoarece diversele platforme utilizeaz definiii diferite pentru caracterele din setul superior ASCII. Dar, acest set de caractere este insuficient pentru un sistem informaional global, aa cum este Webul. De aceea limbajul HTML utilizeaz un set de caractere mult mai comple, numit Universal Character Set UCS (Setul de caractere universal) definit de standardul ISO 10646, standard ce definete un repertoar de mii de caractere utilizate n ntreaga lume. Acest set de caractere este echivalent caracter-cu-caracter cu setul Unicode 2.0 definit de W3C. Acest set de caractere nu este ns suficient pentru agenii utilizator ca s interpreteze corect un document HTML transmis ca o secven de bytes ntr-un fiier sau n reea. n afara setului de caractere, acetia trebuie s cunoasc i codificarea caracterelor (character encoding) folosit la transformarea documentului ntr-un stream de bytes. Prin codificarea caracterelor (termenul utilizat fiind acela de charset) se poate nelege metoda de conversie a unei secvene de bytes ntr-o secven de caractere. Aceast conversie se potrivete perfect cu schema activitilor Webului: serverele trimit documentele utilizatorilor (agenilor utilizatori) ca un stream (ir) de bytes, iar acetia i interpreteaz ca iruri de caractere. Metoda de conversie poate s merg de la o coresponden simpla unu-la-unu pn la scheme i algoritmi complexe. O singur coresponden simpl unu-la-unu nu este ns suficient pentru un repertoar aa de complex ca cel definit de ISO 10646 (sau de Unicode). De aceea exist diferite codificri ale unor pri ale acestui repertoar pentru a-l acoperi n ntregime. Cele mai uzuale codificri snt: ISO-8859-1/ISO Latin 1 (utilizat pentru limbile Europei de vest), ISO-8859-2/ISO Latin 2 (care suport alfabetul chirilic), SHIFT_JIS (codificare japonez), .a. Uneltele software care produc documente HTML le pot codifica oricum (nu se impune nimic) ncercnd s acopere ct mai multe dintre caracterele acestuia. Cele care nu se pot codifica cu schema folosit se pot totui referi prin intermediul caracterelor entiti (acestea referindu-se la setul de caractere i nu la schema de codificare). Cel care folosete aceste documente (agenii utilizatori) poate modifica aceast codificare (proces numittranscodare) i nu este obligat s proceseze documentul utiliznd aceeai codificare sau o codificare care s acopere ntregul set de caractere. DAR, pentru a obine aceleai rezultate cu cele dorite de autorul documentului, agenii utilizatori trebuie s fie n primul rnd conformi Unicode (adic s mapeze corect toate caracterele Unicode n toate codificrile recunoscute) i s cunoasc schema de codificare folosit de autor. Informaia care specific schema de codificare trebuie s fie oferit de server. Cea mai simpl i direct modalitate de a o specifica este utilizarea unui parametru specific (charset) ntr-un cmp (Content-type) al antetului protocolului HTTP utilizat la transmiterea documentelor. De exemplu, urmtorul antet HTTP anun c pentru documentul solicitat s-a folosit schema de codificare EUC-JP: Content-Type: text/html; charset=EUC-JP Dar nu toate serverele tiu s foloseasc acest parametru. Pentru a fixa aceast problem, documentele HTML pot include informaii explicite despre schema de codificare folosit. Pentru aceasta se folosete un element specific al limbajului (META). Pentru cazul de mai sus: <META http-equiv="Content-Type" content="text/html; charset=EUC-JP">

Mai mult, dac nu se folosete nici aceast metod, limbajul HTML a prevzut un atribut special (charset) ce se poate ataa elementelor din cadrul documentului. Implicit, dac nu este folosit nici una dintre aceste 3 posibiliti, se consider documentul codificat ISO-8859-1. Fiecare agent utilizator trebuie s ofere o metod/mecanism de a suprapune/suprascrie o informaie incorect despre charsetul (codificarea) folosit. 2.3. Structura i logica limbajului HTML HTML este un limbaj care descrie modul de afiare a unui document (text i informaii de alt tip, de exemplu imagini, animaie, sunete,) folosind dou tipuri de elemente: caractere entiti i taguri. Tagurile HTML snt elementele specifice limbajului care determin aciunile ce trebuie efectuate la afiarea i parcurgerea ulterioar a documentului (pot fi asimilate cu instruciunile unui limbaj de programare). Caracterele entiti se folosesc la descrierea caracterelor din document care nu fac parte din setul standard ASCII. I. Tag-urile HTML Toate tag-urile au nume scrise ntre paranteze unghiulare <NumeTag> i (eventual) cteva atribute care pot lua anumite valori. Formatul general al instruciunilor (tag-urilor) HTML este urmtorul: <NumeTag Atribute> Textul afectat de acest tag </NumeTag> Tagurile pot fi de dou feluri: 1. Nevide (perechi), ntre care apare textul afectat. Ele au efect numai asupra textului inclus ntre ele i snt de dou tipuri: de nceput i au formatul <NUME> de sfrit i au formatul </NUME>

Exemple de tag-uri nevide: <I>Acest text va fi afiat italic</I> <B>Acest text va fi afiat ngroat</B>

2. Vide (singulare), au efect imediat n punctul din document n care apar. Exemple de tag-uri vide: <HR> Insereaz o linie orizontal n locul n care apare. <IMG SRC="poza.gif"> Specific inserarea unei imagini. Tag-urile i atributele pot fi editate att cu caractere mici ct si cu caractere mari, i au acelai efect. Atributele tag-urilor au la rndul lor nume i pot lua numai anumite valori. Forma n care snt editate atributele este NUME="valoare". Valoarea trebuie inclus n ghilimele. Dac n tag exist mai multe atribute, ele trebuie separate prin spaiu. Formatul general al unui tag ce are i atribute este urmtorul: <NumeTag NumeAtribut="ValoareAtribut">Textul afectat de tag</NumeTag> Exemplu: <IMG src="poza.gif" align="bottom"> Aici NumeTag este IMG i specific inserarea unei imagini. NumeAtribut1 este SRC i are ca valoare calea i numele fiierului imagine (poza.gif). NumeAtribut2 este ALIGN, privete alinierea imaginii i are ca valoare BOTTOM (jos, n raport cu rndul). Formatul tag-urilor trebuie respectat cu strictee. Chiar dac, n general, aproape toate caracterele de control ASCII snt ignorate cnd apar n textul HTML (de pild ENTER sau TAB), dac snt introduse ntre parantezele unghiulare ale tag-urilor le vor face neinterpretabile de ctre navigatoare i prin urmare nu vor avea nici un efect. Tag-urile pot fi utilizate i n interiorul altor tag-uri. Acest lucru se face de forma: <Tagl><Tag2>Textul afectat de tag</Tag2></Tagl> Exemplu: <A HREF="poza-mare.gif"><IMG SRC="poza-mic.gif"></A> n acest exemplu, primul tag este <A>...</A> ce indic existena unei legturi spre alt document, iar al doilea tag este <IMG> ce indic inserarea n document a unei imagini. Astfel poza-mic.gif este imagine activ, selectabil, datorit faptului c este cuprins ntre tag-urile <A>...</A>. Activarea ei de ctre cel care privete documentul cu un navigator, va determina serverul s-i trimit documentul aflat n fiierul poza-mare.gif, specificat ca valoare a atributului HREF. II. Caractere entiti 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 apsarea altor taste (de pild ALT + codul numeric) nu este aceeai pentru diferitele sisteme, pentru afiarea lor corect i pentru a permite translatarea caracterelor speciale este necesar definirea unui set special de coduri, numite caractere entiti (referine), care pot fi incluse n documentele HTML pentru reprezentarea acestor caractere speciale. Cnd snt interpretate de ctre navigatoare caracterele entiti snt afiate n mod corespunztor innd cont de platforma pe care ruleaz navigatorul si de fontul utilizat. Caracterele entiti snt predefinite i pot lua una din dou forme posibile: entiti nume (referine caractere) entiti numere (referine numerice) &nume; &#numar; sau &#xnumar;

Toate caracterele entiti nume ncep cu semnul & (ampersand), urmat de numele entitii (de exemplu &acirc; care este reprezentat de navigatoare ca ) i terminat cu punct-i-virgul (;), avnd deci forma &nume;. De remarcat c n numele entitilor este semnificativ dac o liter este mare sau mic. Toate caracterele entiti numere ncep cu semnul & i snt reprezentate de un numr precedat de semnul # (de pild &#126; care este reprezentat de navigatoare ca ~), terminat cu punct-i-virgul (;), avnd deci forma&#numar; sau &#xnumar; (atunci cnd numrul este n hexa). Exemplu: Cuvntul rndunica (care conine caracterele speciale i ) poate fi inserat ntr-un document HTML ca entitate nume sau ca entitate numr, astfel: a). &copy;r&icirc;ndunica b). &#169;r&#238;ndunica Entitile (referinele) numerice specific poziia (codul) caracterului n setul de caractere al documentului, iar entitile nume (referinele caracter) folosesc nume simbolice care permit s nu se rein poziia caracterului n cadrul setului de caractere ci doar numele su. n timp ce entitile snt limitate la un subset al setului de caractere Unicode, referinele numerice pot specifica orice caracter. Utilizarea entitilor n diverse codificri (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 totui limitat. De pild, caractere destul de des folosite, cum ar fi bulinele sau semnele grafice, nu snt disponibile n ISO Latin 1. Caracterele romneti de asemenea se gsesc 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 afiate 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. Entitile pentru caracterele romneti (reprezentabile de navigator dac acesta cunoate codurile Latinl i Latin2), n aceast ordine, snt: &atilde; &Atilde; &acirc; &Acirc; &icirc; &Icirc; (Latinl). Aici &atilde nu este chiar ci un a cu tilda i lipsesc literele i . Reprezentarea lor prin numerele de cod este: &#227; &#195; &#226; &#194; &#238; &#206; &#186; &#170; &#254; &#222; (Latin2)

Caractere speciale Cteva dintre caracterele speciale mai des utilizate snt: Entitate &lt; &gt; &amp; &quot; &emsp; &nbsp; < (mai mic) > (mai mare) & (ampersand) " (ghilimele) Insereaz un spaiu dublu celui dintre caracterele monospaiate (lrgime de un EM, sau un punct) Insereaz un spaiu care nu permite ruperea rndului n acel loc Semnificaie

&endash; Dash de lrgime un EN &emdash Dash de lrgime un EM ;

Caractere neafiabile Un agent utilizator poate s nu fie capabil s afieze (sau s ofere utilizatorului) corect (sau inteligibil) toate caracterele dintr-un document. Aceasta se poate ntmpla cnd, 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 snt prea multe cauzele ce pot duce la o astfel de situaie nu se impune ca fiind obligatoriu nimic, DAR fiecare agent utilizator trebuie: s adopte un mecanism clar de alertare a utilizatorului (de exemplu afiarea unui caracter sugestiv; n astfel de cazuri Netscape Navigator folosete semnul ntrebrii) s afieze reprezentarea numeric a acelui caracter n cazul n care n document acesta apare ca entitate numeric

Capitolul 3. Structura documentelor HTML

3.1. Structura general a unui document HTML ntreaga dezvoltare a HTML s-a fcut n ideea creterii ulterioare a limbajului fr sacrificarea simplitii. Exist puine 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 declaraii/informaii despre document... </HEAD> <BODY> ...Textul documentului propriu-zis... </ BODY> </HTML> Not important: Dac se folosete un document multiplu definit cu FRAMESET, atunci elementul FRAMESET nlocuiete elementul BODY. Un document HTML (uneori referit i ca pagin HTML) este structurat n trei pri: 1. nceputul unui document HTML este o declaraie (<!DOCTYPE... >) care specific versiunea limbajului HTML cruia i se conformeaz acesta. Restul documentului este coninut n cadrul elementului de limbaj (tagului)<HTML>. 2. O seciune declarativ numit antet (head) definit cu tagul <HEAD>. Aceasta conine informaii (declaraii) despre document (cum ar fi titlul i cuvinte cheie asociate cu documentul) 3. O seciune numit coninut (body) definit cu tagul <BODY> sau <FRAMESET> i care nseamn de fapt (hyper)textul documentului. Acesta este alctuit din elemente de tip bloc i elemente de tip inline.

1. Elementul DOCTYPE Un document valid HTML trebuie s declare ce versiune utilizeaz pentru descrierea sa. Declaraia tipului documentului (document type declaration) definete ce DTD se folosete n documentul respectiv. De exemplu, HTML 4.0 poate specific 3 DTD, astfel c un autor trebuie s includ una dintre urmtoarele declaraii ale tipului de document: HTML 4.0 Strict DTD include toate elementele i atributele ce nu snt obsolete (inutile, depite) sau nu apar n documente definite cu FRAMESET. Pentru astfel de documente se folosete urmtoarea declaraie de tip: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> HTML 4.0 Transitional DTD include tot ceea ce este n declaraia anterioar la care se adaug elementele i atributele depite (vechi, redefinite, dar nu eronate!). Pentru astfel de documente se folosete urmtoarea declaraie de tip: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> HTML 4.0 Frameset DTD include tot ceea ce este n declaraia anterioar la care se adaug documentele multiple (create frame-uri). Pentru astfel de documente se folosete urmtoarea declaraie de tip: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd"> Adresele ce apar n fiecare declaraie permit agenilor utilizatori s acceseze (i s descarce) DTDul documentului (descrierea formal) i orice set de caractere de care are nevoie. Urmtoarele adrese se folosesc pentru accesarea descrierilor (DTD-urilor) i seturilor de caractere utilizate de HTML 4.0. http://www.w3.org/TR/REC-html40/strict.dtd http://www.w3.org/TR/REC-html40/loose.dtd DTD strict (implicit) DTD Transitional DTD pentru setul de caractere

http://www.w3.org/TR/REC-html40/frameset.dtd documente cu frameset http://www.w3.org/TR/REC-html40/HTMLlat1.ent Latin-1

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

2. Elementul HTML Sintaxa: <HTML>...</HTML> Atribute posibile: Conine: Coninut n: Descriere: Acest element conine de fapt documentul (pagina) HTML i este alctuit din HEAD urmat de BODY (sau FRAMESET). Att tagul de nceput ct i cel de sfrit ale elementului snt opionale. Atributele LANG i DIR se folosesc cu HTML pentru a specifica limba (de baz) n care este creat documentul (i direcia n care se citete textul). Se folosete n special cu tehnica stylesheet-urilor pentru a crea un document cu text n mai multe limbi. Atributul VERSION specific DTD-ul din document (versiunea de HTML) i nu mai trebuie folosit ntruct este redundant cnd se folosete DOCTYPE. 3. Elementul HEAD Sintaxa: <HEAD>...</HEAD> Atribute posibile: Conine: Coninut n: Descriere: Acest element conine informaii despre document (cum ar fi titlul su, cuvinte cheie utilizabile de motoarele de cutare, descrierea documentului i style-sheet-uri asociate/utilizate. HEAD Elementul HTML 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) PROFILE = uri (dicionar de meta informaii) atribute de internaionalizare: LANG, DIR Nu se aplic, este element de nivel 0 In HTML 4.0 Strict i Transitional: HEAD urmat de BODY In HTML 4.0 Frameset: HEAD urmat de FRAMESET VERSION = xxx atribute de internaionalizare: LANG, DIR

este solicitat n toate documentele, dar tagurile sale de nceput/sfrit snt opionale. Dac tagul de sfrit lipsete primul element BODY sau FRAMESET determin sfritul lui. Este urmat de BODY n documentele Strict i Transitional i de FRAMESET n cele Frameset. Atributul optional PROFILE ofer locaia n care se afl un profil de metadate. Un profil este un fiier ce definete proprietile ce pot fi utilizate de elementele META i LINK din header, neavnd un format standard stabilit. Coninutul acestui element (cu excepia lui TITLE care este afiat de browsere) nu este prelucrat n mod uzual.

4. Elementul BODY Sintaxa: <BODY>...</BODY> Atribute posibile: BACKGROUND = URI BGCOLOR = Color TEXT = Color LINK = Color VLINK = Color ALINK = Color (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 ncrcat de browser/agentul (documentul a fost parsit de browser/agentul (vezi nota de mai jos)

ONLOAD = Script utilizator) ONUNLOAD = Script utilizator) Conine: n HTML 4.0 Strict: Coninut n: Descriere: atribute comune

elemente de tip bloc (nivel bloc), unul sau mai multe SCRIPT, INS, DEL elemente de tip bloc (nivel bloc) elemente de tip inline INS, DEL

n HTML 4.0 Transitional:

In HTML 4.0 Strict or Transitional: HTML In HTML 4.0 Frameset: NOFRAMES

Acest element conine de fapt corpul (coninutul) documentului (paginii) HTML. BODY este cerut de documentele n care nu apar frame-uri, dar tagurile de nceput/sfrit snt opionale. n documentele ce conin frame-uri, BODY trebuie obligatoriu coninut n elementul NOFRAMES, dac este utilizat.

Coninutul documentului apare n cadrul elementelor de tip bloc sau n corpul elementului SCRIPT, iar n cazul documentelor HTML 4.0 de tip Transitional snt permise i elemente de tip inline direct n cadrul elementului BODY. BODY poate avea atribute care specific background-ul (fundalul) i culoarea documentului sau a unor elemente din cadrul su. Aceast metod este ns considerat depit, prefernduse utilizarea stilurilor de documente (style-sheet). Dac unul dintre atributele ce se refer la link-uri este setat, atunci se recomand folosirea tuturor pentru a se asigura ca difer culorile diverselor tipuri de legturi. Aceste culori pot fi ns suprapuse de setrile din browsere. Atributul BACKGROUND sugereaz o imagine de fundal care va fi folosit pentru document (prin extindere pe vertical i/sau orizontal). Dac acest atribut este setat se recomand utilizarea i a atributelor BGCOLOR, TEXT, LINK, VLINK i ALINK pentru a fi siguri c documentul poate fi citit. BGCOLOR se folosete pentru fundalul imaginilor nencrcate. Style-sheet-urile (stilurile de documente) permit o mai mare flexibilitate n specificarea imaginii de background, chiar a poziiei i modalitii de extindere pe ntreaga suprafa ocupat de document, sau dac imaginea s se deplaseze (scroll) sau nu cu documentul, etc... n plus fa de evenimentele ce pot fi generate de orice element, BODY accept urmtoarele atribute de tip eveniment utilizate n tehnologia client-scripting: ONLOAD, apare atunci cnd documentul a fost ncrcat; ONUNLOAD, apare atunci cnd documentul este prsit.

Atributele comune ce pot apare n acest element snt comune mai multor elemente i snt mprite n: atribute fundamentale (core): ID, CLASS, STYLE, TYTLE atribute de internaionalizare: LANG, DIR

evenimente scriptabile (ce pot fi tratate cu ajutorul scripturilor): ONCLICK, ONDBLCLICK, ONMOUSEDOWN, ONMOUSEUP, ONMOUSEOVER, ONMOUSEMOVE, ONMOUSEOUT, ONKEYPRESS, ONKEYDOWN, ONKEYUP. Elementele de tip bloc i cele de tip inline snt definite mai departe.

Exemple: 1. O variant de pagin HTML care conine ca i body (coninut) textul: The scariest jungle: Follow the map to see lions and tigers and bears. Oh, my! arat astfel: <HTML> <HEAD> <TITLE>My Jungle Home Page</TITLE> </HEAD> <BODY> The scariest jungle: Follow the map to see lions and tigers and bears. Oh, my! </BODY> </HTML> Iar ceea ce se va vedea cu un browser (aici Internet Explorer) este prezentat n figura urmtoare:

O variant depit (fr a fi eronat, dar nerecomandat ca stil) de pagin HTML care ilustreaz utilizarea atributelor depite este prezentat n continuare. Culoarea de background se stabilete ca fiind alb, textul negru, iar legturile iniial roii, active ca fiind de culoare fuchsia, iar cele deja vizitate maron. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <HTML> <HEAD> <TITLE>Exemplu depasit</TITLE> </HEAD> <BODY bgcolor="white" text="black" link="red" alink="fuchsia" vlink="maroon"> ... document body... </BODY> </HTML>

2. Prin folosirea style-sheet-urilor (stilurilor), acelai efect se poate obine i astfel: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <HTML> <HEAD> <TITLE>Un exmplu cu stiluri incluse</TITLE> <STYLE type="text/css"> BODY { background: white; color: black} A:link { color: red } A:visited { color: maroon } A:active { color: fuchsia } </STYLE> </HEAD> <BODY> ... document body... </BODY> </HTML> 3. Cea mai flexibil soluie este dat de posibilitatea de a specifica un stil definit ntr-un alt fiier (stiluri externe). Orice modificare de stil se face fr a accesa documentul HTML. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <HTML> <HEAD> <TITLE>A study of population dynamics</TITLE> <LINK rel="stylesheet" type="text/css" href="smartstyle.css"> </HEAD> <BODY> ... document body... </BODY> </HTML> 5. Elementul FRAMESET Sintaxa: <FRAMESET>...</FRAMESET> Atribute posibile: Conine: Coninut n: HTML FRAMESET (unul sau mai multe elemente) FRAME (unul sau mai multe elemente) NOFRAMES (un singur element, opional) ROWS = MultiLengths (lungimile rndurilor) COLS = MultiLengths (lungimile coloanelor) ONLOAD = Script ONUNLOAD = Script atribute comune (toate frame-urile au fost ncrcate) (toate frame-urile au fost eliminate/prsite)

Descriere: Elementul FRAMESET este un container de frame-uri folosit pentru a diviza fereastra n subspaii dreptunghiulare numite frame-uri. ntr-un document ce conine frame-uri, elementul FRAMESET exterior ia locul lui BODY i urmeaz imediat lui HEAD. Elementul FRAMESET conine unul sau mai multe elemente FRAMESET sau FRAME, mpreun cu elementul opional NOFRAMES pentru a oferi un coninut alternativ browser-elor care nu suport frameurile (sau le au dezactivate). Se recomand ns s existe ntotdeauna i s ofere informaie util pentru astfel de cazuri (cel puin, de exemplu, o legtur ctre frame-ul principal). Atributele ROWS i COLS definesc dimensiunile exacte ale fiecrui frame din set. Fiecare atribut are formatul unei liste de lungimi (cu elemente separate de virgul) care specific n pixeli, ca procent sau ca lungime relativ dimensiunea (lungimea sau limea) fiecrui frame. O dimensiune relativ se exprim ca i*, unde i este un ntreg. Dac lipsete ntregul se consider egal cu 1. De exemplu, un set de frame-uri definit cu ROWS="3*,*" va avea primul rnd cu o nlime de 3 ori mai mare dect al doilea rnd. Valorile specificate pentru ROWS dau nlimea fiecrui rnd, din partea de sus a ecranului nspre baza acestuia. Atributul COLS definete limea fiecrei coloane, ncepnd de la stnga la dreapta.. Dac ROWS sau COLS lipsesc, valoarea implicit a atributului este 100%. Dac ambele atribute snt specificate, ecranul se mparte dpdv logic ntr-o matrice care se umple mai nti de la stnga la dreapta i apoi de sus n jos. Cnd se utilzeaz dimensiuni n pixeli, acestea trebuie combinate ntotdeauna cu lungimi relative pentru a acoperi diferitele dimensiuni ale ferestrelor (determinate de diferitele rezoluii la care se utilizeaz ecranele). Dimensiunile n pixeli trebuie folosite doar cnd frame-urile conin n principal imagini sau alte obiecte cu o dimensiune fix (n pixeli). Preferat este ns exprimarea n procente i dimensiuni relative, datorit capacitii acesteia de adaptare la diferitele dimensiuni de ferestre. Elementul FRAMESET accept atributele ONLOAD i ONUNLOAD pentru a specifica aciuni de tip client-side (executate n agentul utilizator) cnd toate frame-urile au fost ncrcate sau descrcate (eliminate din browser). Exemple: Exemplul urmtor determin mprirea ecranului n 2 rnduri i 3 coloane. <FRAMESET ROWS="70%,30%" COLS="33%,33%,34%"> <FRAME NAME="Photo1" SRC="Row1_Column1.html"> <FRAME NAME="Photo2" SRC="Row1_Column2.html"> <FRAME NAME="Photo3" SRC="Row1_Column3.html"> <FRAME NAME="Caption1" SRC="Row2_Column1.html"> <FRAME NAME="Caption2" SRC="Row2_Column2.html"> <FRAME NAME="Caption3" SRC="Row2_Column3.html"> <NOFRAMES> <BODY> <H1>Table of Contents</H1> <UL> <LI> <A HREF="Row1_Column1.html">Photo 1</A> (<A HREF="Row2_Column1.html">Caption</A>) </LI> <LI> <A HREF="Row1_Column2.html">Photo 2</A> (<A HREF="Row2_Column2.html">Caption</A>) </LI> <LI> <A HREF="Row1_Column3.html">Photo 3</A> (<A HREF="Row2_Column3.html">Caption</A>)

</LI> </UL> </BODY> </NOFRAMES> </FRAMESET> Se remarc utilizarea elementui NOFRAMES pentru cazul n care frame-urile nu pot fi afiate. Efectul se dorete a fi asemntor cu cel determinat de frame-uri (o matrice de dreptunghiuri cu 2 rnduri i 3 coloane). 2. Exemplul urmtor folosete elemente FRAMESET mbricate pentru a defini 2 frame-uri n primul rnd i un frame n al doilea rnd. <FRAMESET ROWS="*,100"> <FRAMESET COLS="40%,*"> <FRAME NAME="Menu" SRC="nav.html" TITLE="Menu"> <FRAME NAME="Content" SRC="main.html" TITLE="Content"> </FRAMESET> <FRAME NAME="Ad" SRC="ad.html" TITLE="Advertisement"> <NOFRAMES> <BODY> <H1>Table of Contents</H1> <UL> <LI><A HREF="reference/html40/">HTML 4.0 Reference</A></LI> <LI><A HREF="reference/wilbur/">HTML 3.2 Reference</A></LI> <LI><A HREF="reference/css/">CSS Guide</A></LI> </UL> <P> <IMG SRC="ad.gif" ALT="Advertising"> </P> </BODY> </NOFRAMES> </FRAMESET>

3.2. Structura header-ului unui document HTML (elementul HEAD) Headerul (antetul) unui document (definit cu elementul HEAD) conine informaii despre documentul curent, cum ar fi titlul documentului, cuvinte cheie utilizate de motoarele de cutare i alte date care nu snt considerateconinut al documentului. Agenii utilizatori (browser-ele) nu afieaz n general aceste informaii, prelucrnd elementele ce apar aici i fcnd disponibile informaiile intr-un alt mod dect coninutul documentului. De exemplu, browser-ele afieaz titlul documentului ncrcat n caption-line (linia de titlu) a browserului, alturi de numele browser-ului nsui. Elementul HEAD poate conine urmtoarele elemente: TITLE BASE STYLE stabilete titlul documentului definete adresa (URI) de baz a documentului definete stilurile de document (style-sheet) folosite n document definete relaiile documentului propriu-zis cu alte documente definete un set de metadate (date auxiliare utilizate n diverse alte definete un script client-side (secven de instruciuni ce se execut definete textul prompterului utilizat la preluarea datelor de la permite includerea unor obiecte externe (sunete, imagini, animaii,

LINK auxiliare META scopuri) SCRIPT n client) ISINDEX utilizator OBJECT etc)

1. Elementul TITLE Sintaxa: <TITLE>...</TITLE> Atribute posibile: Conine: Coninut n: Descriere: Acest element d titlul documentului. Fiecare document trebuie s aib exact 1 titlu (un singur element TITLE n HEAD). Conine text /sau caractere entiti, dar nu poate conine alte elemente de marcare. Un titlu bun trebuie s fie scurt i specific coninutului documentului, astfel nct s poat fi utilizat ca bookmark (semn de carte) n browsere, ca titlu pentru fereastra n care se afieaz i ca legtur pentru motoarele de cutare. Lungimea limit a unui titlu se recomand a fi 60 caractere. Exemplu: Exemplul urmtor de pagina HTML seteaz titlul la valoarea (irul de caractere) My Jungle Home Page i va arta ca n figur (aici ncrcat n browserul Internet Explorer). HEAD Text (inclusiv caractere entiti) atribute de internaionalizare (vezi mai sus)

<HTML> <HEAD> <TITLE>My Jungle Home Page</TITLE> </HEAD> </HTML>

2. Elementul BASE Sintaxa: <BASE> Atribute posibile: Conine: Coninut n: Descriere: Acest element definete 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 oricrui alt element ce conine 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 nsui, de unde a fost ncrcat, este adresa de baz, folosit la cele relative). Cazurile n care este necesar snt: cnd adresa de baz difer de adresa documentului sau cnd acesta nu are o adres de la care s fi fost ncrcat (de exemplu a fost trimis prin email). Atributul TARGET este folosit cnd documentul este mprit n frame-uri, specificnd frame-ul n care se afieaza implicit poriunile din document dac nu snt specificate explicit. 3. Elementul STYLE Sintaxa: <STYLE>...</STYLE> Atribute posibile: TYPE = ContentType (tipul coninutului) MEDIA = MediaDesc (tipul de media cruia i se aplic stilul) TITLE = text (titlul stilului - style sheet) HEAD Gol (nu conine nimic) HREF = uri (adresa/url de baz) TARGET = destinaia frame-ului (unde se ncarc ceea ce indic legtura)

 Conine: Coninut n: Descriere:

atribute de internaionalizare (pentru TITLE) An embedded style sheet HEAD

Acest element nglobeaz (insereaz) n document un stil (style sheet). ntr-un HEAD pot fi coninute oricte elemente STYLE. Atributul TYPE se folosete pentru a specifica tipul de media (n standardul Internet). Pentru stilurile definite de metoda Cascading Style Sheets atributul TYPE are valoarea text/css. Atributul opional TITLE d un titlu style-sheet-ului. Fr acesta, style-sheet-ul respectiv este aplicat ntotdeauna cnd snt 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 restricionarea unui stil la anumite dispozitive de ieire. Valoarea acestui atribut este o list de nume de medii separate prin virgul. HTML 4.0 definete urmtoarele nume de medii (literele mari/mici snt diferite): screen (implicit), display-urile uzuale (fr paginare); print, ieirea pe imprimant;

tty, display-uri ce folosesc caractere de dimensiune fix (ca cele folosite de Lynx); tv, dispozitive tip televizor (rezoluie mic i derulabilitate redus); projection, pentru proiectoare;

handheld, dispozitive handheld (de inut n mn), 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 cunoteau elementul STYLE afiau coninutul su ca i cum ar fi fcut parte din corpul documentului (din BODY). Pentru a prentmpina aceasta se permite ca definiia de stil s apar ntr-un comentariu (<!-- comment -->). Un stil definit n acest mod este util cnd stilul respectiv se aplic unui singur document. Dac acesta trebuie aplicat mai multor documente se folosete tehnica stilurilor externe. Exemplu: Un exemplu de descriere i includere a unui stil ntr-un document: <STYLE TYPE="text/css" MEDIA=screen> <!-BODY { background: url(foo.gif) red; color: black } P EM { background: yellow; color: black } .note { margin-left: 5em; margin-right: 5em } --> </STYLE> Se definete ca background pentru corpul documentului (BODY) imaginea aflat n fiierul 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 uniti n stnga i se ntinde pn cu 5 uniti fa de margine din dreapta. 4. Elementul LINK Sintaxa: <LINK> Atribute posibile: Conine: Coninut n: Descriere: Acest element definete relaiile documentului cu alte documente n ceea ce privete localizarea (adresele lor). ntr-un HEAD pot apare oricte elemente LINK. Nu toate browser-ele suport ns elementul LINK, astfel nct un document nu trebuie s depind de relaiile definite de acest element, ci trebuie folosit doar pentru a mbunti performanele per ansamblu. Atributele REL i REV definesc natura relaiei dintre document i resursele legate (specificate) de acestea. REL definete o relaie de la documentul curent la resursa legat, n timp ce REV definete o relaie n direcia opus. De exemplu: <LINK REL=Glossary HREF="foo.html"> indic faptul c fiierul "foo.html" este un glosar pentru documentul curent, n timp ce <LINK REV=Subsection HREF="bar.html"> indic faptul c documentul curent este o subseciune a lui "bar.html". Valoarea lui REL i REV este o list de linkuri separate prin spaii. Relaiile comune ntre documente includ i urmtorul sau precedentul ntr-o secven, pagina de start ntr-o colecie, un document cu informaii de copyright i informaii despre autor. Un document ar putea defini aceste relaii astfel: <LINK REL=Prev URI"> <LINK REL=Next <LINK REL=Start <LINK REL=Copyright <LINK REV=Made HREF="base.html" TITLE="BASE - Document Base HEAD Nimic REL = LinkTypes (relaiile CTRE link) REV = LinkTypes (relaiile DE LA link) HREF = URI (referina hypertext) TYPE = ContentType (tipul coninutului legturii) TARGET = FrameTarget (frame-ul n care se ncarc link-ul) MEDIA = MediaDesc (mediul pentru care e linkul) HREFLANG = LanguageCode (limba n care e descris legtura/linkul) CHARSET = Charset (setul de caractere folosit pentru link) atribute comune

HREF="meta.html" TITLE="META - Metadata"> HREF="../" TITLE="HTML 4.0 Reference"> HREF="/copyright.html" TITLE="Copyright Notice"> HREF="mailto:[email protected]" TITLE="Feedback">

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

Un stil persisitent este acela care se aplic ntotdeauna cnd style sheet-urile snt active. Absena atributului TITLE indic un astfel de stil. Un stil preferat este acela care se aplic automat. Combinaia dintre REL=StyleSheet i TITLE specific un stil preferat. Un autor nu poate specifica mai mult de un astfel de stil. Un stil alternativ este indicat de REL="Alternate StyleSheet". Utilizatorul poate alege s schimbe stilul preferat cu unul dintre cele alternative, dac broeserul permite acest lucru (nu toate o i fac, ns). Un stil poate fi specificat prin intermediul mai multor style-sheet-uri (fiiere de descriere a stilurilor), ca n exemplu urmtor: <LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary" TYPE="text/css"> <LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary" TYPE="text/css"> <LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary" TYPE="text/css"> Aici se combin 3 style-sheet-uri pentru a forma stilul "Contemporary", aplicat ca i stil preferat. Pentru a se combina style-sheet-urile trebuie s foloseasc acelai TITLE. Atributul MEDIA specific media pentru care snt proiectate resursele legate de acest document. Cu REL=StyleSheet autorii restricioneaz un stil la un anumit dispozitiv. Are aceleai valori ca la elementul STYLE. Atributele opionale HREFLANG i CHARSET ale lui LINK descriu limba (de exemplu en pentru English, en-US pentru American English i ja pentru Japonez) i schema de codificare a legturii (de exemplu ISO-8859-1, SHIFT_JIS, and UTF-8). Relaia legturii Alternate definete o versiune alternativ a documentului. Traduceri ale unei pagini pot fi identificate folosind REL=Alternate mpreun cu atributul HREFLANG, iar versiuni ale unei pagini potrivite pentru un mediu specific se pot oferi prin combinarea REL=Alternate cu atributul MEDIA ca n exemplele urmtoare: <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version franaise"> <LINK REL=Alternate HREF="index.ja.html" HREFLANG=ja CHARSET="SHIFT_JIS" TITLE="Japan version"> <LINK REL=Alternate HREF="index.pdf" TYPE="application/pdf" MEDIA=print TITLE="PDF version"> De remarcat c atributele LANG i DIR se aplic textului atributului TITLE i NU coninutului legturii. Atributul TARGET se folosete n cazul documentelor definite cu frame-uri. 5. Elementul META Sintaxa: <META> Atribute posibile: Conine: Coninut n: Nimic NAME = nume (numele proprietii) HTTP-EQUIV = nume (numele rspunsului din headerul HTTP) CONTENT = CDATA (datele asociate) SCHEME = CDATA (formatul datelor) atribute de internaionalizare pentru CONTENT (vezi mai sus)

 Descriere:

HEAD

Acest element definete metadatele documentului: cuvintele cheie asociate cu acestea, descrierea documentului i autorul su. Pot apare oricte elemente META n cadrul elementului HEAD. Nu exist o list standard de metadate/proprieti (fiecare autor poate defini orice metadat i este necesar). Atributul NAME definete un nume de proprietate, n timp ce CONTENT d valoarea corespun-ztoare a acelei proprieti. CONTENT poate conine text i caractere entitate, dar fra taguri. Atributul opional SCHEME definete formatul proprietii respective. De exemplu, proprietatea dat calendaristic poate cere SCHEME="Month-Day-Year" pentru a o deosebi de formatul definit de SCHEME="Day-Month-Year". Exemplul urmtor definete autorul unui document: <META NAME=author CONTENT="Laureniu Pdeanu"> Unele motoare de cutare folosesc cuvinte cheie i proprieti de descriere pe care le asociaz cu legtura ctre documentul respectiv (i care pot oferi chiar informaii asemntoare ponderilor). De exemplu: <META NAME="description" CONTENT="Pagina clubului de fotbal Universitatea Craiova"> <META NAME="keywords" CONTENT="U Craiova, stiina, craiova, soccer, football"> Pentru a evita ca aceste motoare s trunchieze descrierea documentului, aceasta trebuie s fie sumar (s nu depeasc 200 de caractere). Cuvintele cheie snt separate prin virgul i literele mari snt diferite de cele mici. Motoarele de cutare proceseaz de obicei primele 1000 de caractere, iar dac un cuvnt se repet prea des exist pericolul ca documentul s nu fie indexat. Unele motoare de cutare suport proprietatea robots pentru a indica dac un document s fie indexat i care dintre link-urile sale s fie urmate. Valoarea asociat a lui CONTENT este o list de directive separate prin virgul: index specific posibilitatea ca aceast pagin sa fie indexat noindex indic neindexarea aceastei pagini follow indic motoarelor de cutare s urmeze linkurile din pagin nofollow indic motoarelor de cutare s NU urmeze linkurile din pagin all echivalent cu index, follow (implicit) none echivalent cu noindex, nofollow

De exemplu, urmtorul element META le spune motoarelor de cutare s nu indexeze pagina, dar s urmreasc link-urile din pagin: <META NAME=robots CONTENT="noindex, follow"> De remarcat, ns, c NU toate motoarele de cutare suport aceast proprietate. Atributul HTTP-EQUIV poate fi folosit n locul lui NAME pentru a indica faptul c acea proprietate este (aparine) header-ului HTTP (a protocolului de preluare a documentelelor). Aceast proprietate este transformat i transmis de unele servere HTTP (nu toate1), dar clienii (browser-ele) recunosc aceast caracteristic (faptul c aparin headerului HTTP) chiar dac nu este trimis n antetul protocolului. Exemple (a se vedea i descrierea protocolului HTTP): 1. 2. setarea datei de expirare a unui document <META HTTP-EQUIV=Expires CONTENT="Sun, 22 Mar 1998 16:18:35 GMT"> setarea limbajului scripturilor inline din document ca fiind javascript

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> 3. 4. setarea limbii n care snt descrise stilurile inline din document <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> setarea codificrii unui document (la setul de caractere japonez) <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> Folosirea acestei metode n locul specificrii n antetul protocolului HTTP poate avea ca efect reafiarea paginii nc o dat dup ce a fost ncrcat de anumite browsere. 5. setarea timpului i adresei de ncrcare a unei alte pagini dup ce s-a ncrcat documentul curent: <META HTTP-EQUIV=Refresh CONTENT="10; URL=http://www.alta.com/"> Dup 10 secunde de la ncrcarea paginii curente, browserul trebuie s ncarce pagina de la adresa www.alta.com. De remarcat c nu toate browserele suport aceast proprietate, astfel c e preferat i oferirea unei alte modaliti de a ncrca pagina respectiv. Cel mai uzual motiv de folosire a lui Refresh este mutarea unei pagini la o alt adres i pstrarea (cel puin pentru un timp) i a vechii adrese, pentru utilizatorii ce i-au marcat cu bookmark pagina mutat. 6. Elementul SCRIPT Sintaxa: <SCRIPT>... </SCRIPT> Atribute posibile: Conine: Coninut n: Descriere: Acest element include un script de tip client-side n document. Aceast tehnic permite o mai mare interactivitate ntr-un document prin aciunile ce pot fi ntreprinse ca rspunsuri la evenimente utilizator. De exemplu, un script poate fi folosit la verificarea elementelor introduse de utilizator ntr-un formular NAINTE ca acestea s fie transmise, oferindu-se n acest mod posibilitatea de notoficare imediat a utilizatorului n caz de eroare. Nu toate browserele suport tehnica scripturilor client-side, iar unele dintre cele care o suport permit dezactivarea ei la solicitarea utilizatorului. n acest scop se folosete elementul NOSCRIPT care ofer posibilitatea nglobarii n document a aciunilor ce trebuie executate n acest caz. Mai mult, n cazul unor validri ale unor elemente ce se transmit unor cgi-uri, acestea trebuie s repete aceste verificri pentru a se acoperi i cazurile de invalidare/nesuportare a scripturilor client-side. Mai mult, trebuie reinut c diversele browsere suport DIVERSE VARIANTE ale limbajelor utilizate pentru scrierea scripturilor, fiecare cu bug-urile sale. Browser-ele cele mai cunoscute ce suport scripturile client-side snt Netscape Navigator versiunea 2.0 i superioar, Microsoft Internet Explorer versiunea 3.0 i superioar, i Opera versiunea 3.0 i superioar. HEAD, inline elements, block-level elements nglobeaz un script TYPE = ContentType (tipul coninutului limbajului scriptului) LANGUAGE=CDATA (numele limbajului din script) SRC=URI (locaia scriptului extern) CHARSET=Charset (setul de caractere folosit de scriptul extern) DEFER (execuia scriptului poate atepta)

Atributul TYPE specific tipul mediului ce conine limbajul de scriptare, adic text/javascript. Majoritatea browser-elor suport ns numai atributul depit LANGUAGE, cel care specific numele limbajului folosit. Exemple ale valorilor suportate de LANGUAGE includ JavaScript, JavaScript1.1, and VBScript. Browser-ele vor ignora scripturile cu valori ale acestui atribut pe care nu le suport. De exemplu, Netscape Navigator 3.0 va executa scripturile cu LANGUAGE = "JavaScript" sau LANGUAGE="JavaScript1.1" dar va ignora scripturile cu LANGUAGE = "JavaScript1.2" sau LANGUAGE="VBScript". Implicit se presupune ca este JavaScript 1.0. Un script embedded (nglobat) este dat ca i coninut al elementului SCRIPT. Atributul SRC permite autorilor s refoloseasc codul prin specificarea unui script extern. Atributul opional CHARSET ofer metoda de codificare (setul de caractere) al scriptului extern (tipic ISO-88591). Dac browser-ul nu poate ncrca scriptul extern va executa scriptul embeded, n caz contrar ignorndu-l pe acesta. Exemplu: <SCRIPT TYPE="text/javascript" SRC="foo.js" CHARSET="ISO-8859-1"> <! // script embedded, executat NUMAI DAC foo.js este nedisponibil // --> </SCRIPT> Netscape Navigator cere ca scripturile externe s-i fie oferite printr-un tip al coninutului (cmpul Content-Type al headerului HTTP) cu o valoare application/x-javascript. Atributul DEFER indic posibilitatea ca browserul s poat atepta parcurgerea scriptului pn cnd i restul documentului a fost prelucrat (afiat, de exemplu). Scripturile ce utilizeaz acest atribut nu trebuie s genereze nici un coninut al documentului i nu trebuie s rspund la evenimente utilizator ce pot apare n timp ce documentul se ncarc (de exemplu transmiterea unui formular). Acesta poate fi util n cazul ntrzierii scripturilor ce prencarc imagini, chiar dac browserele nu l suport, n general. Elementul SCRIPT poate apare de un numr oarecare de ori n headerul sau corpul unui document (HEAD sau BODY). n mod tipic este amplasat n HEAD, dac nu genereaz coninut pentru corpul documentului. Browserele dinaintea lui HTML 3.2 nu recunosc elementul SCRIPT i i trateaz coninutul ca i cum ar fi HTML normal. Pentru a evita aceste cazuri, se permite plasarea comentariilor n jurul coninutului scriptului embedded. De exemplu: <SCRIPT TYPE="text/javascript"> <!-- comment to end of line document.write("foo"); // comment to end of line --> </SCRIPT> Atenie la faptul c "-->" este coninut ntr-un comentariu pe o singur linie a limbajului JavaScript (nceput cu dou caractere slash /). Din punct de vedere practic, prima apariie a lui "</" urmat de orice liter este considerat tag de sfrit pentru elementul SCRIPT. Autorii trebuie s evite utilizarea irurilor de tipul "</P>" n scripturile embedded. JavaScript permite folosirea caracterului \ (backslash) pentru a evita terminarea prematur a elementului SCRIPT, ca n exemplul acesta: document.write("<\/P>").

7. Elementul ISINDEX Sintaxa: <ISINDEX> Atribute posibile: Conine: Coninut n: APPLET, BLOCKQUOTE, BODY, CENTER, DD, DEL, DIV, FIELDSET, FORM, HEAD, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH Descriere: Acest element definete o linie singular de introducere a datelor. Eticheta cmpului de intrare este specificat folosind atributul PROMPT. ISINDEX este depit n HTML 4.0 de ctre elementul INPUT. Este echivalent cu FORM cu un singur element de intrare de tip text, o metod get i o aciune indicnd la adresa (uri) documentului ce conine elementul ISINDEX. 8. Elementul OBJECT Sintaxa: <OBJECT>...</OBJECT> Atribute posibile: Conine: DATA=URI (datele obiectului) CLASSID=URI (adresa de implementare) ARCHIVE=CDATA (fiierele arhiv) CODEBASE=URI (adresa de baz/URI pentru CLASSID, DATA, ARCHIVE) WIDTH=Length (limea obiectului) HEIGHT=Height (inlimea obiectului) NAME=CDATA (numele pentru transmiterea formularelor) USEMAP=URI (imaginea senzitiv/image map de tip client-side) TYPE=ContentType (tipul coninutului obiectului) CODETYPE=ContentType (tipul coninutului codului) STANDBY=Text (mesajul ce se va afia n timp ce se ncarc) TABINDEX=NUMBER (poziia n ordinea de parcurgere) DECLARE (nu se instaniaz obiectul) ALIGN=[ top | middle | bottom | left | right ] (modul de aliniere a obiectului) BORDER=Length (limea/grosimea marginii linkului) HSPACE=Pixels (spaiu lsat orizontal) VSPACE=Pixels (spaiu lsat vertical) atribute comune Nimic PROMPT = text (mesajul promptului) atribute fundamentale (core atributes, vezi mai sus) atribute de internaionalizare (vezi mai sus)

 Coninut n: Descriere:

Elemente PARAM urmate de elemente de tip bloc i/sau inline HEAD, elemente de tip inline, elemente de tip bloc cu excepia lui PRE

Acest element este folosit pentru a include obiecte ca imagini, secvene video, applet-uri Java sau elemente VRML n documentele HTML. Este utilizat pentru a nlocui elementele mai specifice IMG i APPLET definite n versiunile anterioare, precum i extensiile proprietare (ale diferiilor productori de browsere), cum ar fi EMBED i BGSOUND. Utilizarea acestui element asigur att o portabilitate superioar, ct i o compatibilitate ntre browsere i versiuni. Atributul DATA specific adresa obiectului nglobat n document. Adresele relative snt interpretate n concordan cu atributul CODEBASE. Atributele WIDTH i HEIGHT definesc dimensiunile obiectului. Valorile pot fi n pixeli sau n procente relative la dimensiunea printelui. Majoritatea browsere-lor cer obligatoriu aceste atribute. CLASSID poate fi folositor pentru a specifica implementarea obiectului. Applet-urile Java, Python i controalele ActiveX ofer implementri pentru obiectul nglobat, fiind astfel specificate cu atributul CLASSID, ca n exemplul urmtor: CLASSID="yahtzee.py" CODETYPE="application/x-python" STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game"> <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game"> <OBJECT DATA="yahtzee.gif" TYPE="image/gif" TITLE="A Yahtzee animation" WIDTH=200 HEIGHT=100> Yahtzee is my <EM>favorite</EM> game! </OBJECT> </OBJECT> </OBJECT> Acest exemplu demonstreaz i metoda de utilizare a coninutului alternativ pentru browserele care nu pot afia obiectele nglobate. n acest exemplu, se folosete nti varianta scris n Python a jocului Yahtzee, dac browserul l suport. Pentru browserele care nu suport appleturile Python se ofer o alternativ cu versiunea Java. Mai mult, dac nici acest tip de applet nu e recunoscut (i executat) se ofer o imagine (un gif). La limit este oferit i un text, ca alternativ extrem. De remarcat c acest exemplu este compatibil i cu versiunile anterioare care ignor tagul OBJECT, afiind coninutul elementului din interior (aici un text!). Tot n acest exemplu este prezentat i modalitatea de utilizare a atributelor TYPE i CODETYPE pentru a permite browserelor evitarea solicitrii explicite i suplimentare a unui fiier pe care nu l pot prelucra (afia). Atributul TYPE specific tipul suportului referit de resursa referit de DATA, iar CODETYPE specific tipul suportului cerut de datele specificate de CLASSID. Exemplul utilizeaz i atributul STANDBY care afieaz un text (scurt) n timpul ncrcrii obiectului respectiv. Atributul ARCHIVE poate specifica o list (cu elemente separate prin blancuri, elemente ce snt adrese absolute sau relative la CODEBASE), permind browserului s ncarce mai multe fiiere cu o singur conexiune, ceea ce conduce la scderea timpului total de ncrcare a unui document compus. Formatul standard de arhiv pentru Java este JAR. Aceste arhive se pot crea cu utilitarul jar oferit de kitul de dezvoltare jdk. Atributul DECLARE face ca obiectul s fie doar o declaraie ce NU este instaniat imediat. Aceasta permite instanierea obiectelor prin intermediul unei legturi, unui buton sau unui obiect mai trziu n acelai document. Atributul ID trebuie s fie utilizat cu obiectele estfel declarate pentru ca mai trziu acestea s se poat instania prin intermediul identificatorului atribuit aici. <OBJECT

Exemplu: <OBJECT DECLARE ID=yahtzee CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 TITLE="My Yahtzee Game"> <IMG SRC="yahtzee.gif" ALT="You get the dice!" TITLE="Yahtzee animation"> </OBJECT> ... <P>Ready to <A HREF="#yahtzee">play Yahtzee</A>?</P> Elementul OBJECT poate conine i elemente PARAM, naintea oricrui alt coninut, pentru a oferi datele de iniializare la execuie. Exemplul urmtor include o secven video i un clip audio ca alternativ. Se folosesc parametri recunoscui n mod normal de orice plug-in pentru audio/video, plasai nainte de specificarea coninutului alternativ: <OBJECT DATA="mlk.mov" TYPE="video/quicktime" TITLE="Martin Luther King's &quot;I Have a Dream&quot; speech" WIDTH=150 HEIGHT=150> <PARAM NAME=pluginspage VALUE="http://quicktime.apple.com/"> <PARAM NAME=autoplay VALUE=true> <OBJECT DATA="mlk.wav" TYPE="audio/x-wav" TITLE="Martin Luther King's &quot;I Have a Dream&quot; speech"> <PARAM NAME=autostart VALUE=true> <PARAM NAME=hidden VALUE=true> <A HREF="mlk.html">Full text of Martin Luther King's "I Have a Dream" speech</A> </OBJECT> </OBJECT> Atributul USEMAP poate fi folosit cu OBJECT pentru a include o imagine clicabil o imagine care este echivalent cu o serie de legturi activate cu un click de mouse (spre adrese diferite n funcie de zona de imagine pe care se face clic). Acestea se mai pot realiza i cu elementul IMG (fiind mai bine suportate de browsere), dar cele definite cu OBJECT permit o alternativ textual complet pentru browserele ce nu ncarc imaginile. Atributul USEMAP indic spre un element MAP al crui coninut definete legturile n funcie de coordonatele zonei n care se face clic. Elementul MAP poate fi inclus n OBJECT, caz n care coninutul su nu este afiat (ci interpretat aa cum e descris anterior), sau n afara lui OBJECT i atunci coninutul su este afiat. Exemplul urmtor prezint un document cu dou imagini (cea de a doua ca alternativ la prima, dac aceasta nu este suportat). Ambele partajeaz o definiie de hart (zonele de pe imagine) care este inclus n elementul OBJECT. Elementul MAP conine un meniu de legturi care snt afiate de browserele care nu ncarc imaginile: <OBJECT DATA="sitemap.png" USEMAP="#map" TYPE="image/png" TITLE="Site map" WIDTH=300 HEIGHT=200> <OBJECT DATA="sitemap.gif" USEMAP="#map" TYPE="image/gif" TITLE="Site map" WIDTH=300 HEIGHT=200> <MAP NAME=map> <UL> <LI><A HREF="/reference/" COORDS="5,5,95,195">HTML and CSS Reference</A></LI> <LI><A HREF="/design/" COORDS="105,5,195,195">Design Guide</A></LI> <LI><A HREF="/tools/index.html" COORDS="205,5,295,195">Tools</A></LI> </UL> </MAP> </OBJECT> </OBJECT>

Atributul TABINDEX specific (prin intermediul unui numr ntreg ntre 0 i 32767) ordinea de parcurgere a elementului dac se folosete tasta TAB. Un element cu TABINDEX0 sau fr TABINDEX va fi vizitat dup toate elementele care au un TABINDEX pozitiv. Dintre elementele care au un TABINDEX pozitiv, cele care au o valoare mai mic vor primi focusul (vor fi vizitate) mai nti. Dac au aceeai valoare se viziteaz nti cele care apar nti n document. Atributul ALIGN, depit n HTML 4.0, specific modul de aliniere a unui obiect. Valorile top, middle i bottom specific poziia obiectului fa de coninutul documentului ce-l nconjoar la stnga i dreapta. ALIGN=middle aliniaz centrul obiectului cu linia de baz a textului (baseline). Pentru a centra un obiect orizontal n pagin se plaseaz ntr-un bloc centrat, ca n exemplul urmtor: <P ALIGN=center><OBJECT DATA="foo.mov" TYPE="video/quicktime"></OBJECT></P> Celelalte valori (left i right) specific un obiect flotant (ca poziie): el este plasat la marginea din stnga sau din dreapta i restul coninutului curge pe lng el. Pentru a se plasa restul coninutului sub obiect se folosete <BR CLEAR=left|right|all> (cel care se impune n situaia respectiv). Metodele moderne de aliniere snt oferite de proprietile vertical-align and float ale stilurilor cascadate (Cascading Style Sheets). Atributul BORDER (este i el depit n HTML 4.0) specific grosimea marginii obiectului. Valoarea 0 are ca efect marginea din jurul unei legturi (link) i trebuie folosit cu precauie. Exemplu: <A HREF="reference/"> <OBJECT DATA="icon/reference.gif" WIDTH=90 HEIGHT=90 BORDER=0></OBJECT> Web Authoring Reference </A> Atributele HSPACE i VSPACE (i ele depite n HTML 4.0) permit sugerarea unor spaii goale verticale i orizontale n jurul obiectelor a cror dimensiune este dat n pixeli, egal pentru ambele margini. Metoda modern este prin intermediul style-sheet-urilor. Obiectul OBJECT este cel mai utilizat ca un element BODY i poate fi coninut att n elemente inline ct i n elemente de nivel bloc. Coninutul lui OBJECT trebuie s fie alctuit din elementele care pot fi coninute n printele lui OBJECT. De exemplu un element A coninnd un OBJECT nu poate avea nici un element de nivel bloc ca i coninut al elementului OBJECT.

3.3. Structura corpului unui document HTML (elementul BODY) Majoritatea elementelor ce apar n corpul unui document (n cadrul elementului BODY) snt clasificate fie ca elemente de tip bloc (de nivel bloc) - block-level elements, fie ca elemente de tip inline inline elements. I. Elementele de tip bloc (block level elements) Elementele de tip bloc n mod tipic conin elemente inline i alte elemente de tip bloc. Cnd snt prelucrate vizual (afiate pe ecran), de obicei ncep cu o linie nou (de la captul rndului). Snt considerate de tip bloc urmtoarele elemente (unele dintre ele asimilate prin extensie, pentru c pot include elemente de tip bloc, specificate mai jos cu simbolul ): 1. Elementele de tip header (Hn) H1 - header de nivelul 1 H2 - header de nivelul 2

H3 - header de nivelul 3 H4 - header de nivelul 4 H5 - header de nivelul 5 H6 - header de nivelul 6

2. Containere de text P DIV CENTER PRE BLOCKQUOTE ADDRESS - definirea unui paragraf - definirea unei diviziuni logice de text - definirea unei diviziuni logice de text centrat n pagin - definirea unui text preformatat - definirea unui citat de dimensiuni mari - definirea unui bloc cu informaii specifice de adres

3. Elementele ce definesc (sau snt strns legate de) liste UL OL DIR DL LI DT DD TABLE CAPTION TBODY TR TD TH COLGRUP COL THEAD TFOOT HR FORM FIELDSET ISINDEX - definirea unei liste neordonate - definirea unei liste ordonate - definirea unei liste de tip director - definirea unei liste de definiii - definirea unui element ce aparine unei liste ordonate/neordonate () - definirea unui termen/definiie a unui liste de definiii () descriea unei definiii () - definirea unui tabel - definirea titlului unui tabel - definirea corpului tabelului () - definirea unui rnd al unui tabel () - definirea unei celule de date () - definirea unei celule de tip header () - definirea unui grup de coloane ntr-un tabel - definirea unei coloane a unui tabel (atributele comune) - definirea unui antet al unui tabel () - definirea unui footer al unui tabel () - inserarea unei linii orizontale - definirea unui formular pentru a introduce date - definirea unui grup de controale ntr-un formular - definirea unui text pentru promterul de cerut date de intrare

MENU - definirea unei liste de tip menu

4. Elemente ce definesc tabelele

5. Alte elemente

FRAMESET - definirea unui frameset (set de frame-uri pentru un document) ()

NOFRAMES

- definirea coninutului alternativ la setul de frame-uri

NOSCRIPT - definirea coninutului alternativ la script-uri

II. Elementele de tip inline (inline level elements) Elementele de tip inline pot conine, n mod normal, numai text sau alte elemente de tip inline. Cnd snt prelucrate vizual (afiate pe ecran), de obicei NU ncep cu o linie nou (efectul se propag din locul n care apar, chiar dac este n mijlocul unui rnd). Snt considerate de tip inline urmtoarele: 1. Elemente de marcare logic a proprietilor unei poriuni de text/unei fraze stilurile logice EM STRONG CODE SAMP CITE / Q ABBR ACRONYM DFN KBD VAR I B U S BIG SUB SUP TT - Text scos n eviden - Text puternic scos n eviden - Fragment de cod (bloc de instruciuni) - Mostr de text generat de un program - Citat scurt / Scurt text reluat dup alt surs - Abreviere - Acronim - Definiia unui termen - Text ce trebuie introdus de la tastatur - Variabil - Italic - Bold - Subliniat - Text cu o linie pe mijlocul caracterelor - Text mai mare - Subscript (indice) - Superscript (putere) - Teletype (stilul mainilor de scris)

2. Elemente de marcare fizic a proprietilor unei poriuni de text stilurile fizice

STRIKE - Tiat cu o linie

SMALL - Text mai mic

3. Elemente de marcare a proprietilor speciale ale unei poriuni de document SPAN BR A IMG FONT BASEFONT BDO - Container generic de text inline - Line break (sfrit de linie) - Anchor (ancor, legtur hypertext) - Imagine - Modificarea fontului - Modificarea fontului de baz - Redefinirea direciei n care se citete textul

4. Elemente de definire a controalelor din interiorul unui formular

 INPUT SELECT FIELDSET LEGEND TEXTAREA LABEL BUTTON OPTGROUP OPTION

- Cmp de introducere a unor date (button, etc.) - List de selecie - Grup de controale ale unui formular - Titlul unui fieldset - Cmp de introducere a unui text - Eticheta unui cmp - Buton - Grup de opiuni de meniu - List de selecie a unor opiune de meniu

5. Alte elemente ! - Comentarii Textul documentului

III. Elementele de tip nedefinit (pot fi att inline ct i block) Elementele urmtoare pot fi folosite att ca elemente de tip bloc ct i ca elemente de tip inline. Dac snt utilizate ca elemente inline (adic snt n interiorul unui alt element inline sau P) ele nu trebuie s conin nici un element de tip bloc. MAP AREA APPLET PARAM TEXTFLOW DEL INS OBJECT SCRIPT IFRAME - Definirea unei imagini senzitive (prelucrat client-side) - Zon activ ntr-o imagine senzitiv - Inserarea unui applet Java - Parameterii unui applet Java - Text alternativ la un applet - Text ters - Text inserat - Includerea unui obiect - Includerea unui script client-side - Definirea unei frame inline (n punctul n care apare elementul)

Capitolul 4. Elemente de baz ale documentelor: Texte, Legturi, Imagini 4.1. Elemente utilizate la formatarea textului unui document HTML HTML este construit pe ideea ierarhiilor de informaii i pe specificarea elementelor care reflect aceast ierarhie. ntr-un document aceasta nseamn c unele informaii snt mai importante ca altele i c, de obicei, snt pri de text (informaie) care includ alte (sub)pri de text. Cnd se descrie aceast situaie ntr-un document se obine o structur care reflect ierarhia ntr-un mod asemntor exemplului urmtor: I. Primul element principal (Major Topic) 1. Primul sub-sub-topic care se intinde...<CR/LF> ....i aici... rndul de sus trebuind s fie ntrerupt... 2. Al doilea sub-sub-topic B. Al doilea Sub-Topic II. Al doilea element principal (Major Topic)...etc., etc. Uneori documentul dorete reflectarea acestei logici. Pentru aceasta este pus la dispoziia autorului posibilitatea definirii de titluri i/sau subtitluri pe diverse nivele. De remarcat c un rnd de text afiat de un browser se termin doar atunci cnd se termin ecranul sau se specific explicit acest lucru cu un tag special. Inserarea de linii n document (CR/LF cu Enter) nu se reflect i la afiare. Browserele ignor toate spaiile albe (whitespaces) din documente (caracterele de tip CR, LF, TAB, etc). A. Primul Sub-Topic

1. Terminarea rndului (elementul BR) Sintaxa: <BR> Atribute posibile: Conine: Coninut n: Descriere: Tag-ul <BR> termin rndul de text acolo unde este inserat. Cnd navigatorul ntlnete tag-ul <BR>, afieaz textul care urmeaz acestui tag ncepnd de la marginea din stnga, indiferent unde anume este aceast margine. De pild n cazul n care elementul <BR> este inserat ntr-o list, marginea din stnga este alta dect n cazul unui text normal. Tag-ul se folosete cnd dorim s terminm afiarea rndului ntr-un anumit loc. Trebuie avut grij la inserarea acetui tag deoarece modul n care apare un text/linie depinde i de fontul utilizat i dimensiunea sa. elemente de tip inline elemente de tip block Nimic (gol) CLEAR=[ left | all | right | none ] atribute comune core (tergerea/setarea poziiei obiectelor flotante)

Atributul CLEAR mut dedesubt obiectele flotante (care pot apare n diverse poziii n pagin, cum ar fi imaginile i tabelele). Mult mai flexibil este metoda stilurilor deoarece proprietate clear se poate aplica oricrui element). Exemplu: Textul urmtor dintr-un document HTML i dac ramuri bat n geam,<BR>De ce nu tai copacul? Are ca efect afiarea n browser: i dac ramuri bat n geam, De ce nu tai copacul? 2. Titluri (elementul Hi) Sintaxa: <H1>Titlu de nivel 1</H1> <H2>Titlu de nivel 2</H2> <H3>Titlu de nivel 3</H3> <H4>Titlu de nivel 4</H4> <H5>Titlu de nivel 5</H5> <H6>Titlu de nivel 6</H6> Atribute posibile: ALIGN = [ left | center | right | justify ] (alinierea orizontal) atribute comune (atribute core, atribute de internaionalizare i evenimente scriptabile) Conine: Coninut n: APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DEL, DD, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH Descriere: Titlurile snt utilizate pentru ierarhizarea diferitelor seciuni de text. HTML definete ase nivele pentru titluri, indicate n formatul <Hl> <H2>...<H6>. La afiare titlurile nu snt numerotate, diversele navigatoare afindu-le astfel nct s ias n eviden (centrat, ngroat, subliniat, mrit, etc). Ele nu trebuie identate n document, identrile fiind ignorate de navigatoare. Spre deosebire de titlul documentului (<TITLE> Titlul documentului </TITLE>), titlurile utilizate la structurarea documentului (<H1> Titlul de ordinul 1 </H1>) pot avea orice lungime. H1 definete headerul (titlul) de nivel 1, adic cel mai important. n mod normal, ntr-un document nu trebuie s existe dect un singur astfel de header. Autorii nu trebuie s se bazeze pe dimensiunea fontului utilizat n acest caz, ci doar pe importana headerului (titlului) respectiv. Autorii pot s sugere cum s apar titlurile prin folosirea stilurilor. Exemplu: 1. Headerul H1 poate fi sugerat astfel: h1 { elemente de tip inline

color: #c33; background: transparent; font-weight: bold; text-align: center 2. } Dimensiunile (normale) ale acestor taguri snt: <H1> Header 1 </H1> <H2> <H3> <H4> <H5> <H6> Header 2 </H2> <H3> </H4> </H5> </H6>

Header 3 Header 4

Header 5 Header 6

3. Containere de text (stiluri ale unui bloc) A. Paragrafe (elementul P) Sintaxa: <P> Paragraful coninut </P> Atribute posibile: Conine: Coninut n: ADDRESS, APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD Descriere: Prima versiune HTML specific tag-ul <P> ca tag vid (fr un corespondent </P>. Cele mai multe navigatoare presupun c paragrafele snt formatate de aceast manier. Cnd ntlnesc un tag <P>, ncep un nou rnd, lsnd cteva spaii verticale (rnduri) libere ntre paragraful care tocmai s-a terminat i cel care tocmai ncepe. n HTML 2.0 i HTML 3.0, tag-ul paragraf este nevid <P>...</P>, tag-ul </P> fiind ns opional, dar se recomand folosirea lui cnd se folosesc style-sheet-uri. Chiar dac HTMLnu specific un mod special de prezentare pentru acest tag, autorii o pot face, sugernd, de exemplu, identarea paragrafului sau spaierea prin intermediul style-sheet-urilor. De exemplu: P { margin-top: 0; text-indent: 5% } B. Containerul logic de tip bloc (elementul DIV) Sintaxa: <DIV>...</DIV> elemente inline ALIGN=[ left | center | right | justify ] (aliniere orizontal) atribute comune

Atribute posibile: Conine: Coninut n: APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH Descriere: Acest element definete un container de tip bloc (block-level) generic, permind autorilor s specifice diverse atribute globale blocului respectiv (cum ar fi, de exemplu, stilul sau limba). Cea mai important utilizare a acestui element este n combinaie cu elementele CLASS, ID sau LANG, elemente definitorii n folosirea stilurilor (style-sheet). Atributul (depit) ALIGN sugereaz alinierea orizontal a coninutului diviziunii de text definit cu acest element, avnd ca argumente posibile: left, right, center i justify. Un echivalent (alias) pentru valoarea center (<DIV ALIGN=center>) este elementul (preferabil a fi folosit ) <CENTER>. Elementul DIV are un echivalent la nivelul text SPAN, utilizat n interiorul paragrafelor i al elementelor de tip inline. De remarcat c browserele adaug, de obicei, o linie nou att nainte ct i dup elementul DIV. De exemplu: <P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>ccccc<P>ccccc</DIV> va fi afiat astfel: (o linie goal) aaaaaaaaa bbbbbbbbb ccccc ccccc (i apoi nc o linie goal) C. Containerul logic de tip text/inline (elementul SPAN) Sintaxa: <SPAN>...</SPAN> Atribute posibile: Conine: Coninut n: Descriere: Acest element definete un container de text generic de tip inline, permind autorilor s specifice diverse atribute globale textului (zonei de document) respectiv (cum ar fi, de exemplu, stilul sau limba). Cea mai important utilizare a acestui element este n combinaie cu elementele CLASS, ID, DIR sau LANG, elemente definitorii n folosirea stilurilor (style-sheet). SPAN se folosete doar acolo unde nici un alt element de tip inline nu este potrivit. Dar dac exist un astfel de element atunci acesta este preferabil. De exemplu, n locul: <P><SPAN LANG=ro>Mineriadele anilor 90</SPAN> au ocat opinia public. elemente inline i elemente de tip bloc (block level) elemente inline atribute comune elemente inline i elemente de tip bloc (block level) ALIGN=[ left | center | right | justify ] (aliniere orizontal) atribute comune

se poate folosi: <P><I LANG=ro> Mineriadele anilor 90</I> au ocat opinia public. Dac n interiorul zonei selectate se afl elemente de tip bloc (ca P sau TABLE) se folosete elementul echivalent SPAN. Exemplu: Presupunem c vrem s scriem o pagin HTML care s conin un formular care s preia date pentru o baz de date. Fiecare cmp ar trebui s poat fi identificat n mod unic pentru a putea fi prelucrat separat (validat, de exemplu, cu un script). ntruct HTML nu are elemente specifice pentru a identifica, de exemplu, numele persoanei, se folosesc DIV i SPAN pentru a obine efectul structural (i chiar i de prezentare) dorit. De remarcat c fiecare cmp este plasat ntr-o celul a unui tabel, pentru a se obine efectele de poziionare i aliniere asemntoare controalelor vizuale din interfeele grafice. <!-- Exemplu de date pentru o baz de date: --> <!-- Nume: Ion Ionescu, Tel: (51) 123-121, Email: [email protected] --> <DIV id="client-ionescu" class="client"> <P><SPAN class="client-titlu">Informaii 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>[email protected]</TR> </TABLE> </DIV> <!-- Nume: Victor Popescu, Tel: (51) 123-212, Email: [email protected] --> <DIV id="client-popescu" class="client"> <P><SPAN class="client-titlu">Informaii 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>[email protected]</TR> </TABLE> </DIV> D. Textul centrat (elementul CENTER) Sintaxa: <CENTER>Text Centrat</CENTER> Atribute posibile: Conine: Coninut n: APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH Descriere: elemente inline i elemente de tip bloc (block level) atribute comune

Acest element definete un bloc al crui coninut este centrat orizontal. Este o prescurtare pentru elementul <DIV ALIGN=center>, dar rmne folositor n special pentru tabele pe care le centreaz (pe ele, nu coninutul lor!!!) n pagin, evitnd folosirea lui <TABLE ALIGN=center> care nu este suportat de toate browserele. Exist dou modaliti de centrare a textului. Una cu ajutorul tag-ului <CENTER> iar cealalt cu ajutorul atributului ALIGN care ia valoarea CENTER. ALIGN=CENTER este un atribut care poate fi utilizat n conjuncie cu majoritatea tag-urilor. Exemplu: <CENTER> <TABLE> <TR ALIGN=center> <TH SCOPE=col>Name</TH> <TH SCOPE=col>Age</TH> <TH SCOPE=col>Country</TH> </TR> <TR ALIGN=center> <TD>Liam Quinn</TD> <TD>20</TD> <TD>Canada</TD> </TR> </TABLE> </CENTER> E. Textul preformatat (elementul PRE) Sintaxa: <PRE> text preformatat (conine tab-uri, multe spaii, etc) </PRE> Atribute posibile: Conine: elemente inline cu excepia: IMG, OBJECT, APPLET, BIG, SMALL, SUB, SUP, FONT, BASEFONT Coninut n: APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH Descriere: Majoritatea documentelor HTML conin text marcat cu tag-uri HTML. Aceasta face ca textul s fie afectat de restriciile HTML n sensul c toate spaiile suplimentare (tab-uri, mai multe spaii, RETURN) s fie ignorate de ctre navigator. Afiarea acestor texte, aa cum snt ele, se poate face prin utilizarea tag-urilor <PRE> ... </PRE>. Toate spaiile suplimentare cuprinse ntre aceste dou tag-uri vor fi afiate aa cum snt. Aceasta ne permite utilizarea textului preformatat pentru afiarea tabelelor i chiar a unei grafici rudimentare obinute cu caractere ASCII. Textul preformatat este afiat n majoritatea cazurilor cu fontul Courier monospaiat. WIDTH=Numr (limea unei linii) atribute comune

Atributul WIDTH ofer informaii despre limea liniei, astfel ca browserul s aleag un font i o spaiere adecvat, dar de obicei este ignorat. Autorii care folosesc PRE trebuie s evite dependena de elementele nconjurtoare datorit modului specific de afiare (de la un browser la altul) a unui astfel de text. Se folosete n special la inserarea unor buci de program (cod), pentru care eliminarea spaiilor ar face citirea mult mai grea. Exemplu de cod Java inserat CA TEXT!!! ntr-o pagin HTML: <PRE><CODE CLASS=Java> class HelloWorld { public static void main(String[] args) { System.out.println("Hello World!"); } } </CODE></PRE> CODE este un element care se utilizeaz pentru a oferi informaie structural. F. Adrese (elementul ADDRESS) Sintaxa: <ADDRESS>Informaii de contact</ADDRESS> Atribute posibile: Conine: Coninut n: APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH Descriere: Tag-ul adres este utilizat pentru entitile gen semntur. De regul este folosit la sfritul documentelor, acolo unde snt inserate informaiile cu privire la autorul documentului, data publicrii i adresa de contact. De regul, adresele snt precedate de o linie orizontal iar informaiile coninute snt afiate pe rnduri diferite cu ajutorul tag-ului <BR>. Exemplu: Dac ntr-un document apar informaiile de adres de tipul: <ADDRESS> Most recent update: 28/01/99 <BR> For more information contact &lt;<A HREF="mailto:[email protected]"> [email protected]</A>&gt; </ADDRESS> n browser va apare: Most recent update: 28/01/99 For more information contact <[email protected]> elemente inline i P atribute comune

G. Citate lungi (elementul BLOCKQUOTE) Sintaxa:

<BLOCKQUOTE> Citat lung </BLOCKQUOTE> Atribute posibile: Conine: Coninut n: APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH Descriere: Acest element este utilizat pentru citate mai lungi care pot conine elemente de tip bloc (de exemplu P sau TABLE), spre deosebire de <Q> ... </Q> utilizat n citate scurte. Atributul opional CITE indic adresa sursei citate, oferind posibilitatea de verificare i oferind referine suplimentare. Nu este ns suportat de toate browserele. Punerea n eviden a citatelor se face de regul prin identare diferit fa de restul textului. De aceea, pn la implementarea style-sheet-urilor, elementul se folosea mai ales pentru identarea unui bloc de text fa de textul nconjurtor. Acum aceast metod este considerat depit. Exemplu: Citatul definit n modul urmtor: <BLOCKQUOTE CITE="http://www.bibliomania.com/Fiction/xxx.html" > ...orice generalizare presupune ntr-o anumit msur credina n unitate i simplitatea naturii. <p>n ceea ce privete unitatea aici nu poate exista vreo dificultate. </BLOCKQUOTE> va aprea astfel: "...orice generalizare presupune ntr-o anumit msur credina n unitate i simplitatea naturii. n ceea ce privete unitatea aici nu poate exista vreo dificultate." H. Citate scurte (elementul Q) Sintaxa: <Q> Citat scurt </Q> Atribute posibile: Conine: Coninut n: Descriere: Acest element este utilizat pentru citate scurte, care nu necesit paragrafe, spre deosebire de <BLOCKQUOTE> utilizat n citate lungi. Atributul opional CITE indic adresa sursei citate, elemente inline i elemente de tip bloc elemente inline CITE=URI (sursa de unde se citeaz) atribute comune elemente inline sau elemente de tip bloc sau SCRIPT CITE=URI (sursa de unde se citeaz) atribute comune

oferind posibilitatea de verificare i oferind referine suplimentare. Nu este ns suportat de toate browserele. Punerea n eviden a acestor citate se face de regul prin introducerea lui ntre ghilimele, de fapt ntre simbolurile folosite pentru citate n limba n care este dat citatul, dac aceasta este specificat cu elementul LANG. Astfel, nu este responsabilitatea autorului s pun aceste simboluri! Exemplu: Citatul definit n modul urmtor: John said, <Q lang="en-us">I saw Lucy at lunch, she says <Q lang="en-us">Mary wants you to get some ice cream on your way home.</Q> I think I will get some at Ben and Jerry's, on Gloucester Road.</Q> va apare (datorit specificrii limbii engleze americane) astfel: John said, "I saw Lucy at lunch, she told me 'Mary wants you to get some ice cream on your way home.' I think I will get some at Ben and Jerry's, on Gloucester Road."

4. Stilurile caracterelor Utilizarea tag-urilor pentru paragrafe, titluri sau liste afecteaz textul ca un ntreg schimbnd fontu-rile, spaierea vertical, adugnd o bulin sau un numr. Tag-urile pentru stilurile caracterelor afec-teaz felul n care vor fi afiate numai anumite cuvinte sau chiar numai anumite caractere (de pild afindu-le italic, ngroat sau subliniat). Exist dou tipuri de stiluri ale caracterelor: stiluri logice i stiluri fizice. Disticia ntre stilurile logice i fizice a fost important n era browserelor ce nu afiau dect text simplu (cum a fost, de exemplu, LYNX) i nu erau capabile s afieze texte italice, bold, etc, de aceea se recomanda folosirea stilurilor logice. Dar odat cu apariia browserelor de tip GUI nu mai exist nici un motiv pentru a evita stilurile fizice sau pentru a ine cont de distincia dintre ele (B i STRONG vor apare n multe din aceste browsere la fel, fr a fi ns siguri de aceasta). Se recomand astfel n primul rnd consistena dea lungul textului atunci cnd se dorete scoaterea n eviden a unei poriuni de text. 4.1. Stilurile logice Tag-urile pentru stilurile logice indic doar cum anume s fie utilizat textul marcat nu i cum anume s fie afiat. Din acest punct de vedere snt asemntoare tag-urilor folosite la marcarea paragrafelor sau titlurilor. Tag-urile stilurilor logice indic doar faptul c textul este o definiie, o bucat de cod sau doar o poriune de text care trebuie scoas n eviden n raport cu contextul. Este complet la latitudinea navigatorului (i uneori, a utilizatorului acestuia prin anumite setri ale browserului) s determine cum anume va fi prezentat textul marcat cu aceste tag-uri, dac va fi ngroat, italic sau evideniat n alt mod. Toate tag-urile stilurilor logice snt nevide. Exist mai multe tipuri de tag-uri pentru aceste stiluri: Tag </EM> ... </EM> <STRONG> ... </STRONG> <CODE> ... </CODE> <SAMP> ... </SAMP> <KBD> ... </KBD> <VAR> ... </VAR> <DFN> ... </DFN> <CITE> . . </CITE> <DFN> <Q> <ACRONYM> <ABBR> <INS> <DEL> <SUB> Text accentuat Textul marcat va fi mai puternic accentuat Secven de cod afiat cu font fix (ex Courier) Eantion; similar lui <CODE> Text tastat de utilizator Nume de variabil Definiie (cuvnt care va fi definit) Un scurt citat Definiia unui termen Un citat scurt, n interiorul unui paragraf. Un acronim O abreviere Un text inserat (un document, de pild) Text marcat ca ters Indice Utilizare

<SUP> 4.2. Stilurile fizice

Exponent

Tag-urile pentru stilurile fizice indic navigatorului cum anume s fie afiat textul marcat, de pild ngroat (bold), italic sau uniform (monospaiat) spaiat (asemntor textului produs de mainile de scris). Utilizarea stilurilor fizice are neajunsul c dac navigatorul nu poate afia acel stil el l va substitui cu un altul. Tag-urile stilurilor fizice snt: Tag <B> ... </B> <I> ... </I> <U> ... </U> <S> ... </S> sau <STRIKE> ... </STRIKE> <BIG> ... </BIG> <SMALL> ... </SMALL> <TT> ... </TT> Text afiat cu un font mai mare dect restul Text afiat cu un font mai mic dect restul Text monospaiat Utilizare Text ngroat (aldin) Textul italic (cursiv) Text subliniat Text tiat

Exemplu: Utilizarea acestor taguri: <P><b>bold</b>, <i>italic</i>, <b><i>bold italic</i></b>, <tt>teletype text</tt>, and <big>big</big> and <small>small</small> text.

poate produce efecte ca n figura urmtoare:

5. Elemente de modificare a fontului caracterelor A. Dimensiunea fontului Sintaxa: <FONT> Text cu font schimbat</FONT> Atribute posibile: Conine: Coninut n: inline elements, block-level elements, cu excepia lui PRE elemente inline SIZE = Dimensiune (dimensiunea fontului) COLOR = Culoarea (culoarea fontului) FACE = Felul fontului (felul fontului/font face) atribute core atribute de internaionalizare

Descriere: Tag-urile <FONT> ... < / FONT>, mpreun cu atributul SIZE permit modificarea dimensiunii fontului de baz, a crui valoare implicit este 3 (specificat printr-o alt extensie, i anume <BASEFONT>, font de baz care are de asemenea atributul SIZE). Valorile atributului SIZE snt ntre 1 i 7. Dimensiunea fontului poate fi specificat i relativ la fontul de baz, situaie n care valorile lui SIZE snt ntre -3 i +4. Acest tag, total depit n HTML 4.0, este folosit pentru modificri rudimentare ale caracteristicilor fontului cu care e afiat textul. Folosirea acestuia introduce numeroase probleme legate de accesibilitatea pe diverse platforme (care pot s nu aib instalat un anumit font, de exemplu), probleme ce se pot evita prin utilizarea stilurilor (style-sheet). Exemplu: Dimensiunile fonturilor (vzute n browsere) snt: FONT SIZE=1 FONT SIZE=2 FONT SIZE=3 FONT SIZE=4 FONT SIZE=5 FONT SIZE=6 FONT SIZE=7 Exemplu: Dimensiunile fonturilor (vzute n browsere) specificate relativ arat astfel:

Exemplu: Urmtorul fragment de text, descris cu aceste caracteristici, arat ca n figura de mai jos: <FONT FACE="ARIAL" SIZE=2 COLOR="#339966"> <H1>The Scariest Jungle</H1> </FONT> <FONT FACE="ARIAL" SIZE=2> Follow the map to see <I>lions</I> and <I>tigers</I> and <I>bears</I>. <B>Oh, my!</B> </FONT>

B. Stabilirea fontului de baz Sintaxa: <BASEFONT> Atribute posibile: Conine: Coninut n: Descriere: Spre deosebire de FONT, tagul BASEFONT modific fontul de baz, aplicndu-se tuturor elementelor care urmeaz, cu excepia titlurilor (Hn). Chiar dac nu e specificat, utilizarea lui BASEFONT n tabele (cu elementul TABLE) produce efecte imprevizibile i diferite, de la browser la browser. Acest tag, total depit n HTML 4.0, este folosit pentru modificri rudimentare ale caracteristicilor fontului cu care e afiat textul. Folosirea acestuia introduce numeroase probleme legate de accesibilitatea pe diverse platforme (care pot s nu aib instalat un anumit font, de exemplu), probleme ce se pot evita prin utilizarea stilurilor (style-sheet). Atributul SIZE specific dimensiunea fontului ce se dorete folosit, dimensiune dependent de browser, pe o scal de la 1 la 7, cu o valoare implicit de 3. Atributele COLOR i FACE, suportate foarte slab sugereaz culoarea i felul fontului. Mult mai bine suportat i mai adecvat este folosirea style-sheet-urilor pentru aceste atribute. inline elements, block-level elements, cu excepia lui PRE nimic SIZE = Dimensiune (dimensiunea fontului) COLOR = Culoarea (culoarea fontului) FACE = Fel (felul fontului/font face) ID = ID (identificator)

4.2. Definirea i utilizarea listelor HTML ofer mai multe mecanisme prin care s se poat defini liste de informaii, avnd n vedere larga utilizare a acestora. Exist mai multe feluri de liste, toate avnd ns cteva elemente comune: ntreaga list este ncadrat de tag-uri de nceput i de sfrit de list: <UL> i </UL>, <OL> i </OL>, etc. Fiecare element al listei are propriul lui tag: <DT> i <DD> pentru listele glosar i <LI> pentru toate celelalte liste. Exist trei tipuri standard de liste: neordonate (UL), ordonate (OL) i liste de definiii (DL). Se mai pot defini i liste de tip MENU i DIR (definite iniial n 2.0) dar care snt acum considerate depite i vor fi afiate la fel ca UL si DL. 1. Definirea listelor ordonate (cu elemente numerotate) Sintaxa: <OL> <LI> Primul element al listei ordonate <LI> Al doilea element <LI> A1 treilea element... </OL> Atribute posibile: Conine: Coninut n: APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH Descriere: Listele ordonate ncep cu <OL> i se ncheie cu </OL> (OL este o abreviere de la Ordered List) i fiecare element este introdus n list cu ajutorul tag-ului vid <LI>. Cnd navigatorul interpreteaz o list ordonat el numeroteaz secvenial fiecare element ntlnit (nu se numeroteaz n document). Identarea n textul original (cel ce va fi afiat) nu este obligatorie, folosindu-se doar pentru a putea fi mai uor reperate listele din restul textului. Atributul TYPE sugerez stilul de numerotare. Valorile pe care le poate lua snt (literele mici difer de cele mari): 1 (numere zecimale: 1, 2, 3, 4, 5, ...) a (literele mici ale alfabetului: a, b, c, d, e, ...) A (literele mari ale alfabetului: A, B, C, D, E, ...) i (numerele Romane scrise cu litere mici: i, ii, iii, iv, v, ...) unul sau mai multe elemente LI TYPE=[ 1 | a | A | i | I ] (stilul de numerotare) START=Number (numrul de nceput al elementelor) COMPACT (afiare compact) atribute comune

 Exemplu:

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

Atributul START indic primul numr folosit la numerotarea elementelor listei. Prepararea unei cni de ceai. <OL> <LI> Punei apa la fiert <LI> Punei ceaiul preferat ntr-o can de porelan <LI> Turnai apa fierbinte peste ceai i acoperii cana <LI> Ateptai 3 minute </OL> 2. Definirea listelor neordonate (nenumerotate) Sintaxa: <UL> <LI> Primul element al listei neordonate <LI> Al doilea element <LI> A1 treilea element... </UL> Atribute posibile: Conine: Coninut n: APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH Descriere: Diferena fa de lista ordonat (OL) este c elementele nu vor apare numerotate, ele fiind afiate identat, unele sub altele, precedate de un semn specific elementelor listelor (de exemplu bulina ). Acest semn este determinat de atributul TYPE i poate lua valorile: disc (cerc umplut/plin) square (ptrat) circle (circumferina unui cerc) unul sau mai multe elemente LI TYPE=[ disc | square | circle ] (stilul bulletului folosit pentru elemente) COMPACT (afiare compact) atribute comune

Acestea arat, de obicei, astfel: Exemplu: Un meniu la restaurant poate fi descris astfel:

<UL> <LI> Ciorb de burt <LI> Ciorb de perioare <LI> Alte ciorbe </UL> Listele neordonate trebuie marcate cu tag-urile <UL> iar elementele listei se introduc la fel ca n listele ordonate. Rezultatul este o list ale crei elemente snt marcate cu buline sau alte caractere (dac nivelul pe care apar este mai mare de 1). Forma lor (pentru sub-liste) poate fi schimbat definind o nou list n interiorul primeia, dup modelul urmtor: <UL> <UL> <LI> Element al noii liste <LI> Un alt element, etc </UL> </UL>

3. Definirea elementelor unei liste (tagul LI) Sintaxa: <LI> Element al listei... </LI> Atribute posibile: Conine: Coninut n: Descriere: Elementele listelor se definesc folosind acest tag. Atributul VALUE poate specifica numrul din secven care se atribuie acelui element. Atributul TYPE specific elementul grafic/alfabetic ce va marca elementul respectiv. Valorile pe care le poate lua snt: Valorile pentru LI n UL, DIR sau MENU: disc (cerc umplut/plin) square (ptrat) circle (circumferina unui cerc) 1 (numere zecimale: 1, 2, 3, 4, 5, ...) a (literele mici ale alfabetului: a, b, c, d, e, ...) A (literele mari ale alfabetului: A, B, C, D, E, ...) i (numerele Romane scrise cu litere mici: i, ii, iii, iv, v, ...) OL, UL, MENU, DIR elemente inline i elemente de tip bloc (bloc level) TYPE=[ disc | square | circle | 1 | a | A | i | I ] (stilul de marcare a elementelor listei) VALUE=Number (numrul elementului din secven) atribute comune

Valorile pentru LI n OL:

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

4. Definirea listelor de definiii (glosar) Sintaxa: <DL> <DT> Termen care urmeaz s fie definit </DT> <DD> Definiia termenului </DD> <DT> Alt termen </DT> <DD> Alt definiie </DD> </DL> Atribute posibile: Conine: Coninut n: APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH Descriere: Listele de definiii (uneori numite i liste glosar) snt uor diferite fa de celelalte liste. Fiecare element al listei este format din dou pri: termenul de definit i definiia. Listele de definiii ncep cu <DL> i se termin cu </DL>. Termenii care trebuie definii snt inserai cu ajutorul etichetei <DT> iar definiiile corespunztoare se introduc cu ajutorul etichetei <DD>. O list de definiii poate avea mai muli termeni pentru o definiie dat, precum i mai multe definiii pentru un termen. De asemenea se poate da un termen fr o definiie corespunztoare i vice versa (!), dar o astfel de structur are sens n cazuri extrem de rare. Listele de definiii snt formatate de navigatoare astfel nct termenii i definiiile snt separai prin linii iar marginile definiiilor snt identate. Cu ajutorul atributului COMPACT, <DL COMPACT>, lista de definiii ar trebui s fie formatat pe o suprafa ecran mai mic. Se pare ns c majoritatea navigatoarelor ignor acest atribut. O list de acest tip poate fi adaptat i pentru utilizarea cu structuri care nu snt termeni strici i definiii (n sensul uzual), aceast practic fiind justificat cnd alte elemente HTML nu pot descrie adecvat acea structur. De exemplu, o list cu programul unei persoane dintr-o sptmn ar putea fi definit astfel: <H1>Programul sptmnal</H1> <DL CLASS=calendar> <DT>21 ianuarie</DT> <DD> Minerii din Valea Jiului prezint <CITE>Lupta cu jandarmii</CITE> n comuna Costeti. Trebuie vzut. </DD> <DT>22 ianuarie</DT> <DD> Marius Tuc Show, de la 7:00 la 9:00, invitaie la <ABBR TITLE=Street>St.</ABBR> Ploietului numrul 1 unul sau mai multe elemente DT sau DD COMPACT (afiare compact) atribute comune

</DD> </DL> 5. Definirea termenilor unei liste de definiii (tagul DT) Sintaxa: <DT> Element al listei... </DT> Atribute posibile: Conine: Coninut n: Descriere: DT definete un termen ntr-o list de definiii. Tagul de sfrit este opional dar se recomand a fi folosit pentru a preveni anumite erori cnd se folosesc stilurile (style-sheets). DT nu poate conine elemente de tip bloc (ca de exemplu P sau Hn). n general tagul este urmat de un element DD pentru denirea termenului respectiv. Un termen poate avea mai multe definiii asociate cu el, dup cum i o singur definiie poate avea mai muli termeni. DL elemente inline atribute comune

6. Definirea definiiei unui termen al unei liste de definiii (tagul DD) Sintaxa: <DD> Element al listei... </DD> Atribute posibile: Conine: Coninut n: Descriere: Elementul DD ofer definiia unui termen dintr-o list de definiii. Tagul de sfirit este opional dar se recomand a fi folosit pentru a preveni anumite erori cnd se folosesc stilurile (stylesheets). DT poate conine elemente de tip bloc (ca de exemplu P, Hn, TABLE sau chiar DL). Astfel listele de definiii pot fi mbricate. 7. Definirea listelor de tip meniu i director Sintaxa: <MENU> <LI> Primul element din meniu <LI> Al doilea element din meniu <LI> Al treilea element din meniu </MENU> <DIR> <LI> fiiere/ <LI> aplicaii/ <LI> pot/ </DIR> Descriere: Meniurile snt liste simple de elemente sau scurte paragrafe care nu snt inserate cu ajutorul numerelor sau bulinelor. Afiarea lor se face prin identare diferit sau o formatare diferit de restul textului. Listele director snt i mai scurte dect listele meniu, snt identate i formatate n coloane de ctre navigatoare, n mod asemntor listelor director din Unix. Meniurile au fost proiectate pentru a fi folosite ca liste cu o singur coloan. n practic un browser va afia listele definite cu DIR i MENU exact ca cele definite cu UL! DL elemente inline i elemente de tip bloc (bloc level) atribute comune

8. Imbricarea listelor Imbricarea listelor se realizeaz simplu: se insereaz o nou list n interiorul primei liste. Se pot insera liste neordonate n interiorul celor ordonate si viceversa. Felul n care apar afiate listele imbricate difer mult de la un navigator la altul. Exemplu: Meniul (mai complet) de la restaurant: <OL> <LI> Ciorbe <UL> <LI> Ciorb de burt <LI> Ciorb de perioare <LI> Alte ciorbe </UL> <LI> Felul doi <LI> Desert </OL> 9. Formatarea listelor Pentru liste, navigatorul este acela care hotrte forma bulinelor sau schema de numerotare. Netscape a introdus cteva atribute prin care se ofer un mai mare control asupra tipurilor de buline utilizate pentru marcarea elementelor din listele neordonate. Atributul TYPE determin forma bulinei: TYPE=DISC, pentru o bulin circular, compact (implicit) TYPE=CIRCLE, pentru un contur circular TYPE=SQUARE, pentru un contur de forma unui ptrat Exemplu: <UL> <LI TYPE=DISC >Disc <LI TYPE=CIRCLE>Cerc <LI TYPE=SQUARE>Patrat </UL> Pentru listele ordonate, atributul TYPE are un alt set de valori care indic schema de numrare: TYPE=1, implicit, ordoneaz elementele listei prin numere arabe (1, 2, 3,...) TYPE=A, ordoneaz elementele listei prin litere mari (A, B, C, ...) TYPE=a, ordoneaz elementele listei prin litere mici (a, b, c, ...) TYPE=I, ordoneaz elementele listei prin numere romane mari (I, II, III, ...) TYPE=i, ordoneaz elementele listei prin numere romane mici (i, ii, iii, ...) 4.3. Tag-uri (elemente) pentru legturi hypertext Adevrata putere a limbajului HTML st n capacitatea sa de a include n documentele HTML a unor legturi (link-uri) ctre alte documente de pe Web. Legturile transform documentele simple afiate doar pe ecran ntr-o bibliotec universal n care materialele dorite a fi consultate

vin la cititor aproape instantaneu, iar documentele statice devine n acest fel documente interactive. Legtura/link-ul (hyperlegtura, hyperlink-ul) este construcia de baz, putnd fi definit ca o conexiune de la o resurs Web la alta. Chiar dac pare un concept simplu, ea a fost fora primar care a asigurat succesul Webului. O legtur (link) are dou capete, numite uneori ancore, i o direcie. Link-ul pornete de la ancora surs i indic spre ancora destinaie care poate fi orice resurs Web (un document HTML, un element din interiorul unui document HTML, o imagine, un clip, un sunet, un program, etc). Aciunea implicit asociat cu o legtur este aducerea (ncrcarea) n navigator (browser) a resursei ctre care indic legtura. Acest comportament este obinut de obicei (i implicit) prin selectarea legturii (de exemplu cu mouse-ul prin clic, de la tastatur, etc). Elementul esenial al unei legturi este tagul <A>...</A> utilizat pentru marcarea (hyper)legturilor. El are ntotdeauna atribute asociate pentru a indica ce tip de legtur este. Exist dou tipuri de baz: 1. Ancora NUME care marcheaz o locaie particular din document ca int la care pot indica (la care se pot cupla) alte documente; atributul definitoriu este NAME (sau un echivalent: un alt element mpreun cu atributulID). Exemplu: <A HREF="document.html">Text activ</A> HREF (provenind de la Hypertext REFerence = referin hypertext) este atributul care are ca valoare numele documentului HTML care va fi adus dac textul dintre tag-uri (afiat de navigator astfel nct s ias n eviden) va fi selectat. 2. Ancora LEGTUR, indicat de atributul HREF, care indic browserului s sar la alt resurs (s o ncarce), dac legtura curent este selectat. Exemplu: <P><A href="#section1">Introduction</A><BR> ... <H2 id="section1">Introduction</H2> ...section 1... Textul Introduction este un text activ care dac este selectat are ca efect saltul la resursa identificat prin numele section1. Aceast resurs este de fapt o poriune din document care ncepe cu titlul (headerul H2) care are ca atribut id="section1".

Sintaxa: <A>...</A> Atribute posibile: Conine: Coninut n: Descriere: Pentru crearea unei legturi este nevoie de dou lucruri: Numele documentului / resursei la care se face legtura Textul care va deveni activ elemente de tip block-level, elemente de tip inline, fr A elemente inline, fr A HREF=URI (referina hypertext) NAME=CDATA (destinaia) REL=LinkTypes (relaii ctre legtur) REV=LinkTypes (relaii de la legtur) TYPE=ContentType (tipul coninutului destinaiei) TARGET=FrameTarget (frame-ul n care se aduce resursa indicat de legtur) HREFLANG=LanguageCode (limba n care e scris legtura) CHARSET=Charset (setul de caractere utilizat la scrierea legturii) ACCESSKEY=Character (combinaie de taste de acces / shortcut key) TABINDEX=Number (poziia 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

Marcarea textului activ n documentul iniial (de la care pornete legtura) se face cu tag-ul nevid <A>...</A>. Tot textul dintre tag-ul de nceput (<A>) i cel de sfrit (</A>) va deveni captul legturii afiat pe ecran i va fi prezentat de navigator altfel dect textul obinuit. <A> (numit i tag-ul ancor) include i informaii suplimentare despre legtur (atribute). Navigatorul utilizeaz ancora pointer dintr-un document pentru a gsi cel de-al doilea document. Pentru a identifica ancorele pointer se marcheaz o poriune de text (sau o imagine) astfel nct navigatorul s le deosebeasc de restul documentului. Atributul HREF (de la Hypertext REFerence) este utilizat pentru specificarea URI-ului documentului int. Este de fapt modul de localizare a documentului care va fi adus la selectarea textului activ. Atributul suplimentarTYPE poate fi folosit pentru a indica tipul (n categorisirea Internet) a resursei ctre care se indic, permind browserelor care nu pot interpreta (afia) un anumit tip de resurse s nu le mai ncarce. Acest atribut specific legturile ctre resursele Internet n concordan cu diverse protocoale de acces a acestora, protocoale specificate, ca parte integrant din URI. Cele mai utilizate protocoale: HTTP:// - legtur la un alt document HTML FTP:// - legtur (anonim) la un server FTP

 MAILTO:// - se activeaz editorul de e-mail pentru a se compune un mesaj i a se trimite la adresa specificat TELNET:// - legtur la o adres Telnet WAIS:// - legtur la un server de indexare WAIS USENET:// - legtur la o adres Usenet GOPHER:// - legtur la un server Gopher

Atributul opional TITLE indic titlul documentului ctre care puncteaz legtura (o scurt descriere a acesteia) i poate fi astfel afiat mpreun cu URL-ul (sub forma unui tool-tip). Uneori, dac legtura este de tip mailto, valoarea acestui atribut e folosit ca subiect al email-ului care se va trimite. Atributul NAME definete o destinaie pentru o legtur. De exemplu, un document ce conine: <H1><A NAME=foo>My Heading</A></H1> definete o destinaie pentru legturi numit foo. Se poate astfel folosi HREF="#foo" ntr-un element A din acelai document, sau HREF="somedoc.html#foo", din alt document. Un element A nu poate conine un alt element A, astfel c trebuie avut n vedere c ancorele ce definesc nume de seciuni NU pot conine ancore care indic legturi. Dar se pot utiliza att NAME ct i HREF ntr-un singur element A pentru a se evita aceste probleme. ID este atributul care nlocuiete atributul NAME i care poate fi folosit cu aproape orice element pentru a defini o destinaie. Exemplul anterior poate fi scris: <H1 ID=foo>My heading</H1> Nu toate browserele ofer suport ns pentru ID, astfel c NAME se mai pstreaz nc. Att NAME ct i ID trebuie s fie unice ntr-un document i s difere i prin altceva n afara literelor mici/mari. Valorile admise trebuie s nceap cu o liter din intervalul A-Z sau a-z i trebuie s urmeze numai caracterele A-Z, a-z, 0-9, liniua de desprire, de subliniere, virgula, punctul. Cnd este folosit ca i destinaie a unei legturi, numele astfel definit este case sensitive (literele mari/mici difer). Atributele REL i REV indic relaiile ntre o ancor i resursa indicat de legtur. REL definete o relaie de la documentul curent la cel indicat de legtur, n timp ce REV definete o relaie n sensul opus. De exemplu: <A HREF="foo.html" REL=glossary>...</A> indic faptul c foo.html este glosar pentru documentul curent, n timp ce <A HREF="bar.html" REV=subsection>...</A> indic faptul c documentul curent este o subseciune a lui bar.html. Atributul TARGET indic n ce frame s se ncarce resursa indicat de legtur. Dac nu exist un astfel de frame (cadru-pagin) se va deschide o feeastr nou. Se pot folosi i nume speciale (care ncep cu o liniu de subliniere) de frame-uri: _blank fereastr nou _self n fereastra curent (util pentru suprapunerea unui atribut BASE TARGET) _parent n printele frame-ului din frameset _top n ntreaga fereastr, fr frame-uri

Atributele SHAPE i COORDS ofer posibilitatea utilizatorului s specifice o hart de imagini senzitive (client-side image maps, prin intermediul elementului OBJECT), adic un numr oarecare de zone n interiorul unei imagini i un set de documente/resurse ctre care s indice fiecare zon anterior definit. Valoarea implicit pentru SHAPE este rect, care definete o regiune dreptunghiular folosind COORDS="left, top, right,bottom". Alte valori posibile: circle specific un cerc; se utilizeaz: COORDS="center-x, center-y, radius";

poly specific un poligon; se utilizeaz: COORDS="x1, y1, x2, y2, ..., xN, yN". default specific ntreaga imagine (ce a rmas eventual nedefinit);

Coordonatele snt relativ la colul stnga sus al imaginii i pot fi exprimate n pixeli sau procente. O raz a unui cerc dat ca procent este calculat relativ la cea mai mica dimensiune a imaginii/obiectului (limea sau nlimea). Dac dou sau mai multe regiuni se suprapun are prioritate cea definit nti. Exemple: <A HREF="album.html">My photo album</A> <A HREF="../images/me.jpg">Picture of me</A>

<A HREF="/sounds/song.mid" TYPE="audio/midi" ACCESSKEY=A>Cintecel (5 kB MIDI)</A> <A HREF="section2.html" TARGET="content" TITLE="Elements of the HEAD" REL=next>Section 2</A> <A HREF="mailto:[email protected]" TITLE="Feedback on Document">[email protected]</A> <A HREF="http://www.lp.com/" TARGET="_top">Web Design</A>

<A HREF="http://babel.alis.com:8080/langues/iso639.zh.htm" CHARSET="big5" HREFLANG=zh>ISO 639</A> Legturile se pot face la documente locale (care rezid pe acelai server (dar nu neaprat n acelai director), la documente aflate pe alte servere (legturi ndeprtate) sau intern (n interiorul unui document; acelai n cazul n care documentul este mare i se dorete un salt pn la o seciune a sa, sau o seciune a unui alt document, atunci cnd se dorete o indicare mai rafinat a prii din resursa-document ce se refer).

1. Legturi locale Legturile locale se fac utiliznd ci (referine) relative sau absolute. A. Referine absolute Cea mai simpl legtur se realizeaz preciznd calea relativ a documentului. Selectarea unei legturi fr specificarea nici unui alt element suplimentar de localizare, determin serverul s caute documentul solicitat n acelai folder ca i documentul n care a nceput legtura. Cile relative pot include directoare sau pot indica o cale pe care trebuie s o urmm pentru a naviga la documentul int, pornind de la documentul pointer (de start). O cale poate include i direcii, cum ar fi, de exemplu, coboar dou directoare spre rdcin i apoi mergi n sus dou directoare pentru a gsi documentul. Specificarea cilor relative n legturi se face ca n Unix, indiferent de sistemul pe care este gzduit pagina/paginile HTML. Asta nseamn c numele de directoare sau foldere snt separate de slash-uri (/) i referirea la directorul printe se face cu dou puncte (..). Iat un tabel cu referirea relativ a documentelor: Cale HREF="doc.html" HREF="dir/doc.html" Semnificaie doc.html se gsete n directorul curent doc.html este localizat n folderul (directorul) dir

HREF="dir/subdir/doc.html doc.html se afl n directorul dir, subdirectorul subdir " HREF="../doc.html" HREF="../../subdir/doc. html" doc.html se gsete ntr-un director aflat cu un nivel mai sus dect directorul curent doc.html se gsete ntr-un director aflat cu dou nivele mai sus, n directorul subdir

Pe Macintosh, numele discului este chiar cel care apare pe disc. De pild, dac exist un disc numit ServerWWW i documentele HTML se gsesc ntr-un folder numit SiteWWW, referirea relativ la acele documente se va face de forma: HREF="ServerWWW/SiteWWW/nume_document.html Pe sistemele care ruleaz Win/DOS, discurile snt referite n mod obinuit, cu ajutorul literelor, numai c cele dou puncte verticale (c:) snt nlocuite de o bar vertical (c|). Cele dou puncte verticale au o alt semnificaie, anume n specificarea legturilor. Deci, dac fiierul se afl n directorul c:\nume_director\document.html, i se face o referin la documentul aflat n d:\alt_director\subdirector\int.html referina la el se va face de forma: HREF="../d|/alt_director/subdirector/int.html. B. Referine absolute Referinele relative localizeaz un document int specificnd poziia acestuia (calea relativ) n raport cu documentul pointer (de la care pornete legtura). Referinele absolute localizeaz documentele specificnd directorul de cel mai nalt nivel i toat calea pn la document. Referinele absolute ncep ntotdeauna cu un slash (/) urmat de succesiunea directoarelor pn la documentul la care facei referin. Iat un tabel cu referirea absolut a documentelor:

Cale

Semnificaie

HREF="/home/pub/doc.html" doc.html se gsete n directorul /home/pub HREF="/c|/pub/doc.html" doc.html este localizat pe discul c: n directorul /pub

HREF="/Server/Site/doc.html doc.html se afl pe discul Server, n folderul Site (Macintosh) " Ori de cte ori este posibil trebuie folosite referinele relative deoarece cele absolute nu snt portabile. Specificarea relativ a localizrii documentelor permite meninerea uoar i mutarea documentelor HTML de pe un sistem pe altul (sau dintr-un loc n altul chiar pe acelai sistem) fr modificri majore n surse. 2. Legturi ndeprtate Marcarea documentelor HTML pentru legturi ndeprtate se face asemntor cu marcarea n cazul referinelor la documente locale. Tag-ul de nceput este <A> i cel de sfrit </A>. Textul dintre tag-uri va fi afiat diferit fa de restul documentului pentru a arta c este selectabil. Referina hypertext (HREF) va conine ns URL-ul documentului, de forma: <A HREF="http://www.w3.org/">The World Wide Web Consortium</A> 3. Legturi interne (ctre seciunile unui document/resurs) Ideea este de a realiza o legtur nu numai ntre un anumit punct al unui document i un alt document ci una ceva mai exact, ntre un anumit punct al unui document i un alt anumit punct al aceluiai document sau al altuia. Acest lucru se realizeaz prin crearea unei ancore n locul din document unde dorim s ne conduc legtura i apoi n realizarea unei legturi care va indica att documentul referit ct i paragraful (sau seciunea de document) la care facem referire. Crearea unei ancore se face n aproape acelai fel ca i crearea unei legturi, utiliznd tag-ul <A> numai c de aceast dat i este asociat un alt atribut: NAME. Atributul va avea ca valoare un anumit cuvnt (sau grup de cuvinte) care vor fi folosite pentru a face referin la aceast anumit seciune. Exemplu: <A NAME="cuvnt_cheie">Paragraf int</A> Atunci cnd se va face referin la aceast ancor, documentul int va fi derulat de ctre navigator pn cnd textul dintre <A> i </A> va ajunge n partea de sus a ecranului. Spre deosebire de legturi, ancorele nu snt afiate diferit fa de restul documentului n documentul int. Referirea la o ancor n documentul pointer (documentul de la care pornete legtura) se face n acelai fel ca i cnd ar fi referit un document ntreg (cu URL-ul documentului ca valoare a atributului HREF) i prin includerea numelui ancorei, precedat de semnul #. Exemplu: <A HREF="/cale/doc.html#cuvint cheie">Salt la paragraful int</A> Legtura cere navigatorului s ncarce documentul doc.html a crui cale este precizat n HREF i s deruleze doc.html pn cnd Paragraf_int ajunge n partea de sus a ecranului. Ancorele pot fi create chiar n acelai document n care se gsesc i legturile n ideea de a uura navigarea printr-un document mai mare. n acest caz, valoarea atributului HREF este chiar cuvntul cheie. De pild n cazul unui singur document organizat pe seciuni, cuprinsul poate fi prezentat la nceputul documentului i poate avea legturi care puncteaz spre diferitele seciuni. Tot ce avem de fcut este s dm nume ancorelor i apoi s le referim n legturi. 4.4. Imagini n documentele HTML Imaginile inserate n documentele HTML mbogesc paginile Web nu numai sub raport decorativ; bogia informaiei i noile posibiliti de organizare a resurselor fac din imagini un element indispensabil din publicaiile Web. Inserarea se face ntr-un mod asemntor unei legturi: se

specific URL-ul imaginii ce se insereaz, URL ce aparine ns unei resurse diferite de documentul propriu-zis (un alt fiier!), chiar dac apare n aceeai pagin n browser. 1. Formatele suportate Exist dou tipuri de imagini care pot fi vzute de navigatoare: imagini inline (n text, line = rnd) i imagini externe. Imaginile inline snt imagini care apar direct n paginile Web fiind ncrcate odat cu pagina (presupunnd c se utilizeaz un navigator grafic i c nu este inhibat ncrcarea automat a imaginilor). O condiie pentru ca imaginile s poat fi afiate este salvarea lor ntr-unul din formatele recunoscute de navigatoare: GIF sau JPEG. Fr multe amnunte, diferenele principale ntre aceste formate snt legate de dimensiune (la aceeai imagine formatul JPEG are o dimensiune mai mic, ceea ce nseamn c se ncarc mai repede n paginile Web) i de calitate (care este, de obicei, superioar la GIF, folosit atunci cnd imaginea ce se insereaz trebuie s fie de o foarte bun calitate, rezoluie sau adncime de culoare). Imaginile externe snt imagini care nu snt afiate direct la ncrcarea paginii. Ele pot fi ncrcate ns la cererea utilizatorului. Navigatoarele pot fi configurate s manipuleze fiiere imagine de diferite tipuri prin utilizarea unor aplicaii auxiliare aa c imaginile externe pot fi salvate n formate diferite: PCX, XBM, PICT, etc. Exist mai multe programe de editare de imagine care snt capabile s deschid imagini n formate diferite i s le converteasc n formatul JPEG/GIF, ntre cele mai rspndite fiind Adobe Photoshop i Paint Shop Pro. Exist i programe care fac numai conversia n GIF, cum ar fi De Babelizer pe Mac sau pachetul de filtre PBM pentru UNIX. Dou trsturi fac noile formate GIF (numite GIF89) mai deosebite: formatul ntreesut i fundalul transparent. Imaginile transparente snt imagini la care culoarea (sau modelul) din fundalul paginii va transpare, dnd senzaia c imaginea plutete pe suprafaa paginii. nainte de a le converti (cu un program special) trebuie s ne asigurm c imaginile au fundalul ntr-o singur culoare. Dac fundalul este format din mai multe culori, chiar dac acestea snt apropiate ca tonalitate, numai una singur va fi fcut transparent. Fundalul unei imagini se poate izola utiliznd un program de editare de imagine. ntreeserea (interlacing) nu schimb felul n care este vzut imaginea n document ci doar aspectul ei n timp ce este ncrcat. Pe msur ce imaginea este adus de pe Web, apariia ei poate fi gradat, de la o imagine de rezoluie joas la una de rezoluie mai nalt. Pentru crearea acestui efect este nevoie nu numai ca imaginea s fie salvat ntr-un format special (GIF ntreesut) ci i ca navigatorul s fie capabil s prezinte imaginea n timp ce aceasta este ncrcat. n mod normal, un fiier GIF este salvat n fiier linie cu linie (scan lines), ncepnd cu partea de sus a imaginii i continund progresiv n jos. Dac navigatorul poate afia imaginile n timp ce acestea snt ncrcate, se vede mai nti partea de sus a imaginii i apoi tot mai mult din ea pe msur ce informaia imaginii ajunge pe sistem. Imaginile ntreesute snt salvate diferit. La nceput este salvat fiecare a opta linie (ncepnd cu prima), apoi fiecare a opta linie (ncepnd cu a patra), apoi fiecare a patra linie (ncepnd cu a treia), apoi restul rndurilor. La ncrcarea imaginii fie liniile lips snt umplute cu informaie din liniile sosite deja (imaginea apare neclar pn la ncrcarea complet) fie snt afiate doar liniile sosite (efect veneian). Dac navigatorul nu suport imaginile ntreesute sau dac este setat s atepte pn la sosirea ntregii imagini nainte de afiare, efectul nu va fi observat. Avantajul unui format ntreesut este c utilizatorul poate cpta o idee despre ce anume reprezint imaginea nainte ca aceasta s soseasc n ntregime i poate hotr dac s atepte s se ncarce sau s opreasc transferul. Unelte pentru crearea acestor efecte snt destule. 2. Inserarea imaginilor n text Dup convertirea imaginii ntr-un format suportat, aceasta poate fi inserat n document. Imaginile inline snt specificate n HTML cu ajutorul tag-ului <IMG>. Acesta este un tag vid din aceeai familie cu <HR> i <BR>.

Sintaxa: <IMG> Atribute posibile: Conine: Coninut n: elemente de tip inline, elemente de tip bloc (block-level elements), cu excepia lui PRE Descriere: Atributul SRC indic URL-ul imaginii care va fi inserat n document. Dac numele imaginii este poza.gif i imaginea se afl n acelai director ca i documentul HTML, atunci integrarea imaginii se face cu tag-ul: <IMG SRC="poza.gif">, iar pentru o imagine aflat n directorul imediat superior celui n care se afl documentul, forma tag-ului este: <IMG SRC="../poza.gif">. Specificarea cii ctre imagine se face urmnd aceleai reguli ca i la specificarea URL pentru orice alt document/resurs. Dac se utilizeaz aceeai imagine de mai multe ori n interiorul aceluiai document, este indicat s se fac referine relative (spre aceeai resurs!) n locul celor absolute pentru a permite navigatorului s foloseasc aceeai copie a resursei (din cache) i a evita astfel ca acesta s aduc imaginea de pe server de mai multe ori. Atributul ALT ia ca valoare textul care va fi afiat de navigatoarele care nu lucreaz n modul grafic (sau care au inhibat funcia de ncrcare automat a imaginilor), iar LOWSRC="..." indic URL-ul unei imagini care va fi ncrcat naintea imaginii specificate n SRC. Valoarea atributului LOWSRC este de regul URL-ul unei versiuni de o mai mic rezoluie a imaginii specificate n SRC. Textul ce apare la ALT trebuie s indice (de obicei) funcia acelei imagini (mai mult dect descrierea ei) avnd n vedere c trebuie folosit cnd imaginea nu e ncrcat (i nu mai apare sugestia dat de coninutul acesteia). Atributul WIDTH="..." rezerv un spaiu (n pixeli) pentru limea imaginii. Dac imaginea este de alt lime, va fi scalat (redimensionat) astfel nct s ncap n (sau s umpl) spaiul rezervat; iar HEIGHT="..."rezerv un spaiu (n pixeli) pentru nlimea imaginii. Dac imaginea este de alt nlime, va fi scalat/redimensionatcorespunztor. Atenie, ns: redimensionarea se face dup algoritmi extrem de simpli i rezultatele snt extrem de departe de cele obinute cu unelte adecvate. Utilitatea acestor atribute apare atunci cnd se specific dimensiunile reale (adevrate) ale imaginii. n acest fel browserul va rezerva un spaiu corect n pagin, dnd nc de la nceput imaginea reprezentrii paginii respective. nimic SRC=URI (locaia imaginii) ALT=Text (text alternativ) LONGDESC=URI (link la o descriere lung) WIDTH=Length (limea imaginii) HEIGHT=Length (nlimea imaginii) USEMAP=URI (figur senzitiv - client-side image map) ISMAP (figur senzitiv - server-side image map) ALIGN=top|middle|bottom|left|right (alinierea imaginii) BORDER=Length (grosimea marginii) HSPACE=Pixels (spaiu liber lsat pe orizontal) VSPACE=Pixels (spaiu liber lsat pe vertical) atribute comune

Atributul VSPACE="..." stabilete spaiul dintre imagine i textul aflat deasupra i sub imagine (pe vertical), iar HSPACE="..." stabilete spaiul dintre imagine i textul aflat la stnga i la dreapta imaginii (pe orizontal). Snt considerate depite, recomandndu-se utilizarea style-sheet-urilor n locul lor. Atributul BORDER="..." deseneaz o margine de grosimea specificat, n jurul imaginii i dac imaginea este activ, face marginea de asemenea activ. Dac se specific BORDER=0, marginea va fi eliminat chiar dac imaginea este o ancor/link spre alt resurs. De exemplu: <A HREF="reference.html"> <IMG SRC="icon/reference.gif" ALT="" WIDTH=90 HEIGHT=90 BORDER=0>Web Authoring Reference </A> are ca efect afiarea unei imagini (din fiierul reference.gif, care se gsete n subfolderul icon al folderului curent) i a unui text, transformarea acestora ntr-o ancor (link) care indic spre documentul reference.html, dar fr ca imaginea s aib margine n jurul ei, ca n figura urmtoare: Web Authoring Reference Atributul LONGDESC d o descriere mai lung a imaginii i poate fi folosit acolo unde este necesar, de exemplu, ca alternativ la reprezentarea uzual a imaginii (n browserele ce suport doar text sau cele utilizate de persoanele care nu vd). Exemple: 1. Inserarea unei imagini i specificarea unui text (alternativ) care s se afieze dac nu se poate afia imaginea sau ca explicaie (tooltip) cnd se pune cursorul mouse-ului pe ea, se poate face cu secvena: <P> <IMG SRC="bear.jpg" WIDTH="201" HEIGHT="132" BORDER=0 ALT="A big, brown bear">

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

2.

Aceeai imagine inserat n cadrul unui paragraf cu text: <HTML> <HEAD> <TITLE>My Jungle Home Page</TITLE> </HEAD> <BODY> <FONT FACE="ARIAL" SIZE=2 COLOR="#339966"> <H1>The Scariest Jungle</H1> </FONT> <FONT FACE="ARIAL" SIZE=2> Follow the map to see <I>lions</I> and <I>tigers</I> and <I>bears</I>. <P> <IMG SRC="bear.jpg" WIDTH="201" HEIGHT="132" BORDER=0 ALT="A big, brown bear"> <P><B>Oh, my!</B> </FONT> </BODY> </HTML>

i va arat astfel:

3. Alinierea imaginilor n text

Imaginile pot fi aliniate n document cu ajutorul atributului ALIGN, cel care permite controlul alinierii imaginii cu linia de text alturat. Exist urmtoarele valori posibile pentru controlul alinierii. ALIGN=TOP, care aliniaz imaginea cu partea cea mai de sus a rndului ALIGN=MIDDLE, care aliniaz imaginea cu mijlocul rndului (de fapt cu linia de baz) ALIGN=BOTTOM, care aliniaz imaginea cu cea mai de jos parte a rndului sau cu partea de jos a celei mai mari imagini de pe rnd ALIGN=TEXTOP care aliniaz partea de sus a imaginii cu cele mai nalte caractere din rnd 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 rnd ALIGN=LEFT i ALIGN=RIGHT care aliniaz imaginea n stnga, respectiv dreapta paginii 4. Imagini flotante Imaginile i obiectele pot apare direct n text (in-line) sau pot fi flotante pe o margine a paginii alternd astfel temporar marginile textului care curge pe lng aceasta. Elementul care determin modul n care o va face este BR. Fie urmtoarea situaie, n care avem alturate o imagine i un text care are o linie terminat cu BR: ********* ------| | ------| image | --<BR> | | ********* Elementul BR are ca efect inserarea n punctul n care apare a unei noi linii. Dar, prin valoarile pe care le poate lua atributul su clear determin i modul n care se va afia i textul n continuare (unde va apare noua linie de text dup acest element). Valorile pe care le poate lua clear snt: clear = none|left|right|all Semnificaia fiecrei valori este: 1. none: Noua linie va ncepe normal. Este valoarea implicit. n acest caz, pentru situaia din figura de mai sus, noua linie (marcat cu semne +) va ncepe imediat sub cea intrerupt, la marginea din dreapta a imaginii: ********* ------| | ------| image | --<BR> | | +++++++ ********* 2. left: Noua linie va ncepe n prima poziie disponibil SUB obiectul flotant, la marginea din stnga. n acest caz, pentru situaia din figura de mai sus, noua linie (marcat cu semne +) va ncepe sub imagine, de la marginea din stnga: ********* ------| | ------| image | --<BR clear="left"> | |

********* ++++++++++++++++++ 3. right: Noua linie va ncepe n prima poziie disponibil SUB obiectul flotant, la marginea din dreapta. 4. all: Noua linie va ncepe n prima poziie disponibil SUB obiectul flotant, la oricare margine. n acest caz, pentru situaia din figura de mai sus, noua linie (marcat cu semne +) va ncepe asemntor situaieiclear=left: ********* ------| | ------| image | --<BR clear="all"> | | ********* ++++++++++++++++++ 5. Includerea de obiecte generale (elementul OBJECT). ncepnd cu HTML 4.0 se restrnge utilizarea lui <IMG> pentru inserarea imaginilor, chiar dac rmne permis. Explicaia este dat de ncercarea de generalizare a procesului de inserare i a altor obiecte (cum snt, de exemplu, appleturile) sub un singur tag: OBJECT. Pn la HTML 4.0 fiecare tip de resurs ce se putea insera n paginile HTML i avea propriul tag. Aceast abordare introducea cteva dezavantaje majore: nu permitea extensii ale altor tipuri de resurse fiecare tag nu se putea folosi dect cu acel tip de resurs (de exemplu o imagine se insera cu IMG, un applet cu APPLET, etc) se introduceau probleme de accesibilitate, tagurile vechi neindicnd mai nimic despre resursa care se ingloba n pagin, browserul nefiind capabil s determine dac poate sau nu s prezinte resursa respectiv Pentru a rezolva aceste probleme s-a introdus elementul OBJECT care ofer o soluie general de inserare a unui obiect generic n paginile HTML. El permite specificarea tuturor caracteristicilor necesare pentru a fi prezentate de un browser: codul surs, valori iniiale, date necesare la execuie. n acest accepiune termenul de obiect denot ceva ce se insereaz n pagina HTML i are ca sinonime: applet, plug-in, media handler, etc. Astfel funcionalitatea acestor taguri a fost preluat de noul tag, dup schema prezentat n tabelul urmtor: Tipul resursei care se insereaz Imagini (gif, 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 soluie specific i o soluie general. Elementul generic OBJECT va servi i ca soluie pentru implementarea altor tipuri. Sintaxa: <OBJECT>...</OBJECT> Atribute posibile: DATA=URI (adresa de unde se ncarc datele obiectului) CLASSID=URI (locaia implementrii)

 Conine: Coninut n: Descriere:

ARCHIVE=CDATA (fiierele archiv) CODEBASE=URI (adresa de baz pentru CLASSID, DATA, ARCHIVE) WIDTH=Length (limea obiectului) HEIGHT=Length (nlimea 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 afia n timpul ncrcrii) TABINDEX=NUMBER (poziia n ordinea de parcurgere cu Tab) DECLARE (obiectul nu se instaniaz) ALIGN=[ top | middle | bottom | left | right ] (alinierea obiectului) BORDER=Length (grosimea marginii) HSPACE=Pixels (spaiu lsat orizontal) VSPACE=Pixels (spaiu lsat vertical) atribute comune elemente PARAM urmate de elemente de tip bloc i/sau elemente de tip inline HEAD, elemente de tip inline, elemente de tip bloc, cu excepia lui PRE

OBJECT intenioneaz s nlocuiasc tagurile specifice IMG i APPLET, precum i tagurile proprietare EMBED i BGSOUND (definite de anumite browsere i suportate doar de ele!) care produc multe neajunsuri i erori. Cu el se includ imagini, clipuri video, appleturi Java, elemente VRML. Aproape toate atributele tag-ului <IMG> se pot folosi i cu <OBJECT>. Modul de utilizare este identic. O descriere mai amnunit este prezentat ntr-un paragraf anterior.

4.5. Imagini senzitive Imaginile senzitive permit specificarea unor regiuni ale unei imagini (sau obiect, mai general) crora s li se asocieze o aciune specific (de exemplu ncrcarea unei resurse, lansarea unui program, etc). Cnd regiunea este activat de utilizator se execut aciunea respectiv. O imagine senzitiv este creat prin asocierea unui obiect cu o specificaie a zonelor suprafeei obiectului respectiv. Exist dou tipuri de imagini senzitive: Client-side. Cnd utilizatorul activeaz o regiune a unei imagini senzitive de acest tip cu mouse-ul coordonatele punctului respectiv (n pixeli) snt interpretate de ctre agentul utilizatorului (browserul acestuia). Navigatorul selecteaz o legtur ce a fost specificat pentru regiunea activat i o urmeaz. Server-side. Cnd utilizatorul activeaz o regiune a unei imagini senzitive de acest tip cu mouse-ul coordonatele punctului respectiv (n pixeli) snt trimise agentului serverului (programului de pe server) i care e specificat de atributul HREF al elementului A. Programul de pe server este cel care interpreteaz aceste coordonate i realizeaz o anumit aciune. De obicei snt preferate imaginile senzitive client n faa celor de tip server-side din dou motive: snt accesibile i celor ce folosesc browsere fr faciliti grafice i ofer un feed-back imediat, indiferent dac se pointeaz ntr-o zon activ sau nu. 1. Imagini senzitive client-side Acest tip de imagini senzitive realizeaz senzitivitatea imaginii prin legturi n textul care nsoete figura i care desemneaz zonele active din figur. Aceast metod nu numai c este mult mai rapid dect cea care implic programe care ruleaz pe server, dar permite i ceva ce varianta cu imagini senzitive de tip sever-side nu putea realiza: utilizarea figurilor senzitive i n navigatoarele care lucreaz n mod text deoarece textul care descrie figura este cel care definete maparea figurii. Imaginea senzitiv de tip client-side poate fi definit cu unul dintre elementele IMG, OBJECT sau INPUT. Cu aceasta se asociaz o hart de legturi ce se definete cu elementul MAP. Legtura dintre cele dou componenete se realizeaz prin intermediul atributului USEMAP al elementului cu care se definete imaginea senzitiv. Prezena atributului USEMAP la definirea unui obiect (cu OBJECT) impune ca obiectul respectiv (ce este inclus) s fie o imagine. Mai mult, cnd acesta are o hart asociat cu el, browserele trebuie s implementeze aciunea cu obiectul respectiv exclusiv n termenii imaginii senzitive, putnd fi chiar omis ncrcarea sau procesarea coninutului propriu-zis al acestuia (dac nu poate fi fcut de browserul respectiv). Fiecare element MAP poate conine cel puin unul dintre urmtoarele elemente: 1. Unul sau mai multe elemente AREA. Acestea nu au coninut dar specific regiunile geometrice ale hrii asociate cu imaginea i legturile asociate cu fiecare regiune n parte. De notat c atunci cnd aceast metod este folosit elementul MAP nu afieaz nimic. Autorii trebuie s ofere un text alternativ pentru fiecare poriune definit cu AREA, utiliznd atributul ALT. 2. Coninut de tip bloc (block-level). Acesta va include elemente A ce specific regiunile geometrice ale hrii i legturile asociate cu fiecare regiune n parte. De notat c atunci cnd se folosete aceast metod elementul MAP poate fi afiat de browser, rezultnd o metod de creare a unor documente mai accesibile dect cea descris anterior. Dac dou sau mai multe regiuni se suprapun, elementul definit n regiunea ce apar mai devreme n document este cel luat n consideraie.

A. Elementul MAP Sintaxa: <MAP>...</MAP> Atribute posibile: Conine: Coninut n: Descriere: Acest element definete o imagine senzitiv de tip client-side pentru a fi utilizat cu un element IMG sau OBJECT. Atributul NAME este folosit ca ancor pentru atributul USEMAP al elementelor IMG sau OBJECT. n timp ce MAP poate defini imagini senzitive incluse n alte fiiere, browserele suport de obicei numai imagini care au definit harta de legturi cu MAP doar n acelai fiier cu imaginea. Iniial MAP a fost definit s aib asociat unul sau mai multe elemente AREA care s specifice coordonatele unei regiuni active (clicabile). HTML 4.0 extinde acest element astfel nct s poat avea ca atribute unul sau mai multe elemente de tip bloc ca o alternativ la utilizarea elementelor de tip AREA. Combinate cu OBJECT acestea permit o alternativ cu coninut mai bogat la imagini. Dar nu toate browserele suport acestea variant (cu OBJECT), astfel c varianta cu IMG este mult mai sigur. Cnd MAP se folosete cu OBJECT, coninutul acesteia nu este afiat de browser. B. Elementul AREA Sintaxa: <AREA> Atribute posibile: Conine: Coninut n: Descriere: elementul MAP nimic SHAPE = [ rect | circle | poly | default ] (forma regiunii) COORDS=Coords (coordonatele regiunii) HREF=URI (resursa indicat de legtur) TARGET=FrameTarget (frame-ul n care se ncarc legtura) NOHREF (regiune inactiv) ALT=Text (text alternativ) TABINDEX=Number (poziia n ordinea de parcurgere cu TAB-ul) ONFOCUS=Script (regiunea a primit focusul) ONBLUR=Script (regiunea a pierdut focusul) atribute comune elemente de tip inline, elemente de tip bloc (block-level) Unul sau mai multe elemente AREA, sau unul sau mai multe elemente de tip bloc NAME=CDATA (numele hrii) atribute comune

Acest element definete o regiune ntr-o imagine senzitiv. Fiecare regiune este o bucat de imagine care are asociat a alt aciune cnd se face clic cu mouse-ul pe ea. Atributele SHAPE i COORDS specific partea din imagine ce este inclus n acea regiune. Valoarea implicit este rect care definete un dreptunghi folosind COORDS="left, top, right, bottom". Alte valori ale lzui SHAPE: default, specific toat imaginea; circle, specific o regiune circular folosind COORDS="center-x, centery, radius"; poly, specific o regiune poligonal folosind COORDS="x1, y1, x2, y2, ..., xN, yN".

Valorile coordonatelor snt relative la colul stnga-sus i snt exprimate n pixeli sau procente. Atributul HREF specific o legtur la o alt resurs (ca de exemplu un document HTML sau o imagine JPEG). TITLE poate fi folosit pentru a descrie pe scurt coninutul legturii i se folosete ca tool-tip. Atributul boolean NOHREF indic faptul c regiunea respectiv nu are legtur asociat. Atributul ALT ofer text alternativ pentru cazul n care nu se ncarc imaginea. Se recomand ca acesta s descrie funcia i nu regiunea. Atributul TARGET este folosit cu frame-uri pentru a indica n ce frame se ncarc resursa indicat de legtur. Dac numele indicat nu exist se va folosi o fereastr nou. Numele speciale de frame-uri ncep cu underscore (liniua de subliniere): _blank, indic fereastr nou _self, indic frame-ul curent _parent, indic frame-ul parinte al celui curent _top, indic o fereastr nou, fr frame-uri

Atributul ACCESSKEY specific un caracter unic UNICODE folosit ca tast de activare (shortcut) pentru urmrirea legturii. TABINDEX specific un numr ntre 0 i 32767 care indic ordinea de parcurgere cu tasta TAB. O regiune cu TABINDEX=0 sau fr TABINDEX va fi vizitat dup toate elementele cu o valoare pozitiv a acestui atribut. Cu ct valoarea pozitiv este mai mic cu att regiunea va fi vizitat mai devreme. n caz de ambiguitate elementul ce apare mai nti n document are prioritate. AREA acdept n plus fa de evenimentele uzuale (core) acceptate de majoritatea elementelor i atribute folosite de scripturile client: ONFOCUS, ce apare cnd regiunea primete focusul; ONBLUR, ce apare cnd regiunea pierde focusul.

Exemplu: Acest exemplu definete o hart numit mymap ale crei zone active (3) snt dreptunghiuri care indic spre trei adrese diferite, fiecare avnd i alternative pentru cazul cnd imaginea nu este ncrcat: <MAP NAME=mymap> <AREA HREF="/reference/" ALT="HTML and CSS Reference" COORDS="5,5,95,195"> <AREA HREF="/design/" ALT="Design Guide" COORDS="105,5,195,195"> <AREA HREF="/tools/" ALT="Tools" COORDS="205,5,295,195"> </MAP> Aceast hart este folosit cu imaginea ncrcat din fiierul sitemap.gif, de dimensiuni 300 pixeli x 200 pixeli, plasat n documentul HTML cu tagul: <IMG SRC="sitemap.gif" ALT="Site map" USEMAP="#mymap" WIDTH=300 HEIGHT=200> Exemplu: Acest exemplu folosete dou imagini, de tipuri diferite, a doua fiind o alternativ a primeia n cazul n care aceasta nu este suportat. Ambele imagini partajeaz o hart comun care este inclusa n fiecare dintre elementele definite cu OBJECT. Elementul MAP conine i o list de legturi de meniu care snt afiate dac browserul nu ncarc imaginile: <OBJECT DATA="sitemap.png" USEMAP="#map" TYPE="image/png" TITLE="Sitemap" WIDTH=300 HEIGHT=200> <OBJECT DATA="sitemap.gif" USEMAP="#map" TYPE="image/gif" TITLE="Site map" WIDTH=300 HEIGHT=200> <MAP NAME=map> <UL> <LI><A HREF="/reference/" COORDS="5,5,95,195"> HTML and CSS Reference </A></LI> <LI><A HREF="/design/" COORDS="105,5,195,195"> Design Guide </A></LI> <LI><A HREF="/tools/index.html" COORDS="205,5,295,195"> Tools </A></LI> </UL> </MAP> </OBJECT> </OBJECT> n acest mod, maparea figurii (i transformarea ei ntr-o imagine senzitiv) se realizeaz n urmtorii pai: a). Definirea legturilor Exemplu: Pentru o bar de butoane: <UL> <LI><A HREF=" Editorial.html">Editorial</A> <LI><A HREF=" Index.html">Index</A> <LI><A HREF=" Presa.html">Presa</A>

<LI><A HREF=" Oaspei.html">Oaspei</A> </UL> b). Adugarea figurii: <IMG SRC=logo.gif> <UL> <LI><A HREF="Editorial.html">Editorial</A> <LI><A HREF="Index.html">Index</A> <LI><A HREF="Presa.html">Presa</A> <LI><A HREF="Oaspei.html">Oaspei</A> </UL> </IMG> c). Adugarea atributul SHAPE pentru a indica localizarea i forma zonelor active. Valorile lui snt cele cunoscute din meniurile grafice de selecie: SHAPE="default" pentru selecia implicit pentru a defini un cerc de raz r, cu centrul n pentru dreptunghi (x,y stnga sus, l lime, h pentru poligon determinat de punctele xi,yi SHAPE="circle x,y,r" x,y. SHAPE="rect x,y,l,h" nlime) Exemplu: <IMG SRC=logo.gif> <UL> <LI><A HREF="Editorial.html" SHAPE="rect 0,0,100,100"> Editorial</A> <LI><A HREF="Index.html" SHAPE="rect 100,0,100,100"> Index</A> <LI><A HREF="Presa.html" SHAPE="rect 200,0,100,100"> Presa</A> <LI><A HREF="Oaspei.html" SHAPE="rect 300,0,100,100"> Oaspei</A> </UL> </IMG> 2. Imagini senzitive server-side Dac harta imaginii senzitive este mult prea complicat (i, implicit, dificil de descris cu metoda anterioar) se poate lsa sarcina aceasta pe seama serverului. Imaginile senzitive de scest tip lucreaz cu ajutorul unui script CGI (un program rezident pe server). Cnd navigatorul activeaz o legtur de pe o imagine senzitiv, apeleaz de fapt (indirect) un program special (dedicat acestei aciuni) din folderul (directorul) cgi-bin al serverului cruia i trimite coordonatele (x,y) ale punctului n care a fost activat imaginea (unde s-a fcut clic cu mouse-ul). Programul special pentru imaginile mapate caut ntr-un fiier-hart unde snt stabilite corespondenele ntre diversele regiuni ale imaginii i resursele/documentele care snt apelate. Face apoi cteva calcule pentru a vedea ce pagin s ncarce i ncarc pagina. Din cauza naturii grafice a imaginilor senzitive, ele pot fi "vzute" numai de navigatoarele grafice. De fapt dac se ncearc s se vad o astfel de imagine senzitiv cu un navigator care lucreaz numai n modul text (de pild Lynx) nu se poate vedea nici mcar c o astfel de imagine exist. SHAPE="polygon x1,y1,x2,y2..."

Prima grij deci, dac se utilizeaz o imagine senzitiv, este s se creeze un text echivalent pentru utilizatorii care se conecteaz n modul text. Ca i n cazul altor scripturi CGI, fiecare server are o alt metod de implementare a maprii imaginilor, mai mult chiar, metodele pot diferi chiar pentru serverele de pe aceeai platform. De pild, serverele de tip CERN i NCSA utilizeaz metode diferite pentru implementarea imaginilor senzitive. Totui, toate serverele utilizeaz aceleai elemente de baz: Marcarea cu tag-uri HTML a imaginii (n document) pentru a arta c aceasta este o imagine senzitiv. Scrierea unui fiier de mapare a imaginii, care va specifica legtura ntre diferite regiuni ale imaginii i URL-urile documentelor Web la care acestea fac referin. Un script CGI (program) n directorul cgi-bin care le ajut s funcioneze mpreun. Procesul de realizare a unei imagini senzitive de tip server side, pentru diverse servere HTTP mai cunoscute i utilizate (CERN i NCSA) este descris n continuare. A. Tag-urile imaginii senzitive Primul pas este alegerea unei imagini care satisface anumite criterii pentru a fi potrivit ca imagine senzitiv. Cele mai potrivite snt cele care conin arii vizuale distincte care pot fi selectate individual (de pild, imagini care pot fi cu uurin mprite n poligoane). Fotografiile snt mai dificil de mapat deoarece elementele tind s aib o anumit continuitate (prin tonurile de culoare, de pild) sau snt de forme complicate. Marcarea imaginii n documentul HTML se face de forma: <a href="http://nume_server/cgi-bin/nume_script/cale/fiier_de_mapare_imagine.map"> <img src="nume_imagine_senzitiv.jpg" ISMAP alt="mesaj pentru text"> </a> unde: <a> i </a> snt etichetele nevide pentru ancora imagine href = indic fiierul de mapare a zonelor de pe imagine cu diferite resurse http = protocolul de aducere a fiierului cgi-bin = directorul n care snt rezidente script-urile

nume_script = numele script-ului care face legtura ntre fiierul imagine.map, care conine maparea imaginii i documentele HTML asociate legturii (htimage pentru serverul CERN sau imagemap pentru serverul NCSA) imagine.map = fiierul care conine maparea imaginii ISMAP = tag-ul care declar c imaginea este senzitiv <img> = eticheta pentru imagine, cu atributul src cel care specific fiierul imagine

Exemplu: Imaginea pentru a fi prelucrat este logo.jpg. Marcarea ei n documentul HTML s-a fcut cu: <a href="http://www.comp-craiova.ro/cgibin/htimage/maps/poza.map"> <img src="logo.jpg" ISMAP alt="CSD Site" border=0 height=160 width =500></a> Tag-ul border a luat aici valoarea zero. Atributele height i width declar nlimea respectiv limea imaginii pentru ca navigatorul s rezerve loc pentru imagine i s continue s afieze textul chiar dac imaginea nu este nc adus. Dac valorile specificate snt mai mici dect dimensiunea imaginii, aceasta este scalat pentru spaiul rezervat. B. Maparea imaginii Procesul de mapare nseamn alegerea regiunilor active i a fiierelor (sau documentelor HTML) apelate, gsirea coordonatelor regiunilor desemnate i scrierea fiierului de mapare (poza.map, n cazul nostru). Forma fiierului de mapare depinde de scriptul CGI utilizat de server. Pentru serverul CERN fiierul arat de forma: default URL circle (x,y) r URL rectangle (x,y) (x,y) URL polygon (xl,yl) (x2,y2) ... (xn,yn) URL Pentru serverul NCSA fiierul va fi de forma: default URL circle URL x,y r rectangle URL x,y x,y polygon URL xl,yl x2,y2 ... xn,yn point URL x,y Semnificaia este: pentru cerc: coordonatele centrului i raza (m pixeli) pentru dreptunghi: colul stnga sus i dreapta jos pentru poligon: coordonatele fiecrui nod pentru puncte: coordonatele punctelor

Originea sistemului de coordonate (0,0) se afl n colul din stnga sus al imaginii iar direcia pozitiv a axei Oy este n jos. Exemplu: default /diropt/fisopt1.html default rect (16,65) (122,100) /diropt/fisopt2.html rect (319,68) (431,98) /diropt/fisopt3.html poly (92,158) (149,85) (302,90) (375,156) (95,154) /diropt/fisopt4.html Observaii: 1. URL-ul implicit (default) este utilizat ori de cte ori mouse-ul activeaz o regiune care nu trimite spre un anumit document (n acest caz unul dintre dreptunghiuri sau regiunea trapezoidal).

2. Ordinea regiunilor din fiierul de mapare conteaz. Dac de pild dou regiuni selectate se suprapun parial (sau total) regiunea menionat mai la nceputul fiierului are prioritate la activare. 3. Punctele (n maprile NCSA) permit specificarea faptului c un clic care nu cade direct pe o anumit regiune, va activa cel mai apropiat punct definit n fiierul de mapare care apare pe imagine. Includerea opiunii default ntr-un fiier pentru serverul NCSA presupune c nu vei introduce nici un punct activ deoarece existena unui asemenea punct inhib opiunea default. Maparea imaginii se poate face fie manual, ncrcnd imaginea ntr-un program care s permit notarea coordonatelor zonelor de interes, fie automat, utiliznd unul din produsele care permit desenarea regiunilor selectate cu ajutorul mouse-ului. Programe de acest tip: Mapedit (sub Windows) HotSpots for Windows, WebMap for Macintosh sau Mapedit (pentru X). Toate permit salvarea fiierului .map fie n format CERN fie n format NCSA. C. Script-ul Mai nti scriptul (programul) pentru maparea imaginilor trebuie s fie instalat n directorul cgi-bin (htimage pentru CERN sau imagemap pentru NCSA) i apoi fiierul poza.map (creat anterior) trebuie depus ntr-un director (s zicem maps) aflat la acelai nivel cu cgi-bin. Legtura ntre scriptul htimage i fiierul de mapare a imaginii se face atand calea ctre acesta din urm imediat dup numele scriptului (htimage). Exemplu: <a href="http://www.comp-craiova.ro/cgi-bin/htimage/maps/poza.map"> <img src="logo.jpg" ISMAP> </a> Activarea unei zone a imaginii senzitive nseamn transmiterea ctre script a coordonatelor punctului activat. Coordonatele snt exprimate ca valori (n pixeli) relative la colul stnga-sus al imaginii. Modalitatea prin care se transmit aceste coordonate este urmatoarea: se derivez o nou adres (URI) din cea specificat de atributul href a elementului A prin adugarea caracterului ? urmat de coordonatele x i z, separate de virgul. Legtura care se urmeaz este dat de aceast nou adres. De exemplu, dac pentru imaginea senzitiv definit astfel: <A href="http://www.acme.com/cgi-bin/competition"> <IMG src="game.gif" ismap alt="target"> </A> se face click n punctul de coordonate x=10, y=27, noua adres derivat ce va fi folosit pentru navigare va fi: http://www.acme.com/cgi-bin/competition?10,27

4.6. Alte elemente legate de text i imagini 1. Comentariile n documentele HTML Sintaxa: <!-- Acesta este un comentariu --> Descriere: n toate documentele HTML se pot introduce comentarii. Acestea vor fi complet ignorate de navigatoare la afiare/interpretare. Comentariile ncep cu irul <!--, pot conine orice caracter i se termin la apariia irului -->. Ca regul general trebuie plasat fiecare comentariu pe o linie separat i este preferabil sa se evite n interiorul comentariului utilizarea caracterelor speciale de tipul <, >, & sau !. Fiecare rnd de comentariu trebuie formatat n acest fel. Nu este indicat s se includ alte tag-uri HTML ntre tag-urile de comentariu. 2. Linii orizontale de demarcare (elementul HR) Sintaxa: <HR> Atribute posibile: Conine: Coninut n: APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DEL, DD, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH Descriere: Tag-ul <HR> poate fi vid i are ca efect crearea unei linii orizontale pe pagin. Liniile orizontale pot fi utilizate pentru separarea diferitelor seciuni ale unei pagini Web sau pentru punerea n eviden a unor poriuni de document cum ar fi liste, meniuri, informaii de contact. Atributul ALIGN specific alinierea n apgin, SIZE determin grosimea (nlimea), iar WIDTH lungimea pe orizontal (poate fi i procent din limea paginii). NOSHADE este un atribut care indic faptul c linia este fr efectul tridimensional dat de umbr, asemntoare cu o linie solid. Liniile se pot substitui i cu imagini care ndeplinesc acelai rol. nimic ALIGN=[ left | center | right ] (alinierea orizontal) NOSHADE (linie solid) SIZE=Pixels (nlimea linei) WIDTH=Length (lungimea liniei) atribute core evenimente comune

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

Se poate nlocui linia desenat de navigator cu o imagine, ca mai jos:

3. Fundalul unui document Sintaxa: <BODY BGCOLOR=#FFFFCA> <BODY BACKGROUND="imagine.gif"> Descriere: Cel mai simplu mod de a schimba fundalul se realizeaz utiliznd o culoare de fond. Aceasta poate fi setat n tag-ul <BODY> prin atributul BGCOLOR. Culoarea trebuie specificat n RGB pe 8 bii. Fiecare culoare folosit la sinteza aditiv RGB poate avea o valoare ntre 0 i 255 (0 0 0 fiind negru i 256 256 256 fiind alb). Singura dificultate este c valoarea lui BGCOLOR trebuie dat n hexazecimal. Exemplu: <BODY BGCOLOR=#FFFFCA> <BODY BGCOLOR=<#FFFFFO> Pentru fundaluri pot fi folosite i imagini sau, mai bine, o singur imagine aezat alturat de mai multe ori pn la acoperirea complet a fundalului. Problema este alegerea unei imagini care alturat sie nsi s dea impresia de continuitate. sau

4. Culoarea textului i a legturilor Setul de atribute care urmeaz ofer un control crescut asupra felului n care apare afiat textul documentului HTML i legturile. Atribut=Valoar e TEXT LINK VLINK ALINK Semnificaie Controleaz culoarea ntregului text din document Controleaz culoarea legturilor nevizitate (implicit, albastru) Controleaz culoarea legturilor vizitate (implicit, purpuriu) Controleaz culoarea unei legturi asupra creia este apsat butonul mouse-lui (implicit, rou)

Exemplu: <body bgcolor="#fffff0" text="#000000" link="#00009c" vlink="#ffffca" alink="#ffff00"> Se pot obine efecte de culoare cu o succesiune de tag-uri de forma: <BODY BGCOLOR="diverse_coduri de culoare"> care determin schimbarea dinamic a culorii fundalului. Utilizate insistent, aceste efecte simple (ieftine) pot deveni iritante pentru vizitator.

Capitolul 5. Utilizarea tabelelor n limbajul HTML Din elementele noi introduse de HTML 3.0, tabelele reprezint primul care a ajuns pe Web. Ele snt suportate de Netscape Navigator, ncepnd cu versiunea 1.1, iar de ctre Microsoft Internet Explorer, ncepnd cu versiunea 2.0. Utilizarea fundamental a tabelelor este aceeai cu a celorlalte forme de comunicare: tabelele se folosesc pentru a afia informaii n dou dimensiuni i nu liniar, adic informaia este mai sugestiv dac este prezentat sub forma unei matrici cu rnduri i coloane. n afara acestei utilizri, pn la apariia style-sheet-urilor, tabelele se utilizau (n unele cazuri) i pentru a produce efecte speciale, cum ar fi: poziionri n pagin ale textului sau al imaginilor grafice, poziionri pe rnd ale imaginilor, poziionri ale elementelor grafice n interiorul textului, etc. Avnd n vedere c pot apare probleme n aceste cazuri (la browserele non-vizuale sau cnd paginile snt proiectate pentru displayuri mai mari dect cel pe care este afiat ori cnd fontul utilizat la vizualizare difer ca mrime de cel presupus la proiectare), pentru a le minimiza, se recomand n HTML 4.0 folosirea style-sheet-urilor pentru controlul aranjrii n pagin (controlul layout-ului) Elementele luate n consideraie de HTML 4.0 pentru codarea tabelelor snt: Explicaia (elementul CAPTION), care ofer o scurt descriere a coninutul tabelului. Se poate oferi i o descriere mai larg (prin intermediul atributului SUMMARY) pentru cazul cnd browserul este utilizat de persoane care folosesc alfabetul Braille sau este un browser ce sintetizeaz voce Rndurile tabelului care pot fi grupate n seciuni de antet/head, explicaii/footer i corp/body (prin intermediul elementelor THEAD, TFOOT i respectiv TBODY). Grupurile de rnduri ofer informaie structural suplimentar i pot fi utilizate de browsere astfel nct s sugereze mai bine structura tabelului, de exemplu permind deplasarea (scroll) individual a acestor seciuni sau repetnd informaia cuprins n header i/sau footer pe fiecare pagin (eventual tiprit) a unor tabele mai lungi. Grupuri de coloane (care ofer informaie structural suplimentar) pot fi definite la nceputul definiiei unui tabel (prin intermediul elementelor COLGRUP i COL), dnd posibilitatea browserelor s afieze tabelele incremental, fr a mai fi nevoite s atepte tot coninutul tabelului pentru a-l afia. Capul de tabel (elementul TH), att n cazul c este aezat pe rnd ct i n cazul aezrii pe coloan, va fi scos n eviden fa de restul tabelului. Celulele tabelului (elementul TD), adic dreptunghiurile individuale. Acestea se pot ntinde pe mai multe rnduri i/sau coloane. HTML 4.0 permite ataarea unei etichete fiecrei celule astfel nct browserele non-vizuale s poat comunica mai uor informaia din celul. Datele din tabel, adic valorile nscrise n celulele tabelului. Specificaiile HTML 4.0 permit ca n celulele tabelelor s fie introdus orice element HTML: text simplu, text (pre)formatat, imagini, legturi, formulare, alte tabele, etc.

1.

Descrierea tabelelor (elementul TABLE)

Descrierea unui tabel se face cu elementul TABLE. Acesta conine toate elementele ce specific titlul, rndurile, coninutul i formatul acestora. Tabelele snt specificate n HTML rnd cu rnd, fiecare rnd coninnd definiii pentru fiecare din celulele care l formeaz. Prin urmare, pentru a defini un tabel se ncepe prin a defini rndul din partea de sus, celul cu celul, apoi se definete al doilea rnd, celul cu celul .a.m.d. Coloanele snt calculate automat pe baza numrului de celule care snt n fiecare rnd. Perechea <TR>...</TR> definete nceputul, respectiv sfritul rndului, perechea <TH>...</TH> definete o celul cap de tabel pe acest rnd, iar perechea <TD>...</TD> definete o celul de date din rnd. 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 uurarea nelegerii codului de la o prim privire. Marea majoritate a navigatoarelor ignor spaiile libere i caracterul <CR>. O excepie totui: atunci cnd inserai o imagine ntr-una din celulele tabelului, pentru a obine plasarea corect a imaginii n toate browserele, se recomand punerea tag-urile n acelai rnd. Exemplu: <TD><IMG SRC="A.GIF"></TD> La afiarea unui tabel, un browser trebuie s realizeze urmtoarele operaii: s fac disponibil sumarul (definit cu summary) utilizatorului s afieze titlul (explicaia) tabelului

s afieze antetul/headerul tabelului, apoi footerul, dac snt specificate. Locul n care apar snt bine definite (de exemplu la nceputul/sfritul fiecrei pagini listate) s calculeze numrul de coloane din tabel. Numrul de rnduri se stabilete simplu: numrul de elemente TR coninute de TABLE. s grupeze coloanele n conformitate cu specificaiile de grupare a coloanelor s afieze celulele rnd dup rnd, grupate n coloanele corespunztoare, ntre header i footer. Browserele vizuale formateaz tabelul utuliznd atributele i specificaiile de stil (style-sheet). n acest fel, modelul de tabel din HTML 4.0 este proiectat astfel nct afiarea acestora s se fac incremental, pe msur ce rndurile tabelului sosesc, fr a atepta ncrcarea complet. Elementul TABLE Sintaxa: <TABLE> ...</TABLE> Atribute posibile: SUMMARY=Text (descrierea pe larg a coninutului i structurii tabelului)

WIDTH=Length (limea tabelului) BORDER=Pixels (limea marginii tabelului)

FRAME=[ void | above | below | hsides | lhs | rhs | vsides | box | border ] (margini externe) Conine: Un element opional CAPTION, urmat de zero sau mai multe elemente COL i COLGROUP, urmat de un element opional THEAD, un element opional TFOOT, i apoi un element sau mai 7multe elemente opionale TBODY. Coninut n: APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH Descriere: Orice tabel ncepe cu tag-ul: <TABLE> i se termin cu </TABLE>, ntre ele fiind coninutul tabelului propriu-zis care poate conine o explicaie cu <CAPTION> i, n esen, un numr oarecare de rnduri definite n principal cu <TR>. CAPTION poate fi urmat, opional, de elemente COL i COLGROUP care specific limea coloanelor i modul de grupare al acestora. Apoi urmeaz THEAD, TFOOT i TBODY care definesc grupurile de rnduri. Un grup de rnduri conine elemente TR ce definesc rndurile individual, care, la rndul lor, conin elemente TH sau TD pentru celulele header sau de date. ntr-un tabel definit cu TABLE este necesar cel puin un element TBODY, dar ambele taguri de definire a acestui element snt opionale dac nu exist dect un element TBODY i nu exist nici un THEAD sau TFOOT. Atributul tag-ului <TABLE> WIDTH indic limea tabelului n pagin dat ca numr de pixeli sau ca procent din spaiul orizontal disponibil. Laimile date n pixeli (n special cele peste 500) ar trebui evitate ntruct, uneori, cauzeaz scroll inutil orizontal. Un numr de atribute specifice tabelelor permit un control mai bun asupra poziiei tabelelor n pagin i asupra textului care (eventual) curge pe lng tabel: RULES=[ none | groups | rows | cols | all ] (margini interne) CELLSPACING=Length (spaierea ntre celule) CELLPADDING=Length (spaierea n interiorul celulelor) ALIGN=[ left | center | right ] (alinierea tabelului) BGCOLOR=Color (culoarea de background a tabelului) atribute comune

Atribut=Valoare ALIGN=LEFT ALIGN=CENTER ALIGN=RIGHT

Semnificaie Aliniaz tabelul cu marginea din stnga a textului; textul va curge pe marginea din dreapta a tabelului Aliniaz tabelul n mijlocul paginii; textul nu va curge prin nici una din prile tabelului Aliniaz tabelul cu marginea din dreapta a textului; textul va curge pe marginea din stnga a tabelului

Browser-ele trateaz n general tabelele ca fiind flotante, coninutul care urmeaz lui TABEL curgnd pe lng el (dac se poate). Pentru a preveni aceast manifestare se poate folosi elementul break <BR CLEAR=all> la sfiritul lui TABLE. <TABLE> mai poate fi folosit mpreun cu atributele UNITS i COLSPEC. UNITS poate avea ca valori PIXELS, EN (implicit) sau procente (RELATIVE) din dimensiunea total a tabelului. Atributul tag-ului <TABLE> FRAME, puin suportat acum de browsere, specific marginile exterioare vizibile ale tabelului. Valorile posibile snt: void nici o margine vizibil above marginea de sus below marginea de jos hsides marginile din stnga i dreapta vsides marginile de sus i jos lhs numai marginea din stnga rhs numai marginea din dreapta box (border) toate marginile

Valoarea implicit este void, dac nu este specificat atributul BORDER cu o valoare pozitiv, caz n care valoarea implicit este box. <TABLE BORDER> este o abreviere foarte bine suportat pentru <TABLE FRAME=border>. Atributul RULES, i el destul de puin suportat de browsere, specific marginile interioare vizibile (ntre celulele tabelului). Valorile posibile snt: none nici o margine interioar vizibil groups numai marginile ntre grupurile de rnduri i coloane rows numai marginile ntre rnduri cols numai marginile ntre coloane all toate marginile interioare

Valoarea implicit este none dac BORDER=0 (sau se folosete atributul no BORDER). Orice alt folosire a lui BORDER are ca efect trecerea lui all ca valoare implicit. Atributul BGCOLOR sugereaz o culoare de background pentru tabel. Poate fi folosit n combinaie cu <FONT COLOR=...>, dar efectele pot fi imprevizibile dac se ia n considerare posibilitatea de suprascriere a acestor atribute de ctre browsere. Metoda recomandat este cea a style-sheet-urilor.

Atributul tag-ului <TABLE> BORDER indic limea chenarului tabelului, CELLSPACING - spaiul dintre celulele tabelului, iar CELLPADDING - spaiul dintre marginile celulelor i coninut. Figura urmtoare 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 urmtorul: <TABLE border="1" summary="This table gives some statistics about... "> <CAPTION><EM>A test table with merged cells</EM></CAPTION> <TR> <TH rowspan="2"> <TH colspan="2">Average <TH rowspan="2">Red<BR>eyes

<TR> <TH>height <TH>weight <TR> <TH>Males <TD>1.9 <TD>0.003 <TD>40% <TR> <TH>Females <TD>1.7 <TD>0.002 <TD>43% </TABLE> i el ar putea arta cu un browser negrafic ca n figura urmtoare: A test table with merged cells /-----------------------------------------\ | | Average | Red | | |-------------------| eyes | | | height | weight | | |-----------------------------------------| | Males | 1.9 | 0.003 | 40% | |-----------------------------------------| | Females | 1.7 | 0.002 | 43% | \-----------------------------------------/

iar cu unul grafic astfel:

2. Explicaia unui tabel (elementul CAPTION) Natura unui tabel (ce conine sau cum se folosete, etc) este descris de elementul CAPTION. Acesta este permis doar imediat dup tagul de nceput al lui TABLE i poate apare maxim o dat n descrierea unui tabel. Acest element permite deducerea rapid structurii unui tabel, ntocmai ca headerele acestuia. Ca o consecin, rezult c este inadecvat ca sumar (descriere mai pe larg) din perspectiva unor utilizatori ai unor browsere nevizuale. De aceea, informaiile adiionale (mai bogate) descriind scopul tabelului i structura lui se ofer prin atributul summary al elementului TABEL. Aceasta este important mai ales la tabelele care nu au explicaii date cu CAPTION. Se recomand s se evite depirea dimensiunilor tabelului n ceea ce privete explicaia, pentru ca aceasta s fie nevoit s fac scroll.

Elementul CAPTION Sintaxa: <CAPTION>...</CAPTION> Atribute posibile: Conine: Coninut n: Descriere: Elementul CAPTION definete o explicaie pentru un tabel. O explicaie bun trebuie s ofere un scurt antet pentru tabel. Pentru tabelele simple poate s fie i un sumar, dar pentru cele mai complexe trebuie completat cu un sumar adevrat, implementat de atributul SUMMARY. Explicaia 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 explicaiile pot fi tratate special de ctre navigatoare. De pild explicaiile pot fi extrase ntr-un fiier separat sau pot fi numerotate. Atributul ALIGN specific modalitatea de aliniere fa de tabel. Valoarea implicit este top. Exemplu: Un exemplu de utilizare a acestui element este dat n cele ce urmeaz: <TABLE> <CAPTION>Common Usenet Abbreviations</CAPTION> <THEAD> ... </TABLE> iar o completare cu un sumar poate arta astfel: <TABLE SUMMARY="This table gives the character entity reference, decimal character reference, and hexadecimal character reference for symbols and Greek letters."> <CAPTION>Symbols and Greek Letters in HTML 4.0</CAPTION> ... </TABLE> 3. Grupuri de rnduri (elementele THEAD, TFOOT i TBODY) Rndurile unui tabel pot fi grupate n cap de tabel (head), legend a tabelului (foot) i una sau mai multe seciuni, utiliznd elementele THEAD, TFOOT i, respectiv, TBODY. Aceast divizare permite browserelor s suporte scrollul corpului tabelului independent de headerul i footerul tabelului, care, la rndul lor, pot fi repetate pe fiecare pagin cnd astfel de tabele se listeaz. Headerul i footerul trebuie s conin informaii despre coloanele tabelului, iar corpul acestuia s conin rndurile de date. Seciunile definite de THEAD, TFOOT i TBODY trebuie s conin acelai numr de coloane. Cnd snt prezente, fiecare element THEAD, TFOOT i TBODY conine grupuri de rnduri. Fiecare astfel de grup trebuie s conin cel puin un rnd definit cu TR. Exemplul urmtor ilustreaz ordinea i structura headerului, footerului i corpurilor unui tabel: <TABLE> TABLE elemente inline ALIGN=[ top | bottom | left | right ] (alinierea explicaiei) atribute comune

<THEAD> <TR> ... informaii de header ... </THEAD> <TFOOT> <TR> ... informaii de footer ... </TFOOT> <TBODY> <TR> ... primul rnd al primului bloc de date ... <TR> ... al doilea rnd al primului bloc de date ... </TBODY> <TBODY> <TR> ... primul rnd al blocului doi de date ... <TR> ... al doilea rnd al blocului doi de date ... <TR> ... al treilea rnd al blocului doi de date ... </TBODY> </TABLE> TFOOT trebuie s apar nainte de TBODY n cadrul lui TABLE, astfel ca browserele s poat interpreta (afia) footerul nainte de recepionarea tuturor (potenial) numeroaselor rnduri de date. n cele ce urmeaz se sintetizeaz ce taguri snt obligatorii i care pot fi omise: Tagul de start al lui TBODY este necesar ntotdeauna cu excepia cazului cnd tabelul conine doar un grup de rnduri definit cu un singur TBODY i nu apare nici un header sau footer. Tagul de final al lui TBODY poate fi omis ntotdeauna fr probleme. Tagurile de start pentru THEAD i TFOOT snt necesare cnd apar seciunile descrise de acestea, dar cele de final pot fi omise i ele fr probleme. Astfel, tabelul anterior poate fi descris mai pe scurt astfel: <TABLE> <THEAD> <TR> ... informaii de header ... <TFOOT> <TR> ... informaii de footer ... <TBODY> <TR> ... primul rnd al primului bloc de date ... <TR> ... al doilea rnd al primului bloc de date ... <TBODY> <TR> ... primul rnd al blocului doi de date ... <TR> ... al doilea rnd al blocului doi de date ... <TR> ... al treilea rnd al blocului doi de date ... </TABLE>

A. Elementul THEAD Sintaxa: <THEAD>...</THEAD> Atribute posibile: ALIGN=[ top | bottom | left | right ] (alinierea orizontal a celulelor din grup) VALIGN=[ top | middle | bottom | baseline ] (alinierea vertical a celulelor din grup) Conine: Coninut n: Descriere: Elementul THEAD definete un grup de rnduri de tip header (antet) ntr-un tabel. Un tabel definit cu TABLE poate avea un singur THEAD, care poate apare dup CAPTION, COL sau COLGROUP, i poate preceda elementele TFOOT (opional) i TBODY (obligatoriu). Prin gruparea explicit a rndurilor de antet cu THEAD, autorii ofer browserelor posibilitatea de a include acele rnduri pe fiecare pagin tiprit a unui tabel mare, precum i posibilitatea de prezenta tabele care permit scroll doar rndurilor de date, cele de antet rmnnd fixe pe ecran. Nu toate browserele suport acest element, dar folosirea lui nu conduce la nici o problem la acestea. THEAD permite specificarea unor atribute de prezentare pentru alinierea celulelor de date ale tabelului. ntruct nu toate browserele l suport, aceste atribute se pot specifica i direct celulelor (definite cu TR, TH, TD). Atributul ALIGN specific alinierea orizontal pentru fiecare celul din grupul de rnduri. ALIGN=char aliniaz coninutul dup un anumit caracter dat de atributul CHAR, a crui valoare implicit este punctul zecimal. CHAROFF specific offsetul primei apariii a caracterului de aliniere. Valoarea lui este un numr de pixeli sau un procent din limea celulei. CHAROFF="50%" aliniaz caracterul de aliniere n centru celulei. Atributul VALIGN specific poziia vertical a coninutului celulelor i poate lua valorile: top, care poziioneaz datele la marginea de sus a celulei; middle, valoarea implicit, care poziioneaz datele n centrul celulei; bottom, care poziioneaz datele la marginea de jos a celulei; TABLE unul sau mai multe elemente TR CHAR=Character (caracterul dup care se face alinierea) CHAROFF=Length (offsetul caracterului dup care se face alinierea) atribute comune

baseline, care specific alinierea primei linii a celulei (indiferent ce conine) la o linie de baz a fontului (baseline) comun. B. Elementul TFOOT Sintaxa: <TFOOT>...</TFOOT> Atribute posibile: ALIGN=[ top | bottom | left | right ] (alinierea orizontal a celulelor din grup)

 VALIGN=[ top | middle | bottom | baseline ] (alinierea vertical a celulelor din grup) Conine: Coninut n: Descriere: Elementul TFOOT definete un grup de rnduri de tip footer ntr-un tabel. Un tabel definit cu TABLE poate avea un singur TFOOT, care poate apare dup THEAD (opional) i poate preceda elementul TBODY (obligatoriu). Prin gruparea explicit a rndurilor de footer cu TFOOT, autorii ofer browserelor posibilitatea de a include acele rnduri pe fiecare pagin tiprit a unui tabel mare, precum i posibilitatea de prezenta tabele care permit scroll doar rndurilor de date, cele de footer rmnnd fixe pe ecran. Nu toate browserele suport acest element, iar cerina de a fi plasat nainte de TBODY l face nerecomandat pentru acestea. Atributele (i semnificaiile lor) snt aceleai cu cele de la THEAD. Un footer poate oferi un rnd special, de tip sumar sau de tip not de pagin/picior, ce se aplic unui tabel ntreg sau numai unei poriuni din el. Exemplu: Urmtorul exemplu folosete TFOOT pentru a defini note de pagin/picior pentru tot tabelul: <TABLE SUMMARY="This table lists..."> <CAPTION>Programs Available</CAPTION> <THEAD> <TR> ... </TR> </THEAD> <TFOOT CLASS=footnote> <TR> <TD COLSPAN=5> Many disciplines are also available as Minors and Joint Honors programs. </TD> </TR> <TR> <TD COLSPAN=5> * Preprofessional programs ... </TD> </TR> </TFOOT> <TBODY>... </TBODY> </TABLE> TABLE unul sau mai multe elemente TR CHAR=Character (caracterul dup care se face alinierea) CHAROFF=Length (offsetul caracterului dup care se face alinierea) atribute comune

C. Elementul TBODY Sintaxa: <TBODY>...</TBODY> Atribute posibile: ALIGN=[ top | bottom | left | right ] (alinierea orizontal a celulelor din grup) VALIGN=[ top | middle | bottom | baseline ] (alinierea vertical a celulelor din grup) Conine: Coninut n: Descriere: Elementul TBODY definete un grup de rnduri de date ntr-un tabel. Un tabel definit cu TABLE poate avea unul sau mai multe elemente TBODY, care pot aprea dup elementul TFOOT (opional). Tagul de sfrit este ntotdeauna opional. Tagul de nceput este opional cnd tabelul conine doar un TBODY i nu conine nici un THEAD sau TFOOT. Aceasta permite ca structura simpl a tabelelelor din HTML 3.2 s rmn valid: <TABLE> <TR> <TH>Abbreviation</TH> <TH>Long Form</TH> </TR> <TR> <TD>AFAIK</TD> <TD>As Far As I Know</TD> </TR> </TABLE> Prin gruparea explicit a rndurilor de date cu TBODY, autorii ofer browserelor posibilitatea de a prezenta tabele care permit scroll doar rndurilor de date, cele de header i footer rmnnd fixe pe ecran. n plus, gruparea rndurilor de date n mai multe TBODY permite sugerarea unor prezentri diverse pentru diferitele grupuri, prin intermediul style-sheet-urilor. Nu toate browserele suport acest element, dar folosirea lui nu conduce la nici o problem la acestea. Atributele au aceeai semnificaia ca la THEAD i TFOOT. 4. Definirea rndurilor (elementul TR) Un tabel este alctuit, n esen din rnduri care conin celulele n care se introduc elementele ce fac parte din tabel (datele). Un rnd de date este descris prin intermediul elementului TR. Atributele acestui element permit descrierea unor caracteristici comune tuturor celulelor din acel rnd, chiar dac acestea pot fi specificate ulterior i individual, pentru fiecare celul n parte. Aceste caracteristici snt: Alinierea orizontal a textului (ALIGN [=right, left, center]) Alinierea vertical a textului (VALIGN [=top, middle, bottom]) Culoarea de background (BGCOLOR [=valoarea culorii n hexa]) Culoarea marginilor [a se vedea atributele lui TABLE] TABLE unul sau mai multe elemente TR CHAR=Character (caracterul dup care se face alinierea) CHAROFF=Length (offsetul caracterului dup care se face alinierea) atribute comune

Elementul TR Sintaxa: <TR>...</TR> Atribute posibile: ALIGN=[ top | bottom | left | right ] (alinierea orizontal a celulelor din grup) VALIGN=[ top | middle | bottom | baseline ] (alinierea vertical a celulelor din grup) Conine: Coninut n: Descriere: Elementul TR definete un rnd ntr-un tabel. Elementele TR pot fi grupate cu ajutorul lui THEAD, TFOOT sau TBODY. ntruct tagurile de nceput i de sfrit ale lui TBODY snt opionale, structura simpl a tabelului din HTML 3.2 rmne valid. TR conine elemente TH sau TD, care la rndul lor conin datele propriu-zise din tabel. n plus fa de atributele comune prezente la cele mai multe elemente, TR poate avea i atribute de prezentare pentru alinierea celulelor n rnd i specificarea culorii de background. Semnificaia acestora este aceeai cu cea de la elementele anterioare. TABLE, TFOOT, TBODY unul sau mai multe elemente TH sau TD CHAR=Character (caracterul dup care se face alinierea) CHAROFF=Length (offsetul caracterului dup care se face alinierea) BGCOLOR=Color (culoarea de background a rndului) atribute comune

5. Definirea celulelor unui tabel (elementele TH i TD) Celule unui tabel pot conine dou tipuri de informaie: informaie antet (header, cap de tabel) i date. Aceast distincie permite browserelor s prezinte diferit cele dou feluri de celule, chiar i n absena style-sheet-urilor. De exemplu browserele vizuale pot prezenta headerele cu un font bold, iar cele care sintetizeaz vocea cu o inflexiune special a vocii. Informaia de tip header se descrie cu elementul TH. Exist dou tipuri de astfel de informaie: cea descris cu TH i valoarea atributului ABBR. Un browser trebuie s prezinte sau una sau alte dintre cele dou tipuri, ABBR fiind preferat atunci cnd nu exist suficient spaiu pentru a prezenta n ntregime informaia din TH. Datele propriu-zise ale tabelului se insereaz n celule descrise cu elementul TD. Celulele unui tabel pot fi goale (fr nici un coninut). n acest caz pot apare probleme la afiarea marginilor celulei respective (unele browsere nu deseneaz marginile celulelor goale, acestea trebuind s conin un element invizibil, de exemplu un blanc, pentru ca marginea rndului s nu fie ntrerupt). De exemplu, urmtorul tabel conine (descrie) 2 rnduri cu cte 4 coloane (celule) pe fiecare rnd, fiecare coloan avnd un header (cap de coloan) care o descrie: <TABLE summary=" Tabel care indic nr. de ceti de cafea bute la o reuniune, felul cafelei (norm/decofeinizat) i dac este cu/fr zahr. "> <CAPTION>Cups of coffee consumed by each</CAPTION> <TR> <TH>Name</TH> <TH>Cups</TH> <TH>Type of Coffee</TH> <TH>Sugar?</TH> <TR> <TD>T. Sexton</TD> <TD>10</TD> <TD>Espresso</TD> <TD>No</TD> <TR> <TD>J. Dinnen</TD> <TD>5</TD> <TD>Decaf</TD> <TD>Yes</TD> </TABLE> Acest tabel poate arta astfel: Name Cups T. Sexton 10 J. Dinnen 5 Type of Coffee Sugar? Espresso No Decaf Yes

A. Elementul TH Sintaxa: <TH>...</TH> Atribute posibile: ROWSPAN=Number (rnduri suprapuse/depite de celul) COLSPAN=Number (coloane suprapuse/depite 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) Conine: Coninut n: Descriere: Elementul TH definete o celul de tip header (antet, cap de tabel). Dac o celul este i antet i dat trebuie folosit TD. Atributele ROWSPAN i COLSPAN specific numrul de rnduri i respectiv numrul de coloane care snt depite de celul (snt suprapuse de celul, peste care se intinde celula). Valoarea implicit este 1. Valoarea special 0 indic suprapunerea tuturor rndurilor sau coloanelor pn la sfritul tabelului, dar este ignorat de majoritatea browserelor. Atributul HEADERS specific celulele header ce se aplic lui TH. valoarea este o list a valorilor atributului ID a acelor celule. Se folosete de browserele nevizuale. Atributul SCOPE specific celulele pentru care elementul descris cu TH ofer informaii de header (antet). Atributul ABBR d o versiune abreviat a coninutului celulei, utilizat n cazul n care nu exist suficient spaiu pentru a vizualiza coninutul celulei. Atributul AXIS ofer o metod de a clasifica celulele. Valoarea acestui atribut este o list de nume de categorii. Atributele ALIGN, VALIGN, CHAR, CHAROFF, BGCOLOR au aceeai semnificaie ca la TR, iar WIDTH, HEIGHT, NOWRAP i BGCOLOR snt depite n favoarea style-sheeturilor. TR elemente inline, elemente tip bloc CHAR=Character (caracterul dup care se face alinierea) CHAROFF=Length (offsetul caracterului dup care se face alinierea) BGCOLOR=Color (culoarea de background a rndului) WIDTH=Pixels (limea celulei) HEIGHT=Pixels (nlimea celulei) NOWRAP (suprim continuarea coninutului pe un alt rnd/word wrap) atribute comune

B. Elementul TD Sintaxa: <TD>...</TD> Atribute posibile: ROWSPAN=Number (rnduri suprapuse/depite de celul) COLSPAN=Number (coloane suprapuse/depite 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) Conine: Coninut n: Descriere: Elementul TD definete o celul de date. Elementele TD snt coninute n TR, care poate s conin i elemente TH. Dac o celul este i antet i dat trebuie folosit TD. Semnificaia atributele este aceeai cu cea de la TH. TR elemente inline, elemente tip bloc CHAR=Character (caracterul dup care se face alinierea) CHAROFF=Length (offsetul caracterului dup care se face alinierea) BGCOLOR=Color (culoarea de background a rndului) WIDTH=Pixels (limea celulei) HEIGHT=Pixels (nlimea celulei) NOWRAP (suprim continuarea coninutului pe un alt rnd/word wrap) atribute comune

6. Definirea celulelor extinse (atributele COLSPAN i ROWSPAN) Sintaxa: <TH COLSPAN=nr. coloane></TH> sau <TH ROWSPAN=nr. rnduri></TH> Descriere: Pentru nevoi de organizare a datelor din tabel sau pentru obinerea de efecte, celulele pot fi extinse att orizontal (pe mai multe coloane) ct i vertical (pe mai multe rnduri). Extinderea se obine cu ajutorul atributelorCOLSPAN i ROWSPAN utilizate cu tag-urile <TH> sau <TD>. Celulele se extind ntotdeauna n jos i/sau spre dreapta; deci, pentru a crea o celul care se extinde peste cteva coloane se utilizeaz atributul COLSPAN n conjuncie cu tag-ul de nceput a celei mai din stnga celule din rnd, iar pentru a obine extinderea unei celule peste mai multe rnduri se utilizeaz atributul ROWSPAN n conjuncie cu tag-ul de nceput a celei mai de sus celule de pe coloan. Valorile atributelor reprezint numrul de coloane, respectiv rnduri peste care se dorete s fie extins celula. Trebuie avut n vedere c n cazul unor descrieri eronate (cu celule care se suprapun) browserele reacioneaz diferit, efectele putnd fi uneori imprevizibile. Exemplu greit (cu celule extinse/suprapuse): n acest tabel celula "5" este extins peste dou rnduri i celula "7" este extins peste dou coloane, rezultnd 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 urmtorul: <TABLE BORDER> <TR> <TH COLSPAN=2></TH> <TH>Celula din stnga este<BR>extins pe dou coloane<BR>Rndul 1</TH> </TR> <TR ALIGN=CENTER> <TH ROWSPAN=2>Celul extins<BR>pe dou rnduri</TH> <TH>Capul rndului 2</TH> <TD>Rndul 2</TD> </TR> <TR ALIGN=CENTER> <TH>Capul rndului 3</TH> <TD>Rndul 3</TD> </TR> </TABLE> Exemplu: Acest exemplu ilustreaz cum afecteaz definirea unei celule extinse vecinii si (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>

ntruct celula "2" se extinde pe primul i al doilea rnd, definirea celui de al doilea rnd o va lua n considerare. Astfel, n rndul doi, al doile TD definete de fapt celula a treia de pe rnd, rezultnd un tabel ca n figura urmtoare:

Exemplu: Acelai tabel, cu o extindere pe rnd, poate fi descris astfel: <TABLE border="1"> <TR><TD>1 <TD>2 <TD>3 <TR><TD colspan="2">4 <TD>6 <TR><TD>7 <TD>8 <TD>9 </TABLE>

aici celula "4" se extinde pe dou coloane i, astfel, al doilea TD din rnd definete a treia celul ("6"):

7. Grupuri de coloane (elementul COLGROUP) ntr-un tabel se pot grupa i coloanele, nu numai rndurile, folosind elementul COLGROUP. Numrul de coloane ce fac parte dintr-un grup se poate specifica n dou moduri (mutual exclusive): 1. Cu atributul SPAN al elementului (valoare implicit 1) 2. Cu elementul COL, inclus n COLGROUP, se reprezint una sau mai multe coloane din grupul respectiv. Avantajul folosirii atributului SPAN (metoda 1) este c se pot grupa informaii despre limile coloanelor. De exemplu, dac un tabel conine 40 de coloane, fiecare cu o lime de 20 pixeli, este mult mai uor de scris: <COLGROUP span="40" width="20"> </COLGROUP> de ct: <COLGROUP> <COL width="20"> <COL width="20"> ...pn la 40 de coloane... </COLGROUP> Cnd este necesar s se individualizeze o coloan (pentru stil, lime, etc) ntr-un grup, se poate identifica acea coloan cu un element COL. Astfel, pentru a aplica un stil special ultimei coloane a tabelului dat ca exemplu anterior se poate folosi: <COLGROUP width="20"> <COL span="39"> <COL id="format-special">

</COLGROUP> Atributul width al lui COLGROUP este motenit de toate cele 40 de coloane. Primul element COL se refer la primele 39 de coloane (nu e nimic special cu ele) i al doilea atribuie o valoare identificatorului reprezentat de atributul ID, astfel ca un stil defint cu tehnica style-sheet-urilor s se refere la el. n exemplul urmtor se descrie un tabel cu dou grupe de coloane. Prima conine 10 coloane, iar cea de a doua 5. Limea implicit pentru fiecare coloan din primul grup va fi 50 de pixeli, iar limea fiecrei coloane din a doua grup va fi minimul necesar pentru acea coloan: <TABLE> <COLGROUP span="10" width="50"> <COLGROUP span="5" width="0*"> <THEAD> <TR> <TD> ... </TABLE> Elementul COLGROUP Sintaxa: <COLGROUP>... </COLGROUP> Atribute posibile: SPAN=Number (numrul de coloane n grup) WIDTH=MultiLength (limea fiecrei coloane) ALIGN=[ top | bottom | left | right ] (alinierea orizontal a celulelor din grup)

VALIGN=[ top | middle | bottom | baseline ] (alinierea vertical a celulelor din grup) Conine: Coninut n: Descriere: Acest element definete un grup de coloane ntr-un tabel. Dac e folosit, COLGROUP trebuie s apar dup elementul (opional) CAPTION i naintea elementului (tot opional) THEAD. Diviziunea structural definit de COLGROUP permite sugerarea unei prezentri comune pentru tot grupul de coloane prin intermediul style-sheet-urilor. Atributul SPAN definete numrul de coloane din grup; valoarea implicit este 1. Celelalte atribute permise cu acest element snt comune coloanelor din tabel. Poate conine, de asemenea, elemente COL care definesc atributele pentru celulele din coloane n mod individual, suprapunndu-se n acest fel atributele definite pentru grup. Atributul SPAN nu trebuie utilizat dac COLGROUP conine COL. COLGROUP poate avea i un numr de atribute de prezentare, multe dintre ele neputnd fi ns nlocuite complet de style-sheet-uri. ntruct nu toate browserele suport COLGROUP, se pot specifica aceste atribute i celulelor individuale (elementelor TH i TD). Atributul WIDTH specific limea fiecarei coloane din grup. Valoarea trebuie s fie un numr de pixeli, procent din limea tabelului sau o lime relativ exprimat ca i*, cu i intreg. O TABLE Zero sau mai nmulte elemente COL CHAR=Character (caracterul dup care se face alinierea) CHAROFF=Length (offsetul caracterului dup care se face alinierea) atribute comune

coloan care are WIDTH="3*" va avea limea de 3 ori ct una care are WIDTH="1*". Valoarea WIDTH="0*" este echivalentul minimului necesar pentru afiarea coninutului coloanei. Atributele celelalte au aceeai semnificaie ca la elementele anterioare. Exemplu: Acest exemplu ofer o perspectiv asupra divizrii structurale a unui tabel n 3 pri. Prima parte este alctuit dintr-o singur coloan care d descrierea unui caracter. O doua, de 3 coloane, d diverse moduri de a reprezenta caracterul respectiv n HTML. A treia parte, tot de 3 coloane, arat cum va apare caracterul respectiv n diverse browsere. <TABLE SUMMARY="This table gives the character entity reference, decimal character reference, and hexadecimal character reference for 8-bit Latin-1 characters, as well as the rendering of each in your browser."> <COLGROUP> <COLGROUP SPAN=3> <COLGROUP SPAN=3> <THEAD> <TR> <TH SCOPE=col ROWSPAN=2>Character</TH> <TH SCOPE=col ROWSPAN=2>Entity</TH> <TH SCOPE=col ROWSPAN=2>Decimal</TH> <TH SCOPE=col ROWSPAN=2>Hex</TH> <TH SCOPE=colgroup COLSPAN=3>Rendering in Your Browser</TH> </TR> <TR> <TH SCOPE=col>Entity</TH> <TH SCOPE=col>Decimal</TH> <TH SCOPE=col>Hex</TH> </TR> </THEAD> <TBODY> <TR> <TD SCOPE=row>non-breaking space</TD> <TD>&amp;nbsp;</TD> <TD>&amp;#160;</TD> <TD>&amp;#xA0;</TD> <TD>&nbsp;</TD> <TD>&#160;</TD> <TD>&#xA0;</TD> </TR> ... </TBODY> </TABLE> n locul lui <COLGROUP SPAN=3> se poate folosi un COLGROUP cu 3 elemente COL, astfel: <COLGROUP> <COL CLASS=entity> <COL CLASS=decimal> <COL CLASS=hex> </COLGROUP> S-a folosit atributul CLASS pentru a se face disticie ntre coloane individuale ale grupului, permind astfel sugerarea diferit a prezentrii pentru respectivele coloane, prin folosirea stylesheet-urilor.

8. Definirea atributelor comune coloanelor (elementul COL) Elementul COL permite autorilor paginilor HTML gruparea mpreun a atributelor unor coloane. COL nu grupeaz coloane (dpdv structural) acesta fiind rolul lui COLGROUP. Elementel COL snt vide i servesc doar ca suport pentru atribute. Ele pot apare n interiorul sau exteriorul unui grup explicit de coloane (defint cu COLGROUP). Elementul COL Sintaxa: <COL> Atribute posibile: SPAN=Number (numrul de coloane n grup) WIDTH=MultiLength (limea fiecrei coloane) ALIGN=[ top | bottom | left | right ] (alinierea orizontal a celulelor din grup)

VALIGN=[ top | middle | bottom | baseline ] (alinierea vertical a celulelor din grup) Conine: Coninut n: Descriere: Acest element definete doar atributele comune unei coloane a unui tabel i, spre deosebire de COLGROUP, nu grupeaz structural coloanele tabelului. Dac e folosit, COL trebuie s apar dup elementul (opional) CAPTION i naintea elementului (tot opional) THEAD. Atributul SPAN definete numrul de coloane care partajeaz aceleai atribute; valoarea implicit este 1. COL poate fi coninut direct n TABLE sau poate apare n COLGROUP, caz n care suprascrie atributele definite de acesta. Celelalte atribute au aceeai semnificaie ca la elementul COLGROUP. Exemplu: Acest exemplu folosete COL n cadrul lui COLGROUP pentru a atribui diferite clase (atributul class) coloanelor unui tabel: <TABLE SUMMARY="This table gives the character entity reference, decimal character reference, and hexadecimal character reference for 8-bit Latin-1 characters, as well as the rendering of each in your browser."> <COLGROUP CLASS="character-description"> <COLGROUP> <COL CLASS=entity> <COL SPAN=2 CLASS=numeric> TABLE, COLGROUP vid (nu conine nimic) CHAR=Character (caracterul dup care se face alinierea) CHAROFF=Length (offsetul caracterului dup care se face alinierea) atribute comune

<COLGROUP> <COL CLASS="entity-rendering"> <COL CLASS="decimal-rendering"> <COL CLASS="hex-rendering"> <THEAD> <TR> <TH SCOPE=col ROWSPAN=2>Character</TH> <TH SCOPE=col ROWSPAN=2>Entity</TH> <TH SCOPE=col ROWSPAN=2>Decimal</TH> <TH SCOPE=col ROWSPAN=2>Hex</TH> <TH SCOPE=colgroup COLSPAN=3>Rendering in Your Browser</TH> </TR> <TR> <TH SCOPE=col>Entity</TH> <TH SCOPE=col>Decimal</TH> <TH SCOPE=col>Hex</TH> </TR> </THEAD> <TBODY> <TR> <TD SCOPE=row>non-breaking space</TD> <TD>&amp;nbsp;</TD> <TD>&amp;#160;</TD> <TD>&amp;#xA0;</TD> <TD>&nbsp;</TD> <TD>&#160;</TD> <TD>&#xA0;</TD> </TR> ... </TBODY> </TABLE>

9. Calculul numrului de coloane dintr-un tabel Pentru calculul numrului de coloane ale unui tabel se folosesc dou metode prezentate n continuare n ordinea precedenei (ordinea n care snt folosite): 1. Dac TABLE conine un element COLGROUP sau COL numrul coloanelor se calculeaz adunnd: Pentru fiecare COL valoarea atributului SPAN (valoarea implicit 1). Pentru fiecare COLGROUP ce conine cel puin un COL se ignor atributul SPAN al fiecrui COLGROUP. Pentru fiecare COL se aplic pasul 1. 1). Pentru fiecare COLGROUP vid se ia valoarea lui SPAN (valoarea implicit

2. Altfel, dac TABLE nu conine COLGROUP sau COL numrul de coloane se determin din descrierea rndurilor. Numrul de coloane este egal cu numrul maxim de elemente ce par pe un rnd (incluznd i celule ce se extind pe mai multe coloane). Pentru toate rndurile care au mai puine coloane se adaug la sfrit celule goale. Dac tabelul conine COLGROUP i COL i cele dou metode de calcul nu dau acelai rezultat atunci este vorba despre o eroare. Odat ce s-a calculat numrul de coloane, acestea pot fi grupate. Exemplu: Pentru fiecare dintre tabelele descrise n continuare, cele 2 metode trebuie s dea acelai rezultat: 3 coloane. Primele trei tabele pot fi afiate incremental: 1. <TABLE> <COLGROUP span="3"></COLGROUP> <TR><TD> ... ...rndurile tabelului... </TABLE> 2. <TABLE> <COLGROUP> <COL> <COL span="2"> </COLGROUP> <TR><TD> ... ... rndurile tabelului... </TABLE> 3. <TABLE> <COLGROUP> <COL> </COLGROUP> <COLGROUP span="2"> <TR><TD> ... ... rndurile tabelului... </TABLE> 4. <TABLE> <TR> <TD><TD><TD> </TR> </TABLE> 10. Calculul limii coloanelor dintr-un tabel

Limea unei coloane poate fi specificat n trei moduri: 1. Fix

Specificarea unei limi fixe este dat n pixeli (ex. width="30"). Aceast metod permite afiarea tabelelor n mod incremental (pe msur ce se ncarc rndurile tabelului). 2. Procent

Specificarea unei limi ca procent (ex. width="20%") este dat n funcie de limea disponibil pentru ntreg tabelul. Aceasta nu depinde de tabelulul nsui, i astfel aceast metod permite i ea afiarea tabelelor incremental. 3. Proporional

Specificarea unei limi n mod proporional (ex. width="3*") se refer la poriunile de spaiu orizontal solicitate de tabel. Dac limea tabelului este dat ca o valoare fix, prin intermediul atributului width al elementului TABLE, atunci i aceast metod permite afiarea tabelelor incremental. Dac, ns, tabelul nu are o lime fix, browserele trebuie s atepte ncrcarea integral a tabelului nainte de a determina limea orizontal cerut de tabel. Numai atunci se poate determina i limea coloanelor. Dac nu se specific nici o informaie despre limea unei coloane, browserele nu vor capabile s formateze tabelul incremental, ntruct trebuie s atepte ntregul coninut al coloanei pentru a determina limea acesteia. Dac limea coloanei se dovedete prea mic pentru coninutul acesteia, browserele pot alege s reformateze tabelul. Exemplu: Tabelul urmtor are 6 coloane. Prima nu aparine explicit nici unui grup. Urmatoarele trei aparin explicit primului grup i ultimele dou aparin celui de al doilea grup explicit. Acest tabel nu poate fi afiat incremental ntruct conine coloane cu limi specificate proporional i atributul width al lui TABLE nu are specificat nici o valoare. <TABLE> <COLGROUP> <COL width="30"> <COLGROUP> <COL width="30"> <COL width="0*"> <COL width="2*"> <COLGROUP align="center"> <COL width="1*"> <COL width="3*" align="char" char=":"> <THEAD> <TR><TD> ... ...rndurile tabelului... </TABLE>

n momentul n care browserul recepioneaz toate datele din tabel, speiul orizontal disponibil va fi alocat coloanelor dup cum urmeaz: 1. 2. Se aloc 30 de pixeli coloanelor unu i doi. Se rezerv spaiul minimal pentru coloana trei.

3. Spaiul orizontal rmas disponibil este mpit n 6 pri egale (ntruct 2* + 1* + 3* = 6 pri egale). 4. Coloana a patra (2*) va primi 2 pri, coloana a cincea (1*) o parte i coloana a asea (3*) va primi 3 pari. Valoarea atributului align din coloana a treia este "center". Toate celule din fiecare coloan din acest grup vor moteni aceast valoare, dar o pot suprapune. De fapt, COL chiar asta i face prin specificarea faptului c fiecare celul din coloana a asea va fi aliniat dup caracterul ":". Exemplu: Tabelul urmtor, aa cum are descris limea, permite formatarea (i implicit i afiarea) incremental: <TABLE width="200"> <COLGROUP span="10" width="15"> <COLGROUP width="*"> <COL id="penultima-coloan"> <COL id="ultima-coloan"> <THEAD> <TR><TD> ... ...rndurile tabelului... </TABLE> Primele 10 coloane au fiecare cte 15 pixeli lime. Ultimele dou coloane vor primi fiecare jumtate din cei 50 de pixeli care mai rmn. Elementele COL apar doar pentru a se specifica o valoare atributului id. 11. Afiarea marginilor exterioare i interioare Atributele care determin modul de afiare al marginilor exterioare i liniilor interioare (dintre celule) snt urmtoarele: 1. frame = void|above|below|hsides|lhs|rhs|vsides|box|border Acest atribut specific marginile exterioare (care nconjoar tabelul) care vor fi vizibile. 2. rules = none|groups|rows|cols|all Acest atribut specific marginile interioare (care delimiteaz celulele tabelului) care vor fi vizibile. Modul n care snt afiate depinde de browser. 3. border = pixels Acest atribut specific limea (n pixeli) a marginilor exterioare.

Pentru a se pstra compatibilitatea cu versiunile anterioare, se impun urmtoarele reguli: Dac border="0" atunci frame="void" i, dac nu este specificat altfel, rules="none". Orice alt valoare pentru border implic frame="border" i, dac nu este specificat altfel, rules= "all". Valoarea "border" n tagul de nceput al lui TABLE trebuie interpretat ca valoare a atributului frame. Aceasta implic rules="all" i o valoare diferit de zero pentru atributul border. Exemplu: Urmtoarele 2 definiii snt echivalente: <TABLE border="2"> <TABLE border="2" frame="border" rules="all"> este aceeai cu: <TABLE border> <TABLE frame="border" rules="all"> Exemplu: n exemplul urmtor este descris un tabel care are margine exterioar vizibil, de 5 pixeli grosime, n partea stng i dreapt, precum i margini interne vizibile ntre celule: <TABLE border="5" frame="vsides" rules="cols"> <TR> <TD>1 <TD>2 <TD>3 <TR> <TD>4 <TD>5 <TD>6 <TR> <TD>7 <TD>8 <TD>9 </TABLE> 12. Alinierea datelor din celule Pentru estetica coninutului tabelului exist cteva opiuni care permit alinierea datelor n interiorul celulelor att pe orizontal ct i pe vertical. Opiunile snt exprimabile prin intermediul unor atribute ale tag-urilor TR, TH, TD, COL, COLGROUP. Atributele care afecteaz alinierea datelor n celule unui tabel snt: 1. align = left|center|right|justify|char

Atributul ALIGN este utilizat pentru aliniere orizontal i poate lua urmtoarele valori: Valoare LEFT RIGHT CENTER JUSTIFY CHAR Descriere Datele din celul snt aliniate la marginea din stnga celulei Datele din celul snt aliniate la marginea din dreapta celulei Datele din celul snt centrate orizontal la mijlocul celulei Datele din celul snt aliniate att la marginea din stnga a celulei ct i la marginea din dreapta Datele din celul snt aliniate dup un anumit caracter

2.

valign = top|middle|bottom|baseline Atributul VALIGN este utilizat pentru aliniere vertical i poate lua urmtoarele valori: Valoare TOP BOTTOM MIDDLE BASELINE Descriere Datele din celul snt aliniate la marginea de sus a celulei Datele din celul snt aliniate la baza celulei Datele din celul snt centrate vertical la mijlocul celulei Aliniere similar cu TOP dar alinierea se face cu baza primului rnd text din fiecare celul.

3.

char = character Acest atribut specific un caracter (unic ntr-un fragment de text) care joac rolul de ax dup care se aliniaz restul. Valoarea implicit este punctul zecimal.

4.

charoff = length Cnd este prezent acest atribut specific affsetul primei aparaii a caracterului dup care se face alinierea pe fiecare linie. Dac o linie nu conine caracterul de aliniere ea poate fi deplasat la sfritul poziieie de aliniere.

Exemplu: Tabele cu aliniere orizontal i vertical: 1. <TABLE BORDER> <CAPTION>Aliniere orizontal</CAPTION> <TR> <TD ALIGN=LEFT>&nbsp;<BR> Left&nbsp; <BR>&nbsp;</TD> <TD ALIGN=Center>&nbsp;<BR>&nbsp;Center&nbsp;<BR>&nbsp;</TD> <TD ALIGN=RIGHT> &nbsp;<BR>&nbsp; Right <BR>&nbsp;</TD> </TR> </TABLE> 2. <TABLE BORDER> <CAPTION>Aliniere vertical</CAPTION> <TR ALIGN=CENTER> <TD VALIGN=TOP>Top<BR> &nbsp;<BR>&nbsp;</TD> <TD VALIGN=MIDDLE>Center</TD> <TD VALIGN=BOTTOM>&nbsp;<BR><BR>&nbsp;Bottom </TD> </TR> </TABLE> Exemplu: Tabel cu combinaie de alinieri: <TABLE BORDER> <TR> <TH></TH> <TH>Left (Stnga)</TH> <TH>Center (Centru)</TH> <TH>Right (Dreapta)</TH> <TH>Top<BR>(Sus)<BR></TH> <TD ALIGN=LEFT VALIGN=TOP><IMG SRC="A.gif"></TD>

<TD ALIGN=CENTER VALIGN=TOP><IMG SRC="A.gif"></TD> <TD ALIGN=RIGHT VALIGN=TOP><IMG SRC="A.gif"></TD> <TH>Center<BR>(Centru)<BR></TH> <TD ALIGN=LEFT VALIGN=MIDDLE><IMG SRC="A.gif"></TD> <TD ALIGN=CENTER VALIGN=MIDDLE><IMG SRC="A.gif"></TD> <TD ALIGN=RIGHT VALIGN=MIDDLE><IMG SRC="A.gif"></TD> </TR> <TR> <TH>Bottom<BR>(Jos)<BR></TH> <TD ALIGN=LEFT VALIGN=BOTTOM><IMG SRC="A.gif"></TD> <TD ALIGN=CENTER VALIGN=BOTTOM><IMG SRC="A.gif"></TD> <TD ALIGN=RIGHT VALIGN=BOTTOM><IMG SRC="A.gif"></TD> </TR> </TABLE> Exemplu: Tabelul urmtor aliniaz un rnd de valori ce reprezint preuri dup punctul zecimal, caracter de aliniere setat explicit: <TABLE border="1"> <COLGROUP> <COL> <COL align="char" char="."> <THEAD> <TR> <TH>Vegetable <TH>Cost per kilo <TBODY> <TR> <TD>Lettuce <TD>$1 <TR> <TD>Silver carrots <TD>$10.50 <TR> <TD>Golden turnips <TD>$100.30 </TABLE> Tabelul ar putea arta astfel: -----------------------------| Vegetable |Cost per kilo| |--------------|-------------| |Lettuce | $1 | |--------------|-------------| |Silver carrots| $10.50| |--------------|-------------| |Golden turnips| $100.30| -----------------------------Atributele de aliniere inserate n tag-urile de nceput de rnd (<TR>) au efect asupra tuturor celulelor din rnd. Atributele de aliniere inserate n tag-urile care definesc celule au preceden fa de atributele de aliniere inserate n tag-urile nceput de rnd.

Motenirea specificaiilor de aliniere Alinierea coninutului celulelor poate fi specificat individual fiecrei celule sau poate fi motenit de la elementele ce includ celula respectiv (rnd, coloan, tabel). Ordinea de preceden (de la cea mai mare la cea mai mic) pentru atributele align, char i charoff este: 1. 2. Atributul de aliniere setat pentru un element din celul (ex. P). Atributul de aliniere setat pentru o celul (TH sau TD).

3. Atributul de aliniere setat pentru o coloan sau grup de coloane (COL i COLGROUP). Cnd o celul face parte dintr-o celul extins pe coloane, proprietile de aliniere snt motenite de la celula de unde ncepe extensia. 4. Atributul de aliniere setat pentru un rnd sau grup de rnduri (TR, THEAD, TFOOT i TBODY). Cnd o celul face parte dintr-o celul extins pe mai multe rnduri, proprietile de aliniere snt motenite de la celula de unde ncepe extensia. 5. 6. Atributul de aliniere setat pentru tabel (TABLE). Valoarea implicit de aliniere.

Ordinea de preceden (de la cea mai mare la cea mai mic) pentru atributul valign este: 1. 2. Atributul de aliniere setat pentru un element din celul (ex. P). Atributul de aliniere setat pentru o celul (TH sau TD).

3. Atributul de aliniere setat pentru un rnd sau grup de rnduri (TR, THEAD, TFOOT i TBODY). Cnd o celul face parte dintr-o celul extins pe mai multe rnduri, proprietile de aliniere snt motenite de la celula de unde ncepe extensia. 4. Atributul de aliniere setat pentru o coloan sau grup de coloane (COL i COLGROUP). Cnd o celul face parte dintr-o celul extins pe coloane, proprietile de aliniere snt motenite de la celula de unde ncepe extensia. 5. 6. Atributul de aliniere setat pentru tabel (TABLE). Valoarea implicit de aliniere.

La afiarea celulelor, alinierea orizontal este determinat de coloane naintea rndurilor, n timp ce pentru alinierea vertical ordinea de preferin este rnduri i apoi coloane. Alinierea implicit depinde de browser dar, n cele mai multe cazuri este: informaiile din celulele cap de tabel snt centrate att orizontal ct i vertical iar informaiile din celulele de date snt centrate vertical dar aliniate orizontal la stnga.

Exemplu: Un exemplu complet de tabel cu diverse atribute este prezentat n continuare: <TABLE border="2" frame="hsides" rules="groups" summary="Code page support in different versions of MS Windows."> <CAPTION>CODE-PAGE SUPPORT IN MICROSOFT WINDOWS</CAPTION> <COLGROUP align="center"> <COLGROUP align="left"> <COLGROUP align="center" span="2"> <COLGROUP align="center" span="3"> <THEAD valign="top"> <TR> <TH>Code-Page<BR>ID <TH>Name <TH>ACP <TH>OEMCP <TH>Windows<BR>NT 3.1 <TH>Windows<BR>NT 3.51 <TH>Windows<BR>95 <TBODY> <TR><TD>1200<TD>Unicode (BMP of ISO/IEC10646)<TD><TD><TD>X<TD>X<TD>* <TR><TD>1250<TD>Windows 3.1 Eastern European<TD>X<TD><TD>X<TD>X<TD>X <TR><TD>1251<TD>Windows 3.1 Cyrillic<TD>X<TD><TD>X<TD>X<TD>X <TR><TD>1252<TD>Windows 3.1 US (ANSI)<TD>X<TD><TD>X<TD>X<TD>X <TR><TD>1253<TD>Windows 3.1 Greek<TD>X<TD><TD>X<TD>X<TD>X <TR><TD>1254<TD>Windows 3.1 Turkish<TD>X<TD><TD>X<TD>X<TD>X <TR><TD>1255<TD>Hebrew<TD>X<TD><TD><TD><TD>X <TR><TD>1256<TD>Arabic<TD>X<TD><TD><TD><TD>X <TR><TD>1257<TD>Baltic<TD>X<TD><TD><TD><TD>X <TR><TD>1361<TD>Korean (Johab)<TD>X<TD><TD><TD>**<TD>X <TBODY> <TR><TD>437<TD>MS-DOS United States<TD><TD>X<TD>X<TD>X<TD>X <TR><TD>708<TD>Arabic (ASMO 708)<TD><TD>X<TD><TD><TD>X <TR><TD>709<TD>Arabic (ASMO 449+, BCON V4)<TD><TD>X<TD><TD><TD>X <TR><TD>710<TD>Arabic (Transparent Arabic)<TD><TD>X<TD><TD><TD>X <TR><TD>720<TD>Arabic (Transparent ASMO)<TD><TD>X<TD><TD><TD>X </TABLE> Acesta poate arta ca n figura urmtoare:

Capitolul 6. Utilizarea frame-urilor n limbajul HTML Frame-urile HTML permit autorilor de pagini Web prezentarea documentelor n zone de ecran multiple, zone care pot fi ferestre independente sau subferestre ale ferestrei principale a browserului. Fereastra browserului este astfel divizat la fel cum un tabel mparte o pagin. n fiecare dintre aceste zone se pot ncrca diverse i diferite (!) documente HTML. Aceste zone multiple ofer posibilitatea de a pstra anumite informaii vizibile n timp ce altele snt derulate (scroll) sau nlocuite. de exemplu n aceeai fereastr un frame poate afia un banner static, un altul un meniu de navigare i al treilea documentul propriu-zis care poate fi derulat (deplasat, scroll) sau nlocuit prin comenzile din cel de-al doilea frame. Dincolo i de avantajele legate de prezentarea mult mai potrivit a informaiilor, aceast posibilitate ofer i o cretere a vitezei de ncrcare a unor pagini. Dac meniu de navigare este alctuit din butoane (care snt elemente grafice), acestea pot fi ncrcate doar o singur dat i folosite cu diverse contexte (pagini), fr ca browserul s fie nevoit s le ncarce sau chiar s le afieze de fiecare dat cnd se schimb pagina. n continuare se prezint un document simplu care conine frame-uri: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd"> <HTML> <HEAD> <TITLE>A simple frameset document</TITLE> </HEAD> <FRAMESET cols="20%, 80%"> <FRAMESET rows="100, 200"> <FRAME src="contents_of_frame1.html"> <FRAME src="contents_of_frame2.gif"> </FRAMESET>

<FRAME src="contents_of_frame3.html"> <NOFRAMES> <P>This frameset document contains: <UL> <LI><A href="contents_of_frame1.html">Some neat contents</A> <LI><IMG src="contents_of_frame2.gif" alt="A neat image"> <LI><A href="contents_of_frame3.html">Some other neat contents</A> </UL> </NOFRAMES> </FRAMESET> </HTML> care ar putea arta astfel: +---------------------------------------+ | | | | Frame 1 | | | | | |---------| | | | Frame 3 | | | | | Frame 2 | | | | | | | | + --------------------------------------+ Pentru browserele care nu pot afia frame-uri se ofer un element special NOFRAMES n care se descrie pagina pentru acest caz (din ce n ce mai rar!). Un document care descrie modalitatea n care frame-urile snt poziionate pe ecran (layout-ul frame-urilor) se numete document frameset i are o structur diferit de cea a unui document fr frame-uri. Un document standard are o seciune HEAD i una (sau mai multe) seciuni BODY. Un document cu frame-uri are i el o seciune HEAD dar n locul seciunii BODY are o seciune special descris de elementul FRAMESET. Seciunea descris de FRAMESET specific modul de aranjare (layout-ul) zonelor ocupate de frame-uri n fereastra principal a browserului. n plus aceast seciune poate conine i un element NOFRAMES pentru browserele ce nu pot afia frame-uri. Elementele ce n mod normal apreau n BODY nu trebuie s apar naintea primului element FRAMESET, pentru c n acest caz elementul FRAMESET va fi ignorat. Relativ la frame-uri exist trei elemente (seturi de taguri): <FRAMESET> ... </FRAMESET> - divide fereastra browserului (sau un alt frame deja definit) n frame-uri specificate ca rnduri sau coloane din fereastra respectiv (acest element trebuie s apar ntre tagul de sfrit </HEAD> i tagul <BODY>); <FRAME> ... </FRAME> definete caracteristicile unui frame particular dintr-un set de frame-uri (tagurile elementului FRAME trebuie s apar n interiorul tagurilor elementului FRAMESET); <NOFRAMES> ... </NOFRAMES> descrie informaia care se afieaz dac browserul nu suport frame-uri (tagul NOFRAMES nu trebuie s includ elementul BODY). 1. Descrierea layout-ului documentului cu frame-uri (elementul FRAMESET)

Modul de aranjare al subspaiilor ocupate de frame-uri (al setului de frame-uri, frameset-ului) ntro fereastr se descrie cu elementul FRAMESET. Acesta are ca argumente ROWS, care

definete numrul de subspaii orinzontale i COLS care definete numrul de subspaii verticale. Folosirea simultan a ambelor atribute mparte spaiul ocupat de frame-uri ntr-un grid, umplut de la stnga la dreapta i de sus n jos: nti rndul de sus, de la stnga la dreapta, apoi rndul al doilea, tot de la stnga la dreapta, .a.m.d. Dac ROWS nu are valoare, fiecare coloan se extinde pe lungimea ntregii pagini, iar dac lipsete COLS fiecare rnd se extinde pe ntreaga lime. Dac lipsesc amndou frame-ul ia exact dimensiunea paginii care-l definete. Exemple: 1. mprirea ecranului vertical n dou pari egale: <FRAMESET rows="50%, 50%"> ... restul definiiilor ... </FRAMESET> 2. Crearea a 3 coloane: a doua cu dimensiune fix de 250 pixeli (util dac are n ea o imagine de aceast lime), prima primind 25% din spaiul care mai rmne i a treia cu 75% din acesta: <FRAMESET cols="1*,250,3*"> ... restul definiiilor... </FRAMESET> 3. Grid de 2x3 subspaii: <FRAMESET rows="30%,70%" cols="33%,34%,33%"> ... restul definiiilor ... </FRAMESET> 4. Presupunem c ferestra browserului are dimensiunea curent de 1000 pixeli nlime. Definim 4 rnduri care au: primul cu 30% din aceast dimensiune (300 de pixeli), al doilea cu dimensiunea exact de 400 de pixeli. Rmn astfel 300 de pixeli pentru a fi mprii ntre rndurile 3 i 4. Al patrulea rnd are dimensiunea ("2*") de dou ori ct al treilea ("*"), nseamn c are 200 pixeli nlime, iar ultimul are 100 <FRAMESET rows="30%,400,*,2*"> ... restul definiiilor ... </FRAMESET> Dac dimensiunile nu fac 100%, diferena este gestionat de browser: dac mai rmne se aloc fiecrui frame proprional cu dimensiunea sa, dac e prea mult se reduce dimensiunea fiecrui frame n funcie de proporia din spaiul total ocupat de fiecare frame. Elementul FRAMESET Sintaxa: <FRAMESET>... </FRAMESET> Atribute posibile: Conine: ROWS=MultiLengths (lungimile rndurilor) COLS=MultiLengths (lungimile coloanelor) ONLOAD=Script (toate frame-urile au fost ncrcate) ONUNLOAD=Script (toate frame-urile au fost eliminate) atribute core

 Unul sau mai multe elemente FRAMESET i FRAME i, opional, un element NOFRAMES Coninut n: Descriere: Acest element este un container de frame-uri, utilizat pentru a mpri o fereastr n subspaii dreptunghiulare numite frame-uri. Documentul care include acest element (document cu frame-uri sau frameset document) elementul FRAMESET cel mai din exterior ia locul lui BODY i urmeaz imediat elementul HEAD. Atributele ROWS i COLS definesc dimensiunea fiecarui frame din set. Fiecare atribut ia ca valoare o list de lungimi specificate n pixeli, ca procent sau ca lungime relativ. O lungime relativ este exprimat ca i*, undei este un ntreg. De exemplu un set de frame-uri definit cu ROWS="3*,*" (* este echivalent cu 1*) va avea primul rnd de trei ori mai nalt dect al doilea. Valorile specificate pentru ROWS dau nlimea fiecrui rnd, de sus n jos, iar cele date pentru COLS dau limea fiecrei coloane, de la stnga la dreapta. Dac ROWS sau COLS snt omise, valoare implicit pentru fiecare dintre aceste atribute este 100%. Dac snt specificate ambele, se definete un grid (caroiaj) care se umple de la stnga la dreapta i de sus n jos. Cnd se folosesc dimensiuni n pixeli acestea trebuie combinate cu lungimi relative pentru a acoperi diversele dimensiuni ale ferestrelor. Dimensiunile fixe n pixeli se folosesc doar n frame-urile care conin imagini sau alte obiecte de dimensiune fix i cunoscut. n general, ns, se prefer procentele datorit capacitii de adaptare la diversele dimensiuni ale ferestrelor. Elementul FRAMESET accept, de asemenea, i atributele ONLOAD i ONUNLOAD pentru a specifica aciuni client-side executate de scripturi cnd frame-urile snt ncrcate, respectiv eliminate. Exemplu: Acest exemplu descrie un document (grid) cu 2 rnduri i 3 coloane. De remarcat ncercarea de a formata documentul i n cazul n care browserul nu suport frame-uri asemntor cu originalul. <FRAMESET ROWS="70%,30%" COLS="33%,33%,34%"> <FRAME NAME="Photo1" SRC="Row1_Column1.html"> <FRAME NAME="Photo2" SRC="Row1_Column2.html"> <FRAME NAME="Photo3" SRC="Row1_Column3.html"> <FRAME NAME="Caption1" SRC="Row2_Column1.html"> <FRAME NAME="Caption2" SRC="Row2_Column2.html"> <FRAME NAME="Caption3" SRC="Row2_Column3.html"> <NOFRAMES> <BODY> <H1>Table of Contents</H1> <UL> <LI> <A HREF="Row1_Column1.html">Photo 1</A> (<A HREF="Row2_Column1.html">Caption</A>) </LI> <LI> <A HREF="Row1_Column2.html">Photo 2</A> (<A HREF="Row2_Column2.html">Caption</A>) </LI> <LI> <A HREF="Row1_Column3.html">Photo 3</A> (<A HREF="Row2_Column3.html">Caption</A>) HTML

</LI> </UL> </BODY> </NOFRAMES> </FRAMESET> Iar exemplul urmtor folosete elemente FRAMESET mbricate pentru a defini 2 frame-uri n primul rnd i un frame n rndul al doilea: <FRAMESET ROWS="*,100"> <FRAMESET COLS="40%,*"> <FRAME NAME="Menu" SRC="nav.html" TITLE="Menu"> <FRAME NAME="Content" SRC="main.html" TITLE="Content"> </FRAMESET> <FRAME NAME="Ad" SRC="ad.html" TITLE="Advertisement"> <NOFRAMES> <BODY> ... </BODY> </NOFRAMES> </FRAMESET> 2. Seturi de frame-uri mbricate Frame-urile descrise de un document pot fi mbricate orict de mult prin includerea unui element FRAMESET n alt element FRAMESET. n exemplul urmtor primul element FRAMESET (cel din exterior) divide tot spaiul disponibil n 3 coloane egale. Al doilea FRAMESET, din interiorul primului, divide a doua zon n rnduri de nlime inegal. <FRAMESET cols="33%, 33%, 34%"> ...coninutul primului frame ... <FRAMESET rows="40%, 50%"> ... coninutul celui de al doilea frame, primul rnd ... ... coninutul celui de al doilea frame, al doilea rnd ... </FRAMESET> ... coninutul celui de al treilea frame ... </FRAMESET> 3. Partajarea datelor ntre frame-uri

Se pot partaja date ntre diverse frame-uri prin includerea acestora ntr-un element OBJECT. Acesta va fi inclus n elementul HEAD al documentului care descrie frame-urile i va fi denumit cu atributul ID. Orice document ce reprezint coninutul unei frame l va putea accesa prin intermediul acestui identificator. Exemplul urmtor ilustreaz modul n care un script poate referi un element OBJECT definit pentru tot setul de frame-uri: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd"> <HTML> <HEAD> <TITLE>This is a frameset with OBJECT in the HEAD</TITLE> <!Acest obiect NU este afiat --> <OBJECT id="myobject" data="data.bar"></OBJECT> </HEAD> <FRAMESET> <FRAME src="AnotherPage.html" name="AnotherPage"> </FRAMESET>

</HTML> <!-- In AnotherPage.html --> <HTML> <HEAD> <TITLE>... Page title bla, bla, bla ... </TITLE> </HEAD> <BODY> ... nceputul documentului ... <P> <SCRIPT type="text/javascript"> parent.myobject.myproperty </SCRIPT> ... restul documentului ... </BODY> </HTML> 4. Definirea coninutului i atributelor unui frame (elementul FRAME)

Coninutul (documentul care se ncarc n frame) i nfiarea unui frame (detalii despre marginile frame-ului i despre posibilitile de scroll) snt definite de elementul FRAME prin intermediul unor atribute specifice. n plus frame-urile se pot identifica prin nume care pot fi utilizate la navigare: tagul ANCHOR poate specifica un atribut (NAME) care s indice frame-ul n care se ncarc documentul indicat de legtur. Elementul FRAME Sintaxa: <FRAME> Atribute posibile: Conine: Coninut n: Descriere: Acest element definete un frame un subspaiu dreptunghiluar dintr-un document cu frameuri (dintr-un set de frame-uri). Fiecare element FRAME trebuie s apar ntr-un element FRAMESET care i definete dimensiunea. FRAMESET vid (nu conine nimic) NAME=CDATA (numele frame-ului) SRC=URI (coninutul frame-ului) LONGDESC=URI (descriere lung a frame-ului) FRAMEBORDER=[ 1 | 0 ] (marginea frame-ului) MARGINWIDTH=Pixels (limea marginii) MARGINHEIGHT=Pixels (nlimea marginii) NORESIZE (dezactiveaz posibilitatea de redimensionare a frame-ului) SCROLLING=[ yes | no | auto ] (posibilitatea de scroll) atribute core

Atributul SRC ofer adresa (URI) de unde se va nrca coninutul frame-ului, care este, n mod tipic, un document HTML. Dac este ns o imagine, o secven video sau un alt obiect similar i acesta nu poate fi descris n mod adecvat cu atributul TITLE al lui FRAME, atunci autorul paginii respective va trebui s folosesc atributul LONGDESC pentru a oferi a adres (URI) a descrierii HTML a obiectului respectiv. Nu se recomand ns aceast metod, pentru a se permite o indexare eficient de ctre motoarele de cutare, precum i o utilizare accesibil n cazule browsere-lor nevizuale. Atributul NAME d un nume frame-ului respectiv pentru a putea fi utilizat cu atributul TARGET al elementelor A, BASE, FORM i LINK. Valoarea acestui atribut trebuie s nceap cu un caracter din domeniul A-Z sau a-z. Aceasta trebuie s fie citibil i s se bazeze pe coninutul frame-ului respectiv. De exemplu NAME=left este nerecomandat, ntruct nu spune nimic despre ce se gsete n frame-ul respectiv, n timp ce NAME=nav este i aceasta nerecomandat, nefiind suficient de clar (nu este citibil). Mult mai sugestiv este o atrbuire de genul NAME=Content sau NAME=Navigation. i atributul TITLE poate fi, de asemenea, folosit pentru a oferi un titlu mai lung pentru frame, dar acesta nu este suportat de toate browserele. Atributele prezentaionale acceptate pot fi nlocuite de style-sheet-uri (i e recomandabil s fie aa), dar snt, nc, mai mult suportate de browsere. Atributul FRAMEBORDER specific dac un frame are (valoarea 1) sau nu (valoarea 0) margine vizibil. Valoarea implicit este 1. Acest atribut poate fi suprapus de cel al frame-urilor adiacente. Un frame care nu are margine nu poate fi nici redimensionat. Atributele MARGINWIDTH i MARGINHEIGHT definesc numrul de pixeli folosii ca margini stnga/dreapta i, respectiv, sus/jos. Valorile trenuie s fie mai mari ca 1 pixel, iar atributul boolean NORESIZE mpiedic utilizatorul s redimensioneze frame-ul. Atributul SCROLLING specific dac se vor oferi scroll-bar-uri pentru frame-uri. Valoarea implicit (auto) le genereaz atunci cnd este cazul. Valoarea yes le afiseaz tot timpul, iar valoarea no le suprim, chiar cnd snt necesare. Exemplu: Fie urmtorul document cu frame-uri: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd"> <HTML> <HEAD> <TITLE>A frameset document</TITLE> </HEAD> <FRAMESET cols="33%,33%,33%"> <FRAMESET rows="*,200"> <FRAME src="contents_of_frame1.html" scrolling="no"> <FRAME src="contents_of_frame2.gif" marginwidth="10" marginheight="15" noresize> </FRAMESET> <FRAME src="contents_of_frame3.html" frameborder="0"> <FRAME src="contents_of_frame4.html" frameborder="0"> </FRAMESET> </HTML> Acest exemplu creaz 4 frame-uri cu layout-ul (poziionarea) ca n figura urmtoare: +------------------------------------------+ |Frame 1 |Frame 3 |Frame 4 | | | | | | | | | +------------| | |

|Frame 2 | | | | | | | + -----------------------------------------+ i ilustreaz utilizarea atributelor lui FRAME. Frame-ul 1 nu are bare de scroll; frame-ul 2 las spaiu n jurul coninutului su (care este iniial o imagine) i nu este redimensionabil; ntre frame-urile 3 i 4 nu este desenat marginea, care va fi, toti desenat (implicit, nefiind specificat altfel) ntre frame-urile 1, 2 i 3.

5.

Specificarea coninutului iniial al unui frame (atributul SRC)

Coninutul iniial al unui frame (resursa care se ncarc n acel frame: document HTML, imagine, animaie, etc) se specific cu atributul SRC al elementului FRAME. Pentru exemplul anterior, reluat aici: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd"> <HTML> <HEAD> <TITLE>A frameset document</TITLE> </HEAD> <FRAMESET cols="33%,33%,33%"> <FRAMESET rows="*,200"> <FRAME src="contents_of_frame1.html" scrolling="no"> <FRAME src="contents_of_frame2.gif" marginwidth="10" marginheight="15" noresize> </FRAMESET> <FRAME src="contents_of_frame3.html" frameborder="0"> <FRAME src="contents_of_frame4.html" frameborder="0"> </FRAMESET> </HTML> se creaz 4 frame-uri n care se ncarc 3 documente HTML (n frame-urile 1, 3 i 4 din documentele contents_of_frame1.html, contents_of_frame3.html i, respectiv contents_of_frame4.html) i o imagine (n frame-ul 2, din fiierul contents_of_frame2.gif). De reinut: Coninutul unei frame NU trebuie s fie n acelai document cu definiia frame-ului! Exemplu ILEGAL (eronat): Urmtoarea definiie a unui set de frame-uri nu este legal ntruct coninutul celui de al doilea frame este n acelai document ca i definiia setului de frame-uri (frameset-ului): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd"> <HTML> <HEAD> <TITLE>A frameset document</TITLE> </HEAD> <FRAMESET cols="50%,50%"> <FRAME src="contents_of_frame1.html"> <FRAME src="#anchor_in_acelasi_document"> <NOFRAMES> ...text... <H2><A name="anchor_in_acelasi_document">Important section</A></H2> ...alt text... </NOFRAMES> </FRAMESET> </HTML>

6. Specificarea numelui unui frame (atributul NAME) i utilizarea lui ntr-un link (TARGET) Prin asignarea unui nume uneu frame cu ajutorul atributului NAME, autorii pot referi acel frame ca int (destinaie) pentru legturile definite de alte elemente. Aceasta se realizeaz cu atributul TARGET al acestora i poate fi utlizat pentru crearea link-urilor uzuale (A, LINK), imaginilor senzitive (AREA) i a formelor (FORM). Se prezint n continuare un exemplu care sugereaz o modalitate de a modifica dinamic coninutul unui frame. Definim nti setul de frame-uri n documentul frameset.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd"> <HTML> <HEAD> <TITLE>A frameset document</TITLE> </HEAD> <FRAMESET rows="50%,50%"> <FRAME name="fixed" src="init_fixed.html"> <FRAME name="dynamic" src="init_dynamic.html"> </FRAMESET> </HTML> Acesta definete 2 frame-uri n care se vor ncrca 2 documente HTML. Coninutul lui init_dynamic.html, ncrcat n frame-ul denumit "dynamic" ar putea fi: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <HTML> <HEAD> <TITLE>Document cu legturi int ntr-un frame cu nume</TITLE> </HEAD> <BODY> ...partea de nceput... <P>Aici se poate avansa la <A href="slide2.html" target="dynamic">Slide-ul 2.</A> ...altele... <P>Iar aici se poate avansa la <A href="slide3.html" target="dynamic">Slide-ul 3.</A> </BODY> </HTML> Activarea oricrei legturi va deschide un nou document, dar de fiecare dat n frame-ul numit "dynamic", n timp ce coninutul celuilalt frame "fixed" rmne neschimbat. De reinut: 1. O definiie a setului de frame-ului NU POATE FI MODIFICAT niciodat, doar coninutul acestora putnd fi modificat dinamic. Din momentul n care apare prima modificare dinamic, definiia iniial a frame-urilor (frameset-ului) nu mai reflect starea curent a acestora. 2. Nu se poate codifica (i reine) starea global a unui set de frame-uri i, de aceea, multe browsere nu permit asignarea unui bookmark (semn de carte) unui astfel de frameset. 3. Dac se utilizeaz frame-uri, navigarea nainte i napoi se complic, autorii fiind responsabili de modalitatea de a parcurge astfel de documente, prin intermediul legturilor din interiorul acestora.

Cnd mai multe legturi din acelai document indic aceeai int (acelai frame) este posibil s se specifice aceasta o singur dat, renunndu-se la atributul TARGET setat la fiecare element n parte. Aceasta se poate realiza prin setarea atributului TARGET al elementului BASE. Pentru exemplul anterior se poate defini un element BASE. cruia i se poate specifica o valoare pentru atributul TARGET (frame-ul "dynamic"), renunnd la specificarea lui n elementele A care ncarc documentele n acesat int: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <HTML> <HEAD> <TITLE>Document cu legturi int ntr-un frame cu nume</TITLE> <BASE href="http://www.pal.ro/Slides" target="dynamic"> </HEAD> <BODY> ...partea de nceput... <P>Aici se poate avansa la <A href="slide2.html">Slide-ul 2.</A> ...altele... <P>Iar aici se poate avansa la <A href="slide3.html">Slide-ul 3.</A> </BODY> </HTML> Browserele determin n care frame vor ncrca o resurs dup urmtorul algoritm (dup urmtoarele prioriti, de la cele mai mari spre cele mai mici): 3. Dac un element are atributul TARGET setat la un frame cunsocut, cnd elementul este activat (de ex. click pe un link) resursa indicat de element se ncarc n acel frame. 4. Dac un element NU are atributul TARGET specificat, dar l are elementul BASE, atunci acesta determin frame-ul n care se ncarc resursa. 5. Dac nici elementul i nici BASE nu definesc o int (atributul TARGET nesetat) resursa desemnat (indicat) de element se ncarc n frame-ul care conine elementul respectiv. 6. Dac un atribut TARGET refer un frame necunoscut, browser-ul va crea o nou fereastr i un nou frame n aceasta, asigneaz numele necunoscut pn n acel moment acelui frame i ncarc resursa n acesta. n plus browserele pot oferi mecanisme de suprapunere a atributului TARGET. 7. Descrierea lung a unui frame (atributul LONGDESC)

Atributul special LONGDESC permite autorilor s creeze documente cu frame-uri mult mai accesibile pentru browser-ele nevizuale. Acest atribut definete o resurs care ofer o descriere mai lung (pe larg) a unui frame. Aceast resurs este asociat cu frame-ul, nu cu coninutul acestuia, i de aceea, n timp, descrierea lung poate deveni neadecvat coninutului la un moment de timp (dup schimbarea coninutului frame-ului respectiv). O consecin a acestui comportament este recomandarea de a nu include o imagine ca singur coninut al unui frame. Mai bine este nglobarea imaginii respective ntr-un al document i specificarea acestuia ca i coninut al unui frame, ca n exemplul urmtor: Urmtorul set de 2 frame-uri conine: n frame-ul din stnga un cuprins, iar frame-ul din dreapta, iniial va conine o imagine: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40">

<HTML> <HEAD> <TITLE>Un document ce definete GREIT un frameset</TITLE> </HEAD> <FRAMESET cols="20%, 80%"> <FRAME src="table_of_contents.html"> <FRAME src="ostrich.gif" longdesc="ostrich-desc.html"> </FRAMESET> </HTML> Dac se include direct imaginea n frame, independent de orice alt element, nu mai exist alt posibilitate de a specifica un text alternativ la acea imagine n afara atributului LONGDESC. Dac se va schimba coninutul frame-ului din dreapta, descrierea acestuia va rmne aceeai, fr nici o posibilitate de a redescrie noul coninut (ntr-o manier alternativ). De aceea, n locul specificrii directe a imaginii ca i coninut al frame-ului din dreapta, se specific un al document HTML care va conine imaginea respectiv: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40"> <HTML> <HEAD> <TITLE>Un document ce definete CORECT un frameset</TITLE> </HEAD> <FRAMESET cols="20%, 80%"> <FRAME src="table_of_contents.html"> <FRAME src="ostrich-container.html"> </FRAMESET> </HTML> <!-- In ostrich-container.html: --> <HTML> <HEAD> <TITLE>The fast and powerful ostrich</TITLE> </HEAD> <P> <OBJECT data="ostrich.gif" type="image/gif"> These ostriches sure taste good! <! coninut alternativ --> </OBJECT> </HTML> 8. Specificarea coninutului alternativ al unui document cu frame-uri (NOFRAMES)

Dac browser-ul nu poate afia coninutul unui document ce folosete frame-uri, se poate specifica o alternativ la acesta prin intermediul elementului NOFRAMES. Aceast alternativ va fi folosit i de browser-ele care pot afia frame-uri dar au fost configurate s nu le afieze. Elementul NOFRAMES poate fi folosit ntr-o seciune FRAMESET a unui document: Exemplu: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40"> <HTML> <HEAD> <TITLE>Un document ce definete un frameset dar are i NOFRAMES</TITLE> </HEAD> <FRAMESET cols="50%, 50%"> <FRAME src="main.html">

<FRAME src="table_of_contents.html"> <NOFRAMES> <P>Aici este <A href="main-noframes.html"> versiunea documentului fr frame-uri.</A> </NOFRAMES> </FRAMESET> </HTML> Elementul NOFRAMES Sintaxa: <NOFRAMES>... </ NOFRAMES > Atribute posibile: Conine: n HTML 4.0 Transitional: elemente inline, elemente tip block level n HTML 4.0 Frameset: un element BODY care trebuie s nu conin nici un NOFRAMES Coninut n: APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, FRAMESET, IFRAME, INS, LI, MAP, NOSCRIPT, OBJECT, TD, TH Descriere: Acest element descrie coninutul unui document ce trebuie afiat cnd frame-urile nu snt afiate. NOFRAMES este folosit n mod tipic ntr-un document cu frame-uri (ce definete un frameset) pentru a oferi informaia care trebuie afiat de browser-ele care nu suport frameuri. Cnd este folosit ntr-un FRAMESET, NOFRAMES trebuie s conin un element BODY. n acest caz nu mai trebuie s apar ns nici un element NOFRAMES n elementul BODY. Este recomandabil s se ofere un element NOFRAMES care are semnificaie, i care, la limit, s conin cel puin un link spre o variant de document fr frame-uri. 9. Frame-uri inline (elementul IFRAME) atribute comune

Este posibil s se includ un frame ntr-un bloc de text. Elementul ce permite aceast operaie este IFRAME. Inserarea unui astfel de frame este foarte asemntoare cu inserarea unui obiect prin intermediul elementului OBJECT, permind n ultim imstan inserarea unui document HTML n mijlocul altuia. Informaia care se insereaz este specificat prin atributul SRC, iar coninutul unui element IFRAME va fi afiat doar dac browser-ul nu suport frame-uri. De exemplu, pentru browserele care suport frame-uri, exemplul urmtor va insera un frame, nconjurat de margine, n mijlocul unui text:

<IFRAME src="foo.html" width="400" height="500" scrolling="auto" frameborder="1"> [Browserul dvs. nu suport frame-uri. Putei ns vedea totui <A href="foo.html">documentul </A> ce ar fi trebuit s v apar ntr-un frame inline.] </IFRAME> Spre deosebire de frame-urile obinuite, frame-urile inline nu pot fi redimensionate i de aceea nu au atributul NORESIZE. De remarcat c un document HTML poate fi inserat (nglobat) n altul prin intermediul lui OBJECT. Elementul IFRAME Sintaxa: <IFRAME>... </ IFRAME > Atribute posibile: Conine: Coninut n: Descriere: Acest element definete un frame inline pentru a include obiecte externe (incluznd alte documente HTML). IFRAME ofer un subset de funcii ale lui OBJECT, singurul avantaj fiin acela c poate fi specificat ca TARGET de ctre alte legturi. OBJECT este mai bine suportat dect IFRAME. Atributul SRC ofer adresa de unde se va ncrca coninutul frame-ului n mod tipic un document HTML. Atributul opional NAME specific numele frame-ului permind astfel legturi care s specifice acest frame ca int n care s se ncarce. Coninutul elementului IFRAME (ce este ntre tagul de nceput i cel de sfrit) este alternativ pentru browser-ele care nu suport frame-uri. Pot apare aici elemente inline sau bloc: orice element de tip bloc este permis n interiorul elementului ce-l conine pe IFRAME. De exemplu un IFRAME ntr-un H1 nu poate conine un H2, dar un IFRAME ntr-un DIV poate conine orice element de tip bloc. inline elements, block-level elements inline elements, block-level elements SRC=URI (adresa URI a coninutului frame-ului) NAME=CDATA (numele frame-ului) LONGDESC=URI (link ctre descrierea lung) WIDTH=Length (limea frame-ului) HEIGHT=Length (limea frame-ului) ALIGN=[ top | middle | bottom | left | right ] (alinierea frame-ului) FRAMEBORDER=[ 1 | 0 ] (marginea frame-ului) MARGINWIDTH=Pixels (limea marginii) MARGINHEIGHT=Pixels (nlimea marginii) SCROLLING=[ yes | no | auto ] (posibilitatea de scroll) atribute core

LONGDESC d adresa unei resurse care descrie pe larg coninutul frame-ului. Similar cu atributul elementului FRAME. Atributele WIDTH i HEIGHT specific dimensiunile frame-ului n pixeli sau procente din spaiul disponibil, iar FRAMEBORDER stabilete dac se desenez sau nu marginea. ALIGN specific modul de aliniere fa de coninutul adiacent a frame-ului inclus. ALIGN=middle aliniaz frame-ul fa de linia de baz (baseline), iar pentru a centra n document (pagin) frame-ul se recomand includerea ntr-un bloc centrat: <P ALIGN=center><IFRAME SRC="foo.html" WIDTH=300 HEIGHT=100></IFRAME></P>. Celelalte valori (left i right) indic un frame flotant, care poate fi plasat la marginea din stnga sau dreapta, iar coninutul s curg pe lng. MARGINWIDTH i MARGINHEIGHT definesc un numr de pixeli ce se folosesc ca margine stnga/dreapta, respectiv sus/jos, iar SCROLLING dac snt permise barele scroll. O mai mare flexibilitate n prezentarea frame-urilor este dat de style-sheet-uri. Exemplu: Acest exemplu include documentul reteta.html i ofer i un coninut alternativ: <IFRAME SRC="reteta.html" TITLE="Reteta lui Petrisor"> <!-- Coninut alternativ pentru browser-ele care nu suport IFRAME --> <H2>Reeta lui Petrior</H2> <H3>Ingrediente</H3> ... </IFRAME>

Capitolul 7. Utilizarea formulalelor interactive (forms) n marea majoritate a documentelor (mai ales cele mai vechi), singura interactivitate dintre aplicaie (browser) i cel ce o folosete (utilizatorul) const n faptul c acesta decide ce legtur hypertext din respectivul document s urmreasc. Specificaiile HTML includ ns i o alt metod (de asemenea simpl, primitiv) de cretere a gradului de interactivitate a unui document HTML: formularele (forms) care permit integrarea n document a unor elemente preluate din interfaa aplicaiilor de tip Windows sau X Windows cmpurile text statice i editabile, butoanele radio, csuele de selecie, listele de selecie i cmpurile de editare. Interactivitatea se bazeaz pe faptul c acestea pot fi utilizate pentru introducerea unor date / strngerea de informaie necesar unei alte aplicaii aflat n "spatele" documentului, aplicaie care va utiliza aceste date (introduse de utilizatorul browser-ului i a documentului HTML) i care hotrte ce anume i cum anume va fi oferit clientului, ca rezultat al acestor informaii noi, introduse cu ajutorul formularului. Modul de introducere a datelor n formulare este similar cu modul de a introduce date ntr-o aplicaie Windows. Ca exemple tipice de aciuni realizate cu ajutorul (prin intermediul formularelor) pot fi date: o selecie dintr-o baz de date (starea vremii dintr-o anumit regiune, de pild) un rezultat al unui sondaj (la care a participat cel ce a introdus datele tocmai a participat) vizualizarea la un document cu acces restrns sau orice altceva care ndeplinete criteriile de selecie prezentate n formular

n procesul de proiectare a unui document care utilizeaz un formular HTML exist trei etape: 1. designul i implementarea (n HTML) a formularului de intrare, care va fi vizualizat, explorat i completat de utilizator 2. scrierea unei aplicaii care s interpreteze datele cu care utilizatorul completeaz formularul (aplicaie care primete datele i care este executat de un alt calculator dect cel al utilizatorului, cel care ruleaz browser-ul un server, de obicei cel care gazduiete serverul HTTP i care a oferit pagina cu formularul respectiv) 3. designul i implementarea documentului generat de aplicaia de la punctul 2, ca rspuns la cererea utilizatorului. De regul acest document este scris n HTML, dar aceast restricie nu este obligatorie. Un formular HTML este o seciune de document care conine text, elemente HTML uzuale, dar i elemente speciale numite controale (similare celor din interfaa aplicaiilor Windows csue de selecie, butoane radio, etc), precum i etichete ale acestor controale. Utilizatorii vor completa formularul prin modificarea controalelor (sau coninutului acestora prin introducerea unui text, selectarea unui element dintr-o list, etc) nainte ca acesta s fie trimis unui agent (program) pentru a fi prelucrat (de exemplu unui server Web, unui server de mail, etc). Fiecare control are un nume dat de atributul NAME al acelui control, nume ce este definit (utilizabil, domeniul de definiie) n cadrul elementului FORM n care acesta apare. n plus, fiecare control are o valoare iniial i o valoare curent, fiecare fiind iruri de caractere (valorile posibile i restriciile ce se aplic asupra acestora difer de la un control la altul). n general, valoarea iniial poate fi specificat prin intermediul valorii atributului VALUE, dar la un element de tip TEXTAREA valoarea iniial este dat de coninutul acestuia, pe cnd valoarea iniial a unui element OBJECT este determinat de implementarea acestuia. Valoarea curent a unui control este iniial setat la valoarea iniial, apoi ea poate fi modificat de utilizator prin intermediul aciunilor ce snt permise asupra controlului sau de scripturi.

Valoarea iniial a unui control nu se modific i de aceea atunci cnd un formular este resetat valorile curente ale fiecrui control snt readuse la valorile iniiale. Dac un control nu are specificat valoarea iniial, efectul acestei operaii este nedefinit (poate fi imprevizibil). Cnd un formular este transmis pentru a fi prelucrat, unele controale au numele legat de valoarea curent, astfel c se va transmite agentului (programului) care-l prelucreaz un set de dublete alctuite din numele coontrolului i valoarea sa curent. Astfel de controale snt numite controale de succes (successful controls). Limbajul HTML 4.0 definete urmtoarele tipuri de controale: butoane Autorii paginilor HTML pot crea 3 tipuri de butoane: butoane submit: Cnd este activat (apsat), un astfel de buton trimite un formular unui agent (program) de prelucrare. Un formular poate conine mai mult de un buton submit. butoane reset: Cnd este activat (apsat), un astfel de buton reseteaz toate controalele la valorile lor iniale. butoane push: Aceste butoane nu au o aciune implicit atunci cind snt activate (apsate). Fiecare astfel de buton poate avea asociat un script de tip client-side i genereaz evenimente care determin execuia unor astfel de scripturi (de exemplu cnd se apas un astfel de buton se poate apela un script specific). Autorii creaz butoane cu unul din elementele BUTON sau INPUT, prima variant fiin mai bogat n opiuni. checkbox (csue de marcare) Checkbox-urile (csuele de marcare), ca i butoanele radio, snt elemente cu 2 stri on/off (selectat/deselectat) care pot fi trecute dintr-o stare n alte de ctre utilizitator. Un astfel de element (switch) este "on" (selectat) cnd atributul selected al lui este setat. Cnd un formular este trimis unui agent de prelucrare numai controalele checkbox ce au valoarea "on" devin controale de succes. ntr-un formular mai multe checkbox-uri pot avea acelai nume. Pentru crearea unui checkbox se folosete elementul INPUT. butoane radio Butoanele radio snt exact ca checkbox-urile, cu excepia faptului c atunci cnd apar mai multe ntr-un formular snt mutual exclusive: cnd un astfel de buton este "on" (selectat), toate celelalte care au acelai nume snt trecute automat pe "off". Pentru crearea unui buton radio se folosete elementul INPUT.

meniuri Menurile ofer utilizatorilor posibilitatea de a alege dintre mai multe opiuni. Pentru crearea unui control de tip meniu se folosete elementul SELECT n combinaie cu elementele OPTGROUP i OPTION. text input Autorii pot crea dou tipuri de controale pentru a permite utilizatorilor introducerea unui text. Elementul INPUT creaz un control care are doar o singur linie disponibil pentru introducerea textului, iar elementulTEXTAREA creaz un control cu mai multe linii n care se poate introduce text. n ambele cazuri textul ce se introduce devine valoarea curent a controlului. file select (selecie de fiiere) Acest control permite utilizatorilor s selecteze fiiere astfel nct coninutul acestora s fie transmis odat cu formularul. Pentru crearea unui control tip file select se folosete elementul INPUT. controale ascunse (hidden controls) Se pot crea controale care s nu fie afiate de ctre browsere, dar a cror valori s fie transmise odat cu formularul. Acest tip de control este util pentru a pstra informaie ntre schimburile client/server ce altfel s-ar pierde, datorit naturii fr stare (stateless) a protocolului HTTP. Pentru crearea unui control ascuns se folosete elementul INPUT. controale tip obiect (object controls) Autorii pot insera obiecte generice astfel ca valorile asociate acestora s fie transmise mpreun cu celelalte controale. Pentru crearea unui control ascuns se folosete elementul OBJECT. Elementele utilizate pentru crearea controalelor apar, n general, ntr-un element FORM, dar pot apare i n afara declaraiei acestui element cnd snt utilizate pentru a crea interfee, caz n care nu pot fi controale de succes. 1. Descrierea unui formular (elementul FORM)

Elementul care descrie un formular este FORM. El se comport ca un container pentru controale i specific: Layout-ul (nfisarea) formularului (prin coninutul elementului). Programul ce va prelua formularul completat i transmis (atributul ACTION). Programul care-l recepioneaz trebuie s fie capabil s preia corect i s decodifice perechile nume/valoare transmise pentru a le putea folosi. Metoda prin care datele introduse de utilizator vor fi trimise serverului (atributul METHOD). O codificare a caracterelor acceptabil pentru server, astfel ca acesta s poat prelua formularul (atributul ACCEPT-CHARSET). Browserele utilizatorilor trebuie s-i avertizeze asupra valorilor setului de caractere acceptat i/sau s restricioneze posibilitatea acestora de a introduce caractere necunoscute.

Un formular poate conine n afara controalelor i text i elemente HTML (paragrafe, liste, etc.) Exemplul urmtor arat un formular care va fi procesat de un program numit "adduser", n momentul n care va fi transmis de browser. Metoda utilizat pentru transmitere va fi "post": <FORM action="http://somesite.com/prog/adduser" method="post"> ...coninutul formularului... </FORM> Iar exemplul urmtor arat cum se trimite un formular la o adres de email: <FORM action="mailto:[email protected]" method="post"> ...coninutul formularului... </FORM>

Elementul FORM Sintaxa: <FORM>... </FORM> Atribute posibile: Conine: n HTML 4.0 Strict, unul sau mai multe elemente SCRIPT sau elemente de tip bloc (block-level elements) cu excepia lui FORM In HTML 4.0 Transitional, elemente de tip inline sau elemente tip block-level, exceptnd FORM Coninut n: APPLET, BLOCKQUOTE, BODY, CENTER, DD, DEL, DIV, FIELDSET, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH Descriere: Orice formular interactiv ncepe cu tagul <FORM> i se termin cu </FORM>, iar undeva n interiorul formularului se gsesc tag-urile (elementele) care definesc controalele (INPUT, SELECT, TEXTAREA i BUTON) prin intermediul crora utilizatorul interacioneaz cu acesta, precum i butoanele speciale SUBMIT i, opional, RESET care acioneaz asupra formularului ca entitate. Cele mai importante atribute ale tag-ului snt ACTION (aciune) i METHOD (metod), astfel nct tag-ul de nceput apare de forma: <FORM ACTION="aciune" METHOD="metod"> Valorile lui ACTION specific natura aciunii, care va avea loc printr-un program care va fi executat de serverul care este gazd pentru document. Acest program va trebui s preia datele din formular i s le prelucreze. Astfel: ACTION=URI (handler-ul formularului / programul care l va prelucra) METHOD=[ get | post ] (metoda HTTP folosit la trimiterea formularului) ENCTYPE=ContentType (tipul coninutului / content type utilizat pentru trimitere) ACCEPT-CHARSET=Charsets (codificarea suportat a setului caractere) TARGET=FrameTarget (frame-ul n care se afieaz rezultatele) ONSUBMIT=Script (scriptul care se execut dup trimiterea formularului) ONRESET=Script (scriptul care se execut dup resetarea formularului) atribute comune

 ACTION="URL" specific URL-ul programului care va fi executat, de obicei un program CGI sau un servlet Java. ACTION="mailto: adres@domeniu" specific un program de expediere a coninutului formularului. Aceast aciune nu este ns suportat de toate browserele (de exemplu Microsoft Internet Explorer 3.x)care, n acest caz, n mod tipic, vor deschide o fereastr de compoziie a unui mesaj email. n afara acestor neajunsuri, lipsa unui feedback imediat face aceast metod de aciune nu foarte recomandat pentru a fi utilizat. Atributele METHOD i ENCTYPE specific metoda utilizat pentru a trimite datele formularului serverului care gazduiete programul specificat n ACTION. Cnd metoda este get (implicit), datele formularului snt transmise ca o cerere HTTP GET cu ?form_data adugat la adresa URI specificat de atributul ACTION. Utilizarea metodei get permite ca transmiterea (datelor) formularului s fie coninut complet n URL. Avantajul este ca se pot crea bookmark-uri (semne de carte) pe astfel de adrese, dar are i dezavantajul c nu poate conine caractere non-ASCII ca "" and "". Cea mai important limitare este dat de cantitatea de date care se pot transmite i care depinde de lungimea maxim a adresei URL permis de browser i server. De aceea, pentru siguran, orice formular care conine caractere non-ASCII sau mai mult de 100 caractere trebuie s utilizeze METHOD=post. Cnd metoda este post, datele formularului snt transmise ca o cerere HTTP POST cu datele formularului n corpul cererii. Majoritatea browserelor snt incapabile s creeze un bookmark pe o astfel de cerere, dar posibilitatea transmiteri de caractere non-ASCII i posibilitatea de transmite date orict de mari snt avantajele fa de GET. Atributul ENCTYPE specific tipul coninutului (content type) folosit n transmiterea formularului i are ca valoare implicit application/x-www-form-urlencoded. Acesta are ca rezultat perechi nume/valoare trimise serverului sub forma name1=value1&name2=value2..., cu caracterul spaiu nlocuit de "+" i cu caracterele speciale (ca, de exemplu, "#") nlocuite de "%HH", unde HH este codul hexa al caracterului respectiv.Sfritul de linie (line break) este codificat ca "%0D%0A" un carriage return urmat de un line feed. Dac formularul conine un element INPUT cu atributul TYPE=file, atunci este preferabil s se foloseasc un ENCTYPE de tipul multipart/form-data iar METHOD s fie post. Pentru preluarea datelor din formularele transmise la server autorii nu trebuie s cunoasc exact formatul n care snt codificate datele, ntruct exist biblioteci publice, free (ca de exemplu CGI.pm) care ofer rutine ce preiau transparent ceea ce se trimite cu get sau post (ca application/x-www-form-urlencoded sau multipart/form-data). Se poate i simula o astfel de transmitere cu unelte ca cg-eye care permit vizualizarea imediat, n oglind a datelor ce s-ar trimite. Atributul ACCEPT-CHARSET specific lista de codificri acceptate de handlerul formularului (programul care-l primete i prelucreaz). Valoarea acestui atribut este o list de seturi de caractere ("charsets") separate cu virgul sau blanc. Valoarea implicit este UNKNOWN i este considerat, de obicei, codificarea folosit pentru transmiterea documentului ce conine formularul. Atributul TARGET este folosit n cazul frame-urilor pentru a specifica n care frame se afieaz rspunsul. Dac nu e specificat nici un frame (sau numele nu exist), valoarea implicit este o fereastr nou. Se pot folosi i numele speciale de frame-uri: _blank ferastr nou, fr nume rspunsul se afieaz n frame-ul curent (util pentru suprascrierea _self atributului

BASE al elementului TARGET) _parent rspunsul se afieaz n printele imediat din FRAMESET _top rspunsul se afieaz n fereastra ntreag, fr frame-uri

FORM mai are i atribute pentru a specifica aciuni de tip client-side scripting n cazul anumitor evenimente (ONSUBMIT i ONRESET).

2.

Crearea controalelor de baz ale unui formular (INPUT, BUTTON, TEXTAREA)

Elementul INPUT este cel mai frecvent ntlnit deoarece creaz mai multe tipuri de controale care permit utilizatorului s aleag. Controalele includ trei tipuri de butoane care pot fi apsate, dou tipuri de butoane pe care utilizatorul le poate seta nchis/deschis, un element de selecie fiiere i cmpuri n care poate fi tastat text. Tag-ul INPUT este nevid. Controalele de baz pe care le poate utiliza un autor n cadrul formularelor interactive snt create cu elementul INPUT, individualizarea lor fcndu-se prin intermediul atributului su TYPE. Pe acestea (ca de fapt pe toate controalele unui formular) utilizatorul le expediaz prin intermediul unui buton creat cu INPUT de tipul SEND sau le reintroduce dup acionarea unui buton de tipul RESET. Nu exist o limit asupra numrului de elemente coninute ntr-un formular. Valorile atributului TYPE care creaz diversele tipuri de controale (pentru elementul INPUT) snt: text Creaz un control de introducere a unui text pe o singur linie: text input control. password La fel ca i "text", dar textul introdus este afiat astfel ca s nu fie descifrabil / s fie ascuns (de exemplu cte un asterix pentru fiecare caracter introdus), de aceea se i numete parol. Valoarea curent a acestui control este textul introdus de utilizator, nu cel afiat de formular! De remarcat c protecia oferit n acest fel este minim, textul transmindu-se, dac nu se folosesc tehnici adecvate, n clar! checkbox Creaz o csu de marcare: checkbox. radio Creaz un buton radio: radio button. file Creaz un control utilizat la selecia fiierelor: file select control. Se folosete valoarea atributului VALUE ca nume iniial de fiier. button Creaz un buton care poate fi apsat. Este utilizat prin intermediul valorii atributului VALUE care de fapt i este textul ce apare pe acesta. submit Creaz un buton care trimite datele din formular: submit button. reset Creaz un buton care reiniializeaz datele din formular: reset button. image

Creaz un buton de submit dar care are o nfiare grafic. Valoare atributului SRC specific adresa URI a imaginii care e folosit la decorarea butonului. Se recomand folosirea i a unui text alternativ (cu atributul ALT) pentru cazul cnd imaginea nu e vizibil. Cnd imaginea este apsat (cu mouse-ul, de exemplu) formularul este transmis serverului mpreun cu coordonatele punctului apsat exprimate n pixeli fa de colul stnga-sus. Datele transmise includ name.x=x-valuei name.y=y-value, unde "name" este valoarea atributului NAME, iar x-value i y-value snt valorile coordonatelor. Dac serverul are implementate diferite aciuni n funcie de punctul apsat, utilizatorii cu browsere non-grafice vor fi dezavantajai i de aceea se pot lua n considerare urmtoarele alternative: Utilizarea butoanelor SUBMIT multiple (fiecare cu imaginea lui). Poziia acestora poate fi controlat cu style-sheet-uri. Utilizarea unei hri senzitive de tip client-side image map, care ruleaz pe client, mpreun cu un script. hidden Creaz un control ascuns: hidden control.

Exemplu: Acest exemplu definete un formular simplu care permite utilizatorului introducerea numelui, prenumelui, adresei de email i sexului. Cnd se activeaz (apas) butonul de trimitere (submit) formularul va fi trimis programului specificat de atributul ACTION (aici adduser): <FORM action="http://somesite.com/prog/adduser" method="post"> First name: <INPUT type="text" name="firstname"><BR> Last name: <INPUT type="text" name="lastname"><BR> email: <INPUT type="text" name="email"><BR> <INPUT type="radio" name="sex" value="Male"> Male<BR> <INPUT type="radio" name="sex" value="Female"> Female<BR> <INPUT type="submit" value="Send"> <INPUT type="reset"> </FORM>

Astfel, acest formular poate aprea astfel: Exemplu: Acest exemplu folosete o funcie (verify) scris n JavaScript care este activat cnd 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 coninutul unui fiier indicat de utilizator prin intermediul unui formular. Utilizatorul este ntrebat de numele su i de lista fiierelor al cror coninut se dorete a fi transmis. Prin specificarea valorii atributului ENCTYPE ca "multipart/form-data", fiecare coninut va fi mpachetat pentru a fi transmis ntr-o seciune separat a unui document de tip multipart. <FORM action="http://server.dom/cgi/handle" enctype="multipart/form-data" method="post"> What is your name? <INPUT type="text" name="name_of_sender"> What files are you sending? <INPUT type="file" name="name_of_files"> </FORM> Elementul INPUT Sintaxa:

<INPUT> Atribute posibile: TYPE=[ text | password | checkbox | radio | submit | reset | file | hidden | image | button ] NAME=CDATA (numele care se va asocia elementului) VALUE=CDATA (valoarea introdus) CHECKED (buton radio sau checkbox setat/apsat) SIZE=CDATA (numr sugerat de caractere pentru introducerea unui text)

MAXLENGTH=Number (numr maxim de caractere pentru introducerea unui text) Conine: Coninut n: Descriere: Acest element definete un control al unui formular (form control) pentru a permite unui utilizator s introduc date. El este utilizat de obicei n cadrul lui FORM, dar HTML 4.0 permite i folosirea lui n orice element block-level sau inline (cu excepia lui BUTTON). De remarcat, totui c Netscape Navigator NU va afia nici un element INPUT n afara unui FORM. Cnd formularul este transmis valoarea curent a fiecrui element INPUT din FORM este trimis sub forma unei perechi name/value. Atributul NAME ofer numele ce va fi folosit pentru identificarea controlului respectiv. Tipul valorii depinde de tipul elementului INPUT. Un formular care include un element INPUT trebuie s specifice n tagul elementului FORM METHOD=post i ENCTYPE="multipart/form-data". Nu toate browserele permit trimiterea, odat cu formularul i a coninutului unui fiier. n acest caz trebuie utilizate alte metode: Exemplu: n exemplul urmtor se trimite un document HTML pemtru a fi validat. Numele lui se cere de la utilizator prin intermediul unui formular: block-level elements, inline elements, cu excepia lui BUTTON Nimic 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 modificri asupra elementului) ACCEPT=ContentTypes (tipul de media folosit la transmiterea fiierelor) ACCESSKEY=Character (shortcut key) TABINDEX=Number (poziia 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

<FORM METHOD=post ACTION="/cgi-bin/validate.cgi" ENCTYPE="multipart/formdata"> <P> Selectai un document HTML pentru a fi trimis spre validare. Dac browser-ul Dvs. nu suport aceast metod folosii <A HREF="methods.html">metodele alternative de validare</A>.</P> <P><INPUT TYPE=file NAME="html_file" ACCEPT="text/html"></P> <P><INPUT TYPE=submit VALUE="Validate it!"></P> </FORM> Elementul INPUT poate avea mai muli parametri, cel mai important fiind TYPE, fiecare element TYPE avnd proprii lui parametri pentru definirea n continuare a elementului. Parametrul TYPE specific ce fel de INPUT se ateapt de la utilizator i poate primi urmtoarele valori: Valoare Text Password Descriere Permite utilizatorului s introduc un singur rnd de text La fel ca i Text, 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, la un moment dat, numai unul poate fi activ (setat/deschis) Determin apariia unui buton care poate fi apsat Determin apariia unui buton care, cnd este selectat, reseteaz toate celelalte elemente ale formularului la valorile lor implicite Afieaz un buton care, dac este apsat, transmite formularul URL-ului specificat n ACTION Afieaz un buton Submit grafic (cu o imagine) Permite selecia unui fiier 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, valoarea implicit atribuit este TYPE=TEXT. Atributul NAME este un parametru cerut de toate elementele INPUT, cu excepia elementelor SUBMIT i RESET. Parametrul NAME creaz un nume generic care va fi asociat cu rspunsul utilizatorului i permite serverului s interpreteze formularul pentru a determina corelaia dintre fiecare rspuns al utilizatorului i elementele formularului. NAME poate avea orice valoare. Exemplu: NAME="cini" ntr-o selecie de rase de cini

NAME="profesii" NAME="adres"

ntr-o selecie de profesii pentru un cmp text

Elementul tip text (TYPE=TEXT) Sintaxa: <INPUT TYPE="text" NAME="nume" VALUE="valoare" SIZE=xx MAXLENGTH=yy> Cmpul text este utilizat frecvent ca form de intrare a datelor pentru culegerea unor informaii cum ar fi nume, adrese e-mail, numere de telefon, comentarii scurte sau orice altceva care poate fi tastat pe un rnd. Ca majoritatea elementelor INPUT, un rnd text trebuie s aib un nume (NAME). La trimiterea datelor din formular la server, numelui i va fi asociat valoarea tastat. De pild, pentru culegerea unor adrese email, dac am ales ca nume al rndului NAME=adres, la server va fi trimis secvena adres=ce s-a tastat. Parametrul VALUE este egal cu textul implicit pe care l dorim introdus n rndul text. Dac VALUE lipsete, rndul va fi iniial blanc. Parametrul SIZE (dimensiune) permite setarea lungimii rndului n numr de caractere. Dac numrul de caractere este mai mare (pn la valoarea maxim admis prin MAXLENGTH), rndul se va derula (scroll orizontal). Numrul maxim specificat de MAXLENGTH nu reprezint o cale sigur de a limita numrul de caractere introduse de utilizator care, de exemplu, poate edita pagina ce conine formularul i trimite un numr orict de mare de caractere pentru text. Aceast limitare trebuie luat n considerare i de programul care primete formularul. Dac parametrul SIZE lipsete, se consider c are valoarea implicit de 20 de caractere. Majoritatea navigatoarelor suport cmpuri text formate din mai multe rnduri, definite prin SIZE=X,Y unde X=numr de caractere pe rnd si Y=numr de rnduri. Deoarece HTML suport i comanda TEXTAREA (zon text), elementul tip text se folosete aproape exclusiv la definirea unui singur rnd. Atributul READONLY, nou n HTML 4.0, este destul de puin suportat de browsere. El previne editarea coninutului unui control de tip text sau parol, dar totui snt trimise cu formularul. Exemplu: <FORM> Tastai numele Dvs.: <INPUT TYPE="text" NAME="nume" SIZE=40 MAXLENGTH=60></input> Si adresa e-mail: <INPUT TYPE="text" NAME="adresa" SIZE=30 MAXLENGTH=40></input> </FORM> Tot un control utilizat la introducerea textelor pe o linie se poate crea i cu elementul ISINDEX. Cu ajutorul lui se poate introduce un text avnd oricte caractere. Acesta este ns un element depit, chiar i pentru crearea unui prompter simplu. Exemplu: Se poate nlocui declaraia lui ISINDEX: <ISINDEX prompt="Enter your search phrase: "> cu: <FORM action="..." method="post">

<P>Enter your search phrase: <INPUT type="text"></P> </FORM> Elementul parol (TYPE=PASSWORD) Sintaxa: <INPUT TYPE="password" NAME="nume" VALUE="Valoare" SIZE=xx MAXLENGTH=yy></input> Acest tip de intrri este folosit dac se accept date de la utilizator dar nu se dorete ca informaiile tastate s apar pe ecran (de pild n cazul furnizrii unor informaii confideniale; dar atenie, aceast modalitate nu realizeaz o criptare a datelor). Parametrii NAME, VALUE i MAXLENGTH acioneaz exact ca i n cazul elementului TEXT. Exemplu: Se utilizeaz elemente tip text i parol care au i etichete ataate 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> Csue de selecie (TYPE=CHECKBOX) Sintaxa: <INPUT TYPE="CHECKBOX" NAME="nume" VALUE="valoare" CHECKED> Tipul CHECKBOX (csue de selecie) permite crearea unui buton pe care utilizatorul l poate seta activ/inactiv (nchis/deschis). Funcia ndeplinit de CHECKBOX permite culegerea de rspunsuri la ntrebri simple, pentru care nu exist dect dou rspunsuri posibile. ntr-un formular se pot include oricte csue de selecie. Fiecare va fi independent de celelalte. La trimiterea formularului, vor fi remise serverului doar csuele selectate. Csua selectat implicit are parametrul CHECKED (selectat) n elementul formularului. Elementele CHECKBOX pot conine de asemenea un parametru VALUE care permite setarea irului de caractere care va fi trimis serverului la selectarea csuei. Dac VALUE nu apare, valoare implicit asignat este ON. Utilizatorul poate selecta nici una, una sau mai multe csue. Pentru fiecare csu selectat va fi trimis serverului un ir nume=valoare. Exemplu: <FORM> <INPUT TYPE="CHECKBOX" NAME="cini" VALUE="Cocker"> Cocker <P> <INPUT TYPE="CHECKBOX" NAME="cini" VALUE="Setter"> Setter <P> <INPUT TYPE="CHECKBOX" NAME="cini" VALUE="Mioritic"> Mioritic <P> </FORM> Butoane Radio (TYPE=RADIO) Sintaxa: <INPUT TYPE="radio" NAME="nume" VALUE="valoare" CHECKED>

Elementele tip butoane radio funcioneaz asemntor cu csuele de selecie, adic pot fi n poziiile selectat/deselectat. Diferena const c ntr-un grup de butoane, numai unul poate fi selectat la un moment dat. Selectarea altuia conduce automat la deselectarea celui selectat anterior. Elementul este util pentru a fora selecia unui singur element dintr-o list multipl. Ca i csuele de selecie, butoanele radio pot avea nume generice, acelai pentru toate butoanele unui anumit grup. ntr-un grup poate fi activat un singur buton. Butonul selectat implicit (care este necesar pentru unele browsere) este marcat cu CHECKED. Exemplu: <FORM> <INPUT TYPE="RADIO" NAME="abonament" VALUE="3_luni"> 3_luni <P> <INPUT TYPE="RADIO" NAME="abonament" VALUE="6_luni"> 6_luni <P> <INPUT TYPE="RADIO" NAME="abonament" VALUE="12:luni"> 12 luni <P> </FORM> Exemplu: n exemplul urmtor se selecteaz o metod de plat prin intermediul butoanelor radio. De remarcat c toate butoanele au acelai nume, atributul NAME), deci fac parte din acelai grup. Se mai folosete i o csu (un buton) de marcare. <P>Please indicate your method of payment:</P> <P> <LABEL ACCESSKEY=C> <INPUT TYPE=radio NAME="payment_method" VALUE="credit card" CHECKED> Credit card </LABEL><BR> <LABEL ACCESSKEY=D> <INPUT TYPE=radio NAME="payment_method" VALUE="debit card"> Debit card </LABEL><BR> <LABEL ACCESSKEY=M> <INPUT TYPE=radio NAME="payment_method" VALUE="money order"> Money order</LABEL> </P><P> <LABEL ACCESSKEY=S> <INPUT TYPE=checkbox NAME="send_receipt" VALUE="yes" CHECKED> Send receipt by e-mail </LABEL></P> Elemente tip push-buton (TYPE=BUTTON) Sintaxa: <INPUT TYPE="button" NAME="nume" VALUE="valoare"> Elementele tip buton specific un buton care se poate apsa i care se folosete cu scripturi (client-side). Valoarea atributului VALUE d textul ce apare pe buton. Atributul ONCLICK este folosit n mod tipic pentru a defini o aciune ce se declaneaz cnd butonul este apsat, ca n exemplul urmtor: <INPUT TYPE=button VALUE="Hide non-strict attributes" ID=toggler ONCLICK="toggle()">

n acest caz, n momentul n care butonul este apsat (click) se execut funcia toggle(), definit anterior cu un element SCRIPT. ntruct astfel de butoane snt utile doar cnd posibilitatea de execuie a scripturilor pe partea de client (client-side scripting) este activ (permis), se recomand evitarea unor butoane care nu fac nimic prin inserarea tagului <INPUT TYPE=button> folosind scripturi, ca n exemplul urmtor: <SCRIPT TYPE="text/javascript"> <!-document.write("<INPUT TYPE=button VALUE=\"Hide non-strict attributes\"" + "ID=toggler ONCLICK=\"toggle()\">"); // --> </script> Un set mai complet de opiuni este oferit de elementul BUTTON, dar suportul sczut acordat de browsere acestuia fac utilizarea lui INPUT nc extrem de util. Butonul RESET (TYPE=RESET) Sintaxa: <INPUT TYPE="reset" VALUE="Reseteaz"> n HTML se poate defini un singur buton pentru resetarea tuturor cmpurilor din interiorul unui formular. Resetarea aduce toi parametrii la valorile lor implicite. Butonul de resetare nu are nume deoarece starea lui nu este niciodat transmis serverului, apsarea lui afectnd doar navigatorul utilizatorului. Singurul parametru pentru RESET este VALUE, a crui valoare va fi nscris pe buton. Butonul SUBMIT (TYPE=SUBMIT) Sintaxa: <INPUT TYPE="submit" NAME="nume" VALUE="Trimite"> Elementul INPUT TYPE="submit" (trimite) este utilizat pentru crearea butonului care trimite formularul serverului. La apsarea butonului, formularul i coninutul lui curent snt trimise serverului specificat de atributul ACTION al elementului FORM, utiliznd procedeul specificat cu METHOD. Cmpurile necompletate i butoanele neselectate nu vor fi transmise. Parametru VALUE d o valoare care va fi nscris pe buton. Dac apare i atributul NAME, browserul va trimite o pereche name/value i pentru butonul SUBMIT, aceasta permind existena mai multor butoane SUBMIT ntr-un formular, fiecare cu propria aciune. Butonul grafic SUBMIT (TYPE=IMAGE) Sintaxa: <INPUT TYPE="image" NAME="nume" VALUE="Trimite" SRC="URL" ALT="text" USEMAP="URL"> Elementul INPUT TYPE="image" este utilizat pentru crearea unui buton submit grafic. Atributul SRC trebuie inclus pentru a specifica adresa imaginii folosite, atributul ALT oferind o alternativ (un text) pentru browser-ele care nu afieaz imagini. Numai HTML 4.0 definete acest atribut, browser-ele bazndu-se pe valorile atributelor NAME sau VALUE, astfel c recomandarea este ca toate s aib acelai text asociat. Atributul ALIGN, depit acum, specific modul de aliniere al acestui tip de buton. Valorile top, middle i bottom specific poziia butonului n raport de coninutul adiacent n dreapta i stnga, iar valorile left i right transform butonul ntr-un element flotant, plasnd imaginea la

marginea din stnga, respectiv dreapta, restul coninutului curgnd pe lng el. Pentru a trimite restul coninutului sub buton se folosete <BR CLEAR=left|right|all>. n locul acestui atribut se recomand folosirea proprietilor CSS vertical-align i float. Un astfel de buton trimite n plus i coordonatele punctului n care s-a apsat sub forma perechilor: name.x=x-value i name.y=y-value. Dac se combin atributul USEMAP cu TYPE=image, se definete o hart senzitiv prelucrat de client (client-side image map) dar metoda este foarte puin suportat. Selecia unui fiier (TYPE=FILE) Sintaxa: <INPUT TYPE="file" NAME="nume" VALUE="valoare" ACCEPT="lista"> Elementele tip selecie de fiier creaz un cmp prin intermediul cruia utilizatorii pot trimite fiiere de pe computerul local n reea. Valoarea atributului VALUE specific numele fiierului iniial, dar este ignorat (n mod normal) de toate browser-ele din motive de securitate. Atributul ACCEPT ofer o list cu tipurile de media (fiiere) suportate, permind browser-elor un filtru asupra acestora, dar n general este ignorat. Elemente ascunse (TYPE=HIDDEN) Sintaxa: <INPUT TYPE="file" NAME="nume" VALUE="valoare" ACCEPT="lista"> Elementele tip ascuns permit inserarea n formulare a unor elemente care nu snt vizibile (de fapt nu snt afiate de browser dar ele pot fi vzute n sursa documentului fr nici o problem). Ele snt extrem de utile cnd aplicaiile utilizeaz mai multe documente HTML: ceea ce introduce utilizatorul poate fi transportat de la un formular la altul fr ca acesta s vad acest lucru. De asemenea, astfel de elemente snt utile i pentru anumite scripturi CGI generale, cnd snt folosite pentru a defini variabile pentru acesta, ca n exemplul urmtor (unde se definete un subiect i o adres de email pentru un rspuns trimis prin email): <INPUT TYPE=hidden NAME=recipient VALUE="[email protected]"> <INPUT TYPE=hidden NAME=subject VALUE="Feedback on your course"> Atribute comune tuturor tipurilor de INPUT Atributul DISABLED, puin suportat, dezactiveaz un control. Astfel, un control devine readonly, nu poate primi focusul, este srit cnd se navigheaz cu tasta TAB i, n plus, valoare sa nu este trimis serverului. Atributele ACCESSKEY i TABINDEX se aplic tuturor, excepie fcnd hidden. ACCESSKEY specific un singur caracter Unicode (inclusiv entitile) ca shortcut pentru a da focusul unui control. Acelai rezultat se obine i dac se seteaz la elementul LABEL Atributul TABINDEX specific un numr ntre 0 i 32767 pentru a indica ordinea elementului n lista de parcurgere (cu TAB). Un element cu TABINDEX=0 sau fr TABINDEX va fi vizitat dup toate elementele cu o valoare pozitiv. ntre elementele cu valoare pozitiv a lui TABINDEX, primele se viziteaz cele cu valori mai mici. n caz de egalitate, primele aprute n document snt primele vizitate. Toate variaiile lui INPUT pot specifica i atribute utilizate de scripturi pe diverse evenimente. Pe lng evenimentele de tip core ce apar pentru majoritatea elementelor, INPUT mai accept i urmtoarele: ONFOCUS, cnd elementul primete focusul; ONBLUR, cnd elementul pierde focusul; ONSELECT, cnd textul dintr-un control de tip text sau password este selectat;

 ONCHANGE, cnd elementul pierde focusul i valoarea lui a fost schimbat fa de momentul n care l-a primit Elementul BUTTON Sintaxa: <BUTTON> ... </BUTTON> Atribute posibile: Conine: Elemente inline exceptnd A, INPUT, SELECT, TEXTAREA, LABEL, BUTTON, IFRAME Coninut n: Descriere: Acest element creaz butoane ntr-un mod similar cu INPUT, dar ofer mai multe posibiliti de afiare (mai multe etichete, asocierea cu imagini, coninut). Mai mult, toate browser-ele sugereaz pentru aceste butoane apsarea, spre deosebire de cele definite cu INPUT care pot fi plate. Totui elementul este nou n HTML 4.0 i exist browsere care nc nu-l suport! Butoanele care pot fi definite cu acest element snt submit button (implicit), reset button i push button i snt stabilite de valoarea lui TYPE. Atributele NAME i VALUE determin perechea name/value trimis la server, oferind posibilitatea de avea mai multe butoane submit ntr-un formular. Exemple de tipuri de butoane: <BUTTON NAME=submit VALUE=modify ACCESSKEY=M>Modificare </BUTTON> <BUTTON NAME=submit VALUE=continue ACCESSKEY=C>Continuare </BUTTON> <BUTTON ACCESSKEY=S>Submit <IMG SRC="checkmark.gif" ALT="&#10004;"></BUTTON> <BUTTON TYPE=reset ACCESSKEY=R>Reset <IMG SRC="x.gif" ALT="&#10008;"></BUTTON> <BUTTON TYPE=button ID=toggler ONCLICK="toggle()" ACCESSKEY=H>Hide </BUTTON> Elemente block-level, elemente inline, cu excepia lui BUTTON Elemente block-level exceptnd FORM, ISINDEX, FIELDSET 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 (poziia n ordinea de parcurgere cu TAB) ONFOCUS=Script (elementul a primit focusul) ONBLUR=Script (elementul a pierdut focusul) atribute comune

Atributul DISABLE face butonul inaccesibil: nu se mai poate apsa, nu mai primete focusul i este srit cnd se navigheaz cu TAB. Atributele ACCESSKEY, TABINDEX i cele care specific aciuni de scriptare (ONFOCUS i ONBLUR) se folosesc la fel ca i la INPUT. Exemplu: Acest exemplu l extinde pe cel de la INPUT, dar creaz butoanele Submit i Reset cu BUTON n locul lui INPUT. Butoanele pot conine imagini (inserate cu elementul IMG) i se recomand folosirea atributului ALT al acestora pentru cazul n care nu snt afiate. <FORM action="http://somesite.com/prog/adduser" method="post"> <P> First name: <INPUT type="text" name="firstname"><BR> Last name: <INPUT type="text" name="lastname"><BR> email: <INPUT type="text" name="email"><BR> <INPUT type="radio" name="sex" value="Male"> Male<BR> <INPUT type="radio" name="sex" value="Female"> Female<BR> <BUTTON name="submit" value="submit" type="submit"> Send<IMG src="/icons/wow.gif" alt="wow"> </BUTTON> <BUTTON name="reset" type="reset"> Reset<IMG src="/icons/oops.gif" alt="oops"> </BUTTON> </P> </FORM>

Exemplu ilegal: De remarcat c este ilegal s se asocieze o hart senzitiv cu un IMG care apare ca i coninut al unui element BUTTON. De aceea exemplul urmtor este ILEGAL! <BUTTON> <IMG src="foo.gif" usemap="..."> </BUTTON> Elementul TEXTAREA Sintaxa: <TEXTAREA> ... </TEXTAREA> Atribute posibile: Conine: Coninut n: Descriere: TEXTAREA creaz un control pentru introducerea unui text multi-linie, valoarea iniial fiind afiat de browser la nceput n interiorul controlului (nu trebuie s conin taguri HTML). El este utilizat de obicei n cadrul lui FORM, dar HTML 4.0 permite i folosirea lui n orice element block-level sau inline (cu excepia lui BUTTON). De remarcat, totui c Netscape Navigator NU va afia nici un element TEXTAREA n afara unui formular definit cu FORM. Acest element ofer posibilitatea de a accepta de la utilizator un bloc de text, astfel c acesta i poate "lipi" un document ntreg ntr-o pagin HTML. Elementul TEXTAREA nu este o comand de tip INPUT ci una de cu totul alt tip. Ca i elementele INPUT, regiunile text au un nume care permite identificarea acestui cmp de ctre server, care va primi informaia de form nume=coninut. Elementul TEXTAREA are parametrii (obligatorii) ROWS i COLS care specific dimensiunile ferestrei afiate utilizatorului, exprimate n numr de caractere pe orizontal, respectiv vertical. Aceasta nu nseamn o limitare a utilizatorului n privina volumului de informaie care poate fi tastat deoarece umplerea ferestrei determin apariia unor bare de derulare. Se limiteaz totui cantitatea total de text ce se poate introduce (n practic) la 32 ... 64 KB. Limitarea final este fcut de scriptul CGI sau de servletul Java care primete formularul. Elemente block-level, elemente inline, cu excepia lui BUTTON Text (incluznd entiti) NAME=CDATA (numele care se va asocia elementului) ROWS=Number (numr de rnduri) COLS=Number (numr de coloane) DISABLED (element inactiv/dezactivat) READONLY (previne modificri asupra elementului) ACCESSKEY=Character (shortcut key) TABINDEX=Number (poziia 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

Elementul TEXTAREA nu este vid, ceea ce nseamn c trebuie un terminator </TEXTAREA>. Ceea ce se afl ntre cele dou etichete va apare ca text implicit n cmpul definit. Atributul READONLY, nou n HTML 4.0 i destul de puin suportat, determin afiarea unui text nemodificabil. Diferena fa de textul simplu este ca acesta este trimis serverului odat cu formularul. Atributul DISABLED se comport ca i la INPUT, transformnd textul n read-only. Atributele ACCESSKEY, TABINDEX i cele care specific aciuni de scriptare (ONFOCUS, ONBLUR, ONSELECT i ONCHANGE) se folosesc la fel ca i la INPUT. Exemplu: Acest exemplu creaz un control TEXTAREA de 20 de rnduri i 80 de coloane, avnd iniial 2 linii de text. Acest control este urmat de dou butoane: Submit i Reset. <FORM action="http://somesite.com/prog/text-read" method="post"> <P> <TEXTAREA name="thetext" rows="20" cols="80"> Prima linie a textului iniial. A doua linie a textului iniial. </TEXTAREA> <INPUT type="submit" value="Send"> <INPUT type="reset"> </P> </FORM> 3. Crearea controalelor de selecie ntr-un formular (SELECT, OPTGROUP, OPTION)

HTML permite crearea mai multor tipuri de liste de selecie (meniuri), de orice lungime, prin intermediul elementului SELECT. Fiecare list prezint utilizatorului unul sau mai multe elemente care pot fi selectate individual sau multiplu. Listele pot fi afiate n interiorul unei ferestre sau de forma drop-down. Ferestrele inserate permit accesarea elementelor coninute cu ajutorul unor bare de derulare. n interiorul elementului SELECT snt permise doar dou elemente: text simplu i cel puin un element OPTION. Elementul OPTION este utilizat pentru definirea fiecrui element al meniului. OPTION are un singur parametru: SELECTED. Utilizarea lui nseamn c elementul respectiv este selectat implicit. Atunci cnd un formular este transmis spre a fi prelucrat (submit), numele (NAME) listei va fi trimis serverului mpreun cu elementul selectat din list. Elementele unui meniu pot fi grupate logic n grupuri cu ajutorul elementului OPTGROUP. Aceast posibilitate este util cnd trebuie ales dintr-o list foarte lung: opiunile ce au legtur ntre ele dpdv logic se pot grupa i utiliza mpreun mai uor dect dac snt toate ntr-o singur list (la fel ca submeniurile unui meniu). n HTML 4.0 grupurile nu pot fi, ns, mbricate. Opiuni preselectate Dintre opiunile unei liste pot fi preselectate zero sau mai multe. Determinarea elementelor preselectate se face dup cum urmeaz: Dac nici un element OPTION nu are atributul SELECTED setat, atunci nu vor fi elemente preselectate. Dac un element OPTION are atributul SELECTED setat, atunci acesta va fi preselectat. Daca elementul SELECT are atributul MULTIPLE i mai mult de un element OPTION are atributul SELECTED setat, atunci toate acestea vor fi preselectate

 Se consider eroare dac mai mult de un element OPTION are atributul SELECTED setat i elementul SELECT nu are atributul MULTIPLE. Fiecare browser va aciona diferit, dar nu trebuie s fie preselectat mai mult de o singur opiune La afiarea unui menu, se folosete valoarea atributului LABEL de la fiecare element OPTION pentru afiarea acelei opiuni. Dac nu este specificat se folosete coninutul elementului OPTION. n cazul unui grup de opiuni, atributul LABEL specific eticheta acelui grup de opiuni. Exemplu: Se creaz un meniu ce permite selectarea unor componente software care s se instaleze. Prima i a doua component snt preselectate i pot fi deselectate, celelalte nefiind preselectate. Atributul SIZE indic faptul c meniul are doar 4 rnduri, chiar dac snt 7 opiuni. Ce nu se vede se acceseaz dup ce se face scroll. Dupa definirea meniului apar butoanele Submit i Reset. <FORM action="http://somesite.com/prog/component-select" method="post"> <P> <SELECT multiple size="4" name="component-select"> <OPTION selected value="Component_1_a">Component_1</OPTION> <OPTION selected value="Component_1_b">Component_2</OPTION> <OPTION>Component_3</OPTION> <OPTION>Component_4</OPTION> <OPTION>Component_5</OPTION> <OPTION>Component_6</OPTION> <OPTION>Component_7</OPTION> </SELECT> <INPUT type="submit" value="Send"><INPUT type="reset"> </P> </FORM> Exemplu: n acest exemplu se utilizeaz OPTGROUP pentru a grupa opiunile meniului: <FORM action="http://somesite.com/prog/someprog" method="post"> <P> <SELECT name="ComOS"> <OPTGROUP label="PortMaster 3"> <OPTION label="3.7.1" value="pm3_3.7.1">PortMaster 3 with ComOS 3.7.1 <OPTION label="3.7" value="pm3_3.7">PortMaster 3 with ComOS 3.7 <OPTION label="3.5" value="pm3_3.5">PortMaster 3 with ComOS 3.5 </OPTGROUP> <OPTGROUP label="PortMaster 2"> <OPTION label="3.7" value="pm2_3.7">PortMaster 2 with ComOS 3.7 <OPTION label="3.5" value="pm2_3.5">PortMaster 2 with ComOS 3.5 </OPTGROUP> <OPTGROUP label="IRX"> <OPTION label="3.7R" value="IRX_3.7R">IRX with ComOS 3.7R <OPTION label="3.5R" value="IRX_3.5R">IRX with ComOS 3.5R </OPTGROUP> </SELECT> </FORM> Grupurile (logice) de opiuni snt, n acest caz: PortMaster 3 3.7.1

3.7 3.5 PortMaster 2 3.7 3.5 IRX 3.7R 3.5R

Browser-ele pot permite utilizatorilor selectarea unei opiuni dintr-un grup utiliznd, de exemplu, meniuri ierarhice sau alt mecanism asemntor. O posibil afiare a meniului definit anterior este prezentat n figura urmtoare: Elementul SELECT Sintaxa: <SELECT> ... </SELECT> Atribute posibile: Conine: Coninut n: Descriere: Acest element definete un control pentru selecia dintr-o list de opiuni. El este utilizat de obicei n cadrul lui FORM, dar HTML 4.0 permite i folosirea lui n orice element block-level sau inline (cu excepia lui BUTTON). De remarcat, totui c Netscape Navigator NU va afia nici un element SELECT n afara unui formular definit cu FORM. Elementul SELECT conine unul sau mai multe elemente OPTGROUP sau OPTION pentru a oferi un meniu de posibiliti de alegere pentru utilizator. Fiecare opiune este coninut ntr-un element OPTION, iar acestea pot fi grupate logic cu OPTGROUP. Valoarea atributului NAME va fi trimis serverului ca identificator al controlului (mpreun cu opiunea selectat). elemente de tip block-level, elemente inline, cu excepia lui BUTTON Unul sau mai multe elemente OPTGROUP sau OPTION NAME=CDATA (numele care se va asocia elementului) MULTIPLE (permite selecii multiple) SIZE=Number (numrul de opiuni vizibile) DISABLED (element inactiv/dezactivat) TABINDEX=Number (poziia 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

Elementul SELECT are un parametru opional, SIZE. Dac acest parametru lipsete, valoarea lui implicit este l, lista va fi de tip drop-down i din list poate fi selectat doar un singur element. Utilizarea este pentru situaii similare celor rezolvate de butoanele radio. Dac parametrul este mai mare dect 1, lista este prezentat ntr-o fereastr inserat, valoarea lui SIZE indicnd cte elemente pot fi vzute simultan. Dac lista este mai lung, celelalte elemente pot fi vzute cu ajutorul barei de derulare (scroll) care apare n dreapta listei. Un alt parametru opional pentru <SELECT> este MULTIPLE. Parametrul nu are o valoare numeric asociat, iar prezena lui asigur doar posibilitatea seleciei mai multor elemente ale listei simultan (cu ajutorul tastei CTRL) care vor fi trimise la Submit, ca n exemplul urmtor. <P>Selectai una sau mai multe seciuni n care dorii s cutai: <SELECT NAME=sections MULTIPLE> <OPTION>Web Authoring Reference</OPTION> <OPTION>FAQ Archives</OPTION> <OPTION>Design Elements</OPTION> <OPTION>Tools</OPTION> <OPTION>Feature Article</OPTION> </SELECT> Atributele DISABLED i TABINDEX, precum i cele legate de aciunile de scriptare pe anumite evenimente snt similare cu cele de la INPUT. Exemplu: Exemplul urmtor creaz un meniu de 5 opiuni (5 elemente OPTION), afiat ntr-o fereastr n care snt vizibile simultan 3 opiuni (SIZE=3), prima fiind selectat implicit (OPTION SELECTED>Rou), cu posibilitatea de a selecta mai multe opiuni (MULTIPLE). <FORM> Selectai culorile favorite din urmtoare list: <SELECT NAME="culori" SIZE=3 MULTIPLE> <OPTION SELECTED>Rou <OPTION>Verde <OPTION>Albastru <OPTION>Turcoaz <OPTION>Magenta </SELECT> </FORM>

Elementul OPTGROUP Sintaxa: <OPTGROUP> ... </OPTGROUP> Atribute posibile: Conine: Unul sau mai multe elemente OPTION LABEL=Text (eticheta grupului de opiuni) DISABLED (grupul de opiuni este dezactivat) atribute comune

Coninut n: Descriere: Acest element definete un grup de opiuni ntr-un meniu definit cu SELECT i trebuie s conin cel puin un element OPTION. Atributul LABEL este obligatoriu, identific grupul de opiuni, fiind afiat de browser i pentru utilizator. El trebuie s descrie grupul de opiuni grupate dpdv logic mpreun cu atributele LABEL ale fiecrei opiuni n parte. OPTGROUP nu este foarte bine suportat de toate browserele, dar cele care nu l recunosc nu creaz nici o problem. Cele care l suport permit o afiare mai compact prin intermediul meniurilor cascadate (submeniuri). Cascadarea este ns n HTML 4.0 doar pe un singur nivel (nu snt permise OPTGROUP n OPTGROUP)! Atributul DISABLED face ntregul grup de opiuni inactive (le dezactiveaz), acestea neputnd fi selectate i nici trimise la server odat cu formularul. Exemplu: Exemplul urmtor se poate folosi pentru a cere utilizatorului informaii despre browser-ul pe care l utilizeaz mai frecvent. Se utilizeaz OPTGROUP pentru a grupa informaiile legate de acelai tip de browser (Netscape Navigator, Microsoft Internet Explorer, Opera sau altul). <P>Ce browser Web folosii n mod curent? <SELECT NAME=browser> <OPTGROUP LABEL="Netscape Navigator"> <OPTION LABEL="4.x">Netscape Navigator 4.x or higher</OPTION> <OPTION LABEL="3.x">Netscape Navigator 3.x</OPTION> <OPTION LABEL="2.x">Netscape Navigator 2.x</OPTION> <OPTION LABEL="1.x">Netscape Navigator 1.x</OPTION> </OPTGROUP> <OPTGROUP LABEL="Microsoft Internet Explorer"> <OPTION LABEL="4.x">Microsoft Internet Explorer 4.x </OPTION> <OPTION LABEL="3.x">Microsoft Internet Explorer 3.x</OPTION> <OPTION LABEL="2.x">Microsoft Internet Explorer 2.x</OPTION> <OPTION LABEL="1.x">Microsoft Internet Explorer 1.x</OPTION> </OPTGROUP> <OPTGROUP LABEL="Opera"> <OPTION LABEL="3.x or higher">Opera 3.x or higher</OPTION> <OPTION LABEL="2.x">Opera 2.x</OPTION> </OPTGROUP> <OPTION>Other</OPTION> </SELECT> </P> elementul SELECT

Elementul OPTION Sintaxa: <OPTION > ... </OPTION > Atribute posibile: VALUE=CDATA (valoarea opiunii) SELECTED (opiune iniial selectat) DISABLED (dezactivat/inactiv)

 Conine: Coninut n: Descriere:

LABEL=Text (eticheta opiunii) atribute comune Text (inclusiv entiti) elementul SELECT sau OPTGROUP

Acest element definete o opiune (un elemnt de meniu) ntr-un meniu (list de opiuni). Valoarea acestei opiuni este cea care va fi trimis la Submit i este specificat cu atributul VALUE. Dac lipsete, se consider valoare a acestui element coninutul lui OPTION. Atributul boolean SELECTED definete o opiune ce este iniial selectat preselectat (a se vedea paragraful anterior relativ la elemente preselectate). Exist posibilitatea de a stabili ca opiune preselectat o valoare fr semnificaie (dummy) pentru a fi siguri c utilizatorul selecteaz o opiune i nu trece doar peste meniu. De exemplu, starea civil se poate cere astfel: <SELECT NAME="marital_status"> <OPTION SELECTED VALUE="">Select...</OPTION> <OPTION>Single</OPTION> <OPTION>Married</OPTION> <OPTION>Separated</OPTION> <OPTION>Divorced</OPTION> <OPTION>Widowed</OPTION> </SELECT> Atributul DISABLED, dei nu este suportat global, determin transformarea unei opiuni n opiune inactiv (nu poate fi selectat, nu este trimis odat cu formularul). Atributul LABEL specific eticheta unei opiuni, care altfel (implicit) este coninutul elementului. Se recomand folosirea ei pentru c permite utilizarea mult mai uoar a gruprii cu OPTGROUP, fr a sacrifica compatibilitatea cu browser-ele care nu suport acest element. Exemplu: <P>Which Web browser do you use most often? <SELECT NAME=browser> <OPTGROUP LABEL="Netscape Navigator"> <OPTION LABEL="4.x or higher">Netscape Navigator 4.x</OPTION> <OPTION LABEL="3.x">Netscape Navigator 3.x</OPTION> <OPTION LABEL="2.x">Netscape Navigator 2.x</OPTION> <OPTION LABEL="1.x">Netscape Navigator 1.x</OPTION> </OPTGROUP> <OPTGROUP LABEL="Microsoft Internet Explorer"> <OPTION LABEL="4.x or higher">Microsoft Internet Explorer 4.x</OPTION> <OPTION LABEL="3.x">Microsoft Internet Explorer 3.x</OPTION> <OPTION LABEL="2.x">Microsoft Internet Explorer 2.x</OPTION> <OPTION LABEL="1.x">Microsoft Internet Explorer 1.x</OPTION> </OPTGROUP> <OPTGROUP LABEL="Opera"> <OPTION LABEL="3.x or higher">Opera 3.x or higher</OPTION> <OPTION LABEL="2.x">Opera 2.x</OPTION> </OPTGROUP> <OPTION>Other</OPTION> </SELECT> </P>

Atributul LABEL al elementelor OPTGROUP i OPTION's LABEL au fost introduse mpreun, astfel c un browser sau le suport pe amndou sau pe niciunul. Cele care le suport vor afia acest exemplu folosind atributul LABEL al lui OPTION pentru a oferi ca element de selecie doar numrul de versiune, mpreun cu atributul LABEL al lui OPTGROUP care d numele complet al aplicaiei (browserului), obinndu-se o afiare mai compact. Celelalte, care nu suport atributul OPTGROUP, le vor ignora (mpreun cu atributele lor, aici LABEL), afind numele complet i versiunea la fiecare opiune.

4.

Etichetele controalelor dintr-un formular (elementul LABEL)

Cteva controale care se utilizeaz n formularele interactive au asociate etichete cu ele (butoanele ce se apas), dar multe nu au (cmpurile text, checkbox-urile, butoanele radio i meniu). Pentru controalele care au etichete asociate, browserele trebuie s le foloseasc ca iruri de caractere afiate pentru ele. Pentru cele care nu, specificarea se face cu elementul LABEL. Acesta ataeaz informaie pentru un control i numai unul. Cnd un element LABEL primete focusul l paseaz controlului asociat. Elementul LABEL are un atribut, FOR, care asociaz o etichet cu un alt control, n mod explicit: valoarea atributului FOR trebuie s fie exact aceeai cu valoarea atributului ID al controlului asociat. n acest fel aceluiai control i se pot asocia mai multe elemente LABEL prin crearea de referine multiple (cu ajutorul lui FOR). Exemplu: Acest exemplu creaz un tabel care este folosit pentru a alinia dou controale text (i etichetele asociate lor). Fiecare etichet este asociat explicit cu un control de tip text: <FORM action=" http://somesite.com/prog/adduser " method="post"> <TABLE> <TR> <TD><LABEL for="fname">First Name</LABEL> <TD><INPUT type="text" name="firstname" id="fname"> <TR> <TD><LABEL for="lname">Last Name</LABEL> <TD><INPUT type="text" name="lastname" id="lname"> </TABLE> </FORM> Acelai lucru se poate face i prin includerea elementelor explicite LABEL: <FORM action="http://somesite.com/prog/adduser" method="post"> <LABEL for="firstname">First name: </LABEL> <INPUT type="text" id="firstname"><BR> <LABEL for="lastname">Last name: </LABEL> <INPUT type="text" id="lastname"><BR> <LABEL for="email">email: </LABEL> <INPUT type="text" id="email"><BR> <INPUT type="radio" name="sex" value="Male"> Male<BR> <INPUT type="radio" name="sex" value="Female"> Female<BR> <INPUT type="submit" value="Send"> <INPUT type="reset"> </FORM> Aceast tehnic nu poate fi ns utilizat cnd tabelul este folosit pentru aezarea elementelor n pagin (layout), cnd eticheta este ntr-o celul i controlul asociat n alta. Pentru a se asocia implicit o etichet cu un alt control, controlul trebuie s apar n interiorul (coninutul) elementului LABEL. n acest caz, LABEL poate conine doar un singur control. Eticheta nsi poate fi poziionat sau nainte sau dup controlul asociat. Exemplu: n acest exemplu asociem implicit dou etichete cu dou controale de tip text: <FORM action="..." method="post"> <LABEL> First Name <INPUT type="text" name="firstname"> </LABEL> <LABEL> <INPUT type="text" name="lastname">

Last Name </LABEL> </FORM> Elementul LABEL Sintaxa: <LABEL> ... </LABEL> Atribute posibile: Conine: Coninut n: Descriere: Acest element asociaz o etichet (label) cu un control al unui formular. Prin aceast asociere autorii paginilor Web ofer sugestii importante utilizatorilor de browsere auditive, iar celor care folosesc browsere vizuale li se permite duplicarea unor caracteristici ale interfeei utilizator (GUI), cum ar fi, de exemplu, posibilitatea de a apsa o etichet (text) pentru a selecta un buton radio sau o csu de marcare. Fiecare element LABEL este asociat cu exact un control. Coninutul elementului este eticheta controlului i poate include elemente inline, ca de exemplu IMG sau STRONG. Atributul FOR specific n mod explicit controlul care se asociaz cu LABEL. Valoarea lui FOR trebuie s se potriveasc cu valoarea atributului ID al controlului asociat. n absena lui FOR, elementul LABEL trebuie s conin controlul asociat! Aceast metod (de asociere implicit) funcioneaz n majoritatea cazurilor, dar devine inutulizabil cnd eticheta i controlul asociat snt n celule diferite de tabel, n paragrafe sau diviziuni diferite . Atributul ACCESSKEY, precum i cele legate de aciunile de scriptare pe anumite evenimente snt similare cu cele de la INPUT. Exemplu: Acest exemplu ilustreaz ambele metode de asociere a unei etichete cu un control: asocierea explicit (cu FOR) i asocierea implicit (control coninut de LABEL): <TABLE> <TR> elemente de tip block-level, elemente inline, cu excepia lui BUTTON elemente inline cu excepia lui LABEL FOR=IDREF (cmpul formularului asociat) ACCESSKEY=Character (shortcut key) ONFOCUS=Script (elementul a primit focusul) ONBLUR=Script (elementul a pierdut focusul) atribute comune

<TD> <LABEL FOR=user ACCESSKEY=U>User</LABEL> </TD> <TD> <SELECT NAME=user ID=user> <OPTION>Jean</OPTION> <OPTION>Kim</OPTION> <OPTION>Brian</OPTION> </SELECT> </TD> </TR> <TR> <TD><LABEL FOR=passwd ACCESSKEY=P>Password</LABEL></TD> <TD><INPUT TYPE=password NAME=password ID=passwd></TD> </TR> </TABLE> <P> <LABEL ACCESSKEY=S> <INPUT TYPE=checkbox NAME=save VALUE=yes> Save user name and password in a cookie </LABEL> </P> <P> <LABEL ACCESSKEY=C> Comments to post: <TEXTAREA NAME=comments ROWS=8 COLS=50></TEXTAREA> </LABEL> </P> 5. Elementele de structur dintr-un formular (elementele FIELDSET, LEGEND)

Elementul FIELDSET permite gruparea tematic a controalelor i a etichetelor unui formular. Prin aceast operaie se uureaz procesul de nelegere a scopului pentru care au fost introduse controalele (fcnd documentele mai accesibile), oferind n plus i faciliti de navigare (pentru browserele vizuale, de exmplu cu tasta TAB). Elementul LEGEND permite asignarea unei explicaii (unui titlu, ir de caractere) unui element FIELDSET, mbuntind accesibilitatea la acesta pentru browserele nevizuale. Fie, pentru exemplificare, un formular care s-ar putea utiliza la un cabinet medical. Este mprit n 3 seciuni: informaii personale, antecedente medicale (istoria bolilor) i tratamentul curent. Fiecare seciune conine controale pentru a se introduce informaia corespunztoare. <FORM action="..." method="post"> <P> <FIELDSET> <LEGEND> Informaii Personale</LEGEND> Numele: <INPUT name="personal_lastname" type="text" tabindex="1"> Prenumele: <INPUT name="personal_firstname" type="text" tabindex="2"> Adresa: <INPUT name="personal_address" type="text" tabindex="3"> </FIELDSET> <FIELDSET> <LEGEND>Medical History</LEGEND> <INPUT name="history_illness" type="checkbox" value="Rujeola" tabindex="20"> Rujeola <INPUT name="history_illness"

type="checkbox" value="Varicela" tabindex="21"> Varicela <INPUT name="history_illness" type="checkbox" value="Rubeola" tabindex="22"> Rubeola <INPUT name="history_illness" type="checkbox" value="Pojar" tabindex="23"> Pojar ...alte boli mai vechi... </FIELDSET> <FIELDSET> <LEGEND>Medicamente Curente</LEGEND> Luati medicamente acum? <INPUT name="medication_now" type="radio" value="Yes" tabindex="35">Da <INPUT name="medication_now" type="radio" value="No" tabindex="35">Nu </FIELDSET> <FIELDSET> Daca da, ce luati: <TEXTAREA name="current_medication" rows="20" cols="50" tabindex="40"> </TEXTAREA> </FIELDSET> </FORM> De remarcat c n acest exemplu se poate mbunti reperezentarea vizual a formularului prin alinierea elementelor din fiecare FIELDSET (utiliznd style-sheet-urile), prin adugarea de informaii de culoare i stil (utiliznd tot style-sheet-urile), adugnd scripturi (activnd, de exemplu, zona n care se scriu medicamentele curente doar dac se selecteaz butonul radio cu Da), etc.

Elementul FIELDSET Sintaxa: <FIELDSET> ... </ FIELDSET > Atribute posibile: Conine: Coninut n: APPLET, BLOCKQUOTE, BODY, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH Descriere: Acest element definete un grup de controale ntr-un formular. Prin aceast operaie de grupare, formularele se divid n pri mai mici, mai uor de ntreinut, utilizatorul putndu-se Un element LEGEND urmat de zero sau mai multe elemente de tip bloc sau in-line. atribute comune

orienta mai uor, mbuntind modul de utilizare att pentru browserele vizuale ct i pentru cele auditive. Chiar dac FIELDSET nu este suportat de toate browser-ele, el poate fi utilizat n deplin siguran prin includerea lui ntre tagurile <P> i </P>, sau prin inserarea unui tag P nainte de FIELDSET, n acest fel browser-ele care nu-l recunosc vor include coninutul lui ntr-un element de tip bloc, separat de restul formularului. Coninutul lui trebuie s nceap cu un element LEGEND care s ofere un titlu (o explicaie) pentru grupul de controale, apoi pot s apar oricte elemente inline sau de tip bloc, inclusiv un alt element FIELDSET. Exemplu: Acest exemplu definete un formular pentru comanda unor informaii (manuale): ghid HTML 3.2, ghid HTML 4.0 sau manual de referin CSS. Se cer datele clientului (numele, adresa de email, adresa postal), se cer informaii despre ceea ce se dorete a se cumpra i apoi despre modalitatea de plat. Fiecare grup de informaii se afl ntr-un FIELDSET separat, fiecare avnd un element LEGEND asociat. La sfrit se introduc cele 2 butoane obligatorii ntr-un formular (Submit i Reset), trimiterea formularului fcndu-se ctre un program CGI (order.cgi) aflat n folderul /cgi. <FORM METHOD=post ACTION="/cgi-bin/order.cgi"> <FIELDSET> <LEGEND ACCESSKEY=I>Contact Information</LEGEND> <TABLE> <TR> <TD><LABEL FOR=name ACCESSKEY=N>Name:</LABEL></TD> <TD><INPUT TYPE=text NAME=name ID=name></TD> </TR> <TR> <TD><LABEL FOR=email ACCESSKEY=E>E-mail Address:</LABEL></TD> <TD><INPUT TYPE=text NAME=email ID=email></TD> </TR> <TR> <TD><LABEL FOR=addr ACCESSKEY=A>Mailing Address:</LABEL></TD> <TD><TEXTAREA NAME=address ID=addr ROWS=4 COLS=40></TEXTAREA></TD> </TR> </TABLE> </FIELDSET> <FIELDSET> <LEGEND ACCESSKEY=O>Ordering Information</LEGEND> <P>Please select the product(s) that you wish to order:</P> <P> <LABEL ACCESSKEY=3> <INPUT TYPE=checkbox NAME=products VALUE="HTML 3.2 Reference"> <A HREF="/reference/html32/">HTML 3.2 Reference</A> </LABEL> <BR> <LABEL ACCESSKEY=4> <INPUT TYPE=checkbox NAME=products VALUE="HTML 4.0 Reference"> <A HREF="/reference/html40/">HTML 4.0 Reference</A> </LABEL> <BR> <LABEL ACCESSKEY=S> <INPUT TYPE=checkbox NAME=products VALUE="CSS Guide"> <A HREF="/reference/css/">Cascading Style Sheets Guide</A>

</LABEL> </P> </FIELDSET> <FIELDSET> <LEGEND ACCESSKEY=C>Credit Card Information</LEGEND> <P> <LABEL ACCESSKEY=V> <INPUT TYPE=radio NAME=card VALUE=visa> Visa </LABEL> <LABEL ACCESSKEY=M> <INPUT TYPE=radio NAME=card VALUE=mc> MasterCard </LABEL> <BR> <LABEL ACCESSKEY=u> Number: <INPUT TYPE=text NAME=number> </LABEL> <BR> <LABEL ACCESSKEY=E> Expiry: <INPUT TYPE=text NAME=expiry> </LABEL> </P> </FIELDSET> <P> <INPUT TYPE=submit VALUE="Submit order"> <INPUT TYPE=reset VALUE="Clear order form"> </P> </FORM> Elementul LEGEND Sintaxa: <LEGEND> ... </LEGEND> Atribute posibile: Conine: Coninut n: Descriere: Acest element definete un titlu (explicaie) pentru un grup de controale definite cu FIELDSET. Elementul LEGEND trebuie s apar la nceputul lui FIELDSET, nainte de orice alt element. Chair dac nu este suportat de toate browserele, poate fi utilizat n siguran dac este urmat imediat de un element de tip bloc. Pentru astfel de browsere se pot folosi elemente ca STRONG, B sau BIG pentru a sugera faptul c acela este titlul unui grup de controale. Atributul ACCESSKEY se folosete la fel ca la INPUT, iar atributul (depit) ALIGN sugereaz poziia relativ fa de FIELDSET. Valorile posibile snt: top, bottom, left, right. FIELDSET elemente inline ACCESSKEY=Character (shortcut key) ALIGN=[ top | bottom | left | right ] (alinierea relativ la FIELDSET) atribute comune

Chair dac e depit, este interesant de remarcat c n tehnica style-sheet-urilor nu exist alternativ! <FIELDSET> <LEGEND ACCESSKEY=C>Credit Card Information</LEGEND> <P> <LABEL ACCESSKEY=V> <INPUT TYPE=radio NAME=card VALUE=visa> Visa </LABEL> <LABEL ACCESSKEY=M> <INPUT TYPE=radio NAME=card VALUE=mc> MasterCard </LABEL> <BR> <LABEL ACCESSKEY=N> Number: <INPUT TYPE=text NAME=number> </LABEL> <BR> <LABEL ACCESSKEY=E> Expiry: <INPUT TYPE=text NAME=expiry> </LABEL> </P> </FIELDSET> 6. Procesarea datelor din formulare

1. Metode de transmitere a formularului Valorile completate n cadrul unui formular pot fi transmise nspre server pe mai multe ci, metodele de baz fiind GET sau POST, dar pot fi utilizate i posibilitile oferite de elementul ISINDEX. Fiecare metod trateaz intrrile ntr-un mod aparte, avnd n comun doar variabilele de mediu. <ISINDEX> este un tag vid de un tip mai special. Includerea lui n header s-a fcut iniial (nainte de existena formularelor) pentru ca acesta s activeze un cmp text n bara de butoane sau n fereastra navigatorului. Vizitatorul putea tasta n acel cmp irul de caractere dorit i, apsnd RETURN, trimitea datele serverului. Este o modalitate de a implementa interaciunea nainte de existena formularelor. Metoda se alege n funcie de aplicaie. GET poate fi folosit n cazul cnd informaia transmis este scurt (de exemplu un cuvnt cheie i tipul acestuia). Dac formularul lucreaz cu mai multe cmpuri de date, variabilele de mediu pot fi trunchiate, dar acest defect se poate elimina prin apelul metodei POST. Metoda folosit de protocolul HTTP pentru a trimite datele la server este stabilit de atributul METHOD al elementului FORM, atribut ce poate lua dou valori: get: Cu metoda "get" a protocolului HTTP, setul de date al formularului este adugat la adresa URI specificat de atributul ACTION, folosind semnul ntrebrii ("?") ca separator. Noua adres URI este trimis astfel la agentul (programul) care o proceseaz. post: Cu metoda "post" a protocolului HTTP, setul de date al formularului este inclus n corpul formularului i transmis agentului (programului) care-l proceseaz. Metoda "get" trebuie folosit cnd formularul este idempotent, adic nu cauzeaz alte efecte laterale. Multe cutri n bazele de date nu au efecte laterale (secundare, ascunse) vizibile i

reprezint aplicaii ideale pentru aceast metod. n plus datele din setul de date al formularului trebuie s fie obligatoriu, n exclusivitate, caractere ASCII. Dac, ns, serviciul asociat cu procesarea formularului are efecte laterale (side-effects), ca de exemplu cazul n care formularul modific baza de date sau reprezint o subscriere la un serviciu, se va folosi metoda "post". Aceasta ofer i posibilitatea de a trimite date din ntreg setul de caractere (Unicode), prin specificarea atributului enctype="multipart/form-data". 2. Controalele de succes (successful controls) ale unui formular Un control de succes este acel control al unui formular valid pentru a fi trimis (la Submit). Fiecare astfel de control are numele su ascociat, ntr-o pereche, cu valoarea sa curent. Aceast pereche face parte din setul de date al formularului. Un control de succes trebuie s fie definit ntr-un element FORM i trebuie s aib un nume. Nu toate controalele unui formular snt de succes. Astfel: Controalele care snt dezactivate/inactive (disable) nu pot fi de succes Dac un formular conine mai mult de un buton Submit, numai acela care este activat (apsat) este de succes Toate csuele de marcare (checkbox-urile) setate la on (activate), i numai ele, snt de succes Dintre butoanele radio care au aceeai valoare a atributului NAME numai cel care activ/setat (pe "on") poate fi de succes. Pentru meniuri (liste de selecie), numele controlului este oferit de un element SELECT iar valorile snt date de elementele OPTION. Numai opiunile selectate snt de succes. Valoarea curent a unui element de selectare a unui fiier este o list de unul sau mai multe nume. La transmiterea unui formular, coninutul fiecrui fiier este transmis cu restul datelor din formular. Coninutul fiierului este mpachetat conform tipului coninutului formularului (content-type). Valoarea curent a unui obiect este determinat de implementarea specific a acelui obiect. Dac un control nu are o valoare curent cnd formularul este transmis, browserul nu este obligat s l trateze ca pe un control de succes. n plus, nu vor fi considerate controale de succes nici: Butoanele Reset Elementele OBJECT care au atributul DECLARE setat.

Controalele ascunse (hidden) care chiar dac nu snt afiate de browsere (nu snt vizibile) pot fi controale de succes. Exemplu: <FORM action="..." method="post"> <P> <INPUT type="password" style="display:none" name="invisible-password" value="mypassword"> </P> </FORM> va crea un control de succes pentru elementul parol, adic o pereche din numele "invisiblepassword" i valoarea "mypassword".

3. Procesarea datelor unui formular Cnd utilizatorul trimite un formular (prin activarea butonului Submit), browserul su realizeaz urmtorii pai (urmtoarele aciuni): Pasul 1: Identificarea controalelor de succes (successful controls) Pasul 2: Crearea unui set de date asociat formularului Un set de date asociat unui formular este o secven de perechi nume-control/valoare-curent construit din controale de succes. Pasul 3: Codificarea setului de date Setul de date creat la pasul anterior este codificat n conformitate cu tipul coninutului (content type) specificat de atributul ENCTYPE al elementului FORM. Pasul 4: Transmiterea setului de date codificat n final setul de date astfel codificat este trimis de browserul client agentului de prelucrare (programului) desemnat de atributul ACTION, folosind protocolul specificat de atributul METHOD. Aceast specificare nu acoper toate metodele valide de trimitere sau tipurile de coninut ce pot fi folosite cu formularele. Totui, browserele compatibile HTML 4.0 trebuie s suporte conveniile stabilite n urmtoarele cazuri: Dac metoda este "get" i aciunea (atributul ACTION) este o adres (URI) HTTP, browserul ia valoarea atributului ACTION, adaug un ? la ea, iar apoi adaug setul de date asociat cu formularul, stabilind tipul coninutului (content type) la "application/xwww-form-urlencoded". Browserul urmeaz apoi noua legtura astfel creat. n acest scenariu, datele formularului snt restricionate la codurile ASCII. Dac metoda este "post" i aciunea (atributul ACTION) este o adres (URI) HTTP, browserul va genera o tranzacie HTTP "post" folosind valoarea atributului ACTION i un mesaj creat n conformitate cu tipul coninutului (content type) specificat de atributul ENCTYPE. Pentru orice alt valoare a atributelor ACTION i METHOD comportamentul este nespecificat. Browserele trebuie s afieze rspunsul generat de tranzaciile HTTP "get" i "post". 4. Tipurile posibile de coninut (content-type) pentru un formular Atributul ENCTYPE al elementului FORM specific tipul coninutului folosit pentru a codifica setul de date asociat formularului n momentul transmiterii ctre server. Browserele utilizatorilor trebuie s suporte tipurile indicate n cele ce urmez. Comprtamentul pentru alte tipuri este nespecificat: application/x-www-form-urlencoded Acesta este tipul implicit. Formularele transmise cu acest tip de coninut trebuie codificate dup cum urmeaz: 1. Numele controalelor i valorile snt escaped. Caracterele blanc (spaiu) snt nlocuite de `+', iar caracterele rezervate snt i ele escaped: caracterele nonalphanumeric snt nlocuite cu `%HH', (semnul procent i dou cifre hexazecimale reprezentnd codul ASCII al caracterului). Sfritul de linie (line break) este reprezentat ca o pereche "CR LF" (adic `%0D%0A'). 2. Perechile nume/valoare pentru controale apar n ordinea din document. Numele este separat de valoare prin semnul egal `=' i fiecare pereche este separat de celelalte prin semnul`&'.

Tipul de coninut "application/x-www-form-urlencoded" este ineficient pentr a trimite cantiti mari de date binare sau texte coninnd caractere non-ASCII. Tipul de coninut "multipart/formdata" va fi folosit cnd se trimit formulare ce conin fiiere, date non-ASCII i date binare. multipart/form-data Este tipul folosit cnd coninutul setului de date este alctuit din mai multe feluri de (seturi de) date. Se supune regulilor de la toate irurile de date (stream-urile) de tip multipart MIME. Un stfel de mesaj conine o serie de pri, fiecare reprezentnd un control de succes. Prile snt trimise agentului care le proceseaz n ordinea n care apar n document. La fel ca la orice tip multipart MIME, fiecare parte are un header opional "Content-Type" care implicit are valoarea "text/plain" i care este nsoit de un parametru "charset". Fiecare parte trebuie s conin: 1. Un header tip "Content-Disposition" a crui valoare s fie "form-data". 2. Un atribut NAME care specific numele controlului corespondent. Numele controalelor care snt codificate ntr-un set de caractere non-ASCII pot fi modificate. Astfel, de exemplu, pentru controlul cu numele "mycontrol" partea corespunztoare lui va fi specificat astfel: Content-Disposition: form-data; name="mycontrol" Ca la toate transmiterile MIME, pentru a separa liniile de date se folosete "CR LF" (`%0D%0A'). Dac se trimite un fiier (coninutul lui) acesta trebuie s fie identificat obligatoriu de tipul coninutului (de exemplu"application/octet-stream"). Dac se trimit mai multe (ca rezultat al unei sigure selecii din formular), ele trebuie trimise ca "multipart/mixed", nuntrul lui "multipart/form-data". Fiecare fiier trebuie trimis cu un nume, specificat cu parameterul "filename" al headerului 'Content-Disposition: form-data'. Dac acesta nu este codificat ASCII el trebuie fie aproximat fie codificat. Exemplu: Acest exemplu ilustraz codificarea "multipart/form-data". Presupunem c avem urmtorul formular: <FORM action=http://server.dom/cgi/handle enctype="multipart/form-data" method="post"> <P> Numele Dvs? <INPUT type="text" name="submit-name"><BR> Fisierele pe care le trimiteti? <INPUT type="file" name="files"><BR> <INPUT type="submit" value="Send"> <INPUT type="reset"> </FORM> Dac utilizatorul introduce "Larry" n controlul de tip text i selecteaz "file1.txt", browserul lui va trebui s trimit urmtoarele date la server: Content-Type: multipart/form-data; boundary=AaB03x --AaB03x Content-Disposition: form-data; name="submit-name" Larry --AaB03x Content-Disposition: form-data; name="files"; filename="file1.txt" Content-Type: text/plain ... contents of file1.txt ... --AaB03x-Dac utilizatorul selecteaz al doilea fiier (o imagine), cu numele "file2.gif", browserul va trebui s contruiasc prile componente ale tranzaciei dup cum urmeaz: Content-Type: multipart/form-data; boundary=AaB03x

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

Capitolul 8. Alte elemente ale limbajului HTML 8.1. Formule matematice Una din cele mai ambiioase caracteristici aduse de specificaiile HTML 3.0 este posibilitatea de a afia formule matematice. Toate ecuaiile matematice ncep cu <MATH> i se termin cu </MATH> care suport atributele ID (pentru ancore) i CLASS (pentru subclasele ecuaiilor; de exemplu CHEM, pentru chimie). ntre aceste tag-uri se pot introduce mici ecuaii matematice (pe un singur rnd). Posibilitile de aliniere snt reduse i recomandarea este s se utilizeze tabele pentru alinierea seturilor multiple de ecuaii. Entitile matematice (caractere greceti, simboluri, sgei, etc) le gsii listate la adresahttp://www.hpl.hp.co.uk/people/dsr/html/maths.html i snt de forma: &alpha; &beta; &gamma; alfa beta gama, etc.

Exponenii snt introdui de forma <SUP>Exponent</SUP> (superscript), iar indicii snt introdui prin <SUB>Indice</SUB> (subscript). Exemple: <math> x²+y²=r² </math> <math> &sum;^&inf;_n=1 </math> Simbolurile anumitor operaii matematice snt introduse de forma: <tag operaie>expresie afectat</ tag operaie> ca n cazul urmtor, pentru radical de ordinul doi: <SQRT>x+y</SQRT> Matricile (arrays) se introduc de o manier asemntoare cu tabelele, rnd cu rnd, element cu element: <math> <array> <row><item>a<item>b <row><item>c<item>d </array> </math>

8.2. Documente dinamice Felul n care este prezentat un document pe Web este, din punctul de vedere al tehnoredactrii, cu mult n urma publicaiilor tradiionale, pe hrtie. Limbajul HTML se dezvolt anevoios. A nceput prin a imita stngaci publicaiile tiprite dar a continuat prin a-i identifica trsturi aparte, inaccesibile publicaiilor clasice, de la cele care in de tehnologia n sine i pn la cele care in de noile posibiliti estetice. Documentele dinamice reprezint un pas nainte fcut de tehnologia Web n a-i gsi 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 fr vreo intervenie 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 numr 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 crui navigator nu nelege codul) este introducerea n paginile cu client-pull a unor legturi care s-i permit vizitatorului s "evadeze" fr a nchide complet aplicaia. 2. Server push O alt modalitate de a realiza documente dinamice este server push. Spre deosebire de client pull, unde navigatorul iniia conectri multiple cu serverul, n acest caz serverul este cel care menine legtura deschis i pompeaz date ctre client. Aceast facilitate poate fi folosit fie pentru a trimite mai multe pagini ale documentului ctre client (rezultat similar cu client pull) fie pentru a trimite clientului imagini care se nlocuiesc succesiv n acelai loc dnd impresia de animaie 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 pot care conin diferite tipuri de fiiere de date. Server push utilizeaz o variant a tipului multipart MIME numit multipart/x-mixed-replace n care un eantion de date nlocuiete integral un eantion precedent. Rezultatul este c server-push poate coda i trimite mai multe tipuri de informaie (GIF, text HTML, text ASCII, etc) ntr-unul i acelai document. Headerul d instruciuni navigatorului s nlocuiasc fiecare segment de document cu noul element ce a fost ncrcat, trimis automat de ctre server. Imaginile animate constituie una din cele mai utilizate aplicaii ale acestei tehnologii; animarea este realizat prin trimiterea unui document multipart ce const ntr-o secven liniar de imagini GIF, fiecare dintre aceste imagini reprezentnd un cadru de animaie. Browserul afieaz aceste imagini serial, una dup alta, producnd astfel efectul de micare. Implementarea tehnologiei server-push este mai complicat dect cea de client-pull, deoarece nu exist un tag specific i necesit aplicaii CGI specifice.

8.3. Utilizarea mediilor externe: imagini, sunete i video Mediile externe snt fiiere care nu pot fi afiate direct de navigatorul Web. Fiiere externe pot fi orice fiiere pe care le putei crea (video MPEG, fiiere PostScript, fiiere arhivate, etc). Legtura dintr-un document HTML la un astfel de fiier se face utiliznd tag-ul <A>. Cnd serverul trimite un anumit fiier navigatorului, el include informaii despre tipul fiierului utiliznd un mesaj special trimis odat cu fiierul. Dac navigatorul nu poate afia acel tip de fiier, el ncearc s identifice (dintr-o list cunoscut) o aplicaie ajuttoare (numit uneori helper sau viewer), creia s-i treac fiierul. Dac tipul fiierului este recunoscut i aplicaia ajuttoare corespunztoare este definit, navigatorul starteaz aplicaia i i trece fiierul. Aplicaia, la rndul ei, va prelucra fiierul care constituie mediul extern, care nu a putut fi interpretat de navigator. Dac navigatorul nu identific tipul fiierului atunci l salveaz pe disc dup ce n prealabil (de regul) cere permisiunea utilizatorului. Navigatorul utilizeaz aplicaiile ajuttoare i n cazul n care fiierele snt ncrcate de pe discul local, cu deosebirea c n aceste cazuri utilizeaz extensiile fiierelor pentru a identifica tipul de fiier. Acesta este de fapt i motivul pentru care trebuie utilizate extensiile .html sau .gif pentru documentele HTML i imagini GIF; n cazul c lucrm local, navigatorul poate identifica tipurile de fiiere. Acest mod de lucru face ca dimensiunile navigatoarelor s rmn n continuare mici. De altfel, nu exist nici un motiv puternic ca acestea s includ viewere pentru tipuri de fiiere mai rar ntlnite. Fiecare navigator are o list care mapeaz extensiile fiierelor i tipurile corespunztoare de aplicaii. Specificarea mediilor externe n HTML se face cu ajutorul tag-ului <A> i a atributului HREF, ca n cazul legturilor la toate celelalte documente HTML: <A HREF="fiier extern">Textul care descrie fiierul pentru vizitator</A> Se obinuiete inserarea unor informaii suplimentare despre fiier: formatul fiierului, dimensiune sau orice alte informaii care l-ar ajuta pe cel ajuns aici s decid dac s ia fiierul sau nu. 1. Imagini externe Formatul cel mai des utilizat n documentele HTML este GIF, afiabil de majoritatea navigatoarelor grafice. Utilizarea imaginilor externe confer ns o mai mare flexibilitate. Cteva din cele mai ntlnite formate snt urmtoarele:

Format GIF JPEG

Extensie .gif .jpg, .jpeg

Utilizri Formatul afiabil direct de navigatoare. Este recomandabil utilizarea lui i pentru imagini externe Dei unele navigatoare pot afia acest format, majoritatea nu o pot face. Este deci recomandabil utilizarea imaginilor cu acest format ca imagini externe Numele vine de la X Window System Bitmap. Nu snt afiabile direct de ctre navigator Format grafic obinuit pentru sistemele Macintosh

XBM PICT

.xbm .PICT

Majoritatea programelor bune de grafic pot face conversii ntre aceste formate. n cazul imaginilor externe mari, este recomandabil inserarea n document (alturi de celelalte informaii despre fiier) a aceleiai imagini (sau poriune de imagine) mult reduse, pentru a da o idee vizitatorului despre imaginea pe care eventual o va lua.

Exemplu: <A HREF="imagine_mare.jpg"><IMG SRC="imagine_micorat.gif">25K fiier JPEG</A> 2. Sunete Utilizarea sunetelor se poate face fie pentru inserarea unor adnotaii la fiierele text, fie pentru mesaje de bunvenit sau clipuri audio. Deocamdat singurul format sonor independent de platform este AU (utilizat de Sun Microsystem i NeXT pentru standardul lor audio). AU permite mai multe tipuri de rezoluii i eantionare dar cel mai rspndit este mono, cu rezoluie vertical pe 8 bii i eantionare orizontal pe 8kHZ (micro-law), conceput iniial pentru industria telefonic din Statele Unite. Echivalentul su european este A-law, n mare parte asemntor. Calitatea sunetului este destul de modest i din aceast cauz vor fi ntlnite destul de frecvent formate specifice unei anumite platforme dar care ofer sunet de o mai bun calitate. Cele mai rspndite snt: Format AU Extensie .au Utilizri Dezvoltat iniial pentru eantionri pe 8 bii, este n prezent perfecionat de o versiune pe 11 bii. Fiierele AU tind s fie mici, compacte, uor de luat i utilizabile pe orice tip de computer dei nu este nc un standard internaional Este formatul audio pentru Microsoft Windows. Fiierele .wav tind s fie de calitate mai bun dect .au dar si fiierele snt mai voluminoase. Permit orice rezoluie vertical i orice frecvent de eantionare MPEG este mai mult cunoscut ca standard video dect audio dar poriunea de standard pentru audio permite obinerea unor sunete de foarte bun calitate i modaliti de redare exist pe mai multe platforme AIFF (Audio Interchange File Format) este formatul fiierelor sonore dezvoltat de Apple pentru Macintosh dar adoptat i de alii (SGI). Rezoluie vertical stereo/ mono pe 8 sau 16 bii. Nu este un fiier foarte comun pentru Web. Formatul are aceleai limitri ca i .wav n ceea ce privete compatibilitatea multiplatform. AIFC este AIFF cu compresie incorporat

WAV

.wav

MPEG Audio

.mp2, .mp3

AIFF/AIF C

.aiff, .aif

Recomandrile generale privind inserarea fiierelor externe snt valabile i aici. Inserarea unui fiier audio trebuie fcut astfel: <A HREF="audio_clip.au">Puin muzic (375K, format AU)</A> (se adaug informaii privind ce anume conine fiierul, formatul si ct este de mare). 3. Video Clipurile video snt o combinaie de imagine i sunet asemntoare unui film. Ca i n cazul clipurilor audio, fiierele video nu snt redate direct de navigatoare, acestea avnd nevoie de aplicaii ajuttoare. Cu alte cuvinte, fiierele trebuie luate mai nti de ctre vizitator i apoi redate cu unul din viewer-ele capabile s redea un clip video.

Marea problem cu fiierele video este dimensiunea acestora. Clipurile video snt uriae, de regul de 1-2 MB. Motivul este c aceste fiiere snt compuse din sute de cadre care snt afiate cu frecven ridicat unele dup altele. Un minut de video poate nsemna n jur de 1000 de cadre diferite. Luarea unui asemenea fiier de pe un server poate nsemna (la o vitez de transfer de 28,8 baud) aproximativ 20 de minute. Pentru cei care au modemuri cu viteze de transfer mai mici probabil c timpul va fi mult mai mare astfel c acetia vor fi descurajai de fiierele video mari. Pentru a vedea fiierele video pe un PC este nevoie nu numai de aproximativ 8 MB RAM dar i de o aplicaie ajuttoare. Utilizatorii Mac snt mai norocoi deoarece au aceste faciliti ncorporate n sistem. Pentru fiierele video independente de platform, standardul curent este MPEG dar QuickTime (Apple) ctig n ultima vreme tot mai mult teren, pe msur ce softurile de redare devin disponibile pentru alte platforme. QuickTime are de asemenea avantajul c poate include o pist audio mpreun cu cea video. Cteva din formatele mai rspndite snt:

Form at MPE G

Utilizri Unul dintre cele mai vechi formate video, MPEG este similar formatului JPEG pentru grafic, fiind optimizat pentru video. Formatul este rspndit deoarece clipurile video n acest format snt de bun calitate. Din nefericire, formatul este foarte pretenios hard i RAM AVI este formatul Microsoft Windows pentru video. Utilizatorii acestui sistem pot utiliza cu uurin fiiere video AVI deoarece formatul a fost optimizat pentru Windows QT este abrevierea de la QuickTime i este formatul dezvoltat i brevetat de Apple Computer. Este multiplatform, compact i uor de nregistrat

AVI

QT

Exemplu: <A HREF="bunvenit.QT">Un mesaj de bunvenit (QuickTime, 1,5 M)</A>

Capitolul 1. Internet i World Wide Web

Capitolul 2. Descrierea general a limbajului HTML

Capitolul 3. Structura documentelor HTML

Capitolul 4. Elemente de baz ale limbajului HTML

Capitolul 5. Utilizarea tabelelor n HTML

Capitolul 6. Utilizarea frame-urilor n HTML

Capitolul 7. Utilizarea formularelor (forms) n HTML

Capitolul 8. Alte elemente ale limbajului HTML