W HTML, obrazy są fundamentalnym elementem, który wzbogaca zawartość stron internetowych, dodając do nich wizualny wymiar. Aby osadzić obraz na stronie internetowej, używamy znacznika <img>
, który jest jednym z najczęściej stosowanych elementów w HTML. Znacznik <img>
jest pusty, co oznacza, że nie ma zamknięcia, a jego zachowanie jest kontrolowane przez atrybuty. W tej lekcji omówimy kluczowe atrybuty znacznika <img>
: src
, width
, height
, oraz alt
.
Przykład kodu
W poniższym przykładzie pokazujemy, jak używać znacznika <img>
do osadzenia obrazu na stronie internetowej, z uwzględnieniem wszystkich wymienionych atrybutów.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wprowadzenie do obrazków w HTML</title>
</head>
<body>
<!-- Obraz z atrybutami src, width, height, oraz alt -->
<img src="sciezka/do/obrazu.jpg" width="600" height="400"
alt="Opis alternatywny obrazu">
</body>
</html>
Atrybuty znacznika <img>
src
(source): Ten atrybut określa ścieżkę do obrazu, który ma być wyświetlony. Może to być ścieżka lokalna lub URL do obrazu umieszczonego w Internecie.width
iheight
: Te atrybuty służą do określania szerokości i wysokości obrazu w pikselach. Pozwalają one na kontrolę rozmiaru wyświetlanego obrazu. Jest to ważne zarówno z punktu widzenia estetyki, jak i wydajności strony, ponieważ odpowiednie rozmiary mogą zmniejszyć czas ładowania.alt
(alternative text): Atrybutalt
jest niezwykle ważny z punktu widzenia dostępności i SEO (Search Engine Optimization). Dostarcza tekstową alternatywę dla obrazów, umożliwiając użytkownikom czytników ekranowych zrozumienie zawartości obrazu. Pomaga również w sytuacjach, gdy obraz z jakiegoś powodu nie może zostać wyświetlony.
Dlaczego atrybuty te są ważne?
- Dostępność: Atrybut
alt
pomaga osobom korzystającym z czytników ekranu zrozumieć, co jest przedstawione na obrazie. - Responsywność: Poprzez kontrolowanie szerokości i wysokości obrazu, można lepiej zarządzać jego wyświetlaniem na różnych urządzeniach.
- Optymalizacja: Precyzyjne określenie rozmiarów obrazów może przyspieszyć ładowanie strony, co jest kluczowe dla użytkowników mobilnych i SEO.
Podsumowanie
Znacznik <img>
wraz z jego atrybutami src
, width
, height
, i alt
stanowi podstawę do osadzania obrazów na stronach internetowych. Zapewniają one nie tylko kontrolę nad wyglądem i rozmiarem obrazów, ale także poprawiają dostępność i optymalizację strony. Prawidłowe stosowanie tych atrybutów jest kluczowe dla tworzenia profesjonalnie wyglądających i funkcjonalnych stron internetowych.