| PROIECTARE SITE WEB > DOCUMENTATIE - HTML - Blocuri de
text |
Proiectare Site si Web Design - Standardul HTML
Blocuri de Text
Tagurile care definesc blocuri de text nu se refera la particularitatile
caracterelor ce compun textul, ci la functiile pe care le poate avea
un bloc de text in cadrul paginii Web. Etichetele care lucreaza cu
blocuri de text produc automat trecerea la un rand nou si adaugarea
unui spatiu suplimentar.
Identarea unui bloc
Pentru ca un bloc de text sa fie indentat (marginea din stanga a textului
sa fie deplasata la dreapta la o anumita distanta fata de marginea
din stanga a paginii), acesta trebuie inclus intre etichetele <blockquote>...</blockquote>,
astfel:
<html>
<head>
<title> Indentarea unui bloc</title>
</head>
<body>
Textul ce urmeaza este indentat:<blockquote>Bloc de text identat</blockquote>
</body>
</html>
Intr-un fisier HTML, caracterele "<"
si ">" au o semnificatie speciala pentru browser. Ele
incadreaza comenzile si atributele de afisare a elementelor intr-o
pagina. Daca dorim ca un fragment de text sa contina astfel de caractere,
acest fragment trebuie incadrat de una dintre perechile de etichete:
1. <xmp>...</xmp>
(80 de caractere pe rand);
2. <listing>...</listing>
(120 de caractere pe rand).
Aceste marcaje interpreteaza corect (ca text afisabil
in browser) caracterele "spatiu", "eticheta" si
"CR/LF". Textul afisat in pagina este monospatiat. Exemplu:
<html>
<head>
<title> xmp si listing</title>
</head>
<body>
Un fisier html standard arata astfel: <xmp> <html>
<head>
<title> </title>
</head>
<body>
O pagina Web ...
</body>
</html> </xmp> </body>
</html>
Blocuri paragraf
Etichetea paragraf <p> face posibila trecerea la o linie
noua si permite:
1. inserarea unui spatiu suplimentar
inainte de blocul paragraf;
2. inserarea unui spatiu suplimentar dupa blocul paragraf,
daca se foloseste delimitatorul </p> (acesta fiind optional);
3. alinierea textului cu ajutorul atributului "align",
avand valorile posibile "left", "center" sau
"right".
Exemplu:
<html>
<head>
<title> Blocuri paragraf</title>
</head>
<body>
Prima linie
<p> Lini generata de un paragraf (implicit paragraful este
aliniat la stanga).
<p align="right"> Paragraf aliniat la dreapta.
<p align="center"> Paragraf aliniat in centru.
</body>
</html>
Blocuri de titlu
Intr-un text, titlurile (headers) de capitole pot fi introduse cu
ajutorul etichetelor <H2>. <H3>, <h3>,
<h4>, <h5>, <h6>. Toate aceste
etichete se refera la un bloc de text si trebuie insotite de o eticheta
de incheiere similara. Aceste etichete accepta atributul "align"
pentru alinierea titlului blocului de text la stanga (in mod prestabilit),
in centru si la dreapta. Tag-ul "H2" permite scrierea unui
titlu cu caractere mai mari si aldine, pe cand <h6> foloseste
caracterele cele mai mici. Exemplu:
<html>
<head>
<title> Blocuri de titlu</title>
</head>
<body>
<H2 align="center"> Titlu de marime 1 aliniat in
centru </H2>
<H3 align="right"> Titlu de marime 2 aliniat la
dreapta. </H3>
<h4> Titlu de marime 4 aliniat la stanga (implicit) </h4>
</body>
</html>
Linii orizontale
Intr-o pagina Web pot fi inserate linii orizontale. Acest lucru se
face cu ajutorul etichetei <hr>. Pentru a configura o
linie orizontala se utilizeaza urmatorele atribute ale etichetei
<hr>:
1. "align" ce
permite alinierea orizontala a liniei. Valorile posibile sunt "left"
,"center" si "right";
2. "width" permite alegerea
lungimii liniei;
3. "size" permite alegerea
grosimii liniei;
4. "noshade" cand este prezent defineste
o linie fara umbra;
5. "color" permite definirea culorii
liniei.
Exemplu:
<html>
<head>
<title> Linii orizontale</title>
</head>
<body>
<H2 align="center"> Tipuri de linii orizontale </H2>
O linie implicita, aliniere stanga, latime 100%, grosime 2 cu umbra.
<hr>
Urmeaza o linie aliniata in centru, de latime 50%, grosime 5 pixeli,
fara umbra.
<hr align="center" width="50%" size="5"
noshade>Urmeaza o linie aliniata la dreapta, de latime 150 de
pixeli, grosime 12 pixeli, de culoare rosie.
<hr align="right" width=150 size=12 color="red">
</body>
</html>
Blocuri CENTER
Blocul introdus de etichetele <center>...</center>
aliniaza centrat toate elementele pe care le contine.
Exemplu:
<html>
<head>
<title> Linii orizontale</title>
</head>
<body>
<center> <hr width=10%> <hr width=40%> <hr
width=70%> <hr width=100%> <hr width=70%> <hr
width=40%> <hr width=10%> </center>
</body>
</html>
Blocuri DIV
Modalitatea cea mai eficienta de delimitare si de formatare a unui
bloc de text este folosirea delimitatorilor <div>...</div>.
Un parametru foarte foarte util pentru stabilirea caracteristicilor
unui bloc <div> (diviziune) este "align"
(aliniere). Valorile posibile ale acestui parametru sunt:
1. "left" (aliniere la
stanga);
2. "center" (aliniere centrala);
3. "right" (aliniere la dreapta).
Un bloc <div>...</div> poate include
alte subblocuri. In acest caz, alinierea precizata de atributul align
al blocului are efect asupra tuturor subblocurilor incluse in blocul
<div>. Un bloc <div>...</div> admite atributul
"nowrap" care interzice intreruperea randurilor
de catre browser la afisare.
Exemplu de utilizare a tagului DIV:
<html>
<head>
<title>Blocul DIV</title>
</head>
<body>
Aceasta linie este o linie normala.Urmatorul bloc este aliniat la
dreapta.
<div align="right">
O singura linie.O singura linie.O singura linie.O singura linie.<br>
O singura linie.O singura linie.O singura linie.O singura linie.<br>
O singura linie.O singura linie.O singura linie.O singura linie.<br>
</div>
<div align="center">
Bloc aliniat pe centru.Bloc aliniat pe centru.<br>
Bloc aliniat pe centru.Bloc aliniat pe centru.<br>
Bloc aliniat pe centru.Bloc aliniat pe centru.<br>
</div>
</body>
</html>
|
Creare
si actualizare site