Obrazy HTML
Obrazy mogą poprawić projekt i wygląd strony internetowej.
Przykład
<img src="pic_trulli.jpg"
alt="Italian Trulli">
Przykład
<img src="img_girl.jpg"
alt="Girl in a jacket">
Przykład
<img src="img_chania.jpg"
alt="Flowers in Chania">
Składnia obrazów HTML
Tag HTML <img>służy do osadzenia obrazu na stronie internetowej.
Obrazy nie są technicznie wstawiane na stronę internetową; obrazy są połączone ze stronami internetowymi. Znacznik <img>tworzy miejsce do przechowywania obrazu odniesienia.
Znacznik <img>jest pusty, zawiera tylko atrybuty i nie ma znacznika zamykającego.
Tag <img>ma dwa wymagane atrybuty:
- src - Określa ścieżkę do obrazu
- alt - Określa alternatywny tekst dla obrazu
Składnia
<img src="url" alt="alternatetext">
Atrybut src
Wymagany srcatrybut określa ścieżkę (URL) do obrazu.
Uwaga: Kiedy strona internetowa się ładuje, to przeglądarka pobiera w tym momencie obraz z serwera internetowego i wstawia go na stronę. Dlatego upewnij się, że obraz faktycznie pozostaje w tym samym miejscu w stosunku do strony internetowej, w przeciwnym razie Twoi odwiedzający zobaczą ikonę uszkodzonego linku. Ikona uszkodzonego łącza i alttekst są wyświetlane, jeśli przeglądarka nie może znaleźć obrazu.
Przykład
<img src="img_chania.jpg" alt="Flowers
in Chania">
Atrybut alt
Wymagany altatrybut zapewnia tekst alternatywny dla obrazu, jeśli użytkownik z jakiegoś powodu nie może go wyświetlić (z powodu wolnego połączenia, błędu w atrybucie src lub jeśli użytkownik korzysta z czytnika ekranu).
Wartość altatrybutu powinna opisywać obraz:
Przykład
<img src="img_chania.jpg" alt="Flowers
in Chania">
Jeśli przeglądarka nie może znaleźć obrazu, wyświetli wartość alt
atrybutu:
Przykład
<img src="wrongname.gif" alt="Flowers
in Chania">
Wskazówka: czytnik ekranu to program, który odczytuje kod HTML i umożliwia użytkownikowi „odsłuchiwanie” treści. Czytniki ekranu są przydatne dla osób niedowidzących lub osób niepełnosprawnych w nauce.
Rozmiar obrazu — szerokość i wysokość
Możesz użyć styleatrybutu, aby określić szerokość i wysokość obrazu.
Przykład
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Alternatywnie możesz użyć atrybutów widthi :height
Przykład
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Atrybuty widthi heightzawsze określają szerokość i wysokość obrazu w pikselach.
Uwaga: Zawsze określaj szerokość i wysokość obrazu. Jeśli szerokość i wysokość nie zostaną określone, strona internetowa może migotać podczas ładowania obrazu.
Szerokość i wysokość czy styl?
Wszystkie atrybuty width, heighti stylesą poprawne w HTML.
Sugerujemy jednak użycie styleatrybutu. Zapobiega zmianie rozmiaru obrazów przez arkusze stylów:
Przykład
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
Obrazy w innym folderze
Jeśli masz swoje obrazy w podfolderze, musisz podać nazwę folderu w srcatrybucie:
Przykład
<img src="/images/html5.gif"
alt="HTML5 Icon" style="width:128px;height:128px;">
Obrazy na innym serwerze/witrynie internetowej
Niektóre witryny internetowe wskazują obraz na innym serwerze.
Aby wskazać obraz na innym serwerze, musisz określić bezwzględny (pełny) adres URL w srcatrybucie:
Przykład
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
Uwagi dotyczące obrazów zewnętrznych: Obrazy zewnętrzne mogą być objęte prawami autorskimi. Jeśli nie uzyskasz pozwolenia na jego używanie, możesz naruszać prawa autorskie. Ponadto nie można kontrolować obrazów zewnętrznych; można go nagle usunąć lub zmienić.
Animowane obrazy
HTML pozwala na animowane pliki GIF:
Przykład
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Obraz jako link
Aby użyć obrazu jako linku, umieść <img>tag wewnątrz <a>
tagu:
Przykład
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;">
</a>
Obraz pływający
Użyj właściwości CSS float, aby obraz unosił się po prawej lub po lewej stronie tekstu:
Przykład
<p><img src="smiley.gif" alt="Smiley face"
style="float:right;width:42px;height:42px;">
The image will float to the right of
the text.</p>
<p><img src="smiley.gif" alt="Smiley face"
style="float:left;width:42px;height:42px;">
The image will float to the left of
the text.</p>
Wskazówka: aby dowiedzieć się więcej o CSS Float, przeczytaj nasz samouczek CSS Float .
Popularne formaty obrazów
Oto najpopularniejsze typy plików graficznych obsługiwane we wszystkich przeglądarkach (Chrome, Edge, Firefox, Safari, Opera):
| Abbreviation | File Format | File Extension |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
Podsumowanie rozdziału
- Użyj elementu HTML
<img>, aby zdefiniować obraz - Użyj
srcatrybutu HTML, aby zdefiniować adres URL obrazu - Użyj
altatrybutu HTML, aby zdefiniować tekst alternatywny dla obrazu, jeśli nie można go wyświetlić - Użyj kodu HTML
widthiheightatrybutów lub CSSwidthiheightwłaściwości, aby określić rozmiar obrazu - Użyj
floatwłaściwości CSS, aby obraz unosił się w lewo lub w prawo
Uwaga: ładowanie dużych obrazów zajmuje trochę czasu i może spowolnić działanie Twojej strony internetowej. Używaj obrazów ostrożnie.
Ćwiczenia HTML
Tagi obrazu HTML
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
Pełną listę wszystkich dostępnych tagów HTML można znaleźć w naszym podręczniku HTML Tag Reference .