Artykuł z kursu HTML i CSS

Kurs HTML 4.01, XHTML 1.0 i CSS 2 z przykładami

autor: Dariusz Majgier • ostatnia aktualizacja kursu: 2003.06.01

[Start] • [Elementy HTML] • [Atrybuty HTML] • [Style CSS] • [Porady online]
[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

XHTML 1.0 - następca języka HTML

Język HTML od wersji 4.01 nie jest już dalej rozwijany - zastąpił go XHTML, obecnie w wersji 1.1 (jednak tekst dotyczy łatwiejszej do opisania wersji XHTML 1.0). Nazwa brzmi może groźnie, jednak jest on niemal identyczny jak HTML 4.01, którego dobrze znasz z mojego kursu. Kilka nowych reguł bardzo łatwo można opanować i już po chwili będziesz w stanie pisać strony zgodne z językiem XHTML. Po co więc powstał nowy język? Dla wygody. HTML został znormalizowany aby mógł być zgodny z językiem XML, który określa zasady tworzenia innych języków używanych w elektronicznych publikacjach.

Pisząc nowe strony dobrze jest stosować się do zasad określonych w XHTMLu, jednak jeżeli chcesz nadal używać tylko języka HTML 4.01 nic nie stoi na przeszkodzie aby zapomnieć o tym tekście zaraz po jego przeczytaniu. Nowe przeglądarki stron WWW będą cały czas obsługiwać HTML na równi z XHTMLem - przynajmniej w najbliższej przyszłości. Miliony dokumentów na całym świecie zostały napisane w języku HTML - nikt nie będzie ich nagle przerabiał do XHTMLa, bo byłaby to czynność pozbawiona sensu. Warto jednak znać różnice pomiędzy językami.

Deklaracja dokumentu

Każda strona w języku XHTML musi zaczynać się od określenia wersji języka XML (obecnie jest to wersja 1.0) i sposobu kodowania znaków. Dla języka polskiego będzie to iso-8859-2:

<?xml version="1.0" encoding="iso-8859-2"?>

Zwróć uwagę na znak zapytania (nie ukośnik), "zamykający" wersję XML. Następnie trzeba zadeklarować odpowiednią definicję DTD, czyli określić reguły języka. Musimy wybrać jedną z trzech wersji.

1. Strict: strona będzie napisana zgodnie z deklarowanym standardem i nie dopuszcza innych elementów. Trudno jest napisać taką stronę, ale właśnie do takiego ideału dążymy...

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "DTD/xhtml1-strict.dtd">

2. Transitional: strona będzie napisana zgodnie z deklarowanym standardem, ale dopuszczalne są też inne elementy, np. ze starego języka HTML. W większości wypadków dobrze jest użyć tej właśnie definicji...

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "DTD/xhtml1-transitional.dtd">

3. Frames: strona będzie napisana zgodnie z deklarowanym standardem, ale dopuszczalne są też inne elementy, np. ze starego języka HTML. Ten wariant stosuje się gdy witryna zawiera ramki.

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "DTD/xhtml1-frameset.dtd">

Powyższe polecenia przypominają element !DOCTYPE z języka HTML.

Trzeba również określić tzw. przestrzeń nazw. W języku XML sami decydujemy jaką rolę pełnią wszystkie polecenia i ich atrybuty. Każdy element języka HTML może mieć wiele znaczeń, więc trzeba poinformować przeglądarkę co ma zrobić gdy natrafi np. na element img lub jak zareagować na atrybut src. W tym celu definiuje się przestrzeń nazw, gdzie określone są sposoby użycia poszczególnych poleceń. Odpowiedzialny jest za to atrybut xmlns (czyli XML namespace). Dla języka XHTML będzie to następujący fragment kodu:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Szablon strony

Znając już podstawowe elementy możemy utworzyć szablon strony. Nie różni się on bardzo od szablonu w języku HTML.

<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tytuł strony</title>
</head>
<body>
   <p>Przykładowy akapit</p>
</body>
</html>

Czas na szczegóły...

1. Zagnieżdżanie. W języku XHTML istotna jest kolejność otwierania i zamykania tagów. W HTML również powinniśmy o tym pamiętać, ale tutaj ma to kluczowe znaczenie. Nie można napisać:

To <b>nie jest poprawna <i>kolejność</b> elementów</i> - są skrzyżowane!

Trzeba też pamiętać, aby element A nie zawierał innych elementów A. PRE nie może zawierać elementów IMG, BIG, SUB, SUP, SMALL i OBJECT. BUTTON nie może zawierać elementów INPUT, SELECT, TEXTAREA, LABEL, BUTTON, FORM, FIELDSET, IFRAME i ISINDEX. LABEL nie może zawierać innych elementów LABEL, a FORM nie może zawierać innych elementów FORM.

2. Zamykanie znaczników. Każdy znacznik musi być zamknięty, nawet jeżeli nie ma znaczników zamykających. Brzmi to może dziwnie, bo jak zamknąć element <br>? Jest na to sposób - wystarczy użyć go w postaci <br />, podobnie jak np. <img src="zdjecie.jpg" />. Pamiętaj o spacji przed ukośnikiem, bo niektóre współczesne przeglądarki mogą mieć problem gdy odstępu nie będzie.

3. Wielkość liter. Wszystkie elementy i atrybuty muszą być zapisywane z małych liter. Wielkość znaków w XHTML ma duże znaczenie, więc co innego znaczy <B> (to nie jest pogrubienie), a co innego <b> (to jest pogrubienie). W całym kursie stosuję duże litery dla atrybutów aby kurs był bardziej czytelny. W XHTMLu większość poleceń pisana jest z użyciem małych liter.

4. Cudzysłów. Wszystkie atrybuty muszą być zapisane w cudzysłowach. Błędem jest napisanie <table align=left width=100>. Prawidłowo powinno być: <table align="left" width="100">.

5. Atrybuty puste. W HTML stosowane są atrybuty puste (logiczne), np. <hr noshade>. W XHTMLu muszą mieć przypisane wartości. Ponieważ nie mają wartości, przypisuje się im własną nazwę. Po zamianie na XHTML przykład wygląda tak: <hr noshade="noshade" />.

6. Znaki specjalne. Trzeba uważać przy stosowaniu znaków < i & w skryptach i deklaracjach CSS. Najlepiej zastępować je poprzez < i &.

7. Skrypty. Każdy skrypt powinien być "otoczony" przez następującą strukturę:

<SCRIPT language="javascript">
<![CDATA[
 dopiero tutaj umieść skrypt
]]>
</script>

8. Atrybut ID Zamiast atrybutu name stosuj id. Atrybut name nie jest zalecany i nie powinno się go używać w XHTML. Jeżeli używasz atrybutu name, uzupełnij element o atrybut id o takiej samej wartości.

Już znasz XHTML...

Jak widzisz, XHTML nie jest zbyt trudny, choć kłopotliwy w użyciu. To w zasadzie stary, dobrze znany HTML wzbogacony o pewne reguły, które dbają o zgodność zapisu z językiem XML.

• • •
Zobacz porady, skrypty, artykuły i gotowe rozwiązania dla właścicieli stron WWW!