5. Hiperłącza, grafiki i atrybuty

Bez linków i obrazów internet byłby nudny. Te dwa elementy to absolutna podstawa.

Linki – <a>

<a href="https://google.pl">Przejdź do Google</a>

<a href="https://youtube.com" target="_blank" rel="noopener">YouTube (nowa karta)</a>

<a href="mailto:jan.kowalski@gmail.com">Napisz do mnie</a>

<a href="o-nas.html">O nas (wewnętrzny plik)</a>

Obrazy – <img>

<img src="kot.jpg" alt="Szary kot leżący na kocu">

<img src="https://placecats.com/400/300" alt="Przykładowy kociak">

<img src="logo.png" alt="Logo firmy" width="180" height="60">

Najważniejsze atrybuty

• href – cel linku
• src – ścieżka do obrazu
• alt – tekst alternatywny (obowiązkowy!)
• target="_blank" – nowa karta
• rel="noopener" – bezpieczeństwo przy target="_blank"

Zadanie

Dodaj do index.html:

• link do dowolnej strony (nowa karta)
• link mailto:
• dwa obrazy (jeden lokalny, jeden zewnętrzny) z dobrym alt