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
- Ramy dokumentu HTML
- Wpisywanie tekstu HTML
- Znaczniki HTML
- Akapit HTML
- Tekst pogrubiony, pochylony, podkreślony
- Łączenie znaczników
Przebieg
- 5 min - Wprowadzenie: czym jest HTML, do czego służy.
- 10 min - Pokaz struktury dokumentu HTML w edytorze na stronie.
- 15 min - Uczniowie przepisują gotowy kod z rozdziału Ramy dokumentu HTML i dodają własne akapity oraz pogrubienia/pochylenia tekstu.
- 10 min - Wspólne omówienie i poprawki kodu.
- 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
- Wstawienie obrazka HTML
- Wyśrodkowanie obrazka
- Odsyłacz do podstrony
- Odsyłacz do adresu internetowego
- Odsyłacz obrazkowy
- Odsyłacz pocztowy
Przebieg
- 5 min - Powtórzenie z poprzednich zajęć: budowa dokumentu HTML.
- 10 min - Pokaz na rzutniku: jak dodać obrazek + opis atrybutów.
- 15 min - Uczniowie wstawiają obrazek do swojej strony z poprzedniej lekcji + tworzą link do wybranego serwisu (np. Wikipedia).
- 10 min - Wariant dla chętnych: link obrazkowy i link do adresu e-mail.
- 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
- Kolor tła oraz tekstu HTML
- Wielkość i rodzaj czcionki HTML
- Pozioma linia
- Podsumowanie
- Powtórka
- Quiz i certyfikat
Przebieg
- 10 min - Pokaz: zmiana kolorów tła i tekstu strony, wielkości i rodzaju czcionki, dodanie
<hr>
- z omówieniem estetyki. - 15 min - Uczniowie stosują zmiany do swojej strony (dodają kolory, linie, dopasowują styl).
- 10 min - Quiz z kursu - uczniowie pracują indywidualnie.
- 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
- 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.
- 10 min - Omówienie struktury dokumentu HTML i podstawowych znaczników
- Wyjaśnienie struktury HTML
- Omówienie nagłówków
- Omówienie akapitu
- Przykłady kodu i omówienie atrybutów.
- 10 min - Omówienie odsyłaczy (linków)
- Wyjaśnienie, czym są odsyłacze i jak je tworzyć
- Odsyłacz do innej strony
- Odsyłacz do innej podstrony
- Odsyłacz do adresu e-mail
- Przykłady linków do stron, podstron i adresów e-mail.
- 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 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ć.
- 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
- 5 min - Wprowadzenie do tematu lekcji
- Krótkie przypomnienie, czym są obrazy w HTML i jak je wstawiać.
- 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="..."
iheight="..."
.
- Wyjaśnienie tagu
- 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.
- 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 min - Omówienie błędów, wspólna analiza kodu
- 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
- 5 min - Wprowadzenie do tematu lekcji
- Wyjaśnienie roli list i tabel w strukturze strony HTML.
- 10 min - Tworzenie list uporządkowanych i nieuporządkowanych
- Omówienie tagów do tworzenia wykazów (list)
- 10 min - Tworzenie tabel HTML
- 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 min - Omówienie błędów, wspólna analiza kodu
- 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
- 5 min - Wprowadzenie do tematu lekcji
- Omówienie roli multimediów w stronach internetowych i ich znaczenia.
- 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
).
- Omówienie tagów
- 10 min - Wstawianie widżetów (iframe)
- Wyjaśnienie tagu
<iframe>
, jego zastosowanie i sposób osadzania zewnętrznych treści (np. YouTube).
- Wyjaśnienie tagu
- 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 min - Omówienie błędów, wspólna analiza kodu
- 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
- Wstawienie arkusza stylów CSS
- Arkusz stylów CSS
- Zewnętrzny arkusz stylów
- Wewnętrzny arkusz stylów
- Styl lokalny
- Kolor tła oraz tekstu CSS
- Czcionka CSS
- Wyrównanie tekstu CSS
Przebieg
- 5 min - Wprowadzenie do tematu
- Co to jest CSS, jak działa, dlaczego warto oddzielać wygląd od struktury.
- 10nbsp;min - Wstawianie stylów CSS
- Omówienie trzech sposobów dodania CSS (zewnętrzny, wewnętrzny, inline), nacisk na
<link rel="stylesheet">
.
- Omówienie trzech sposobów dodania CSS (zewnętrzny, wewnętrzny, inline), nacisk na
- 10 min - Składnia CSS
- Selektory, bloki deklaracji (właściwości, wartości). Przykłady formatowania całej strony i pojedynczych elementów.
- 15 min - Praktyczne ćwiczenia
- Uczniowie tworzą stronę HTML i dodają arkusz stylów zmieniający: kolor tła i tekstu, czcionkę i jej rozmiar, wyrównanie tekstu w akapitach i nagłówkach.
- 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
- 5 min - Powtórka z poprzedniej lekcji
- Przypomnienie struktury CSS i pliku *.css
- 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.
- 10 min - Ramki i marginesy
- Właściwości:
padding
,border
,margin
,border-radius
. - Tworzenie stylowych boksów z tekstem.
- Właściwości:
- 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
).
- Właściwości:
- 5 min - Ćwiczenie praktyczne
- Strona z sekcją w ramce, linkami z efektem
:hover
, tłem obrazkowym i klasami CSS.
- Strona z sekcją w ramce, linkami z efektem
- 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
- Jak wprowadzić stronę do Internetu
- Darmowe serwery
- Płatne serwery
- Wysłanie strony
- Modyfikacja
- Gotowa strona ucznia (stworzona na poprzednich lekcjach)
- Konto na darmowym serwerze wskazanym przez nauczyciela albo na szkolnym serwerze WWW (jeśli uruchomiony) z dostępem przez FTP
- Komputer z dostępem do Internetu
Przebieg
- 5 min - Wprowadzenie
- Dlaczego warto publikować własne strony?
- Jakie są sposoby udostępniania witryn w Internecie?
- 10 min - Teoria: rodzaje serwerów
- 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).
- 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 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
- 10 min - Wprowadzenie do HTML
- Omówienie budowy dokumentu HTML5.
- Wyjaśnienie znaczenia elementów
<html>
,<head>
,<body>
.
- 10 min - Praca z edytorem
- Uczniowie otwierają edytor HTML i tworzą nowy dokument.
- Dodają tytuł i nagłówek.
- 15 min - Ćwiczenie praktyczne
- Uczniowie dodają akapity tekstu i zapisują plik HTML.
- Otwierają stronę w przeglądarce.
- 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
- 10 min - Wprowadzenie do znaczników
<img>
i<a>
- Wyjaśnienie atrybutów:
src="..."
,alt="..."
,href="..."
,target="_blank"
(nowe okno).
- Wyjaśnienie atrybutów:
- 20 min - Praca praktyczna
- Uczniowie wstawiają obrazek na stronie.
- Tworzą link do innej strony i do adresu e-mail.
- 10 min - Analiza błędów i zapisanie pracy
- 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
- 10 min - Omówienie zasad działania CSS
- Wyjaśnienie selektorów i deklaracji.
- Różnice między stylem zewnętrznym, wewnętrznym i inline.
- 20 min - Praca z arkuszem stylów
- Dodanie koloru tła i tekstu.
- Zmiana czcionki, rozmiaru i wyrównania tekstu.
- 10 min - Sprawdzenie efektów działania stylów
- 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
- Gotowiec HTML
- Serwisy z darmowymi szablonami
Przebieg
- 10 min - Prezentacja działania gotowych szablonów
- Omówienie, jak działa generator szablonów.
- 15 min - Wybór i pobranie szablonu
- Uczniowie wybierają szablon z generatora lub pobierają darmowy szablon WWW.
- Otwierają go w edytorze i analizują strukturę.
- 15 min - Modyfikacja szablonu
- Dodanie własnego tekstu, obrazków, linków.
- 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
- Jak osadzić skrypt JavaScript na stronie?
- Zdarzenia
- Ramy formularza HTML
- Wyczyszczenie danych
- Pole wyboru
Przebieg
- 15 min - Wprowadzenie do JavaScript
- Omówienie roli JavaScript w dodawaniu interakcji do strony.
- Wyjaśnienie znaczenia elementów
<script>
. - Omówienie zasady działania zdarzeń.
- Omówienie roli i struktury formularzy internetowych.
- 15 min - Sprawdzanie poprawności formularza
- Omówienie celu i zasady działania instrukcji
for
(pętla) orazif
(warunek logiczny) w języku JavaScript. - Uczniowie wklejają i analizują kod skryptu sprawdzenia pól formularza.
- Omówienie celu i zasady działania instrukcji
- 5 min - Potwierdzenie wyczyszczenia formularza
- Uczniowie dodają przycisk typu reset z potwierdzeniem.
- 5 min - Dynamiczne blokowanie pola formularza
- Uczniowie testują blokowanie pola przy pomocy checkboxa.
- 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.