Multimedia i Ścieżki w HTML

Czysty tekst bywa nudny. Na niemal każdym arkuszu INF.03 będziesz musiał podpiąć grafikę (np. baner), a często także plik dźwiękowy lub wideo.

Obrazy - Tag <img>

Element, który nie posiada zamknięcia.

<img src="obrazek.jpg" alt="Zdjęcie uśmiechniętego kota">

• src (source) – ścieżka do pliku graficznego.
• alt (alternative text) – tekst alternatywny. Niezwykle ważny na egzaminie. Jeśli obrazek się nie wczyta (np. zrobisz literówkę w ścieżce), użytkownik zobaczy ten tekst. Używają go także czytniki ekranowe. Brak alt to darmowy punkt uciekający w dół.

Dźwięk i Wideo

HTML5 wprowadził dedykowane tagi, dzięki którym nie trzeba instalować Flasha (tak, kiedyś to była gehenna!).

<audio src="muzyka.mp3" controls></audio>

<video src="film.mp4" controls width="600" height="400"></video>

Atrybut controls jest obowiązkowy, jeśli chcesz, żeby na stronie pojawił się odtwarzacz (przycisk Play, pauza, suwak głośności). Bez niego plik załaduje się w tle, ale nie będzie widoczny!

Ciekawostka: Przeglądarki blokują automatyczne odtwarzanie (tzw. autoplay) wideo z dźwiękiem, by nie straszyć użytkowników wchodzących na stronę. Jeśli dodasz atrybut autoplay, musisz dodać też atrybut muted (wyciszony), inaczej przeglądarka zignoruje polecenie uruchomienia.

Ścieżki: Względne vs Bezwzględne

Prawidłowe wskazanie pliku (src lub href) to najczęstszy powód, przez który uczeń widzi puste okienko zamiast obrazka.

1. Ścieżka bezwzględna (Absolutna) Podajesz dokładny adres WWW do zasobu. Przydaje się, gdy linkujesz na zewnętrzną stronę. src="https://google.com/logo.png"

2. Ścieżka względna (Relative) - Króluje na egzaminie. Określa położenie pliku względem tego, w którym aktualnie piszesz kod.

• src="pies.jpg" – Plik obrazka jest w tym samym folderze co Twój plik HTML.
• src="grafiki/pies.jpg" – Obrazek jest w podfolderze grafiki.
• src="../pies.jpg" – Obrazek jest w folderze wyżej. Te dwie kropki ../ to polecenie dla przeglądarki: "wyjdź jeden folder w górę".

Pułapka CKE 🪤: Czasem na egzaminie w folderze roboczym dostaniesz strukturę:

• index.html
• podstrony/galeria.html
• img/fotka.png

Jeśli piszesz w pliku galeria.html i chcesz załadować fotkę, ścieżka src="img/fotka.png" nie zadziała! Jesteś w folderze podstrony. Musisz najpierw z niego wyjść za pomocą dwóch kropek, a potem wejść do img. Prawidłowa ścieżka to src="../img/fotka.png". Zrozumienie kropek ratuje życie na Egzaminie!