Redarea textului preformatat - elementul PRE

Redarea textului preformatat - elementul PRE

Inainte de a trece la prezentarea acesui subiect este cazul sa vedem ce inseamna text preformatat. Acest lucru se refera la un text cu o anumita aranjare in pagina, cum ar fi o secventa de program, versuri, etc. In cadrul unui paragraf, browserul nu va tine cont de modul de aranjare al textului. Sa privim la exemplul de mai jos si sa vedem cum va fi afisata sursa unui program scris in limbajul C atunci cand este incadrata intr-un paragraf.

#include 'stdio.h' #include 'conio.h' void main(void)

Asa cum se vede si in exemplu, textul cuprins intr-un paragraf va fi afisat pe un rand pana ce acesta se va ocupa dupa care se trece la randul urmator. Daca am fi utlizat tag-ul BR pentru a forta trecerea la alt rand am fi reusit sa facem ca liniile de program sa arate ca in realitate, dar efortul depus ar fi fost mai mare. In plus, pentru obtinerea alinierii, ar fi trebuit sa utilizam entitatea   de mai multe ori.

Pentru a permite afisarea textului preformatat, HTML dispune de elementul PRE. Textul cuprins intre tag-urile <PRE> si </PRE> va fi redat exact cum apare el in codul sursa. Acest text va pastra toate caracteristicile referitoare la aliniere, distanta intre randuri, etc. Textul cuprins intre cele doua tag-uri se va deosebi de restul documentului prin faptul ca va fi scris cu caractere de tip teletype, care imita caracterele utilizate la masina de scris.

La redarea unor exemple in acest tutorial am folosit elementul PRE pentru a afisa in document sursa acelor exemple. Mai jos am prezentat un exemplu in care am utlitat elementul PRE pentru a reda un program scris in C.

Observatie: Atunci cand dorim sa redam in pagina noastra o secventa de cod HTML, trebuie tinut cont de faptul ca anumite caractere (cum ar fi parantezele unghiulare care incadreaza tag-urile) nu pot fi redate daca sunt scrise ca atare. Pentru a putea fi redate trebuie folosite entitatile corespunzatoare fiecarui caracter special. Mai jos am redat trei dintre cele mai utilizate caractere speciale precum si entitatile acestora.

• &lt; ( < ) - semnul mai mic decat
• &gt; ( > ) - semnul mai mare decat
• &amp; ( & ) - semnul ampersand

De exemplu, daca dorim ca in cadrul unei expresii sa introducem caracterul ( < ) atunci va trebui sa folosim entitatea corespunzatoare acestui caracter. Entitatea ce defineste acest caracter este de forma &lt;

Intre tag-urile PRE si PRE putem utiliza si tag-ul <BR> precum si tag-ul <P>. Pe linga aceste elemente, putem folosi si elementele de formatare fizica sau logica a caracterelor. Chiar daca nu am discutat despre aceste elemente, mai jos am prezentat un asemenea exemplu.

Inainte de a vedea ce atribute are elementul PRE trebuie sa mai spun ca, de fapt, elementul PRE poate contine nu numai elementele precizate anterior. In fapt, el poate contine orice element de tip 'continut intr-o linie' (inline). O lista completa cu aceste elemente poate fi consultata aici

Atributele elementului PRE

Tagul <PRE> are un singur atribut si anume atributul WIDTH. Forma generala este:

unde valoarea numar este un numar zecimal care reprezinta numarul de caractere ce pot fi scrise pe un rand. In practica, acest atribut este ignorat de browsere.

Observatie: intrucat atributl WIDTH este ignorat de browsere, trebuie sa fim precauti atunci cand dorim sa introducem in pagina un text preformatat. Cu alte cuvinte, daca textul cuprins intre tag-urile <PRE> si </PRE> va fi scris doar pe o singura linie, acesta va fi afisat in pagina doar pe o singura linie, indiferent de cat de lunga este aceasta. Intrucat, pentru textul cuprins intre tag-urile elementului PRE, ruperea randurilor nu este realizata in mod automat de catre browser, s-ar putea sa ne trezim ca avem o pagina de web cu o latime egala cu lungimea expresiei cuprinse intre tag-urile elementului amintit mai sus.