Pe│ny kurs HTML, XHTML i CSS z przyk│adami. Kompendium wiedzy ka┐dego webmastera.

Pe│ny kurs HTML 4.01, XHTML 1.0 i CSS 2 z przyk│adami

autor: Dariusz Majgier • ostatnia modyfikacja: 2002.06.10 • wersja kursu: 1.1

[0-9] A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
[g│≤wne menu] - [elementy HTML] - [atrybuty HTML] - [style CSS] - [artyku│y]
tabele • listy • formularze • multimedia • el. strukturalne • el. blokowe • el. liniowe

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 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µ te r≤┐nice.

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.

• • •
Masz jakie╢ pytania? Podyskutuj na forum dyskusyjnym o HTML i CSS!