!DOCTYPE html> Lecția 2 - Linkuri și Imagini în HTML

Lecția 2: Linkuri și Imagini în HTML

1. Eticheta `<a>` - Linkuri

Linkurile permit navigarea între pagini web sau în interiorul aceleiași pagini.

<a href="https://www.exemplu.ro" target="_blank" rel="noopener noreferrer">Vizitează site-ul meu</a>

Vizitează site-ul meu

Atribute importante pentru `<a>`:

href: Adresa URL către care se face legătura.
target: Deschide linkul într-un tab nou dacă este _blank.
rel: Recomandat să fie noopener noreferrer când folosești _blank pentru securitate.

2. Link intern și ancoră

Poți face linkuri către alte secțiuni din aceeași pagină folosind ancore:

<a href="#contact">Du-te la Contact</a>

<h2 id="contact">Contact</h2>

Du-te la Contact

Contact

3. Eticheta `<img>` - Imagini

Pentru a insera o imagine în pagină, folosim tag-ul <img>, care este self-closing (nu are closing tag).

<img src="imagine.jpg" alt="Descriere imagine" width="300" height="200" />

Atribute importante pentru `<img>`:

src: Calea către fișierul imaginii (URL sau cale relativă).
alt: Text descriptiv pentru accesibilitate și în cazul în care imaginea nu se încarcă.
width și height: Dimensiunile imaginii în pixeli.

4. Favicoane (favicon)

Favicoanele sunt pictograme mici care apar în tabul browserului, reprezentând site-ul.

<link rel="icon" href="favicon.ico" type="image/x-icon" />

Linia aceasta se adaugă în <head>:

5. Exemplu complet: Pagina cu link și imagine

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <title>Exemplu Link și Imagine</title>
</head>
<body>
    <h1>Pagina mea cu link și imagine</h1>
    <a href="https://www.google.com" target="_blank" rel="noopener noreferrer">Mergi la Google</a>

    <br><br>

    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/320px-JavaScript-logo.png" alt="Logo JavaScript" width="320" height="200" />
</body>
</html>

Pagina mea cu link și imagine

Mergi la Google

În lecția următoare: Vom învăța despre liste și tabele în HTML!