W poprzednich artykułach eksplorowaliśmy podstawy HTML, formatowanie tekstu i dodawanie linków. Teraz nadszedł czas, aby dowiedzieć się, jak wzbogacić nasze strony internetowe poprzez dodawanie obrazów i multimediów. Oto kilka kluczowych elementów, które poznasz.
Dodawanie Obrazów
Tag <img> jest używany do umieszczania obrazów na stronie. Atrybut src określa źródło obrazu, czyli jego adres URL.
<img src="obraz.jpg" alt="Opis obrazu">Aby zwiększyć dostępność strony, zawsze używaj atrybutu alt, dostarczając krótki opis obrazu.
Dodawanie Wideo
HTML5 wprowadził tag <video>, który umożliwia łatwe dodawanie plików wideo. Atrybut src wskazuje na źródło pliku wideo.
<video width="640" height="360" controls>
<source src="film.mp4" type="video/mp4">
Twoja przeglądarka nie obsługuje odtwarzacza wideo.
</video>Dodawanie Dźwięku
Podobnie jak w przypadku wideo, tag <audio> umożliwia dodawanie plików dźwiękowych. Użyj atrybutu src, aby wskazać źródło dźwięku.
<audio controls>
<source src="muzyka.mp3" type="audio/mp3">
Twoja przeglądarka nie obsługuje odtwarzacza audio.
</audio>Mapy Obrazów
Tag <map> pozwala na tworzenie interaktywnych map obrazów. Współpracuje z tagiem <area>, który definiuje obszary klikalne na obrazie.
<img src="plan.png" alt="Plan budynku" usemap="#plan">
<map name="plan">
<area shape="rect" coords="0,0,100,100" href="pokoj1.html" alt="Pokój 1">
<area shape="rect" coords="100,100,200,200" href="pokoj2.html" alt="Pokój 2">
<!-- Dodaj więcej obszarów według potrzeb -->
</map>Galerie Obrazów
Tag <figure> pozwala na grupowanie obrazów i dodawanie do nich podpisów za pomocą tagu <figcaption>.
<figure>
<img src="zdjecie1.jpg" alt="Opis zdjęcia 1">
<figcaption>Zdjęcie 1</figcaption>
</figure>
<figure>
<img src="zdjecie2.jpg" alt="Opis zdjęcia 2">
<figcaption>Zdjęcie 2</figcaption>
</figure>Zastosowanie tych elementów wzbogaci Twoje strony o atrakcyjne treści wizualne. W kolejnych artykułach będziemy zgłębiać więcej zaawansowanych aspektów tworzenia stron internetowych, więc bądź gotowy na kolejne odkrycia!
