Dark-Knight.MyForum.ro

Crystydica · Administrator Data inscrierii: 20/Mai/2008 Mesaje: 200

Formatarea textului in HTML

Titluri
Atunci cand avem trebuință sa folosim un titlu in cadrul paginii noastre web putem apela la tag-urile <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. Cu susținerea acestor tag-uri, care au si tag-uri de incheiere, vom scrie titlurile din cadrul paginilor noastre web. Astfel in cadrul codului HTML vom folosi tag-ul <H1>, de exemplu, urmat de textul titlului, iar la sfarsit vom folosi tag-ul de incheiere </H1>. Tag-urile <H1> si </H1> permit scrierea unui titlu cu caracterele cele mai mari in timp ce textul incadrat de tag-urile <H6> si </H6> va fi afisat cu caracterele cele mai mici, dupa cum urmeaza:

<H1> mare <H2> mai mic etc pana la <H6>

Tag-urile acestea accepta atributul ALIGN cu ajutorul caruia titlul va putea fi aliniat la stanga, la centru sau la dreapta.
Etichete pentru formatarea textului
Am vazut in sectiunea precedenta cum arata titlurile. In continuare vor fi prezentate diferite moduri de formatare a unui text.
Pentru alegerea caracteristicilor unui text, putem folosi tag-ul <FONT>. Acest tag accepta mai numeroase atribute (color, face, size) care ne vor ajuta in formatarea textelor. Atributul COLOR se refera la culoarea textului ce va fi incadrat de tag-urile <FONT> si </FONT>, atributul FACE arata tipul fontului, iar atributul SIZE arata marimea fontului.
Pentru a alege culoarea textului, trebuie sa consulti mai intai tabelul de culori, iar apoi, atunci cand te-ai hotarat ce culoare vei folosi, sa scrii codul sau numele acelei nuanțe ca valoare a atributului COLOR.

De exemplu, liniile de cod:
<FONT COLOR=”CornflowerBlue”>ecursuri.ro – cursuri online gratuite</FONT>
sau
<FONT COLOR=”#6495ED”>ecursuri.ro – cursuri online gratuite</FONT>
vor avea urmatorul rezultat:

ecursuri.ro – cursuri online gratuite
<FONT COLOR=”#FF0000”>Totul la ecursuri.ro este gratuit</FONT>
va afisa in cadrul browserului de internet:

Totul la ecursuri.ro este gratuit
La tipul fontului, la fel ca si la culori, este bine sa folosesti un font care se afla pe majoritatea calculatoarelor, pentru ca daca folosesti un font mai putin utlizat, multi utilizatori nu vor putea vedea textele din cadrul paginilor tale cu acelasi font. Cele mai folosite fonturi pentru paginile web sunt urmatoarele:

Acest text a fost scris cu fontul "arial"
Acest text a fost scris cu fontul "times new roman"
Acest text a fost scris cu fontul "courier new"
Acest text a fost scris cu fontul "verdana"
Acest text a fost scris cu fontul "helvetica"
<FONT COLOR=”#000000” FACE=”Arial”>Acest text ...</FONT>

Pentru a schimba dimensiunea implicita a fontului, vom folosi una din valorile atributului size. Asta poate lua una din valorile 1,2,3,4,5,6,7 (1 pentru cea mai mica dimensiune si 7 pentru cea mai mare):
<FONT COLOR=”#FFA500” FACE=”Arial” SIZE=”7”>www.ecursuri.ro</FONT>

Daca vrem ca textul nostru sa fie scris cu caractere ingrosate, folosim perechea de etichete <B> si </B>.
<B>Text bold</B>
Text bold

Pentru ca textul sa fie scris cu caractere italice, folosim perechea de etichete <I> si </I>.
<I>Text italic</I>
Text italic

Pentru ca textul sa fie subliniat, folosim perechea de etichete <U> si </U>.
<U>Text subliniat</U>
Text subliniat

Daca vrem ca textul sa fie afisat in centrul paginii putem folosi perechea de etichete <CENTER> si </CENTER>.
<CENTER>Text centrat</CENTER>
Text centrat

Atunci cand vrem ca textul din cadrul paginii noastre web sa fie afisat pe mai multe randuri vom folosi unul din tag-urile <BR> sau <P>. Tag-ul <BR> nu are tag de incheiere, in timp ce tag-ul <P> are tag de incheiere, insa nu este obligatoriu.

Tag-ul <BR> vine de la line break (intrerupere de linie) si l-am mai întrebuințat in cadrul acestui curs. Asa cum am vazut si pana acum este folosit pentru a face trecerea de la o linie la alta.

Astfel sa presupunem ca avem urmatorul cod HTML:
<HTML>
<HEAD>
<TITLE>Eticheta <BR></TITLE>
</HEAD>
<BODY>
Invat limbajul HTML. Exersez limbajul HTML. Stiu limbajul HTML.
</BODY>
</HTML>

Acest cod va avea ca rezultat:

Invat limbajul HTML. Exersez limbajul HTML. Stiu limbajul HTML.

Acum sa folosim eticheta <BR> in cadrul codului:
<HTML>
<HEAD>
<TITLE>Eticheta <BR></TITLE>
</HEAD>
<BODY>
Invat limbajul HTML.<BR>Exersez limbajul HTML.<BR>Stiu limbajul HTML.
</BODY>
</HTML>

Iata diferenta:

Invat limbajul HTML.
Exersez limbajul HTML.
Stiu limbajul HTML.

Tag-ul <P> vine de la cuvantul paragraf si se deosebeste de tag-ul <BR> prin faptul ca prin folosirea lui nu numai ca se trece pe urmatorul rand, dar se si lasa un rand liber intre texte. Sa revenim la exemplul de mai sus. Se vor folosi ambele tag-uri, <BR> si <P>, pentru a se vedea diferenta dinre ele.
<HTML>
<HEAD>
<TITLE>Eticheta <BR></TITLE>
</HEAD>
<BODY>
Invat limbajul HTML.<BR>Exersez limbajul HTML.<P>Stiu limbajul HTML.
</BODY>
</HTML>

Rezultatul va fi:

Invat limbajul HTML.
Exersez limbajul HTML.

Stiu limbajul HTML.

Daca scriem un text intre tag-urile <P> si </P>, atunci textul va fi incadrat de cate un rand liber, la fel ca in exemplul de mai jos:
<HTML>
<HEAD>
<TITLE>Eticheta <BR></TITLE>
</HEAD>
<BODY>
Invat limbajul HTML.<P>Exersez limbajul HTML.</P>Stiu limbajul HTML.
</BODY>
</HTML>

Vom obtine urmatorul rezultat:

Invat limbajul HTML.

Exersez limbajul HTML.

Stiu limbajul HTML.