🔗 1. Elementul de legătură – <a>
Elementul <a> (anchor) este folosit pentru a crea link-uri.
Sintaxă de bază:
<a href="adresa">Textul link-ului</a>
🔹 Exemplu link extern:
<a href="https://www.google.com">Mergi la Google</a>
🔹 Deschiderea link-ului într-un tab nou
Se folosește atributul target="_blank":
<a href="https://www.google.com" target="_blank">
Mergi la Google
</a>
🔹 Link către o pagină internă
<a href="contact.html">Contact</a>
🔹 Link către email
<a href="mailto:exemplu@email.com">Trimite email</a>
🔹 Link către număr de telefon
<a href="tel:0712345678">Sună acum</a>
🖼️ 2. Elementul imagine – <img>
Elementul <img> este folosit pentru a afișa imagini.
Sintaxă de bază:
<img src="imagine.jpg" alt="Descriere imagine">
🔹 Atribute importante:
| Atribut | Rol |
|---|---|
src | locația imaginii |
alt | descrierea imaginii |
width | lățimea |
height | înălțimea |
🔹 Exemplu complet:
<img src="poza.jpg" alt="Peisaj de munte" width="300">
❗ De ce este important atributul alt?
- Ajută persoanele cu deficiențe de vedere (screen readers)
- Apare dacă imaginea nu se încarcă
- Este important pentru SEO
🔗🖼️ 3. Imagine ca link
Putem transforma o imagine într-un link:
<a href="https://www.wikipedia.org" target="_blank">
<img src="logo.png" alt="Logo Wikipedia" width="200">
</a>
📂 4. Căi relative vs absolute
🔹 Cale absolută:
<img src="https://site.com/imagine.jpg">
🔹 Cale relativă:
<img src="imagini/poza.jpg">
🧪 Exerciții practice
✅ Exercițiul 1
Creează un link către:
- site-ul școlii
- care să se deschidă într-un tab nou
✅ Exercițiul 2
Adaugă o imagine:
- cu lățimea 250px
- cu text alternativ corect
✅ Exercițiul 3
Creează:
- o imagine
- care duce către Google
- și se deschide în tab nou
Provocare
Creează o pagină HTML care conține:
- un titlu
- un paragraf
- o imagine
- un link
- o imagine care este link
🧠 MINI QUIZ – Verifică ce ai învățat!
🔹 1. Ce face atributul href?
a) schimbă culoarea textului
b) indică adresa link-ului
c) mărește imaginea
✔ Răspuns corect: b
🔹 2. Ce atribut este obligatoriu la imagine?
a) width
b) alt
c) color
✔ Răspuns corect: b
🔹 3. Ce face target="_blank"?
a) șterge link-ul
b) deschide link-ul într-un tab nou
c) face textul îngroșat
✔ Răspuns corect: b
🔹 4. Care este sintaxa corectă pentru imagine?
a) <img>poza.jpg</img>
b) <img src="poza.jpg">
c) <image src="poza.jpg">
✔ Răspuns corect: b