Capitolul 5

Capitolul 5Formatarea textului

Etichetele despre care vom vorbi n continuare nu se mai refer la particularitile fonturilor ci la felul n care poate fi amplasat un text n cadrul paginii. nainte de a discuta n amnunt despre etichetele care permit formatarea textului, s facem cteva precizri privind felul cum sunt afiate textele.

Dup cum tii, fiierele HTML sunt fiiere text. Aceasta nseamn c atunci cnd salvai fiierul respectiv, el este salvat numai ca text, deci browserul nu poate recunoate i executa dect strict acele comenzi prevzute de etichetele HTML. Din acest motiv, trecerea la un rnd nou, care n editorul de text se realizeaz prin apsarea tastei ENTER, nu este recunoscut de browser.Un alt aspect este plasarea n text a spaiilor. Chiar dac vei introduce spaii suplimentare ntre cuvinte atunci cnd scriei documentul HTML n editorul de text, browserul va afia invariabil un singur spaiu ntre dou cuvinte.

Acesta este motivul pentru care fiecare dintre aceste elemente de formatare a textului are o etichet proprie care indic browserului cum anume s fac afiarea.

1. Trecerea la un rnd nouTrecerea la un rnd nou se realizeaz cu ajutorul etichetei
(de la line break). Eticheta
nu este o etichet container. Ea are rolul de a comunica browserului c texul care urmeaz dup etichet va fi afiat pe un rnd nou aa cum rezult din Exemplul 5.1.

Exemplul 5. 1

text1

Buna ziua
Ma numesc Lucia
Invat sa construiesc o pagina Web

Aspectul paginii descrise n exemplul de mai sus este cel din Figura 5.1.Eticheta
admite atributul clear care poate lua valorile left, right sau all.

n mod normal, la ntlnirea etichetei
linia curent de text este ntrerupt i se face trecerea la o linie nou, ca i la acionarea tastei Enter ntr-un editor de text. Exist ns situaii cnd dorim ca linia s fie afiat lng un anumit element (o imagine, sau un tabel, de exemplu) care blocheaz partea din stnga sau din dreapta a liniei.

n aceste cazuri putem folosi atributul clear al etichetei
ca n Exemplul 5.2. Putei observa efectul atributului clear al etichetei
n Figura 5.2.

Exemplul 5. 2

text2

Acest text va fi afisat intre imagine si marginea dreapta a documentului.
Acest text va fi afisat sub imagine, aliniat stanga. Intre acest text si dreapta imaginii va exista un spatiu gol.

2. Titlurile (Headings)Utilizarea titlurilor este justificat de nevoia de a sublinia prin format structura logic a unui document, dar, nu n ultimul rnd, i de monotonia la care expune un text lung, lipsit de variaie n aspect. Firete c un asemenea text sfrete prin a obosi cititorul Web, obinuit cu texte scurte i concentrate.

Din acest motiv se recomand "spargerea" textelor mai lungi i organizarea lor n secvene mai scurte, marcate de titluri i subtitluri, organizate ierarhic, pe nivele.

Titlurile dintr-un document HTML sunt marcate cu ajutorul etichetelor , , , , , . Ele sunt etichete container, deci necesit eticheta corespunztoare de nchidere.

Eticheta definete titlul de dimensiunea maxim, iar pe cel de dimensiune minim.

Atenie!

Dei standardul HTML nu interzice utilizarea n orice ordine a titlurilor, este de preferat ca acestea s fie folosite n ordinea "normal", progresiv, fr a sri peste vreun nivel (de pild de la H1 direct la H5), pentru a evita eventualele probleme la convertirea textului n alte tipuri de fiiere.

n Exemplul 5.3 vom folosi toate cele ase etichete pentru titluri pentru a face o comparaie cu dimensiunea standard a textului. Putei observa efectul acestor etichete n Figura 5.3.Exemplul 5. 3

text3

Titlu H1Text normalTitlu H2Text normalTitlu H3Text normalTitlu H4Text normalTitlu H5Text normalTitlu H6Text normal

Este de menionat o proprietate interesant a etichetelor de titluri, i anume aceea c un text scris pe aceeai linie cu un titlu este afiat n pagin pe rndul urmtor titlului, lsndu-se o linie liber ntre titlu i text, dei nu este prezent nici una dintre etichetele
sau .

Etichetele de titlu accept atributul align cu valorile left, center i right pentru alinierea titlului blocului de text la stnga (n mod prestabilit), n centru i respectiv la dreapta. Figura 5.4 red aspectul paginii descrie de documentul din Exemplul 5.4 care ilustreaz modul de aliniere al titlurilor.

Exemplul 5. 4

text4

Titluri Titlu de marime 1 aliniat in centru Titlu de marime 2 aliniat la dreapta Titlu de marime 4 aliniat la stanga

3. ParagrafeleTrecerea la un nou paragraf n cadrul textului se realizeaz cu ajutorul etichetei . Aceast etichet comunic browserului s insereze o linie liber n text i s nceap o nou linie. Eticheta este o etichet container dar prezena etichetei de nchidere este opional n anumite situaii. Dac ea este prezent, indic browserului s insereze o linie liber i dup blocul de text cuprins ntre cele dou etichete.

Eticheta admite atributul align cu cele trei valori ale acestuia: left, center i right, care permit alinierea textului la stnga, centrat respectiv la dreapta.

Exemplul 5.5 ilustreaz cele trei modaliti de aliniere a textului.

Exemplul 5. 5

text5

Paragrafe Acesta este un paragraf aliniat la stanga. Acesta este un paragraf aliniat la dreapta. Acesta este un paragraf aliniat la centru.

Din Figura 5.5 care red aspectul paginii descrise n exemplu se poate observa c alinierea la stnga este implicit (nu mai trebuie specificat align="left"). Se mai poate observa c nu a fost folosit eticheta de nchidere a paragrafelor, deoarece la ntlnirea unei noi etichete vechiul paragraf se consider nchis. Totui, prezena sau absena etichetei de nchidere a paragrafului atunci cnd este prezent atributul align trebuie stabilit cu grij, pentru a nu obine rezultate neconforme cu dorinele dumneavoastr.

n Exemplul 5.6 dorim s aliniem un nou paragraf n dreapta paginii, iar textul de pe rndul urmtor paragrafului, care este introdus prin eticheta
, s fie scris normal, de la captul din stnga al paginii.

Exemplul 5. 6

text6

ParagrafeAcest text este scris normal, incepand e la marginea din stanga.Acest text este aliniat la dreapta
Unde este afisat acest text?

Din Figura 5.6 se poate observa c afiarea nu s-a fcut conform inteniilor noastre. Motivul este faptul c eticheta

nu are eticheta de nchidere , i prin urmare efectul su se prelungete pn la ntlnirea unei alte etichete .Dac vei nchide paragraful n mod explicit cu ajutorul etichetei de nchidere, nainte de trecerea la o linie nou, efectul asupra textului va fi cel dorit aa cum rezult din Figura 5.7.

Dei aparent etichetele
i au un efect asemntor, i anume trecerea la o linie nou, ele nu sunt executate la fel.
comunic browserului unde se ncheie o linie, n vreme ce i impune s lase o linie liber i s treac la un nou paragraf. Dac folosim atributul align al etichetei n situaiile cnd dup paragraf este introdus un alt element n pagin este recomandat nchiderea n mod explicit a etichetei respective.

4. Preformatarea textului Aa cum am precizat la nceputul capitolului, atunci cnd editai documentul HTML cu ajutorul unui editor de text, indiferent cte spaii vei lsa ntre cuvinte sau ntre liniile de text, browserul va afia textul invariabil cu un singur spaiu ntre cuvinte i va ajusta lungimea liniilor n funcie de mrimea ferestrei. Cu alte cuvinte, orice spaii sau linii libere suplimentare vor fi ignorate de ctre browser. Aa cum am vzut mai sus, trecerea la o linie nou se realizeaz cu ajutorul etichetei
iar inserarea unei linii libere se face cu ajutorul etichetei .

Exist, ns, i o etichet care impune browserului s afieze textul ntocmai cum a fost el formatat n documentul HTML. Este vorba despre eticheta .Eticheta permite preformatarea textului i menine spaierea i alinierea textului aa cum a fost fcut n documentul surs HTML. Eticheta de nchidere este obligatorie.

Exemplul 5.7 ilustreaz modul cum poate fi folosit eticheta . Aspectul paginii descrise n acest document este cel din Figura 5.8.Testai exemplul folosind eticheta iar apoi eliminai-o, pentru a observa mai bine efectul su.

Exemplul 5. 7

text7

Textul preformatatAcesta este un text normal Orar:Luni 8:00 Romana 9.00 Matematica 10:00 Geografie 11.00 Istorie 12.00 FizicaAcesta este textul de mai sus preformatat

Orar:Luni 8:00 Romana 9.00 Matematica 10:00 Geografie 11.00 Istorie 12.00 Fizica

5. Centrarea textului Aa cum am vzut mai sus, afiarea textului centrat n pagin se poate face cu ajutorul etichetei avnd atributul align setat la valoarea "center".

O alt posibilitate de a realiza acest lucru este de a utiliza o etichet dedicat, incluznd textul ntre etichetele

. Eticheta este o etichet container, prezena etichetei de nchidere fiind obligatorie.

Exemplul 5.8 realizeaz centrarea unui text.

Exemplul 5. 8

text8

Centrarea textului Acesta este un text centrat. Acesta este un text centrat. Acesta este un text centrat. Acesta este un text centrat. Acesta este un text centrat. Acesta este un text centrat. Acesta este un text centrat. Acesta este un text centrat.

Aspectul paginii descrise n exemplul de mai sus este cel din Figura 5.9.

6. Afiarea textului pe o singur linie n cazul cnd se dorete afiarea unui text pe o singur linie, chiar dac acest lucru nseamn depirea marginii ferestrei i derularea acestuia pe orizontal, se include blocul de text ntre etichetele .

Aceast etichet mpiedic browserul s limiteze lungimea liniei la dimensiunea ferestrei.

Exemplul 5.9 ilustreaz folosirea etichetei , pagina avnd aspectul din Figura 5.10.

Exemplul 5. 9

text9

Textul pe o singura linie Acesta este un text care va fi afisat pe o singura linie, chiar daca depaseste dimensiunile unei ferestre obisnuite. Puteti verifica acest fapt prin reducerea dimensiunilor ferestrei browserului.

7. Blocul O alt modalitate de delimitare i de formatare a unui bloc de text este folosirea etichetei container . Prezena etichetei de nchidere este obligatorie.

Eticheta realizeaz divizarea unui document HTML n seciuni distincte, diviziune n care pot fi incluse, pe lng text, i alte elemente: legturi, imagini, formulare. Ca i n cazul etichetei pentru introducerea paragrafelor, eticheta admite atributul align, pentru alinierea textului. Valorile posibile ale acestui atribut, deja cunoscute, sunt:

left - aliniere la stnga

center - aliniere la centru

right - aliniere la dreapta

Alinierea precizat de atributul align al blocului are efect asupra tuturor elementelor incluse n blocul . Blocul admite i atributul nowrap, care interzice ntreruperea rndurilor de ctre browser.

n documentul descris n Exemplul 5.10 este ilustrat utilizarea acestei etichete. Pagina va avea aspectul redat n Figura 5.11.

Exemplul 5. 10

text10

Blocul divAceasta linie este o linie de text normala.

Aceasta este prima sectiune a textului, aliniata dreapta.

Aceasta este a doua sectiune a textului, aliniata central.

Aceasta este a treia sectiune a textului, aliniata stanga.

8. Linii orizontalentr-o pagina Web pot fi inserate linii orizontale care au rolul de a delimita diferitele zone ale paginii sau de a mbunti aspectul ei estetic. Acest lucru se face cu ajutorul etichetei . Eticheta nu este o etichet container deci nu exist o etichet de nchidere.

Pentru a configura o linie orizontal se utilizeaz urmtoarele atribute ale etichetei :

align - permite alinierea liniei orizontale. Valorile posibile sunt left, center i right width - specific lungimea liniei - lungimea poate fi stabilit n pixeli sau n procente din limea ecranului.size - specific grosimea liniei, exprimat n pixeli

color - permite definirea culorii liniei

Atributele etichetei sunt ilustrate n Exemplul 5.11.

Exemplul 5. 11

text11

Linii orizontale Linie aliniata la stanga, lungime 100%, grosime 2 Linie aliniata in centru , lungime 50%, grosime 5 pixeli. Linie aliniata la dreapta , lungime 150 de pixeli, grosime 12 pixeli , de culoare rosie.

Din Figura 5.12 care red aspectul paginii descrise n exemplul anterior se poate observa c simpla prezen a etichetei fr nici un fel de atribute duce la afiarea unei linii predefinite, de lungime egal cu 100% din pagin i grosimea egal cu 2 pixeli.

Atributul color al etichetei nu este suportat de browserul Netscape.

n exemplul urmtor (Exemplul 5.12) vom ilustra modul n care eticheta aliniaz elementele coninute n interiorul su, n cazul nostru text i linii orizontale. Pagina descris n acest exemplu va avea aspectul din Figura 5.13.

Exemplul 5. 12

text12

Linii orizontaleLinia de mai jos este aliniata la stanga

Liniile de mai jos sunt aliniate la centru cu ajutorul blocului DIV

Linii aliniate la centru

9. Inserarea unei adrese potaleDac ntr-o pagin Web trebuie inclus o adres potal, atunci putem folosi eticheta urmtoare: .Eticheta este o etichet logic i are drept efect, n cele mai multe browsere, afiarea textului cu caractere italice.

n Exemplul 5.13 este inserat n pagin o adres, aspectul paginii fiind cel din Figura 5.14.

Exemplul 5. 13

text13

Adresa Adresa firmei noastre este GoldenWeb Consult
Str. Paradisului, Nr. 1
Bucuresti

10. Inserarea unui citatPentru a insera un citat ntr-un text se pot folosi dou etichete, n funcie de dimensiunea citatului.

Astfel, dac citatul depete cteva linii, se folosete eticheta .Efectul acestei etichete este afiarea indentat a textului cuprins ntre eticheta de nceput i cea de sfrit (n majoritatea browserelor) sau afiarea acestuia cu caractere italice (rareori).

Dac dorim ca ntr-un text s citam un termen, titlul unei lucrri sau s dm o referin, putem include textul respectiv ntre etichetele .n cele mai multe dintre browsere, textul inclus ntre etichetele va fi afiat cu caractere italice.

Exemplul 5.14 ilustreaz modul de folosire al celor dou etichete. Pagina descris n exemplu are aspectul din Figura 5.15.

Exemplul 5. 14

text14

Inserarea unui citatTextul de mai jos este un citat Probabilitatea ca o felie de paine unsa cu unt sa cada pe covor cu fata unsa in jos este direct proportionala cu valoarea covorului

Citatul de mai sus face parte din Legile lui Murphy

11. Inserarea caracterelor specialeDei este impropriu s numim caracterul "blank" sau space un caracter special, avnd n vedere frecvena cu care este folosit, totui acesta, ca i alte caractere, este inserat n pagin cu ajutorul unei comenzi speciale: comanda & (comanda ampersand).

Aa cum tii deja, indiferent cte spaii vom introduce atunci cnd editm documentul HTML, browserul le va ignora i va afia cuvintele cu un singur spaiu ntre ele. Pentru a fora introducerea spaiilor suplimentare se folosete comanda (no break space).

Atenie

Comanda ncepe cu simbolul & (ampersand) i se termin cu ; (punct i virgul).

n Exemplul 5.15 este ilustrat modul cum pot fi spaiate cuvintele folosind comanda Exemplul 5. 15

text15

Inserarea caracterelor speciale

Cuvintele din acest text sunt despartite de grupuri de trei spatii.

Dup cum observai din Figura 5.16 cuvintele sunt desprite prin trei spaii n loc de unul singur. Putei aduga oricte spaii dorii n acest mod. De asemenea, pentru a indenta un text, putei insera la nceputul fiecrei linii numrul de comenzi egal cu numrul de spaii cu care vrei s indentai textul.

Iat mai jos un tabel cu comenzile necesare pentru a insera n text cele mai cunoscute caractere.

Tabelul 5. 1Denumire caracterReprezentarea graficComanda HTML

Spaiu liber

Copyright

Trademark

Registered sau

Mai mic dect>

Ampersand&&

Ghilimele""

Cent

Un sfert

O jumtate

Trei sferturi

Grade

12. Sugestii privind aspectul textuluiAspectul textului ntr-o pagin Web este esenial pentru calitatea acesteia. Un text lizibil, scris cu caractere de dimensiune potrivit, bine organizat i aezat n pagin va face din pagina dumneavoastr un mediu accesibil i prietenos care l va stimula pe vizitatorul acesteia s parcurg cu plcere informaiile oferite.

Iat cteva sfaturi referitoare la aspectul paginilor Web, menite s v ajute la crearea unor texte lizibile, ct mai uor de parcurs de ctre cititori.

Nu folosii fonturi de dimensiuni prea mici sau fonturi cu serife, cum este Times New Roman. Dei este tipul cel mai utilizat pentru publicaiile tiprite, textele scrise cu Times New Roman sunt mai greu de citit de pe monitor. Preferai tipurile Arial, Verdana, Helvetica.

Nu folosii numai litere mari (majuscule). Textele scrise cu majuscule sunt mai greu de citit.

Nu facei exces de caractere aldine (ngroate, bold). Limitai-v la a accentua cuvinte sau poriuni reduse din text. De asemenea, nu folosii caractere cursive (nclinate, sau italice) n exces.

Nu folosii prea multe tipuri de fonturi i nici tipuri de fonturi rare. Folosirea unui mare numr de fonturi de dimensiuni i culori diferite va face ca paginile s arate ncrcate i s fie greu de citit. Folosirea tipurilor de fonturi rare aduce dup sine riscul ca vizitatorul s nu le aib instalate pe computerul propriu, astfel c textul va fi afiat de browser cu fonturile prestabilite.

Nu aranjai textul n pagin pe dou coloane. Aceasta este o practic obinuit n ziare i reviste dar nu este potrivit ntr-o pagin Web deoarece foreaz vizitatorul ca odat ajuns la baza paginii s o deruleze din nou pentru a citi ce-a de-a dou coloan.

Este bine s folosii fiecare etichet n scopul pentru care a fost ea definit. Nu folosii etichetele de titlu pentru a accentua anumite pri ale textului care nu sunt titluri. Nu folosii eticheta pentru a insera alte texte dect adrese sau eticheta pentru a realiza scrierea cu caractere italice a textului.

Motoarele de cutare indexeaz paginile Web i n funcie de elementele (etichetele) care sunt incluse n ele iar folosirea lor neadecvat conduce la o indexare eronat a paginii dumneavoastr.

Multe motoare de cutare scaneaz pagina n cutarea titlurilor i pe baza lor construiesc o schi a paginii.

Dac vei folosi etichetele de titlu pentru a accentua anumite pri ale textului (operaie pe care o putei realiza n mod corect folosind eticheta ) vei oferi informaii eronate motoarelor de cutare. n acest fel, scad ansele ca paginile dumneavoastr s fie identificate i citite de cei interesai.

Atenie!

Nu uitai c paginile vor fi publicate pe Web, unde, pentru a-i atinge scopul, adic pentru a fi citite, trebuie mai nti descoperite de cititori, cel mai frecvent prin intermediul motoarelor de cutare.

13. RezumatBrowserul afieaz textele cu cte un singur spaiu ntre cuvinte i nu recunoate sfritul de linie i nceputul unei linii noi. Elementele de formatare a textului se introduc n documentul HTML prin intermediul unor etichete specifice:

trecerea la un rnd nou: eticheta

text introducerea unui titlu: etichetele - text introducerea unui paragraf: eticheta text preformatarea textului: eticheta text centrarea textului: eticheta text afiarea textului pe o singur line: eticheta text crearea unui diviziuni n text: eticheta text inserarea unei linii orizontale: eticheta

inserarea unei adrese: eticheta text inserarea unui citat: etichetele i texttext inserarea caracterelor speciale prin comanda &;14. Test1. Care este rolul etichetei
?a) Trecerea la un rnd nou

b) Inserarea unei linii libere n text

c) Inserarea unei linii orizontale

2. Pentru ca browserul s afieze textul aa cum a fost el formatat n documentul HTML se folosete eticheta:

a) b) c) 3. Ce se va afia n urmtorul exemplu?

Text1Text2a) Text1 i Text2 vor fi aliniate la dreapta, cu o linie liber ntre ele

b) Text1 va fi aliniat la stnga, Text2 va fi aliniat la dreapta, cu o linie liber ntre ele

c) Text1 i Text2 vor fi scrise pe aceeai linie

4. Pentru a scrie un titlu de dimensiune maxim folosim eticheta:

a) b) c) 5. Pentru a afia un text pe o singura linie:

a) folosim eticheta
b) folosim eticheta c) nu folosim nici o etichet 6. Care dintre urmtoarele etichete nu realizeaz centrarea textului?

a) Textb) Textc) Text7. Ce realizeaz eticheta ?a) inserarea unui link

b) inserarea unei adrese de e-mail

c) inserarea unei adrese potale

8. Pentru a insera ntr-o pagin o linie orizontal standard folosim eticheta:

a) b) c) 9. Eticheta folosete la:

a) indentarea textului

b) scrierea textului cu caractere italice

c) inserarea unui citat n text

10. Care dintre aceste afirmaii este fals?

a) Toate spaiile i liniile libere introduse n text la editarea documentului HTML sunt afiate ntocmai de browser.b) Un text scris pe aceeai linie cu o etichet de titlu este afiat sub titlu, chiar dac nu este prezent eticheta
.

c) Pentru a introduce spaii suplimentare n text se folosete comanda

PAGE 10