Przejdź do treści

Scenariusz lekcji informatyki dla liceum i technikum

Scenariusz lekcji informatyki dla liceum i technikum: projektowanie stron internetowych zgodnych ze standardami HTML i CSS, z tabelami, listami, elementami dynamicznymi i publikacją online, zgodnie z podstawą programową.

Wstęp

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

Cel ogólny cyklu lekcji

Uczeń przygotowuje i publikuje prostą, ale kompletną stronę internetową zgodnie ze standardami W3C, zawierającą tekst, grafikę, tabele, listy, style CSS i elementy dynamiczne (np. zmiany koloru, prosty hover, interaktywność).

Wymagania podstawy programowej

Uczeń:

  • przygotowuje opracowania rozwiązań problemów, posługując się wybranymi aplikacjami;
  • tworzy stronę internetową zgodnie ze standardami, wzbogaconą tabelami, listami, elementami dynamicznymi;
  • posługuje się arkuszem stylów;
  • potrafi opublikować własną stronę w internecie.

Lekcja 1 - Struktura dokumentu HTML, podstawowe znaczniki

Czas trwania: 45 minut

Cele szczegółowe

  • Uczeń zna strukturę dokumentu HTML5.
  • Tworzy pierwszy dokument HTML zawierający nagłówki, tekst i odsyłacze.
  • Zapisuje i otwiera pliki HTML w przeglądarce.

Materiały

Przebieg

  1. 5 min - Wprowadzenie do tematu i celów lekcji
    • Wyjaśnienie czym jest HTML, dlaczego jest kluczowy w tworzeniu stron internetowych, oraz jakie są jego podstawowe elementy.
    • Krótkie wprowadzenie do struktury dokumentu HTML5.
  2. 10 min - Omówienie struktury dokumentu HTML i podstawowych znaczników
  3. 10 min - Omówienie odsyłaczy (linków)
  4. 10 min - Ćwiczenie praktyczne: utworzenie strony z tytułem, nagłówkami, akapitem i odsyłaczem
    • Uczniowie tworzą dokument HTML zawierający: tytuł, nagłówek, akapit z tekstem, odsyłacz do zewnętrznej strony.
    • Używają interaktywnego edytora lub osobnego edytora HTML, aby wprowadzić zmiany i wyświetlić stronę w przeglądarce.
  5. 5 min - Omówienie błędów, wspólna analiza kodu
    • Nauczyciel analizuje błędy popełnione przez uczniów, wyjaśnia je i udziela wskazówek, jak je poprawić.
  6. 5 min - Zadanie domowe: rozbudować stronę o kolejny odsyłacz do innej podstrony i linki menu
    • Uczniowie mają za zadanie dodać koleją wewnętrzną podstronę oraz menu nawigacyjne w serwisie.

Lekcja 2 - Wstawianie obrazków i podstawowe formatowanie tekstu

Czas trwania: 45 minut

Cele szczegółowe

  • Uczeń potrafi wstawiać obrazki do strony HTML.
  • Uczeń formatuje tekst, używając podstawowych znaczników (pogrubienie, kursywa, podkreślenie).
  • Uczeń rozumie atrybuty obrazków i tekstów.

Materiały

Przebieg

  1. 5 min - Wprowadzenie do tematu lekcji
    • Krótkie przypomnienie, czym są obrazy w HTML i jak je wstawiać.
  2. 10 min - Omówienie wstawiania obrazków HTML
    • Wyjaśnienie tagu <img> i jego atrybutów: src="..." - ścieżka do pliku obrazka, alt="..." - tekst alternatywny.
    • Dodatkowo omówienie atrybutów takich jak width="..." i height="...".
  3. 10 min - Formatowanie tekstu: pogrubienie, kursywa, podkreślenie
    • Jak nadać tekstowi pogrubienie, kursywę i inne style.
    • Przykłady praktyczne wstawiania i łączenia tych znaczników.
  4. 10 min - Ćwiczenie praktyczne: strona z obrazkiem i sformatowanym tekstem
    • Uczniowie tworzą stronę, na której wstawiają: obrazek oraz sformatowany tekst z pogrubieniem, kursywą i podkreśleniem.
  5. 5 min - Omówienie błędów, wspólna analiza kodu
  6. 5 min - Zadanie domowe: rozbudować stronę o kolejny obrazek, sformatować więcej tekstu i dodać kolejny akapit.

Lekcja 3 - Listy i tabele w HTML

Czas trwania: 45 minut

Cele szczegółowe

  • Uczeń potrafi tworzyć listy uporządkowane i nieuporządkowane.
  • Uczeń potrafi tworzyć tabele i formatować ich zawartość.

Materiały

Przebieg

  1. 5 min - Wprowadzenie do tematu lekcji
    • Wyjaśnienie roli list i tabel w strukturze strony HTML.
  2. 10 min - Tworzenie list uporządkowanych i nieuporządkowanych
    • Omówienie tagów do tworzenia wykazów (list)
  3. 10 min - Tworzenie tabel HTML
    • Omówienie tagów do tworzenia tabeli
    • Wyjaśnienie atrybutów tabeli, jak definiować nagłówki i komórki.
  4. 10 min - Ćwiczenie praktyczne: strona z listami i tabelą
    • Uczniowie tworzą stronę, na której umieszczają listy uporządkowaną i nieuporządkowaną.
    • Tworzą prostą tabelę z danymi.
  5. 5 min - Omówienie błędów, wspólna analiza kodu
  6. 5 min - Zadanie domowe: rozbudować stronę o tabelę z połączonymi komórkami oraz listy z podpunktami.

Lekcja 4 - Multimedia w HTML: video, audio, widżety (iframe)

Czas trwania: 45 minut

Cele szczegółowe

  • Uczeń potrafi wstawiać materiały wideo i audio.
  • Uczeń zna i stosuje widżety (np. iframe) w dokumentach HTML.

Materiały

Przebieg

  1. 5 min - Wprowadzenie do tematu lekcji
    • Omówienie roli multimediów w stronach internetowych i ich znaczenia.
  2. 10 min - Wstawianie wideo i audio
    • Omówienie tagów <video> i <audio>, wstawianie plików multimedialnych na stronę oraz ich atrybuty (np. controls, autoplay, loop).
  3. 10 min - Wstawianie widżetów (iframe)
    • Wyjaśnienie tagu <iframe>, jego zastosowanie i sposób osadzania zewnętrznych treści (np. YouTube).
  4. 10 min - Ćwiczenie praktyczne: strona z obrazkami, wideo i audio
    • Uczniowie tworzą stronę, na której wstawiają wideo z YouTube i widżet (iframe) z zewnętrzną zawartością.
  5. 5 min - Omówienie błędów, wspólna analiza kodu
  6. 5 min - Zadanie domowe: rozbudować stronę o więcej multimediów, dodać dodatkowy filmik lub dźwięk.

Lekcja 5 - Wprowadzenie do CSS: podstawowe style i struktura arkuszy

Czas trwania: 45 minut

Cele szczegółowe

  • Uczeń wie, czym jest CSS i do czego służy.
  • Uczeń potrafi połączyć arkusz stylów z dokumentem HTML.
  • Uczeń stosuje podstawowe style: kolor tła i tekstu, czcionki, wyrównanie tekstu.

Materiały

Przebieg

  1. 5 min - Wprowadzenie do tematu
    • Co to jest CSS, jak działa, dlaczego warto oddzielać wygląd od struktury.
  2. 10nbsp;min - Wstawianie stylów CSS
  3. 10 min - Składnia CSS
    • Selektory, bloki deklaracji (właściwości, wartości). Przykłady formatowania całej strony i pojedynczych elementów.
  4. 15 min - Praktyczne ćwiczenia
  5. 5 min - Zadanie domowe
    • Dokończyć stronę z prostymi stylami + przygotować wersję z dwoma kolorystykami (np. jasną i ciemną).

Lekcja 6 - Klasy CSS, ramki, marginesy, tapety, interakcje

Czas trwania: 45 minut

Cele szczegółowe

  • Uczeń stosuje klasy CSS i przypisuje je do elementów HTML.
  • Uczeń używa paddingów, ramek i marginesów.
  • Uczeń stylizuje tło obrazkiem.
  • Uczeń modyfikuje wygląd odsyłaczy w interakcji.

Materiały

Przebieg

  1. 5 min - Powtórka z poprzedniej lekcji
  2. 10 min - Klasy CSS i ich zastosowanie
    • Różnica między klasą a selektorem tagu.
    • Tworzenie klasy .ramka, .podpis, .naglowek. Przypisywanie klas do elementów.
  3. 10 min - Ramki i marginesy
    • Właściwości: padding, border, margin, border-radius.
    • Tworzenie stylowych boksów z tekstem.
  4. 10 min - Tła i stylizowanie odsyłaczy
    • Właściwości: background-image, color.
    • Stylizacja odsyłaczy tak, aby zmieniały się po najechaniu kursorem (:hover).
  5. 5 min - Ćwiczenie praktyczne
    • Strona z sekcją w ramce, linkami z efektem :hover, tłem obrazkowym i klasami CSS.
  6. 5 min - Zadanie domowe
    • Rozbudować stronę o co najmniej 3 różne klasy stylów i dodać estetyczną sekcję z tłem i linkami.

Lekcja 7 - Publikacja strony internetowej

Czas trwania: 45 minut

Cele szczegółowe

  • Uczeń rozumie, na czym polega publikacja strony internetowej.
  • Uczeń zna różnicę między darmowymi a płatnymi serwerami.
  • Uczeń potrafi wysłać gotową stronę HTML na serwer WWW.
  • Uczeń potrafi dokonać drobnych modyfikacji na opublikowanej stronie.

Materiały

Przebieg

  1. 5 min - Wprowadzenie
    • Dlaczego warto publikować własne strony?
    • Jakie są sposoby udostępniania witryn w Internecie?
  2. 10 min - Teoria: rodzaje serwerów
    • Czym różni się darmowy serwer od płatnego?
    • Zalety i ograniczenia.
    • Przykłady popularnych usług.
  3. 10 min - Rejestracja i przygotowanie serwera
    • Uczniowie zakładają konto na wybranym darmowym serwerze i poznają panel zarządzania albo na szkolnym serwerze WWW (jeśli jest dostępny).
  4. 15 min - Publikacja strony
    • Uczniowie wysyłają własne pliki HTML/CSS przez wbudowany menedżer plików lub klienta FTP (jeśli stosowane).
    • Sprawdzają poprawność działania strony online.
  5. 5 min - Modyfikacje i aktualizacja strony
    • Uczniowie uczą się nadpisywać pliki, odświeżać wersję online i poprawiać błędy po publikacji.

Zadanie końcowe / projekt

Uczniowie tworzą własną stronę internetową na wybrany przez siebie temat (np. pasja, zespół muzyczny, blog podróżniczy, poradnik, portfolio). Strona powinna zawierać:

  • poprawną strukturę HTML5,
  • co najmniej 3 podstrony połączone odsyłaczami,
  • nagłówki, akapity, listy (numerowane i nienumerowane),
  • tabele prezentujące dane (np. harmonogram, cennik, porównanie),
  • grafikę i przynajmniej jeden osadzony materiał multimedialny (np. film z YouTube lub dźwięk, przez <iframe> lub <audio> / <video>),
  • stylowanie przy użyciu CSS - m.in. kolorystyka, czcionki, marginesy, tło, klasy CSS i style dla linków,
  • co najmniej jeden element z zaokrągloną ramką lub boxem z własnym tłem,
  • publikację strony na serwerze - uczniowie oddają link do swojej pracy.

Podsumowanie

Cykl lekcji spełnia wymagania podstawy programowej dla liceum i technikum:

  • Uczniowie tworzą zgodną ze standardami stronę internetową z treściami i formatowaniem HTML,
  • stosują CSS do estetycznego i funkcjonalnego formatowania strony,
  • poznają strukturę i składnię kodu źródłowego,
  • używają list, tabel, stylów, klas oraz elementów dynamicznych (media, iframe),
  • uczą się zasad publikacji stron w Internecie, korzystając z serwerów WWW,
  • pracują samodzielnie na edytorach tekstu i uczą się przez działanie,
  • korzystają z otwartych, sprawdzonych materiałów edukacyjnych dostępnych bez logowania.
Facebook