Testowanie i walidacja stron WWW

INF.03 · Poprawność kodu, publikacja, optymalizacja, sprawdzanie HTML i CSS

1. Co to jest walidacja strony?

  • Proces sprawdzania poprawności kodu HTML/CSS względem standardów W3C
  • Wykrywanie błędów, ostrzeżeń i niezgodności w strukturze dokumentu
  • Poprawa czytelności, kompatybilności i dostępności strony we wszystkich przeglądarkach

2. Najważniejsze narzędzia walidacyjne

  • W3C HTML Validator: sprawdza całą strukturę dokumentu, np. validator.w3.org
  • W3C CSS Validator: analizuje style CSS, wskazuje błędy i przestarzałe właściwości, np. jigsaw.w3.org/css-validator
  • Edytory kodu (VS Code, Sublime, Atom): mają rozszerzenia ułatwiające wykrywanie błędów na bieżąco
  • Dodatki do przeglądarki (Web Developer, HTML Validator): testują kod bezpośrednio w oknie strony

3. Jak korzystać z walidatorów? Instrukcja krok po kroku

  1. Wejdź na validator.w3.org i wklej adres strony lub kod HTML.
  2. Przejrzyj listę błędów i ostrzeżeń — najczęściej: niezakończone tagi, brakujące atrybuty, niepoprawne zagnieżdżenia, brak "alt" przy obrazkach.
  3. Popraw kod według wskazówek walidatora, zapisując pliki w edytorze.
  4. Uruchom ponownie test — sprawdź czy strona jest "Valid".
  5. Analogicznie używaj walidatora CSS dla stylów (jigsaw.w3.org/css-validator).
Przykładowe błędy i naprawa
  • Błąd: <img src="baner.jpg">
    Popraw: <img src="baner.jpg" alt="Baner strony">
  • Błąd: <div><p>Tekst</div></p>
    Popraw: <div><p>Tekst</p></div>
  • Błąd CSS: background-colr: #fff;
    Popraw: background-color: #fff;

4. Publikacja i Optymalizacja Strony WWW

  • Po walidacji należy zoptymalizować obrazy (kompresja, format WebP), minifikować kod CSS/JS oraz sprawdzić działanie na różnych urządzeniach.
  • Publikując stronę, zadbaj o hosting obsługujący certyfikat SSL (https) i szybki dostęp.
  • Tylko strona bez błędów HTML/CSS i zoptymalizowana gwarantuje prawidłowe działanie i lepszą pozycję w wyszukiwarkach (SEO).
  • Testuj witrynę pod kątem dostępności (WCAG), czytelności i wydajności.

5. Testowanie w DevTools i Szybkość Strony

Narzędzia developerskie (DevTools) w przeglądarce (F12) to klucz do testowania responsywności i rozwiązywania problemów ze stylem CSS w czasie rzeczywistym.

  1. Testowanie RWD: Otwórz DevTools (F12), a następnie włącz tryb urządzeń mobilnych (Ctrl+Shift+M). Sprawdź, jak strona wygląda na różnych rozdzielczościach.
  2. Debugowanie CSS: W zakładce Elements możesz klikać elementy i zmieniać ich style CSS na żywo, by szybko znaleźć błąd.
  3. Konsola: Sprawdzaj zakładkę Console w poszukiwaniu błędów JavaScriptu lub problemów z ładowaniem zasobów.

Wydajność (Lighthouse/PageSpeed)

Szybkość ładowania to kluczowy element UX. Użyj audytu Lighthouse (zakładka w DevTools) lub Google PageSpeed Insights, aby sprawdzić:

  • Performance: Jak szybko strona wyświetla treść (np. wskaźnik LCP).
  • Accessibility: Ocena zgodności z WCAG.
  • Best Practices: Zgodność z dobrymi praktykami kodowania.

6. Checklist — kontrola poprawności strony WWW