HTML to język wykorzystywany do tworzenia stron internetowych, który umożliwia integrację różnych typów treści, w tym obrazów i multimediów. W tej lekcji omówimy, jak wstawiać obrazy, jak ustawiać multimedia, takie jak audio i wideo, oraz jak dostosowywać te elementy, aby były responsywne i dostępne.
Obrazy w HTML
Obrazy to kluczowy element wizualny stron internetowych. Aby wstawić obraz na stronę, używamy znacznika <img>. Ten znacznik jest pusty, co oznacza, że nie ma zamykającego znacznika. Wszystkie informacje na temat obrazu są umieszczane w atrybutach.
Najważniejsze atrybuty <img> to:
src– ścieżka do pliku obrazu.alt– tekst alternatywny, który wyświetla się, jeśli obraz nie może zostać załadowany. Jest także istotny dla dostępności (użytkownicy korzystający z czytników ekranu).widthiheight– pozwalają określić rozmiar obrazu.
Przykład: Znacznik img
Multimedia w HTML: Audio i Wideo
HTML5 wprowadził natywną obsługę multimediów, takich jak dźwięk i wideo. Dzięki temu można bezpośrednio osadzać na stronie pliki audio i wideo bez potrzeby korzystania z wtyczek.
Dodawanie dźwięku: Znacznik <audio>
Aby dodać plik dźwiękowy, używamy znacznika <audio>. Ma on atrybuty:
controls– dodaje interfejs odtwarzacza (play, pause itp.).src– ścieżka do pliku dźwiękowego.autoplay,loop– opcjonalne atrybuty automatycznego odtwarzania lub pętli.
Przykład: Znacznik audio
Dodawanie wideo: Znacznik <video>
Znacznik <video> umożliwia dodawanie plików wideo na stronę. Najważniejsze atrybuty to:
controls– pokazuje kontrolki do odtwarzania.width,height– określają wymiary wideo.autoplay,loop,muted– automatyczne odtwarzanie, zapętlanie, wyciszenie.
Przykład: Znacznik video
Responsywne obrazy i multimedia
Responsywne obrazy to takie, które dostosowują się do różnych rozmiarów ekranu. Możemy je osiągnąć dzięki procentowym wartościom w atrybutach width i height lub poprzez użycie CSS.
Atrybut srcset w znaczniki <source> pozwala na dostarczenie wielu wersji obrazów w zależności od rozdzielczości ekranu.
Przykład: Znacznik picture
Ćwiczenia praktyczne
Ćwiczenie 1: Wstawianie obrazu
Stwórz dokument HTML, w którym dodasz obraz. Użyj znacznika <img> i określ ścieżkę do pliku, a także ustaw atrybuty alt, width i height. Zadbaj o to, by obraz wyświetlał się poprawnie.
Ćwiczenie 2: Dodawanie pliku audio
W tym ćwiczeniu stwórz stronę, która odtwarza plik audio w pętli. Użyj znacznika <audio> z atrybutem controls. Dodaj plik dźwiękowy, który będzie odtwarzany na stronie.
Ćwiczenie 3: Responsywne obrazy
Utwórz stronę, na której wyświetlisz obraz w wersji responsywnej. Użyj atrybutu srcset, aby strona mogła dostosować rozmiar obrazu w zależności od rozdzielczości ekranu.
Ćwiczenie 4: Dodawanie pliku wideo
Dodaj wideo do dokumentu HTML. Skonfiguruj atrybuty controls, autoplay, a także ustaw wymiary wideo. Upewnij się, że wideo odtwarza się prawidłowo na stronie.