mgr Tomasz Grbski Konspekt do lekcji elementy informatyki dla klasy 4e Liceum Ogólnokształccego Temat lekcji: Podstawy jzyka HTML. Czas trwania: 45 minut Cel ogólny: poznanie budowy i najwaniejszych polece jzyka HTML. Cele edukacyjne: po tej lekcji ucze: wie, do czego słuy jzyk HTML, zna podstawowe zasady posługiwania si tym jzykiem, wie, z jakich czci składa si dokument HTML, rozumie pojcia: atrybuty, właciwoci, znaczniki, sekcje, potrafi napisa prost stron WWW w Notatniku posługujc si jzykiem HTML, potrafi wyjani rónice midzy tworzeniem stron w programie FrontPage a tworzeniem ich w jzyku HTML, Metoda pracy: podajca: elementy wykładu i pogadanki, wiczeniowa, problemowa. Formy pracy: indywidualna, grupowa. Materiały i rodki dydaktyczne: komputery, oprogramowanie: Front Page, Notatnik. przygotowane tabele z najwaniejszymi poleceniami jzyka HTML. wydruki komputerowe. 1. Czynnoci organizacyjno-porzdkowe Przywitanie uczniów, sprawdzenie frekwencji, omówienie spraw organizacyjnych 2. Sformułowanie tematu i uwiadomienie celów lekcji Nauczyciel wyjania termin HTML i omawia zastosowanie tego jzyka. 3. Realizacja tematu a) Nauczyciel omawia podstawowe zasady budowy jzyka HTML, wyjania znaczenie słów znacznik, atrybut, sekcja. Uczniowie otrzymuj wydruki komputerowe z najwaniejszymi informacjami na ten temat (załcznik 1) 1
b) Nauczyciel omawia struktur strony WWW, wskazuje trzy wane jej czci, zwracajc uwag na znaczniki, po których mona rozpozna poszczególne czci strony. c) Uczniowie uruchamiaj program Front Page i tworz przy jego pomocy bardzo prost stron zawierajc krótki tekst, tabel i zmienione tło (załcznik 3, zad.1). Nastpnie, w programie tym, korzystaj z zakładki HTML i zauwaaj jak wiele informacji zawiera ta strona w jzyku HTML. Wyodrbniaj omówione wczeniej czci strony. d) Nauczyciel omawia najwaniejsze polecenia jzyka HTML. Uczniowie otrzymuj wydruk w formie tabeli (załcznik 2). e) Uczniowie uruchamiaj Nowy Dokument w programie Front Page, przechodz do zakładki HTML i tworz stron WWW uywajc ju tylko polece jzyka HTML. Zmieniaj m.in. rozmiar i kolor czcionki, format tekstu, kolor tła (załcznik 3, zad.2). f) Uczniowie uruchamiaj program Notatnik i wykonuj w nim kolejn stron (załcznik 3, zad.3) 4. Podsumowanie lekcji. Uczniowie wyraaj swoj opini na temat tworzenia stron WWW przy pomocy Front Page a i Notatnika. Wyszukuj plusy i minusy tworzenia stron WWW w tych programach. Nauczyciel ocenia aktywno uczniów. Praca domowa: zad.3,4 (załcznik 3) 2
ZAŁCZNIK NR 1 1. HTML-jzyk znaczników Pomimo, e na pierwszy rzut oka kod HTML-a moe przeraa, zasady jego konstruowania s bardzo proste. Wybrany fragment dokumentu ograniczany jest tzw, znacznikami, nadajcymi mu pewne właciwoci. Znaczniki s słowami kluczowymi ujtymi w nawiasy trójktne: <" i >". Fragment dokumentu majcy pewne właciwoci ograniczony jest nastpujco: <znacznik> fragment dokumentu </znacznik>. Struktura taka moe mie charakter wielopoziomowy, tzn., e poszczególne znaczniki mog zawiera si w innych, np. <znacznik1> fragment dokumentu <znacznik2> fragment dokumentu </znacznik2> </znacznik1>. Znaczniki nie mog si wzajemnie przeplata. Poniszy fragment kodu jest nieprawidłowy: <znacznik1> fragment dokumentu <znacznik2> fragment dokumentu </znacznik1> </znacznik2>. W jzyku HTML wystpuj równie znaczniki nie majce swych odpowiedników zamykajcych, np. znacznik definiujcy lini (<HR>), czy znak podziału wiersza (<BR>). Wikszo znaczników posiada tzw. atrybuty, czyli właciwoci, pozwalajce na zmodyfikowanie cech fragmentu dokumentu zawartego pomidzy znacznikiem otwierajcym i zamykajcym. Znacznik moe posiada wiele atrybutów; atrybutowi moe by przypisana warto: <znacznik atrybut= warto > fragment dokumentu </znacznik> Na przykład dla znacznika definiujcego akapit <P> </P> mona zdefiniowa cech wyrównanie (ALIGN) oraz jej warto: LEFT, RIGHT, CENTER, np.: <P ALIGN="CENTER"> akapit </P>. Jeeli znacznik posiada kilka atrybutów mona okreli kilka jednoczenie. 2. Struktura strony Wanym elementem dokumentu HTML jest jego konstrukcja. W definicji dokumentu mona wyróni trzy główne czci. Pierwsza cz - definicja typu Pierwsza cz zawiera definicj typu, czyli jedn linijk kodu okrelajc specyfikacj jzyka HTML, za pomoc której okrelana jest poprawno definicji zawartoci strony. Typowa deklaracja typu ma posta: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> Brak definicji typu nie spowoduje wikszych szkód, jednak definicja ta wymagana jest w standardzie HTML 4.0. Pozostała cz dokumentu zawarta pomidzy znacznikami <HTML> </HTML> i zawiera kolejne dwa bloki definiujce zawarto strony. Cze druga - nagłówek dokumentu Nagłówek dokumenty zawarty jest pomidzy znacznikami <HEAD> </HEAD>. Dane zawarte pomidzy tymi znacznikami nie s elementami wizualnymi. Zawieraj m.in. informacje o standardzie kodowania znaków, autorze strony, dacie modyfikacji, a take słowa kluczowe, z których korzystaj serwisy wyszukiwawcze. Cze trzecia tre strony Trzecia cz dokumentu okrela faktyczn zawarto strony ze znacznikami niezbdnymi do właciwej jej prezentacji. Sekcja ta zawarta jest pomidzy znacznikami <BODY> </BODY>. Zatem poprawna struktura dokumentu HTML powinna wyglda nastpujco: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> 3
ZAŁCZNIK NR 2 3. Podstawowe znaczniki HTML-a i ich atrybuty Ponisze zestawienie przedstawia najwaniejsze znaczniki specyfikacji HTML 4.0. Znaczniki sekcji <HEAD> </HEAD> Znacznik i jego zastosowanie <META> dodatkowe informacje o dokumencie <TITLE>< /TITLE> tytuł strony Atrybuty name - nazwa zmiennej content - warto zmiennej lang - identyfikator jzyka Przykład <META name="author" content="jan Nowak"> <TITLE> Moja strona domowa </TITLE> <BODY></BODY> linia pozioma Znaczniki sekcji <BODY> </ BODY > background -styl tła text -kolor tekstu link -kolor łczy alink -kolor łcza aktywnego vlink -kolor łcza odwiedzonego <BODY BGCOLOR="#990000" LINK="#FFOOOO"> <B></B> pogrubienie title tekst <B> tekst pogrubiony </B> <I></I> pochylenie Title tekst <I> tekst pochylony </I> <U>< /U> podkrelenie tekst <U> tekst podkrelony </U> <P></P> akapit <P>akapit1</P> <P ="center">akapit2</p> <FONT></ FONT > definicja czcionki <BR> znak podziału wiersza <H1></H1> <H2></H2> <H3></H3> <H4></H4> <H5></H5> <H6></H6> nagłówki poziomów tekstu size -rozmiar czcionki color -kolor face -krój <FOMT size="+2" color="blue"> niebieski tekst </FONT> <H1> Cz II </H1> <H2> Rozdział l </H2> <H3> Paragraf la </H3> <HR> linia pozioma <OL></OL> lista uporzdkowana <UL></UL> lista punktowana -wyrównanie size -wysoko width -szeroko color -kolor type -styl wyróniania elementów start -warto pocztkowa type -styl wyróniania elementów <HR ALIGN="CENTER" SIZE="1"> <OL> <LI>punktl</LI> <LI>punkt2</LI> </OL> <UL> <LI>punkt1</LI> <LI>punkt2</LI> </UL> 4
<LI></LI> element listy (łczone z <OL> lub <UL> <IMG> wstawienie obrazka <A></A> odsyłacz type -styl wyróniania elementów src -połoenie pliku graficznego width height alt border name -nazwa href -adres URL dokumentu połczonego title -tekst chmurki (dla linku tekstowego) <IMG SRC="images/kot.gif" BORDER="0" ALT=" "> <A HREF="index.html"> </A> <TABLE> </TABLE> definicja tabeli <TR></TR> definicja wiersza tabeli <TD></TD> definicja komórki tabeli width border celispacing -odstpy midzy komórkami cellpadding -margines wewntrzny komórek tabeli bgcolor -kolor tła tabeli v -wyrównanie w pionie v -wyrównanie w pionie width height colspan rozszerzenie komórki na kilka kolumn rowspan -rozszerzenie komórki na kilka wierszy <TABLE BORDER="1" CELLSPACING="2" > <TR> <TD></TD> <TD></TD> </TR> </TABLE> jak wyej jak wyej Znaczenie atrybutów uniwersalnych: - wyrównanie w poziomie alt - tekst alternatywny dla elementu (zawarto chmurki) bgcolor - kolor tła border - grubo obramowania height - wysoko elementu href - adres URL łczonego dokumentu widht - szeroko elementu 5
ZAŁCZNIK NR 3 Zad.1. W programie Front Page utwórz stron WWW zawierajc: Imi i nazwisko kolorem niebieskim Adres kolorem czerwonym Tabel zawierajc jednodniowy plan lekcji Ustaw kolor tła strony na ółty. Zad. 2. Przy uyciu jzyka HTML, w programie Front Page, w zakładce HTML utwórz stron zawierajc: Tekst powitalny kolorem czerwonym Imi i nazwisko kolorem zielonym Ustaw kolor tła na niebieski. Zad.3. Uywajc programu Notatnik utwórz stron zawierajc: Tabel z imionami i nazwiskami 10 osób z klasy. Praca domowa: Zad.4. Uywajc Notatnika utwórz stron powitaln swojej szkoły, zawierajc: Powitanie Nazw szkoły Adres szkoły Atuty szkoły w tabeli Uyj rónych kolorów. Dla chtnych Zad.5. Uywajc Notatnika utwórz stron główn oraz dwie podstrony na dowolny temat. Uyj moliwie najwicej znanych ci polece jzyka HTML 6