CAP.
3. FORMATAREA DOCUMENTULUI
3.1. Crearea titlurilor în pagină
Elementele constituite din titluri şi
subtitluri se regăsesc în interiorul secţiunii BODY şi sunt
marcate de tag-urile <H1> până la <H6>, având
dimensiunile corespunzătoare pe o scală de la 1 la 6, unde <H1>
are dimensiunea cea mai mare, iar <H6> are dimensiunea cea mai mică.
Este necesară folosirea tag-urilor de închidere </H1> ...
</H6>.
Prezenţa titlurilor într-un document web este
facultativă, ele putând apărea în orice ordine dorită de
creatorul documentului, deşi, pentru a obţine cele mai bune efecte
vizuale, este recomandat să le utilizaţi în ordine crescătoare
(de la H1 la H6).
Iată, cum arată concret formatarea acestor
titluri într-un document web.
<HTML>
<HEAD>
<TITLE>Pagina cu titluri</TITLE>
</HEAD>
<BODY>
<H1>TITLU de tip H1</H1>
<H2>TITLU de tip H2</H2>
<H3>TITLU de tip H3</H3>
<H4>TITLU de tip H4</H4>
<H5>TITLU de tip H5</H5>
<H6>TITLU de tip H6</H6>
</BODY>
</HTML>
Rezultatul
afişat va fi următorul:
Atributele specifice acestui element sunt:
|
Atribut |
Valoare |
Descriere |
|
align |
left center right justify |
Precizează modul de aliniere a textului
cuprins în tiltu. |
3.2. Crearea paragrafelor
Paragrafele vă permit să
adăugaţi text în documentul web într-o asemenea manieră încât
este ajustat în mod automat la dimensiunea ferestrei browser-ului în care este
afişat, adică fiecare rând de text va avea lăţimea
ferestrei în care este afişat.
Pentru a marca prezenţa unui paragraf se
foloseşte tag-ul <P>. Acesta necesită tag de închidere </P>.
Formatarea paragrafelor într-un document web se
realizează astfel:
<HTML>
<HEAD>
<TITLE>Pagina cu paragrafe</TITLE>
</HEAD>
<BODY>
<P>Paragrafele va permit sa adaugati text în
documentul web.</P>
<P>Fiecare rând de text va avea latimea ferestrei în
care este afisat </P>
</BODY>
</HTML>
Rezultatul
afişat va fi următorul:
Notă: Dacă
veţi dori să introduceţi mai multe spaţii goale între
cuvintele din interiorul unui paragraf, va trebui să folosiţi codul
“ ” (NBSP = Non-Breaking Space) deoarece browser-ele ignoră
spaţiile multiple dintre cuvinte.
Atributele specifice acestui element sunt:
|
Atribut |
Valoare |
Descriere |
|
align |
left center right justify |
Precizează modul de aliniere a textului
cuprins în paragraf. |
3.3. Ruperea rândurilor
O modalitate de a împărţi o zonă de
text pe rânduri este de a semnala browser-ului exact unde vrem să fie
efectuată ruperea de rânduri, folosind tag-ul <BR>. Acesta
impune afişarea textului situat după el pe linia următoare. Nu
are tag corespunzător de închidere.
Pentru exemplificare vom folosi următorul cod:
<HTML>
<HEAD>
<TITLE>Ruperea randului</TITLE>
</HEAD>
<BODY>
<P>Acest text contine o rupere <BR> a
rândului </P>
</BODY>
</HTML>
Rezultatul
afişat va fi următorul:
3.4. Despre paragrafe pre-formatate
Paragrafele pre-formatate sunt definite prin tag-ul <PRE>.
Acesta se foloseşte pentru a indica browser-ului că textul trebuie
să fie afişat exact aşa cum este scris în codul HTML, respectând
spaţiile şi ruperea rândurilor. Necesită tag corespunzător
de închidere </PRE>.
Iată cum se poate pune în practică
folosirea acestui tag:
<HTML>
<HEAD>
<TITLE>Paragraf
pre-formatat</TITLE>
</HEAD>
<BODY>
<PRE>Prin
folosirea acestui tag nu mai trebuie sa apelam
la
ruperea randului,
asa
cum a fost prezentata anterior,
iar
spatiile vor fi
considerate
ca atare . . .</PRE>
</BODY>
</HTML>
Rezultatul
afişat va fi următorul:
De remarcat că acest tag are o utilizare mai
restrânsă, un neajuns major fiind faptul că textul nu este ajustat în
mod automat la dimensiunea ferestrei browser-ului în care este afişat
(aşa cum se poate observa şi în imagine), iar fontul folosit este din
grupa Courier New.
Ajustarea lăţimii paragrafului se poate
face prin folosirea următorului atribut:
|
Atribut |
Valoare |
Descriere |
|
width |
număr |
Precizează numărul maxim de caractere
pe un rând (în mod obişnuit 40, 80 sau 132), în funcţie de
rezoluţia monitotului recomandată utilizatorilor. |
3.5. Inserarea unei linii orizontale
Un alt element ce contribuie la redarea unui aspect
mai placut unui document web este linia orizontală (Horizontal Line),
redată în limbajul HTML prin tag-ul <HR>.
Acest element nu are un tag de închidere. Pur
şi simplu adăugaţi tag-ul <HR> în interiorul
secţiunii BODY şi veţi avea ca rezultat o linie orizontală.
Vom exemplifica cele de mai sus folosind
următorul cod:
<HTML>
<HEAD>
<TITLE>Inserarea unei linii
orizontale</TITLE>
</HEAD>
<BODY>
<P>Aceasta pagina contine o linie orizontala
<HR> inserata într-un paragraf</P>
</BODY>
</HTML>
Rezultatul
afişat va fi următorul:
Atributele specifice acestui element sunt:
|
Atribut |
Valoare |
Descriere |
|
align |
left center right |
Precizează modul de aliniere liniei în
document. |
|
noshade |
noshade |
Când este prezent, acest atribut are ca rezultat
înlăturarea efectului de umbră, setat în mod inplicit pentru linia
orizontală. |
|
size |
pixels % |
Precizează grosimea liniei orizontale. |
|
width |
pixels % |
Precizează lăţimea liniei
orizontale. |
|
color |
rgb(x,x,x) #xxxxxx colorname |
Precizează culoarea liniei orizontale. |
3.6. Formatarea unei secţiuni a documentului
Pentru
formatarea unei întregi secţiuni (division) a unui document se
foloseşte tag-ul <DIV>.
În interiorul unei secţiuni pot fi cuprinse o serie de elemente care vor
păstra caracteristicile acestea, stabilite prin atributele sale, cu excepţia
cazului în care acele elemente nu au propriile atribute.
Folosirea acestui tag la deschidere necesită
şi folosirea tag-ului </DIV> la închidere.
Atributele specifice acestui element sunt:
|
Atribut |
Valoare |
Descriere |
|
align |
left center right justify |
Precizează modul de aliniere a textului
cuprins în interiorul secţiunii. |
Pentru exemplificare vom folosi următorul cod:
<HTML>
<HEAD>
<TITLE>Inserarea unei sectiuni</TITLE>
</HEAD>
<BODY>
<DIV
align="center">
<P>Paragraf aliniat pe
centru ce pastreaza atributul "center" specificat pentru elementul
DIV.</P>
<P
align="right">Paragraf aliniat la dreapta caruia i s-a aplicat
propriul atribut "right", chiar daca se afla în interiorul aceleiasi
sectiuni.</P>
</DIV>
</BODY>
</HTML>
Rezultatul
afişat va fi următorul:
3.7. Aplicaţie practică
În
baza celor prezentate în acest capitol, vom crea un nou fişier numit test2.html folosind editorul Notepad++,
urmând paşii descrişi în capitolul precedent, în care vom scrie
următoarele:
<HTML>
<HEAD>
<TITLE>Testarea cunostintelor dobândite în Capitolul 3</TITLE>
</HEAD>
<BODY>
Începem prin inserarea unui text neformatat, care, după cum se poate
observa, are caracteristicile unui text de tip paragraf, aliniat la stânga.
<H1>Inserăm un Titlu de tip H1</H1>
<H2>Inserăm si un Titlu de tip H2</H2>
<P align="justify">Adăugam text în document, aliniat
atât la stânga cât si la dreapta, text ce va avea lătimea ferestrei în
care este afisat.</P>
<P align="right">Puteti observa rezultatul inserării
unei <BR> ruperi de rând în interiorul unui paragraf, precum si folosirea
unor spatii multiple
între cuvinte, într-un paragraf aliniat la dreapta.</P>
<DIV align="center">
<H3>Titlu de tip H3</H3>
<HR color="red" size="5" width="300"
align="right">
<PRE width="40">Introducem un paragraf pre-formatat în
interiorul
unei sectiuni aliniate pe centru, precedat de un
titlu de tip H3 si de o linie orizontală de
culoare rosie, cu grosimea de 5 pixeli
si lătimea de 120 de pixeli, pozitionată
în partea dreaptă a documentului.</PRE></DIV>
</BODY>
</HTML>
Rezultatul
afişat va fi următorul:
Note: 1. În Internet Explorer n-a fost
recunoscut atributul width="40" al elementului <PRE>, ci doar
în Netscape.
2. Aspectul documentului
afişat în browser depinde şi de dimensiunea ferestrei în care este
vizualizat, prin urmare, poate fi diferit de imaginea prezentată.