Standardul HTML 4.0

Lumea Internetului este intr-o continua cautare de noi tehnologii si unelte care sa faciliteze elaborarea din ce in ce mai comoda a aplicatiilor tot mai sofisticate. Astfel, "batranul" HTML a ajuns la versiunea 4 de standardizare.

World Wide Web Consortium (W3C, adica instanta suprema atunci cand este vorba despre stabilirea "legilor" Web-ului) a lansat proiectul unui nou standard HTML, si anume versiunea 4.0. In plus fata de facilitatile de text, multimedia si hiperlink-uri ale versiunilor precedente, HTML 4.0 ofera mai multe optiuni multimedia, limbaje de scripting, style-sheet-uri, facilitati imbunatatite de tiparire, iar documentele devin mai accesibile utilizatorilor cu handicapuri fizice. HTML 4.0 face, de asemenea, pasi mari spre globalizarea documentelor, cu scopul de a face World Wide Web-ul cu adevarat "world-wide".

Principii fundamentale

Implementarile noii versiuni de HTML trebuie sa aiba la baza cateva principii fundamentale, enuntate de catre World Wide Web Consortium. In continuare urmeaza o prezentare succinta a acestora.

Interoperatibilitate. Desi majoritatea utilizatorilor sunt de acord ca documentele HTML trebuie sa functioneze fara probleme, indiferent de browser sau platforma, atingerea interoperatibilitatii presupune costuri mai mari din partea creatorilor de Web, din moment ce ei trebuie sa realizeze versiuni multiple ale fiecarui fisier. Daca acest efort nu are loc, exista riscul ca Web-ul sa devina o lume a formatelor incompatibile, scazand potentialul sau comercial, cu consecinte negative pentru toti cei implicati.

Fiecare versiune de HTML incearca sa aduca o mai mare coeziune intre protagonistii "razboiului browserelor", astfel incat creatorii de pagini de Web sa nu-si iroseasca inutil energiile, iar documentele lor sa nu devina, in scurt timp, imposibil de citit. Limbajul HTML a fost conceput in ideea ca orice fel de dispozitiv sa poata utiliza informatia de pe Web: PC-uri cu afisaje grafice de rezolutii si numar de culori diferite, telefoane celulare, dispozitive de inregistrare si redare a sunetului, calculatoare cu largime mai larga sau mai ingusta de banda, si asa mai departe.

Globalizare. Prezenta versiune de HTML a fost proiectata cu ajutorul unor experti din domeniul globalizarii, astfel incat documentele sa poata fi scrise in orice limba si sa poata circula cu usurinta in orice colt al lumii. Acest deziderat a fost indeplinit prin incorporarea RFC2070, care trateaza globalizarea HTML-ului.
Un pas important a fost adoptarea standardului ISO/IEC:10646 ca set de caractere implicit pentru HTML. Acesta este cel mai cuprinzator standard existent in lume, acoperind problemele legate de caracterele internationale, directia de scriere a textului, punctuatia si alte probleme legate de globalizare.
HTML ofera acum posibilitati mai variate pentru inglobarea intr-un document a diverselor limbi de pe glob. Acestea duc la o indexare mai eficienta a documentelor in motoarele de cautare, la tiparirea de inalta calitate, la o conversie text-voce mai buna, etc.

Accesibilitate. Pe masura ce comunitatea Web-ului creste, iar membrii sai isi diversifica abilitatile si cunostintele, este crucial ca tehnologiile care rezulta de aici sa corespunda si cerintelor mai speciale. HTML a fost proiectat pentru a face paginile de Web accesibile si persoanelor cu disfunctionalitati fizice.

Imbunatatirile HTML 4.0 in domeniul accesibilitatii includ:
. Incurajarea utilizarii style-sheet-urilor in locul tabelelor pentru formatarea paginii;
.Facilitarea oferirii de alternative (textuale) la descrierea imaginilor, pentru nevazatori;
.Oferirea de etichete active pentru campurile din formulare
.Posibilitatea crearii de grupari ierarhice pentru campurile formularelor.

Tabele. Noul model de tabel in HTML este bazat pe RFC1942. Autorii au acum un control mai larg asupra structurii si formatarii tabelelor (de exemplu, grupurile de coloane). Posibilitatea designerilor de a recomanda latimile coloanelor va permite browserelor sa afiseze datele din tabele incremental (pe masura ce acestea se incarca) in loc sa astepte incarcarea intregului tabel inainte de afisarea sa.

♦Documente compuse. Noua versiune 4.0 ofera acum un mecanism standard pentru inglobarea obiectelor multimedia generice si a aplicatiilor in documentele HTML. Elementul OBJECT (impreuna cu mai vechii sai stramosi IMG si APPLET) ofera un mecanism de includere a imaginilor, secventelor video, sunetului, notatiilor matematice, aplicatiilor specializate si a altor obiecte intr-un document HTML. El permite autorilor sa specifice o ierarhie de moduri de interpretare pentru programele client care nu suporta un anumit tip de obiect.

Style-sheet-uri. Style-sheet-urile simplifica scrierea codului HTML si il elibereaza pe acesta de responsabilitatea reprezentarii. Ele ofera atat autorilor cat si clientilor controlul complet asupra prezentarii documentelor - informatii despre fonturi, aliniere, culori, etc.

Informatiile stilistice pot fi:
. atasate unui anumit element pe care il afecteaza, cum ar fi culoarea sau modul sau de aliniere;
. plasat in header-ul documentului ca o serie de stiluri care alcatuiesc style-sheet-ul;
. linkate in HTML dintr-un style-sheet extern.
Mecanismul includerii unui style-sheet intr-un document este independent de limbajul utilizat.

Scripting. Cu ajutorul scripturilor, autorii pot crea "formulare inteligente", care reactioneaza in functie de actiunile utilizatorului. Scriptingul permite proiectantilor sa creeze pagini de Web dinamice si sa foloseasca HTML ca o modalitate de dezvoltare a aplicatiilor de retea. Mecanismele oferite pentru includerea scripturilor intr-un document HTML sunt independente de limbajul de scripting folosit.

Tiparirea. Caracteristicile HTML-ului permit programelor client sa tipareasca o colectie de documente intr-o maniera inteligenta, bazata pe descrierea relatiilor dintre documentele care alcatuiesc o lucrare mai ampla.

Schimbari in structura tagurilor

Taguri noi. Noile taguri aparute in HTML 4.0 sunt Q, INS, DEL, ACRONYM, LEGEND, COLGROUP, BUTTON si FIELDSET.

Taguri nerecomandate. Utilizarea urmatoarelor taguri nu mai este recomandata: ISINDEX, APPLET, CENTER, FONT, BASEFONT, STRIKE, S, U, DIR, si MENU.

Taguri devenite caduce. Urmatoarele taguri au devenit caduce: XMP, PLAIN-TEXT, and LISTING. In locul lor, va fi folosit tagul PRE.

Schimbarile din domeniul tabelelor

Modelul tabelelor din HTML 4.0 se bazeaza pe primele dezvoltari din HTML+ si proiectul initial al lui HTML 3.0. Vechiul model a fost extins, ca raspuns la cererile tot mai frecvente ale autorilor de pagini Web pentru un control imbunatatit al prezentarii informatiilor tabelate, cu urmatoarele:

. Posibilitatea alinierii dupa caractere desemnate, cum ar fi "." sau "," (de ex., alinierea unei coloane de numere in functie de pozitia punctului zecimal)
. Necesitatea unei mai mari flexibilitati la specificarea cadrelor si liniilor grafice dintr-un tabel;

. Nevoia afisarii incrementale a tabelelor mari, pe masura ce datele sunt receptionate;
. Posibilitatea crearii de tabele defilabile cu headere fixe, plus imbunatatiri legate de impartirea tabelelor pe pagini, in vederea tiparirii;

. Necesitatea existentei unor valori implicite pentru coloane, din considerente de aliniere

In plus, un deziderat major a fost asigurarea compatibilitatii cu versiunile existente ale browserelor. Alt obiectiv a fost simplificarea importului tabelelor in concordanta cu modelul SGML CALS. Ultimul proiect HTML 4.0 asigura compatibilitatea atributului de aliniere cu versiunile deja existente ale browserelor. Unele clarificari au fost facute si in functionarea atributului "dir" si a comportamentului recomandat al browserelor atunci cand latimile absolute si relative ale coloanelor se suprapun.

Un nou element, COLGROUP, a fost introdus pentru a permite grupurilor de coloane sa fie grupate cu valori diferite ale latimii si modului de aliniere, specificate de elementele COL. Semantica lui COLGROUP a fost modificata fata de proiectele anterioare, iar rules="basic" a fost inlocuit de rules="groups". Atributul de stil este inclus ca o modalitate de a extinde proprietatile asociate marginilor si interioarelor grupurilor de celule. De exemplu, stilul liniei: punctat, dublu, gros/subtire; culoarea/modelul de umplere al interiorului; marginea celulelor si informatiile despre font. Acesta va fi insa subiectul unei specificatii suplimentare legatedestyle-sheet-uri. Atributele cadrelor si liniilor grafice au fost modificate pentru a evita conflictele cu alte declaratii SGML si pentru a evita conflictele cu atributele align si valign. Aceste modificari au fost motivate suplimentar de dorinta de a evita problemele ce ar putea sa apara in viitor, ca o consecinta a extinderii specificatiilor existente.

Schimbari legate de formuri

Formurile definite in HTML 3.2 aveau urmatoarele deficiente principale:
. Nu erau prevazute comenzi de la tastatura pentru anumite operatii, pentru accesul la campuri, etc.

. Desi controalele din forme puteau fi dezactivate dinamic, ele nu puteau fi declarate in acest sens la initializare;

. Campurile de tip text nu puteau fi facute "read-only";
. Etichetele butoanelor radio si ale checkboxurilor nu erau senzitive, adica un clic pe eticheta unui control nu afecta starea controlului;
. Nu exista posibilitatea gruparii de controale intr-un mod care sa ajute intr-un mod eficient utilizarea browserelor cu facilitati de speech;
. Nu existau modalitati de verificare a valorilor unui camp pe masura ce ele erau introduse de catre utilizator. Verificarile erau facute de server abia dupa ce continutul form-ului era submis;

. Formurile puteau contine doar doua butoane de tip submit si reset.
Pentru rezolvarea acestor probleme, HTML 4.0 introduce cateva noi atribute si taguri:
. Atributul accesskey permite creatorilor de formuri sa specifice comenzi de la tastatura pentru accesul direct la campurile formularului
. Atributul disabled permite setarea initiala a anumitor controale ca dezactivate;
. Prin utilizarea atributului aditional read-only, se poate interzice modificarea continutului unui camp;

. Tagul LABEL asociaza o eticheta unui anumit control dintr-un form. Tagul FIELDSET grupeaza campurile similare si, in asociere cu tagul LEGEND, poate fi utilizat pentru a specifica numele unui grup. Toate aceste noi elemente permit o afisare mai eficienta si o mai buna interactivitate.

. Un nou set de atribute, incluzand onchange-INPUT, impreuna cu suportul pentru limbaje de scripting, permite autorilor sa verifice datele introduse de utilizator;
. Tagul INPUT are un nou atribut care permite autorilor sa specifice o lista de valori permise sau patternuri ale datelor asteptate;

. Noul element BUTTON poate fi utilizat pentru a imbogati formurile cu butoane suplimentare, in afara de submit si reset;

. Tagul FORM accepta si atributul accept-charset, definit de headerul HTTP "Accept-Charset" (vezi RFC2068). Acest atribut, propus pentru prima data de RFC1867 poate fi utilizat pentru a specifica o lista a seturilor de caractere acceptate de server.

Studiu de caz. Homepage.

Proiectarea unui HomePage presupune analizamai multor aspecte.

- in primul rind textul trebuie sa trezeasca interesul cititorilor de pretutindeni. Fiind accesibil din orice parte a lumii, este bine sa apara in mai multe limbi (sau cel putin doua: limba oficiala a statului respectiv si limba engleza, care in domeniul informaticii este aproape 'universala').

- forma documentului trebuie sa aiba un aspect estetic, realizabila prin formatarea textului, prin includere de imagini, animatii, etc.

documentul trebuie scris in asa fel incit sa poata fi 'vazut' de pe orice fel de calculator conectat la WWW, indiferent de hardul sau softul cu care lucreaza; asta inseamna ca in principiu cam trebuie evitate imbunatatirile care pot face un document mai frumos, dar limiteaza posibilitatile de vizualizare (de ex., tag-uri HTML 3.0).

Partile generale ale documentului

HomePage-ul, ca orice document HTML, incepe cu tag-ul <HTML>, a carui pereche </HTML> se afla chiar la sfirsitul documentului. Acest tag nu are o semnificatie importanta; doar informeaza browser-ul ca documentul este scris in HTML (lucru care de fapt reiese si din extensia de fisier '.html').

Fiecare document HTML trebuie sa aiba un titlu, care va apare intre tag-urile <TITLE> si respectiv </TITLE>. Titlul de obicei apare separat de document si ramine mereu afisat pe ecran, jucind rolul de identificator al documentului.

Tag-urile <HEAD> si <BODY> separa HomePage-ul intr-o parte informativa despre document si textul propriu-zis al documentului. Aceste tag-uri nu schimba deloc aparenta documentelor formatate, dar sint utile in numeroase cazuri (de exemplu NCSA Mosaic for Macintosh 2.0 permite sa spicuim doar in acest loc daca un download va trebui sa ia intregul document sau nu).

In cazul tag-ului <BODY>, in interiorul acestuia se poate preciza prin BACKGROUND = URL_imagine un fundal grafic anume.

Formatarea caracterelor

In textul HomePage-ului apar anumite siruri de caractere, care incep cu caracterul '&' si se termina cu ';'. Acestea sint secventele caracterelor ISO Latin-1 (escape sequences) si sint folosite din mai multe motive. Caracterele '<', '>' si '&' au intelesuri speciale, astfel incit nu le putem folosi ca atare nici in portiuni de texte predefinite (cele marcate cu tag-urile <PRE>). Introducerea acestora in text se face prin secventele &lt;, &gt;, si respectiv &amp;. Un alt motiv este lipsa caracterelor speciale (ma refer la cele romanesti), fapt pentru care trebuie sa folosim secventele oferite de ISO Latin-1.

HTML nu tine cont sfirsitul de linie <**CR/LF**>, de space-uri multiple, nu cunoaste tab-ul. Lungimea unei linii depinde de setarea browser-ului respectiv, de optiunea celui care se uita la text.

Daca in text dorim sa trecem la un rind nou, folosim tag-ul <BR>. Bineinteles ca nu putem folosi nici <BR>-uri multiple. Pentru lasarea unui rind gol, folosim tag-ul <P> (separator de paragraf). Pentru introducerea mai multor space-uri in text putem folosi secventa &nbsp. De exemplu un tab se poate introduce in felul urmator &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;. Acest lucru se poate realiza si cu <P NOFOLD>, dar acest tag nu este cunoscut de majoritatea browserelor. Secventele folosite:

ampersand

&#38

&amp; --> &

A mare, circumflex

&#194

&Acirc; --> A

A mare, tilde

&#195

&Atilde; --> ~A

I mare, circumflex

&#206

&Icirc; --> I

a mic, circumflex

&#226

&acirc; --> a

a mic, tilde

&#227

&atilde; --> ~a

Observatie: desi HTML nu face deosebire intre majuscule si minuscule (<TITLE> fiind echivalent cu <title> sau <Title>, etc), acest lucru nu este adevarat si in cazul acestor secvente, care trebuie sa fie introduse cu minuscule! (De exemplu, &ACIRC; nu e acelasi lucru cu &acirc; si nu va fi recunoscut)

Marimea caracterelor se poate influenta in mai multe moduri. Unul este oferit de tag-urile <H1> .. <H6>. Textele intre tag-urile <Hi> si </Hi> (unde i=1..6) apar cu caractere mai mari sau/si mai groase, cel mai proeminent fiind cel notat cu 1.

Un alt mod de influentare a caracterelor este oferit de tag-ul <FONT>. Cum reiese si din document, prin <FONT SIZE = 25> am precizat ca textul Welcome to Tg-Mures's HomePage va apare cu caractere de inaltime 25.

Se pot codifica cuvinte sau fraze individuale cu stiluri speciale. Sint doua tipuri de stiluri: logice si fizice. Stilurile logice marcheaza textul in intelesul acestuia, iar cele fizice specifica cum sa apara acestea.

De exemplu, in SGML tag-urile <H1> (heading de nivelul) apar intii ca nume; nu este specificat faptul ca textul corespunzator va apare (de exemplu) cu bold Times, de inaltime de 24 puncte, in centrul paginii etc. Folosind stilurile logice, la vizualizare nu va trebui sa schimbam toate tag-urile heading de nivelul intii, deoarece va fi de ajuns sa precizam caracteristicile fizice ale headingului de nivelul intii in browser-ul pe care il folosim.

Stiluri logice: <DFN>, <EM>, <CITE>, <CODE>, <KBD>, <SAMP>, <STRONG> si <VAR>.

Stiluri fizice: <B> text bold, <I> text italics si <TT> text typewriter (cu inaltime fixata).

Link-uri relative si absolute

Forta principala a HTML-ului vine din abilitatea lui de 'legare' a unei portiuni de text de alte documente, de a purta cu el referinte. Acest lucru este realizat cu link-uri. Browser-ul afiseaza textele care fac legatura (link) cu alte culori sau/si subliniate, pentru a evidentia faptul ca sint legaturi hypertext.

Singurul tag de link este tag-ul <A>, numit si ancora (anchor). O ancora poate fi de doua feluri:

1. de 'etichetare' a unui anumit punct din document, care poate fi apoi referit, specificata prin atributul NAME.

2. de referinta la un alt document, folosind atributul HREF.

Chiar la inceputul HomePage-ului ne intilnim cu:

<A HREF = 'TgmhomeUS.html'> Same page in english</A>

Acest tag <A>, face ca textul 'Same page in english' sa se constituie pe ecranul celui ce citeste documentul in hyperlink spre documentul TgmhomeUS.html (HomePage-ul in limba engleza), aflat in directorul documentului.

Bineinteles se pot face legaturi cu documente care se afla in alte directoare, specificind directorul relativ de la documentul curent la cel spre care se face legatura (relative path), folosind sintaxa UNIX standard.

De exemplu:

<A HREF = 'Documente/table.

html'> TABLES</A>

'TABLES' face legatura cu fisierul table.html aflat in subdirectorul Documente. Legaturi de acest tip sint numite legaturi relative.

Avantajul legaturilor relative este pe de o parte faptul ca trebuie scris mai putin; pe de alta parte, este mai usoara mutarea unui grup de documente la alta locatie, descrierile relative raminind valabile.

Ancorele pot fi folosite si pentru navigarea la o anumita sectiune din documentul curent. Pentru aceasta in document trebuie sa apara un nume - in HomePage <A NAME='top'></A>. Hyperlinkul cu numele 'top' este facut de 'top of page' din textul:

Return to the <A HREF=#top>top of page</A>

In mod similar se pot face si linkuri cu nume declarate in alte fisiere. Sa presupunem ca dorim sa facem o legatura dintr-un document A cu o anumita sectiune a unui document B (numit DocumentB.html). In primul rind trebuie definita o ancora in documentul B. Fie 'Important' numele acestei ancore. Cind se face legatura din documentul A, pe linga numele fisierului trebuie precizat si numele ancorei portiunii de text dorite, separata de un hash mark (#)

<A HREF = 'DocumentB.html #Important'> legatura cu Docu

mentB</A>.

In anumite cazuri este bine sa folosim legaturi absolute, adica specificind URL-ul documentului cu care se doreste hyperlink-ul, ca si in cazul link-ului:

<A HREF = 'https://www.quant.ecol, klte.hu'> Ecological Department</A>

Necesitatea legaturilor absolute reiese din exemplul urmator: sa consideram un grup de documente care descriu un manual. Legaturile in acest grup ar trebui sa fie legaturi relative. Legaturile cu alte documente (cum ar fi o referire la un software, care nu apartine grupului) trebuie sa foloseasca descrierea absoluta. In acest fel, daca mutam manualul intr-un alt director, nici o legatura nu trebuie sa fie corectata.

WWW-ul foloseste URL-urile pentru specificarea locurilor fisierelor de pe alte servere. Un URL include si tipul de resursa a acestui fisier (de exemplu gopher, WAIS, telnet, etc), adresa serverului, si locatia fisierului. Sintaxa URL este urmatoarea:

scheme://host.domain[:port]/path/filename

Scheme poate fi una dintre urmatoarele:

- file - fisier de pe sistemul local, sau un fisier de pe un server FTP anonymous

- http - fisier de pe un server WWW

- gopher - fisier de pe un server gopher

- WAIS - fisier de pe un server WAIS

- news - newsgroup Usnet

- telnet - legatura cu un serviciu de baza Telnet

Numarul portului poate fi, in general, omis.

Imagini, sunete, animatii

Majoritatea browserelor Web cunosc imaginile incluse de format XBM (X Bitmap) si GIF (Netscape cunoaste si formatul JPEG). Afisarea imaginilor este un proces destul de lent; de aceea, este bine sa folosim imagini cit mai putine sau cit mai mici.

Pentru a include o imagine folosim un tag de forma:

<IMG SRC = imagine_URL>

unde imagine_URL este URL-ul fisierului imagine. Sintaxa acestora este identica cu ancorele HREF.

Unele browsere, (mai ales acelea care sint pornite de pe un terminal alfanumeric ca de ex. VT100), nu pot afisa imagini. Optiunea ALT permite sa specificam ce text sa apara in locul imaginii respective:

<IMG SRC = 'SageataSus.gif' ALT = 'Sus' >

Ca urmare, in cazul browserelor care pot afisa imagini, pe ecran va aparea imaginea unei sageti, iar in cazul acelora de pe VT100, pe ecran apare textul sus.

Dupa cum se poate observa, in textul HomePageului imaginile au fost incluse in felul urmator:

<A HREF='Images/nume_imagine.tif'>

<IMG SRC = 'Icons/nume_imagine.gif' ALT></A>

Ca urmare, daca folosim un browser care suporta imagini, pe ecran o sa apara o imagine mai mica nume_imagine.gif din subdirectorul Images. Acest nume_imagine.gif face legatura cu aceeasi imagine nume_imagine.tif, dar care este mult mai pretentioasa si ca marime, si ca rezolutie. Downloadul acesteia poate fi decis din aspectul GIF-ului, si va apare ca un document separat.

In cazul browserelor de pe VT100, deoarece n-am precizat nimic dupa ALT, nu apare nimic, pierzindu-se si linkul cu nume_imagine.tif.

Bineinteles in documentele HTML, pe linga imagini, se pot include si sunete si animatii, a caror formate suportate sint:

Sunete: AIFF (.aiff), AU (.au).

Animatii: QuickTime movie (.mov), MPEG movie (.mpeg sau .mpg).

Observatie: ascultarea si respectiv vizionarea acestora necesita playere sau viewere care de obicei nu sint incluse in browsere (de exemplu, multe statii de lucru UNIX nu cunosc formatul QuickTime Movie).