Scenariusz lekcji informatyki: Język HTML - podstawowe polecenia służące do tworzenia stron WWW

SCENARIUSZ LEKCJI INFORMATYKI

KLASA: II gimnazjum
TEMAT: Język HTML – podstawowe polecenia służące do tworzenia stron WWW.

CELE OPERACYJNE LEKCJI:
Uczeń wie (zna pojęcia):
• strona WWW,
• dokument HTML, język HTML, znacznik, komentarz,
• odsyłacz.
Uczeń potrafi:
• planować pracę przy tworzeniu dokumentu HTML,
• korzystać z edytora Notatnik przy oglądaniu stron umieszczonych w Internecie, a także przy tworzeniu własnych dokumentów HTML,
• stworzyć w edytorze Notatnik prosty dokument HTML, a także umieścić w nim grafikę i odnośniki.

METODY DYDAKTYCZNE:
1. Wiodąca: słowna – elementy wykładu.
2. Wspomagająca – praktyczna – praca z komputerem.

ŚRODKI DYDAKTYCZNE:
• pracownia informatyczna z dostępem do Internetu,
• oprogramowanie: przeglądarka Internet Explorer,
• karty dla każdego ucznia: „Podstawy tworzenia stron WWW”.

Czas: 90’ (2*45’)
PRZEBIEG LEKCJI:

I. Część wstępna: (5')
1. Sprawy organizacyjne – sprawdzenie listy obecności, sformułowanie tematu lekcji.

II. Część zasadnicza: (75')
1. Nauczyciel rozdaje uczniom opracowane karty z podstawami tworzenia stron WWW (są na niej umieszczone wszystkie ważne informacje związane z tematem – uczniowie nie muszą notować, skupiają się na tłumaczeniu nauczyciela).
2. Nauczyciel rozpoczyna z uczniami rozmowę na temat stron WWW, które już wcześniej oglądali w Internecie. Podkreśla ich różnorodność.
Uczniowie rozpoczynają pracę nad własną prostą stroną od jej zaplanowania na papierze. Ten plan skorygują (zmodyfikują) po poznaniu podstawowych poleceń języka HTML. Nauczyciel zwraca uczniom uwagę, że elementy dekoracyjne (grafika, animacja, kolory itp.) powinny być stosowane z umiarem, aby nie utrudniały odbioru treści przedstawionych na stronie.
3. Nauczyciel wyjaśnia pojęcia: strona WWW, odsyłacz (odnośnik), „źródło” strony, dokument HTML, język HTML, polecenie, znacznik, komentarz. Uczniowie korzystają z karty, którą otrzymali na początku lekcji. Nauczyciel omawia podstawową strukturę strony WWW. Język HTML (kilka jego podstawowych poleceń) nauczyciel przedstawia korzystając z przygotowanego wcześniej przykładu strony WWW. Karta: „Podstawy tworzenia stron WWW” z poleceniami języka HTML będzie pomocna uczniom przez cały czas pracy nad dokumentem HTML.
4. Uczniowie pracę nad tworzeniem własnego dokumentu HTML rozpoczynają od napisania w edytorze Notatnik podstawowej struktury strony WWW (wzorują się na stronie „przykładowej” pokazanej przez nauczyciela i korzystają z karty).
5. Nauczyciel cały czas nadzoruje pracę uczniów, pomaga, tłumaczy i wyjaśnia dalsze polecenia. Listę wprowadzanych poleceń nauczyciel dostosowuje do wymagań, możliwości i zainteresowań uczniów.
6. Nauczyciel informuje uczniów gdzie należy wstawiać pliki (np. graficzne), jeśli umieszczamy do nich odnośniki na stronie, aby utworzony odnośnik był poprawny.
7. Uczniowie przystępują do ewentualnej korekty początkowego planu wyglądu własnej strony oraz kontynuują tworzenie tej strony.

III. Podsumowanie: (10')
1. Uczniowie przypominają nowo poznane pojęcia.
2. Nauczyciel informuje uczniów, że na poznanie kolejnych poleceń oraz na pracę nad ich własną stroną poświęcą jeszcze dwie godziny lekcyjne.

KARTA DLA UCZNIA:
PODSTAWY TWORZENIA STRON WWW

- Aby zobaczyć „źródło” strony WWW (już istniejącej), wystarczy wskazać dowolne miejsce (obszar) strony (wolne od tekstu i grafiki) i wybrać po naciśnięciu prawego klawisza myszy opcję Wyświetl źródło.

- Ukaże się plik tekstowy, w którym umieszczone są specjalne znaczniki języka opisu strony HTML. Znaczniki HTML – to polecenia języka HTML. Większość znaczników występuje parami, czyli znacznik początkowy i znacznik końcowy.

Ogólny sposób stosowania znaczników jest następujący:

<znacznik> TEKST </znacznik>

- PODSTAWOWA STRUKTURA STRON WWW

Znacznik Wyjaśnienie

<HTML> początek struktury
<HEAD> początek nagłówka
<TITLE> </TITLE> temat strony (tytuł dokumentu)
</HEAD> koniec nagłówka
<BODY> początek zawartości strony
</BODY> koniec zawartości strony
</HTML> koniec struktury

<HTML>.............</HTML> - między tymi znacznikami zawarty jest opis całej strony; ten znacznik zawsze musi wystąpić,

<HEAD>..............</HEAD> - jest to nagłówek strony - w nim umieszcza się tytuł strony<TITLE>............. </TITLE> (każda strona musi mieć tytuł), oprócz tytułu nagłówek zawiera podstawowe informacje opisujące dokument takie jak: słowny opis dokumentu, dane autora, słowa kluczowe, polecenia pozwalające na właściwe odczytywanie dokumentu. Tekst umieszczony w tej części nie jest wyświetlany w oknie przeglądarki (z wyjątkiem tytułu),

<BODY>..............</BODY> - główna część dokumentu - między tymi znacznikami znajduje się cała zawartość strony (teksty, rysunki, tabele itd.).

- Aby utworzyć stronę w prostym edytorze tekstu (np. w Notatniku) należy w oknie dokumentu wpisać tekst łącznie z odpowiednimi znacznikami. Następnie zapisać dokument, używając opcji Plik|Zapisz jako... - wpisując w polu Nazwa pliku np. index.html oraz wybierając w polu Plik typu opcję Wszystkie pliki. Powstanie w ten sposób dokument HTML (strona WWW).
 Aby zobaczyć, jak będzie wyglądałą strona w Internecie, trzeba otworzyć ten plik w przeglądarce internetowej (opcja Plik|Otwórz).

PODSTAWOWE POLECENIA JĘZYKA HTML

POLECENIE OPIS - ZNACZENIE

Tekst Czcionka pochylona
 Tekst Czcionka pogrubiona
 Tekst Czcionka podkreślona

<CENTER>Tekst</CENTER> Ustawienie tekstu i grafiki na środku strony
 Przeniesienie tekstu o jeden wiersz w dół

 Wprowadzenie akapitu poprzedzonego interlinią
 Ustawienie akapitu na środku
 Wyrównanie akapitu do lewego marginesu
 Wyrównanie akapitu do prawego marginesu
 Wyrównanie akapitu do lewego i prawego marginesu

 Tekst
Kolor czcionki np. 

 Tekst
Wielkość czcionki od 1 do 7 np. 

 Tekst
Rodzaj czcionki np. 

<BODY BGCOLOR=”kolor”> zmiana koloru tła strony

<BODY BACKGROUND=”rysunek.jpg”>
zmiana tła strony – umieszczony w tle obrazek (pliki typu *.jpg lub *.gif)

<BODY LINK=”kolor”> Kolor odsyłacza
<BODY VLINK=”kolor”> Kolor „odwiedzonego” odsyłacza

<IMG SRC=”rysunek.jpg”> Wstawienie obrazka na stronę (pliki typu *.jpg lub *.gif)

<IMG SRC=”rysunek.jpg” WIDTH=”X” HEIGHT=”Y”>
Zmiana rozmiarów grafiki, gdzie X oznacza szerokość w pikselach, a Y wysokość w pikselach

<A HREF=”http://www.wp.pl”>Tekst lub obraz</A> wstawienie odsyłacza do strony w Internecie
<A HREF=”autor.html”>Tekst lub obraz</A> wstawienie odsyłacza do własnej podstrony

Scenariusz lekcji informatyki: Język HTML - podstawowe polecenia służące do tworzenia stron WWW

Publikacje nauczycieli