📷

Imagini in HTML

Dupa aceasta lectie, vei sti sa adaugi imagini pe pagina web, sa le dimensionezi si sa folosesti textul alternativ!

🎯 INCEARCA

Fara instructiuni - vezi cat poti singur!

Provocarea ta (5 minute):

1. Descarca o imagine de pe internet (sau foloseste una existenta)

2. Pune imaginea in acelasi folder cu fisierul HTML

3. Incearca sa adaugi imaginea in pagina ta HTML

4. Fa imaginea sa aiba latime de 300 pixeli

💡 Ai nevoie de indicii? Click aici

Tag-ul pentru imagini: <img>

Sursa imaginii: src="nume-imagine.jpg"

Latimea: width="300"

Imaginea nu are tag de inchidere!

📚 INVATA

Adaugarea imaginilor in HTML

Tag-ul <img> - Imagini

Tag-ul <img> adauga o imagine pe pagina.

Important: <img> este un tag auto-inchis - nu are tag de inchidere!

Sintaxa de baza

Atribute importante pentru imagini

Atribut	Ce face	Exemplu
`src`	Sursa imaginii (calea sau URL)	`src="foto.jpg"`
`alt`	Text alternativ (daca imaginea nu se incarca)	`alt="Pisica mea"`
`width`	Latimea in pixeli	`width="300"`
`height`	Inaltimea in pixeli	`height="200"`

Exemple practice

Imagine locala (din acelasi folder)

Imagine de pe internet

<img src="https://placekitten.com/400/300"
     alt="O pisicuta draguta">
                    

Imagine cu dimensiuni specificate

<img src="logo.png"
     alt="Logo-ul companiei"
     width="200"
     height="100">
                    

Rezultat (cu placeholder)

200 x 100 px

💡 De ce e important atributul "alt"?

Accesibilitate: Cititorele de ecran il citesc pentru persoanele nevazatoare
SEO: Google il foloseste pentru a intelege imaginea
Backup: Se afiseaza daca imaginea nu se incarca

Cai catre imagini

Sunt 3 moduri de a specifica sursa imaginii:

<!-- 1. Acelasi folder cu HTML -->
<img src="imagine.jpg">

<!-- 2. Subfolder "imagini" -->
<img src="imagini/poza.png">

<!-- 3. URL complet de pe internet -->
<img src="https://site.com/imagine.jpg">
                    

🎯 Exemplu complet: Galerie foto

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <title>Galeria mea foto</title>
</head>
<body>
    <h1>Animalele mele preferate</h1>

    <h2>Pisici</h2>
    <img src="https://placekitten.com/300/200"
         alt="Pisica dragalasa"
         width="300">

    <h2>Caini</h2>
    <img src="https://placedog.net/300/200"
         alt="Catel simpatic"
         width="300">

    <p>Imi plac foarte mult animalele!</p>
</body>
</html>
                    

⚠ Greseli frecvente

Cale gresita: Imaginea nu e in locul specificat

Extensie gresita: poza.jpg vs poza.png

Majuscule: Poza.JPG nu e acelasi lucru cu poza.jpg

Uiti ghilimele: src=poza.jpg ❌ vs src="poza.jpg" ✅

✅ VERIFICA

Hai sa vedem ce ai retinut!

1. Ce atribut specifica sursa (calea) imaginii?

href

src

path

2. Ce face atributul "alt"?

Schimba culoarea imaginii

Ofera text alternativ daca imaginea nu se incarca

Roteste imaginea

3. Tag-ul <img> are tag de inchidere?

Nu, este auto-inchis

Da, </img>

Da, </image>

4. Care este codul corect pentru o imagine?

🎉

Felicitari!

Ai terminat Lectia 4: Imagini in HTML

+50 XP

Acum stii sa adaugi si sa dimensionezi imagini pe pagina web!

Continua la Lectia 5 →