Elementul FONT

Elementul FONT

Prin intermediul elementului FONT se controleaza modul in care arata caracterele intr-un document HTML. Elementul FONT este un element de tip 'continut intr-o linie' adica nu poate contine elemente de tip bloc, precum un paragraf, titlu, tabel, etc. Cu alte cuvinte, de fiecare data cand scriem un paragraf, lista, titlu, tabel, etc. va trebui sa utilizam elementul FONT ca mai jos:

Asa cu se poate observa, elementul FONT fiind un element de tip 'in linie', necesita intodeauna si prezenta tag-ului de sfarsit.

Observatie: asa cum am spus, elementul FONT este un element de tip 'in linie'. El nu poate contine elemente de tip bloc dar poate contine alte elemente de tip 'in linie', inclusiv un alt element FONT. Trebuie sa retii acest lucru intrucat ne va permite sa ne usuram munca, asa cum vei vedea mai tarziu.

Daca se omite utilizarea tag-ului FONT atunci browser-ul va utiliza familia de fonturi setata implicit.   Elementul FONT dispune de trei atribute prin intermediul carora se precizeaza familia de fonturi, marimea si culoarea acestora. In atbelul de mai jos sunt prezentate cele trei atribute ale elementului FONT.

Daca, in cadrul tag-ului FONT, nu se precizeaza nici unul din aceste atribute atunci prezenta acestui tag nu va avea nici un efect. In aceasta situatie vor fi utilizate setarile implicite ale browser-ului. Exemplul de mai jos este o ilustrare a celor spuse:

rezultat:

Acesta este un paragraf

Se observa ca fontul implicit este Times New Roman.

Observatie: fontul utilizat in acest site este Arial (sau Verdana in cazul variantei tiparite). Cu toate acestea, exemplele prezentate redau in mod exact situatiile reale (adica fonturile reale).

In continuare am sa fac o prezentare mai detaliata a acestor atribute.

Atributul FACE

Cu ajutorul atributului FACE se specifica ce fonturi va utiliza browser-ul atunci cand va afisa documentul HTML. Atributul FACE va avea drept valoare numele unui font. Mai jos am redat un exemplu:

fontul Impact

Numele fontului nu este 'case sensitive', adica nu conteaza daca folosim majuscule sau caractere normale la scrierea acestuia. In schimb, numele fontului trebuie scris exact, fara a se omite nici o litera. De exemplu expresia:

este echivalenta cu

In schimb, expresia

va face ca browser-ul sa utilizeze fontul implicit.   In cazul in care familia de fonturi (mai corect spus fontul) are un nume mai lung, trebuie sa fim atenti la spatiile dintre cuvinte. omiterea unui asemenea spatiu va face ca browser-ul sa nu poata recunoaste fontul in cauza. Am ilustrat mai jos o asemenea situatie:

rezultat:

Comic Sans MS

Comic Sans MS

Dupa cum am mai spus, nu putem sti cu exactitate ce fonturi sunt instalate pe calculatoarele vizitatorilor. Din acest motiv atributul FACE poate accepta mai multe valori. Aceste valori trebuie separate prin virgula si, pentru a fi mai usor de distins, un spatiu liber. De exemplu:

Aceste valori vor fi citite de browser in ordinea aparitiei. Cu alte cuvinte, facand referire la exemplul anterior, daca un vizitator nu are instalata primul font specificat (Verdana), atunci va fi citita in mod automat valoarea imediat urmatoare (Arial). Daca nici aceast font nu exista, atunci va fi utilizata urmatoarea valoare, s.a.m.d. Daca s-au epuizat toate valorile specificate (fara a se gasi una dintre ele) browser-ul va utiliza fontul setat implicit. In practica am intalnit documente HTML care nu aveau definita decat un singur font. Acest lucru poate fi periculos, sfatul meu fiind sa folosesti cel putin doua fonturi. In acest fel se evita anumite neplaceri legate de modul in care va arata documentul.

Atributul SIZE

Atributul SIZE defineste marimea uni font. Acesta poate lua valori de la 1 la 7. Aceste valori sunt echivalente cu urmatoarele marimi exprimate in puncte (pt):

Am redat aceste valori echivalente pentru a avea o imagine asupra marimii fonturilor (lucru valabil in cazul in care ai folosit un editor de text, aceste marimi fiind similare).

Mai jos am dat un exemplu de utilizare a atributului SIZE:

Size 1 Size 2 Size 3 Size 4 Size 5 Size 5

Dintre aceste exemple se remarca cele scrise cu rosu. In primul caz se poate vedea ca, daca se omite specificarea atributului SIZE, browser-ul va considera o marime implicita pentru fonturi. Aceasta este 3 si, asa cum vei vedea, este luata drept marime de referinta. In ultimul exemplu se poate vedea cum, atunci cand nu se specifica atributul FACE, browserul va utiliza fonturile setate implicit (Times New Roman) dar va lua in considerare atributul SIZE.

Atributul SIZE poate avea valori absolute sau valori relative. Atunci cand dorim sa atribuim o valoare absoluta, vom folosi o expresie de forma:

unde nr este un numar cu valori intre 17.   In cazul in care se folosesc valori relative, atributul SIZE va fi scris sub forma:

In acest caz, valoarea '+1', '-1' sau '+2' se va raporta la marimea de referinta care este 3. In functie de semnul aflat in fata numarului, marimea fonturilor va fi mai mare cu 1, 2, sau mai mica cu 1. Pentru a fi mai explicit am dat cateva exemple:

Size 1 Size 2 Size 3 Size 4 Size 5 Size 6 Size 7

Utilizarea atributului SIZE cu valori relative este mai des intalnita atunci cand se utilizeaza elementul BASEFONT (va fi discutat putin mai tarziu).

In prezent, marimea fonturilor este un subiect controversat. Nu exista o parere unanima privitoare la ce marime sa aiba fonturile. Acest lucru se datoreaza numarului foarte mare de configuratii existente in ceea ce priveste rezolutia monitoarelor. De exemplu, un font cu atributul SIZE='1' poate foarte usor sa devina indescifrabil pe un monitor cu rezolutie mare (de genul 1024X768) sau in cazul unui laptop. Pe aceasta tema exista o intreaga literatura ce nu face subiectul prezentului tutorial. Pe viitor este posibil sa realizez un material pe aceasta tema.

Observatie: incepand cu HTML varianta 4.0 beneficiem de ajutorul CSS. Prin intermediul CSS se poate realiza un control mult mai flexibil in ceea ce priveste marimea fonturilor. In CSS marimea fonturilor nu se limiteaza doar la valorile 17, aceasta marime poate lua si alte valori. Pana sa inveti CSS poti utiliza foarte bine si tagul FONT daca, respecti cele scrise in acest tutorial. In plus, in cazul unor variante mai vechi de browser-e, CSS nu poate fi interpretat si, ca atare, prezenta elementului FONT poate fi absolut necesara.

Atributul COLOR

Prin intermediul atributului COLOR se specifica culoarea fontului. Acest atribut poate avea drept valoare fie numele unei culori, fie valoarea hexazecimala a acesteia. Este de retinut ca valoarea hexazecimala trebuie sa fie precedata de semnul '#'. Mai jos sunt redate aceste culori impreuna cu valorile hexazecimale corespunzatoare.

Valoarea hexazecimala a unei culori este data de valoarea hexazecimala a culorii RGB. Ca sa fiu mai clar, o culoare este formata dintr-o combinatie de culori de baza. Aceste culori sunt in numar de trei si anume: Red (rosu), Green (verde), Blue (albastru). Valoarea hexazecimala a unei culori obtinute prin combinarea celor trei nuante specificate mai sus va fi data sub forma :

unde RR, GG, BB reprezinta valoarea in hexazecimal a fiecarei nuante de culoare. Aceste valori hexazecimale sunt obtinute din convertirea valorilor zecimale ce corespund fiecarei culori. De exemplu, pentru a obtine culoarea SILVER (argintiu) vom avea o combinatie de culori RGB ale carei valori in zecimal vor fi:

Utilizand un calculator care sa aiba functia de transformare din zecimal in hexa, vom obtine valoarea C0 drept echivalentul lui 192 in zecimal. Prin urmare, valoarea in hexa a culorii SILVER va fi cea de mai jos:

Valoarea exprimata in zecimal pentru oricare din culorile de baza Red, Green sau Blue se va afla numai in intervalul 0255.

Observatie: culorile prezentate in tabelul anterior sunt in numar de 16, ele putand fi recunoscute de browser nu numai dupa valoarea hexazecimala, dar si dupa numele acestora. In realitate numarul de culori (nuante) ce poate fi obtinut prin combinarea celor trei culori de baza (RGB) poate fi mult mai mare. De regula, se foloseste un numar de numai 216 culori care mai sunt numite si 'culori sigure

Revenind la atributul COLOR, sa vedem cateva exemple concrete.

Acest text este rosu Acest text este verde

Este de preferat ca utilizarea numelui unei culori drept valoare pentru atributul COLOR sa fie evitata. Valoarea hexazecimala a unei culori este mult mai bine suportata de browsere. Altfel spus, este posibil sa existe unele browsere care sa nu recunoasca numele unei culori (lucru intalnit mai ales in cazul in care se foloseste numele unei culori care nu face parte din cele 16 numite anterior). Acest lucru nu inseamna ca valorile hexazecimale ale culorilor trebuie sa fie memorate. Pe Internet poti gasi o multime de programe utilitare care fac conversia culorilor din zecimal in hexa. O solutie si mai buna este sa ai un fisier HTML care sa contina aceste culori (sub forma unui tabel ca cel prezentat de mine) si care sa poata fi consultat de cate ori este necesar.

Elementul BASEFONT

O alternativa pentru elementul FONT o constituie utilizarea tagului <BASEFONT>. Am spus tag-ul <BASEFONT> intrucat elementul BASEFONT nu consta decat dintr-un singur tag. Nu exista nici un tag de sfirsit.   De regula, tagul <BASEFONT> este utilizat pentru a defini familia de fonturi, culoarea si marimea acesteia, atribute ce urmeaza sa fie mentinute pentru intreg documentul, sau pentru portiuni mai mari dintr-un document. Atributele si valorile acestora sunt identice cu cele utilizate in cadrul elementului FONT. Toate elementele HTML ce urmeaza tagului BASEFONT vor utiliza fonturile si proprietatile acestora, proprietati ce au fost declarate in tag-ul BASEFONT. Exceptia de la aceasta regula o reprezinta elementul H. Acesta va pastra valorile initiale sau, daca contine un element FONT, va pastra caracteristicile stabilite de acesta.

Mai jos am redat un exemplu de utilizare a tag-ului BASEFONT.

Sa vedem putin ce se poate deduce din acest exemplu. Primul lucru care se observa este ca atributele specificate in tag-ul <BASEFONT> sunt suprascrise prin utilizarea tag-ului FONT. Dupa tag-ul de sfarsit </FONT> documentul va recapata atributele declarate in BASEFONT.   De asemenea, putem plasa mai multe taguri BASEFONT intr-un singur document. In acest caz ultimul tag BASEFONT va suprascrie tagul BASEFONT anterior lui. Daca sunt folosite numai cateva atribute (de ex. doar SIZE) restul atributelor nu vor fi mostenite de la tag-ul BASEFONT anterior celui in cauza. In acest caz vor fi utilizate valorile implicite setate de browser. Elementul BASEFONT poate fi continut de toate elementele de tip 'in linie' si de tip 'bloc', cu exceptia elementului PRE.

Observatie: Netscape Navigator 4.0 nu interpreteaza corect elementul BASEFONT. Concret, acesta va ignora fonturile declarate in atributul FACE. In mod similar va trata si atributul COLOR. Daca folosesti browser-ul amintit (cred ca si Netscape Communicator se comporta similar) vei putea observa cele descrise aici. Daca esti curios poti sa copiezi acest exemplu si sa vezi modul in care se comporta in browser-ele amintite. In plus, elementul BASEFONT este ignorat in interiorul tabelelor. Intrucat, asa cum vei vedea, tabelele sunt folosite intensiv, este recomandat sa nu se foloseasca elementul BASEFONT. Daca tii neaparat sa folosesti BASEFONT atunci este bine sa utilizezi numai atributul SIZE, urmand ca restul atributelor sa fie declarate prin intermediul tag-ului FONT.

Cum alegem fonturile

Inainte de a trece la abordarea acestui subiect, trebuie sa repet ca am tratat problema referitoare la declararea fonturilor luand in calcul numai elementul FONT. Am facut aceasta precizare intrucat fonturile pot fi controlate si cu ajutorul CSS. Chiar si asa, mare parte din cele spuse mai jos raman valabile, indiferent de metoda utilizata pentru controlul fonturilor. Ca o parere personala, este foarte bine sa cunosti utilizarea elementului FONT si, mai apoi, cand vei invata CSS, sa vezi ce posibilitati noi sunt oferite prin aceasta metoda.

In continuare voi prezenta cateva aspecte ce trebuie avute in vedere atunci cand lucram cu fonturile.

cu riscul de a ma repeta, fac urmatoarea observatie: nu trebuie utilizat doar un singur font pentru atributul FACE. Oricat de siguri am fi ca acel font se gaseste pe calculatoarele vizitatorilor, trebuie folosite cel putin doua fonturi. Acestea ar trebui sa aiba o infatisare cat mai asemanatoare. In exemplul de mai jos va trebui sa evitam o constructie ca cea scrisa cu rosu.

In continuare am prezentat modul in care arata fiecare din fonturile utilizate in exemplul anterior.

• Font Arial    Font Verdana    Font Comic Sans MS

Este usor de observat modul in care arata fontul Comic Sans MS. In cazul in care fontul Arial nu se va regasi pe statia de lucru a unui vizitator va fi utilizat fontul imediat urmator. Intrucat diferenta dintre Arial si Comic Sans MS este destul de mare, pagina va arata neplacut.

din dorinta de a cuprinde cat mai multe informatii in prima pagina a site-ului (lucru firesc, alminteri) multi realizatori de pagini HTML vor opta pentru utilizarea atributului SIZE='1'. Cand te decizi sa utilizezi un font cu atributul SIZE='1', trebuie sa ai in vedere ca nu toate fonturile se preteaza a fi utilizate cu o asemenea marime. De exemplu, citirea unui paragraf scris cu fontul Times New Roman poate fi foarte obositoare la o asemenea dimensiune. Pentru exemplificare am prezentat un exemplu:

• Font Times New Roman      Font Times New Roman

De regula, fonturi precum Arial, Verdana, Helvetica se preteaza cel mai bine (se disting cel mai usor) pentru a fi utilizate cu atributul SIZE='1'.

fontul aleas trebuie sa fie in concordanta cu subiectul prezentat. De exemlu, nu este indicat sa utilizam un font precum Comic Sans MS pentru a prezenta o stire de maxima importanta.

este de evitat sa folosim intr-un document mai mult de 2, maxim 3 tipuri de fonturi. In caz contrar documentul va fi obositor pentru cititori, existand si riscul de a deveni un fel de 'varza online'.

titlurile nu trebuie declarate cu elementul FONT. Daca vei proceda asa, titlul tau nu va mai putea fi interpretat ca atare de motoarele de cautare. Mai jos este un exemplu de declarare a unui titlu cu ajutorul elementului FONT.

Tutorial HTML

In locul unei asemenea constructii, am putea sa folosim elementul FONT in cadrul elementului H. In aceasta situatie vom preciza prin intermediul elementului FONT ce font sa fie utilizat pentru scrierea titlului.

Rezultatul este redat mai jos:

Tutorial HTML

realizatorii de pagini web folosesc doar cateva fonturi (eventual din familii diferite) si in combinatii predefinite. Mai jos am dat cateva combinatii foarte des intalnite.

De remarcat ca fonturile prezentate sunt si cele mai raspandite. Mai corect spus, ele sunt instalate implicit de sistemele de operare (cel putin de Windows). Inainte de a trece mai departe trebuie sa stii ca exemplele prezentate aici nu reprezinta decat anumite variante foarte utilizate. Aceasta nu inseamna ca nu poti folosi si alte variante. Am spus ca toate fonturile de mai sus sunt instalate implicit de Windows. Lucrul este adevarat pentru Arial, Verdana, Times New Roman. Restul de fonturi sunt foarte raspandite pe alte platforme (Mac, UNIX).   Exemplul scris cu rosu are sansele cele mai mari sa functioneze pe mai multe platforme. De exemplu, echivalentul fontului Arial ce se regaseste in Windows este fontul Helvetica in cazul unui Machintosh. De notat ca se utilizeaza drept solutie finala precizarea unei intregi familii de font-uri. Acest lucru poate fi de folos in cazul in care nu se gaseste nici unul din fonturile specificate individual.

Faptul ca FONT este un element de tip 'in linie' ne obliga sa-l precizam in interiorul fiecarui element HTML. Acest lucru devine obositor daca vei tasta de fiecare data acest tag (impreuna cu atributele sale). Pentru a ne face viata mai usoara este bine ca mai intai sa scriem textul regulat cu tag-urile HTML necesare si, mai apoi, utilizand copy si paste, sa plasam tag-ul FONT unde dorim. In acest fel nu vom scrie tag-ul FONT decat o singura data. Modificarea ulterioara a atributelor SIZE sau FACE nu mai este o treaba foarte dificila.

Asa cum am mai spus, elementul FONT poate contine alte elemente de tip 'in linie', inclusiv un alt element FONT. Acest lucru ne scuteste de tastarea repetata a denumirii fontului. In cazul in care folosim elemente FONT inculse unele in altele trebuie sa fim foarte atenti pentru a nu obtine elemente inlantuite. Mai jos am prezentat un exemplu in care am aratat cum se poate face acest lucru. In loc sa scriem o expresie de forma:

Rezultatul este redat mai jos:

• Font Verdana, size=2.   Font Verdana, size=3.   Font Verdana, size=4.  

Un rezultat similar am putea obtine daca vom folosi o constructie ca cea de mai jos:

Rezultatul este redat mai jos:

• Font Verdana, size=2.   Font Verdana, size=3.   Font Verdana, size=4.

De remarcat ca, in afara de utilizarea unor elemente FONT incluse unul in altul, am utilizat de mai multe ori consctructia <br>&nbsp;<br> pentru a simula mai multe paragrafe.

Pe web am gasit anumite 'sfaturi' care sugereaza utilizarea elementului FONT fara a se tine cont de 'inlantuire'. Cu toate ca browser-ul va interpreta corect chiar si o asemenea constructie nu este recomandat sa recurgi la asemenea 'trucuri murdare'. In schimb, dupa ce vei invata CSS, vei putea scapa de elementul FONT si de toate neplacerile legate de acesta. Mai jos am prezentat un exemplu in care se utilizeaza tag-uri inlantuite.

•   Font Verdana, size=1.   Font Verdana, size=3.   Font Verdana, size=4.  
• unu
• doi

Trebuie remarcat cum, desi avem o groaza de constructii inlantuite, prima declaratie a elementului FONT se transmite si listei neordonate UL.

Inainte de a trece la publicarea paginii realizate, este bine sa o vizualizezi la diferite rezolutii si cu diferite browser-e. In acest fel te asiguri ca fonturile utilizate se comporta corespunzator asteptarilor tale.

Cum folosim fonturi 'deosebite'

In practica curenta ne putem lovi de situatii in care fonturile cele mai utilizate (a se citi cele mai des intalnite pe calculatoarele vizitatorilor) nu se preteaza la ceea ce intentionam sa realizam. In aceasta situatie vom fi nevoiti sa utilizam anumite trucuri pentru ca un vizitator sa viziona site-ul asa cum a fost el gandit. In continuare am sa prezint doua metode prin care se poate rezolva problema fonturilor mai putin utilizate.

O prima metoda consta in realizarea unei legaturi care sa permita unui vizitator instalarea fontului dorit. Cu toate ca nu am vorbit despre realizarea legaturilor in HTML, ma simt dator sa prezint aceasta metoda. Va trebui sa o retii, cel putin in scop informativ. In exemplul care urmeaza am sa folosesc fontul ZurichCalligraphic Italic. Daca, din intamplare, acest font se regaseste si pe calculatorul tau, vei putea vedea corect exemplul dat. In caz contrar, vei putea sa-l 'descarci' prin intermediul unei legaturi.

Mai jos este rezultatul obtinut.

Font ZurichCalligraphic Italic

Daca ceea ce vezi este similar cu ceea ce se afla mai jos, inseamna ca dispui de fonturile ZurichCalligraphic Italic. In caz contrar, nu dispui de asemenea fonturi. Mai jos este dat modul in care ar trebui sa arate aceste fonturi:

Pentru a pune la dispozitie acest font, va trebui sa plasam o expresie ca cea de mai jos:

Acest site necesita fonturi ZurichCalligraphic Italic. Click aici pentru a obtine aceste fonturi.

Daca vei incerca exemplul anterior, va trebui sa cunosti si modul in care se instaleaza fonturile in Windows. De fapt, acesta este si neajunsul acestei metode. Multi utilizatori nu cunosc cum se instaleaza fonturile.

Observatie: daca utilizezi Netscape pentru a viziona acest site, exemplul anterior nu va fi redat corect (chiar daca dispui sau nu dispui de fontul ZurichCalligraphic Italic). Acest lucru se datoreaza modului in care Netscape 'lucreaza' cu CSS (cu toate acestea nu exlud nici o eventuala eroare de proiectare a acestei pagini). In Internet Explorer nu exista o asemenea problema. Daca vei folosi COPY si PASTE pentru a copia exemplul dat vei obtine rezultate identice in ambele browsere mentionate mai sus.

In ceea ce priveste modul de realizare al legaturilor, nu am sa insist in momentul de fata asupra acetui aspect. Ceea ce trebuie sa spun este ca intre ghilimelele expresiei <A HREF=''> nu am precizat decat numele fisierului care contine fontul ZurichCalligraphic Italic. Acest lucru se potriveste pentru site-ul meu. In realitate este posibil ca expresia plasata intre ghilimele sa fie mult mai lunga. Despre aceste lucruri vei invata in lectia dedicata legaturilor.

O alta metoda consta in utilizarea unor imagini care sa contina textul dorit. In acest fel putem utiliza orice font dorim, fara sa ne punem problema daca acestea sunt sau nu disponibile pe calculatoarele vizitatorilor. In plus, aceasta metoda ne permite sa prelucram fonturile dupa bunul plac (este vorba de adaugarea unor efecte artistice).  Utilizand aceasta metoda am putut reda modul in care arata fonturile ZurichCalligraphic Italic, chiar daca acestea nu se regasesc pe calculatorul tau. Pentru aceasta am folosit o imagine denumita font.gif care a fost realizata cu un editor de imagini. Fundalul folosit a fost de culoare alba pentru a coincide cu fundalul acestui site. Pentru a observa mai bine, in exemplul de mai jos am incadrat intr-un chenar imaginea font.gif.

Rezultatul este redat mai jos:

Aceasta este o imagine

11. 

Aceasta metoda este mai des utilizata decat cea prezentata anterior. Problema care o ridica aceasta metoda este legata de dimensiunea mare pe care o va avea un astfel de document HTML. Acest fapt ne obliga sa plasam documentul pe un server mai rapid (nu ca cel pe care este site-ul meu). Chiar si in acest caz trebuie sa avem in vedere ca nu toti 'navigatorii' dispun de modemuri performante. Daca tinem cont si de calitatea liniilor telefonice atunci s-ar putea sa ajungem la concluzia ca o asemenea metoda nu este foarte indicata.   De asemenea, este posibil ca unii utilizatori sa nu aiba activata in browser optiunea 'show pictures'. In aceasta situatie nu va fi incarcata nici o imagine si, prin urmare, site-ul nostru va arata neplacut.

Browserele din generatiile mai noi (de la Internet Explorer 4.0 si Netscape Navigator 4.3 in sus) dispun de suport pentru a permite realizatorilor de pagini web sa utilizeze fonturi ce vor fi descarcate automat in momentul accesarii unei pagini de web (am sa le numesc fonturi incluse). Utilizarea unor astfel de fonturi necesita o experienta mai bogata in realizarea paginilor HTML. In cazul in care se apeleaza la o astfel de solutie revine din nou in actualitate incompatibilitatea dintre browsere. Internet Explorer si Netscape utilizeaza tipuri diferite de fonturi incluse. Cele doua tipuri de fonturi sunt:

Embedded OpenType (extensia .eot) - realizate de Microsoft

TrueDoc (extensia .pfr) - realizate de Netscape si Bitstream

Datotita eforturilor depuse de compania Bitstream, fonturile de tip TrueDoc pot fi interpretate atat de Internet Explorer cat si de Netscape. Pentru a putea vedea aceste tipuri de fonturi in Internet Explorer este nevoie de instalarea unor fisiere suplimentare. Chiar si asa se pare ca lucrurile nu functioneaza foarte bine. Subiectul legat de utilizarea fonturilor incluse este mult mai complex necesitand si cunostiinte de CSS. Daca esti curios poti citi despre acest subiect in sectiunea dedicata fonturilor din site-ul Webmonkey

In concluzie, nu trebuie apelat la fonturi mai putin utilizate decat daca nu se poate altfel. In aceasta situatie este bine sa tii seama de publicul caruia i te adresezi. Daca este un public mai 'instruit', vei putea plasa o legatura care sa puna la dispozitie fonturile necesare. Daca, in schimb, vei avea un public foarte diversificat, atunci va trebui sa utilizezi imagini care sa contina fonturile necesare. Aceasta metoda este foarte des intalnita la site-urile publicitare si la cele cu material destinat adultilor. In acest ultim caz se pare ca vizitatorii sunt dispusi sa astepte mai mult incarcarea unei pagini, stiind ca ceea ce urmeaza sa vada este 'hot'. Inainte de a termina mai spun un lucru: nu trebuie sa realizezi o imagine de dimensiunea unei pagini de web, imagine care sa contina tot textul necesar. In acesta situatie toti vizitatorii vor adormi pana se incarca pagina (daca vor avea rabdare).

Grafica pe web - notiuni elementare

Imaginile pot face documentele HTML mult mai atragatoare. In general, imaginile sunt utilizate pentru a imbunatatii look-ul unui site dar, in unele cazuri, sunt folosite si pentru a ilustra anumite articole publicate pe web. Indiferent de scopul in care este utilizata grafica pe web, trebuie tinut cont de faptul ca accesul la internet se face de cele mai multe ori prin modemuri cu viteze de transfer relativ modeste. Intucat fisierele grafice pot avea dimensiuni considerabile este bine ca acestea sa fie utilizate cu prudenta. Mai jos am prezentat notiunile elementare legate de grafica pe web.

Culori sigure Termenul de 'culori sigure' (safe colors) a fost introdus in perioada de inceput a internetului si se referea la faptul ca nu toate statiile de lucru dispuneau de placi grafice care sa suporte un numar mai mare de 256 de culori. In prezent, desi aceata problema pare a fi rezolvata prin aparitia unor placi grafice foarte puternice, termenul de culori sigure mai este luat in considerare. Chiar daca o placa grafica poate suporta modul 'true color' (16,7 milioane de culori) pot exista statii de lucru care sa aiba setat modul 256 culori (motivele pot fi diverse).       Intrucat intre PC-uri si Mac-uri exista o diferenta de interpretare a celor 256 de culori, termenul de 'culori sigure' se refera la un numar de 216 culori care sunt redate identic de ambele platforme. Aceste culori sunt implementate atat in Internet Explorer cat si in Netscape Comunicator. Un tabel cu aceste valori poate fi gasit in Anexa A. Este bine sa salvezi acest fisier si sa apelezi la el ori de cate ori este necesar. In concluzie, este recomandat sa se utilizeze numai culori sigure atunci cand alegem culoarea pentru fonturi sau pentru fundalul site-ului. Acest lucru ramane valabil si in cazul optimizarii imaginilor de tip GIF daca acest lucru este posibil (vei vedea putin mai tarziu ce este un fisier GIF)

Nota: daca vrei sa vezi care este diferenta dintre culori sigure si o culoare 'mai putin sigura' iti recomand sa te uiti la prima pagina din acest site. Daca ai o placa grafica care sa suporte schimbarea numarului de culori fara a restarta Windows-ul, merita sa vezi ce se intampla. Daca nu, atunci poti salva prima pagina (index.html) si sa o studiezi offline. In cazul in care nu ai timp pentru asa ceva, am sa-ti spun ca tabelul in care sunt descrise sectiunile din acest site utilizeaza o culoare aflata in afara celor 216 culori sigure. In mod similar stau lucrurile si cu imaginea care cuprinde logo-ul acestui site. De fiecare data imi spun ca trebuie sa remediez aceasta problema dar se pare ca sunt cam delasator.

Dimensiunea fisierelor grafice In prezent exista o multime de formate grafice utilizate in diferite situatii. Intrucat fisierele grafice au dimensiuni foarte mari, pentru a le pune online se utilizeaza doar doua formate de fisiere grafice si anume: GIF si JPEG. Ratiunea acestei limitari se datoreaza compresiei foarte mari pe care o realizeaza aceste formate grafice. Cu ajutorul acestor formate se pot reduce considerabil dimensiunile imaginilor. Fiecare dintre cele doua formate numite anterior se utilizeaza in anumite circumstante. Deoarece fiecare reducere are un pret (ca la buget, nu-i asa?) in cazul fiserelor grafice reducerea dimensiunilor se traduce fie prin alterarea calitatii imaginii, fie prin limitarea numarului de culori. Spre deosebire de buget, reducerea dimensiunilor unei imagini duce la o reducere calitativa ce este insesizabila pentru privitor.

Formatul GIF si formatul JPEG   GIF - reprezinta initialele de la Graphic Interchange Format iar fisierele de tip GIF au extensia .gif. Format GIF poate reda un numar de maxim 256 de culori (cunoscuta si sub numele de 'culoare pe 8 biti'). Formatul GIF utilizeaza o schema de comprimare care nu elimina detaliile din imagine. In schimb, reducerea dimensiunilor se face prin eliminarea culorilor.   Formatul GIF este utilizat pentru a reda imagini de dimensiuni relativ mici precum banere publicitare, figurine (icon-uri), diverse butoane grafice (animate sau nu), imagini de dimensiuni mari in care predomina doar cateva culori, precum si in cazul in care trebuie prezentate imagini detaliate ca de exemplu o harta. In toate aceste cazuri imaginile finale vor contine maxim 256 de culori. In cazul banerelor publicitare acestea pot contine un numar mai mare de culori, caz in care se vor utiliza fisiere JPEG sau se va utiliza un program specializat pentru a face o conversie de la o imagine cu un numar mai mare de culori la o imagine gif care sa arate acceptabil. Pe masura ce numarul de culori utilizate intr-o imagine de tip GIF creste va creste si dimensiunea fisierului.   Cea mai recenta varianta de fisier GIF este cunoscuta sub numele de GIF89a si dispune de urmatoarele optiuni care nu se regasesc la fisierele JPEG si nici la varianta mai veche a formatului GIF (este vorba de GIF87):

o        Intretesere (Interlacing) - un fisier GIF care a fost salvat cu optiunea 'interlacing' activa este un fisier grafic care permite afisarea gradata sau treptata a imaginii. Cu alte cuvinte, la inceput se va afisa o imagine neclara (incetosata) urmand ca pe masura ce se incarca aceasta sa se clarifice. In acest fel se creaaza senzatia unei incarcari mai rapide si, pe de alta parte, se mentine interesul vizitatorului.

o        Transparenta (Transparency) - consta in proprietatea unui fisier gif de a avea o culoare transparenta. Cu alte cuvinte, fundalul pe care este plasata imaginea poate fi vizibil acolo unde avem o culoare transparenta. Pentru a fi mai clar am dat un exemplu in care am ilustrat cum lucreaza transparenta.

o        Animatie - fisierele de tip GIF care contin animatie sunt cunoscute sub denumirea de 'GIF-uri animate'. Prin utilizarea unor programe speciale se pot realiza fisiere GIF care sa contina un numar de imagini. Aceste imagini vor fi ciclate dand iluzia de animatie. Mai jos este un astfel de fisier.

JPEG - reprezinta initialele de la Joint Photographic Expert Group si este formatul utilizat pentru comprimarea imaginilor de calitate fotografica (numarul de culori nu mai este limitat la 256). Fisierele JPEG pot avea extensii de forma .jpg, .jpe etc. Schema de comprimare utilizata se bazeaza pe reducerea marimii fisierului prin eliminarea unor detalii. In functie de gradul de comprimare ales detaliile vor fi mai mult sau mai putin vizibile. In general se alege o comprimare medie astfel incat sa nu poata fi percepute diferentele fata de imaginea originala.   Formatul JPEG se utilizeaza pentru imagini de dimensiuni mari care contin un numar mare de culori (de regula acestea sunt poze). Spre deosebire de formatul GIF, formatul JPEG nu are decat optiunea 'Progressive', optiune ce permite afisarea gradata a imaginii (similar cu gifurile intretesute). Utilizarea acestei optiuni face ca fisierul JPEG sa aiba o dimensiune ceva mai mare, inconvenient care este compensata de faptul ca vizitatorul va putea vedea cum arata imaginea fara ca aceasta sa fie incarcata complet in browser.

PNG - reprezinta initialele de la Portable Network Graphics. Acest format se anunta un concurent foarte serios pentru formatul GIF. Fata de acesta, formatul PNG suporta si imagini in format 'true color' (nu mai exista limitarea la 256 culori). Un alt amanunt foarte important este ca drepturile de autor asupra acestui format nu sunt retinute de nimeni. Este ceea ce se numeste un format 'patent free'. Din nefericire nu este foarte utilizat datorita suportabilitatii reduse de catre generatiile de browsere mai vechi. In tot cazul, Internet Explorer si Netscape Communicator suporta acest format.

Mai jos am dat cateva exemple pentru a putea vedea diferenta dinte formatul GIF si JPEG. Pentru a nu incarca excesiv aceasta pagina am preferat sa folosesc imagini ceva mai mici. Sper ca acest lucru sa nu te impiedice sa observi diferentele care apar intre cele doua formate grafice.

Concluzii

Manipularea fisierelor grafice implica o oarecare experienta in acest domeniu. De aceea este posibil ca lucrurile prezentate aici sa nu ti se para foarte clare. Pentru a face subiectul ceva mai inteligibil, am sistematizat mai jos cateva idei principale.

Pentru inceput este posibil sa nu stii ce format grafic sa folosesti. In aceasta situatie este bine sa salvezi fisierul in ambele formate si sa compari rezultatele. Ceea ce trebuie urmarit este raportul calitate/dimensiunea fisierului. Cu timpul iti vei forma ochiul si nu va mai fi nevoie sa faci acest lucru.

Fisierele GIF folosesc o schema de comprimare care nu elimina detaliile. In schimb numarul de culori este limitat la 256. Se folosesc fisiere GIF in urmatoarele situatii:

• reprezentarea unor butoane (animate sau nu)
• reprezentarea unor figurine (icon-uri)
• imagini mari care contin un numar redus de culori (de exemplu o schema)
• imagini care contin culori transparente

fisierele JPEG folosesc o schema de comprimare bazata pe reducerea detaliilor. Imaginile in format JPEG pot contine un numar foarte mare de culori (pana la 16,7 mil.). Se folosesc in principal pentru:

• imagini de calitate fotografica
• banere publicitare de calitate inalta

Piata softurilor specializate in prelucrarea si optimizarea imaginilor este foarte bogata. Singurele limitari sunt impuse de bugetul fiecaruia. Cele mai scumpe dar si mai performante programe sunt cele oferite de firma Adobe. Este vorba de Adobe Photoshop si Adobe ImageReady. Macromedia a realizat un soft foarte bun pentru lucrul cu fisierele grafice, soft intitulat Macromedia Fireworks Programe mai ieftine sunt Paint Shop Pro (varianta de incercare se gaseste si pe CD-ul revistei CHIP din mai 200), Lview Pro, Gifwizard (free), etc. Lista aceasta poate continua dar te sfatuiesc sa le cauti singur. Multe dintre softurile disponibile pe internet sunt gratuite.   In afara de aceste optiuni mai exista si site-uri specializate care fac online conversia si optimizarea fisierelor grafice. Cred ca acesta varianta este destul de greoaie avand in vedere ca trebuie sa petreci mai mult timp pe net (in felul acest iti consumi orele din cont).