Ostatnio modny stał się język XHTML, jest on kontynuacją języka HTML który nie będzie już rozbudowywany. Aktualnie jest to język rekomendowany przez W3C więc warto swoją stronę do niego przystosować.
Ten dostawiony „X” przed nazwą oznacza eXtensible czyli elastyczny, XHTML więc ma za zadanie spowodować by przez mniejszą liczbę znaczników dać mniej pracy programistom przeglądarek i co najważniejsze sprawić by nasza witryna wyświetlała się bezbłędnie w każdej przeglądarce. Jakich znaczników i atrybutów pozbył się XHTML i dlaczego dowiecie się czytając ten artykuł.
Regułki czyli czego XHTML nam zabrania
Obowiązkowe elementy XHTML to: html, head, title, body i prolog czyli !DOCTYPE. Bez tych znaczników nasz dokument jest niezgodny z XHTML.
XHTML nie dopuszcza wielkich liter, należy więc pamiętać aby cały kod był napisany małymi literami.
W XHTML każdy znacznik musi być zamknięty włącznie ze znacznikami „pustymi”, zakańczamy je dodając /> na końcu np.
| <img src=”obraz.png” /> |
w XHTML’u nie możemy tylko zamykać lub tylko otwierać znaczników wewnątrz znacznika.
Źle :
| <b><i></b></i> |
Dobrze:
| <b></i></i></b> |
Każdy atrybut musi być zapisany w cudzysłowie
Źle :
| <a href=index.html></a> |
Dobrze :
| <a href=”index.html”></a> |
Struktura dokumentu XHTML
A oto podstawowa składnia dokumentu XHTML, w naszym kodzie dodaliśmy także prolog xml który nie jest obowiązkowym elementem
| <?xml version=”1.0″ encoding=”iso-8859-2″?> <!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Strict//EN” „http://www.w3.org/TR/XHTML1/DTD/XHTML1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/XHTML” xml:lang=”pl”> <head> <title>Tytuł naszej strony</title> </head> <body> <p>Treść</p> </body> </html> |
Uwaga! Jeżeli nasz serwer obsługuje język PHP najprawdopodobniej strona pokaże nam błąd który jest związany z prologiem xml (ponieważ jest umieszczony w znacznikach identycznych z php), mamy dwa wyjścia.
Pierwsze to usunąć prolog, drugie to umieścić prolog w echo() czyli
| <? echo('<?xml version=”1.0″ encoding=”ISO-8859-2″?>’); ?> |
Najczęściej popełniane błędy
XHTML nie dopuszcza znaczniku <center> ani też atrybutu align więc jak wyśrodkować tekst? Odpowiedź jest prosta, musimy użyć css a oto przykład :
| <div style=”text-align: center;”> |
W XHTML mamy do wyboru 3 wersje DTD : Frameset(dla stron z ramkami), Transitional(standardowy) i Scrict(ścisły). Rekomendowanym przez w3 DTD jest Scrict lecz jednocześnie jest on najbardziej rygorystyczny i ma najmniej znaczników i atrybutów, lecz narazie przez to, że Internet Explorer nie obsługuje do końca wersji Scrict nie każdy może sobie pozwolić na jej używanie. Pozostaje nam Frameset i Transitional, Frameset jest dla tych osób które używają na swojej stronie ramek (ramki nie są zalecane), Transitional jest Standardowy DTD i aktualnie jest to najlepszy wybór. A oto gotowe do skopiowania na stronę DTD
Frameset
| <!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Frameset//EN” „http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”> |
Transitional
| <!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN” „http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> |
Scrict
| <!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Strict//EN” „http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> |
W języku HTML można było wstawiać skrypt w ten sposób :
| <script language=”JavaScript”> <!– skrypt –> </script> |
W XHTML skrypty wstawiamy tak :
| <script type=”text/javascript”> <![CDATA[ skrypt ]]> </script> |
Uwaga! W tym przykładzie pokazaliśmy jak wstawiać skrypty JavaScript, sktypty napisane w innych językach wstawiamy inaczej.
XHTML nie dopusza elementu embed więc musimy sobie poradzić jakoś bez niego, oto ptzykładowy kod elementu flash wstawionego zgodnie z XHTML
| <object type=”application/x-shockwave-flash data=”animacja.swf” width=”100″ height=”100″> <param name=”movie” value=”animacja.swf” /> </object> |
Niestety atrybut target został już usunięty, nie możemy więc wymuszać na gościu otwarcia strony w nowym okienku, to gość decyduje sam jak ma otwierać się strona.
W XHTML każdy obrazek musi mieć atrybut alt, bez niego nasza strona nie będzie zgodna, możemy jednak wstawić pusty atrybut alt np.
| <img src=”obrazek.gif” alt=”” /> |
Przydatne linki
