KURS HTML5, CSS3 I NOWOCZESNY JAVASCRIPT (ES6)
Intensywny, 24-godzinny kurs tworzenia nowoczesnych stron i aplikacji internetowych. Uczestnicy poznają aktualne standardy HTML5, stylowanie interfejsów w CSS3 oraz praktyczne zastosowanie JavaScript i ES6. Szkolenie łączy teorię z warsztatami, dzięki czemu każdy moduł kończy się praktycznym projektem lub ćwiczeniami.
Kurs przygotowuje do samodzielnego tworzenia semantycznych stron, interaktywnych komponentów oraz prostych aplikacji webowych działających również w trybie offline.
Moduł 1 — Fundamenty HTML5 i struktura dokumentu (3 godz.)
1. Wprowadzenie do HTML5
- Historia rozwoju języka HTML i powstanie standardu HTML5.
- Różnice między HTML4/XHTML a HTML5.
- Znaczenie standaryzacji i kompatybilności przeglądarek.
2. Struktura dokumentu HTML5
- Poprawna deklaracja
<!DOCTYPE html>. - Budowa dokumentu:
<html>,<head>,<body>. - Meta tagi (charset, viewport, description).
- Podłączanie arkuszy CSS i plików JavaScript.
3. Nowe i stare elementy HTML5
- Przegląd klasycznych znaczników (div, span, p, a, img).
- Wprowadzenie do nowych elementów semantycznych.
- Kiedy stosować elementy blokowe, a kiedy liniowe.
4. Walidacja i interpretacja przez przeglądarki
- Walidacja dokumentu HTML5.
- Różnice w interpretacji kodu przez przeglądarki.
- Wprowadzenie do narzędzi developerskich (DevTools).
Moduł 1 — Szczegółowa lekcja HTML5
1. Wprowadzenie do HTML5
🌐 HTML5 to nowoczesny standard tworzenia stron internetowych. Umożliwia wprowadzenie multimediów, interaktywnych aplikacji oraz semantycznych struktur treści.
HTML od dawna jest językiem używanym do tworzenia stron internetowych. Pierwsze wersje, takie jak HTML4 i XHTML, były prostsze, ale nie zawsze działały tak samo w różnych przeglądarkach. Wprowadzenie HTML5 pozwoliło na dodanie nowych funkcji, takich jak odtwarzanie wideo, dźwięku czy lepsza organizacja treści. Dzięki temu strony wyglądają podobnie w każdej przeglądarce. Standaryzacja oznacza, że wszyscy twórcy i przeglądarki stosują te same zasady, co zmniejsza ryzyko błędów i ułatwia tworzenie nowoczesnych i działających stron.
Przykład dokumentu w HTML4/XHTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Moja strona HTML4</title> </head> <body> <h1>Witaj w HTML4</h1> <p>To jest przykładowy paragraf.</p> </body> </html>
Przykład dokumentu w HTML5:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moja strona HTML5</title>
</head>
<body>
<header><h1>Witaj w HTML5</h1></header>
<main>
<p>To jest przykładowy paragraf.</p>
<video controls>
<source src="film.mp4" type="video/mp4">
Twoja przeglądarka nie obsługuje wideo.
</video>
</main>
</body>
</html>
Witaj w HTML5
To jest przykładowy paragraf z tekstem, który możesz zobaczyć na stronie.
- Punkt 1 – ważna informacja
- Punkt 2 – kolejna informacja
- Punkt 3 – jeszcze jedna informacja
Odwiedź stronę Example aby zobaczyć więcej.
Przykład HTML4 — strona z komentarzami edukacyjnymi
Poniższa strona pokazuje, jak wygląda kod w HTML4. Każdy element został opisany, żeby początkujący mogli zrozumieć ograniczenia starszej wersji HTML.
1. Deklaracja DOCTYPE: W HTML4 była długa i wymagała podania typu dokumentu oraz wersji. W HTML5 DOCTYPE jest znacznie krótszy.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2. Nagłówki i brak semantyki: HTML4 nie miał tagów <header>, <main> czy <footer>. Używano zwykłych <div> i nagłówków <h1>–<h6>.
<h1>Witaj w HTML4</h1>
3. Tekst i listy: Proste paragrafy i listy punktowane działają tak samo jak w HTML5, ale nie można było stosować nowoczesnych elementów semantycznych.
<p>To jest paragraf w HTML4.</p> <ul> <li>Punkt 1 – ważna informacja</li> <li>Punkt 2 – kolejna informacja</li> <li>Punkt 3 – jeszcze jedna informacja</li> </ul>
4. Obrazy i atrybuty: W HTML4 często stosowano atrybuty width i height w tagu <img>. Stylowanie było ograniczone, często inline lub przez tabele.
<img src="obrazek.jpg" alt="Opis obrazka" width="300" height="200">
5. Brak wideo i audio: HTML4 nie obsługiwał multimediów natywnie. Aby pokazać wideo lub audio, trzeba było używać wtyczek typu Flash.
6. Linki: Podobnie jak w HTML5, można tworzyć linki do innych stron. Atrybut target="_blank" otwiera link w nowej karcie.
<p>Odwiedź stronę <a href="https://www.example.com" target="_blank">Example</a>.</p>
7. Stopka: Podobnie jak dziś, można dodać informacje o prawach autorskich.
<p>© 2026 Moja strona HTML4. Wszystkie prawa zastrzeżone.</p>
💡 Podsumowanie dla początkujących:
- HTML4 nie ma semantycznych tagów, wideo i audio wymagają wtyczek.
- DOCTYPE jest dłuższy, meta viewport i responsywność nie istnieją.
- Stylowanie często w atrybutach, a nie w CSS.
- HTML5 wprowadza krótszy DOCTYPE, semantyczne tagi, obsługę multimediów i responsywność.
Quiz: HTML4 vs HTML5 dla początkujących
2. Struktura dokumentu HTML5
📄 Każda strona HTML5 ma trzy główne sekcje: <html>, <head> i <body>.
Deklaracja <!DOCTYPE html> informuje przeglądarkę, że używamy standardu HTML5, co zapewnia poprawne wyświetlanie strony.
W <head> umieszczamy informacje dla przeglądarki i narzędzi, np.:
<meta charset="UTF-8">– ustawia kodowanie znaków (ważne dla polskich liter).<meta name="viewport" content="width=device-width, initial-scale=1.0">– pozwala stronie dobrze wyświetlać się na telefonach i tabletach.<meta name="description" content="Krótki opis strony">– opis strony dla wyszukiwarek.<link rel="stylesheet" href="style.css">– podłącza arkusz CSS.<script src="script.js"></script>– podłącza plik JavaScript.
W <body> dodajemy treść, którą zobaczy użytkownik: nagłówki, paragrafy, obrazy, listy, linki i inne elementy interaktywne.
Każdy element w <body> powinien mieć sens i pomagać w czytelnej strukturze strony.
📌 Przykładowa struktura minimalnej strony HTML5 z komentarzami:
<!DOCTYPE html> <html lang="pl"> <head> <!-- Kodowanie znaków dla polskich liter --> <meta charset="UTF-8"> <!-- Responsywność na urządzenia mobilne --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Tytuł strony wyświetlany w przeglądarce --> <title>>Moja pierwsza strona</title> <!-- Podłączenie arkusza CSS --> <link rel="stylesheet" href="style.css"> </head> <body> <!-- Nagłówek strony --> <h1>>Witaj w HTML5</h1> <!-- Paragraf tekstu --> <p>>To jest przykładowy paragraf w HTML5.</p> <!-- Obrazek --> <img src="obrazek.jpg" alt="Opis obrazka"> <!-- Link do innej strony --> <a href="https://www.example.com" target="_blank">>Odwiedź Example</a> <!-- Podłączenie pliku JavaScript --> <script src="script.js"></script> </body> </html>
✅ W HTML5 struktura strony jest prosta i czytelna, a semantyczne znaczniki (np. <header>, <main>, <footer>) pomagają w tworzeniu logicznych sekcji strony.
Ćwiczenie praktyczne – Tworzymy własną stronę HTML5
Cel: utwórz plik index.html z deklaracją <!DOCTYPE html>, nagłówkiem w <body> i podłączonymi plikami CSS i JS. Po wprowadzeniu kodu sprawdzimy, czy wszystko działa poprawnie.
3. Nowe i stare elementy HTML5
🧩 HTML5 łączy znane znaczniki (div, span, p, a, img) z nowymi elementami semantycznymi (header, footer, section, article, aside, nav), które ułatwiają organizację strony oraz poprawiają jej dostępność.
Dlaczego semantyka jest ważna? Poprawne użycie nowych elementów HTML5 pozwala przeglądarkom, robotom wyszukiwarek i czytnikom ekranowym lepiej zrozumieć strukturę strony. Dzięki temu witryna staje się bardziej przyjazna użytkownikom i SEO-friendly.
Przykłady nowych elementów:
<header>– nagłówek strony lub sekcji, np. logo, menu.<footer>– stopka strony, zawierająca informacje kontaktowe lub prawa autorskie.<section>– logiczna sekcja treści, np. „O nas”, „Kontakt”.<article>– samodzielna treść, np. wpis blogowy, news.<aside>– treść poboczna, np. dodatkowe informacje, reklamy, linki.<nav>– nawigacja po stronie.
Scenka praktyczna: tworzysz bloga. Nagłówek w header, posty w article, sekcje boczne w aside, stopka w footer. Dzięki temu każdy element ma swoją rolę, a struktura jest czytelna zarówno dla przeglądarek, jak i czytników ekranowych.
Po ukończeniu ćwiczenia zobaczysz, że kod HTML5 jest bardziej przejrzysty i semantyczny w porównaniu do starego HTML z użyciem wyłącznie div i span.
4. Walidacja i interpretacja przez przeglądarki
✅ Walidacja sprawdza, czy Twój kod HTML jest poprawny i zgodny ze standardami HTML5. Oznacza to, że narzędzia walidujące analizują Twój dokument, aby wykryć błędy w składni lub niepoprawne użycie znaczników. Dzięki temu przeglądarki lepiej interpretują stronę, a Twoja strona działa prawidłowo u większości użytkowników.
Tłumaczenie dla początkujących: Walidacja to jak sprawdzanie pracy domowej – upewniamy się, że wszystkie tagi są poprawnie otwarte i zamknięte, a znaczniki użyte w odpowiednim miejscu. Jeśli kod jest niepoprawny, przeglądarka może wyświetlić stronę w nieoczekiwany sposób.
🌐 Różne przeglądarki mogą interpretować HTML nieco inaczej. Nawet jeśli kod jest poprawny, wygląd strony w Chrome, Firefox czy Edge może się minimalnie różnić. Dlatego warto testować stronę w kilku przeglądarkach.
🔧 DevTools (narzędzia developerskie dostępne w przeglądarkach) pozwalają:
- Podglądać strukturę HTML w czasie rzeczywistym
- Sprawdzać błędy w konsoli JavaScript i CSS
- Testować style, zmieniać je na żywo i obserwować efekty
- Symulować różne rozdzielczości ekranu i urządzenia mobilne
Scenka praktyczna: otwórz swoją stronę w przeglądarce, wciśnij F12 lub kliknij prawym przyciskiem → "Zbadaj", aby otworzyć DevTools. Spróbuj zmienić kolor nagłówka w zakładce Elements i obserwuj efekt w czasie rzeczywistym. To ćwiczenie pomoże Ci lepiej zrozumieć, jak przeglądarka interpretuje Twój kod.
💡 Pamiętaj: walidacja i testowanie w przeglądarkach to klucz do tworzenia stron działających poprawnie i przyjaznych dla użytkowników.
Podsumowanie 📌
Moduł 1 uczy podstaw HTML5: od wprowadzenia, przez strukturę dokumentu, stare i nowe znaczniki, aż po walidację i praktyczne ćwiczenia. Po ukończeniu tego modułu uczestnik potrafi samodzielnie stworzyć prostą, poprawną stronę HTML5 i zrozumie, jak przeglądarki interpretują kod.