HTML • Grafika i Multimedia

Plan ćwiczeń

Na tej stronie testujemy różne sposoby włączania grafiki i multimediów do dokumentu HTML. Każde zadanie ma krótki opis, efekt do uzyskania oraz kod, który możesz modyfikować.

obrazy statyczne i tło sekcji;
mapa obrazu z różnymi kształtami obszarów;
grafika wektorowa w SVG;
rysowanie i zmiana koloru obiektów w canvas;
osadzanie dźwięku i wideo za pomocą znaczników HTML5.

Poziom: 3–4 klasa technikum (TI)

Zakres: grafika + multimedia

1. Grafika statyczna w dokumentach HTML

Cel: powtórzyć różnice między obrazem w tle a obrazem w treści dokumentu.

W tle sekcji używamy obrazka tła przez CSS, a poniżej klasycznego znacznika <img>. Spróbuj podmienić plik źródłowy oraz tekst w atrybutach alt i title.

Zwróć uwagę: tło sekcji nie ma własnego opisu, a obraz w treści musi mieć opisowy alt ze względów dostępności i SEO.

2. Mapa obrazu — różne kształty obszarów

Cel: zdefiniować klikalne obszary na jednym obrazku (rect, circle, poly).

Poniżej jeden obraz, ale trzy różne obszary klikalne: prostokąt, koło i wielokąt. Każdy obszar prowadzi na tę samą stronę, ale w praktyce możesz kierować do różnych podstron.

Współrzędne w atrybucie coords zależą od rozmiaru obrazka i są liczone w pikselach od lewego górnego rogu. Zadanie: zmień rozmiar obrazu i dostosuj współrzędne, aby obszary dalej „trafiały” w odpowiednie miejsca.

3. Grafika SVG — proste kształty wektorowe

Cel: narysować podstawowe kształty wektorowe i zrozumieć różnicę między SVG a klasycznym obrazem.

SVG opisuje obraz za pomocą prostych obiektów (prostokąty, okręgi, linie) i atrybutów, a grafika jest skalowalna bez utraty jakości. Spróbuj zmienić kolory, rozmiary i położenie figur, a także dodać tekst SVG.

4. Canvas — rysowanie i zmiana koloru

Cel: użyć kontekstu 2D, aby narysować kilka kształtów i zmieniać ich kolor przyciskiem.

Canvas udostępnia „płótno”, na którym rysujemy w JavaScript — w tym przykładzie prostokąt, koło i linię. Kolor wszystkich figur możesz zmieniać, klikając przyciski poniżej.

5. Multimedia HTML5 — audio i wideo

Cel: osadzić dźwięk i wideo za pomocą znaczników <audio> i <video>.

Znaczniki <audio> i <video> pozwalają na odtwarzanie multimediów bez dodatkowych wtyczek. Atrybut controls dodaje natywne przyciski sterujące, a loop powoduje odtwarzanie w pętli.

Odtwarzanie audio

Odtwarzanie wideo

W praktyce warto dodać też napis (znacznik <track>) lub link do transkrypcji, aby multimedia były dostępne dla wszystkich użytkowników.