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…
- Archiwum .zip wypakuj najpierw do osobnego folderu. Znajdziesz tam dwa pliki.
-
Zainstaluj program: tidy-install.exe.
-
Umieść skrypt skrypt-tidy.bat w tym samym katalogu co pliki .htm i .html.
- Uruchom skrypt. HTML Tidy wysprząta strony ze zbędnych tagów; osadzając style CSS zamiast przestarzałych tagów , konwertując backslashe () na slashe (/) itp.
- 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:
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.
Usuwa istniejący, niepotrzebny atrybut name="…" gdy element posiada atrybut id="…"; gdy go nie posiada, atrybut jest konwertowany: name="…" → id="…".
Nie usuwa HTML’owych „dodatków” MS Worda w stylu
czy
— mogłoby to całkowicie „rozjechać” stronę.
„Rozbiera” zdeprecjonowane elementy i atrubuty, w zamian umieszczając styl CSS w nagłówku.
Stosuje przejściową deklarację dokumentu, możesz użyć: strict.
Usuwa puste akapity.
Usuwa znaczniki których zawartości nie widać w przeglądarce, a zawierające informacje o właścicielu pliku (Word).
Poprawia backslashe na slashe.
Usuwa wszystkie komentarze .
Łączy wartości atrybutów style="…" jeśli wykryto takie same.
Zamienia na .
Zapisuje na wyjściu dokument HTML. Można użyć output-xhtml, żeby został wygenerowany kod zgodny z XML.
Zamienia „” na „”.
Zachowuje ostatni atrybut znacznika, jeśli wykryto takie same.
Radzi sobie ze stronami z Worda zapisanymi jako „strona html”. Zapisuj witryny jako „strona html, przefiltrowana”, lub użyj przyzwoitego edytora HTML.
Gdy indent: yes, ustawia ilość spacji jako wcięcia.
HTML Tidy nie będzie dzielił linii (gdy za długa) np. na 68 znaku.
Pozostawia kodowanie znaków nietknięte.
Wyświetla wynik na wyjściu nawet, gdy są błędy których nie może poprawić.
Program nie dopisuje się w .
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.