Capitolul 4

Capitolul 4Fonturi

nainte de a aborda tipurile de caractere care pot fi utilizate n documentele Web, se cuvine menionat un fapt: HTML nu este un limbaj orientat spre aspectul (layout) paginii, ci spre coninutul acesteia.

Importana acestei meniuni rezid n aceea c etichetele HTML nu impun, cum s-ar putea crede, ci "sftuiesc" marea varietate de browsere care proceseaz pagina Web, cum s afieze textul. Ceea ce impun ele cu adevrat este coninutul, textul n sine, nu forma de prezentare.

Desigur c nu se poate vorbi de cealalt extrem, a unui arbitrariu absolut, n care fiecare browser va afia textul sub o form absolut imprevizibil. Un text cu o anumit formatare pentru Internet Explorer, s spunem, va fi vizualizat practic identic de toi utilizatorii acestui tip de browser.Exist numeroase etichete care permit formatarea caracterelor i ne ofer posibilitatea de a da textului din pagina Web aspectul dorit.

1. Formatarea caracterelorEticheta care se folosete pentru a da unui caracter sau unui ir de caractere (unui text) aspectul dorit este eticheta container . ntre eticheta de nceput i cea de sfrit se insereaz textul sau caracterul ale crui caracteristici dorim s le stabilim.nainte de a discuta despre atributele etichetei s luam un exemplu:Ion Luca Caragiale Efectul liniei de mai sus este afiarea textului "Ion Luca Caragiale" cu fonturi Arial, de culoare roie i de mrime egal cu 2 puncte.

S analizm succesiv cele trei atribute ale etichetei :

size - dimensiunea textului - poate fi un numr ntre 1 i 7 (dimensiuni absolute), ntre -1 i -3 sau ntre +1 i +4 (dimensiuni relative, adic raportate la dimensiunea deja existent a fontului). Dimensiunea prestabilit (default) a fonturilor este 3.Dac dimensiunile menionate depesc intervalul 1-7, browserul rotunjete automat valorile pentru a le ncadra n acest interval.

color - culoarea textului - este culoarea cu care va fi afiat textul prezent ntre etichete (n exemplul nostru, "Ion Luca Caragiale" ). face - tipul de font - determin tipul de font care va fi utilizat la afiarea textului.

Tipurile cele mai uzuale sunt:

Arial Tahoma Helvetica Times New Roman

Courier Verdana Atributul etichetei permite precizarea fie a unui singur tip de font fie a mai multora, separate prin virgul. Precizarea mai multor fonturi ajut n eventualitatea cnd primul tip indicat nu este instalat pe calculatorul celui care viziteaz pagina, i se face ca n exemplul de mai jos.

n aceast situaie browserul va alege singur din list primul tip de font pe care l recunoate, ignorndu-le pe urmtoarele.

Atenie!

La stabilirea tipului de caracter utilizat n pagin inei seama de faptul c nu toi utilizatorii au instalate pe computerele lor acelai set de caractere ca i dumneavoastr. Din acest motiv, folosirea unor caractere exotice, de efect, poate conduce la un eec n cazul cnd utilizatorul nu are instalat acel font.

Din acest motiv este de preferat folosirea unor fonturi cu utilizare larg, cum sunt cele menionate mai sus.

n Exemplul 4.1 vom aplica pe rnd fiecare dintre cele trei atribute menionate asupra unui text, aspectul paginii descrise de acest document fiind cel din Figura 4.1.

Exemplul 4. 1

fonturi1

Manual de HTML si design Web
Manual de HTML si design Web
Manual de HTML si design Web

Pentru a stabili aspectul textului unei ntregi pagini Web, putem folosi eticheta . Spre deosebire de aceasta nu este o etichet container, deoarece efectul ei se refer la tot textul din pagin. Nu se folosete pentru a stabili caracteristicile unui bloc de text.Este indicat s fie inclus n documentul HTML imediat dup eticheta . Atributele etichetei sunt aceleai cu cele ale etichetei , respectiv: size, color, face.n Exemplul 4.2 vom construi o pagin creia i setm textul cu atributele:

face - tip de font Arial, size - dimensiunea fontului 2, color - culoare albastr. O parte din text va avea alt tip de font, alt mrime i culoare, acestea fiind stabilite prin folosirea etichetei .Exemplul 4. 2

fonturi2

Am ajuns la lectia despre fonturi a Manualului de HTML

Dup cum putei observa din Figura 4.2, caracteristicile textului din pagin au fost setate cu ajutorul etichetei . Pentru a afia simultan o parte din text ntr-un mod diferit am folosit eticheta . Dei eticheta face parte din standardul HTML 3.2, atributele sale nu sunt recunoscute de browserele Netscape. Ca urmare, acesta va afia textul utiliznd propriile setri prestabilite (default), ignornd atributele menionate n eticheta .Urmtorul exemplu (Exemplul 4.3) afieaz un cuvnt avnd literele de mrimi diferite. Aspectul acestei pagini este cel din Figura 4.3.

Exemplul 4. 3

fonturi3

GRATUIT

S trecem n revist, n continuare, alte etichete care schimb aspectul unui caracter sau al unui bloc de text.

2. Accentuarea textului 1. Eticheta face fonturile mai mari dect dimensiunea curent.

Text cu caractere mari Text cu caractere mari

2. Eticheta face fonturile mai mici dect dimensiunea curent.

Text cu caractere mici Text cu caractere mici

3. Etichetele (bold) i realizeaz scrierea cu caractere aldine, sau ngroate (bold).

Text ingrosat 1 Text ingrosat 1

Text ingrosat 2 Text ingrosat 2

4. Etichetele (italic) i (emphasized)realizeaz scrierea cu caractere italice.

Text inclinat 1 Text inclinat 1

Text inclinat 2 Text inclinat 2

5. Etichetele i realizeaz scrierea textului tiat de o linie orizontal.

Text taiat 1 Text taiat 1

Text taiat 2 Text taiat 2

6. Eticheta (underlined) realizeaz sublinierea textului.

Text subliniat Text subliniat

Atenie! Utilizarea textului subliniat trebuie fcut cu grij, ntruct acesta poate fi confundat cu un link.

7. Eticheta (superscript). Prin intermediul ei se pot insera n document caractere/texte plasate deasupra nivelului liniei de scriere.

Apa ingheata la 0 0C Apa ingheata la 0 0C

8. Eticheta (subscript). Prin intermediul ei se insereaz texte plasate sub nivelul liniei de scriere. Coordonatele X1, Y2

Coordonatele X1, Y2 Este de remarcat faptul c etichetele i sunt executate diferit n diverse browsere. Astfel, n Netscape face textul mai mare cu un punct iar mai mic cu un punct dect dimensiunea curenta. n Internet Explorer, afieaz textul cu fonturi de dimensiune 4 iar cu fonturi de dimensiune 2. Etichetele i pot fi repetate pentru a obine un efect mai accentuat.Exemplele urmtoare ilustreaz modul cum pot fi utilizate aceste etichete.

Exemplul 4. 4

fonturi4

Etichete care schimba aspectul textului

Aspectul paginii este cel din Figura 4.4Exemplul 4. 5

fonturi5

Acesta este font Arial
Acesta este font Algerian
Acesta este font Courier
Acesta este font Vivaldi
Acesta este font Garamond
Acesta este font Modern

Pagina arat ca n Figura 4.5Dup cum ai observat mai sus, exist dou etichete al cror efect este acelai: accentuarea textului fie prin scrierea cu caractere italice fie cu caractere aldine.

3. Etichete logice i etichete fiziceEtichetele i se numesc etichete fizice, iar i etichete logice. Etichetele de titluri de la la sunt, de asemenea, etichete logice. Diferena dintre cele dou tipuri de etichete este legat de felul cum sunt ele executate de diversele tipuri de browsere.Astfel, etichetele fizice impun browserului afiarea n formatul exact, precizat prin intermediul lor. Dac browserul nu suport acest format, etichetele sunt ignorate.Spre deosebire de etichetele fizice, cele logice las browserului libertatea de a alege cel mai bun mod de a ndeplini comanda transmis prin eticheta. De exemplu, efectul etichetei este, n cele mai multe browsere, scrierea textului cu caractere italice. Totui, dac un anumit tip de browser nu suport acest format de caractere, va accentua totui textul ntr-un alt mod, cel mai bun de care dispune.Alte etichete logice utilizate n documentele HTML sunt: (citation) Etichet folosit pentru inserarea unui citat. De obicei, citatul este afiat cu caractere italice. (code) Etichete folosite pentru inserarea n text a unor secvene de cod scrise ntr-un limbaj de programare. n general secvenele de cod sunt afiate cu fonturi Courier. (definition) Eticheta este folosit pentru a insera n text definiia unor termeni. Este util la crearea indexului sau glosarului unui document. (keyboard) Aceast etichet logic se folosete pentru a indica un text care urmeaz a fi introdus de la tastatur, ca n urmtorul exemplu: Pentru a parasi programul tastati quit (sample) Este o etichet logic folosit pentru a insera o mostr de text. (teletype) Aceast etichet se folosete pentru a afia textul inclus ntre etichete cu fonturi monospaiate. Tipul de font monospaiat (cum este de exemplu Courier) are proprietatea c fiecrui caracter i se rezerv acelai numr de pixeli pe ecran. Astfel, caracterul "i" va avea alocat tot atta spaiu pe ecran ca i caracterul "W":"Courier" este un font monospaiat.Mai trebuie precizat i faptul c utilizarea unora dintre etichetele de formatare a fonturilor aa cum au fost prezentate ele n acest capitol tinde s fie nlocuit cu foile de stiluri (Cascade Style Sheets) despre care vom vorbi ntr-un capitol viitor.4. RezumatPentru a stabili aspectul unei anumite secvene de text aceasta este inclus ntre etichetele conform sintaxei: text Pentru a seta aspectul textului n toat pagina Web se folosete eticheta conform sintaxei: Accentuarea textului se poate face folosind diverse etichete pentru scrierea cu caractere aldine, cu caractere italice, cu caractere mai mari sau mai mici dect dimensiunea curent a fonturilor.Etichetele sunt de dou tipuri: fizice i logice, etichetele fizice fiind orientate ctre aspectul textului iar cele logice ctre semnificaia textului n cadrul documentului.5. Test1. Pentru a stabili tipul de font pentru ntreaga pagin Web se folosete eticheta:a) b) c) 2. Pentru a stabili tipul de font cu care se face afiarea unui text se folosete atributul:a) characterb) typec) face3. Unul dintre exemplele urmtoare este incorect. Care?a) b) c) 4. Ce realizeaz urmtoarea etichet?a) Afieaz textul cu fonturi de mrime 1.b) Afieaz pe pagin textul "+1".c) Afieaz textul cu fonturi de dimensiune mai mare cu un punct dect dimensiunea curent.5. n afara etichetei ce alt etichet se mai folosete pentru a scrie un text cu caractere aldine?a) b) c) 6. Etichetele i realizeaz:a) scrierea textului cu caractere italiceb) inserarea unei imaginic) scrierea textului cu caractere mai mici dect cele curente7. Ce este incorect n urmtorul exemplu?texta) Nu se pot preciza mai multe tipuri de fonturi ca valori pentru atributul face.b) Tipurile specificate nu se pot scrie cu caractere aldinec) Etichetele i nu se nchid corect.8. Prin ce se aseamn etichetele i ?a) Sunt amndou etichete logice.b) Sunt amndou etichete fizice.c) Servesc amndou la scrierea textului cu caractere italice.9. Care este greeala n urmtoarea construcie?text a) nu este o eticheta containerb) nu suport atributul facec) nu suport atributul size10. Ce efect are urmtoarea etichet? a) Textul se afieaz cu toate cele trei tipuri de fonturi.b) Textul se afieaz cu primul tip de font, dintre cele trei, pe care l recunoate browserul.c) Eticheta nu era nici un efect ntruct este incorect.| Capitolul anterior |Cuprins | Rspunsuri |Capitolul urmtor |Copyright 2003 - 2007 Softpage Internet. Reproducerea neautorizata si/sau fara specificarea susrsei va fi urmarita si sanctionata conform legilor in vigoare. PAGE 6