TESTOWANIE STRONY, WALIDACJA HTML

Zanim zaczniesz promować swoją stronę w Internecie, warto dokładnie sprawdzić jej poprawność nic tak nie zniechęca użytkowników jak nie działające odnośniki, błędy ortograficzne, źle ładująca się grafika czy niepoprawnie działające skrypty. Istotna jest także walidacja, czyli sprawdzenie poprawności kodu HTM, usunięcie ewentualnych błędów składniowych oraz niepotrzebnych znaczników.
Na początek opiszę aspekty, na które należy zwrócić uwagę przy testowaniu strony oraz walidacji kodu, potem zajmę się programami, które mogą w znaczący sposób ułatwić te zadania.

TESTOWANIE STRONY

Najlepiej zacząć od sprawdzenia poprawności ortograficznej tekstu, gdyż możemy to zrobić przed zgraniem strony na sieć. Niektóre z programów do tworzenia stron mają wbudowane słowniki ortograficzne, które w trakcie wprowadzania tekstu od razu podkreślają błędnie napisane wyrazy. Jeżeli jednak nasz program nie ma takiego narzędzia, można skorzystać chociażby ze słownika w programie Word, przenosząc do niego tekst i pozwalając mu poprawić ewentualne błędy oraz literówki.

Pamiętaj też o poprawnej interpunkcji - błędami, które bardzo często daje się zauważyć, są wstawianie spacji przed kropką i przecinkiem oraz zapominanie o spacji po nich. Pamiętaj: jeżeli dasz spację przed kropką, może się zdarzyć taka sytuacja, że „przeskoczy" ona do następnej linijki tekstu, co wygląda wyjątkowo nieestetycznie. Jeżeli nie damy spacji po którymś z tych znaków interpunkcyjnych, może powstać długi zbitek wyrazów, które zamiast być ładnie rozdzielone między dwie linie, przeskoczą w całości do następnej. Zasady te dotyczą również takich znaków jak średnik, wykrzyknik i znak zapytania. W przypadku pauzy spacja powinna być zarówno przed jak i po niej. Nie dajemy spacji po nawiasie otwierającym i przed nawiasem zamykającym.

Większość osób zapomina również, że ze wględów estetycznych oraz wygody czytelnika nie powinno się pozostawiać pojedynczej litery na końcu linii (w przypadku nagłówków jest to wręcz błąd). Zważywszy, że komputery bywają rozmaicie skonfigurowane, koniec linii może wypaść w różnych miejscach, toteż najprostszą metodą uniknięcia tego jest wpisanie twardej spacji ( ) za pojedynczą literą, dzięki czemu będzie ona traktowana jako jedność z następnym wyrazem. Pisząc w edytorze graficznym uzyskujemy twardą spację tak samo jak np. w Wordzie, czyli naciskając jednocześnie klawisze Shift + Ctrl +Spacja.

Element HEAD

Czy nagłówek Twojego dokumentu (element HEAD) zawiera tytuł strony (title), słowa kluczowe (keywords), opis strony (description), definicję strony kodowej oraz wersji językowej?
Jeżeli nie wiesz jak sobie z tym poradzić, przeczytaj artykuły: "Promocja strony - META znaczniki keywords i description" oraz "ELEMENT HEAD miejsce na informacje o dokumencie".

Poprawność odnośników

Sprawdź, czy wszystkie odnośniki działają poprawnie. Dotyczy to zarówno odnośników w obrębie Twojej strony, jak i tych prowadzących do innych stron. Poprawność odnośników należy sprawdzać po zgraniu strony na serwer, gdyż czasami zdarza się, że edytor graficzny może zmienić wielkość liter w nazwach plików czy też katalogów na twardym dysku pod systemem Windows wszystko będzie działało poprawnie, zaś na serwerze pod systemem, który rozróżnia wielkość liter odnośnik nie zadziała.

Pamiętaj także, by co jakiś czas sprawdzać poprawność zewnętrznych odnośników strony często zmieniają adresy, a nawet zupełnie znikają z sieci. Nie musisz robić tego ręcznie na końcu artykułu zamieszczone są adresy serwisów, które zrobią to za Ciebie automatycznie.

Sprawdź czy wszystkie ilustracje są opatrzone alternatywnym tekstem, dzięki czemu użytkownik może się zorientować co przedstawia ilustracja w przypadku, gdy się ona nie załaduje. Sporo osób wyłącza ładowanie grafiki; są również tacy, którzy używają przeglądarek tekstowych (np. Lynx lub Lynx Viewer).
Sprawdź, jak wygląda strona, gdy nie załadujesz grafiki czy jest czytelna, czy użytkownik zorientuje się bez problemu jak się po niej poruszać.
Wszystkie ilustracje powinny mieć także podane wymiary, dzięki czemu przeglądarka może od razu rozplanować całą stronę zamiast przeliczać kilkakrotnie położenie wszystkich elementów.

Sprawdź jak się ładuje grafika, gdy strona jest już umieszczona na serwerze. Czasami zdarza się, że edytor graficzny, zamiast względnego odnośnika, zamieszcza bezwzględny odnośnik prowadzący do pliku na twardym dysku. Testując stronę z serwera zmień na dysku nazwę katalogu, w którym znajduje się strona, by być całkowicie pewnym, że grafika ładuje się z serwera.

Nie wszyscy używają Internet Explorera!
Istnieje bardzo wiele przeglądarek internetowych i strona powinna się dobrze wyświetlać pod każdą z nich, również w przypadku, gdy wyłączymy grafikę czy też ładowanie stylów.
Nie chodzi o to, by strona wyglądała identycznie pod wszystkimi przeglądarkami, gdyż często jest to po prostu niemożliwe, lecz by każda przeglądarka była w stanie poprawnie zinterpretować kod. Dużym błędem jest tworzenie strony dedykowanej tylko dla jednej przeglądarki, ponieważ przeważnie nie będzie zgodna ze standardem, a użytkownicy innych programów mogą mieć często spore problemy z jej oglądnięciem. Sprawdź jak będzie wyglądać Twoja strona pod Netscape, Sylabą, Lynxem czy Operą. Przynajmniej w przypadku Explorera oraz Netscape´a przetestuj także poprzednie wersje przeglądarek.
Na stronie: Web Page Backward Compatibility Viewer (http://www.delorie.com/web/wpbcv.html) możesz sprawdzić jak wygląda Twoja strona pod różnymi przeglądarkami.
Warto także zobaczyć jak strona będzie się prezentować na Mac´u czy Amidze oraz po wydrukowaniu.

W zależności od tego jakiej rozdzielczości używa odwiedzający - strona może zupełnie inaczej wyglądać. Sprawdź czy strona wyświetla się poprawnie pod najbardziej popularnymi rozdzielczościami: 800x600 i 1024x768, przy różnych rozmiarach czcionki, różnych rozmiarach okna oraz przy wyłączonej obsłudze stylów.
Jeżeli masz taką możliwość, skontroluj jak prezentuje się strona na różnych monitorach (włączając w to ekran notebooka) i przy różnej ilości kolorów. Zmniejsz ilość kolorów do 256, a nawet do 16 czy strona dalej dobrze się prezentuje?

Strona główna nie powinna się ładować dłużej niż 20 sekund, a pozostałe strony poniżej 15 sekund (przy lączu modemowym). Jeżeli strona ładuje się zbyt wolno, policz ile zajmuje zamieszczona na niej grafika. Najlepiej przyjmij zasadę, że na głównej stronie nie powinno być więcej niż 40 kB grafiki, a na pozostałych stronach nie więcej niż po 30 kB. Jeżeli Twoja grafika ma większą objętość, użyj programów do optymalizacji, aby ograniczyć jej rozmiar.
Pamiętaj także, że wszelkiego rodzaju skrypty, animacje oraz dźwięk również spowalniają ładowanie.
Istnieją parsery, które sprawdzają czas ładowania odnośniki do nich znajdziesz na końcu artykułu.

WALIDACJA KODU HTML

Walidacja jest procesem sprawdzenia poprawności składni dokumentu HTML oraz zgodności kodu zoficjalną specyfikacją języka HTML, która znajduje się na stronie W3C - The World Wide Web Consortium. Obecnie obowiązująca wersja to HTML 4.01, której specyfikacja znajduje się pod adresem: http://www.w3.org/TR/html4/ - jednak nie polecam jej czytania osobom początkującym, gdyż nie znając dobrze HTML'a ciężko jest się zorientować jak z niej korzystać. Na pewno nie nadaje się ona do nauki języka.

• Jeżeli kod strony jest poprawny, znacznie wzrasta prawdopodobieństwo, że strona będzie się dobrze wyświetlać pod większością przeglądarek, dzięki czemu zyskasz liczniejsze grono odwiedzających.
• Strona nie zawierająca błędów ładuje się znacznie szybciej, gdyż przeglądarka nie musi się "zastanawiać" jak ją właściwie zinterpretować oraz nie traci czasu na czytanie niepotrzebnych znaczników (np.: <strong></strong> bez jakiegokolwiek tekstu pomiędzy znacznikami lub przedziwnych deklaracji stylów powstających po przeniesieniu tekstu z MS Worda).
• Walidacja pozwala wychwycić błędy powstałe przy kopiowaniu fragmentów kodu z jednego pliku do drugiego (szczególnie dotyczy to miejsca 'wklejania' kodu skryptów lub powtórzonych deklaracji).
• Bardzo często edytory graficzne nie dają nam poprawnego kodu dzięki programom do walidacji możemy skrócić czas tworzenia strony korzystając z graficznego edytora, a następnie poprawić wygenerowany przez niego kod.
• Lepiej dowiedzieć się o niedoskonałościach swojej strony z raportu walidatora niż od użytkowników.
• W razie konieczności zmian na stronie dużo łatwiej się pracuje, gdy kod jest czysty oraz łatwiej jest uniknąć kolejnych błędów.
• Dzięki procesowi walidacji możemy zyskać dodatkową wiedzę o języku HTML oraz, w przypadku zmiany specyfikacji, dowiedzieć się jakie są różnice w stosunku do poprzedniej wersji.

Plik HTML powinien zaczynać się od deklaracji typu dokumentu (DTD - Document Type Definition), który specyfikuje wersję standardu języka HTML używanego na stronie. Przykładowo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional //EN">
Gdzie:
1. DOCTYPE deklaracja typu dokumentu
2. HTML - nazwa typu dokumentu
3. PUBLIC - typ dokumentu jest ogólnie dostępny
4. -//W3C//DTD HTML 4.0 Transitional//EN - używany typ dokumentu (HTML w wersji 4.0) w wersji angielskiej

Możemy również zamieścić odnośnik do konkretnego pliku:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
Taka deklaracja oznacza, że nasz dokument trzyma się ściśle wytycznych wersji 4.0 języka HTML.

Walidatory skanują dokument w poszukiwaniu błędów w kodzie oraz niezgodności ze specyfikacją; dodatkowo zwracają one uwagę na brakujące lub błędnie użyte znaczniki, nieprawidłowe ich zagnieżdżenia oraz błędne użycie stylów. Najczęściej spotykane błędy to:

• Literówki czy też czeskie błędy np.: <p align="righ"> lub <p align="rigth"> zamiast <p align="right">.
• Niedomknięte znaczniki (brak końcowego nawiasu) lub podwójne zamknięcie (dwa końcowe nawiasy).
• Brak cudzysłowu np.: <img src="zdjecie.gif alt="Zdjęcie height="36" width="201">, czyli jeden z tych błędów, które ciężko jest zauważyć na pierwszy rzut oka.
• Brak elementu ALT czy też height i width w znaczniku img.
• Używanie znaczników HTML (np.: <br>, <p>) wewnątrz kodu skryptu.
• Nieprawidłowe zagnieżdżenie znaczników np.: <strong><i>tekst</strong></i> zamiast <strong><i>tekst</i></strong>.
• Używanie znaczników font face oraz font size, które są traktowane jako przestarzałe i zamiast nich sugeruje się stosowanie stylów.
• Niepoprawne lub nie zalecane (ang. deprecated znaczy dosłownie potępiane) atrybuty znaczników.

PROGRAMY DO TESTOWANIA STRON I WALIDACJI KODU HTML

Narzędzia służące do walidacji można podzielić na dwie zasadnicze grupy: programy do użytku lokalnego (offline) oraz serwisy znajdujące się na sieci (ang. parser), które w zdalnym trybie sprawdzają stronę zamieszczoną wInternecie (online).
Większość parserów, oprócz walidacji kodu, ma także dodatkowe opcje, takie jak m.in.: sprawdzanie czasu ładowania strony, poprawności odnośników, popularności strony, pisowni (niestety nie ma jeszcze takiej usługi w języku polskim), możliwość porównania wyglądu strony w różnych przeglądarkach itp.
Dzięki temu możemy sprawdzić nie tylko poprawność kodu, ale dodatkowo otrzymujemy sporo innych informacji, których uzyskanie "na piechotę" zajęłoby nam mnóstwo czasu.
W przypadku parserów wystarczy przeważnie podać adres strony internetowej, czasami trzeba wybrać opcje, które nas interesują. Programy lokalne proszą o podanie pliku, który chcemy sprawdzić. Następnie otrzymujemy szczegółowy raport o naszej stronie.

• error - błąd
• warning - ostrzeżenie
• browser przeglądarka
• check - sprawdza(e)nie
• compatibility - kompatybilność (zgodność)
• not compatible - niekompatybilny
• unsupported - nieobsługiwany
• attribute - atrybut
• bad (broken) link - nie działający odnośnik

Błędny zapis: <FONT FACE ="arial" SIZE="12">
In HTML 4.0, FONT is deprecated in favor of using style sheets. FONT may become obsolete in the future.
Zamiast używania font face i font size należy użyć arkusza stylów.

Błędny zapis: <BODY background="art./tlo.gif" text="0000FF">
The TEXT attribute has an invalid attribute value "0000FF". This attribute must have one of the following values: one of the 16 basic color names or a six digit hexadecimal number in the form #HHHHHH.
Błędna wartość atrybutu należy dodać # przed ciągiem znaków lub zastosować nazwę słowną jednego z 16 podstawowych kolorów.

Prawidłowy zapis: <BODY background="art./tlo.gif" text="#0000FF">
Błędny zapis: <TD align="middle">
The ALIGN attribute has an invalid attribute value "middle". This attribute must have one of the following values: "center", "char", "justify", "left", or "right".
Błędna wartość atrybutu jedyne możliwe to: "center", "char", "justify", "left", lub "right".
Prawidłowy zapis: <TD align="center">
Błędny zapis: <A HREF=mailto:andy@hotmail.net>andy@hotmail.net</A>
The attribute value "mailto:andy@hotmail.net " for the HREF attribute was not enclosed in single or double quotation marks when it must be.
Brak cudzysłowów w atrybucie HREF.
Prawidłowy zapis: <A HREF="">mailto:andy@hotmail.net"andy@hotmail.net</A>

<center>
In HTML 4.0, CENTER is deprecated in favor of using style sheets. CENTER may become obsolete in the future.
W HTML 4.0 znacznik center nie jest zalecany i w przyszłości może wyjść z użycia. Należy używać arkuszy stylów.

<SCRIPT LANGUAGE="JavaScript">
HTML 4.0 requires the TYPE attribute to specify the scripting language for the SCRIPT element. For example, use TYPE="text/javascript" for JavaScript.
HTML 4.0 wymaga atrybutu TYPE do określenia użytego języka skryptowego.

CSE HTML Validator Professional (shareware) http://www.htmlvalidator.com/
Łatwy do użycia walidator kodu HTML. Recenzja CSE HTM Validator PRO v 4.0: http://fabryka.republika.pl/strefa/Recenzja.asp?id=73
Alert LinkRunner (shareware)
Narzędzie do testowania linków offline i online.
Astra SiteManager (shareware)
Sprawdzanie spójności stron, testowanie odnośników.
Browser Sizer (freeware)
Pokazuje jak wyglądają nasze strony pod różnymi rozdzielczościami.
Powyższe trzy programy są do pobrania ze Strefy zrzutu Republiki.
 
Bobby (freeware)
Walidator HTML
CyberSpyder Link Test (Shareware)
Program do testowanie poprawności odnośników.
Powyższe dwa programy są do pobrania ze strony Tucows

NetMechanic Online http://www.netmechanic.com/maintain.htm
Sprawdzanie poprawności HTML, kompatybilności z przeglądarkami, czasu ładowania strony, testowanie odnośników oraz sprawdzanie pisowni w języku angielskim.
Dr. Watson http://watson.addy.com/
Sprawdzanie poprawność kodu HTML, czasu ładowania strony, poprawności odnośników, weryfikacja odnośników do plików graficznych, sprawdzanie popularności strony oraz pisowni w języku angielskim.
Websitegarage http://www.websitegarage.com/
Sprawdzanie poprawność kodu HTML, czasu ładowania strony, poprawności odnośników, popularności strony, pisowni w języku angielskim, możliwość porównania wyglądu strony w różnych przeglądarkach, generacja znaczników META, GIF Lube (optymalizacja grafiki) oraz comiesięczne raporty pocztą elektroniczną.
WDG HTML Validator - http://www.htmlhelp.com/tools/validator/
Zdalny walidator HTML na stronie HTMLhelp.
CAST Bobby http://www.cast.org/bobby/
Sprawdzanie poprawności kodu HTML, kompatybilności z różnymi przeglądarkami oraz czasu ładowania strony.
CSSCheck - http://htmlhelp.com/tools/csscheck/
Sprawdzanie poprawności stylów możemy podać adres URL, pod którym znajduje się nasz plik ze stylami lub wkleić bezpośrednio jego zawartość. Możesz także ściągnąć ten program na dysk lokalny.
Delorie - http://www.delorie.com/web/
Sprawdzanie poprawność kodu HTML, możliwość porównania wyglądu strony w różnych przeglądarkach, symulacja wyszukiwarek (możesz sprawdzić co widzą wyszukiwarki przeglądając Twoją stronę).
GIF Wizard SiteScan http://www.gifwizard.com/
Sprawdzanie poprawności odnośników oraz wyszukiwanie grafiki, która nie jest zoptymalizowana.
MetaMedic http://www.northernwebs.com/set/setsimjr.html
Sprawdzanie poprawności znaczników META.
Mizer - http://www.antimonysoftware.com/mizer.html
Usuwanie zbędnych informacji z kodu HTML oraz JavaScripts.
Site Inspector - http://www.siteinspector.com/
Sprawdzanie poprawność kodu HTML, kompatybilności z przeglądarkami, poprawności odnośników, czasu ładowania, popularności strony oraz tego, jak jest czytana przez wyszukiwarki.
cg-eye - http://www.htmlhelp.com/tools/cgeye/
Sprawdzanie poprawności skryptów CGI.

Agnieszka Richter

Artykuł został napisany dla Optimus Pascal S.A. Publikowanie całości lub fragmentów niniejszego artykułu jest zabronione bez zgody właściciela.
 

[ Strona główna ] [ Uwagi ogólne ] [ Błędy przy tworzeniu stron ]
[ Przykazania webdesignera ] [ Artykuły ] [ Linki ] [ Słowo od autorki ]

Copyright © 1999-2001, Kaila Studio. Wszelkie prawa zastrzeżone.
Agnieszka 'Kaila' Richter - aga@kailastudio.com.pl
Ostatnia aktualizacja: 26 listopada 2001