Elemente utilizate la formatarea textului unui document HTML

HTML este construit pe ideea ierarhiilor de informatii si pe specificarea elementelor care reflecta aceasta ierarhie. Într-un document aceasta înseamna ca unele informatii sînt mai importante ca altele si ca, de obicei, sînt parti de text (informatie) care includ alte (sub)parti de text. Cînd se descrie aceasta situatie într-un document se obtine o structura care reflect 131j91b a ierarhia într-un mod asemanator exemplului urmator:

I.    Primul element principal (Major Topic)

A. Primul Sub-Topic

Primul sub-sub-topic care se intinde...<"CR/LF">

....si aici... rîndul de sus trebuind sa fie întrerupt...

Al doilea sub-sub-topic

B. Al doilea Sub-Topic

II. Al doilea element principal (Major Topic)...etc., etc.

Uneori documentul doreste reflectarea acestei logici. Pentru aceasta este pusa la dispozitia autorului posibilitatea definirii de titluri si/sau subtitluri pe diverse nivele.

De remarcat ca un rînd de text afisat de un browser se termina doar atunci cînd se "termina" ecranul sau se specifica explicit acest lucru cu un tag special. Inserarea de linii în document (CR/LF cu "Enter") nu se reflecta si la afisare. Browserele ignora toate "spatiile albe" (white-spaces) din documente (caracterele de tip CR, LF, TAB, etc).

1. Terminarea rîndului (elementul BR)

Sintaxa

<BR>

Atribute posibile:

CLEAR=[ left | all | right | none ] (stergerea/setarea pozitiei obiectelor flotante)

atribute comune core

Contine:

Nimic (gol)

Continut în:

elemente de tip inline

elemente de tip block

Descriere:

Tag-ul <BR> termina rîndul de text acolo unde este inserat. Cînd navigatorul întîlneste tag-ul <BR>, afiseaza textul care urmeaza acestui tag începînd de la marginea din stînga, indiferent unde anume este aceasta margine. De pilda în cazul în care elementul <BR> este inserat într-o lista, marginea din stînga este alta decît în cazul unui text normal. Tag-ul se foloseste cînd dorim sa terminam afisarea rîndului într-un anumit loc.

Trebuie avuta grija la inserarea acetui tag deoarece modul în care apare un text/linie depinde si de fontul utilizat si dimensiunea sa.

Atributul CLEAR muta dedesubt obiectele flotante (care pot apare în diverse pozitii în pagina, cum ar fi imaginile si tabelele). Mult mai flexibila este metoda stilurilor deoarece proprietate clear se poate aplica oricarui element).

Exemplu:

Textul urmator dintr-un document HTML

si daca ramuri bat în geam,<BR>De ce nu tai copacul?

Are ca efect afisarea în browser:

si daca ramuri bat în geam,

De ce nu tai copacul?

2. Titluri (elementul Hi)

Sintaxa:

<H1>Titlu de nivel 1</H1>

<H2>Titlu de nivel 2</H2>

<H3>Titlu de nivel 3</H3>

<H4>Titlu de nivel 4</H4>

<H5>Titlu de nivel 5</H5>

<H6>Titlu de nivel 6</H6>

Atribute posibile:

ALIGN = [ left | center | right | justify ] (alinierea orizontala)

atribute comune (atribute core, atribute de internationalizare si evenimente scriptabile)

Contine:

elemente de tip inline

Continut în:

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DEL, DD, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Descriere:

Titlurile sînt utilizate pentru ierarhizarea diferitelor sectiuni de text. HTML defineste sase nivele pentru titluri, indicate în formatul <Hl> <H2>...<H6>. La afisare titlurile nu sînt numerotate, diversele navigatoare afisîndu-le astfel încît sa iasa în evidenta (centrat, îngrosat, subliniat, marit, etc). Ele nu trebuie identate în document, identarile fiind ignorate de navigatoare. Spre deosebire de titlul documentului (<TITLE> Titlul documentului </TITLE>), titlurile utilizate la structurarea documentului (<H1> Titlul de ordinul 1 </H1>) pot avea orice lungime.

H1 defineste headerul (titlul) de nivel 1, adica cel mai important. În mod normal, într-un document nu trebuie sa existe decît un singur astfel de header. Autorii nu trebuie sa se bazeze pe dimensiunea fontului utilizat în acest caz, ci doar pe importanta headerului (titlului) respectiv.

Autorii pot sa sugere cum sa apara titlurile prin folosirea stilurilor.

Exemplu:

Headerul H1 poate fi sugerat astfel:

h1

Dimensiunile (normale) ale acestor taguri sînt:

<H1> Header 1 </H1>

<H2> Header 2 </H2>

<H3> Header 3 <H3>

<H4> Header 4 </H4>

<H5> Header 5 </H5>

<H6> Header 6 </H6>

3. Containere de text (stiluri ale unui bloc)

A. Paragrafe (elementul P)

Sintaxa:

<P> Paragraful continut </P>

Atribute posibile:

ALIGN=[ left | center | right | justify ] (aliniere orizontala)

atribute comune

Contine:

elemente inline

Continut în:

ADDRESS, APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD

Descriere:

Prima versiune HTML specifica tag-ul <P> ca tag vid (fara un corespondent </P>. Cele mai multe navigatoare presupun ca paragrafele sînt formatate de aceasta maniera. Cînd întîlnesc un tag <P>, încep un nou rînd, lasînd cîteva spatii verticale (rînduri) libere între paragraful care tocmai s-a terminat si cel care tocmai începe. În HTML 2.0 si HTML 3.0, tag-ul paragraf este nevid <P>...</P>, tag-ul </P> fiind însa optional, dar se recomanda folosirea lui cînd se folosesc style-sheet-uri.

Chiar daca HTMLnu specifica un mod special de prezentare pentru acest tag, autorii o pot face, sugerînd, de exemplu, identarea paragrafului sau spatierea prin intermediul style-sheet-urilor. De exemplu:

P

B. Containerul logic de tip bloc (elementul DIV)

Sintaxa:

<DIV>...</DIV>

Atribute posibile:

ALIGN=[ left | center | right | justify ] (aliniere orizontala)

atribute comune

Contine:

elemente inline si elemente de tip bloc (block level)

Continut în:

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Descriere:

Acest element defineste un container de tip bloc (block-level) generic, permitînd autorilor sa specifice diverse atribute globale blocului respectiv (cum ar fi, de exemplu, stilul sau limba). Cea mai importanta utilizare a acestui element este în combinatie cu elementele CLASS, ID sau LANG, elemente definitorii în folosirea stilurilor (style-sheet). Atributul (depasit) ALIGN sugereaza alinierea orizontala a continutului diviziunii de text definita cu acest element, avînd ca argumente posibile: left, right, center si justify. Un echivalent (alias) pentru valoarea center (<DIV ALIGN=center>) este elementul (preferabil a fi folosit ) <CENTER>. Elementul DIV are un echivalent la nivelul text - SPAN, utilizat în interiorul paragrafelor si al elementelor de tip inline. De remarcat ca browserele adauga, de obicei, o linie noua atît înainte cît si dupa elementul DIV. De exemplu:

<P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>ccccc<P>ccccc</DIV>

va fi afisata astfel: (o linie goala)

aaaaaaaaa

bbbbbbbbb

ccccc

ccccc (si apoi înca o linie goala)

C. Containerul logic de tip text/inline (elementul SPAN)

Sintaxa:

<SPAN>...</SPAN>

Atribute posibile:

atribute comune

Contine:

elemente inline

Continut în:

elemente inline si elemente de tip bloc (block level)

Descriere:

Acest element defineste un container de text generic de tip inline, permitînd autorilor sa specifice diverse atribute globale textului (zonei de document) respectiv (cum ar fi, de exemplu, stilul sau limba). Cea mai importanta utilizare a acestui element este în combinatie cu elementele CLASS, ID, DIR sau LANG, elemente definitorii în folosirea stilurilor (style-sheet).

SPAN se foloseste doar acolo unde nici un alt element de tip inline nu este potrivit. Dar daca exista un astfel de element atunci acesta este preferabil. De exemplu, în locul:

<P><SPAN LANG=ro>Mineriadele anilor 90</SPAN> au socat opinia publica.

se poate folosi

<P><I LANG=ro> Mineriadele anilor 90</I> au socat opinia publica.

Daca în interiorul zonei selectate se afla elemente de tip bloc (ca P sau TABLE) se foloseste elementul echivalent SPAN.

Exemplu:

Presupunem ca vrem sa scriem o pagina HTML care sa contina un formular care sa preia date pentru o baza de date. Fiecare cîmp ar trebui sa poata fi identificat în mod unic pentru a putea fi prelucrat separat (validat, de exemplu, cu un script). Întrucît HTML nu are elemente specifice pentru a identifica, de exemplu, numele persoanei, se folosesc DIV si SPAN pentru a obtine efectul structural (si chiar si de prezentare) dorit. De remarcat ca fiecare cîmp este plasat într-o celula a unui tabel, pentru a se obtine efectele de pozitionare si aliniere asemanatoare controalelor vizuale din interfetele grafice.

<!-- Exemplu de date pentru o baza de date: -->

<!-- Nume: Ion Ionescu, Tel: (51) 123-121, Email: ii@foo.ro -->

<DIV id="client-ionescu" class="client">

<P><SPAN class="client-titlu">Informatii despre client:</SPAN>

<TABLE class="client-data">

<TR><TH>Nume:<TD>Ionescu</TR>

<TR><TH>Prenume:<TD>Ion</TR>

<TR><TH>Tel:<TD>(51) 123-121</TR>

<TR><TH>Email:<TD>ii@foo.ro</TR>

</TABLE>

</DIV>

<!-- Nume: Victor Popescu, Tel: (51) 123-212, Email: pv@qwe.ro -->

<DIV id="client-popescu" class="client">

<P><SPAN class="client-titlu">Informatii despre client:</SPAN>

<TABLE class="client-data">

<TR><TH>Nume:<TD>Popescu</TR>

<TR><TH>Prenume:<TD>Victor</TR>

<TR><TH>Tel:<TD>(51) 123-212</TR>

<TR><TH>Email:<TD>pv@qwe.ro</TR>

</TABLE>

</DIV>

D. Textul centrat (elementul CENTER)

Sintaxa:

<CENTER>Text Centrat</CENTER>

Atribute posibile:

atribute comune

Contine:

elemente inline si elemente de tip bloc (block level)

Continut în:

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Descriere:

Acest element defineste un bloc al carui continut este centrat orizontal. Este o prescurtare pentru elementul <DIV ALIGN=center>, dar ramîne folositor în special pentru tabele pe care le centreaza (pe ele, nu continutul lor!!!) în pagina, evitînd folosirea lui <TABLE ALIGN=center> care nu este suportat de toate browserele.

Exista doua modalitati de centrare a textului. Una cu ajutorul tag-ului <CENTER> iar cealalta cu ajutorul atributului ALIGN care ia valoarea CENTER. ALIGN=CENTER este un atribut care poate fi utilizat în conjunctie cu majoritatea tag-urilor.

Exemplu:

<CENTER>

<TABLE>

<TR ALIGN=center>

<TH SCOPE=col>Name</TH>

<TH SCOPE=col>Age</TH>

<TH SCOPE=col>Country</TH>

</TR>

<TR ALIGN=center>

<TD>Liam Quinn</TD>

<TD>20</TD>

<TD>Canada</TD>

</TR>

</TABLE>

</CENTER>

E. Textul preformatat (elementul PRE)

Sintaxa:

<PRE> text preformatat (contine tab-uri, multe spatii, etc) </PRE>

Atribute posibile:

WIDTH=Numar (latimea unei linii)

atribute comune

Contine:

elemente inline cu exceptia: IMG, OBJECT, APPLET, BIG, SMALL, SUB, SUP, FONT, BASEFONT

Continut în:

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Descriere:

Majoritatea documentelor HTML contin text marcat cu tag-uri HTML. Aceasta face ca textul sa fie afectat de restrictiile HTML în sensul ca toate spatiile suplimentare (tab-uri, mai multe spatii, RETURN) sa fie ignorate de catre navigator. Afisarea acestor texte, asa cum sînt ele, se poate face prin utilizarea tag-urilor <PRE> ... </PRE>. Toate spatiile suplimentare cuprinse între aceste doua tag-uri vor fi afisate asa cum sînt. Aceasta ne permite utilizarea textului preformatat pentru afisarea tabelelor si chiar a unei grafici rudimentare obtinute cu caractere ASCII. Textul preformatat este afisat în majoritatea cazurilor cu fontul Courier monospatiat. Atributul WIDTH ofera informatii despre latimea liniei, astfel ca browserul sa aleaga un font si o spatiere adecvata, dar de obicei este ignorat.

Autorii care folosesc PRE trebuie sa evite dependenta de elementele înconjuratoare datorita modului specific de afisare (de la un browser la altul) a unui astfel de text. Se foloseste în special la inserarea unor bucati de program (cod), pentru care eliminarea spatiilor ar face citirea mult mai grea. Exemplu de cod Java inserat CA TEXT!!! într-o pagina HTML:

<PRE><CODE CLASS=Java>

class HelloWorld

}

</CODE></PRE>

CODE este un element care se utilizeaza pentru a oferi informatie structurala.

F. Adrese (elementul ADDRESS)

Sintaxa:

<ADDRESS>Informatii de contact</ADDRESS>

Atribute posibile:

atribute comune

Contine:

elemente inline si P

Continut în:

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Descriere:

Tag-ul adresa este utilizat pentru entitatile gen semnatura. De regula este folosit la sfîrsitul documentelor, acolo unde sînt inserate informatiile cu privire la autorul documentului, data publicarii si adresa de contact. De regula, adresele sînt precedate de o linie orizontala iar informatiile continute sînt afisate pe rînduri diferite cu ajutorul tag-ului <BR>.

Exemplu:

Daca într-un document apar informatiile de adresa de tipul:

<ADDRESS>

Most recent update: 28/01/99 <BR>

For more information contact &lt;<A HREF="mailto:lp@lp.ro"> lp@lp.com</A>&gt;

</ADDRESS>

în browser va apare:

Most recent update: 28/01/99

For more information contact <lp@lp.com>

G. Citate lungi (elementul BLOCKQUOTE)

Sintaxa:

<BLOCKQUOTE> Citat lung </BLOCKQUOTE>

Atribute posibile:

CITE=URI (sursa de unde se citeaza)

atribute comune

Contine:

elemente inline sau elemente de tip bloc sau SCRIPT

Continut în:

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Descriere:

Acest element este utilizat pentru citate mai lungi care pot contine elemente de tip bloc (de exemplu P sau TABLE), spre deosebire de <Q> ... </Q> utilizat în citate scurte.

Atributul optional CITE indica adresa sursei citate, oferind posibilitatea de verificare si oferind referinte suplimentare. Nu este însa suportat de toate browserele.

Punerea în evidenta a citatelor se face de regula prin identare diferita fata de restul textului. De aceea, pîna la implementarea style-sheet-urilor, elementul se folosea mai ales pentru identarea unui bloc de text fata de textul înconjurator. Acum aceasta metoda este considerata depasita.

Exemplu:

Citatul definit în modul urmator:

<BLOCKQUOTE CITE="https://www.bibliomania.com/Fiction/xxx.html" >

...orice generalizare presupune într-o anumita masura credinta în unitate si simplitatea naturii. <p>În ceea ce priveste unitatea aici nu poate exista vreo dificultate.

</BLOCKQUOTE>

va aparea astfel:

"...orice generalizare presupune într-o anumita masura credinta în unitate si simplitatea naturii.

În ceea ce priveste unitatea aici nu poate exista vreo dificultate."

H. Citate scurte (elementul Q)

Sintaxa:

<Q> Citat scurt </Q>

Atribute posibile:

CITE=URI (sursa de unde se citeaza)

atribute comune

Contine:

elemente inline

Continut în:

elemente inline si elemente de tip bloc

Descriere:

Acest element este utilizat pentru citate scurte, care nu necesita paragrafe, spre deosebire de <BLOCKQUOTE> utilizat în citate lungi. Atributul optional CITE indica adresa sursei citate, oferind posibilitatea de verificare si oferind referinte suplimentare. Nu este însa suportat de toate browserele.

Punerea în evidenta a acestor citate se face de regula prin introducerea lui între ghilimele, de fapt între simbolurile folosite pentru citate în limba în care este dat citatul, daca aceasta este specificata cu elementul LANG. Astfel, nu este responsabilitatea autorului sa puna aceste simboluri!

Exemplu:

Citatul definit în modul urmator:

John said, <Q lang="en-us">I saw Lucy at lunch, she says <Q lang="en-us">Mary wants you to get some ice cream on your way home.</Q> I think I will get some at Ben and Jerry's, on Gloucester Road.</Q>

va apare (datorita specificarii limbii engleze americane) astfel:

John said, "I saw Lucy at lunch, she told me 'Mary wants you to get some ice cream on your way home.' I think I will get some at Ben and Jerry's, on Gloucester Road."

4. Stilurile caracterelor

Utilizarea tag-urilor pentru paragrafe, titluri sau liste afecteaza textul ca un întreg schimbînd fontu-rile, spatierea verticala, adaugînd o bulina sau un numar. Tag-urile pentru stilurile caracterelor afec-teaza felul în care vor fi afisate numai anumite cuvinte sau chiar numai anumite caractere (de pilda afisîndu-le italic, îngrosat sau subliniat). Exista doua tipuri de stiluri ale caracterelor: stiluri logice si stiluri fizice. Distictia între stilurile logice si fizice a fost importanta în era browserelor ce nu afisau decît text simplu (cum a fost, de exemplu, LYNX) si nu erau capabile sa afiseze texte italice, bold, etc, de aceea se recomanda folosirea stilurilor logice. Dar odata cu aparitia browserelor de tip GUI nu mai exista nici un motiv pentru a evita stilurile fizice sau pentru a tine cont de distinctia dintre ele (B si STRONG vor apare în multe din aceste browsere la fel, fara a fi însa siguri de aceasta). Se recomanda astfel în primul rînd consistenta de-a lungul textului atunci cînd se doreste scoaterea în evidenta a unei portiuni de text.

4.1. Stilurile logice

Tag-urile pentru stilurile logice indica doar cum anume sa fie utilizat textul marcat nu si cum anume sa fie afisat. Din acest punct de vedere sînt asemanatoare tag-urilor folosite la marcarea paragrafelor sau titlurilor. Tag-urile stilurilor logice indica doar faptul ca textul este o definitie, o bucata de cod sau doar o portiune de text care trebuie scoasa în evidenta în raport cu contextul. Este complet la latitudinea navigatorului (si uneori, a utilizatorului acestuia prin anumite setari ale browserului) sa determine cum anume va fi prezentat textul marcat cu aceste tag-uri, daca va fi îngrosat, italic sau evidentiat în alt mod.

Toate tag-urile stilurilor logice sînt nevide. Exista mai multe tipuri de tag-uri pentru aceste stiluri:

4.2. Stilurile fizice

Tag-urile pentru stilurile fizice indica navigatorului cum anume sa fie afisat textul marcat, de pilda îngrosat (bold), italic sau uniform (monospatiat) spatiat (asemanator textului produs de masinile de scris). Utilizarea stilurilor fizice are neajunsul ca daca navigatorul nu poate afisa acel stil el îl va substitui cu un altul. Tag-urile stilurilor fizice sînt:

Exemplu: Utilizarea acestor taguri:

<P><b>bold</b>, <i>italic</i>, <b><i>bold italic</i></b>, <tt>teletype text</tt>, and

<big>big</big> and <small>small</small> text.

poate produce efecte ca în figura urmatoare:

5. Elemente de modificare a fontului caracterelor

A. Dimensiunea fontului

Sintaxa:

<FONT> Text cu font schimbat</FONT>

Atribute posibile:

SIZE = Dimensiune (dimensiunea fontului)

COLOR = Culoarea (culoarea fontului)

FACE = Felul fontului (felul fontului/font face)

atribute core

atribute de internationalizare

Contine:

elemente inline

Continut în:

inline elements, block-level elements, cu exceptia lui PRE

Descriere:

Tag-urile <FONT> ... < / FONT>, împreuna cu atributul SIZE permit modificarea dimensiunii fontului de baza, a carui valoare implicita este 3 (specificata printr-o alta extensie, si anume <BASEFONT>, font de baza care are de asemenea atributul SIZE). Valorile atributului SIZE sînt între 1 si 7. Dimensiunea fontului poate fi specificata si relativ la fontul de baza, situatie în care valorile lui SIZE sînt între -3 si +4.

Acest tag, total depasit în HTML 4.0, este folosit pentru modificari rudimentare ale caracteristicilor fontului cu care e afisat textul. Folosirea acestuia introduce numeroase probleme legate de accesibilitatea pe diverse platforme (care pot sa nu aiba instalat un anumit font, de exemplu), probleme ce se pot evita prin utilizarea stilurilor (style-sheet).

Exemplu: Dimensiunile fonturilor (vazute în browsere) sînt:

FONT SIZE=1

FONT SIZE=2

FONT SIZE=3

FONT SIZE=4

FONT SIZE=5

FONT SIZE=6

FONT SIZE=7

Exemplu: Dimensiunile fonturilor (vazute în browsere) specificate relativ arata astfel:

Exemplu: Urmatorul fragment de text, descris cu aceste caracteristici, arata ca în figura de mai jos:

<FONT FACE="ARIAL" SIZE=2 COLOR="#339966">

<H1>The Scariest Jungle</H1>

</FONT>

<FONT FACE="ARIAL" SIZE=2>

Follow the map to see <I>lions</I> and <I>tigers</I> and <I>bears</I>.

<B>Oh, my!</B>

</FONT>

B. Stabilirea fontului de baza

Sintaxa:

<BASEFONT>

Atribute posibile:

SIZE = Dimensiune (dimensiunea fontului)

COLOR = Culoarea (culoarea fontului)

FACE = Fel (felul fontului/font face)

ID = ID (identificator)

Contine:

nimic

Continut în:

inline elements, block-level elements, cu exceptia lui PRE

Descriere:

Spre deosebire de FONT, tagul BASEFONT modifica fontul de baza, aplicîndu-se tuturor elementelor care urmeaza, cu exceptia titlurilor (Hn). Chiar daca nu e specificat, utilizarea lui BASEFONT în tabele (cu elementul TABLE) produce efecte imprevizibile si diferite, de la browser la browser.

Acest tag, total depasit în HTML 4.0, este folosit pentru modificari rudimentare ale caracteristicilor fontului cu care e afisat textul. Folosirea acestuia introduce numeroase probleme legate de accesibilitatea pe diverse platforme (care pot sa nu aiba instalat un anumit font, de exemplu), probleme ce se pot evita prin utilizarea stilurilor (style-sheet).

Atributul SIZE specifica dimensiunea fontului ce se doreste folosit, dimensiune dependenta de browser, pe o scala de la 1 la 7, cu o valoare implicita de 3. Atributele COLOR si FACE, suportate foarte slab sugereaza culoarea si felul fontului. Mult mai bine suportata si mai adecvata este folosirea style-sheet-urilor pentru aceste atribute.