Invatare Atomica

Vreau sa adaug imagini pe site-ul meu!

Progres lectie:
0%
🎯

Obiectivul lectiei

Ai invatat sa faci texte, liste si linkuri. Dar un site fara imagini e ca un album foto... fara poze. Hai sa schimbam asta!

Dupa aceasta lectie vei putea:

  • Sa explici ce este tag-ul
  • Sa explici src = sursa imaginii
  • Sa utilizezi alt = text alternativ
  • Sa aplici controlam marimea imaginii
  • Sa aplici ghid de formate

Incearca singur!

🎯 INCEARCA

Testeaza inainte sa inveti!

Nu trebuie sa intelegi totul acum. Doar copiaza, ruleaza si observa ce se intampla.

Misiunea ta (5 minute):
1
Copiaza codul de mai jos si lipeste-l pe CodePen (in zona HTML). Apasa Run sau asteapta sa se incarce automat.
<h1>Galeria mea foto</h1> <!-- Imagine simpla --> <h2>Peisaj de munte</h2> <img src="https://picsum.photos/400/250?random=1" alt="Peisaj de munte" width="400"> <!-- Imagine cu legenda --> <figure> <img src="https://picsum.photos/400/250?random=2" alt="Apus de soare" width="400"> <figcaption>Un apus frumos la mare</figcaption> </figure> <!-- Imagine clickabila (link) --> <h2>Click pe imagine:</h2> <a href="https://ro.wikipedia.org"> <img src="https://picsum.photos/200/200?random=3" alt="Click pentru Wikipedia" width="200"> </a>
▶ Deschide CodePen
2
Observa cele 3 imagini. Schimba numarul din ?random=1 in ?random=42 si vezi cum se schimba imaginea!
3
Acum incearca ceva: sterge atributul alt de la prima imagine si schimba src intr-un link gresit (de ex. src="nimic.jpg"). Ce vezi in loc de imagine?
4
Adauga inca o imagine dupa ultimul tag </a>. Foloseste <img src="https://picsum.photos/300/200?random=5" alt="Noua mea imagine" width="300">
🌟 BONUS: Schimba width="400" in width="600" la prima imagine. Sau incearca width="100%". Ce se intampla?
▶ Blocat la pasul 2? Click aici pentru un indiciu

Gaseste linia care contine ?random=1 si schimba numarul 1 cu 42 (sau orice alt numar). Site-ul picsum.photos genereaza o imagine diferita pentru fiecare numar.

Poti incerca si dimensiuni diferite: schimba 400/250 in 600/400 sa obtii o imagine mai mare.

▶ Blocat la pasul 3? Click aici

Cand imaginea nu se gaseste (link gresit), browserul arata o iconita de imagine "rupta" - un patrat mic cu un X sau o imagine de eroare.

Daca ai lasat textul alt, vei vedea textul respectiv in locul imaginii. Daca ai sters alt, vei vedea doar iconita de eroare fara nicio explicatie. De aceea alt e important!

▶ Blocat la pasul 4? Click aici

Dupa linia </a> (ultima linie din cod), adauga pe un rand nou:

<img src="https://picsum.photos/300/200?random=5" alt="Noua mea imagine" width="300">

Observa ca tag-ul <img> nu are tag de inchidere! Este un tag self-closing (se inchide singur).

1

Ce este tag-ul ?

Ce este tag-ul <img> ?

Tag-ul <img> este elementul HTML care afiseaza o imagine pe pagina web. Este unul dintre cele mai folosite tag-uri din HTML.

Spre deosebire de celelalte tag-uri pe care le-ai invatat (<p>...</p>, <h1>...</h1>), tag-ul <img> este self-closing - nu are tag de inchidere!

🖼 Analogie: Rama foto pe perete

Gandeste-te la o rama foto pe perete. Rama in sine e goala - trebuie sa ii spui CE poza sa puna in ea (atributul src) si sa scrii pe spate ce reprezinta (atributul alt).

La fel, <img> este "rama" iar src si alt ii spun ce sa afiseze si cum sa descrie imaginea.

2

src = sursa imaginii

src = sursa imaginii

Atributul src (de la "source" = sursa) ii spune browserului de unde sa ia imaginea. Poate fi o cale relativa (fisier local) sau un URL complet (de pe internet).

Cale relativa (fisier pe calculatorul tau)
<!-- Imaginea e in acelasi folder cu pagina HTML --> <img src="pisica.jpg" alt="Pisica mea"> <!-- Imaginea e intr-un subfolder numit "imagini" --> <img src="imagini/pisica.jpg" alt="Pisica mea"> <!-- Imaginea e un nivel mai sus --> <img src="../poze/pisica.jpg" alt="Pisica mea">
URL complet (de pe internet)
<!-- Imagine de pe un site extern --> <img src="https://picsum.photos/400/300" alt="Imagine aleatorie"> <!-- Logo Wikipedia --> <img src="https://upload.wikimedia.org/wikipedia/ro/logo.png" alt="Logo Wikipedia">
3

alt = text alternativ

alt = text alternativ

Atributul alt descrie imaginea in cuvinte. Este obligatoriu din doua motive esentiale:

1. Accesibilitate: Persoanele cu deficiente de vedere folosesc programe (screen readers) care le citesc pagina cu voce tare. Fara alt, ele nu stiu ce e in imagine.

2. Fallback: Daca imaginea nu se incarca (link gresit, internet lent), browserul arata textul din alt in locul imaginii.

4

Controlam marimea imaginii

Controlam marimea imaginii

Atributele width (latime) si height (inaltime) seteaza dimensiunile imaginii in pixeli. Daca specifici doar width, inaltimea se calculeaza automat (proportional).

Exemple de dimensiuni
<!-- Dimensiuni fixe in pixeli --> <img src="poza.jpg" alt="Exemplu" width="400" height="300"> <!-- Doar latimea - inaltimea se calculeaza automat --> <img src="poza.jpg" alt="Exemplu" width="300"> <!-- Imagine mica (thumbnail) --> <img src="poza.jpg" alt="Miniatura" width="100"> <!-- Fara dimensiuni = afiseaza la marimea originala --> <img src="poza.jpg" alt="Marime originala">
5

Ghid de formate

Ghid de formate

Nu toate imaginile sunt la fel! Exista mai multe formate, fiecare cu avantajele lui. Alege formatul potrivit in functie de ce vrei sa afisezi.

.JPG
JPEG
Fotografii, peisaje, portrete. Fisier mic, calitate buna.
.PNG
PNG
Logo-uri, grafice, imagini cu transparenta (fundal transparent).
.GIF
GIF
Animatii scurte, emoticoane animate, reactii.
.SVG
SVG
Icoane, logo-uri, grafice. Se mareste fara sa se pixeleze!
.WebP
WebP
Format modern. Calitate JPG, transparenta PNG, fisier mic.
6

Imagini clickabile

Imagini clickabile

Vrei ca vizitatorul sa poata da click pe o imagine si sa ajunga pe alta pagina? Pune tag-ul <img> inauntrul unui tag <a>!

Formula
<a href="pagina-destinatie.html"> <img src="imagine.jpg" alt="Descriere"> </a>
Exemple practice
<!-- Logo-ul duce la pagina principala --> <a href="index.html"> <img src="logo.png" alt="Logo site - Acasa" width="150"> </a> <!-- Miniatura care deschide imaginea mare --> <a href="foto-mare.jpg"> <img src="foto-mica.jpg" alt="Click pentru marire" width="100"> </a> <!-- Imagine care duce la alt site --> <a href="https://ro.wikipedia.org" target="_blank"> <img src="wikipedia-logo.png" alt="Wikipedia Romania" width="200"> </a>
7

Mod semantic de a adauga legende

Mod semantic de a adauga legende

In HTML5, avem doua tag-uri speciale pentru imagini cu legende:

<figure> — grupeaza o imagine cu legenda ei (un "container" semantic)

<figcaption> — textul legendei (caption = legenda/subtitlu)

Exemplu complet
<figure> <img src="https://picsum.photos/400/250?random=10" alt="Castel medieval inconjurat de padure" width="400"> <figcaption>Castelul Bran, cunoscut ca "Castelul lui Dracula"</figcaption> </figure>
8

Galerie foto cu toate conceptele

Galerie foto cu toate conceptele

Acum punem totul impreuna: imagini simple, cu legende, clickabile si in diferite formate. Urmareste fiecare parte!

Program complet - testeaza-l!
<!DOCTYPE html> <html lang="ro"> <head> <meta charset="UTF-8"> <title>Galeria Mea Foto</title> </head> <body> <h1>Galeria Mea Foto</h1> <!-- Imagine simpla --> <h2>Peisaj de munte</h2> <img src="https://picsum.photos/500/300?random=1" alt="Peisaj montan cu brazi" width="500"> <p>O fotografie frumoasa de munte.</p> <!-- Imagine cu legenda (figure) --> <h2>Apus la mare</h2> <figure> <img src="https://picsum.photos/500/300?random=2" alt="Apus de soare peste mare" width="500"> <figcaption>Apus de soare, vara 2025</figcaption> </figure> <!-- Imagine clickabila --> <h2>Viziteaza Wikipedia</h2> <a href="https://ro.wikipedia.org" target="_blank"> <img src="https://picsum.photos/200/200?random=3" alt="Click pentru Wikipedia" width="200"> </a> <p>Click pe imagine pentru a deschide Wikipedia!</p> <!-- Galerie cu mai multe imagini mici --> <h2>Mini-galerie</h2> <img src="https://picsum.photos/150/150?random=4" alt="Foto 1" width="150"> <img src="https://picsum.photos/150/150?random=5" alt="Foto 2" width="150"> <img src="https://picsum.photos/150/150?random=6" alt="Foto 3" width="150"> </body> </html>
▶ Testeaza pe CodePen

Exercitii practice

Exercitiul 1 (Nivel minim) - Analiza codului HTML

Raspunde la urmatoarele intrebari despre imagini in HTML:

  1. Avem codul: <img src="poze/vara.jpg" alt="Plaja in vara" width="400">. Ce inseamna fiecare atribut? In ce folder se afla imaginea fata de fisierul HTML?
  2. De ce este gresit sa scrii <img src="poza.jpg"></img>? Ce se intampla daca uiti atributul alt? Dar daca scrii scr in loc de src?
  3. Explica diferenta intre formatul JPG si PNG. Cand ai folosi fiecare? Da cate un exemplu concret de utilizare.

Raspunde numerotat: 1. ... 2. ... 3. ...

Exercitiul 2 (Nivel standard) - Creeaza o pagina cu galerie foto

Cerinta: Creeaza o pagina HTML completa care contine:

  1. Un titlu principal (<h1>) cu numele galeriei tale
  2. Cel putin 3 imagini de pe picsum.photos cu dimensiuni diferite (una mare, una medie, una mica)
  3. Cel putin o imagine cu <figure> si <figcaption>
  4. Cel putin o imagine clickabila care duce la un alt site
  5. Fiecare imagine trebuie sa aiba alt descriptiv si width

Indicii:

  • Foloseste https://picsum.photos/WIDTH/HEIGHT?random=N ca sursa
  • Nu uita structura de baza: <!DOCTYPE html>, <html>, <head>, <body>
  • Pentru imagine clickabila: <a href="URL"><img ...></a>

Exercitiul 3 (Nivel performanta) - Explicatie scrisa

Cerinta: Explica unui coleg care nu stie HTML cum functioneaza imaginile pe o pagina web. Foloseste o analogie din viata reala (alta decat cea din lectie cu rama foto). De exemplu: album foto, revista, prezentare PowerPoint, etc.

Indicii:

  • Explica ce corespunde tag-ului <img>, atributului src si atributului alt in analogia ta
  • Da un exemplu din analogia ta pentru o "imagine care nu se incarca" (de ce e important alt)
  • Explica de ce ai pune dimensiuni (width/height) - ce se intampla fara ele?

Cuvinte cheie de folosit: img, src, alt, width, height, self-closing, figure, figcaption, format, accesibilitate

Ce ai invatat astazi

  • Ai invatat ce este tag-ul
  • Acum stii src = sursa imaginii
  • Ai descoperit alt = text alternativ
  • Ai explorat controlam marimea imaginii
  • Ai inteles ghid de formate
  • Ai invatat imagini clickabile
  • Acum stii mod semantic de a adauga legende
  • Ai descoperit galerie foto cu toate conceptele

Urmatoarea lectie

Continua cu lectia urmatoare pentru a aprofunda cunostintele.

Continua →