Strona e-learningowa jest zgodna ze standardami WCAG 2.1 na poziomie AA, zapewniając dostępność dla wszystkich użytkowników.

Moduł II – Architektura HTML5 i semantyka (3 godz.)
Kurs HTML5, CSS3 i JavaScript – Zespół Szkół w Sokołowie Małopolskim

Uczestnicy poznają **nowe tagi HTML5** (section, article, nav, aside, header, footer), nauczą się formatować strukturę za pomocą **CSS3**, łączyć HTML z CSS i JavaScript oraz zbudują **prostą aplikację opartą na strukturze HTML5**.

Moduł 1 HTML5 – Fundamenty

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ł 2 — Architektura HTML5 i semantyka (3 godz.)

1. Nowe tagi semantyczne HTML5

  • Omówienie znaczenia tagów: section, article, nav, aside, header, footer.
  • Poprawne stosowanie semantyki w strukturze strony.
  • Korzyści dla SEO i dostępności (Accessibility).

2. Formatowanie struktury przy użyciu CSS3

  • Łączenie stylów CSS3 z elementami HTML5.
  • Użycie flexbox i grid do układu semantycznych sekcji.
  • Kolory, marginesy, paddingi i responsywność.

3. Integracja HTML5 z JavaScript

  • Podstawowe manipulacje DOM w strukturze HTML5.
  • Dodawanie interaktywności do semantycznych sekcji.
  • Przykłady dynamicznej zmiany treści w article i aside.

4. Budowa prostej aplikacji opartej na HTML5

  • Planowanie struktury dokumentu i sekcji semantycznych.
  • Tworzenie interfejsu z nagłówkiem, nawigacją, treścią i stopką.
  • Łączenie HTML, CSS i prostego JavaScriptu w praktyce.

Moduł 2 — Szczegółowa lekcja HTML5

1. Nowe tagi semantyczne HTML5

🌐 HTML5 wprowadza znaczniki semantyczne, które pozwalają lepiej zorganizować stronę. Semantyka oznacza, że kod HTML nie jest tylko wizualnym układem, ale też informacją dla przeglądarek i wyszukiwarek, co oznacza każdy element strony.

Oto główne nowe tagi semantyczne i ich zastosowanie:

  • <header> – nagłówek strony lub sekcji, zwykle zawiera tytuł, logo, menu główne.
  • <footer> – stopka strony lub sekcji, zawiera informacje o prawach autorskich, linki kontaktowe lub dodatkowe menu.
  • <nav> – sekcja nawigacyjna, czyli menu strony z odnośnikami do innych podstron.
  • <section> – wydzielona część strony o spójnej tematyce, np. sekcja „Aktualności” lub „O nas”.
  • <article> – samodzielna jednostka treści, np. wpis na blogu, artykuł, news.
  • <aside> – treść dodatkowa, poboczna, np. panel boczny, reklama, cytat lub linki powiązane.
Przykład użycia semantycznych tagów HTML5:
<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Strona z semantycznymi tagami</title>
</head>
<body>

  <header>
    <h1>Moja strona HTML5</h1>
    <nav>
      <ul>
        <li><a href="#">Strona główna</a></li>
        <li><a href="#">O nas</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <h2>Aktualności</h2>
      <article>
        <h3>Nowy kurs HTML5</h3>
        <p>Rozpoczynamy kurs HTML5 dla początkujących. Dowiesz się, jak używać semantycznych tagów.</p>
      </article>
      <article>
        <h3>Aktualizacja strony</h3>
        <p>Strona została zaktualizowana o nowe przykłady kodu i ćwiczenia.</p>
      </article>
    </section>

    <aside>
      <h4>Polecane linki</h4>
      <ul>
        <li><a href="#">Dokumentacja HTML5</a></li>
        <li><a href="#">CSS3 tutorial</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>© 2026 Moja strona HTML5. Wszystkie prawa zastrzeżone.</p>
  </footer>

</body>
</html>

💡 Wskazówki dla początkujących:
- Używaj <header> i <footer> raz na stronie głównej, ale możesz też powtarzać je w sekcjach.
- <section> grupuje tematycznie treść, <article> to pojedynczy element informacji.
- <aside> nigdy nie powinno zawierać najważniejszej treści strony – jest uzupełnieniem.
- <nav> pomaga użytkownikowi i robotom wyszukiwarek zrozumieć strukturę nawigacyjną strony.
- Semantyka poprawia dostępność strony dla czytników ekranowych i SEO.

2. Formatowanie struktury przy użyciu CSS3

🎨 CSS3 pozwala wizualnie uporządkować semantyczne sekcje HTML5. Dzięki nowoczesnym technikom, takim jak Flexbox i Grid, możemy tworzyć responsywne układy, w których nagłówki, sekcje, artykuły i stopki mają logiczne miejsce, a strona wygląda estetycznie na różnych urządzeniach.

Ważne aspekty formatowania CSS3 dla semantycznej strony:

  • Kolory i typografia: nadajemy barwy nagłówkom, sekcjom i stopce, stosujemy czytelne fonty i rozmiary tekstu.
  • Marginesy i paddingi: kontrolują odstępy między elementami i wewnątrz nich, co poprawia czytelność.
  • Flexbox: pozwala łatwo układać elementy w rzędzie lub kolumnie, a także wyrównywać je do środka lub po bokach.
  • Grid: umożliwia tworzenie bardziej złożonych układów siatki, dzieląc stronę na wiersze i kolumny.
  • Responsywność: media queries pozwalają dostosować wygląd strony do różnych rozdzielczości ekranu (telefony, tablety, komputery).
Przykład prostego układu strony z Flexbox:
<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Układ Flexbox</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    header, footer {
      background-color: #0ea5a3; /* kolor nagłówka i stopki */
      color: white;
      padding: 20px;
      text-align: center;
    }
    main {
      display: flex; /* Flexbox dla głównej treści */
      flex-wrap: wrap; /* pozwala elementom zawijać się w mniejszych ekranach */
      gap: 20px; /* odstęp między elementami */
      padding: 20px;
    }
    section {
      flex: 2; /* większa część głównej treści */
      background-color: #ecfeff;
      padding: 15px;
    }
    aside {
      flex: 1; /* panel boczny */
      background-color: #fef3c7;
      padding: 15px;
    }
  </style>
</head>
<body>

  <header>
    <h1>Moja strona HTML5 z Flexbox</h1>
  </header>

  <main>
    <section>
      <h2>Sekcja główna</h2>
      <p>Tutaj znajduje się najważniejsza treść strony.</p>
    </section>
    <aside>
      <h3>Panel boczny</h3>
      <p>Tutaj można umieścić dodatkowe informacje lub linki.</p>
    </aside>
  </main>

  <footer>
    <p>© 2026 Moja strona HTML5. Wszystkie prawa zastrzeżone.</p>
  </footer>

</body>
</html>
Przykład prostego układu strony z CSS Grid:
<style>
  .grid-container {
    display: grid;
    grid-template-areas:
      "header header"
      "nav main"
      "footer footer";
    grid-gap: 10px;
    padding: 10px;
  }
  header { grid-area: header; background: #0ea5a3; color: white; padding: 20px; text-align: center; }
  nav { grid-area: nav; background: #fef3c7; padding: 15px; }
  main { grid-area: main; background: #ecfeff; padding: 15px; }
  footer { grid-area: footer; background: #0ea5a3; color: white; padding: 20px; text-align: center; }
</style>

<div class="grid-container">
  <header>Nagłówek</header>
  <nav>Menu</nav>
  <main>Główna treść</main>
  <footer>Stopka</footer>
</div>

💡 Wskazówki dla początkujących:
- Flexbox najlepiej używać do układu w jednym wymiarze (rzędy lub kolumny).
- Grid sprawdza się przy bardziej złożonych siatkach dwuwymiarowych.
- Dodając gap, padding i margin, utrzymujesz estetyczny odstęp między sekcjami.
- Testuj responsywność przy różnych szerokościach okna przeglądarki.
- Kolory i kontrasty pomagają odróżnić sekcje wizualnie, co jest ważne dla użytkowników i początkujących programistów.

3. Integracja HTML5 z JavaScript

⚡ JavaScript pozwala na interakcję z elementami HTML5. Dzięki niemu możesz dynamicznie zmieniać zawartość sekcji <article> lub paneli <aside>, reagować na kliknięcia w menu <nav> i wprowadzać prostą logikę aplikacji w strukturze semantycznej.

Integracja HTML5 z JavaScript jest kluczowa, ponieważ HTML definiuje strukturę, CSS odpowiada za wygląd, a JavaScript – za interaktywność strony.

  • Manipulacja treścią: zmieniamy tekst w artykułach lub panelach bocznych bez przeładowania strony.
  • Obsługa zdarzeń: reagujemy na kliknięcia, najechania myszką, przesunięcia czy wciśnięcia klawiszy.
  • Dynamiczne style: możemy dodawać lub usuwać klasy CSS, zmieniać kolory i układ w locie.
  • Prosta logika aplikacji: np. rozwijanie menu, pokazywanie/ukrywanie sekcji, filtrowanie treści.
Przykład: zmiana treści artykułu po kliknięciu przycisku
<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML5 + JavaScript</title>
  <style>
    body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
    header, footer { background-color: #0ea5a3; color: white; padding: 20px; text-align: center; }
    main { padding: 20px; }
    article { background-color: #ecfeff; padding: 15px; margin-bottom: 10px; }
    aside { background-color: #fef3c7; padding: 15px; margin-bottom: 10px; }
    button { padding: 8px 12px; cursor: pointer; background-color: #0ea5a3; color: white; border: none; border-radius: 5px; }
  </style>
</head>
<body>

  <header>
    <h1>Moja strona HTML5 z JavaScript</h1>
  </header>

  <main>
    <article id="mainArticle">
      <h2>Artykuł 1</h2>
      <p>Kliknij przycisk, aby zmienić zawartość artykułu.</p>
    </article>

    <aside id="sidePanel">
      <h3>Panel boczny</h3>
      <p>Tu pojawi się dodatkowa informacja po kliknięciu przycisku.</p>
    </aside>

    <button id="changeContentBtn">Zmień treść</button>
  </main>

  <footer>
    <p>© 2026 Moja strona HTML5. Wszystkie prawa zastrzeżone.</p>
  </footer>

  <script>
    // Pobieramy przycisk z DOM
    const button = document.getElementById('changeContentBtn');

    // Pobieramy elementy, które chcemy zmienić
    const article = document.getElementById('mainArticle');
    const aside = document.getElementById('sidePanel');

    // Funkcja zmieniająca treść
    button.addEventListener('click', () => {
      article.innerHTML = '<h2>Artykuł 1 (zaktualizowany)</h2><p>Treść artykułu została zmieniona dynamicznie dzięki JavaScript.</p>';
      aside.innerHTML = '<h3>Panel boczny (zaktualizowany)</h3><p>Dodatkowa informacja pojawiła się po kliknięciu przycisku.</p>';
    });
  </script>

</body>
</html>

💡 Wskazówki dla początkujących:
- Zawsze pobieraj elementy z DOM za pomocą getElementById lub querySelector.
- Funkcje wywoływane przez zdarzenia (np. click) mogą modyfikować dowolne elementy strony.
- Możesz zmieniać nie tylko treść (innerHTML), ale też style (style.backgroundColor) czy klasy CSS (classList.add/remove).
- Testuj działanie na różnych sekcjach: article, aside, header, footer.
- To podstawowa baza dla tworzenia prostych interaktywnych aplikacji HTML5.

4. Budowa prostej aplikacji opartej na HTML5

Poniżej znajduje się przykładowy kod strony HTML5. Każdy fragment posiada komentarze wyjaśniające jego funkcję.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Prosta aplikacja HTML5</title>

  <!-- Prosty CSS do stylizacji strony -->
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: 'Inter', sans-serif;
      background-color: #f8fafc;
      color: #1e293b;
      padding: 20px;
    }

    header {
      background-color: #0ea5a3;
      color: white;
      padding: 20px;
      text-align: center;
      border-radius: 10px 10px 0 0;
    }

    nav {
      background-color: #fef3c7;
      padding: 10px;
      display: flex;
      justify-content: center;
      gap: 15px;
      border-bottom: 1px solid #eef2f7;
    }

    nav a {
      text-decoration: none;
      color: #92400e;
      font-weight: bold;
    }

    main {
      background-color: white;
      padding: 20px;
      margin-top: 10px;
      border-radius: 0 0 10px 10px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    section {
      margin-bottom: 20px;
    }

    footer {
      text-align: center;
      margin-top: 20px;
      color: #64748b;
      font-size: 0.9em;
    }

    button {
      background-color: #0ea5a3;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 1em;
    }

    button:hover {
      background-color: #08999b;
    }
  </style>
</head>
<body>

  <!-- Nagłówek strony -->
  <header>
    <h1>Moja pierwsza aplikacja HTML5</h1>
  </header>

  <!-- Nawigacja -->
  <nav>
    <a href="#home">Strona główna</a>
    <a href="#about">O mnie</a>
    <a href="#contact">Kontakt</a>
  </nav>

  <!-- Główna treść -->
  <main>

    <!-- Sekcja Strona główna -->
    <section id="home">
      <h2>Strona główna</h2>
      <p>Planowanie struktury dokumentu: nagłówek, nawigacja, treść i stopka.</p>
    </section>

    <!-- Sekcja O mnie -->
    <section id="about">
      <h2>O mnie</h2>
      <p>Tworzymy interfejs użytkownika, dodając sekcje i treść w semantycznych znacznikach HTML5.</p>
    </section>

    <!-- Sekcja Kontakt z prostym przyciskiem -->
    <section id="contact">
      <h2>Kontakt</h2>
      <p>Łączenie HTML, CSS i prostego JavaScriptu. Kliknij przycisk, aby zobaczyć powitanie:</p>
      <button onclick="sayHello()">Powitanie</button>
      <p id="greeting" style="margin-top:10px; color:#0ea5a3; font-weight:bold;"></p>
    </section>

  </main>

  <!-- Stopka -->
  <footer>
    © 2026 Moja aplikacja HTML5. Wszelkie prawa zastrzeżone.
  </footer>

  <!-- Prosty JavaScript -->
  <script>
    // Funkcja wyświetlająca powitanie po kliknięciu przycisku
    function sayHello() {
      document.getElementById('greeting').textContent = 'Cześć! Miło Cię widzieć na stronie!';
    }
  </script>

</body>
</html>

Ćwiczenia praktyczne:

  • Dodaj własną sekcję, np. portfolio lub galerię zdjęć.
  • Zmień kolory nagłówka, stopki i przycisku.
  • Dodaj kolejne przyciski z prostymi interakcjami w JavaScript.

Po ukończeniu tego modułu uczestnicy będą w stanie tworzyć strony i proste aplikacje w HTML5 z prawidłową semantyką, stosować CSS3 do layoutu i integrować elementy HTML z JavaScript.