HTML - Formatarea textului referat

x5y21ye
O proprietate care diferentiaza editoarele de text de procesoarele de text este modul in care apare textul in forma finala: se pot schimba fonturile, se poate varia marimea caracterelor, se poate opera asupra alinierii orizontale sau/si verticale?
O mare parte dintre aceste intrebari au raspuns in HTML, desi nu toate au raspunsuri la nivelul celor mai performante procesoare de text.

Nota: Pentru caracterele speciale, introduse prin secvente escape, vezi

Aranjarea textului
Unitatea principala de text este paragraful, care se remarca prin lasarea unui spatiu vertical suplimentar dupa el. Textul este aliniat, implicit, la stanga si este zdrentuit in partea dreapta.
In lipsa unor marcaje adecvate, nu se vor interpreta trecerile pe un rand nou (CR/LF-urile), alinierile efectuate din tastatura etc. Aceasta are justificarea ca documentele trebuie sa fie afisate pe masini diferite, dar mai ales pentru ca toate browserele efectueaza wrap automat ceea ce poate interfera inadecvat cu formatari ale autorului. In cazurile cand este necesara o anumita forma de curgere a textului, aceasta se realizeaza prin tagurile prezentate in continuare.

are ca efect scoaterea in evidenta a textului din container prin indentarea din partea stanga. Partea dreapta ramane zdrentuita. Tag-ul BLOCKQUOTE provoaca si trecerea la un nou paragraf. BLOCKQUOTE poate fi imbricat in taguri precum BLOCKQUOTE, CENTER.

Exemplu:

W. Churchill a zis despre un politician al vremii: <BLOCKQUOTE>Are toate calitatile pe care le detest si niciun viciu pe care sa-l admir.<BLOCKQUOTE> cuvinte care ...

produce urmatoarea forma pe ecranul vizitatorului.
Incercati sa modificati dimensiunile ferestrelor si observati efectul asupra formatarii.

reprezinta o rupere de rand, fara a se trece la un nou paragraf (deci fara a se lasa spatiu suplimentar intre randuri).
CLEAR are efectul anularii alinierilor precedente cand marginea stanga, dreapta, ambele, sau niciuna sunt libere de imagini flotante (vezi IMG).
Exemplu:

<BLOCKQUOTE> My crown is in my heart, not on my head;<BR> Not decked with diamonds and Indian stones,<BR> Nor to be seen: my crown is called content;,<BR> A crown it is that seldom kings enjoy.</BLOCKQUOTE> <P ALIGN=center>William Shakespeare

va fi vazut ca o strofa, indentata din ambele parti (efectul tag-ului BLOCKQUOTE) si cu impartirea corecta in versuri (efectul tag-urilor BR):
Este de remarcat aparitia unui nou tag, la linia finala, tag explicat in continuare.

<CENTER>linie de text</CENTER>

produce centrarea liniei de text intre marginile laterale.
Anumite browsere nu recunosc acest tag; unele editoare HTML convertesc tagul in
<CENTER><P>text</P></CENTER> care introduce efectul suplimentar al formarii unui nou paragraf cu textul centrat (vezi <P>).

Utilizarea tagului CENTER este, uneori, echivalenta cu <P ALIGN=center>.

marcheaza inceputul unei noi diviziuni (sectiuni) a documentului.
ALIGN indica alinierea textului pentru intreaga diviziune. Este, de fapt, singurul motiv pentru care poate, deocamdata, sa apara tagul DIV. In lipsa optiunii ALIGN nu se produce absolut nimic in prezentarea documentului. text reprezinta unul sau mai multe caractere.
DIV marcheaza doar locul unde incepe o noua sectiune in document, ca un simplu comentariu, sau cu posibilitatea de a schimba alinierea textului.
Tagul DIV nu produce trecerea pe un rand nou. Exemplu:

Inceputul documentului. <DIV> Este o noua sectiune.</DIV> Nu se modifica nimic.<BR> <DIV ALIGN=right> Se incepe alta sectiune.</DIV> Textul este aliniat pe dreapta.

Textul va arata dupa cum urmeaza: Pot sa existe diferente dupa browserul utilizat. De exemplu, Netscape introduce o rupere de linie la intalnirea lui DIV.

<P a ALIGN=left|center|righti> text a</P>i

indica inceputul unui nou paragraf. De observat ca tagul de sfarsit este optional si, de fapt, nici nu se utilizeaza in mod uzual (anumite editoare de HTML il genereaza totusi).
ALIGN indica alinierea paragrafului. Daca s-a schimbat alinierea, atunci aparitia tagului de sfarsit </P> reface alinierea implicita (la stanga). text este textul paragrafului. In lipsa tagului de sfarsit se considera pana la prima aparitie a unui nou tag P.
Exemple au fost date anterior.

considera ca textul este preformatat si va aplica un font neproportional pentru a afisa exact forma predefinita a textului.
width indica lungimea maxima a unui rand. Unele browsere (inclusiv Netscape Navigator) nu accepta atributul WIDTH.
Aparitia marcajelor <PRE> si </PRE> produce un nou paragraf.
Exemplu:

<PRE>
1
1 1
1 2 1
1 3 3 1
1 4 6 4 1
</PRE> va afisa pe ecranul vizitatorului o imagine similara cu cea de mai sus (scrierea sub forma triunghiulara: in timp ce omiterea containerului PRE va produce, datorita neconsiderarii spatierilor si trecerilor pe alt rand:
Formatarea caracterelor
Desi exista multe taguri dedicate formatarii caracterelor, aceasta formatare nu este la nivelul celei produse de un procesor de text. Multe taguri sunt lasate la interpretarea browserelor sau constituie rezerva pentru dezvoltari ulterioare. Este de asteptat ca urmatoarele versiuni de HTML sa accepte definirea de stiluri, ceea ar facilita formatarea unitara a unui document.
Formatarea caracterelor se poate efectua la nivel fizic, la nivel logic, la nivel de comunicare.

Formatare la nivel fizic
Formatarea la nivel fizic se efectueaza atunci cand se indica direct fontul, culoarea si/sau stilul in care se afiseaza anumite portiuni de text. <B> text </B> aplica stilul bold textului. Este utilizat pentru evidentierea anumitor cuvinte, propozitii etc. Nu produce o rupere de rand.

este un tag HTML 3.2 si deci posibil sa nu fie interpretat de anumite browsere. Are scopul de a schimba dimensiunea, culoarea si/sau fontul pentru textul continut in container.
SIZE arata o modificare relativa a dimensiunii fontului in cazul cand apare + sau -. Setarea poate fi absoluta prin indicarea numarului dintre 1 si 7. Marimea implicita de font este 3.

COLOR indica noua culoare pe care o va avea textul. Codul culorii este dat in formatul hexazecimal RGB: rr reprezinta rosu (de la 00 la FF); gg reprezinta verde (de la 00 la FF); bb reprezinta albastru (de la 00 la FF). color este unul dintre numele acceptate pentru culori. Cele mai uzuale sunt: red, maroon, yellow, green, lime, teal, olive, aqua, blue, navy, purple, fuchsia, black (este culoarea implicita), gray, silver, white.

Pentru a observa modul cum browserul dvs. interpreteaza culorile, atat cele denumite, ca si cele date prin codul hexazecimal, puteti urmari

FACE specifica un nou font dintre cele suportate. In cazul in care se selecteaza un font care nu este accesibil pe calculatorul client, browserul va substitui fontul implicit (posibil Times Roman).

va fi vazut bine pe un terminal color:

Normal, <FONT SIZE=-1>Mai mic, </FONT> <FONT SIZE=-2>Si mai mic.</FONT>

<P><FONT SIZE=4 COLOR="blue">Acesta este un text albastru, de marime 4.</FONT><BR>
<FONT SIZE=4 COLOR="green" FACE="Courier">Acesta este un text verde, de marime 4, in Courier.</FONT>

aplica textului stilul italic (inclinat). Este utilizat pentru evidentierea anumitor cuvinte, propozitii etc. Nu produce o rupere de rand.

produce "taierea" cu o linie a textului continut (utilizat de obicei pentru producerea unor exemple negative: asa nu se face). Nu are loc rupere de rand.
Fiind un tag nou (HTML 3.2) nu este recunoscut de toate browserele.

afiseaza textul in fontul teletype (neproportional). Este utilizat, in general, pentru prezentarea unei iesiri de tip listing (clasic) de calculator. Nu produce o rupere de rand.

subliniaza textul continut. Nu provoaca trecerea pe un rand nou.
Sublinierea cu tagul U poate produce, impreuna cu utilizarea unor culori, confuzii cu legaturile utilizate intr-un hipertext. Se va prefera evidentierea textului prin alte mijloace.

Formatare la nivel logic
Formatarea la nivel logic se efectueaza atunci cand se indica doar faptul ca o anumita portiune de text trebuie evidentiata fata de textul din jur si se lasa la latitudinea browserului sa efectueze aceasta evidentiere. Multe dintre tagurile care realizeaza acest lucru produc acelasi efect vizibil, diferentierea lor fiind lasata browserelor de generatii viitoare.
<BIG>text</BIG>

afiseaza textul din container cu dimensiune mai mare decat fontul de baza. Unele editoare HTML (inclusiv Netscape Editor) convertesc tagul BIG in <FONT SIZE=+1>text</FONT>.
Tagul nu produce o rupere de rand.

identifica un termen de definitie si-l scrie cu caractere diferite de textul inconjurator.
Este un tag HTML 3.2 si unele browsere nu-l recunosc. Nu produce o rupere de rand.

evidentiaza textul specificat, de obicei prin scrierea italica.
Nu produce rupere de rand.

aplica unul dintre cele sase formate predefinite de antet. Fiecare browser are formate proprii pentru stilurile logice H1 ... H6.
Este de preferat ca stilurile sa se specifice in ordine, deci sa nu se utilizeze, de exemplu, H3 fara a fi utilizat H2 etc. Vor fi rezervate, in general, pentru diverse niveluri de titluri.

Browserul cu care vedeti aceasta pagina are urmatoarele stiluri predefinite pentru antete, produse de textul:

<H1>Antet 1</H1>
<H2>Antet 2</H2>
<H3>Antet 3</H3>
<H4>Antet 4</H4>
<H5>Antet 5</H5>
<H6>Antet 6</H6>

Tagurile Hn provoaca o rupere de rand si, implicit, au cate un rand gol inainte si dupa.

aplica textului mentionat un font similar intrarii de la tastatura, deci un font neproportional. Multe browsere aplica acelasi font pentru KBD, PRE, TT si alte asemenea (de exemplu Netscape Navigator utilizeaza Courier).
Tagul KBD nu provoaca o rupere de rand automata.

aplica textului din container un font asemanator iesirii de calculator (neproportional). Multe browsere utilizeaza acelasi font ca pentru TT.
Nu produce trecerea pe un rand nou.

afiseaza textul cu o dimensiune mai mica decat textul inconjurator.
Netscape Editor utilizeaza conversia in <FONT SIZE=-1 >text</FONT>.
Nu produce rupere automata de rand.

produce o evidentiere pronuntata a textului, uzual prin trecerea in aldine.
Nu produce rupere automata de rand.

muta textul selectat mai jos decat linia de baza a textului precedent si aplica un font mai mic (face trecerea in indice inferior).
Nu produce rupere automata de rand.

muta textul selectat mai sus decat linia de baza a textului precedent si aplica un font mai mic (face trecerea in indice superior).
Nu produce rupere automata de rand.

Exemplul urmator arata cum se vizualizeaza texte care fac obiectul unora dintre tagurile prezentate anterior:

<KBD>Acesta este un text scris cu KBD</KBD><BR>
<SAMP>Acesta este un text scris cu SAMP</SAMP><BR>
<SMALL>Acesta este un text SMALL</SMALL> <BR>
<STRONG>Acesta este un text STRONG</STRONG> <BR> formula apei este H<SUB>2</SUB>O,<BR> iar X<SUP>2</SUP> este X*X.

Formatare la nivel de comunicare
In aceasta sectiune se prezinta taguri dedicate formatarilor specifice pentru anumite tipuri de informatii. Formatarile respective intra tot in categoria formatarilor logice, deci forma de vizualizare depinde de browserul utilizat.
<ADDRESS a ALIGN=left|center|righti> text
</ADDRESS>

prin care se vizualizeaza o informatie de adresa, uzual o adresa de e-mail.
ALIGN indica modul de aliniere.
Acest tag provoaca trecerea la un paragraf nou.:

<ADDRESS ALIGN=center>Pentru mai multe informatii contactati-ma la val@thor.infoiasi.ro</ADDRESS>

indica o referinta, cum ar fi un nume de carte, articol, numele unui autor. Referinta este diferentiata fata de textul curent. Formatarea este logica, deci diferentierea este dependenta de browserul utilizat.
Nu se produce rupere de rand:

In acest manual s-au utilizat unele definitii de taguri dupa volumul <CITE>HTML in Plain English</CITE>

aplica textului din container un font neproportional precum cel de calculator (clasic). Forma efectiva de afisaj depinde de browser. Multe browsere utilizeaza acelasi font pentru CODE, KBD, PRE, SAMP si TT.
:

<CODE>Acesta este un exemplu de utilizare a formatarii CODE.</CODE>

aplica textului din container un font similar iesirilor de calculator. Este un tag pastrat doar pentru compatibilitate cu versiuni mai vechi.
Provoaca trecerea la un nou paragraf.
Este preferabil sa se utilizeze tagul PRE pentru realizarea functiunilor LISTING si CODE.

produce o evidentiere a textului, uzual prin trecerea in italice. Este o formatare logica, depinde deci de browser, dar este dedicata evidentierii termenilor noi introdusi intr-un document.
Nu produce schimbari in curgerea textului.

Extensii Netscape si Microsoft
Aceste extensii nu sunt recunoscute de toate browserele, dar importanta autorilor le va impune probabil ca standarde.
<BASEFONT a SIZE=1|2|3|4|5|6|7i a COLOR="#rrggbb"|"color"i a NAME="font"i> a</BASEFONT>i

defineste fontul care va fi utilizat pentru textul care urmeaza tagului BASEFONT.
SIZE este marimea fontului. Implicit este 3.
COLOR este culoarea hartiei. Optiunea este doar Microsoft.
NAME specifica numele fontului. Optiunea este doar Microsoft.

produce "clipirea" textului continut.
Este extensie Netscape. :

Acesta este un <BASEFONT SIZE=5>exemplu</BASEFONT> de utilizare a formatarii BASEFONT si <BASEFONT SIZE=4> <BLINK>BLINK</BLINK>. De remarcat ca dimensiunea din BASEFONT se pastreaza in continuare.

anuleazaa wrap-ul automat al cuvintelor pentru textul din container si ruperile de randuri generate, cu exceptia celor provocate de BR, P si WBR.
Aceasta este extensie Netscape si Microsoft si poate servi la aranjarea unor texte in linii predefinite.
Exemplul care urmeaza poate fi ilustrativ daca veti incerca sa modificati dimensiunea ferestrei de afisare a exemplului.

Acesta este un text care permite ruperea automata a randurilor si potrivirea pe dimensiunea de afisare.<P> <NOBR>Aici incepe zona sub actiunea tagului NOBR. Este de remarcat ca se pastreaza randurile asa cum au fost scrise, cele lungi putand fi vazute cu defilarea orizontala.<BR> Aici s-a utilizat BR pentru trecerea la un nou rand.<P> Aici s-a utilizat P pentru trecerea la un nou paragraf. </NOBR> <P>Aici s-a iesit de sub influenta NOBR.

<WBR>

insereaza o rupere de rand, daca aceasta este necesara, intr-o linie aflata in containerul NOBR, este similar unui cratime optionale (intentia autorilor, dar diverse browsere pot sa considere obligatorie trecerea pe un nou rand).
Utilizarea uzuala este deci

Exemplul care urmeaza este bazat pe acelasi text ca si exemplul de la NOBR, dar in cadrul propozitiei lungi s-au introdus taguri WBR. Urmariti ce se intampla cu textul la modificarea latimii ferestrei.

Acesta este un text care permite ruperea automata a randurilor si potrivirea pe dimensiunea de afisare.<P> <NOBR>Aici incepe zona sub actiunea tagului NOBR.<WBR> Este de remarcat ca se pastreaza randurile asa cum au fost scrise, <WBR> cele lungi putand fi vazute cu defilarea orizontala. <BR> Aici s-a utilizat BR pentru trecerea la un nou rand.<P> Aici s-a utilizat P pentru trecerea la un nou paragraf. </NOBR> <P>Aici s-a iesit de sub influenta NOBR.