Jest 2005 rok. Minęło ponad cztery lata od wydania pierwszej specyfikacji XHTML. W sieci to epoka. Czy na pewno? Ile jest dostępnych w internecie polskich, poprawnych kursów dla początkujących webmasterów, które są kompletne i od początku stawiają sprawę jasno:
Obecnie obowiązującym standardem jest XHTML. Nie ma już sensu uczyć się przestarzałych technik, ktore wykorzystują obejścia, 'są sprytnym wykorzystaniem', są zależne od przeglądarki.
Nie chcesz nabywać przestarzałych nawyków, chcesz się nauczyć aktualnych (i działających) standardow to zapomnij o HTML i ucz się XHTML.
Niestety najczęściej o XHTML wspomina się pod koniec kursów HTML jako o ciekawostce, która będzie w przyszłości normą.
Ta przyszłość wciąż nie nadchodzi.
To co teraz czytasz takim kursem nie będzie - ważniejsze od merytorycznej poprawności czy dokładności są tu sprawy praktyczne - jest to tylko krótkie wyjaśnienie czym naprawdę jest XHTML i jak zacząć robić strony XHTML.
To proste z podstawowego powodu. W tej chwili XHTML (zarówno 1.0 jak i 1.1) - z praktycznego punktu widzenia - jest po prostu poprawnym HTML-em, przerobionym według kilku zasad XML, które porządkują kod, jest przygotowaniem do zmian, które nadejdą w przyszłosci. Jeśli znasz HTML bardzo szybko możesz nauczyć tworzyć dokumenty XHTML.
I na tym właśnie polega problem - jeśli znasz HTML - bo tym czego trzeba się nauczyć są standardy W3C a nie znane od lat sztuczki lub znaczniki i atrybuty powszechnie używane bo działające w popularnych przeglądarkach.
Tak więc HTML stał się przeszłością, ale to właśnie poprawny HTML 4.01 stał się podstawą specyfikacji XHTML 1.0.
Na pytanie dlaczego z ogóle zajmować się XHTML, po co się go uczyć, skoro przecież 'HTML działa nadal' odpowiedź jest prosta - to właśnie XHTML jest aktualnie obowiązującym standardem zalecanym przez W3C. Kontynuując rozwój języka hipertekstowego znacznie poszerza jego możliwości, jest zgodny z XML co czyni go doskonałym narzędziem do przetwarzania strukturalnie uporządkowanych informacji, jest otwarty na wiele zastosowań i przede wszystkim ma doskonałą metodę rozwoju.
HTML (HyperText Markup Language - język znaczników hipertekstowych), który stworzył w 1990 Tim Berners-Lee był prostym językiem znaczników hipertekstowych i bardzo szybko rozwinął się w znakomite narzędzie do opisu zarówno treści (poprzez znaczniki strukturalne HTML) jak i wyglądu (CSS) dokumentu. Obecnie już jako DHTML pozwala bez większych problemów przekazać użytkownikom internetu zawartość w dowolnej formie. Pewnym problemem są jeszcze nie do końca zgodne ze specyfikacjami W3C przeglądarki, ale odkąd pojawiły się Mozilla i Opera 7 dostęp do odpowiednich narzędzi jest już tylko decyzją użytkownika.
Jednak W3C zdecydowało zakończyć prace nad HTML na wersji 4.01 - ogłoszono, że jest to ostatnia wersja tego języka i prace nad nim nie będą już kontynuowane. Dlaczego?
Otóż HTML - jak to określił Brian Kernighan, parafrazując akronim WYSIWYG - daje tylko to co widzisz, inaczej mówiąc określa tylko stonę wizualną, nie umożliwiając klasyfikowania i przeszukiwania treści dokumentu.
Rozwiązaniem jest powrót do źródeł.
Tym źródłem jest SGML (Standard Generalized Markup Language - standardowy język uogólnionych znaczników) - bardzo skomplikowany język pozwalający na zapisywanie złożonych struktur danych w plikach tekstowych. Umożliwia umieszczanie dodatkowych informacji normalnie niewidocznych dla użytkownika, ale pozwalających określić bardzo dokładnie nie tylko strukturę całego dokumentu, ale także i znaczenie poszczególnych jego fragmentów.
SGML - chociaż został w 1986 oficjalnie przyjęty jako norma ISO - ma jednak tą wadę, że jest bardzo złożony, co powoduje, że oprogramowanie do jego przetwarzania jest skomplikowane i drogie. Już to dyskwalifikuje go jako powszechnie używany w internecie standard. Poza tym część z jego możliwości nie jest potrzebna.
Tym co należało stworzyć był prostszy SGML, stworzony z myślą o internecie.
Jest nim XML (eXtensible Markup Language - rozszerzalny język znaczników), który - poodobnie jak SGML - jest metajęzykiem, a więc raczej zestawem reguł pozwalających użytkownikowi tworzyć własne języki opisu określonych rodzajów dokumentów. Mogą to być pliki tekstowe, rysunki (wektorowe), arkusze kalkulacyjne, strumienie danych itp.
XML jest uniwersalnym rozwiązaniem, stosowanym obecnie zarówno w pakietach biurowych (OpenOffice.org) jak i komunikatorach (Jabber/XMPP). Powala na tworzenie własnych znaczników określających np. znaczenie (nazwisko, data, tytuł itp.) lub konkretny rodzaj danych (np. waluta, suma, procent) wyglądających tak samo jak znaczniki znane z HTML:
<waluta>USD</waluta><kwota>1.000.000</kwota>
DTD (Document Type Definition - definicja typu dokumentu) określa jakie elementy mogą w nim wystąpić, w jakim porządku i z jakimi atrybutami. To właśnie za pomocą DTD tworzy się kolejne języki na bazie SGML czy XML. DTD ukonkretnia metajęzyk do poziomu szczegółowej specyfikacji określonego języka. O ile SGML można uznać za język programowania wysokiego poziomu to DTD może być uważane za program napisany w tym języku.
To właśnie DTD jest narzędziem tworzącym język na podstawie reguł zawartych w metajęzyku. Nie jest to rzecz, która pojawiła się dopiero niedawno, ponieważ była również wymagana przez specyfikację HTML, ale mało kto o tym pamiętał. Ponieważ przeglądarki praktycznie rzecz biorąc nie zwracały na to uwagi, więc w praktyce pomijano to jako rzecz niepotrzebną.
Teraz jednak tworząc dokument XHTML nie możemy o niej zapomnieć
Szczegółowa lista tych definicji znajduje się na W3C QA - List of valid DTDs you can use in your document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
W XHTML (eXtensible HyperText Markup Language) jednak DTD jest wymagany bezwzględnie, ze względu na przyszłe zróżnicowanie rodziny XHTML definicja jest niezbędna, ponieważ określi sposób czytania znaczników.
To jest jednak sprawa przyszłości. Czym się różni XHTML od HTML już dzisiaj?
Jak to definiuje opis na stronie W3C XHTML 1.0 to przeformułowanie HTML 4.01 według reguł XML.
Ważne jest to, że jest to całkowicie poprawny dokument HTML, czyli ściśle zgodny ze specyfikacją W3C.
Jest to w praktyce najtrudniejszy warunek do spełnienia, cała reszta jest już bardzo prosta ponieważ są to stosunkowo proste reguły porządkujące pisanie i łatwo ich przestrzegać
Ponieważ XHTML 1.1 to XHTML 1.0 Strict poddany modularyzacji oraz wprowadzajacy ściślejsze rozdzielenie treści od wyglądu, więc w zasadzie od strony praktycznej niczym się nie różnią
Rozwój HTML i XHTML w ujęciu historycznym wyglada tak:
SGML (od 1986 standard ISO)
| |
| |__ HTML 1.0 (1990)
| |
| HTML 2.0 (1995)
| |
| HTML 3.2 (1997)
| |
| HTML 4.0 (1997-98)
| |
| HTML 4.01 (1999)
|
XML --- XHTML 1.0 (2000-02) - modularyzacja - XHTML 1.1 (2001)
|
(inne zastosowania XML)
| _ formaty pakietu OpenOffice.org;
| _ XMMP - Jabber;
| _ XUL - projekt Mozilla...
| _ kodowanie metainformacji: RDF (Resource Description Framework), CDF (Channel Description Format)
| _ mapy tematyczne: RSS (Rich Site Summary), OCS (Open Content Syndication)
| _ multimedia: SVG (Scallable Vector Graphics), PGML (Precision Graphics Markup Language), VML (Vector Markup Language), SMIL (Synchronized Multimedia Integration Language), VoiceXML, SABLE (Text-to-Speech Synthesis Markup)
| _ telekomunikacja: WML (Wireless Markup Language), DRP (HTTP Distribution and Replication Protocol)
| _ kodowanie informacji naukowych: MathML (Matematical Markup Language), CML (Chemical Markup Language), BSML (Bioinformatic Sequence Markup Language), BIOML (BIOpolymer Markup Language), AML (Astronomical Markup Language), AIML (Astronomical Instrument ML), ThML (Theological Markup Language), GedML (Genealogical Data in XML), VHG (Virtual Hyperglossary), OMF (Weather Observation Markup Format), GLM (Geography Markup Language)
| ...
W sformułowaniu 'XHTML to nie HTML' chodzi właśnie o to, że dalszy rozwój tego języka będzie przebiegał zgodnie z regułami typowymi dla XML. O ile XHTML 1.0 w ścisłym tego słowa znaczeniu jest po prostu przeformułowaniem HTML 4.01 według ścisłych zasad XML, to już nastepne wersje będą się zasadniczo różnić, przede wszystkim sposobem rozwoju, który najlepiej opisuje słowo modularyzacja.
Powstał na przykład XHTML Basic - definiujący minimalny zestaw reguł dla dokumentu XHTML - opisujący dokumenty przeznaczone dla urządzeń nie mających takich możliwości jak PC (mobile, PDA).
Właśnie wynikiem modularyzacji jest XHTML 1.1, który w zasadzie jest wyposażony w ten sam zestaw reguł co poprzednik. Jednak jego specyfikacja została poddana modularyzacji co czyni go podstawą dla opracowania w przyszłości wielu rodzin języków dopasowanych do bardziej wyspecjalizowanych potrzeb. Łatwo zwiększyć jego możliwości po prostu dodając kolejne moduły - w tej chwili praktycznym zastosowaniem takiej metody jest np. XHTML 1.1 i MathML 2.0.
W przyszłości XHTML nie będzie szczegółowo specyfikował konkretnego języka znaczników hipertekstowych a po prostu definiował - używając np. DTD - zestawy modułów dla konkretnych zastosowań i będzie to można łatwo zmienić lub rozszerzyć dopasowując do swoich potrzeb. Będzie istniała pewna ilość wymaganych modułów ('core modules') odpowiedzialnych za strukturę i zawierających podstawowe znaczniki, które zapewnią wyświetlenie dokumentu niezalenie od urządzenia i programu. W ten sposób całość specyfikacji HTML 4.01 zostanie rozłożona na części i przetworzona według potrzeb. Dzięki temu zarządzanie zarządzanie zawartością i dostosowywanie jej do różnych urządzeń staje się łatwiejsze.
W ten ewolucyjny sposób wizualny interfejs internetu zostanie przystosowany do nowych technologii i zastosowań, zachowując cały czas wsteczną kompatybilność z programami niezdolnymi do czytania dokumentów XML. Dla starszych przeglądarek dokumenty XHTML są widziane jako zwykły HTML, ale w rzeczywistości jest to już aplikacja XML i posiada typowe dla niej cechy. Właśnie ze względu na przyszłą wieloplatformowość aby uzyskać bardziej przewidywalne zachowanie wprowadzono tak ścisłe reguły składni.
W inny sposób można to opisać w ten sposób:
[ HTML 4.01 ]
|
przeformułowanie według zasad XML
|
[ XHTML 1.0 ]
|
modularyzacja
|
[ XHTML 1.1 ]
|
modularyzacja i dywersyfikacja
|
[ zróżnicowana rodzina języków XHTML o budowie modułowej ]
Pora na część praktyczną czyli opis tego jak XML zmienił HTML 4.01 i oczym należy pamiętać przy tworzeniu dokumentów XHTML:
<?xml version="1.0" encoding="ISO-8859-2"?>1.0 jest aktualnie obowiązującą wersją XML i w zasadzie według specyfikacji jest domyślnym standardem kodowania w XHTML jest UTF-8, ale ponieważ nie jest jeszcze w Polsce stosowany jako norma (Unicode nadal tylko teoretycznie jest normą), bezpieczniej będzie określić kodowanie ISO-8859-2
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<?xml version="1.0" encoding="iso-8859-2"?> <?xml-stylesheet href="#style" type="text/css"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">Warto zauważyć tu dwie rzeczy:
<?xml-stylesheet href="#style" type="text/css"?>jest XML-owym odpowiednikiem
<link rel="stylesheet" type="text/css">oczywiście wtedy trzeba dodać identyfikator
<style type="text/css" id="style"> </style>
<znacznik1><znacznik2></znacznik2></znacznik1>obowiązują także następujące zasady:
<hr noshade="noshade" />
<img src="Pix/pix.png" id="obrazek1" alt="obrazek" />Wartość atrybutu alt powinna jak najwięcej mówić na jego temat, służy bowiem do wyświetlenia informacji o ilustracjach w przeglądarkach nie wyślwietlających ilustracji i czytnikach Braila. Jest po to by ludzie, którzy nie widzą ilustracji wiedzieli co one przedstawiają.
<?xml-stylesheet type="text/css" href="style.css" ?> <link rel="stylesheet" type="text/css" href="style.css" >można też zadeklarować arkusz na samym początku dokumentu - w prologu zaraz po określeniu wersji języka XML
<?xml version="1.0" encoding="iso-8859-2"?> <?xml-stylesheet type="text/css" href="style.css" ?>
<script type="text/javascript"> <![CDATA[ ...skrypt... ]]> </script>lub unikać w skrypcie, lub stylach tych znaków: >, < <[[, ]]>, --, &
Najpierw przykład negatywny i omówienie błędów:
<HTML> <BODY> <FONT size=14pt color=red> TYTUŁ STRONY </font> <P> Przykładowy paragraf <hr noshade> <p> kolejny akapit oddzielony linią ciągłą, a poniżej lista odnośników <ul> <li><B><a href="#">pogrubiony odnośnik</b></A> <li><A href="#"><font color=red>czerwony odnośnik</a></FONT> <li><a href="#">ostatni - normalny - odnośnik</a> <p> </BODY>
Powyższy HTML mimo, że zawiera prawie wszystkie możliwe błędy jest poprawnie widziany w przeglądarce. Duża tolerancja przeglądare na błędy w kodzie spowodowała, że z praktycznego punktu widzenia nie były błędami - nie powodowały, żadnych defektów, strona wyglądała poprawnie. Jakie są tu błędy z punktu widzenia HTML?
Natomiast z punktu widzenia wymogów XHTML:
A oto ten sam dokument, który jest już poprawnym XHTML 1.1
<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
<style type="text/css">
h1 {font-size:14pt; text-transform:uppercase; color:red;}
.red {color:red; background-color:transparent;}
</style>
</head>
<body>
<h1>Tytuł strony</h1>
<p>
przykładowy paragraf
</p>
<hr noshade="noshade" />
<p>
kolejny paragraf oddzielony od poprzedniego linią ciągłą, a poniżej lista odnośników
</p>
<ul>
<li><a href="#"><strong>pogrubiony odnośnik</strong></a></li>
<li><a href="#"><span class="red">czerwony odnośnik</span></a></li>
<li><a href="#">ostatni, zwykły odnośnik</a></li>
</ul>
</body>
</html>
Jak widać nie jest to rzecz wymagająca zupełnie inych umiejętności, wystarczy tworzyć poprawne dokumenty HTML i pamiętać o zmianach, które wprowadza XML (głównie sprowadzających się do porządkowania kodu).
<div style="font-size:14pt;">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
[ redesign ] || [ na górę strony ]