Tutorial HTML – Formatare text

Tutorial HTML – Formatare text

După ce am tratat lucruri de bază din HTML, următorul pas este despre text și formatare text. În acest tutorial voi arăta cum funcționează unele etichete  care se aplică textului atât ca stil, cât și ca aranjare în pagină.

În HTML textul reprezintă conținutul căruia se aplică stiluri de formatare, atât de formă cât și amplasament. Astfel, există etichete diferite pentru fiecare dintre aceste modalități de formatare.

Mai mult, aceste etichete pot lua anumite atribute pentru a adăuga textului stiluri de formatare complexe. Dar despre aceasta voi trata în alt tutorial HTML, când voi introduce elemente de CSS.

Să discutăm despre câteva etichete folosite cel mai des în formatare text.

Titluri

Sunt realizate cu ajutorul etichetelor pentru headings. Există 6 tipuri prestabilite de titluri:

Cel mai mare titlu este h1 și apoi urmează celelalte până la h6. Rezultatul se poate vedea mai jos:

Titlu 1

Titlu 2

Titlu 3

Titlu 4

Titlu 5
Titlu 6

După cum se observă, etichetele pentru titluri ocupă fiecare o linie întreagă, adică se întind pe toată lungimea rândului existentă în pagină. Aceasta este o caracteristică prestabilită în HTML.

Linia de separare (break line)

Pentru a introduce într-un text o linie de separare, se folosește eticheta <br/>.

Paragraful

Pentru text se folosește eticheta pentru paragraf, adică <p> ca în exemplul:   .

Bold și italic

Două modalități simple de formatare a textului sunt <strong> și <em>. Prima evidențiază textul prin scrierea îngroșată (cunoscută și ca bold), iar a doua prin scrierea înclinată (italic), Exemple: 

Poate că vă întrebați de ce nu sunt folosite etichetele <b> și <i>. Adevărul este că în HTML se pot folosi amândoua variantele. Deși au același efect asupra textului, există o diferență de importanță între cele două perechi similare de formatare. În timp ce etichetele <b> și <i> sunt doar stiluri aplicate textului, etichetele <strong> și <em> sunt tratate diferit, ele evidențiind importanța textului formatat.

Citate

Pentru evidențierea unui citat într-un text se folosește eticheta <blockquotes> având un stil total diferit față de restul textului. De exemplu, iată cum este afișat codul:

Education is the most powerful weapon which you can use to change the world.

Etichete de structură

Să vorbim despre câteva etichete de amplasament sau de structură a textului.

Una este <section> ce este folosită pentru a grupa elemente asemănătoare. Un titlu și paragrafele sale pot fi grupate într-o secțiune. În altă secțiune pot fi grupate altele. Astfel, browserul va știi ce elemente trebuie afișate grupat astfel ca cititorul să nu piardă din conținutul înrudit. Acest lucru este foarte important în situațiile în care pagina respectivă este redată pe dispozitive cu ecrane mai mici.

Eticheta <article> se folsește asupra conținutului care este independent de restul paginii, în general pentru informațiile suplimentare care pot fi  afișate separat pe dispozitivele cu ecran mic.

Eticheta <aside> se folosește pentru elementele ce conțin funcțiuni diferite de restul paginii, cum ar fi o zonă de bară laterală sau o secțiune cu anumite informații legate de alte articole, anunțuri, butoane sociale etc.

În imaginea de mai jos se pot vedea și alte etichete de structură ce pot fi folosite pentru a grupa conținutul unei pagini.

semantic tags

Ne oprim aici cu formatarea textului și amplasament. Urmează un alt scurt tutorial despre realizarea listelor în HTML.

Spune-ti parerea