Odwiedzający Twoją stronę marudzą, że nie mogą jej czytać, bo rozjeżdża się w ich przeglądarkach? Może jesteś średnio‐zaawansowanym koderem HTML i prowadzisz bałaganiarski styl pisania witryn? Często zdarza Ci się zgubić w gąszczu niezbyt dobrze umieszczonych tagów? Być może szlag Cię trafia gdy walidator znów niejasno informuje cię o znalezionych błędach… Chcąc uczynić źródło bardziej czytelnym i łatwym do edycji skorzystaj z open‐source’owej aplikacji HTML Tidy.

Ale o sso chodzi?

Domyślnie program sprawdza czy dokument napisany w języku HTMLXHTML jest zgodny z zaleceniami organizacji W3C. Po co nam one? Otóż zapewniają nas, że strony tworzone zgodnie ze specyfikacją zostaną poprawnie wyświetlone przez wszystkie przeglądarki dbające o standardy. Odnajdując i krótko opisując problem, program pomaga nam dbać o ich poprawność. Więcej informacji na kursie browsehappy.

Poprawność składni
np. odpowiednie otwieranie i zamykanie tagów, atrybutów, oraz kodowanie znaków
niezbędne do wyświetlenia dokumentu
Poprawność struktury
odpowiednia budowa dokumentu — np. umieszczanie elementów liniowych w blokowych, nie odwrotnie
uniemożliwia błędne zachowanie przeglądarek

⁂ Więcej informacji o standardach znajdziesz na stronach:

  1. Standardy — sztuka dla sztuki, czy konieczność?
  2. Testowanie strony, walidacja html
  3. W zgodzie ze standardami
  4. Szanujmy standardy
  5. Standardy — to się opłaca!

Nie można by tak szybciej?

Ustawiając odpowiednie parametry, Tidy sam poprawi pliki .html dając na wyjściu poprawny, odchudzony dokument. Staraj się używać go zawsze gdy pracujesz z programami WYSIWYG które generują nadmiarowy kod.

Dobra, dawaj go…

  1. Archiwum .zip wypakuj najpierw do osobnego folderu. Znajdziesz tam dwa pliki.instalator html tidy i skrypt umieszczone w jednym katalogu
  2. Zainstaluj program: tidy-install.exe.
  3. Umieść skrypt skrypt-tidy.bat w tym samym katalogu co pliki .htm.html.pliki .html razem ze skryptem .bat w jednym katalogu
  4. Uruchom skrypt. HTML Tidy wysprząta strony ze zbędnych tagów; osadzając style CSS zamiast przestarzałych tagów <font>, konwertując backslashe (\) na slashe (/) itp.działanie programu html tidy w konsoli
  5. W przykładzie strony zrobione w Wordzie wyraźnie zmniejszyły się. W innym przypadku zmienią się nieznacznie.pliki html po czyszczeniu html tidy

Jak działa to twoje maleństwo!?

Utworzony instalator to nic innego jak zbiór plików dostępnych powszechnie w internecie. Składa się na niego:

Uruchamiając skrypt wykonuje się polecenie wsadowe „każące” przerabiać wszystkie pliki w języku HTML, konsolowym programem tidy.exe który jest już zainstalowany. Powiesz że można go w takim razie uruchomić ręcznie — tak, poleceniem:

tidy -config [ścieżka-konfiguracji.txt] [plik.html]

Cały sekret nie polega na dopisywaniu parametrów do komendy, lecz utworzeniu odpowiedniego pliku z konfiguracją takich parametrów, które chcemy uzyskać. W pakiecie ustawienia są następujące:

anchor-as-name: no
bare: no
clean: yes
doctype: transitional
drop-empty-paras: yes
drop-proprietary-attributes: yes
enclose-text: yes
fix-backslash: yes
fix-bad-comments: no
fix-uri: yes
hide-comments: yes
join-styles: yes
join-classes: yes
lower-literals: yes
merge-divs: auto
merge-spans: auto
ncr: yes
output-html: yes
preserve-entities: yes
quote-ampersand: yes
quote-nbsp: yes
repeated-attributes: keep-last
word-2000: yes
indent: no
indent-spaces: 0
markup: yes
sort-attributes: alpha
wrap: 0
char-encoding: raw
force-output: yes
tidy-mark: no
write-back: yes

Co to ma wszystko znaczyć?

Postaram się wytłumaczyć większość z nich.

anchor-as-name: no
Usuwa istniejący, niepotrzebny atrybut name="…" gdy element posiada atrybut id="…"; gdy go nie posiada, atrybut jest konwertowany: name="…"id="…".
bare: no
Nie usuwa HTML‐owych „dodatków” MS Worda w stylu <u7:p> czy <o:p> — mogłoby to całkowicie „rozjechać” stronę.
clean: yes
„Rozbiera” zdeprecjonowane elementy i atrubuty, w zamian umieszczając styl CSS w nagłówku.
doctype: transitional
Stosuje przejściową deklarację dokumentu, możesz użyć: strict.
drop-empty-paras: yes
Usuwa puste akapity.
drop-proprietary-attributes: yes
Usuwa znaczniki których zawartości nie widać w przeglądarce, a zawierające informacje o właścicielu pliku (Word).
fix-backslash: yes
Poprawia backslashe na slashe.
hide-comments: yes
Usuwa wszystkie komentarze <!--…-->.
join-styles: yes
Łączy wartości atrybutów style="…" jeśli wykryto takie same.
lower-literals: yes
Zamienia <ZNACZNIK ATRYBUT="…"> na <znacznik atrybut="…">.
output-html: yes
Zapisuje na wyjściu dokument HTML. Można użyć output-xhtml, żeby został wygenerowany kod zgodny z XML.
quote-ampersand: yes
Zamienia „&” na „&amp;”.
repeated-attributes: keep-last
Zachowuje ostatni atrybut znacznika, jeśli wykryto takie same.
word-2000: yes
Radzi sobie ze stronami z Worda zapisanymi jako „strona html”. Zapisuj witryny jako „strona html, przefiltrowana”, lub użyj przyzwoitego edytora HTML.
indent-spaces: 0
Gdy indent: yes, ustawia ilość spacji jako wcięcia.
wrap: 0
HTML Tidy nie będzie dzielił linii (gdy za długa) np. na 68 znaku.
char-encoding: raw
Pozostawia kodowanie znaków nietknięte.
force-output: yes
Wyświetla wynik na wyjściu nawet, gdy są błędy których nie może poprawić.
tidy-mark: no
Program nie dopisuje się w <meta>.
write-back: yes
Nadpisuje pierwotne pliki. Pamiętaj o kopii!

Co z Linuksem?

Program ten dostępny jest również na Linuksie — gotowe paczki znajdziesz w większości depozytorii. Przystosuj tylko plik z ustawieniami.

Wszystko wiem, idę pisać moją stronę

Internet jest dla ludzi — pisz sensownie o swoich zainteresowaniach, pasji życiowej. Nie musisz znać języka html by tworzyć strony. Używaj Worda, czegokolwiek, pamiętając o tym, by odwiedzający mieli możliwość przeglądania twojej witryny bez nerwów.

Dbaj o wagę plików — im cięższe, tym dłużej czeka się na wczytanie. Zainstaluj Firefoksa, a z nim dodatki: FirebugPage Speed. Ostatnim add‐onem sprawdzaj objętość gotowych stron. Kompresuj grafikę. Gdy tylko możesz stosuj nie pseudo‐ ale standardy internetowe; nie polegaj na IE. Zmień kodowanie swojej strony na utf-8.