📝

Text si Titluri in HTML

Dupa aceasta lectie, vei sti sa formatezi text cu titluri (h1-h6), paragrafe, randuri noi si stiluri (bold/italic)!

🎯 INCEARCA

Fara instructiuni - vezi cat poti singur!

Provocarea ta (5 minute):

1. Deschide fisierul HTML din lectia anterioara

2. Inlocuieste continutul din <body> cu:

Un titlu mare cu numele tau
Un titlu mai mic cu "Despre mine"
Un paragraf in care te descrii
Cateva cuvinte bold sau italic

3. Salveaza si deschide in browser

💡 Ai nevoie de indicii? Click aici

Pentru titluri, incearca: <h1>, <h2>, <h3>...

Pentru paragraf: <p>text aici</p>

Pentru bold: <b> sau <strong>

Pentru italic: <i> sau <em>

📚 INVATA

Formatarea textului in HTML

Titluri (Headings) - h1 pana la h6

HTML are 6 nivele de titluri, de la <h1> (cel mai mare) la <h6> (cel mai mic).

Cod HTML

<h1>Titlu nivel 1 - Cel mai important</h1>
<h2>Titlu nivel 2 - Subcapitol</h2>
<h3>Titlu nivel 3 - Sectiune</h3>
<h4>Titlu nivel 4</h4>
<h5>Titlu nivel 5</h5>
<h6>Titlu nivel 6 - Cel mai mic</h6>
                    

Rezultat in browser

Titlu nivel 1 - Cel mai important

Titlu nivel 2 - Subcapitol

Titlu nivel 3 - Sectiune

Titlu nivel 4

Titlu nivel 5

Titlu nivel 6 - Cel mai mic

Paragrafe si randuri noi

<p> creeaza un paragraf (cu spatiu inainte si dupa).

<br> forteaza un rand nou (fara spatiu extra). Nu are tag de inchidere!

Cod HTML

<p>Primul paragraf. Are spatiu
dupa el automat.</p>

<p>Al doilea paragraf.<br>
Aceasta linie e pe rand nou,
dar in acelasi paragraf.</p>
                            

Rezultat

Primul paragraf. Are spatiu dupa el automat.

Al doilea paragraf.
Aceasta linie e pe rand nou, dar in acelasi paragraf.

Text Bold si Italic

Pentru bold: <b> sau <strong>

Pentru italic: <i> sau <em>

Poti combina: bold si italic

Cod HTML

<p>Text <b>bold</b> cu tag b.</p>
<p>Text <strong>important</strong>.</p>
<p>Text <i>italic</i> cu tag i.</p>
<p>Text <em>accentuat</em>.</p>
<p><b><i>Bold si italic</i></b></p>
                            

Rezultat

Text bold cu tag b.

Text important.

Text italic cu tag i.

Text accentuat.

Bold si italic

💡 b vs strong, i vs em - Care e diferenta?

<b> si <i> sunt doar pentru aspect vizual.
<strong> si <em> au si semnificatie semantica - spun browserului ca textul e important/accentuat. Recomandare: foloseste <strong> si <em>!

🎯 Exemplu complet: Pagina "Despre mine"

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <title>Despre mine</title>
</head>
<body>
    <h1>Maria Popescu</h1>
    <h2>Despre mine</h2>
    <p>Sunt eleva in clasa a <strong>7-a</strong> si imi place
    sa invat <em>programare</em>.</p>

    <h3>Hobby-uri</h3>
    <p>Imi place sa:<br>
    - citesc carti<br>
    - ascult muzica<br>
    - creez pagini web</p>
</body>
</html>
                    

✅ VERIFICA

Hai sa vedem ce ai retinut!

1. Care este cel mai mare titlu in HTML?

<h6>

<h1>

2. Ce tag folosesti pentru un paragraf?

<para>

<p>

<text>

3. Cum faci text bold?

4. Ce tag forteaza un rand nou fara spatiu suplimentar?

<br>

<enter>

🎉

Felicitari!

Ai terminat Lectia 2: Text si Titluri

+50 XP

Acum stii sa formatezi text cu headings, paragrafe si stiluri!

Continua la Lectia 3 →