Autorem strony jest Aktualizacja Powrót do pomocy programu
Paweł Wimmer
[e-poczta] pawel.wimmer@lupus.waw.pl
[klepsydra] 15-VI-1997 [Pajaczek 2.0] Pajaczek 2.0
[zielona kropka][zielona kropka][zielona kropka]

Struktura dokumentu

Uwaga: jeśli przykład nie odzwierciedla oznakowania, oznacza to, że przeglądarka nie akceptuje danego znacznika



[hand]Czym jest dokument HTML?

Być może wiele osób sądzi, że strona w języku HTML jest jakimś tajemnym dokumentem, o specjalnym formacie, do tworzenia której potrzebne są specjalistyczne narzędzia i daleko idąca wiedza. Nic z tych rzeczy! Do utworzenia takiej strony nie jest potrzebne nic więcej niż... zwykły edytor tekstów. Może to być najprostszy edytor dla DOS, który potrafi zapisywać dokument w postaci tekstowej, choćby Norton Editor, PC Write czy cokolwiek równie prostego.

Stop, przepraszam. Ponieważ żyjemy w Polsce i na ogół posługujemy się w naszej pisaninie rodzimym językiem, konieczne jest jednak posiadanie jakiejś nakładki, która jest w stanie wywoływać na ekranie polskie znaki. Gdyby zaś ktoś chciał zapytać, w jakim standardzie kodowania, powinien sam sobie odpowiedzieć na to pytanie, biorąc pod uwagę przeznaczenie dokumentu. Może to być DOS-owski Latin-2, jeśli założymy, że naszymi czytelnikami będą wyłącznie użytkownicy OS/2 Warp, albo standard Unixa (ISO-8859-2), jeśli chcemy, aby swobodnie mogli czytać dokument użytkownicy Unixa. Często jest to standard Windows 1250, gdyż graficzne przeglądarki dla tego środowiska są coraz powszechniej stosowane. Od biedy możemy nawet pisać bez polskich znaków, a bardziej ambitni autorzy mogą zadać sobie trudu przygotowania wszystkich wersji, biorąc pod uwagę zróżnicowaną "klientelę". Stosowanie ISO-8859-2 jest o tyle wygodne, że nowe przeglądarki w Windows potrafią automatycznie się przestawiać, zgodnie z deklaracją Charset w nagłówku.

<HEAD>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
</HEAD>

Gdyby ktoś chciał przygotowywać swój dokument dla środowiska Windows (3.1 lub 95), może się posłużyć nawet Notatnikiem (Notepadem), w którym może zapisywać tekst od razu w kodach Windows 1250, mając do użytku wbudowaną w środowisko polską klawiaturę.

Uwaga: zalecane jest stosowanie międzynarodowego, uniwersalnego standardu ISO-8859-2

Kosztem stosowania standardu ISO-8859-2 jest błędne wyświetlanie w niektórych przeglądarkach (Internet Explorer 3) kilku polskich znaków w niektórych elementach strony - skryptach Javy, belce tytułowej, wierszu statusu, alternatywnych opisach grafik, formularzach. Jeśli będzie to razić poczucie estetyki autora, może zrezygnować w nich ze stosowania polskich liter.


Uwaga praktyczna:

Aby wygodnie redagować dokumenty w standardzie kodowania ISO-8859-2, należy się zaopatrzyć w czcionki w tym standardzie. Są one dostępne na polskiej stronie "ogonkowej", pod adresem http://www.agh.edu.pl/ogonki/pl.html. Użytkownikom edytorów dla Windows polecam darmowe czcionki ekranowe PolskieStrony i PolskieStrony2, dostępne w serwisie Polska Strona Windowsowa. Użytkownikom edytora HomeSite 2.5 należy zalecać używanie czcionki PolskieStrony2. Należy również używać nakładki klawiaturowej, która pozwala zdefiniować klawiaturę ISO, np. w pakietach Mako lub Zecer. Pakiet Zecer 2.1 zawiera nakładkę klawiaturową Polkeyb, autorstwa Andrzeja Górbiela. Nakładka pozwala zdefiniować klawiatury w trybie graficznym, choć możliwe jest to za pomocą ręcznego wpisu do pliku WIN.INI.

Dla ułatwienia podaję treść wpisu. Wystarczy go skopiować do schowka, wstawić do sekcji [PolKeyb] w WIN.NI, zapisać plik na dysku i ponownie uruchomić Windows. Fragment WIN.INI powinien wyglądać następująco:

[PolKeyb]
settings=0 2 10 0 1 10 0

name0=ISO-8859-2
keys0=ACELNOSXZ
lower0=177,230,234,179,241,243,182,188,191
upper0=161,198,202,163,209,211,166,172,175

Aby tekst w edytorze HTML był poprawnie wyświetlany, należy wybrać czcionkę ISO.

Wygodną, shareware'ową klawiaturę ISO można zakupić w serwisie Polska Strona Windowsowa


Dokument HTML jest więc najzwyczajniejszym plikiem tekstowym, który zawiera jednak pewne osobliwe znaczniki, zwane z angielska "tagami". "Tagi", których jest kilkadziesiąt (i jeszcze trochę dodatkowych parametrów), stanowią język HTML. Same składają się z nawiasów kątowych, między którymi znajdują się ściśle określone litery. Na przykład <H1> jest otwierającym znacznikiem tytułu pierwszego stopnia. Większość znaczników składa się z części otwierającej oraz zamykającej, która zawiera dodatkowo tzw. ukośnik (slash).

Gdybyśmy chcieli wprowadzić tytuł drugiego stopnia, powinniśmy napisać:
<H2>Treść tytułu drugiego stopnia</H2>, co w efekcie powinno dać wynik:

Treść tytułu drugiego stopnia

W podobny sposób możemy wprowadzić do dokumentu poziomą linię, posługując się pojedynczym znacznikiem <HR>, dzięki czemu uzyskamy na ekranie przeglądarki


Doszliśmy w tym miejscu do związku dokumentu HTML z przeglądarką World Wide Web. Przeglądarka jest wyspecjalizowanym programem, który interpretuje znaczniki i "przetwarza" je na właściwą postać graficzną. Do tej pory zaprojektowano już wiele przeglądarek, różniących się zaawansowaniem technicznym, a najdoskonalszymi z nich są obecnie Netscape Communicator (wersja 4), wyprodukowany przez amerykańską firmę Netscape Communications, oraz Internet Explorer 4, firmy Microsoft. Communicator wszedł na rynek 9 czerwca 1997, natomiast Internet Explorer jest jeszcze w fazie testów.

Wróćmy jednak do HTML.

Do zbudowaniu dokumentu HTML nie potrzeba więc niczego więcej jak znajomości języka i prostego edytora tekstów. Powszechnie przyjętym standardem jest zatwierdzony w styczniu 1997 roku HTML 3.2. Netscape Communications i Microsoft upowszechniają jednak własne rozszerzenia, które interpretują wyłącznie ich przeglądarki. Projektanci edytorów HTML także wprowadzają obsługę HTML 3.2 i rozszerzeń. Autorzy stron powinni pamiętać, że stosowanie rozszerzeń, choć są poprawnie interpretowane przez najnowsze przeglądarki, wykracza poza przyjęty standard języka. Obszerny opis specyfikacji HTML 3.2, czyli HTML 3.2 Reference Specification, znajduje się na internetowej stronie http://www.w3.org/TR/REC-html32.html (ok. 150 KB do wczytania), natomiast zainteresowanym polecam także zajrzenie na stronę W3C - http://www.w3.org/MarkUp/, gdzie znajdują się informacje na temat następnej wersji języka HTML - projektu Cougar, którego draft (wersja robocza) pojawił się w kwietniu 1997 roku, a który jest rozwijany przez W3C HTML Working Group.

Ważna uwaga: formalnie zalecane jest stosowanie wyłącznie języka wchodzącego w skład specyfikacji HTML 3.2. Jest to oczywiście zalecenie, a nie bezwzględny przymus stosowania, którego ignorowanie pociąga za sobą jakiekolwiek sankcje, np. usunięcie witryny z Sieci - przynajmniej w tej chwili. Decyzję o przestrzeganiu lub wykraczaniu poza standard powinien podjąć SAM AUTOR serwisu, który przyjmuje tym samym płynące z tego tytułu konsekwencje. Poza oficjalnym standardem znajduje się m.in. tak często spotykany w Internecie element jak ramki. Skutkiem nieprzestrzegania specyfikacji może być to, że niektóre przeglądarki będą wadliwie interpretować przygotowane strony.


[hand]Kilka uwag o edytorach HTML

Skoro tworzenie dokumentu jest technicznie tak proste, dlaczego pojawiło się na świecie tak wiele edytorów HTML? Odpowiedź jest także prosta. Zamiast pracowicie wpisywać ręcznie znaczniki, wystarczy np. nacisnąć Alt-p, aby wstawić otwierający i zamykający znacznik akapitu, albo Ctrl-b, aby wprowadzić znacznik pogrubienia czcionki (choć nie każdy edytor na to pozwala). Bardziej zaawansowane produkty wspomagają tworzenie wyspecjalizowanych elementów, jak tabele, odsyłacze, ramki czy formularze. I na tym właśnie polega istota ich pracy. Nie pozostawiają użytkownika samemu sobie, lecz intensywnie wspomagają jego pracę, znacznie ją przyspieszając i ułatwiając. Obszerniejsze informacje o edytorach HTML znajdzie Czytelnik na stronie poświęconej narzędziom.


[hand]Podstawowe elementy dokumentu

Dokument HTML, aby odpowiadał przyjętemu standardowi, powinien zawierać co najmniej trzy elementy. Choć często spotyka się w Internecie dokumenty nie zawierające wszystkich poleceń, należy unikać tej maniery.

Wcześniej warto jeszcze powiedzieć, że często stosuje się w dokumentach WWW specjalny prolog, który identyfikuje poziom używanego języka HTML. Jest on wstawiany jako pierwszy element dokumentu, jeszcze przed otwarciem szkieletu strony, czyli <HTML>. Prolog jest m.in. wykorzystywany jako oznaczenie poziomu w procesie weryfikacji poprawności składni za pomocą tzw. parserów.

Jeśli dokument jest zgodny z obowiązującą od stycznia 1997 roku specyfikacją HTML 3.2, powinniśmy stosować prolog:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

Taką deklarację przyjmują parsery jako podstawę badania poprawności składniowej. Można tutaj wymienić m.in.:

S.W.A.T - polskojęzyczny parser Tomasza Piłata

WebTechs HTML Validation Service

A Kinder, Gentler Validator

Niektóre parsery (WebTechs, Kinder) eksperymentalnie weryfikują dokumenty stosujące rozszerzony język HTML, znany pod kryptonimem Cougar. Jest to następca HTML 3.2, opracowywany przez W3C Consortium - naczelną instytucję normalizacyjną w Internecie. Zapowiedziana została implemetacja Cougara w parserze S.W.A.T.

Na razie nie została jeszcze podana ostateczna wersja prologu, która będzie obowiązywać dla dokumentów zgodnych z poszerzoną wersją języka HTML. Próbnie można jednak zastosować deklarację:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Draft//EN"">

Warto w tym miejscu powiedzieć kilka słów o programach, które weryfikują składnię offline, czyli na komputerze użytkownika. Jeśli pragniemy mieć pełną kontrolę z punktu widzenia obowiązującego standardu HTML 3.2, powinniśmy się posługiwać darmowym programem Spyglass HTML Validator (dla Windows 95), który jest oparty na kompletnym parserze SGML. Jest on dostępny na internetowej stronie firmy Spyglass. Należy przy tym pamiętać, że wersja z końca maja 1997 wskazuje jako błąd podany wyżej prolog, akceptując natomiast wersję:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
Pamiętając o tym, możemy jednak bez przeszkód weryfikować dokumenty z "oficjalnym" prologiem.

Dobrymi narzędziami, aczkolwiek w chwili obecnej nie dysponującymi wbudowanym parserem SGML, są HTML Powertools dla Windows 3.1 i Windows 95, firmy Opposite Software, a także CSE 3310 HTML Validator dla Windows 95, firmy Alsoft Internet Solutions. Są to dobre korektory poprawności składniowej, wychwytujące wiele błędów, aczkolwiek nie traktujące tak rygorystycznie standardu HTML 3.2. Osoba, której zależy na absolutnej zgodności ze standardem, powinna je traktować tylko jako bardzo dobre narzędzie pomocnicze. Zaletą HTML Validatora jest dodatkowo bezpośrednia współpraca z doskonałym edytorem HomeSite.

Wróćmy do szkieletu strony.

<HTML> </HTML>

Jest to otwierający i zamykający znacznik dokumentu, a między nimi jest umieszczana cała treść. Znacznik nie jest bezpośrednio widoczny w przeglądarce.

<HEAD> </HEAD>

Znacznik jest umieszczany wewnątrz znaczników HTML i sam zawiera podstawowe informacje o dokumencie, w pierwszym rzędzie tytuł strony.

<BODY> </BODY>

Jest to znacznik umieszczany wewnątrz znaczników HTML, za znacznikami HEAD. Zawiera konkretną treść dokumentu.

W praktyce wygląda to następująco:

<HTML>
<HEAD>

Informacje o dokumencie, łącznie z tytułem

</HEAD>
<BODY>

Treść dokumentu - tekst, grafika, odsyłacze itp.

</BODY>
</HTML>

Istotna uwaga: znaczniki <BODY> </BODY> nie powinny być umieszczane na stronie zawierającej ramki, w ramach FRAMESET (dokładniejsze informacje są zawarte w części poświęconej ramkom).


[hand]Więcej szczegółów o HEAD

Definiując <HEAD> możemy wstawić kilka dalszych parametrów, które uzupełniają informacje o stronie.

[zielona kropka]<TITLE></TITLE>

Najważniejszym elementem jest tytuł strony, który 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ść. Załączony fragment ekranu pokazuje w belce treść Netscape - (Kurs języka HTML), gdyż w dokumencie znalazła się definicja <TITLE>Kurs języka HTML</TITLE>.

[tytuł w belce]

[zielona kropka]<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. Zawiera ono trzy atrybuty: HTTP-EQUIV, NAME i CONTENT w kombinacji pierwszy z trzecim lub drugi z trzecim.

Zwróćmy uwagę na kilka poleceń, które można umieścić w <meta>.

<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.

<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, prezentując nowy adres, ale opatrując tę stronę zaprezentowanym poleceniem, które spowoduje przejście pod właściwy adres po x sekundach. Tylko niektóre przeglądarki interpretują to polecenie.

<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-2">

Polecenie jest deklaracją strony kodowej dokumentu. Inna postać to charset=windows-1250. Nowe przeglądarki dla Windows (Navigator/Communicator, Internet Explorer) potrafią się automatycznie przestawić na właściwą stronę kodową, zgodnie z podaną deklaracją. Nie jest potrzebna interwencja użytkownika, który nie musi nawet wiedzieć, z jakim standardem kodowania polskich znaków ma do czynienia. Polecenie to jest zalecane przy tworzeniu stron WWW.

<META HTTP-EQUIV="Creation-Date" CONTENT="Tue, 04 Dec 1993 21:29:02 GMT">

Polecenie informuje o dacie utworzenia dokumentu, zwracając wartość Creaton-Date: Tue, 04 Dec 1993 21:29:02 GMT.

<META NAME="Keywords" CONTENT="Nanotechnology, Biochemistry">

Polecenie informuje o wyrazach kluczowych dokumentu, zwracając wartość Keywords: Nanotechnology, Biochemistry

Inne przykłady:

<META NAME="Author" CONTENT="Microsoft Corporation">

<META NAME ="Description" CONTENT="Microsoft Corporate Information, Product Support, and More!">

<META HTTP-EQUIV="Reply-to" CONTENT="dsr@w3.org (Dave Raggett)">

<META NAME="generator" CONTENT="WebEdit">

[zielona kropka]<BASE>

Polecenie definiuje bazowy adres dokumentu.

<BASE HREF="http://www.firma.com/dokument.html">

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 nagłówku przenoszonej strony. Przeglądarka będzie automatycznie, "w locie" poprawiać adres w odsyłaczu, kierując się podanym adresem bazowym, który stanowi w tej sytuacji swoistą busolę.

[zielona kropka]<LINK>

Polecenie ma określać hierarchiczny porządek w zespole dokumentów dla celów nawigacyjnych. W tym miejscu warto o nim wspomnieć jedynie w kontekście stylów dołączanych, które w Internet Explorerze wpływają na postać wyświetlanego dokumentu (będzie o tym mowa w rozdziale poświęconym stylom).


[hand]Więcej szczegółów o BODY

Definiując <BODY> możemy wstawić dodatkowo kilka parametrów, które zadecydują o graficznej postaci strony.

[zielona kropka]<BODY BACKGROUND="URL albo ścieżka/nazwa_pliku.gif">

Parametr BACKGROUND="obrazek.gif" pozwala wybrać obrazek, który pokaże się w tle dokumentu w przeglądarce. (najlepiej, żeby się znajdował w tym samym katalogu co strona HTML) Jeśli np. będzie to <BODY BACKGROUND="lupus.gif">, w przeglądarce zobaczymy dokument w takiej postaci:

Kliknij w tym miejscu, aby zobaczyć przykład

Zauważmy, że niewielki objętościowo obrazek lupus.gif został powielony na szerokość i długość strony.

[zielona kropka]<BODY BGCOLOR="kolor">

Parametr BGCOLOR="kolor" pozwala wybrać kolor tła dokumentu, który pokaże się w tle dokumentu w przeglądarce. Gdyby był to <BODY BGCOLOR="yellow">, zobaczymy:

Kliknij w tym miejscu, aby zobaczyć przykład

Mam nadzieję, że nikogo nie rozbolały oczy od tego przykładu.

[zielona kropka]<BODY TEXT="kolor">

Parametr TEXT="kolor" pozwala określić kolor tekstu w dokumencie. Wybierając kolor, należy mieć także na uwadze kolor tła.

Kliknij w tym miejscu, aby zobaczyć przykład

[zielona kropka]<BODY LINK="kolor1" VLINK="kolor2" ALINK="kolor3">

Możemy również określić kolory odsyłaczy. LINK="kolor" określa standardowy kolor odsyłacza. VLINK="kolor" (visited link) określa kolor odsyłacza, który został co najmniej raz użyty (zauważmy związek z ustawieniem przeglądarki u odbiorcy, który może na ogół swobodnie definiować czas "wygasania" informacji o wizytowaniu jakiegoś miejsca w Internecie). ALINK="kolor" (active link) określa kolor aktywnego odsyłacza Odsyłacz aktywny to odsyłacz w trakcie ładowania dowiązanego do niego dokumentu. Jeśli np. odsyłacz ma standardowo kolor niebieski, w momencie przywoływania dowiązanego dokumentu zmieni na chwilę swój kolor (właśnie zdefiniowany za pomocą ALINK="kolor"), natomiast gdy powrócimy do tej samej strony, zobaczymy, że odsyłacz ma już kolor zdefiniowany za pomocą VLINK="kolor", jako już co najmniej raz wizytowany. Możemy przykładowo użyć kolorów:

<BODY LINK="blue" VLINK="red" ALINK="yellow">

[zielona kropka]<BODY LEFTMARGIN="xx">

Microsoft Internet Explorer pozwala dodatkowo wprowadzić lewy margines strony. Wartość LEFTMARGIN="xx" spowoduje przesunięcie zawartości dokumentu o xx pikseli w prawo.

[zielona kropka]<BODY TOPMARGIN="xx">

Ta sama przeglądarka akceptuje kod wprowadzający górny margines strony. Wartość TOPMARGIN="yy" spowoduje przesunięcie zawartości dokumentu o yy pikseli w dół.

Kliknij w tym miejscu, aby zobaczyć przykład

Oba polecenia nie wchodzą w zakres standardu HTML 3.2.


[hand]Kilka uwag o wlewaniu tekstu

Bardziej szczegółowy opis formatowania bloków tekstu znajduje się na stronie Bloki, ale już w tym miejscu warto zasygnalizować podstawowe, związane z tym problemy.

Gdy redagujemy tekst w edytorze, jesteśmy przyzwyczajeni do używania klawisza Enter, aby oddzielać od siebie akapity. Jednak przeglądarka ignoruje znak końca akapitu i mimo oddzielenia od siebie akapitów w edytorze zostaną one złączone w przeglądarce w ciągłą linię. Dlatego każdy akapit powinniśmy umieszczać między parą znaczników <P> </P>. Jeśli wlewamy do edytora HTML tekst z innego źródła, musimy objąć każdy z akapitów osobną parą znaczników. Akapity są w przeglądarce oddzielane dodatkową interlinią, która uwypukla podział.
Możemy też posłużyć się pojedynczym (otwartym) znacznikiem <BR>, umieszczanym na końcu akapitu, który pozwoli oddzielić od siebie akapity, nie wprowadzając interlinii. Tak właśnie zostały rozdzielone akapit bieżący (możemy też...) i poprzedni (gdy redagujemy...).

Kilka spacji obok siebie jest zamienianych na pojedynczą spację, tak więc nie można (poza tzw. stylem preformatowanym) wstawiać większej liczby spacji między wyrazami. Na tej samej zasadzie ignorowane są również tabulatory.

        Można jednak wstawiać znak tzw. niełamliwej spacji (&nbsp;), który pozwala wstawić kilka kolejnych spacji. Przykładem jest niniejszy akapit, którego pierwszy wiersz jest odsunięty od lewego marginesu o 8 spacji.

Internet Explorer (wyłącznie) pozwala wykorzystać połączenie stylu preformatowanego z krojem czcionki, co daje swobodę w stosowaniu znaków końca akapitu, tabulatora i spacji, z zachowaniem czcionki normalnego tekstu.


Źródła:
  1. Włodzimierz Macewicz "Język składu dokumentu hipertekstowego", Wydawnictwo Mikom, Warszawa 1996
  2. Stephen Le Hunte "HTML Reference Library", plik Helpu dla Windows 3.1 i 95
  3. Ian Graham "HTML Sourcebook. A Complete Guide to HTML 3.0", New York 1996
  4. Hot Dog Professional, plik Helpu
  5. Rafał Wiosna "Każdy chce mieć własną stronę", cykl publikacji w numerach 26/95, 3/96 dwutygodnika PCkurier