Jak dodać łącze do obrazu w HTML?

Wstawianie obrazu na stronę

Obrazy wzbogacają wygląd strony, przerywając tekst i przyciągając uwagę. W kodzie HTML obraz jest w rzeczywistości odnośnikiem do pliku graficznego – może znajdować się na tym samym serwerze co strona lub na serwerze zewnętrznym. Aby przeglądarka mogła wyświetlić obraz, musimy podać jego lokalizację w atrybucie src znacznika <img>.

Obraz lokalny vs zdalny

Jeśli plik graficzny znajduje się na serwerze, na którym hostowana jest strona, wystarczy podać jedynie nazwę pliku lub ścieżkę względną, np.:

<img src="obraz.jpg" alt="Opis obrazu">

Gdy obraz znajduje się na innym serwerze, trzeba podać pełny adres URL:

<img src="https://example.com/obraz.jpg" alt="Opis obrazu">

Wyrównanie obrazu

Atrybut align określa położenie obrazu w poziomie (left, right, center). Przykład wyrównania do prawej strony:

<img src="obraz.jpg" align="right" alt="Opis">

Atrybut valign służy do wyrównania pionowego (top, bottom, middle). Aby umieścić obraz w prawym górnym rogu:

<img src="obraz.jpg" align="right" valign="top" alt="Opis">

Tekst alternatywny

Atrybut alt wyświetla się, gdy obraz nie może zostać załadowany lub gdy użytkownik korzysta z przeglądarki tekstowej. Dzięki niemu strona pozostaje dostępna:

<img src="obraz.jpg" alt="Krótki opis obrazu">

Obraz jako link

Obraz może pełnić rolę odnośnika – wystarczy go otoczyć znacznikiem <a>. Po kliknięciu użytkownik zostanie przeniesiony do podanego adresu lub do pełnego rozmiaru zdjęcia:

<a href="https://example.com/strona.html">
    <img src="obraz.jpg" alt="Opis obrazu">
</a>