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:

1. HTML – pierwsze kroki
2. Struktura strony www i sekcja HEAD
   • SEKCJA HEAD – dostosowanie meta do wyszukiwarkI Google
   • Sekcja BODY

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:

1. Zapoznaj się z artykułem: Akapit, łamanie linii, atrybuty
2. Utwórz na pulpicie folder i nazwij go twoim imieniem i nazwiskiem.
3. Wykonaj ćwiczenia zawarte w artykule, dokumentując ich wykonanie zrzutami ekranu.
4. Po wykonaniu ćwiczeń pokaż je prowadzącej zajęcia.
5. Zarchiwizuj swoją pracę na pendrive.
6. Usuń folder z pulpitu.

czas trwania 1×45

NA LEKCJI:

1. Zapoznaj się z artykułem: Listy uporządkowane, nieuporządkowane, opisowe
2. Wykonaj ćwiczenia tam zawarte, zapisując je w odpowiednich plikach.
3. Po wykonaniu ćwiczeń pokaż je prowadzącej zajęcia.

W DOMU:

1. Odpowiedz w zeszycie na pytania kontrolne zawarte w artykule.
2. 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ą: 

1. Pobierz i rozpakuj plik Znaczniki semantyczne – ćwiczenia.
2. 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:

• w3schools.com/html/html_blocks.asp 
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header

Wyjaśnij w zeszycie zastosowanie:

• header
• main
• footer
• section
• article
• aside
• time

NA LEKCJI:

1. Zapoznaj się z artykułem: Odsyłacze (linki, adresowanie).
2. 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

ZASOBY LEKCJI:

• PREZENTACJA TABELE

NA LEKCJI

Podczas wykonasz stronę podsumowującą twoją obecną wiedzę. 

1. Utwórz na pulpicie folder i nazwij go swoim imieniem i nazwiskiem.
2. Wykonaj zadanie z pliku Studium przypadku
3. Zarchiwizuj swoją pracę na pendrive
4. Skasuj folder z pulpitu

Na lekcji będziemy się bawić jednocześnie powtarzając dotychczczasową wiedzę.

1. Na początek pobierzesz i zainstalujesz nowy edytor: https://frontstack.pl/vs-code-dla-poczatkujacych/ 
2. Wejdź na stronę: https://www.freecodecamp.org/
3. Naciśnij Get Started it is free
4. Zaloguj się a następnie wybierz ścieżkę kształcenia
5. 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.