Tutorial – Formatare text în HTML – Website

În HTML trecerea la un rând nou se face doar prin introducerea etichetei <br> iar pentru paragraf nou cu eticheta <p>.

Exemplu:

HTML Afișare
Probă text.<br>
Text pe un rând nou.<p>
Text într-un paragraf nou.
Probă text.
Text pe un rând nou.Text într-un paragraf nou.

 

<hr> Introduce o linie linie orizontală și trecerea la un rând nou.


Folosind etichete adecvate textul poate fi formatat.
Spre exemplu fonturilor li se poate modifica: mărimea, culoarea, forma (normal, bold, italic), familia (Arial, Verdana, etc.), textul poate fi aliniat pe orizontala sau pe verticală iar titlurile (header), de la 1 la 6, sunt diferite ca mărime (1 cel mai mare iar 6 cel mai mic).

Etichetele <span> și </span> delimitează un șir de caractere în vederea formatării.

Etichetele <div> și </div> sunt similare etichetelor <span> și </span>, cu diferența că formatează mai multe elemente și introduc un rând nou înainte și după sfârșitul zonei formatate.

Unul din atributele blocului div este align care poate lua valorile:
center aliniere pe centru
left aliniere la stânga
right aliniere la dreapta

În situația în care dorim ca textul introdus să fie afișat exact așa cum a fost introdus (text preformatat) în fișierul sursă vom folosi pereche de etichete <pre> și </pre>.

Exemplu:

 

HTML Afișare
text normal text normal
<b>text bold</b> text bold
<i>text cursiv</i> text cursiv
<u>text subliniat</u> text subliniat
<del>text tăiat</del> text tăiat
<sup>exponent</sup> exponent
<sub>indice</sub> indice
<tt>caractere monospațiate</tt> caractere monospațiate
<cite>Citat</cite> Citat
<em>evidențiat</em> evidențiat
<code>text conținând cod de computer</code> text conținând cod de computer
<kbd>text conținând cod de computer</kbd> text conținând cod de computer
<samp>mostră de cod de computer</samp> mostră de cod de computer
<strong>text îngroșat</strong> text îngroșat
<big>mare</big> mare
<small>mic</small> mic
<font color=”red”>font roșu</font> font roșu
<font face=”Courier”>font Courier</font> font Courier
<font size=”6″>font size=6</font> font size=6
<div align=”center”>text aliniat pe centru</div>
text aliniat pe centru
<div align=”left”>text aliniat la stânga</div>
text aliniat la stânga
<div align=”right”>text aliniat la dreapta</div>
text aliniat la dreapta
<h1>Titlu 1</h1>

Titlu 1

<h2>Titlu 2</h2>

Titlu 2

<h3>Titlu 3</h3>

Titlu 3

<h4>Titlu 4</h4>

Titlu 4

<h5>Titlu 5</h5>
Titlu 5
<h6>Titlu 6</h6>
Titlu 6

 

Legendă:
br = line break
p = paragraph
hr = horizontal rule

Dacă ți-a plăcut acest tutorial, aștept comentariul tău!

Îți mai recomand:

Barbu Iulian

Blogger din anul 2004, fecioară, iubitor de grafică, Senior WebMaster la StoreDay.ro și BursaSite.ro, Senior Graphic Designer, Senior Web Designer, Senior Web Commerce. Sunt un tip plin de viață și inovator în creativitate.

Lasă-mi un comentariu!

Acest sit folosește Akismet pentru a reduce spamul. Află cum sunt procesate datele comentariilor tale.

Mai multe despre Tutoriale - Web Design
Tutorial – Ce înseamnă un SERVER? – Web Site

Ce înseamnă server? Toată lumea știe, probabil, ce înseamnă Internet: acea colecție...

Închide