R 04 07, HTML
[ Pobierz całość w formacie PDF ]
Rozdział 4.
Zaczynamy od podstaw
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>
.
Struktura HTML-a
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ż
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
Twoja strona jest zgodna oraz definicję rodzaju dokumentu (DTD —
Document Type
Definition
), która ok
którą
reśla jego specyfikację. Następnie wprowadzasz znaczniki
<HTML>
,
teraz powinieneś wyrobić sobie nawyk stosowania
znaczników określających strukturę strony.
66
Część 1.
Informacje wstępne
<HEAD>
i
<BODY>
.
W poniższym przykładzie, przed
okumentu XHTML 1.0 Strict:
znacznikami struktury strony występuje określenie typu
d
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict
"htt
<html>
<head>
//EN"
p://www.w3.org/TR/xhtml1/DTD/strict.dtd">
<title>
</head>
<body>
...treść Twojej strony...
</body>
Ty
tuł strony</title>
</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, Tr
Frameset odna
ansitional i
jdziesz w rozdziale 24. — „Projektowanie witryn do praktycznych
zastosowań”.
Znacznik <HTML>
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
Cała zawartość pliku, czyli treść i znaczniki powinny znajdować się
oczątkowym i końcowym znacznikiem
<HTML>
, tak jak w poniższym
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric
<html>
...twoja
pomiędzy
p
przykładzie:
t//EN"
/TR/xhtml1/DTD/strict.dtd">
strona....
</html>
Znacznik<HEAD>
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ł
powiem później):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
://www.w3.org/TR/xhtml1/DTD/transi
ad poprawnego użycia znacznika
<HEAD>
(o znaczniku
<TITLE>
o
1.0 Transitiona
l//EN"
"http
><he
tional.dtd">
<html
</head>
....
ad><title>To jest Tytuł</title>
</head>
(o którym wspominałam w powyższej
notatce), jak pokazałam w poniższym przykładzie.
Rozdział 4.
Zaczynamy od podstaw
67
Znacznik <BODY>
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"
<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ątko-
wym i końcowym znacznikiem
<HTML>
, podobnie sprawa ma się w przypadku znaczni-
kó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"
<HTML>
<HEAD>
<BODY>
</HEAD>
</BODY>
</HTML>
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.
Tytuł
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).
68
Część 1.
Informacje wstępne
Znacznik
<TITLE>
znajduje się zawsze w obrębie nagłówka strony (znaczniki
<HEAD>
)
i jego zadaniem jest skrótowe opisanie jej treści:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<HTML>
<HEAD>
<TITLE>Lew, Wiedźma i Garderoba</TITLE>
</HEAD>
<BODY>
.... treść strony ....
</BODY>
</HTML>
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 opi-
sywał 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 ulu-
bionych 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świetla-
niu). 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 prze-
glądarce Internet Explorer.
<TITLE>Rośliny trujące Ameryki Północnej</TITLE>
Rysunek 4.1.
Wyniki wyświetlone
w przeglądarce Internet
Explorer
Rozdział 4.
Zaczynamy od podstaw
69
Nagłówki
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 wy-
gląda następująco:
<h1>Zakładanie zamka</h1>
Liczby określają poziom nagłówka (od H1 do H6). Nagłówki nie są numerowane pod-
czas wyświetlania. Różnią się między sobą wielkością i atrybutami czcionki (pogrubie-
nie, 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 po-
siada strukturę, właśnie nagłówki powinny stanowić jej odzwierciedlenie, tak jak poka-
zano w poniższym przykładzie. (Zwróć uwagę na fakt, że tekst pod nagłówkami każde-
go kolejnego poziomu został napisany z coraz większym wcięciem, co lepiej odzwier-
ciedla 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 wy-
róż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 ina-
czej, 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 frag-
ment 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. Do-
datkowym niebezpieczeństwem jest fakt, że narzędzia tworzące indeksy do przeszuki-
wania zasobów sieci WWW korzystają z nagłówków, aby oznaczyć najważniejsze ele-
menty strony.
[ Pobierz całość w formacie PDF ]