Forum

Czyszczenie kodu html programem HTML Tidy
czyli jak skutecznie zmniejszyć objętość stron internetowych, poprawiając przy tym automatycznie błędy składni i struktury

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 HTML i XHTML 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

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.


2. Zainstaluj program: tidy-install.exe.

3. Umieść skrypt skrypt-tidy.bat w tym samym katalogu co pliki .htm i .html.


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.


5. W przykładzie strony zrobione w Wordzie wyraźnie zmniejszyły się. W innym przypadku zmienią się nieznacznie.


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:
• plik wykonywalny .exe razem z dynamiczną biblioteką .dll
• plik konfiguracyjny .txt, utworzyłem go samodzielnie

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:
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:

Co to ma wszystko znaczyć?
Postaram się wytłumaczyć większość z nich.

Cytat:anchor-as-name: no

Usuwa istniejący, niepotrzebny atrybut name="…" gdy element posiada atrybut id="…"; gdy go nie posiada, atrybut jest konwertowany: name="…" → id="…".

Cytat:bare: no

Nie usuwa HTML'owych „dodatków” MS Worda w stylu <u7:p> czy <o:p> — mogłoby to całkowicie „rozjechać” stronę.

Cytat:clean: yes

„Rozbiera” zdeprecjonowane elementy i atrubuty, w zamian umieszczając styl CSS w nagłówku.

Cytat:doctype: transitional

Stosuje przejściową deklarację dokumentu, możesz użyć: strict.

Cytat:drop-empty-paras: yes

Usuwa puste akapity.

Cytat: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).

Cytat:fix-backslash: yes

Poprawia backslashe na slashe.

Cytat:hide-comments: yes

Usuwa wszystkie komentarze <!--…-->.

Cytat:join-styles: yes

Łączy wartości atrybutów style="…" jeśli wykryto takie same.

Cytat:lower-literals: yes

Zamienia <ZNACZNIK ATRYBUT="…"> na <znacznik atrybut="…">.

Cytat:output-html: yes

Zapisuje na wyjściu dokument HTML. Można użyć output-xhtml, żeby został wygenerowany kod zgodny z XML.

Cytat:quote-ampersand: yes

Zamienia „&” na „&amp;”.

Cytat:repeated-attributes: keep-last

Zachowuje ostatni atrybut znacznika, jeśli wykryto takie same.

Cytat: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.

Cytat:indent-spaces: 0

Gdy indent: yes, ustawia ilość spacji jako wcięcia.

Cytat:wrap: 0

HTML Tidy nie będzie dzielił linii (gdy za długa) np. na 68 znaku.

Cytat:char-encoding: raw

Pozostawia kodowanie znaków nietknięte.

Cytat:force-output: yes

Wyświetla wynik na wyjściu nawet, gdy są błędy których nie może poprawić.

Cytat:tidy-mark: no

Program nie dopisuje się w <meta>.

Cytat:Program nie dopisuje się w <meta>.

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: Firebug i Page Speed. Ostatnim add-on'em sprawdzaj objętość gotowych stron. Kompresuj grafikę. Gdy tylko możesz stosuj nie pseudo– ale standardy internetowe; nie polegaj na IE.


Licencja CC.