Obrazki

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>

  1. 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.
  2. width i height: 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.
  3. alt (alternative text): Atrybut alt 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.

Poprzedni
Następny
Scroll to Top