Justyna Klimczyk Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie

HTML
DOWNLOAD

Wielkość: px

Rozpocząć pokaz od strony:

Download "Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie"

Irena Domańska
10 lat temu
Przeglądów:

1 Justyna Klimczyk Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Scenariusz lekcji informatyki klasa II gimnazjum Temat : Strona WWW pierwsze kroki w języku HTML Cel lekcji: Tworzenie stron WWW Nowe pojęcia wprowadzone na lekcji: strona WWW; dokument HTML; edytor stron WWW; język HTML, znacznik. Oczekiwane i poddawane ocenie umiejętności uczniów: planowanie pracy przy tworzeniu dokumentu HTML; korzystanie z edytora Notatnik przy tworzeniu dokumentu HTML; eksperymentowanie z nowymi poleceniami języka HTML; tworzenie prostego dokumentu HTML, umieszczanie w nim grafiki i odnośników; przestrzeganie netykiety przy tworzeniu stron WWW; wykorzystanie innych narzędzi do tworzenia dokumentów HTML. Pomoce dydaktyczne: podręcznik; płyta Gim-Inf program Notatnik; program Internet Explorer; program Pajączek Light Czas realizacji tematu: 4 x 45 min. Lekcje 1 2. Język HTML dokument HTML Lekcje 3 4. Edytory stron WWW Planowany przebieg zajęć Wyjaśnienie podstawowych pojęć dotyczących tematu. Język HTML. Edytor stron WWW. Ćwiczenie sprawdzające. Ocenienie ćwiczenia. Realizacja tematu Strona WWW dokument napisany w języku HTML i w takiej postaci przechowywany w serwerze WWW. Zawiera hipertekst uzupełniony elementami graficznymi i multimedialnymi. Osoba zainteresowana obejrzeniem danej strony może ją pobrać z serwera, posługując się przeglądarką zainstalowaną we własnym komputerze 1

na lekcji: strona WWW; dokument HTML; edytor stron WWW; język HTML, znacznik.

2 Język HTML język przeznaczony do opisywania dokumentów hipertekstowych, prezentowanych i odczytywanych następnie w sieci WWW za pomocą przeglądarki. Poszczególne elementy składowe strony WWW, takie jak tytuły, akapity, obrazy, dźwięki, łączniki z innymi dokumentami, adresy stron WWW są wyróżniane w tym języku za pomocą znaczników, które pełnią funkcję poleceń dla przeglądarki. Dzięki temu hipertekst może być opisany z użyciem bardzo prostego edytora tekstowego. Dokument HTML dokument napisany w języku HTML. Taki dokument można utworzyć w najprostszym edytorze tekstu, np. w Notatniku, programie ze środowiska Windows. Do odczytywania dokumentów HTML służą przeglądarki. Język HTML Dokument HTML zawiera tekst, który ma być umieszczony na stronie i polecenia (zwane znacznikami), które stanowią informacje dla przeglądarki, jak ten dokument ma być wyświetlony na ekranie. Polecenia, dla odróżnienia od zwykłego tekstu umieszcza się w nawiasach < >. Prawie każde polecenie języka HTML składa się z dwóch części otwierającej i zamykającej. Różnią się one tym, że część zamykająca poprzedzona jest znakiem /. Polecenia informują przeglądarkę, co ma zrobić z tekstem, a parametry tych poleceń, jak ma to być zrobione. Budowa dokumentu HTML Dokument w języku HTML jest zawarty między znacznikami: <HTML> i </HTML> i dzieli się na dwie części: nagłówek treść Nagłówek rozpoczyna się poleceniem <HEAD>, a treść poleceniem <BODY>. W nagłówku znajduje się tekst tytułu poprzedzony poleceniem <TITLE> - będzie on wyświetlany w pasku tytułowym przeglądarki. Schemat dokumentu HTML <HTML> <HEAD> <TITLE> tytuł strony </TITLE> </HEAD> <BODY> treść strony nagłówek treść </BODY> </HTML> Wybrane polecenia języka HTML Polecenia bez parametrów Polecenie Znaczenie < I > ustalenie wyróżnienia czcionki kursywa 2

funkcję poleceń dla przeglądarki. Dzięki temu hipertekst może być opisany z użyciem bardzo prostego edytora tekstowego. Dokument HTML dokument napisany w języku HTML.

3 < B > ustalenie wyróżnienia czcionki pogrubiona < U > ustalenie wyróżnienia czcionki podkreślona < CENTER > ustawienie tekstu i grafiki na środku strony < LEFT > ustawienie tekstu i grafiki po lewej stronie strony < RIGHT > ustawienie tekstu i grafiki po prawej stronie strony < BR > zmiana wiersza przeniesienie tekstu o jeden wiersz w dół &nbsp dodatkowy odstęp wprowadzenie dodatkowej spacji < UL > wstawienie wyliczeń < LI > wyliczenia punktowane < OL > wyliczenia numerowane Polecenia z parametrami Polecenie Parametr Wybrane wartości parametrów Znaczenie < FONT > SIZE COLOR 1-7 white, green, blue, read, purple, yellow, navy, olive ustalenie wielkości czcionki ustalenie koloru czcionki < A > HREF plik.html wstawienie odnośnika < P > wprowadzenie akapitu poprzedzonego interlinią ALIGN < BODY > BGCOLOR TEXT LINK VLINK < H1 6 > ALIGN center right left justify center right ustawienie akapitu na środku strony wyrównanie akapitu do prawego marginesu wyrównanie akapitu do lewego marginesu wyrównanie akapitu do prawego i lewego marginesu ustawienie koloru tła ustawienie koloru tekstu ustawienie koloru odnośnika ustawienie koloru odwiedzonego odnośnika ustawienie w nowym wierszu tytułu poziomu od 1 (największy rozmiar czcionki) do 6 ustawienie tytułu na środku wyrównanie tytułu do prawego marginesu left wyrównanie tytułu do lewego marginesu 3

UL > wstawienie wyliczeń < LI > wyliczenia punktowane < OL > wyliczenia numerowane Polecenia z parametrami Polecenie Parametr Wybrane wartości parametrów Znaczenie < FONT > SIZE COLOR 1-7 white,

4 < IMG > SRC ALIGN ALT WIDTH HEIGHT HSPACE VSPACE justify plik.gif left right top middle bottom objaśnienie wyrównanie tytułu od prawego do lewego marginesu pobieranie obrazka z pliku ustawienie obrazka po lewej stronie tekstu ustawienie obrazka po prawej stronie tekstu ustawienie obrazka u góry ustawienie obrazka w środku ustawienie obrazka na dole szerokość obrazka wysokość obrazka odległość obrazka od tekstu w pionie odległość obrazka od tekstu w poziomie Przykładowy dokument HTML ustawienie koloru tła, tekstu, odnośników wstawienie odnośnika do pliku wakacje.html wyliczenie punktowane, tekst w kolorze szarym o rozmiarze 4 akapit poprzedzony interlinią, ustawienie akapitu na środku 4

ustawienie obrazka po prawej stronie tekstu ustawienie obrazka u góry ustawienie obrazka w środku ustawienie obrazka na dole szerokość obrazka wysokość obrazka odległość

5 Umieszczanie grafiki i odnośników Przykładowy zapis pozwalający umieścić na stronie WWW grafikę: <IMG SCR= Obrazki/obrazek.gif ALT= Moja fotka VSPACE=5 HSPACE=50 ALIGIN=middle> Zapis oznacza: pobranie obrazka obrazek.gif z folderu Obrazki podpis pod grafiką: Moja fotka odległość grafiki od tekstu: w pionie 50 pikseli, w poziomie 5 pikseli grafika ustawiona na środku. Przykładowy zapis pozwalający umieścić na stronie WWW odnośnik: <A HREF=Autor.html> O mnie </A> Zapis oznacza: odnośnik przeniesie nas na stronę, która znajduje się w pliku Autor.html odnośnikiem będzie tekst O mnie Ćwiczenia: 1. Na płycie Gim-Inf odszukaj plik Index.html i otwórz go. Przyjrzyj się jak wygląda tekst źródłowy tej strony. W tym celu w przeglądarce Internet Explorer wybierz polecenie Widok Źródło. 2. Utwórz w swoim folderze podfolder, który będzie przeznaczony na ćwiczenia z językiem HTML. Skopiuj plik Index.html do utworzonego podfolderu. 3. Otwórz plik Index.html w edytorze Notatnik. W pliku tym występuje polecenie <H1> - zamiast 1 wpisz inną cyfrę z przedziału 1-6. Sprawdź jak zmiana, której dokonałeś wpłynęła na wygląd strony. 4. W pliku Index.html występuje polecenia <CENTER>, <I> - zaobserwuj co się stanie, jeżeli polecenie <CENTER zmienisz na <LEFT> lub <RIGHT>, a polecenie <I> na polecenie <B> lub <U>. 5. W pliku Index.html zmień napis Ja na inny. Zaobserwuj efekty tej zmiany. 6. Otwórz plik Autor.html, który znajduje się na płycie Gim-Inf. W tekście źródłowym znajduje się polecenie <LI> - sprawdź, czym się różni się to polecenie od polecenia <OL>. Jaki układ strony możesz dzięki nim uzyskać. Edytory stron WWW Gdy chcemy utworzyć stronę WWW mamy do wyboru następujące możliwości: utworzyć dokument HTML w edytorze tekstu np.: Notatnik, wykorzystać program, który przekształci dokument tekstowy na dokument HTML np.: Word wykorzystać edytor dokumentów HTML np.: Pajączek Light Pajączek Light Okno programu Pajączek Light składa się z trzech części: ustawienia sekcji w tej części ustawia się m.in. kolor tła, tekstu, odnośników, podkład dźwiękowy, ustala się również nazwę pliku strony; atrybuty sekcji w tej części przygotowuje się nagłówek i podtytuł strony, decyduje o umieszczeniu na stronie odnośników; 5

gif z folderu Obrazki podpis pod grafiką: Moja fotka odległość grafiki od tekstu: w pionie 50 pikseli, w poziomie 5 pikseli grafika ustawiona na środku.

6 główna sekcja w tej części okna programu przygotowuje się treść strony, praca w tej częsci okna przypomina pracę z edytorem Notatnik - wymagana jest tutaj znajomość poleceń języka HTML, co jest niezbędne by móc formatować tekst, wstawiać grafikę i odnośniki. podgląd ustawień w oknie przeglądarki opcja pozwalająca zapisać plik strony w wybranym folderze tekst źródłowy dokumentu HTML Ćwiczenie: 1. Uruchom edytor Pajączek Light i wykonaj następujące czynności: 6

7 Na karcie Ustawienia sekcji, w polu Nazwa pliku strony wpisz Ferie.html; jako dokument bazowy podaj ścieżkę do folderu, w którym będą przechowywane wszystkie pliki związane ze stroną, którą tworzysz; ustaw kolor tekstu i odnośników oraz wybierz tło strony. Na karcie Atrybuty sekcji w polu Nagłówek wpisz FERIE, a w polu Podtytuł wpisz LUTY 2001; ustaw kolory tych napisów. Zapisz tworzony plik w swoim folderze. Zobacz, jak będzie wyglądać strona w oknie przeglądarki; dokonaj ewentualnych zmian. Ćwiczenie sprawdzające: W edytorze Pajączek Light utwórz stronę WWW o dowolnej tematyce. Strona musi posiadać przynajmniej jedną podstronę. Wykorzystaj jak najwięcej poznanych poleceń języka HTML. Plik strony (Ćwiczenie sprawdzające.html) zapisz w swoim folderze na dysku komputera. 7

Na karcie Atrybuty sekcji w polu Nagłówek wpisz FERIE, a w polu Podtytuł wpisz LUTY 2001; ustaw kolory tych napisów. Zapisz tworzony plik w swoim folderze.

Podobne dokumenty

Cel ogólny lekcji: Wprowadzenie dodatkowych znaczników. Wprowadzenie odsyłacza, tabeli, listy numerowanej i wypunktowanej.

Cel ogólny lekcji: Wprowadzenie dodatkowych znaczników. Wprowadzenie odsyłacza, tabeli, listy numerowanej i wypunktowanej. Piotr Chojnacki IV rok, informatyka chemiczna Liceum Ogólnokształcące Nr I we Wrocławiu Wrocław dn. 26 lutego 2006 roku Czas trwania zajęć: 90 minut, przedmiot: TI Temat lekcji: Tworzenie strony internetowej