Znaczenie poleceń HEAD w dokumentach HTML
materiały pomocnicze do wykorzystania na zajęciach koła informatycznego
1. Ogólne refleksje dotyczące nauczania języka HTML.
Ogromne znaczenie Internetu i stron WWW w wielu dziedzinach naszego życia jest kwestią bezdyskusyjną. Wszyscy korzystający z Internetu odwiedzają strony WWW. Czerpiemy z nich wiele przeróżnych informacji. Jesteśmy przeważnie odbiorcami tego dobra, ale możemy stać się przy odrobinie wysiłku twórcami cząstki wirtualnej rzeczywistości.
Nauka języka HTML jest doskonałym narzędziem wprowadzającym ucznia w tajniki wiedzy informatycznej. Zapoznanie się z niewielką częścią podstawowej wiedzy o tym języku pozwala na budowanie swoich własnych stron internetowych. Uczeń wpisując polecenia (znaczniki) w odpowiednim miejscu dokumentu HTML od razu ma możliwość obserwowania efektów swoich działań oglądając tworzoną stronę WWW. Każda zmiana w kodzie strony natychmiast zmienia to co widzimy na tworzonej stronie. Daje to poczucie zadowolenia, radość tworzenia i co bardzo ważne, motywuje do zdobywania dalszej wiedzy pozwalającej mieć coraz większy wpływ na wygląd naszego dzieła.
Szkolne pracownie internetowe zostały wyposażone w podstawowe oprogramowanie niezbędne do prowadzenia zajęć zgodnych z przewidzianym programem nauczania. Do nauki wielu języków programowania niezbędne są odpowiednie programy na które należy przeznaczyć znaczne środki finansowe. Przemnożenie ceny programu przez ilość stanowisk komputerowych daje w wyniku kwoty często bardzo duże i jest w naszych szkolnych warunkach barierą trudną do pokonania. Nauczanie języka HTML nie wymaga żadnych nakładów finansowych na oprogramowanie. Wszystko co potrzebujemy to: edytor tekstu np. Notatnik i przeglądarka internetowa. Obydwa programy są w standardowym wyposażeniu systemu operacyjnego Windows.
Pojawiają się czasem opinie, że lepiej stosować specjalne edytory stron WWW np. Front-Page. Wprawdzie ułatwiają one stworzenie gotowego dokumentu ale z pewnością nie ułatwią nauki języka HTML. Programy te zajmują się tworzeniem kodu często bez udziału użytkownika. Użytkownik podejmuje decyzje jaki efekt chce osiągnąć, oprogramowanie samo generuje odpowiednie znaczniki. Nie ma mowy aby taki użytkownik mógł później wnosić poprawki na stronę poprzez wprowadzanie zmian bezpośrednio w kodzie źródłowym dokumentu. Dokumenty utworzone w takim programie zawierają często dużo zbędnego kodu. Tworząc wszystko samodzielnie jesteśmy w stanie lepiej panować nad tym co się dzieje na stronie WWW. Łatwo możemy modyfikować stronę, wprowadzać poprawki, usuwać część zawartości i wprowadzać nowe elementy. Czujemy wtedy pełnię władzy nad naszym dziełem.
Tworząc w przyszłości strony możemy pomagać sobie odpowiednim oprogramowaniem ale najpierw nauczmy się tabliczki mnożenia, a dopiero później sięgajmy po kalkulator.
Nauka podstaw języka HTML nie jest tematem tego artykułu. Przeglądając różne opublikowane materiały znajdziemy wiele publikacji opisujących wprowadzanie podstaw HTML. W mojej publikacji pragnę skupić się na znaczeniu poleceń sekcji HEAD w dokumencie HTML. Ucząc podstawowych zasad budowania strony WWW w początkowej fazie pomijamy te polecenia, jako nie mające wpływu na wygląd naszej strony. Najczęściej informujemy uczniów o ogólnym przeznaczeniu tych poleceń i to wystarcza na początek. Polecenia sekcji HEAD nabierają znaczenia gdy publikujemy naszą stronę w Internecie i chcemy aby dobrze działała i trafiła do jak największej ilości odbiorców.
W Internecie są miliony stron. Poszukując konkretnej informacji wpisujemy w wyszukiwarkę internetową słowo lub słowa kluczowe (treść, która nas interesuje) i po chwili otrzymujemy wyniki poszukiwań w postaci listy adresów stron WWW zawierających informacje na dany temat. Często są to tysiące adresów. Wśród tych adresów będzie także adres stworzonej i opublikowanej naszej strony (oczywiście przy założeniu, że zbudowaliśmy stronę związaną tematycznie z poszukiwaną treścią). Jeżeli nasza strona będzie na odległym miejscu wspomnianej listy, to szanse na dotarcie użytkowników Internetu do tej strony są niewielkie. Szanse te nieporównywalnie wzrosną, gdy adres naszej strony pojawi się w pierwszej dziesiątce lub dwudziestce wyświetlonych adresów. Prawdziwym sukcesem będzie pierwsza pozycja na tej liście. Czy mamy na to wpływ? Odpowiedz brzmi - tak. O kolejności umieszczenia adresu naszej strony decydują internetowe roboty przeszukujące zasoby Internetu. Uzyskiwane informacje są gromadzone w bazach danych wyszukiwarek internetowych. Programy te badają zawartość pleceń META w sekcji HEAD i odpowiednie zmodyfikowanie tych poleceń może być gwarancją sukcesu. Zawartość sekcji HEAD związana jest także z innymi zagadnieniami. Dalsza część tej pracy przedstawi te zagadnienia.
2. Podstawowa struktura dokumentu HTML
Dokument HTML jest zwykłym plikiem tekstowym, w którym znajdują się polecenia HTML zapisane w postaci ciągu znaków ujętych w ostre nawiasy< >. Dokument możemy stworzyć w dowolnym edytorze tekstu np. w Notatniku. Większość znaczników składa się z dwóch elementów: otwierającego i zamykającego np.
<B>tekst pogrubiony</B> efekt działania znacznika - tekst pogrubiony
<I>tekst pochylony</I> efekt działania znacznika - tekst pochylony
Znacznikiem otwierający każdy dokument HTML jest <HTML>, a zamykającym </HTML>.
Między tymi znacznikami znajdują się dwie sekcje (części): HEAD i BODY. Każda z nich musi być otworzona i zamknięta. Struktura dokumentu wygląda następująco.
<HTML>
<HEAD>
zawartość sekcji (nie jest konieczna aby zaprezentować właściwą zawartość strony WWW umieszczoną w sekcji BODY)
</HEAD>
<BODY>
właściwa treść dokumentu
</BODY>
</HTML>
Przedstawiony wyżej szkielet można już użyć do budowy strony WWW. Warto go jednak wyposażyć dodatkowo w kilka użytecznych instrukcji.
Między znacznikami <HEAD> i </HEAD> powinno się znaleźć polecenie
<TITLE> </TITLE>.
TITLE nie oznacza tytułu strony. Zawarta między tymi znacznikami treść ukaże się na kolorowym pasku tytułowym, znajdującym się u samej góry przeglądarki, a nie w dokumencie.
Drugim bardzo ważnym elementem jest informacja o stronie kodowej dokumentu.
W dokumentach powinniśmy stosować standard kodowania polskich liter ISO-8859-2. Jest to międzynarodowy standard, przyjęty także w charakterze Polskiej Normy. Należy unikać używania innych standardów, np. Windows-1250. W tej chwili praktycznie wszystkie systemy operacyjne są obsługiwane przez przeglądarki potrafiące rozpoznawać deklarację strony kodowej, umieszczanej w ramach części nagłówkowej strony HEAD.
Informacja o standardzie kodowania ma następującą postać:
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
Po uwzględnieniu tych dwóch instrukcji struktura dokumentu HTML przedstawia się następująco:
<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<TITLE>Treść umieszczona na pasku tytułowym przeglądarki </TITLE>
</HEAD>
<BODY>
właściwa treść dokumentu
</BODY>
</HTML>
Jeżeli dodamy do tego specjalny prolog identyfikujący poziom używanego języka HTML (w naszym wypadku HTML 4.0), który umieszczamy jeszcze przed otwarciem znacznika <HTML> otrzymamy już właściwy podstawowy szkielet dokumentu HTML.
Tym prologiem jest:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
Prolog jest m.in. wykorzystywany jako oznaczenie poziomu w procesie weryfikacji poprawności składni za pomocą tzw. parserów. Parsery przyjmują jako podstawę badania poprawności składniowej zadeklarowaną wersję języka, w tym wypadku HTML 4.0.
Nasz szkielet wygląda następująco:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<TITLE>Treść umieszczona na pasku tytułowym przeglądarki </TITLE>
</HEAD>
<BODY>
właściwa treść dokumentu
</BODY>
</HTML>
3. Polecenia sekcji HEAD
Polecenia HEAD zawierają informacje dotyczące danego dokumentu. Dane te nie są widoczne w oknie przeglądarki, lecz służą przede wszystkim jako pomoc dla wyszukiwarek, podając im opis strony dla przeglądarki, która korzysta z zawartej tam bazowej nazwy domeny. Znajdują się tu także inne dane mające różne zastosowania, nie wyświetlane jednak wraz z resztą strony. Polecenia z sekcji HEAD ładowane są w pierwszej kolejności i to, co jest zawarte między nimi, przetwarzane jest przez przeglądarkę przed resztą strony.
W poprzednim punkcie wspomniałem o dwóch poleceniach sekcji HEAD. Poniżej zostaną przedstawione wszystkie polecenia, które warto umieścić na stronie WWW.
Polecenie <TITLE></TITLE>
Najczęściej używane polecenie sekcji HEAD. Zawarty między znacznikami tekst ukazuje się w belce tytułowej przeglądarki. Tytułu nie należy mylić z pierwszym nagłówkiem strony, aczkolwiek oba te elementy mogą mieć oczywiście tę samą treść.
Polecenia <META>
Jest to opcjonalne polecenie, które bardziej szczegółowo informuje o zawartości dokumentu, np. dla celów katalogowych czy indeksów, wykorzystywanych przez odpowiednie programy, np. wyszukiwarki sieciowe. Zawiera ono trzy atrybuty: HTTP-EQUIV, NAME i CONTENT w kombinacji pierwszy z trzecim lub drugi z trzecim.
HTTP-EQUIV - definiuje zmienne systemowe
NAME - zmienne użytkownika.
Polecenie META jest poleceniem opcjonalnym, nie wymaganym dla poprawności dokumentu, używanie go jest zalecane gdyż usprawnia funkcjonowanie witryny w Sieci. META nie jest zbiorem nikomu niepotrzebnych zaklęć, lecz użytecznym instrumentem współpracującym z przeglądarkami internetowymi i sieciowymi wyszukiwarkami. Wstawienie poleceń META przynosi niezaprzeczalne korzyści.
Najważniejsze polecenia META:
Polecenie <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-2">
Polecenie jest deklaracją strony kodowej dokumentu. Jeżeli chcemy umieścić na stronie WWW dowolny tekst w języku polskim, nie unikniemy użycia polskich znaków (ś, ć, ź, ę, ą itp.). Aby inni użytkownicy Internetu mogli zobaczyć je we właściwej postaci należy użyć opisywane polecenie META. Polecenie to umieszczamy bezpośrednio po znaczniku <HEAD>. Dzięki niemu przeglądarka będzie wiedzieć, jakiego sposobu kodowania znaków należy użyć, aby wyświetlić polskie „ogonki”.
Polecenie to jest bezwzględnie zalecane przy tworzeniu stron WWW. Jego brak jest, niestety, powszechnym błędem na stronach HTML-owych nowicjuszy.
Polecenie <META NAME ="Description" CONTENT="wpisana treść">
Polecenie to opisuje zawartość strony. Zaleca się stosowanie go, gdyż dzięki niemu ułatwiamy pracę osobom korzystającym z wyszukiwarki. Przykładowo, gdy posłużymy się Infoseekiem, szukając stron poświęconym miastu Dębno, łatwo dostrzeżemy funkcjonalność poleceń TITLE i Description. To, co umieściliśmy w ramach TITLE, zostanie wyświetlone jako tytuł znalezionej strony. Z kolei zawartość Description zostanie wyświetlona niżej, jako opis naszej strony. Gdybyśmy nie użyli Description, wyszukiwarka wyświetli kilka pierwszych wierszy naszego dokumentu, które mogą być zupełnie przypadkowe. Uważnie i świadomie zredagowana zawartość Description da natychmiast orientację co do zawartości strony. Może to być na przykład:
Polecenie <META NAME ="Description" CONTENT="Dębno: strona zawiera podstawowe informacje o mieście leżącym nad rzeką Kosą.">
Zaleca się nie stosować więcej niż 150-200 znaków.
Polecenie <META NAME="Keywords" CONTENT="wyrazy kluczowe">
Polecenie informuje o wyrazach kluczowych dokumentu, zwracając przykładową wartość. Warto stosować wyrazy kluczowe, gdyż ułatwia to pracę sieciowym programom indeksująco-wyszukiwawczym i zwiększa szansę znalezienia strony przez innych użytkowników. To my właśnie decydujemy tutaj, jakie są istotne elementy strony. Jeśli nasza strona zawiera opis naszej drogi do zdobycia tytułu nauczyciela dyplomowanego, moglibyśmy podać wyrazy kluczowe "awans zawodowy,nauczyciel,nauczyciel dyplomowany,szkoła,oświata". Poszczególne wyrazy kluczowe są oddzielane przecinkami.
Polecenie <META NAME="Language" CONTENT="pl">
Polecenie informuje o języku strony. Niektóre przeglądarki korzystają z niego przy precyzowaniu zapytań. Dla języka angielskiego użyjemy en, dla amerykańskiego angielskiego en-us, dla niemieckiego de, dla francuskiego fr.
Polecenie <META NAME="Author" CONTENT="imię i nazwisko">
Polecenie informuje o autorze strony.
Polecenie <META NAME="copyright" CONTENT="Wszystkie prawa zastrzeżone">
Polecenie informuje wyszukiwarki, do kogo należą prawa autorskie do danej strony.
Polecenie <META NAME="expires" CONTENT="10 September 2004">
Polecenie automatycznego unieważnienia dokumentu HTML w bazie danych wyszukiwarki.
Polecenie <META NAME="robots" CONTENT="all">
Polecenie dla robotów internetowych przeszukujących zasoby Internetu.
Zawartość CONTENT decyduje o zachowaniu się tego programu po natrafieniu na naszą stronę i o efektach indeksacji.
Zawartość CONTENT="index"> polecenie indeksowania zawartości serwisu internetowego
Zawartość CONTENT="noindex"> polecenie nie indeksowania zawartości serwisu
Zawartość CONTENT="nofollow"> polecenie indeksowania tylko strony głównej
Zawartość CONTENT="all">polecenie indeksowania wszystkich stron serwisu
Polecenie <META NAME="Generator" CONTENT="nazwa edytora">
Polecenie informuje o użytym narzędziu do tworzenia stron HTML, np. Front-Page, Pajączek, Tiger98.
Polecenie <META HTTP-EQUIV="Refresh" CONTENT="x">
Polecenie spowoduje regularne odświeżanie strony co x sekund. Może to mieć praktyczne zastosowanie w przypadku, gdy strona zawiera bardzo często aktualizowane informacje (wiele razy dziennie). Gdy użytkownik korzysta ze strony przez dłuższy czas, strona będzie się sama aktualizowała.
Polecenie <META HTTP-EQUIV="Refresh" CONTENT="x; URL=http://.../strona.html">
Polecenie spowoduje automatyczne wczytanie nowej strony po x sekundach. W Internecie często spotyka się strony z informacją o zmianie adresu, gdy odsyłacz z innej strony jest już nieaktualny. Autor strony pozostawia pod starym adresem informację o zmianie, podając nowy adres, ale opatrując tę stronę zaprezentowanym poleceniem, które spowoduje automatyczne przejście pod właściwy adres po x sekundach. Tylko niektóre przeglądarki interpretują to polecenie.
Polecenie <META HTTP-EQUIV="Creation-Date" CONTENT="Tue, 04 Dec 1993 21:29:02 GMT">
Polecenie informuje o dacie utworzenia dokumentu, zwracając wartość (np. sieciowemu indekserowi) Creation-Date: Tue, 04 Dec 1993 21:29:02 GMT.
Polecenie <BASE HREF>
Polecenie definiuje bazowy adres dokumentu.
<BASE HREF="http://www.debnogp.republika.pl/">
Polecenie w tej postaci zapewnia poprawność relatywnych odsyłaczy w dokumencie. Niekiedy dokumenty są przenoszone do innych miejsc, gdy wymaga tego porządek na serwerze. Jednak w dokumentach znajdują się zazwyczaj relatywne odsyłacze do innych stron na serwerze, a nie odsyłacze absolutne. Oznacza to, że nie jest w nich podawana pełna ścieżka dostępu, lecz jedynie jej fragmenty. Jest to znacznie wygodniejsze w trakcie konstruowania dokumentu.
Gdy dokument zostanie przeniesiony, może się zdarzyć, że odsyłacze stracą swoją aktualność, gdyż przeglądarka będzie je odnosić do nowego położenia dokumentu. Oczywiście poprawność wymagałaby w takiej sytuacji albo przeniesienia wszystkich dokumentów, do których odsyłacze znajdują się na danej stronie, albo ręcznego poprawienia adresów. Jedno i drugie może być bardzo kłopotliwe, a przeniesienie nawet z jakichś powodów niemożliwe. W takiej sytuacji wygodnym rozwiązaniem jest podanie <BASE> w sekcji HEAD przenoszonej strony. Przeglądarka będzie automatycznie, "w locie" poprawiać adres w odsyłaczu, kierując się podanym adresem bazowym.
Np.
<BASE HREF="http://www.debnogp.republika.pl/">
Cokolwiek zawrzemy w cudzysłowie, dodawane jest przed każdym odnośnikiem, jaki napiszemy. Pisząc w dokumencie odnośnik <A HREF=”szkola.html”> w wyniku działania polecenia BASE HREF odnośnik staje się automatycznie odnośnikiem <A HREF=” http://www.debnogp.republika.pl/szkola.html”>.
Umieszczając wymienione i opisane wyżej polecenia META w sekcji HEAD otrzymamy następującą strukturę dokumentu HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<TITLE>Treść umieszczona na pasku tytułowym przeglądarki </TITLE>
<META NAME ="Description" CONTENT="wpisana treść">
<META NAME="Keywords" CONTENT="wyrazy kluczowe">
<META NAME="Language" CONTENT="pl">
<META NAME="Author" CONTENT="imię i nazwisko">
<META NAME="copyright" CONTENT="Wszystkie prawa zastrzeżone">
<META NAME="expires" CONTENT="10 September 2004">
<META NAME="robots" CONTENT="all">
<META NAME="Generator" CONTENT="nazwa edytora">
<META HTTP-EQUIV="Refresh" CONTENT="x">
<META HTTP-EQUIV="Refresh" CONTENT="x; URL=http://.../strona.html">
<META HTTP-EQUIV="Creation-Date" CONTENT="Tue, 04 Dec 1993 21:29:02 GMT">
<BASE HREF="http://www.debnogp.republika.pl/">
</HEAD>
<BODY>
właściwa treść dokumentu
</BODY>
</HTML>
Oczywiście nie musimy zamieszczać wszystkich wymienionych poleceń. Wybieramy je według własnego uznania, zgodnie z charakterem naszej strony i jej przeznaczeniem. Wiele zależy co tego, co chcemy przekazać i do jakiego kręgu odbiorców jest skierowany ten przekaz. Jeżeli chcemy zdobyć jak największe grono odbiorców, to powinniśmy zgłosić i zarejestrować naszą stronę w najpopularniejszych wyszukiwarkach internetowych.
Opracował mgr inż. Ryszard Behnke