Strona główna - HTML dla bardzo początkujących - Etykieta webmastera - Struktura dokumentu - Czcionki - Bloki - Odsyłacze - Wykazy - Grafika i multimedia - Tabele - Style - Ramki - Pływające ramki - Formularze - Response-O-Matic - TopNet Mailer - Liczniki wizyt - Kanały informacyjne - Wprowadzenie do JavaScript - Przykłady skryptów - Narzędzia - Słowniczek - Znaki specjalne - Ankieta - Kolory

Struktura dokumentu

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ć, przynajmniej teoretycznie, najprostszy edytor dla DOS, który potrafi zapisywać dokument w postaci tekstowej, choćby Norton Editor, PC Write czy cokolwiek równie prostego.

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ą obługiwane przez przeglądarki potrafiące rozpoznawać deklarację strony kodowej, umieszczanej w ramach części nagłówkowej strony (HEAD). Ma ona w tym wypadku następującą postać:

Kosztem stosowania standardu ISO-8859-2 jest błędne wyświetlanie w starszych 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.

Stosowanie standardu kodowania Windows-1250 nie jest zabronione, ale nie jest również zalecane. Gdyby webmaster z jakichś powodów chciał stosować ten standard, powinien bezwględnie umieścić w dokumencie deklarację użytej strony kodowej:

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

A stąd możesz pobrać za darmo Polkeyb 2.4

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.

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 (ale zalecam stosowanie specjalizowanych edytorów!). Powszechnie przyjętym standardem jest opublikowany w grudniu 1997 roku HTML 4.0. Obszerny opis specyfikacji HTML 4.0, czyli HTML 4.0 Reference Specification, znajduje się na internetowej stronie http://www.w3.org/TR/REC-html40/ - można tam również pobrać spakowane archiwum.

Ważna uwaga: formalnie zalecane jest stosowanie wyłącznie języka wchodzącego w skład oficjalnej specyfikacji HTML, obecnie w wersji 4.0. 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. Skutkiem nieprzestrzegania specyfikacji może być to, że niektóre przeglądarki będą wadliwie interpretować przygotowane strony. Pamiętajmy także, że nawet czołowe przeglądarki nie interpretują w pełni elementów HTML 4.0.

Dlaczego stosujemy edytory 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.

W Internecie, np. w grupach dyskusyjnych, pojawiają się często opinie, że "prawdziwy webmaster" nie używa niczego innego niż najprostszy notatnik. Należy stanowczo i zdecydowanie odrzucić takie stanowisko - praca bez wspomagania ze strony specjalizowanego edytora HTML jest oczywiście możliwa, ale jest znacznie bardziej czasochłonna, a przede wszystkim naraża na popełnianie błędów składniowych. Tego rodzaju opinie wprowadzają w błąd niedoświadczonych webmasterów, którzy przejęci nonszalancją "uczonych w piśmie" chcą postępować w podobny sposób. Prawdziwy webmaster to ten, kto tworzy poprawny kod, a nie ten, kto używa najprostszych narzędzi.

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 ze specyfikacją HTML 4.0, powinniśmy stosować prolog:

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

Jeśli dokument jest zgodny z wcześniejszą specyfikacją HTML 3.2, powinniśmy stosować prolog:

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

lub

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

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

W3C HTML Validation Service udostępniony przez World Wide Web Consortium. Jest on oparty na specyfikacji HTML 4.0.

Warto też zaglądać do serwisów:

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

WebTechs HTML Validation Service

A Kinder, Gentler Validator

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

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.

Znacznik jest umieszczany wewnątrz znaczników HTML i sam zawiera podstawowe informacje o dokumencie, w pierwszym rzędzie tytuł strony. W ramach tego znacznika jest umieszczana tzw. część nagłówkowa.

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

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

Informacje o dokumencie, łącznie z tytułem

</HEAD>
<BODY>

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

</BODY>
</HTML>

Więcej szczegółów o HEAD

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

<TITLE></TITLE>

Najważniejszym elementem (koniecznie go używaj!) 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>.

<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, natomiast NAME - zmienne użytkownika.

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

Polecenie jest deklaracją strony kodowej dokumentu. Inna postać to charset=windows-1250. Nowe przeglądarki (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 bezwzględnie zalecane przy tworzeniu stron WWW.

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.

Uwaga: nie stosuj tego polecenia jako narzędzia do "podbijania" wartości swojego licznika wizyt. Goście Twojej strony prędko zrezygnują z wizyt, gdy w trakcie czytania strona będzie się nagle odświeżała. No, chyba że robisz rzeczywiste aktualizacje co pół godziny :-) ...

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 informuje o dacie utworzenia dokumentu, zwracając wartość (np. sieciowemu indekserowi) Creaton-Date: Tue, 04 Dec 1993 21:29:02 GMT.

Polecenie jest przykładem zastosowania przejść między stronami, interpretowanym jedynie (bardzo źle!) przez Internet Explorera. Możemy tutaj zastosować page-enter, page-exit, site-enter i site-exit. W Transition stosujemy numery filtrów graficznych od 1 do 28 (ich zestaw zawiera m.in. FrontPage 98), natomiast Duration określa czas trwania przejścia w sekundach. Filtry dają podobny efekt wizualny, jak przejścia między stronami w programach grafiki prezentacyjnej. Polecenie jest umieszczane na pierwszym miejscu listy poleceń META.

Uwaga: na razie nie stosuj tego polecenia. Jest ono bardzo interesujące, ale chwilowo bezużyteczne.

Jest to przykład (pochodzący z "HTML Reference Library 4") polecenia definiującego "cenzuralność" (rating) strony. Aby je zastosować, należy zgłosić stronę do serwisu zajmującego się wyceną zawartości stron, np. Recreational Software Advisory Council (RSAC), wypełniając formularz. RSAC przesyła ostateczną treść polecenia. W nawiasie są widoczne wyceny przykładowej strony: nudity - 0, sex - 0, violence - 0, language - 0. Wspomaganie PICS (Platform for Internet Content Selection) zawierają m.in. HotDog 4.5 i WebEdit 3.

Przeglądarka (Internet Explorer) interpretuje zawartość strony według zadeklarowanych wartości i wczytuje stronę albo nie, zależnie od przyjętych w opcjach ograniczeń. Jest to narzędzie, które pozwala blokować dostęp do niektórych stron, np. nieletnim do serwisów pornograficznych.

Polecenie informuje o wyrazach kluczowych dokumentu, zwracając wartość Keywords: HTML, Lupus. 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.

Inne przykłady:

<BASE>

Polecenie definiuje bazowy adres dokumentu.

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

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

Pełny zestaw poleceń LINK interpretuje jedynie przeglądarka NCSA Mosaic 3 (pamiętasz jeszcze taką nazwę?...)

Więcej szczegółów o BODY

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

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

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

Uwaga: należy deklarować kolor tła strony, gdyż jeśli tego nie zrobimy, czytelnik strony zobaczy tło zależne od jego własnych ustawień w przeglądarce, białe, szare czy jakiekolwiek inne. Może to "zrujnować" wyświetlanie strony. Ponadto, gdy używamy pliku graficznego jako tła, także podawajmy alternatywny kolor tła strony, gdyż wiele osób wyłącza grafikę w przeglądarce - wtedy widoczny jest jedynie kolor tła strony.

<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

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

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

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 ( ), 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.