📝

Text si Imagini

Dupa aceasta lectie vei sti sa adaugi titluri, paragrafe, liste si imagini in paginile tale web!

🧪 INCEARCA 3 minute - experimenteaza!

Deschide editorul si adauga o imagine si un paragraf in pagina ta.

🚀 Deschide OneCompiler HTML

🎯 Provocare (3 min):

Adauga un titlu mare cu <h1>
Scrie un paragraf cu <p>
Adauga o imagine: <img src="https://picsum.photos/200" alt="poza">
Apasa "Run" si vezi rezultatul!

📚 INVATA Continut pentru pagina ta

Titluri (Headings)

h1 - h6: Niveluri de titluri

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

<h1>Titlu Principal</h1>
<h2>Subtitlu</h2>
<h3>Sectiune</h3>
<h4>Subsectiune</h4>
<h5>Mic</h5>
<h6>Cel mai mic</h6>

💡 Foloseste h1 o singura data pe pagina - e titlul principal!

Paragrafe si Text

p - Paragraf

Tag-ul <p> creeaza un paragraf. Browserul adauga automat spatiu inainte si dupa.

<p>Acesta este primul paragraf.</p>
<p>Acesta este al doilea paragraf.</p>

br si hr - Intreruperi

<br> face o linie noua, <hr> adauga o linie orizontala.

<p>Prima linie<br>A doua linie</p>
<hr>
<p>Text dupa linie.</p>

💡 <br> si <hr> nu au tag de inchidere - sunt "self-closing"!

Liste

ul si ol - Liste

<ul> = lista neordonata (buline), <ol> = lista ordonata (numere)

<!-- Lista cu buline -->
<ul>
  <li>Element 1</li>
  <li>Element 2</li>
</ul>

<!-- Lista numerotata -->
<ol>
  <li>Primul</li>
  <li>Al doilea</li>
</ol>

Imagini

img - Imagini

Tag-ul <img> afiseaza imagini. Are doua atribute importante:

src

Calea catre imagine (URL sau fisier local)

alt

Text alternativ (afisat daca imaginea nu se incarca)

💡 <img> nu are tag de inchidere - e self-closing!

✅ VERIFICA Raspunde corect la 3 din 4

1. Care este cel mai mare titlu in HTML?

<h1>

<h6>

<title>

2. Ce atribut contine adresa imaginii?

alt

src

href

3. Ce tag creeaza o lista numerotata?

<ul>

<li>

<ol>

4. Ce face tag-ul <br>?

Creeaza o linie noua

Face textul bold

Adauga o imagine

⭐

Felicitari!

Ai terminat Lectia 2! Acum stii sa adaugi continut in paginile tale web.

Ce ai invatat: h1-h6 titluri, p paragraf, ul/ol liste, img src alt, br hr

Continua cu Lectia 3 →