HTML - XHTML - Walidacja

Narzędzia

Będzie potrzebna przeglądarka Firefox z dodatkami (rozszerzeniami) Web Developer oraz Firebug. Jeśli nie wiesz czy były instalowane - sprawdź (Narzędzia - Dodatki). Jeśli ich nie ma - zainstaluj, w menu obok są linki do odpowiednich stron. Nie trzeba pobierać plików na dysk, wystarczy kliknąć na przycisku Zainstaluj.

Web Developer i Firebug udostępniają wielką ilość narzędzi do obserwacji, pomiarów i kontroli praktycznie wszystkich właściwości elementów strony, pozwalają na przeprowadzenie walidacji dokumentów a także diagnostyki współpracy z serwerem. Web Developer instaluje w przeglądarce dodatkowy pasek narzędzi (może zostać ukryty), dostęp do nich istnieje także z głównego menu przeglądarki (Narzędzia) oraz z kontekstowego menu otwieranego prawym klawiszem myszki. Firebug, po uruchomieniu przez wybranie z głównego menu (Widok lub Narzędzia) lub klawiszem F12, domyślnie otwiera się w dolnej części okna przeglądarki, jednak można go także otworzyć w osobnym oknie.

Zapoznaj się z funkcjami jakie oferują te dodatki, najlepiej na stronach, które wykorzystują definicje stylów. Ważna rolę w diagnostyce dokumentów odgrywa walidacja. Można bezpośrednio stosować walidatory udostępnione przez W3C (walidator HTML/XHTML oraz walidator CSS), jednak korzystanie z (tych samych) walidatorów za pośrednictwem Web Developera (Narzędzia) jest po prostu znacznie wygodniejsze, zwłaszcza w przypadku kontroli lokalnych plików (X)HTML czy CSS. Oczywiście, wykorzystanie walidatora dla lokalnych plików także wymaga połączenia z siecią. Pamiętaj również że niektóre podstawowe możliwości analizy dokumentu udostępnia bezpośrednio sama przeglądarka poprzez kontekstowe menu otwierane kliknięciem prawym klawiszem myszki na widoku strony ("Pokaż źródło strony", "Pokaż informacje o stronie", a po zaznaczeniu fragmentu - "Pokaż źródło zaznaczenia"). W nowszych wersjach Firefoksa w oknie widoku źródła strony linki są aktywne i umożliwiają podgląd kolejnych tekstów źródłowych (także np. CSS czy JavaScript), cofanie się jest możliwe poprzez kontekstowe menu (prawy klawisz myszki - "Wstecz").

Sprawdzanie poprawności

Sprawdź przy pomocy walidatora HTML pewną ilość dowolnie wybranych stron dostępnych w Sieci. Pomimo swojej potocznej nazwy, nie jest to walidator jedynie dla języka HTML, sprawdza także poprawność (czyli w istocie - zgodność ze specyfikacjami) wielu odmian XHTML, a także MathML i SVG. Sposób kontroli strony walidator dostosowuje do wersji języka jaka została zadeklarowana w prologu dokumentu. Walidator nie jest narzędziem idealnym, wyniki jakie prezentuje czasami moga się wydawać niejednoznaczne, trzeba nabrać pewnej wprawy we właściwej interpretacji tych wyników. Jednak bez takiego narzędzia z pewnością nie da się stworzyć poprawnego, bardziej złożonego dokumentu. Warto pamiętać, że walidator zachowuje się w sposób nieco zbliżony do kompilatora języków programowania - błędy sygnalizowane w dalszej kolejności są często konsekwencją błędów wcześniejszych. Przy sprawdzaniu dokumentów warto w opcjach walidatora zaznaczyć "Show Source" i ponownie wykonać walidację ("Revalidate"). Wtedy w liście błędów ("Validation Output") numery linii będą wygodnymi linkami do odpowiednich miejsc w tekście dokumentu.

Przy pomocy walidatora sprawdź poprawność stron o adresach podanych w menu (Sprawdź 1 i Sprawdź 2). Przy okazji warto też skorzystać z walidatora CSS. Przeanalizuj wyniki walidacji stron tych witryn i postaraj się określić właściwą interpretację komunikatów o błędach.

HTML, XHTML, Transitional, Strict

Sprawdź dwie proste strony dostępne w menu (są one powiazane ze sobą linkami). W obu przypadkach do sformatowania zawartości wykorzystano tabele, co - jak wiadomo - nie jest uznawane za dobre rozwiązanie, chociaż formalnie jest poprawne. Zbadaj strukturę tych stron przy pomocy narzędzi Web Developer i Firebug.

Niepozorna strona moja.html jest całkowicie poprawnym dokumentem w języku XHTML 1.0 Transitional (sprawdź walidatorem). Skontroluj poprawność tej strony, jeśli zostanie potraktowana jako dokument w języku XHTML 1.0 Strict. Można to zrobić "zdalnie", ustawiajac w walidatorze opcję "Doctype" jako "XHTML 1.0 Strict" (zamiast domyślnego "detect automatically"), albo "na czysto", lokalnie (pobierz Pliki Cw1), modyfikując przy pomocy komentarzy prolog dokumentu. Przeanalizuj błędy wykazane przez walidator.

Strona wybrane.html jest całkowicie poprawnym dokumentem w języku HTML 4.01 Transitional (sprawdź). Skontroluj poprawność tej strony, jeśli zostanie potraktowana jako dokument w języku HTML 4.01 Strict, a następnie XHTML 1.0 Strict. Przy modyfikowaniu prologu zwróć uwagę na element <html>, który w przypadku XHTML powinien mieć atrybuty (lang i xml:lang), a w HTML występuje bez atrybutów. Przeanalizuj błędy wykazane przez walidator w obu przypadkach.

Odtwarzanie pliku dźwiękowego (uwagi "na marginesie")

Obydwie strony zawierają odnośnik do pliku dźwiękowego (mp3). Nie stanowi on tutaj materiału do rozważań na temat poprawności dokumentu, to tylko ("przy okazji") ilustracja pewnych problemów z osadzaniem elementów medialnych (zobacz HTML - Multimedia). Powszechnie stosowany (np. dla plików Flash) sposób wykorzystujący jednocześnie elementy <object> i <embed> nie jest dobrym rozwiązaniem, bo <embed> jest elementem niestandardowym, choć "rozumianym" przez przeglądarki (oficjalnie jest proponowany dopiero w specyfikacji HTML 5, chociaż w nieco innym kontekście). Na stronie moja.html jest bezpośredni odnośnik do pliku mp3. Takiego rozwiązania praktycznie już się nie stosuje i jego rezultat jest trudny do określenia w konkretnych przypadkach. Zależy to od ustawień przeglądarki i od zainstalowanych w niej wtyczek (plugins), a efektem może być odtworzenie pliku rzez którąś z wtyczek, odtworzenie przy pomocy zewnętrznej aplikacji lub propozycja zapisania pliku na dysku. Mało przewidywalny (i mało uniwersalny) jest także sposób zastosowany na stronie wybrane.html, gdzie plik dźwiękowy prezentowany jest przez osadzone kontrolki odtwarzacza Windows Media Player, z wykorzystaniem typu MIME audio/x-ms-wma, jednak plugin WMP może po prostu nie być zainstalowany.

Zadanie 1

Rozważana powyżej strona wybrane.html jest dokumentem napisanym w języku HTML 4.01 Transitional. Należy przebudować tę stronę tak, aby stała się poprawnym dokumentem w języku XHTML 1.0 Strict, wyglądającym w oknie przeglądarki identycznie jak pierwowzór, z zachowaniem istniejącej struktury wykorzystującej tabele. Nietrudno zauważyć, że nowy dokument musi się odwoływać do pliku z definicjami CSS (np. wybrane.css), które należy zaprojektować.