Lectia 4- Formatarea textului in HTML

In aceasta lectie, vom invata cum putem formata textul din cadrul unei pagini WEB.
Titluri in HTML
Atunci cand punem un titlu in cadrul paginii web putem folosi tag-urile <H1>,<H2>,<H3>,<H4>,<H5>,<H6>. Cu ajutorul acestor taguri care au si taguri de incheiere </H1>,</H2>,</H3>,</H4>,</H5>,</H6> vom scrie titlurile in cadrul paginilor noastre web. Tag-urile <H1> si </H1> permit scrierea unui text cu caracterele cele mai mari in timp ce tag-urile <H6> si </H6> va afisa textul cu caracterele cele mai mici dupa cum urmeaza:

Acesta este un text scris cu <H1>

Acesta este un text scris cu <H2>

Acesta este un text scris cu <H3>

Acesta este un text scris cu <H4>

Acesta este un text scris cu <H5>
Acesta este un text scris cu <H6>
Tagurile acestea accepta atributul ALIGN cu ajutorul caruia putem pozitiona textul la stanga, la centru sau la dreapta.
Pentru alegerea caracteristicilor unui text putem folosi tag-ul <FONT>. Acest tag accepta mai multe atribute (color, face, size). Atributul COLOR se refera la culoarea textului ce va fi incadrat de tagu-rile <FONT> si </FONT>. Atributul FACE arata tipul fontului (arial, times new roman, gigi, etc.) iar atributul SIZE arata marimea fontului.
 
Pentru a alege culoarea fontului, vom consulta tabelul de culori de la lectia 3, iar cand te-ai hotarat, vei scrie numele sau codul acelei culori ca valoare a atributului COLOR.
De exemplu liniile de cod:
<font color=”CornflowerBlue”>Curs HTML- Marinelpadurice.ro</font>
SAU
<font color=”#6495ED”>Curs HTML- Marinelpadurice.ro</font>
Vor avea ca rezultat:

  Curs HTML- Marinelpadurice.ro

<font color=”Green”>Sper sa-ti fie de folos acest curs!</font>

Va avea ca rezultat in browseru-l de internet
Sper sa-ti fie de folos acest curs!

La tipul Fontului, este bine sa folosesti un font care se afla pe majoritatea calculatoarelor, pentru ca daca folosesti un font mai putin utilizat, multi utilizatori nu vor putea vedea textele din cadrul paginilor tale web. Cele mai folosite fonturi pentru paginile web sunt urmatoarele: Arial, Times New Roman, Courier new, Verdana, Helvetica.

Exemplu de linie de cod in care vom defini fontul Courier new de culoare negru:

<Font color=”#000000″ face=Courier new”>Acesta este un text scris cu font courier new</font>

Va arata asa: Acesta este un text scris cu font courier new

Pentru a schimba dimensiunea implicita a fontului, vom folosi una dintre valorile atributului SIZE. Acesta poate lua una dintre 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″>MarinelPadurice.ro- Tutorial HTML</font>

Acesta va arata asa:

MarinelPadurice.ro- Tutorial HTML

Iar celelalte marimi vor arata asa:
MarinelPadurice.ro- Tutorial HTML
MarinelPadurice.ro- Tutorial HTML

MarinelPadurice.ro- Tutorial HTML

MarinelPadurice.ro- Tutorial HTML

MarinelPadurice.ro- Tutorial HTML

MarinelPadurice.ro- Tutorial HTML

Pentru a scrie textul cu caractere ingrosate (bold) vom folosi eticheta <b> si </b>

<b>Text BOLD</b>

Va arata asa: Text BOLD

Pentru text italic vom folosi etichetele <i> si </i>

<i>Acesta este un text italic</i>

Va arata asa: Acesta este un text italic

Pentru text subliniat, vom folosi etichetele <u> si </u>

<u>Acesta este un text subliniat</u>

Va arata asa:Acesta este un text subliniat

Daca vrem ca textul sa fie pozitionat in centrul paginii, vom folosi tagu-rile <center> si </center>

<center>Acesta este un text centrat</center>

Va arata asa:

Acesta este un text centrat
Atunci cand vrem ca textul din cadrul pagninii noastre web, sa fie asezat pe mai multe randuri vom folosi unul din tagurile <p> sau <br>. Tagul <br> nu are tag de inchidere, pe cand tagul <p> are tag de inchidere </p> insa nu este obligatoriu.

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>

Va arata astfel:

Invat limbajul HTML. Exersez Limbajul HTML. Stiu limbajul HTML

Acum vom folosi 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>

Si vom avea urmatorul rezultat:

Invat limbajul HTML.
Exersez Limbajul HTML.
Stiu limbajul HTML

Acum vom schimba ultimul tag <br> cu tagul <p> si vom avea codul:

<html>

<head>

<title>Eticheta <BR></title>

</head>

<body>

Invat limbajul HTML.<br> Exersez Limbajul HTML.<p> Stiu limbajul HTML

</body>

<html>

Acesta va arata astfel:

 

Invat limbajul HTML.
Exersez Limbajul HTML.

Stiu limbajul HTML

Iar daca schimbam si celalalt tag <br> cu tagul< p> obtinand urmatorul cod:

<html>

<head>

<title>Eticheta <BR></title>

</head>

<body>

Invat limbajul HTML.<p> Exersez Limbajul HTML.<p> Stiu limbajul HTML

</body>

<html>

Vom obtine:

Invat limbajul HTML.

Exersez Limbajul HTML.

Stiu limbajul HTML

Aceasta va sa zica este lectia 4 despre formatarea textelor in html.
Invata, exerseaza si perfectioneaza-te!

 

Leave a Reply

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *