Przejdź do treści

Scenariusz lekcji informatyki dla branżowej szkoły I stopnia

Scenariusz lekcji informatyki dla branżowej szkoły I stopnia: tworzenie stron internetowych w HTML, CSS i JavaScript z akapitami, obrazkami, odsyłaczami i interakcjami, zgodnie z podstawą programową.

Wstęp

Poniżej znajdziesz scenariusz cyklu lekcji oparty na podstawie programowej dla branżowej szkoły I stopnia z zakresu informatyki oraz materiałach ze strony Kurs HTML i CSS. Lekcje zostały rozplanowane na 5 spotkań po 45 minut, z pracą domową i elementami pracy własnej uczniów.

Cel ogólny cyklu lekcji

Uczeń projektuje i tworzy prostą stronę internetową z wykorzystaniem szablonów, stylów CSS oraz elementów programowania, przygotowując ją do pokazania i prezentacji.

Wymagania podstawy programowej

Uczeń:

  • projektuje i tworzy stronę internetową, posługując się stylami, szablonami i elementami programowania;
  • opanuje podstawowe zasady HTML, CSS i JavaScript, tworząc interaktywne i estetyczne strony internetowe;
  • samodzielnie realizuje projekt strony internetowej, uwzględniając strukturę, treści i elementy wizualne.

Lekcja 1 - Struktura HTML i pierwsza strona

Czas trwania: 45 minut

Cele szczegółowe

  • Uczeń poznaje strukturę dokumentu HTML5.
  • Tworzy prostą stronę zawierającą tytuł, nagłówki i akapity.

Materiały

Przebieg

  1. 10 min - Wprowadzenie do HTML
  2. 10 min - Praca z edytorem
    • Uczniowie otwierają edytor HTML i tworzą nowy dokument.
    • Dodają tytuł i nagłówek.
  3. 15 min - Ćwiczenie praktyczne
    • Uczniowie dodają akapity tekstu i zapisują plik HTML.
    • Otwierają stronę w przeglądarce.
  4. 10 min - Omówienie efektów pracy i błędów

Lekcja 2 - Dodawanie obrazków i linków

Czas trwania: 45 minut

Cele szczegółowe

  • Uczeń wstawia obrazki do strony.
  • Uczeń tworzy odsyłacze do innych stron.

Materiały

Przebieg

  1. 10 min - Wprowadzenie do znaczników <img> i <a>
    • Wyjaśnienie atrybutów: src="...", alt="...", href="...", target="_blank" (nowe okno).
  2. 20 min - Praca praktyczna
  3. 10 min - Analiza błędów i zapisanie pracy
  4. 5 min - Zadanie domowe: dodać więcej obrazków i linków.

Lekcja 3 - Formatowanie strony i style CSS

Czas trwania: 45 minut

Cele szczegółowe

  • Uczeń rozumie podstawy CSS.
  • Uczeń dodaje style do elementów HTML.

Materiały

Przebieg

  1. 10 min - Omówienie zasad działania CSS
  2. 20 min - Praca z arkuszem stylów
  3. 10 min - Sprawdzenie efektów działania stylów
  4. 5 min - Zadanie domowe: zmodyfikować kolory i wyrównanie na stronie.

Lekcja 4 - Tworzenie strony za pomocą szablonu

Czas trwania: 45 minut

Cele szczegółowe

  • Uczeń korzysta z gotowego szablonu HTML.
  • Uczeń wypełnia szablon własną treścią i obrazkami.

Materiały

Przebieg

  1. 10 min - Prezentacja działania gotowych szablonów
  2. 15 min - Wybór i pobranie szablonu
    • Uczniowie wybierają szablon z generatora lub pobierają darmowy szablon WWW.
    • Otwierają go w edytorze i analizują strukturę.
  3. 15 min - Modyfikacja szablonu
    • Dodanie własnego tekstu, obrazków, linków.
  4. 5 min - Zadanie domowe: dokończyć wypełnianie szablonu własnymi treściami.

Lekcja 5 - Elementy programowania: proste skrypty JavaScript

Czas trwania: 45 minut

Cele szczegółowe

  • Uczeń rozumie podstawy składni JavaScript i jego zastosowanie w HTML.
  • Uczeń dodaje prostą interaktywność do formularzy na stronie.

Materiały

Przebieg

  1. 15 min - Wprowadzenie do JavaScript
  2. 15 min - Sprawdzanie poprawności formularza
    • Omówienie celu i zasady działania instrukcji for (pętla) oraz if (warunek logiczny) w języku JavaScript.
    • Uczniowie wklejają i analizują kod skryptu sprawdzenia pól formularza.
  3. 5 min - Potwierdzenie wyczyszczenia formularza
  4. 5 min - Dynamiczne blokowanie pola formularza
  5. 5 min - Podsumowanie i pytania uczniów

Zadanie końcowe / projekt

Uczniowie indywidualnie lub w parach przygotowują własną stronę internetową na wybrany przez siebie temat (np. hobby, sport, gry komputerowe, poradnik). Strona powinna zawierać:

  • poprawną strukturę HTML5,
  • co najmniej 2 podstrony połączone odsyłaczami,
  • nagłówki, akapity,
  • stylowanie za pomocą CSS (kolory, tło, czcionki),
  • prostą interakcję JavaScript (np. sprawdzanie formularza, potwierdzenie operacji),

Podsumowanie

Cykl lekcji spełnia wymagania podstawy programowej dla branżowej szkoły I stopnia w zakresie opracowywania informacji za pomocą komputera:

  • Uczniowie projektują i tworzą stronę internetową na wybrany temat.
  • Wykorzystują strukturę HTML5 oraz formatowanie za pomocą CSS i szablonów.
  • Stosują elementy programowania z użyciem prostych skryptów JavaScript (np. walidacja formularzy, interakcje).
  • Ćwiczą samodzielne opracowywanie i prezentowanie treści w atrakcyjnej formie wizualnej.
  • Rozwijają umiejętność logicznego myślenia i analizowania działania kodu.
Facebook