Spis treści
INFORMACJE OD WYKŁADOWCY
Wszystkie klasy realizują ten sam materiał, który został przygotowany i jest modyfikowany zgodnie z podstawą programową i przygotowują do egzaminu zawodowego EE09/INF03.
PODRĘCZNIKI NA ROK SZKOLNY 2022/2023
KLASA 1/2/3 WITRYNY INTERNETOWE PODRĘCZNIK
PODSTAWY HTML
NA LEKCJI
Poznasz Przedmiotowe Zasady Oceniania, regulamin pracowni komputerowej oraz BHP
Podczas lekcji zapoznasz się z efektami kształcenia, jakie nabędziesz w ramach nauki języka HTML. Zgodnie z programem nauczania i podstawą programową po opanowaniu materiału uczeń:
- korzysta ze standardów dokumentów hipertekstowych
- stosuje znaczniki języka HTML
- definiuje strukturę dokumentu hipertekstowego korzystając ze znaczników sekcji
- definiuje hierarchię treści stosując znaczniki nagłówków i paragrafu
- definiuje elementy strony internetowej: listy, tabele, obrazy, odnośniki, kontrolki
- wykonuje formularze na stronie internetowej
NA LEKCJI:
ZADANIE DO WYKONANIA:
Wykonaj template strony.
czas trwania: 1×45 minut
TEMATYKA ZAJĘĆ:
- Nagłówek
- Akapit
- Podział wiersza i linia pozioma
- Cytat blokowy
- Elementy frazowe
NA LEKCJI:
- Zapoznaj się z artykułem: Akapit, łamanie linii, atrybuty
- Utwórz na pulpicie folder i nazwij go twoim imieniem i nazwiskiem.
- Wykonaj ćwiczenia zawarte w artykule, dokumentując ich wykonanie zrzutami ekranu.
- Po wykonaniu ćwiczeń pokaż je prowadzącej zajęcia.
- Zarchiwizuj swoją pracę na pendrive.
- Usuń folder z pulpitu.
czas trwania 1×45
NA LEKCJI:
- Zapoznaj się z artykułem: Listy uporządkowane, nieuporządkowane, opisowe
- Wykonaj ćwiczenia tam zawarte, zapisując je w odpowiednich plikach.
- Po wykonaniu ćwiczeń pokaż je prowadzącej zajęcia.
W DOMU:
- Odpowiedz w zeszycie na pytania kontrolne zawarte w artykule.
- Używając edytora HTML wykonaj: ĆWICZENIE W DOMU
CZAS TRWANIA: 1×45 minut
CELE LEKCJI:
Na lekcji poznasz prawidłowe nawyki tworzenia stron internetowych. Dowiesz się dlaczego powinno się je robić w oparciu o elementy blokowe div.
NA LEKCJI:
Obejrzyj film: Struktura strony – div – table
W DOMU:
Z POPRZEDNIEJ LEKCJI:
Na ostatniej lekcji dowiedzieliśmy się dlaczego należy projektować witrynę za pomocą elementów blokowych. Dzisiaj zastosujemy tę wiedzę w praktyce, a ponadto poznamy szczególne bloki, które są opisywane za pomocą znaczników semantycznych.
NA LEKCJI:
Wykonasz stronę zgodną ze strukturą:
- Pobierz i rozpakuj plik Znaczniki semantyczne – ćwiczenia.
- Znajdziesz tam dwa elementy: start.html oraz plik pdf zawierający instrukcje. Wykonaj zadania i udokumentuj to zdjęciem lub zrzutem ekranu
W DOMU:
Zapozaj się z informacjami na stronie:
Wyjaśnij w zeszycie zastosowanie:
- header
- main
- footer
- section
- article
- aside
- time
NA LEKCJI:
- Zapoznaj się z artykułem: Odsyłacze (linki, adresowanie).
- Pobierz plik Menu i nawigacja, a następnie go rozpakuj. Znajdziesz w nim dwa pliki: struktura.html oraz artykuł pdf- Elementy kotwicowe. Wykonaj zadania w nim zawarte
W DOMU:
Wyjaśnij w zeszycie pojęcia:
- Adresowanie odsyłaczy
- Odsyłacze bezwzględne (absolutne)
- Odsyłacze względne (relatywne)
- Odsyłacze blokowe
NA LEKCJI
Podczas wykonasz stronę podsumowującą twoją obecną wiedzę.
- Utwórz na pulpicie folder i nazwij go swoim imieniem i nazwiskiem.
- Wykonaj zadanie z pliku Studium przypadku
- Zarchiwizuj swoją pracę na pendrive
- Skasuj folder z pulpitu
Na lekcji będziemy się bawić jednocześnie powtarzając dotychczczasową wiedzę.
- Na początek pobierzesz i zainstalujesz nowy edytor: https://frontstack.pl/vs-code-dla-poczatkujacych/
- Wejdź na stronę: https://www.freecodecamp.org/
- Naciśnij Get Started it is free
- Zaloguj się a następnie wybierz ścieżkę kształcenia
- Będziemy wykonywali działania po kolei
Pobierz szablon (template) strony a następnie rozpakuj go w swoim folderze.
Z uwagi na ergonomię pracy i możliwość podglądu na żywo pracować będziemy na: https://codepen.io/ .Po wejściu na stronę należy nacisnąć SING UP i zalogować się używając konta: FB, GitHub lub Twitter albo adresu email. Swoją pracę będzie można monitorować z każdego komputera podłączonego do Internetu. Dostęp do narzędzia jest bezpłatny. Po lewej stronie kliknij teraz PEN i zacznij pracować.
CodeEditor – Compiler, IDE, Programming on mobile – program do kodowania na telefonie.