Podstawy języka HTML.

mgr Tomasz Gr bski
Konspekt do lekcji elementy informatyki dla klasy 4e Liceum
Ogólnokształc cego
Temat lekcji: Podstawy j zyka HTML.
Czas trwania: 45 minut
Cel ogólny: poznanie budowy i najwa niejszych polece j zyka HTML.
Cele edukacyjne: po tej lekcji ucze :
•
wie, do czego słu y j zyk HTML,
•
zna podstawowe zasady posługiwania si tym j zykiem,
•
wie, z jakich cz ci składa si dokument HTML,
•
rozumie poj cia: atrybuty, wła ciwo ci, znaczniki, sekcje,
•
potrafi napisa prost stron WWW w Notatniku posługuj c si j zykiem HTML,
•
potrafi wyja ni ró nice mi dzy tworzeniem stron w programie FrontPage a
tworzeniem ich w j zyku HTML,
Metoda pracy: podaj ca: elementy wykładu i pogadanki, wiczeniowa, problemowa.
Formy pracy: indywidualna, grupowa.
Materiały i rodki dydaktyczne:
•
komputery,
•
oprogramowanie: Front Page, Notatnik.
•
przygotowane tabele z najwa niejszymi poleceniami j zyka HTML.
•
wydruki komputerowe.
1. Czynno ci organizacyjno-porz dkowe
Przywitanie uczniów, sprawdzenie frekwencji, omówienie spraw organizacyjnych
2. Sformułowanie tematu i u wiadomienie celów lekcji
Nauczyciel wyja nia termin HTML i omawia zastosowanie tego j zyka.
3. Realizacja tematu
a) Nauczyciel omawia podstawowe zasady budowy j zyka HTML, wyja nia znaczenie
słów znacznik, atrybut, sekcja. Uczniowie otrzymuj wydruki komputerowe z
najwa niejszymi informacjami na ten temat (zał cznik 1)
1
b) Nauczyciel omawia struktur strony WWW, wskazuje trzy wa ne jej cz ci,
zwracaj c uwag na znaczniki, po których mo na rozpozna poszczególne cz ci strony.
c) Uczniowie uruchamiaj program Front Page i tworz przy jego pomocy bardzo
prost stron zawieraj c krótki tekst, tabel i zmienione tło (zał cznik 3, zad.1). Nast pnie,
w programie tym, korzystaj z zakładki HTML i zauwa aj jak wiele informacji zawiera ta
strona w j zyku HTML. Wyodr bniaj omówione wcze niej cz ci strony.
d) Nauczyciel omawia najwa niejsze polecenia j zyka 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 u ywaj c ju tylko polece j zyka 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 wyra aj 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-j zyk znaczników
Pomimo, e na pierwszy rzut oka kod HTML-a mo e przera a , zasady jego konstruowania s bardzo proste.
Wybrany fragment dokumentu ograniczany jest tzw, znacznikami, nadaj cymi mu pewne wła ciwo ci.
Znaczniki s słowami kluczowymi uj tymi w nawiasy trójk tne: „<" i „>". Fragment dokumentu maj cy pewne
wła ciwo ci ograniczony jest nast puj co:
<znacznik> fragment dokumentu </znacznik>.
Struktura taka mo e 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 . Poni szy fragment kodu jest
nieprawidłowy:
<znacznik1> fragment dokumentu
<znacznik2> fragment dokumentu </znacznik1> </znacznik2>.
W j zyku HTML wyst puj równie znaczniki nie maj ce swych odpowiedników zamykaj cych, np. znacznik
definiuj cy lini (<HR>), czy znak podziału wiersza (<BR>).
Wi kszo znaczników posiada tzw. atrybuty, czyli wła ciwo ci, pozwalaj ce na zmodyfikowanie cech
fragmentu dokumentu zawartego pomi dzy znacznikiem otwieraj cym i zamykaj cym. Znacznik mo e posiada
wiele atrybutów; atrybutowi mo e by przypisana warto :
<znacznik atrybut=”warto ”> fragment dokumentu </znacznik>
Na przykład dla znacznika definiuj cego akapit <P> </P> mo na zdefiniowa cech wyrównanie (ALIGN)
oraz jej warto : LEFT, RIGHT, CENTER, np.:
<P ALIGN="CENTER"> akapit </P>.
Je eli znacznik posiada kilka atrybutów mo na okre li kilka jednocze nie.
2. Struktura strony
Wa nym elementem dokumentu HTML jest jego konstrukcja. W definicji dokumentu mo na wyró ni trzy
główne cz ci.
Pierwsza cz
- definicja typu
Pierwsza cz
zawiera definicj typu, czyli jedn linijk kodu okre laj c specyfikacj j zyka HTML, za
pomoc której okre lana jest poprawno definicji zawarto ci strony. Typowa deklaracja typu ma posta :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> Brak definicji typu nie spowoduje
wi kszych szkód, jednak definicja ta wymagana jest w standardzie HTML 4.0.
Pozostała cz
dokumentu zawarta pomi dzy znacznikami <HTML> </HTML> i zawiera kolejne dwa
bloki definiuj ce zawarto strony.
Cze druga - nagłówek dokumentu
Nagłówek dokumenty zawarty jest pomi dzy znacznikami <HEAD> </HEAD>. Dane zawarte pomi dzy
tymi znacznikami nie s elementami wizualnymi. Zawieraj m.in. informacje o standardzie kodowania znaków,
autorze strony, dacie modyfikacji, a tak e słowa kluczowe, z których korzystaj serwisy wyszukiwawcze.
Cze trzecia — tre strony
Trzecia cz
dokumentu okre la faktyczn zawarto strony ze znacznikami niezb dnymi do wła ciwej jej
prezentacji. Sekcja ta zawarta jest pomi dzy znacznikami <BODY> </BODY>.
Zatem poprawna struktura dokumentu HTML powinna wygl da nast puj co:
<!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
Poni sze zestawienie przedstawia najwa niejsze znaczniki specyfikacji HTML 4.0.
Znaczniki sekcji <HEAD> </HEAD>
Znacznik i jego
zastosowanie
Atrybuty
Przykład
<META> dodatkowe
informacje o dokumencie
name - nazwa zmiennej content warto zmiennej
<META name="Author" content="Jan Nowak">
<TITLE>< /TITLE> tytuł
strony
lang - identyfikator j zyka
<TITLE> Moja strona domowa </TITLE>
Znaczniki sekcji <BODY> </ BODY >
<BODY></BODY> linia
pozioma
background -styl tła
<BODY BGCOLOR="#990000"
LINK="#FFOOOO">
text -kolor tekstu
link -kolor ł czy
alink -kolor ł cza aktywnego
vlink -kolor ł cza odwiedzonego
<B></B> pogrubienie
title
tekst <B> tekst pogrubiony </B>
<I></I> pochylenie
Title
tekst <I> tekst pochylony </I>
<U>< /U>
podkre lenie
tekst <U> tekst podkre lony </U>
<P></P> akapit
align
<P>akapit1</P> <P align="center">akapit2</P>
<FONT></ FONT >
definicja czcionki
size -rozmiar czcionki
color -kolor
face -krój
<FOMT size="+2" color="blue"> niebieski tekst
</FONT>
<BR>
znak podziału wiersza
<H1></H1> <H2></H2>
<H3></H3> <H4></H4>
<H5></H5> <H6></H6>
nagłówki poziomów tekstu
<H1> Cz
II </H1>
<H2> Rozdział l </H2>
<H3> Paragraf la </H3>
<HR>
linia pozioma
align -wyrównanie
size -wysoko
width -szeroko
color -kolor
<HR ALIGN="CENTER" SIZE="1">
<OL></OL> lista
uporz dkowana
type -styl wyró niania
elementów
start -warto pocz tkowa
<OL>
<LI>punktl</LI>
<LI>punkt2</LI>
</OL>
<UL></UL> lista
punktowana
type -styl wyró niania
elementów
<UL>
<LI>punkt1</LI>
<LI>punkt2</LI>
</UL>
4
<LI></LI> element listy
(ł czone z <OL> lub
<UL>
<IMG> wstawienie
obrazka
type -styl wyró niania
elementów
<A></A>
odsyłacz
name -nazwa
href -adres URL
dokumentu
poł czonego
title -tekst chmurki
(dla linku
tekstowego)
<TABLE> </TABLE>
definicja tabeli
align
width
border
celispacing -odst py mi dzy
komórkami
cellpadding -margines
wewn trzny
komórek tabeli
bgcolor -kolor tła tabeli
src -poło enie pliku graficznego <IMG SRC="images/kot.gif" BORDER="0"
width
ALT=" ">
height
alt
border
align
<A HREF="index.html"> </A>
<TR></TR>
definicja wiersza tabeli
align
valign -wyrównanie w
pionie
<TD></TD>
definicja komórki tabeli
align
valign -wyrównanie w pionie
width
height
colspan –rozszerzenie komórki
na kilka kolumn
rowspan -rozszerzenie
komórki na kilka
wierszy
Znaczenie atrybutów uniwersalnych:
align - wyrównanie w poziomie
alt - tekst alternatywny dla elementu (zawarto
bgcolor - kolor tła
border - grubo obramowania
height - wysoko elementu
href - adres URL ł czonego dokumentu
widht - szeroko elementu
<TABLE BORDER="1" CELLSPACING="2" >
<TR>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
jak wy ej
chmurki)
5
jak wy ej
ZAŁ CZNIK NR 3
Zad.1.
W programie Front Page utwórz stron WWW zawieraj c :
Imi i nazwisko – kolorem niebieskim
Adres – kolorem czerwonym
Tabel zawieraj c jednodniowy plan lekcji
Ustaw kolor tła strony na ółty.
Zad. 2.
Przy u yciu j zyka HTML, w programie Front Page, w zakładce HTML utwórz stron zawieraj c :
Tekst powitalny – kolorem czerwonym
Imi i nazwisko – kolorem zielonym
Ustaw kolor tła na niebieski.
Zad.3.
U ywaj c programu Notatnik utwórz stron zawieraj c :
Tabel z imionami i nazwiskami 10 osób z klasy.
Praca domowa:
Zad.4.
U ywaj c Notatnika utwórz stron powitaln swojej szkoły, zawieraj c :
Powitanie
Nazw szkoły
Adres szkoły
Atuty szkoły w tabeli
U yj ró nych kolorów.
Dla ch tnych
Zad.5.
U ywaj c Notatnika utwórz stron główn oraz dwie podstrony na dowolny temat. U yj mo liwie
najwi cej znanych ci polece j zyka HTML
6