Rozdział 24.
Czytając poprzednie rozdziały, poznałeś kilka wskazówek dotyczących tego, co powinieneś, a czego nie powinieneś robić, planując witrynę oraz projektując strony WWW. Poznałeś także czynniki, które mogą sprawić, że witryna będzie dobra (lub zła). Jest jednak jeszcze jeden czynnik, na jaki powinieneś zwrócić uwagę, jest nim sposób projektowania witryn przeznaczonych do „praktycznych zastosowań”.
Dowiedziałeś się już, że w praktyce z WWW korzysta wielu różnych użytkowników, używających wielu systemów komputerowych i przeglądarek. W stronach i witrynach projektowanych do tej pory nie uwzględniłeś jednak jeszcze jednego czynnika: różnych preferencji użytkowników odwiedzających Twoją witrynę oraz faktu, iż każdy z nich może dysponować różnym poziomem doświadczenia. Dzięki przewidzeniu potrzeb użytkowników, którzy będą odwiedzać Twą witrynę, łatwiej Ci będzie ocenić, w jaki sposób należy ją zaprojektować. W tym rozdziale przedstawię sposoby przewidywania potrzeb użytkowników oraz opiszę:
· czynniki, jakie należy brać pod uwagę przy określaniu preferencji użytkowników tworzonych witryn,
· jak dodawać możliwości funkcjonalne ułatwiające korzystanie z witryny początkującym użytkownikom,
· różne metody ułatwiające użytkownikom poruszanie się po witrynie,
· kod HTML prezentujący tę samą stronę WWW napisaną zgodnie z różnymi specyfikacjami XHTML 1.0 (Transitional, Frameset oraz Strict).
Prawdopodobnie jesteś przyzwyczajony do przeglądania Internetu przy wykorzystaniu komputera działającego w konkretnym systemem operacyjnym, takim jak Windows 95 lub 98, Windows NT, Macintosh lub inny. Może Ci się zdawać, że pod każdym względem doskonale wiesz, w jaki sposób inne osoby odbierają strony WWW.
Miejmy nadzieję, że informacje nabyte podczas lektury tej książki pozwoliły Ci zdać sobie sprawę, iż Twój sposób postrzegania stron WWW nie zawsze odpowiada sposobowi, w jaki inne osoby oglądają te same strony. W rzeczywistym świecie istnieje tak wiele różnych komputerów działających w tak wielu systemach operacyjnych. Nawet jeśli spróbujesz zaprojektować swoje strony z myślą o najpopularniejszym systemie operacyjnym i najczęściej używanej przeglądarce, to będzie istniał jeszcze jeden czynnik, którego nie sposób przewidzieć: preferencje użytkowników. Rozważ przedstawiony poniżej przykład pewnej rodziny.
· Jan jest szefem działu w firmie Fortuna 2000. Jego firma dysponuje własną siecią intranetową. Niemal wszyscy pracownicy firmy używają tego samego systemu operacyjnego oraz tej samej przeglądarki. Jan jest przyzwyczajony do postrzegania Internetu i stron WWW w pewien szczególny sposób: zazwyczaj są to strony zawierające dużo tekstu z niewielką ilością obrazków, które podkreślają znaczenie ważnych informacji, czyli proste strony WWW zawierające dużo informacji i mało efektów multimedialnych. Wszystkie dodatkowe „wodotryski” denerwują Jana, uważa, że ich pobieranie to strata czasu i dlatego wyłącza pobieranie zarówno obrazów, jak i dźwięków.
· Żona Jana, Zuzanna jeszcze nigdy wcześniej nie używała komputera, jednak zawsze chciała się nauczyć jego obsługi. Hobbystycznie zajmuje się genealogią i dowiedziała się, że w Internecie można znaleźć wiele informacji na ten temat. Chciałaby także opublikować na WWW historię swojej rodziny. Gdy wraz z mężem kupili pierwszy komputer do użytku domowego była bardzo podekscytowana. Jednak już wkrótce zaczęła zadawać pytania typu: „Czy można wyświetlić więcej niż jeden ekran informacji? Te literki są za małe, czy można je powiększyć? A gdzie są obrazki? Jak można włączać i wyłączać muzykę... podobno na tej stronie jest jakaś muzyka!”. Jak widać, Zuzanna pragnie postrzegać Internet w zupełnie inny sposób, niż ten, do którego był przyzwyczajony jej mąż.
· Jan i Zuzanna mają syna Tomka, ucznia szkoły średniej. Tomek jest zapalonym graczem i chce oglądać to, co jest efektowne, przede wszystkim multimedia! Włącza zatem głośniki na pełen regulator i stu procentach wykorzystuje możliwości nowego komputera. Uważa również, że „przeglądarka X” jest lepsza od „przeglądarki Y”, gdyż wszyscy jego koledzy używają jej do gier kreujących rzeczywistość wirtualną. Chciałby zaprojektować witrynę zawierającą podpowiedzi, rady i sztuczki wykorzystywane w jego ulubionych grach.
· Starsza siostra Tomka, Janka studiuje i chciałaby zostać komercyjną artystką. Bardzo interesuje się rzeźbiarstwem i fotografiką. Chciałaby wykorzystywać nowy komputer do tworzenia prac zadawanych przez wykładowców, a zatem będzie szukała witryn interesujących z wizualnego punktu widzenia. Janka chciałaby oglądać strony w pełnej palecie kolorów i najwyższej dostępnej rozdzielczości.
· Są także najstarsi członkowie rodziny, rodzice Zuzanny, którzy ostatnio przeprowadzili się do córki po wielu latach spędzonych w bardzo małym, wiejskim miasteczku. Ich doświadczenia w obsłudze komputerów są minimalne, widzieli je wyłącznie w sklepach, ale nawet nie dotykali w obawie, że coś popsują. Dla nich komputery to coś całkowicie tajemniczego i zdumiewającego. A zatem chcieliby dowiedzieć się czegoś więcej na nich temat. Rodzice podzielają zainteresowania Zuzanny genealogią. Jednak oczy ojca Zuzanny nie są już tak sprawne, jak niegdyś i dlatego musi on korzystać ze specjalnej przeglądarki, która nie tylko wyświetli tekst, lecz także go odczyta.
Wszystkie te osoby przeglądają WWW, używając tego samego komputera i systemu operacyjnego. Wszyscy członkowie rodziny, z wyjątkiem Tomka, używają także tej samej przeglądarki. Jednak ten przykład ilustruje inne sprawy, o których powinieneś pomyśleć, projektując witryny WWW, czyli różne potrzeby poszczególnych osób. Ich potrzeby można zaliczyć do różnych kategorii i zaspokoić łatwiej do pozostałych. Oto niektóre z czynników, jakie należy wziąć pod uwagę i które zostały przedstawione w powyższym przykładzie.
Poszczególni członkowie naszej fikcyjnej rodziny dysponują różnymi poziomami doświadczenia. Choć wszyscy żywo interesują się WWW, to jednak niektórzy spośród nich jeszcze nigdy nie widzieli przeglądarki. A zatem, projektując witrynę, powinieneś wziąć pod uwagę, iż osoby odwiedzające ją będą dysponowały różnym poziomem doświadczenia oraz potrzebami związanymi z przeglądaniem stron.
Czy zagadnienia przedstawiane na witrynie będą interesowały wszystkich odwiedzających, niezależnie od ich poziomu doświadczenia? Jeśli tak, to być może warto, abyś wyposażył witrynę w jakieś rozwiązania ułatwiające poruszanie się po niej? W rozdziale 23. „Przykłady dobrych i złych stron WWW” poznałeś podpowiedzi i rady dotyczące projektowania systemów poruszania się po witrynach, które mogą zapobiec „gubieniu” się osób w cyberprzestrzeni. To dobry początek, jednak być może warto dodać do swojej witryny stronę szczegółowo opisującą zastosowany system poruszania się po witrynie.
Rysunek 24.1 przedstawia początkowy fragment strony, na której użytkownicy mogą dowiedzieć się czegoś więcej na temat witryny. Połączenia umieszczone na jej początku umożliwiają szybkie przejście do kilku pozostałych części. Zostały one zatytułowane: O witrynie, System nawigacyjny, Zalecane przeglądarki oraz Inne pliki, których możesz potrzebować. Z kolei, każda z tych części zawiera połączenia ze stronami prezentującymi bardziej szczegółowe informacje dotyczące zawartości witryny.
Rysunek 24.1
Strona ułatwiająca użytkownikom poruszanie się po witrynie
Część O witrynie zawiera listę połączeń do stron, które umożliwią osobom odwiedzającym witrynę szybkie zapoznanie się z jej zawartością lub odczytanie, jakie nowe informacje zostały do niej dodane od czasu ostatniej wizyty. Rysunek 24.2 przedstawia przykład prostej listy połączeń do stron o tej tematyce. Poniżej przedstawiłam dobre przykłady stron o takiej tematyce.
Rysunek 24.2
Połączenia ze stronami ułatwiającymi uzyskanie informacji dotyczących zawartości witryny
· Strona Co nowego, która zawiera listę nowych informacji dodanych do witryny wraz z połączeniami do nich.
· Strona Spis treści zawierająca listę tytułów oraz, opcjonalnie, krótki opis zawartości wszystkich stron witryny.
· Strona Często zadawane pytania prezentująca pytania najczęściej zadawane przez użytkowników oraz odpowiedzi na nie.
Powyżej przedstawiłam typy stron, które są najczęściej wykorzystywane w celu ułatwienia użytkownikom zdobycia informacji o witrynie. Oczywiście, samemu możesz zastosować inne pomysły, które będą się lepiej nadawały do konkretnego przypadku Twojej witryny. W takiej sytuacji, warto podać listę stron, które będą najbardziej przydatne dla użytkowników.
Różne witryny WWW mają różne systemy nawigacyjne, jednak w niektórych przypadkach ich zrozumienie może przysparzać trudności początkującym użytkownikom Internetu. Ogólnie rzecz biorąc, systemy nawigacyjne stosowane na witrynach WWW można zaliczyć do trzech podstawowych kategorii: prostych systemów tekstowych, systemów graficznych oraz systemów wykorzystujących układy ramek. Jeśli uważasz, że system nawigacyjny zastosowany na Twojej witrynie wymaga wyjaśnienia, to dodaj połączenia oraz strony, które ułatwią czytelnikom poznanie zasad poruszania się po niej. Rysunek 24.3 przedstawia przykład listy połączeń, umożliwiających przejście do stron, opisujących różne systemy nawigacyjne, jakie można zastosować na witrynach WWW.
Rysunek 24.3
Opisz zastosowany system nawigacyjny
Opisując system nawigacyjny, postaraj się podawać opisy, które można łatwo zrozumieć. Załóżmy, że zastosowany tekstowy system nawigacyjny przypomina ten przedstawiony poniżej, oraz, że został umieszczony na wszystkich głównych stronach witryny:
Strona główna | Zawartość | Pytania i odpowiedzi | Co nowego | Email | Książka gości | Połączenia
Dla osób, które już wcześniej odwiedziły witrynę, zrozumienie tego paska nawigacyjnego nie będzie prawdopodobnie wymagało żadnych wyjaśnień. Jednak takie wyjaśnienia mogą się przydać osobom, które odwiedzają witrynę po raz pierwszy. Poniżej przedstawiłam opisy pomocne dla takich nowych użytkowników.
· Strona główna — „Skorzystaj z tego połączenia, aby wrócić na stronę główną witryny”.
· Zawartość — „Spis treści zawiera połączenia ze wszystkimi stronami witryny. Jeśli odwiedzasz tę witrynę po raz pierwszy, to będzie to strona, od której powinieneś zacząć”.
· Pytania i odpowiedzi — Na stronach często pojawia się także skrót „FAQ”. Dla nowych użytkowników Internetu oraz osób nie znających języka angielskiego przyda się jego wyjaśnienie lub podanie polskiego odpowiednika — „Najczęściej zadawane pytania i odpowiedzi”. Jeśli wolisz użyć skrótu „FAQ”, to opisz go w następujący sposób: „Strona FAQ (Frecquently Asked Quastions) zawiera pytania najczęściej zadawane przez osoby odwiedzające witrynę oraz odpowiedzi na nie”.
· Email — Oto jeszcze jedno połączenie, którego znacznie może wymagać wyjaśnienia. Czy umożliwia ono wyświetlenie wiadomości otrzymanej pocztą elektroniczną lub też wysłanie takiej wiadomości na Twój adres? Opis o treści „Użyj tego połączenia, aby wysłać pytanie lub komentarz do administratora tej witryny” dokładnie wyjaśni użytkownikom, do czego służy to połączenie.
Jeśli system nawigacyjny witryny składa się z ikon lub obrazów, ich znaczenie nie zawsze będzie oczywiste. Rozważmy przykład przedstawiony na rysunku 24.4. Lewa ramka układu zawiera ikony i obrazy służące do poruszania się po witrynie, natomiast w dolnej ramce został umieszczony tekstowy pasek nawigacyjny udostępniający analogiczne możliwości funkcjonalne.
Rysunek 24.4
System nawigacyjny wykorzystujący ikony, obrazy oraz układ ramek
W niektórych przypadkach znaczenie ikony lub obrazu umieszczonego na pasku nawigacyjnym nie jest oczywiste. Krótki opis każdej z zastosowanych ikon został podany w głównej ramce układu, jednak dla początkujących użytkowników przydałyby się zapewne dodatkowe wyjaśnienia. Na przykład, mógłbyś umieścić na stronie wszystkie ikony, a obok nich opisy podobne do tych, które podałam dla połączeń tworzących tekstowy pasek nawigacyjny.
Początkujący użytkownicy mają zazwyczaj problemy ze zrozumieniem układów ramek. Dla nich bardzo pomocna może się okazać strona z krótkim opisem układu. Jednym ze sposobów opisu układu ramek jest umieszczenie na stronie obrazu przedstawiającego jego miniaturę, podobnego do tego, który pokazałam na rysunku 24.5. Nazwij każdą z ramek układu, używając określeń, które odwiedzający będzie mógł łatwo zapamiętać (na przykład: Lewa, Górna, Dolna, Główna) i na tej samej stronie podaj krótki opis przeznaczenia każdej z tych ramek. Poniżej podałam przykład, jak można by opisać ramki przedstawione na rysunku 24.5.
Rysunek 24.5
Opisywanie układu ramek
Opis
Left Frame — Lewa ramka
Top frame — Górna ramka
Bottom frame — Dolna ramka
Main Frame — Ramka główna
· Ikon umieszczonych w lewej ramce możesz użyć, aby określić stronę, którą chcesz wyświetlić w największej, Głównej ramce. Jeśli nie pamiętasz, co oznaczają poszczególne ikony, to kliknij ikonę ze znakiem zapytania, aby wyświetlić stronę z informacjami o ikonach lub skorzystaj z tekstowego paska nawigacyjnego wyświetlonego w Dolnej ramce.
· Górna ramka układu zawiera logo witryny, dzięki czemu zawsze będziesz wiedział, jaką witrynę oglądasz.
· W ramce Głównej wyświetlane są wszystkie strony wybierane w ramce Lewej lub Dolnej. Co więcej, jeśli klikniesz jakieś połączenie umieszczone na stronie wyświetlonej w Głównej ramce, to jego strona docelowa także zostanie wyświetlona w tej samej ramce.
· Połączenia tekstowe umieszczone w Dolnej ramce mają to samo przeznaczenie co ikony w ramce Lewej. Zostały one stworzone z myślą o osobach, których przeglądarki nie wyświetlają obrazów lub preferują stosowanie połączeń tekstowych.
Kolejną informacją, która może się okazać pomocna dla osób korzystających po raz pierwszy z Twojej witryny, będzie wskazanie przeglądarki, z myślą o której została ona zaprojektowana. Rysunek 24.6 przedstawia prosty przykład strony zawierającej takie informacje.
Rysunek 24.6
Dodanie zaleceń odnośnie stosowanej przeglądarki
Informacje umieszczone na tej stronie pozwalają dowiedzieć się, że do oglądania witryny należy używać przeglądarek zgodnych ze standardem języka HTML 3.2 oraz kolejnych wersji obsługujących układy ramek (zgodnych ze specyfikacją języka HTML Frameset). Umieszczona na stronie lista podaje wszystkie przeglądarki, w jakich witryna została przetestowana wraz z połączeniami umożliwiającymi ich pobranie. W końcu autor witryny pyta, czy użytkownicy innych przeglądarek mają jakieś problemy z korzystaniem z witryny. Podany został także adres poczty elektronicznej, dzięki czemu może otrzymywać informacje o potencjalnych problemach, jakie występują w przeglądarkach, których witryna nie została przetestowana.
Oprócz wiadomości o zalecanych przeglądarkach, powinieneś także poinformować użytkowników o wszelkich dodatkach oraz innych plikach, które będą potrzebne osobom przeglądającym witrynę. Jeśli na witrynie zostały umieszczone pliki, które nie są zapisane w formacie HTML (na przykład, pliki archiwalne, dokumenty programu Microsoft Word, obrazy w formatach innych niż JPEG i GIF, itp.), to powinieneś poinformować użytkowników, iż będą potrzebowali specjalnych programów. Podaj listę zewnętrznych i dodatkowych programów, które będą potrzebne.
Przykład listy połączeń do zewnętrznych plików został przedstawiony na rysunku 24.7. Na tej stronie autor podał zewnętrzne aplikacje, potrzebne użytkownikowi w celu oglądnięcia lub wykorzystania plików umieszczonych na witrynie. Ta przykładowa witryna zawiera kilka plików zapisanych w formacie Adobe Acrobat Reader (.PDF) oraz plików archiwalnych (.ZIP), które zostały umieszczone na kilku różnych stronach. Umieszczając na jednej stronie połączenie do wszystkich koniecznych przeglądarek i programów dodatkowych (takich jak WinZip oraz Adobe Acrobat Reader), osoby odwiedzające witrynę mogą bardzo szybko dowiedzieć się, jakich plików będą potrzebowały, aby w pełni wykorzystać możliwości witryny.
Rysunek 24.7
Lista innych plików, koniecznych do korzystania z witryny
Oprócz różnych poziomów doświadczenia osób oglądających witryny, możesz mieć także pewność, że każda z nich będzie miała swój własny, ulubiony sposób korzystania z niej. W jaki sposób możesz zadowolić upodobania wszystkich użytkowników? Prawdę rzekłszy, nie możesz. Jednak postarać się go określić. Jednym z czynników dobrego projektu witryny jest przewidzenie, co użytkownicy będą chcieli na niej oglądać. Staje się to tym trudniejsze, im więcej osób będzie się interesowało zagadnieniami prezentowanymi na witrynie.
Jak można zauważyć, potrzeby każdego z członków naszej fikcyjnej rodziny sprawiają, iż inaczej patrzy na WWW. Czasami wynika to z zainteresowań, czasami ze specjalnych potrzeb użytkowników. Właśnie to jest kluczem do przewidzenia, jakie informacje powinieneś umieścić na swojej witrynie.
Zagadnienia typu „Regulacja zapłonu w silnikach motocyklowych o pojemności 300 cm sześciennych” zainteresuje wąskie grono odbiorców. Będzie on atrakcyjny dla osób interesujących się motocyklami, w konkretniej, dla osób pragnących wyremontować lub wyregulować własny motocykl. Stosunkowo łatwo można określić typy informacji, jakie zainteresują takich odbiorców. Będą to zapewne szczegółowe instrukcje, krok po kroku opisujące proces regulacji oraz obrazy lub inne prezentacje multimedialne demonstrujące techniki, których w łatwy sposób nie da się opisać słowami.
Z drugiej strony, temat „Siedem cudów świata starożytnego” przyciągnie zainteresowanie uczniów i studentów w różnym wielu, jak również ich nauczycieli. Taką witrynę mogą także odwiedzać archeolodzy, historycy oraz wszelkie inne osoby interesujące się historią starożytną. Teraz dysponujesz znacznie szerszym gronem odbiorców, mieszczących się w szerszym przedziale wiekowym i o wyższym poziomie wykształcenia. Znacznie trudniej będzie stworzyć witrynę, która zadowoli ich wszystkich.
W takich przypadkach zawężenie tematyki witryny może nieco ułatwić zadanie. Jednym ze sposobów jest zaprojektowanie witryny przeznaczonej dla konkretnej grupy użytkowników, na przykład, dla:
· uczniów szkół podstawowych oraz ich nauczycieli — taka witryna będzie wymagać bardzo prostego systemu nawigacji, który można łatwo zrozumieć; zawartość witryny powinna być prosta i czytelna; atrakcyjne, kolorowe obrazy i animacje mogą przyciągnąć uwagę i zainteresowanie młodych odbiorców,
· uczniów gimnazjów i liceów oraz ich nauczycieli — w tym przypadku można użyć nieco bardzie skomplikowanego systemu nawigacji; wykorzystanie multimediów oraz najnowszych technologii internetowych może skłonić tę grupę odbiorców do ponownego odwiedzenia witryny,
· studentów oraz wykładowców — ta grupa odbiorców będzie wymagała witryny, której zawartość będzie na znacznie wyższym poziomie, natomiast zastosowanie technik multimedialnych nie będzie aż tak ważne; w tym przypadku dobrym rozwiązaniem będzie stworzenie witryny w formie internetowej encyklopedii,
· badaczy i historyków — witryna przeznaczona dla tej grupy odbiorców będzie zapewne wymagała stworzenia stron zawierających więcej informacji tekstowych niż obrazów i innych plików multimedialnych.
Nie zawsze możliwe jest określenie grup odbiorców, korzystających z witryny. W takich przypadkach rozpocznij tworzenie witryny, bazując na własnych preferencjach. Sprawdź także inne o podobnej zawartości. Przeglądając je, zadaj sobie pytanie, co chciałbyś na nich zobaczyć. Czy informacje są prezentowane w dobry sposób? Czy na witrynie są wiadomości stanowiące pomoc dla odwiedzających ją osób? Czy na witrynie jest zbyt mało, bądź zbyt dużo efektów multimedialnych? Jeśli masz znajomych chętnych do pomocy, to ich opinie będą stanowiły cenny materiał, który powinieneś przeanalizować przed rozpoczęciem tworzenia własnej witryny.
Po zaprojektowaniu początkowych wersji własnych stron poproś przyjaciół, rodzinę lub współpracowników, aby przyjrzeli się witrynie i podzielili się swoimi opiniami na jej temat. Pamiętaj, że prosząc inne osoby o konstruktywną krytykę, nie zawsze usłyszysz to, co być chciał; jednak jest to bardzo ważny proces, dzięki któremu możesz zdobyć wiele nowych pomysłów i propozycji poprawienia witryny.
W poprzednich rozdziałach poznałeś różne wersje języka HTML 4.0 oraz XHTML 1.0 i dowiedziałeś się, w jaki sposób każda z nich jest przeznaczona dla osób korzystających ze starszych bądź nowszych przeglądarek. Poniżej przedstawiłam różne wersje języków:
· HTML 4.0 lub XHTML 1.0 Transitional (pośredni) — jest przeznaczona dla osób pragnących zapewnić poprawne działanie witryny w starszych modelach przeglądarek,
· HTML 4.0 lub XHTML 1.0 Frameset (układ ramek) — jest przeznaczona dla osób pragnących wykorzystać możliwości nawigacji, jakie dają układy ramek oraz znaczniki dostępne w języku HTML 4.0 Transitional,
· HTML 4.0 lub XHTML 1.0 Strict (ścisły) — jest przeznaczona dla osób pragnących tworzyć strony całkowicie zgodne ze specyfikacją języków HTML 4.0 oraz XHTML 1.0, które nie wykorzystują przestarzałych i niezalecanych znaczników i atrybutów.
Jeśli spodziewasz się, że osoby odwiedzające Twoją witrynę będą korzystały z wielu różnych przeglądarek, to prawdopodobnie korzystne będzie stworzenie jej na bazie specyfikacji HTML 4.0 lub XHTML 1.0 Transitional. Dzięki temu zapewniasz zgodność tworzonych stron z wcześniejszymi wersjami przeglądarek. Ta specyfikacja zapewnia możliwość stosowania znaczników, które w specyfikacji ścisłej, HTML 4.0 lub XHTML 1.0 Strict, zostały uznane za przestarzałe i nie są zalecane. Z tego względu, jeśli masz zamiar używać znaczników i atrybutów określających postać dokumentu wprowadzonych w HTML-u 3.2 (takich jak znacznik <CENTER> lub atrybut ALIGN określające wyrównanie elementu lub atrybuty BGCOLOR oraz COLOR określające kolor tła i tekstu), będziesz mógł to zrobić.
Rozważmy przykład strony Pałacu Strachu Halloween, przedstawionej w rozdziale 7. „Wykorzystywanie obrazów, koloru i tła”. W tym rozdziale wygląd strony znowu został zmodyfikowany, o czym przekonasz się, przeglądając przedstawiony poniżej kod oraz rysunek. W tej wersji strony, do przedstawienia jej zawartości i określenia wyglądu zostały wykorzystane znaczniki zgodne ze specyfikacją HTML 3.2. Czcionki, kolory oraz wyrównanie elementów strony zostało określone przy wykorzystaniu znaczników uznanych za przestarzałe w specyfikacji HTML 4.0 i XHTML 1.0 Strict.
W przedstawionym poniżej przykładzie przestarzałe znaczniki i atrybuty zostały oznaczone kursywą. Poza tym na stronie wykorzystano tabelę, dzięki której fragmenty strony — obrazki, połączenia i wyjaśnienia — zostały rozmieszczone w formie szachownicy. Rysunek 24.8 przedstawia wygląd poniższej strony, wyświetlonej w Internet Explorerze.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html>
<head>
<title>Witajcie w Pałacu Strachu Halloween</title>
</head>
<body bgcolor="#ff9933" link="#990000">
<h1 align="center">
<font face="Arial, sans-serif">
Witajcie w Pałacu Strachu Halloween!!</font></h1>
<div align="center">
<p>
<img src="skel05.gif" alt="skel05.gif" width="140" height="100" />
<img src="skel07.gif" alt="skel07.gif" width="140" height="100" />
<img src="skel06.gif" alt="skel06.gif" width="140" height="100" />
</p>
</div>
<hr />
...
Toudi