Menu
- Aktualności
- Mój startup Nowy odcinek
- Blogi ekspertów
- Projektowanie WWW
- Planowanie
- Hosting i domeny
- Organizacja i nawigacja
- Webdesign i grafika
- Warsztat - programy
- Tutoriale Photoshop
- Programowanie i tworzenie
- XHTML, HTML i CSS
- JavaScript, DOM i AJAX
- jQuery
- PHP i SQL
- Flash i ActionScript
- Dostępność i WAI
- Promowanie stron
- Pozycjonowanie
- Reklama i marketing
- Monitoring i statystyki
- Publicystyka
- Artykuły ogólne
- Społeczności
- Praca i zarabianie
- Wywiady
- Standardy sieciowe
- Zasoby
- Kursy
- Recenzje książek
- Linki
Dla webmastera
Strona zgodna z najnowszymi standardami
Autor: Paweł Mączka, dodano: 05-01-2005
Kategoria: Publicystyka
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
XHTML 1.0
Modularyzacja XHTML
XHTML 1.1