Przejdź do treści

Dla nauczycieli - Kurs HTML i CSS w Twojej klasie

Darmowy kurs HTML i CSS z materiałami dla nauczycieli - gotowe scenariusze lekcji, ćwiczenia, testy i interaktywny edytor kodu. Bez rejestracji, zgodny z podstawą programową.

Wykorzystaj darmowy kurs HTML i CSS na swoich lekcjach. Testy, quizy, ćwiczenia i zadania do druku, a nawet bezpłatne certyfikaty ukończenia dla uczniów - bez logowania, bez reklam i bez instalowania dodatkowych aplikacji.

Dlaczego warto?

  • Prosty i przystępny język, przystosowany do osób początkujących. Nawet jeśli uczniowie nie znają żadnej składni programowania, szybko przyswoją podstawy.
  • Dostosowany do różnych poziomów zaawansowania - lekcje HTML dla zielonych i CSS dla zielonych pozwalają zacząć od absolutnych podstaw, ale kurs zawiera też bardziej zaawansowane treści, takie jak: HTML5, CSS3, JavaScript, responsywność, semantyka i wiele innych praktycznych zagadnień.
  • Uczy przez działanie - każda lekcja zawiera interaktywne przykłady kodu HTML i CSS z możliwością edycji na żywo, zestawy praktycznych ćwiczeń oraz testy i quizy.
  • Bezpłatne certyfikaty i ocena postępów - uczniowie mogą rozwiązywać quizy kończące poszczególne lekcje, a po zdobyciu kompletu punktów otrzymać zupełnie za darmo imienny certyfikat do wydruku.
  • Oparty na specyfikacjach W3C - ścisłe trzymanie się standardów sprawia, że wszystko, czego uczysz, jest zgodne z aktualnymi normami tworzenia stron internetowych.
  • Dostępny również na urządzeniach mobilnych - uczniowie mogą korzystać z kursu na telefonach i tabletach, co ułatwia naukę w dowolnym miejscu.
  • Doskonałe materiały do nauki zdalnej - działa w pełni online, więc świetnie nadaje się do zajęć hybrydowych.
  • Bezpieczna przestrzeń - brak reklam zapewnia komfortowe środowisko edukacyjne i gwarantuje ochronę prywatności uczniów.
  • Od lat używany w szkołach i na uczelniach w całej Polsce - sprawdzony i ceniony przez nauczycieli i wykładowców.

Co oferujemy nauczycielom?

  • Gotowe materiały do zajęć - scenariusze lekcji dla szkoły podstawowej, liceum i technikum, branżowej szkoły I stopnia, zestawy ćwiczeń i przykłady do pracy w klasie.
  • Sekcje dla początkujących - krok po kroku wyjaśniamy, jak stworzyć własną stronę bez konieczności znajomości trudnej składni.
  • Interaktywne przykłady - uczniowie mogą zmieniać kod na żywo, aby zobaczyć efekty swoich działań. Brak potrzeby używania zewnętrznych narzędzi!
  • Praktyczne ćwiczenia - uczniowie mogą tworzyć działające strony WWW od samego początku. Każda lekcja zawiera ćwiczenia i quizy do rozwiązywania, co ułatwia ocenę postępów.
  • Testy i quizy online - po zakończeniu lekcji możesz przeprowadzić test, który pozwoli sprawdzić zdobytą wiedzę. Uczniowie mają możliwość zdobycia bezpłatnych certyfikatów ukończenia, co zachęci ich do nauki.
  • Interaktywny edytor kodu - idealny na rzutnik lub do pracy indywidualnej
  • Wersje do druku materiałów i ćwiczeń - każda lekcja została przygotowana w taki sposób, aby można ją było łatwo wydrukować i dostarczyć uczniom do pracy w klasie.
  • Dostęp do forum dyskusyjnego, na którym eksperci dzielą się doświadczeniem i odpowiadają na pytania dotyczące tworzenia stron. Możesz liczyć na pomoc specjalistów.
  • Pełna zgodność z podstawą programową

Jak wykorzystać kurs na lekcjach?

  • Udostępniaj wybrane rozdziały jako materiały do pracy na lekcji i w domu.
  • Zadaj uczniom ćwiczenia do wykonania w edytorze online.
  • Sprawdzaj postępy poprzez quizy tematyczne.
  • Skorzystaj z forum, by uzyskać odpowiedzi na pytania uczniów.

Wspieraj swoich uczniów w nauce - nie czekaj, zacznij już teraz!

Nie trać czasu na tworzenie materiałów od zera. Skorzystaj z gotowego, sprawdzonego i darmowego kursu HTML i CSS, który pomoże Twoim uczniom zdobyć cenne umiejętności cyfrowe. Zrób to bez ponoszenia absolutnie żadnych kosztów.

Wejdź na Kurs HTML i CSS - zacznij prowadzić nowoczesne lekcje!

Scenariusz lekcji informatyki dla szkoły podstawowej

Scenariusz lekcji informatyki dla klas IV-VIII szkoły podstawowej: tworzenie pierwszej strony internetowej w HTML z akapitami, obrazkami i odsyłaczami, zgodnie z podstawą programową.

Wstęp

Poniżej znajdziesz scenariusz cyklu lekcji oparty na podstawie programowej dla klas IV-VIII szkoły podstawowej z zakresu informatyki oraz materiałach ze strony HTML dla zielonych. Lekcje zostały rozplanowane na 3 spotkania po 45 minut, z pracą domową i elementami pracy własnej uczniów.

Cel ogólny cyklu lekcji

Uczeń tworzy prostą stronę internetową zawierającą tekst i grafikę, dostosowując jej wygląd do treści i przeznaczenia.

Wymagania podstawy programowej

Uczeń:

  • przygotowuje dokumenty i prezentacje z wykorzystaniem aplikacji komputerowych;
  • dostosowuje format i wygląd opracowań do treści;
  • tworzy prostą stronę internetową zawierającą tekst i grafikę.

Lekcja 1 - Wprowadzenie do HTML i struktury dokumentu

Czas trwania: 45 minut

Cele szczegółowe

  • Poznanie podstawowej struktury dokumentu HTML.
  • Tworzenie pierwszego dokumentu z tekstem i podstawowym formatowaniem.

Materiały

Przebieg

  1. 5 min - Wprowadzenie: czym jest HTML, do czego służy.
  2. 10 min - Pokaz struktury dokumentu HTML w edytorze na stronie.
  3. 15 min - Uczniowie przepisują gotowy kod z rozdziału Ramy dokumentu HTML i dodają własne akapity oraz pogrubienia/pochylenia tekstu.
  4. 10 min - Wspólne omówienie i poprawki kodu.
  5. 5 min - Zadanie domowe: dokończ stronę z własnym tekstem - np. Moje hobby, z użyciem przynajmniej 3 znaczników formatowania tekstu.

Lekcja 2 - Wstawianie obrazków i linków

Czas trwania: 45 minut

Cele szczegółowe

  • Uczeń potrafi dodać obrazek i utworzyć odsyłacz.
  • Rozumie znaczenie atrybutów src="...", href="...", alt="...".

Materiały

Przebieg

  1. 5 min - Powtórzenie z poprzednich zajęć: budowa dokumentu HTML.
  2. 10 min - Pokaz na rzutniku: jak dodać obrazek + opis atrybutów.
  3. 15 min - Uczniowie wstawiają obrazek do swojej strony z poprzedniej lekcji + tworzą link do wybranego serwisu (np. Wikipedia).
  4. 10 min - Wariant dla chętnych: link obrazkowy i link do adresu e-mail.
  5. 5 min - Zadanie domowe: dodaj drugi obrazek oraz dwa linki - jeden do innej strony, drugi do adresu e-mail (mailto).

Lekcja 3 - Dostosowanie wyglądu strony i podsumowanie

Czas trwania: 45 minut

Cele szczegółowe

  • Uczeń potrafi zmienić kolor tła, tekstu, czcionkę.
  • Rozumie znaczenie estetyki i dopasowania strony do treści.

Materiały

Przebieg

  1. 10 min - Pokaz: zmiana kolorów tła i tekstu strony, wielkości i rodzaju czcionki, dodanie <hr> - z omówieniem estetyki.
  2. 15 min - Uczniowie stosują zmiany do swojej strony (dodają kolory, linie, dopasowują styl).
  3. 10 min - Quiz z kursu - uczniowie pracują indywidualnie.
  4. 10 min - Omówienie wyników, prezentacja zdobytych certyfikatów dla chętnych (można wydrukować).

Zadanie końcowe / projekt

Bazując na zestawie ćwiczeń do samodzielnego wykonania, uczniowie tworzą stronę internetową o dowolnym temacie (np. hobby, zwierzak, gra komputerowa), zawierającą:

  • tytuł,
  • 2 akapity tekstu z różnym formatowaniem (np. pogrubienie, kolor, czcionka),
  • przynajmniej 1 obrazek,
  • przynajmniej 2 linki (w tym jeden obrazkowy),
  • elementy estetyczne (tło, <hr>, układ graficzny).

Podsumowanie

Cykl lekcji spełnia wymagania podstawy programowej:

  • uczniowie tworzą prostą stronę HTML z tekstem i grafiką,
  • dostosowują jej wygląd do tematu,
  • korzystają z edytora online i uczą się przez działanie,
  • pracują z gotowymi, bezpiecznymi materiałami dostępnymi bez rejestracji.

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.

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