Strona zgodna z najnowszymi standardami

Autor: Paweł Mączka, dodano: 05-01-2005
Kategoria: Publicystyka

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

Brak któregoś z obowiązkowych elementów
Obowiązkowe elementy XHTML to: html, head, title, body i prolog czyli !DOCTYPE. Bez tych znaczników nasz dokument jest niezgodny z XHTML.

Duże litery
XHTML nie dopuszcza wielkich liter, należy więc pamiętać aby cały kod był napisany małymi literami.

Nie zamknięte znaczniki
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" />



Nieuporządkowana składnia
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>



Brak cudzysłowu
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

Złe wyśrodkowanie tekstu lub innych elementów

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;">



DTD nieodpowiednie dla naszej witryny

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



Źle wstawiony skrypt

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.

Źle wstawiona animacja flash


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>



Dodanie atrybutu target do odnośnika
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.

Brak atrybutu alt w obrazkach
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

Ocena 2.69/5 (53.87%) (460 głosów)

Komentarze:



    Dodaj komentarz:


    Temat:
    Twój nick:
    Komentarz:
     

    Prosimy o kulturę wypowiedzi. Komentarze zawierające niecenzuralne zwroty, bądź obrażające inne osoby będą usuwane. Kod HTML w wypowiedziach jest niedozwolony. Wydawca nie odpowiada za treść komentarzy.