W artykule tym omówimy szczegółowo, jak w prosty sposób wstawić obraz do dokumentu HTML. Wstawienie obrazu do strony internetowej jest kluczowym elementem projektowania stron internetowych, ponieważ obrazy są niezbędne do przyciągnięcia uwagi użytkowników i poprawy wrażeń wizualnych.
Tag img
Aby wstawić obraz do dokumentu HTML, używamy tagu <img>. Ten tag nie ma tagu zamykającego, ponieważ jest to tag jednostronny. Oto podstawowy przykład użycia tagu <img>:
<img src="ścieżka/do/obrazu.jpg" alt="Opis obrazu">
Gdzie:
src– określa ścieżkę do pliku obrazu.alt– zawiera tekst zastępczy, który będzie wyświetlany, jeśli obraz nie zostanie załadowany lub w przypadku, gdy użytkownik korzysta z czytnika ekranowego.
Relatywna i bezwzględna ścieżka do obrazu
Możemy określić ścieżkę do obrazu jako względną lub bezwzględną.
Ścieżka względna:
- Względne odniesienie do lokalizacji obrazu w stosunku do aktualnej strony HTML.
- Przykład:
src="images/obraz.jpg"
Ścieżka bezwzględna:
- Pełna ścieżka do obrazu w systemie plików.
- Przykład:
src="https://www.domena.pl/images/obraz.jpg"
Właściwości obrazu
Tag <img> może mieć różne atrybuty, które pozwalają dostosować sposób wyświetlania obrazu. Niektóre z najczęściej używanych atrybutów to:
width– szerokość obrazu w pikselach.height– wysokość obrazu w pikselach.title– dodatkowy tekst wyświetlany po najechaniu myszą na obraz.
Przykłady
Oto kilka przykładów różnych sposobów użycia tagu <img>:
| Przykład | Kod HTML |
|---|---|
| Wstawienie obrazu o nazwie „obraz.jpg” znajdującego się w folderze „images” | <img src="images/obraz.jpg" alt="Opis obrazu"> |
| Wstawienie obrazu z pełną ścieżką URL | <img src="https://www.domena.pl/images/obraz.jpg" alt="Opis obrazu"> |
Używając powyższych wskazówek, możesz swobodnie wstawiać obrazy do swoich dokumentów HTML, aby wzbogacić ich treść i zapewnić atrakcyjność wizualną.
Najczęściej zadawane pytania
Odpowiemy teraz na kilka często zadawanych pytań dotyczących wstawiania obrazów w HTML:
| Pytanie | Odpowiedź |
|---|---|
| Jak ustawić alternatywny tekst dla obrazu? | Aby ustawić alternatywny tekst dla obrazu, należy użyć atrybutu alt w tagu <img>. Ten tekst zostanie wyświetlony, gdy obraz nie może być załadowany lub gdy użytkownik korzysta z czytnika ekranowego. |
| Czy mogę używać obrazów z różnych domen? | Tak, możesz wstawiać obrazy z różnych domen, wystarczy podać pełną ścieżkę URL obrazu w atrybucie src tagu <img>. |
| Jak zmienić rozmiar obrazu? | Aby zmienić rozmiar obrazu, możesz użyć atrybutów width i height w tagu <img>. Te atrybuty pozwalają określić szerokość i wysokość obrazu w pikselach. |
Przy użyciu tych prostych wskazówek możesz szybko i łatwo wstawiać obrazy do swoich stron HTML, dodając im atrakcyjność wizualną i poprawiając czytelność treści.
