103
3
Zaczynamy od podstaw
Rozdział 4.
W poprzednich rozdziałach dowiedziałeś się, jak za pomocą World Wide Web zaplanować i zorganizować swoje witryny internetowe oraz dlaczego HTML jest niezbędny do tworzenia stron WWW. Utworzyłeś nawet swoją pierwszą stronę. Dziś dowiesz się więcej o każdym z podstawowych znaczników HTML oraz rozpoczniesz pisanie stron WWW zawierających nagłówki, paragrafy i różne rodzaje list. Rozdział ten poświęcony jest następującym tematom i znacznikom HTML, wyliczonym poniżej:
· znaczniki ogólnej struktury strony: <HTML>, <HEAD> i <BODY>,
· znaczniki tytułów, nagłówków i paragrafów: <TITLE>, <H1>...<H6> oraz <P>,
· znaczniki komentarzy: <!--...-->,
· znaczniki list: <OL>, <UL>, <LI>, <DT> oraz <DD>.
W HTML-u zdefiniowane są trzy znaczniki, które opisują ogólną strukturę strony oraz dostarczają podstawowych informacji nagłówkowych. Znaczniki te, <HTML>, <HEAD> oraz <BODY>, identyfikują stronę WWW w przeglądarkach lub w innych narzędziach HTML. Mogą także zawierać najistotniejsze informacje o stronie, na przykład, tytuł lub nazwisko autora. Znaczniki, opisujące strukturę strony, nie mają wpływu na jej wygląd w przeglądarce, istnieją tylko po to, aby pomóc przeglądarkom w przetwarzaniu plików HTML.
Zgodnie ze ścisłą definicją HTML-a, znaczniki te są opcjonalne, znaczy to, że ich brak nie uniemożliwia odczytania strony przez przeglądarkę. Znaczniki te są jednak wymagane w XHTML-u 1.0. Nie jest również wykluczone, że pojawią się narzędzia, które będą ich wymagały. Już teraz powinieneś wyrobić sobie nawyk stosowania znaczników określających strukturę strony.
Choć użycie znaczników struktury strony nie jest konieczne, proponowana specyfikacja XHTML 1.0 wymaga jednego dodatkowego elementu w kodzie strony WWW. Pierwsza linia każdej strony musi zawierać identyfikator DOCTYPE, określający wersję XHTML 1.0, z którą Twoja strona jest zgodna oraz definicję rodzaju dokumentu (DTD — Document Type Definition), która określa jego specyfikację. Następnie wprowadzasz znaczniki <HTML>, <HEAD> i <BODY>. W poniższym przykładzie, przed znacznikami struktury strony występuje określenie typu dokumentu XHTML 1.0 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
<html>
<head>
<title>Tytuł strony</title>
</head>
<body>
...treść Twojej strony...
</body>
</html>
W specyfikacji XHTML 1.0 określone zostały trzy rodzaje dokumentów HTML 4.0: Strict, Transitional oraz Frameset. Więcej informacji o znaczniku DOCTYPE znajdziesz w rozdziale 10. „XHTML i arkusze stylów”, natomiast informacje o dokumentach Strict, Transitional i Frameset odnajdziesz w rozdziale 24. „Projektowanie witryn do praktycznych zastosowań”.
Pierwszym znacznikiem struktury, znajdującym się na każdej stronie jest <HTML>. Mówi on o tym, że zawartość odczytywanego właśnie pliku to kod, napisany w HTML-u. W proponowanej specyfikacji XHTML 1.0 znacznik <HTML> powinien zostać poprzedzony identyfikatorem DOCTYPE (o którym wspominałam w powyższej notatce), jak pokazałam w poniższym przykładzie.
Cała zawartość pliku, czyli treść i znaczniki powinny znajdować się pomiędzy początkowym i końcowym znacznikiem <HTML>, tak jak w poniższym przykładzie:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd"><html>...twoja strona....</html>
Para znaczników <HEAD> ... </HEAD> wyznacza nagłówek strony. W obrębie nagłówka znajduje się tylko kilka innych znaczników (najczęściej tytuł strony, opisany w dalszej części). W żadnym wypadku nie należy umieszczać w tym miejscu treści strony.
Oto typowy przykład poprawnego użycia znacznika <HEAD> (o znaczniku <TITLE> opowiem później):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"><html><head><title>To jest Tytuł</title>
....
Pozostała część strony (w poniższym przykładzie przedstawiona jako „.... treść strony ....”), znajduje się pomiędzy początkowym i końcowym znacznikiem <BODY>. Cały kod, łącznie ze znacznikami <HTML> i <HEAD>, przedstawia się następująco:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"><HTML><HEAD>
<TITLE>To jest Tytuł. Dalej znajdziesz więcej wyjaśnień</TITLE>
</HEAD>
<BODY>
.... treść strony ....
</BODY>
</HTML>
W powyższym przykładzie widać wyraźnie, że znaczniki HTML są w sobie nawzajem zagnieżdżone. Obydwa znaczniki <BODY> i </BODY> znajdują się pomiędzy początkowym i końcowym znacznikiem <HTML>, podobnie sprawa ma się w przypadku znaczników <HEAD>. Wszystkie znaczniki HTML-a działają właśnie w ten sposób — formatują zagnieżdżone fragmenty tekstu. Musisz bardzo uważać, aby nie mylić kolejności znaczników, jak w poniższym, błędnym przykładzie:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"><HTML>
<HEAD>
Za każdym razem, kiedy zamykasz znacznik, musisz upewnić się, że zamykasz ostatni, który został otwarty (więcej o zamykaniu znaczników dowiesz się w dalszej części tekstu).
W HTML 4.0 i wcześniejszych wersjach używanie niektórych znaczników zamykających nie jest konieczne. Użycie niektórych znaczników zamykających jest wręcz zabronione. W proponowanej specyfikacji XHTML 1.0 wszystkie znaczniki muszą być zamykane. Jak, gdzie i dlaczego używać znaczników zamykających, bardziej szczegółowo omówimy w rozdziale 10. „XHTML i arkusze stylów”. Jednakże już teraz przykłady demonstrowane w niniejszej książce pokazują właściwy sposób zamykania znaczników, tak aby starsze przeglądarki interpretowały poprawnie znaczniki zamykające XHTML 1.0.
Każda strona, napisana w HTML-u powinna posiadać tytuł. Z tego tytułu korzystają później przeglądarki i programy katalogujące strony WWW, umieszczając je na tworzonych przez siebie listach ulubionych stron. Do nadawania tytułu służy znacznik <TITLE>.
Tytuł określa temat, o którym traktuje strona WWW i on właśnie wyróżnia stronę na wszelkiego rodzaju listach czy wykazach ostatnio odwiedzanych miejsc. Poza tym, w wielu przeglądarkach graficznych, tytuł pojawia się na pasku tytułowym okna programu (m.in. Netscape i Microsoft Internet Explorer).
Znacznik <TITLE> znajduje się zawsze w obrębie nagłówka strony (znaczniki <HEAD>) i jego zadaniem jest skrótowe opisanie jej treści:
<TITLE>Lew, Wiedźma i Garderoba</TITLE>
Strona może posiadać tylko jeden tytuł, który z kolei może zawierać tylko tekst, żadne inne znaczniki nie są dozwolone.
Wybierając tytuł, kieruj się tym, aby był on krótki oraz by możliwie jak najdokładniej opisywał treść strony. Musisz mieć na uwadze takich czytelników, którzy trafią na Twoją stronę zupełnie przypadkowo, korzystając z połączenia losowego lub czyjegoś spisu ulubionych stron. Tacy ludzie, którzy nie mają pojęcia, gdzie właściwie się znaleźli, powinni mieć możliwość natychmiastowego spostrzeżenia, o czym właściwie traktuje strona, która znalazła się przed ich oczami. Krótki, treściwy tytuł powinien bardzo im w tym pomóc. Z racji tego, że niektóre przeglądarki umieszczają tytuł strony na pasku tytułowym okna programu, jego długość może być ograniczona (tekst pomiędzy znacznikami <TITLE> może mieć dowolną długość, ale może zostać obcięty przez przeglądarkę przy wyświetlaniu). Poniżej przedstawiam kilka przykładów poprawnych tytułów:
<TITLE>Rośliny trujące Ameryki Północnej</TITLE>
<TITLE>Edycja obrazu: Przewodnik</TITLE>
<TITLE>Turystyczna oferta odwiedzin cmentarzy, lato 1998</TITLE>
<TITLE>Instalacja oprogramowania: Otwieranie płyty CD</TITLE>
<TITLE>Strona domowa Laury Lemay</TITLE>
A oto kilka tytułów, które są raczej niefortunne:
<TITLE>Część druga</TITLE>
<TITLE>Przykład</TITLE>
<TITLE>Zainteresowania Niguela Franklina</TITLE>
<TITLE>Niezapomniane chwile Drugiego Walnego Zebrania Czwartej Konferencji Komitetu Ochrony Angielskich Róż, dzień czwarty, po obiedzie</TITLE>
Na rysunku 4.1 przedstawiony został sposób, w jaki tytuł strony jest wyświetlany w przeglądarce Internet Explorer.
Rysunek 4.1
Wyniki wyświetlone w Internet Explorerze
Nagłówki służą do podziału tekstu na części, tak jak książka dzielona jest na rozdziały (słowo „Nagłówki” napisane powyżej wytłuszczonym drukiem to właśnie nagłówek). W HTML-u zdefiniowanych jest sześć poziomów nagłówków. Znacznik nagłówka wygląda następująco:
<h1>Zakładanie zamka</h1>
Liczby określają poziom nagłówka (od H1 do H6). Nagłówki nie są numerowane podczas wyświetlania. Różnią się między sobą wielkością i atrybutami czcionki (pogrubienie, podkreślenie, wielkie litery) i w ten sposób odróżniają się od reszty tekstu.
O nagłówkach należy myśleć jak o elementach ogólnego planu strony. Jeżeli tekst posiada strukturę, właśnie nagłówki powinny stanowić jej odzwierciedlenie, tak jak pokazano w poniższym przykładzie. (Zwróć uwagę na fakt, że tekst pod nagłówkami każdego kolejnego poziomu został napisany z coraz większym wcięciem, co lepiej odzwierciedla jego strukturę. Wcięcia te zostaną oczywiście zignorowane przez przeglądarkę.)
<h1>Mitologia na przestrzeni dziejów</h1>
<h2>Powszechne tematy mitologiczne</h2>
<h2>Najwcześniej znane mity</h2>
<h2>Źródła mitologii</h2>
<h3>Mitologia Mezopotamska</h3>
<h3>Mitologia Egipska</h3>
<h4>Opowieść o Izys i Ozyrysie</h4>
<h4>Horus i Set: Bitwa między Dobrem a Złem</h4>
<h4>Dwanaście godzin Świata Zmarłych</h4>
<h4>Rzeka Styks</h4>
<h2>Historia w mitach</h2>
W przeciwieństwie do tytułów, nagłówki mogą być dowolnie długie, mogą składać się z wielu linii tekstu (należy jednak pamiętać, że długi tekst, który jest w jakiś sposób wyróżniony, może być nieczytelny).
Częstą praktyką jest umieszczanie nagłówka najwyższego poziomu na samej górze strony, gdzie jego treść jest powieleniem tytułu lub tytułem sformułowanym nieco inaczej, bardziej skrótowo. Jeżeli strona zawiera kilka przykładów zakładek i jest częścią większej prezentacji na temat zakładek w ogóle, jej tytuł mógłby wyglądać następująco:
<title>Jak tworzyć zakładki: kilka przykładów</title>
Natomiast nagłówek najwyższego poziomu mógłby brzmieć:
<h1>Przykłady</h1>
Staraj się nie używać nagłówków, jeżeli pragniesz tylko wyróżnić w jakiś sposób fragment tekstu. Może to wyglądać znakomicie w przeglądarce, z której sam korzystasz, ale nigdy nie będziesz wiedział, co zobaczą inni czytelnicy Twojej strony. Być może, inne przeglądarki numerują nagłówki lub formatują je w jakiś inny, nietypowy sposób. Dodatkowym niebezpieczeństwem jest fakt, że narzędzia tworzące indeksy do przeszukiwania zasobów sieci WWW korzystają z nagłówków, aby oznaczyć najważniejsze elementy strony. Używając nagłówków do oznaczenia czegoś, co nagłówkiem nie jest, wprowadzasz je w błąd, co może przynieść nieoczekiwane rezultaty.
Poniższy przykład przedstawia kilka nagłówków. Rys. 4.2 przedstawia nagłówki w Internet Explorerze.
...
paradoks24h