Professional Documents
Culture Documents
Wstp Co to jest XHTML? XHTML (eXtensible HyperText Markup Language) to jzyk hipertekstowy uywany do tworzenia dokumentw czyli stron internetowych. Polecenia tekstowe (znaczniki i atrybuty) pozwalaj na realizacj tzw. linkw (odsyaczy), wywietlanie rnych czcionek, grafiki i innych elementw. Definicja ta pasuje nie tylko do XHTML ale take do HTML. To nie przypadek, e definicje s podobne (a waciwie takie same). Obydwa jzyki peni tak sam funkcj. Po co mi XHTML? Te pytanie nasuwa si wszystkim webmasterom, ktrzy stykaj si z XHTML Odpowied jest prosta. XHTML jest aktualnie obowizujcym standardem opisu stron WWW zalecanym przez W3C. XHTML naley traktowa jako stanadard "HTML 5" (co oczywicie nie jest prawd, poniewa prace nad rozwijaniem jzyka HTML zostay zakoczone na wersji 4.01). Wczeniej czy pniej wszystkie strony bd zgodne z tym standardem. XHTML jest take zgodny z XML, ktry staje si uniwersalnym standardem przetwarzania opisu rodowiska WWW i dokumentw strukturalnie uporzdkowanych informacji. XHTML jest cile zwizany z kaskadowymi stylami - CSS1 i CSS2, w przyszoci take - CSS3. Przegldarki XHTML Wikszo przegldarek dokumentw HTML dobrze interpretuje XHTML. S to przegldarki: Netscape Communicator/Sylaba Komunikator/Mozilla, Microsoft Internet Explorer, Opera, Konqueror i inne. Naley pamita, e im nowsza przegldarka tym lepiej bdzie interpretowa XHTML. Nawiasem mwic (czytaj piszc:-) najlepiej wida strony XHTML pod IE w wersji 4, 5, 6 i Netscape 6, 7, Mozilla 0.9.x i 1.0. NC 4.xx (NN, Sylaba) gorzej obsuguje style. Ciekaw alternatyw jest Opera (szczeglnie Opera 5 i 6), ktra dziaa szybko i sprawnie. Jak wida problemy sprawiaj style, ktre s nieodcznym elementem XHTML. Informacje oglne Podobiestwa z HTML Dane s w formie tekstowej Dane opisywane s znacznikami (tagami) np: <img> Znaczniki mog posiada atrybuty np: src="przyk.gif" Atrybuty posiadaj wartoci (przykad jak wyej) Tagi rozpoczynaj si znakiem '<'a kocz '>' np: <html> Przykad zamknicia znacznika (jeli jest wymagany) </html> Wartoci zawarte s w symbolach "" np: "przyk.gif" A oto przykadowy dokument HTML (take w pewnym sensie XHTML):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <html> <head> <title>Przypadowa strona</title> </head> <body> <p>To tylko przykad</p> <img src="przyk.gif"> <body> </html> Bardzo pocztkujcych (nie znajcych HTML i nie rozumiejcych skadni jzyka) zapraszam na wietny kurs Pawa Wimmera: http://wwwmag.com.pl/kurs/ Nowoci w stosunku do HTML Znaczniki niepuste maj zawsze znacznik kocowy np: <p>Co tam</p> Znaczniki puste musz by zawsze zakoczone '/>' np: <br /> Wszystkie atrybuty i tagi musz by pisane maymi literami np: <img src="przyk.gif"> Atrybuty typu boolean (logiczne) musz by uzupeniane o warto np: noshade="noshade" Wartoci atrybutw musz by zawarte w symbolach (nawet te jedno wyrazowe) "" np: "przyk.gif" Zlikwidowano znaczniki (dotyczy te HTML 4, patrz: 'Znaczniki'): <font> - naley uywa stylw <basefont> - naley uywa stylw <strike> - naley uywa stylw <s> - naley uywa stylw <u> - naley uywa stylw <center> - naley uywa stylw i znacznika <div> <menu> - naley uywa znacznika <ul> <dir> - naley uywa znacznika <ul> <isindex> - naley uywa znacznika <input> <xmp> - naley uywa znacznika <pre> <plaintext> - naley uywa znacznika <pre> <listing> - naley uywa znacznika <pre> <applet> - naley uywa znacznika <object> (dotyczy tylko XHTML 1.0) Zlikwidowano atrubuty (dotyczy te HTML 4, patrz: 'Atrybuty'): accesskey align (uwaga: mona uywa w <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>) alink background bgcolor border (uwaga: mona uywa w <table>) clear color compact
face height (uwaga: mona uywa w <iframe>, <img>, <object> ale si nie zaleca) hspace lang language (naley uywa type="text/javascript" w znaczniku <script>) link name (zlikwidowano w <a> i <map>) size (uwaga: mona uywa w <input>, <select> start tabindex target (zlikwidowano w <a>, <area> i <link>) text type value version vlink vspace width (uwaga: mona uywa w <colgroup>, <col>, <table>, <img>, <object>, <iframe> ale si nie zaleca) Wszystkie atrybuty wymienione wyej naley zastpi stylami chyba, e jest to zaznaczone w nawiasie Midzy znacznikami <table> musi znajdowa si tag <tbody> np: <table><tbody><tr><td></td></tr></tbody></table>, jeli tabela jest duga naley stosowa znaczniki <thead> i/lub <tfoot> Pomimo, e tagi takie jak <b>, <i> znajduj si w specyfikacji to zaleca si stosowanie stylw. W przyszoci wszystkie atrybuty i znaczniki opisujce pod wzgldem wizualnym stron zostan zlikwidowane. Atrybuty wymienione wyej, ktre teraz mona uywa z niektrymi tagami w przyszoci zostan zlikwidowane (np: size, width, height, border, align). Przy znaczniku <img> naley uywa atrybutu 'alt'. Wicej nowych cech znajduje si w dalszych czciach kursu (patrz: 'Inne wane zasady'). Wikszo cech wymienionych wyej nie zwizanych z HTML pochodzi z XML. Wicej informacji o XML znajduje si na stronie Pawa Stroiskiego. A oto przykad dokumentu XHTML: <?xml version="1.0" encoding="iso-8859-2"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <title>Przypadowa strona</title> </head> <body> <p>Oto przykad</p> <hr />
<img src="przyk.gif" alt="tekst" /> </body> </html> Specyfikacja XHTML Co to jest specyfikacja? Specyfikacja to peny zbir zasad i regu dotyczcych danego jzyka np. XHTML, HTML, SVG itp. Specyfikacja jest ustalana przez specjalistw z danej dziedziny (w tym przypadku ludzi z W3C), wytycza ona drogi rozwoju dla jzykw. Specyfikacja XHTML jest napisana w jzyku angielskim (wystpuje w niej wiele specjalistycznych wyrae) a co za tym idzie jest trudna do zrozumienia. Ten kurs w poszczeglnych rozdziaach przedstawia zasady zawarte w specyfikacji napisane prostym jzykiem (i jak wida po polsku:-). Cz informacji zawartych w tym kursie nie wystpuje w specyfikacji XHTML ale jest rwnie wana (czasami s one zawarte w innych specyfikacjach zgodnych z XHTML np. w XML, inne za s rodzajami regu oglnie przyjtych zgodnych oczywicie ze specyfikacjami). Specyfikacja HTML XHTML jest bardzo podobny do HTML i XML. Specyfikacja XHTML nie zawiera opisu znacznikw i atrybutw, poniewa jest to zawarte w specyfikacji HTML 4.01 (patrz: 'Informacje oglne', 'Znaczniki' i 'Atrybuty'). Specyfikacja HTML 4.01 jest poprawion i uzupenion wersj specyfikacji HTML 4.0. HTML jest uproszczon wersj metajzyka SGML. Specyfikacja HTML 4.01: http://www.w3.org/TR/html401 Specyfikacja XHTML i XML Specyfikacja XHTML zawiera reguy, ktre s zwizane z XML. Inaczej mwic (waciwie piszc:-) XHTML jest odmian jzyka HTML przeformatowanego do metajzyka XML. XHTML jest wic zgodny XML, ktry w przyszoci stanie si standardem przechowywania informacji nie tylko stron internetowych. Od niedawna pojawia si uproszczona wersja XHTML - Basic XHTML (patrz: 'Basic XHTML'). Scecyfikacja XML: http://www.w3.org/TR/REC-xml/ Specyfikacja XHTML 1.0: http://www.w3.org/TR/xhtml1/ Specyfikacja XHTML 1.1: http://www.w3.org/TR/xhtml11/ Specyfikacja Basic XHTML: http://www.w3.org/TR/xhtml-basic/ Wikszo informacji ze specyfikacji dotyczcych XHTML jest zawarte w tym kursie (a niektrych informacji nawet nie znajdziesz w specyfikacji). Specyfikacja CSS Osoby znajce HTML i XML nie bd mieli adnych problemw z opanowaniem jzyka XHTML (pozostali bd si musieli troch pomczy, ale zapewniam, e XHTML to prosty jzyk:-). Niestety sam XHTML nie wystarczy, trzeba zna style kaskadowe, ktre zajmuj si formatowaniem i upikszaniem stron (tzw. Strona napisana w czystym XHTML wyglda niezbyt adnie). Jeli kto mia wczeniej
styczno z CSS1 nie bdzie mia problemu z opanowaniem CSS2, poniewa obydwie specyfikacje s do siebie bliniaczo podobne. Wikszo dokumentw zgodnych z CSS1 jest zarwno zgodne z CSS2. Specyfikacja CSS2 nie jest nowa, bya ju zalecana do HTML (patrz: 'Style w XHTML'). Do mniej skomplikowanych dokumentw wystarczy nawet CSS1. Ostatnio prowadzone s prace nad CSS3. Warto pamita, e CSS2 nie jest jeszcze w peni interpretowany przez przegldarki a CSS3 to zupena nowo. Specyfikacja CSS2: http://www.w3.org/TR/REC-CSS2/ Specyfikacja CSS1: http://www.w3.org/TR/REC-CSS1/ Wszystkie wane zagadnienia dotyczce XHTML, HTML, XML, CSS1, CSS2 znajdziecie na tej stronie. Bardziej szczegowe informacje o HTML, XML i CSS znajdziecie w EduWebie (wic nie martwcie si jeli nie znacie jzyka angielskiego:-). Wersje DTD W XHTML 1.0 istniej trzy wersje DTD czyli definicje typu dokumentu: 'transitional', 'strict', 'frameset'. Wersje te pozwalaj na poprawn walidacj tzw. sprawdzenie poprawnoci dokumentu XHTML. Transitional Transitional to najczciej stosowana wersja DTD. Jest swego rodzaju form przejciow pomidzy HTML a XHTML, poniewa zezwala na korzystanie ze znacznikw i atrybutw w statusie deprecated (takich jak <applet>, <font>, <s>, align, width i innych wymienionych na stronie: 'Informacje oglne'). W tej wersji nie mona stosowa ramek. Przykad: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Naley unika 'Transitional', zaleca si stosowanie 'Strict'. Strict Strict jest to wersja DTD, do ktrej wszyscy d. Jest bardzo trudna do zrealizowania, poniewa zabrania stosowania tagw i atrybutw w statusie deprecated (patrz: 'Znaczniki' i 'Atrybuty') . Nie mona w niej korzysta z ramek. Przykad: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Frameset Frameset to wersja DTD, ktra dopuszcza wszystkie elementy (czyli z atrybutw i znacznikw deprecated i ramek). Jak wida ta wersja podobna jest do 'transitional'.
Przykad: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Naley unika 'Frameset', zaleca si korzystanie z 'div' i CSS. Wersja DTD XHTML 1.1 Do XHTML 1.1 zalecana jest nastpujca wersja DTD: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Wersja DTD XHTML 1.1 jest podobna do wersji XHTML 1.0 Strict. Nie wszystkie jednak dokumenty XHTML 1.0 Scrict mog by dokumentami XHTML 1.1. Po wykonaniu strony WWW naley j podda walidacji i na podstawie wynikw zadeklarowa wersj DTD (patrz: 'Linki i parsery'). Prolog i skadnia Prolog W XHTML istniej elementy, ktrych nie mona pomin (jak np: HTML). Do nich zalicza si deklaracja XML, wersja DTD i znacznik <html> z odpowiednimi atrybutami. Pomaga to w klasyfikacji dokumentu i w jego walidacji. Prologu naley uywa zawsze na pocztku dokumentu. Prolog to zadeklarowanie zgodnoci z XML. A wyglda tak: <?xml version="1.0" encoding="iso-8859-2"?> Pierwsza cz prologu (czyli: <?xml version="1.0") nie zmienia si. Dalsza cz dotyczy kodowania znakw (w naszym przypadku polskich znakw). Standard dla polskich "ogonkw" to 'iso-8859-2' (ISO Latin 2). Naley zwrci uwag na to, e version w prologu nie jest traktowane jako zwyky atrybut a wic nie posiada statusu Deprecated (jako to ma miejsce w znaczniku <html>, patrz: 'Atrybuty'). Do prologu mona te doda standalone z wartoci "no". Oznacza to, e definiujemy dokument z zewntrzn definicj w innych plikach. Przykad: <?xml version="1.0" encoding="iso-8859-2" standalone="no"?> Dalej naley wpisa wersje DTD dokumentu (patrz: 'Wersje DTD'). Deklaracja XML i wersja DTD to prolog. Przykad: <?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">
Dokumenty zgodne z XHTML mog nie posiada deklaracji z XML ale jest to bardzo odradzane. Znacznik 'html' W standardzie XHTML dokument jest zaczynany specyficznym tagiem <html>, ktry w caoci wyglda tak: <html xmlns="http://www.w3.org/1999/xhtml"> Znacznik ten take ma podobne funkcje jak prolog. Znacznik 'body' Dobrym zwyczajem jest zadeklarowanie jzyka. Robi si to w znaczniku <body>. Przykad: <body xml:lang="pl"> Podsumowujc prawidowy dokument powinien wyglda tak: <?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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <title></title> </head> <body xml:lang="pl"> </body> </html> Atrybut xml:lang="pl" mona te wstawia do znacznika <html>. W XHTML 1.0 mona uywa take atrybutu lang. Oczywicie sekcje <head> i <body> mona (nawet trzeba!) uzupenia nowymi znacznikami. Doczanie arkusza stylw Doczanie arkusza stylw w XML jest zwizane z prologiem (dotyczy to take XHTML) i odbywa si w inny sposb ni w HTML. A oto przykad: <?xml-stylesheet type="text/css" href="style.css"?> W celu zachowania zgodnoci z HTML w dokumentach XHTML zaleca si stosowanie grnego zapisu i rwnoczenie stosowanie znacznika <link>. Przykad:
<head> <link rel="stylesheet" type="text/css" href="style.css" /> <?xml-stylesheet type="text/css" href="style.css" ?> </head> Dopuszcza si deklarowanie arkusza na samym pocztku dokumentu. Przykad <?xml version="1.0" encoding="iso-8859-2"?> <?xml-stylesheet type="text/css" href="style.css" ?>
Znaczniki
Spis znacznikw XHTML
Wybierz liter, na ktr zaczyna si znacznik: 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 Spis znacznikw Nazwa znacznika a abbr acronym address applet area b base basefont bdo big blockquote body br button caption center Opis znacznika odnoniki forma skrcona akronim dane kontaktowe aplet Javy mapa odnonikw pogrubiony tekst adres bazowy czcionka bazowa wyczenie dwustronnego wypisywania tekst wikszy o 1 ciao dokumentu nowa linia przyciski opis tabeli wyrodkowanie XHTML 1.0 zgodny zgodny zgodny zgodny zgodny zgodny zgodny XHTML 1.1 zgodny zgodny zgodny zgodny zgodny zgodny Zamknicie zanacznika jest jest jest jest jest
brak
Deprecated zgodny
jest
Unsupported brak
jest jest
Spis znacznikw Nazwa znacznika cite code col colgroup dd del dfn dir div dl dt em fieldset font form frame frameset h1 h2 h3 h4 h5 h6 head hr html i iframe img input ins Opis znacznika cytat, rdo kod programu atrybuty kilku kolumn grupowanie kolumn termin w licie definicyjnej tekst usunity definicja zawarto katalogu wygld dugiego fragmentu dokumentu tworzenie listy definicyjnej termin w licie definicyjnej wyrnienie tekstu grupowanie elementw formularza czcionka tworzenie formularzy zawarto ramki wyglad ramek nagwek 1 nagwek 2 nagwek 3 nagwek 4 nagwek 5 nagwek 6 nagwek dokumentu linia pozioma rozpoczyna dokument pochylony tekst ramki wewntrzne obrazek elementy formularza wstawiony tekst XHTML 1.0 zgodny zgodny zgodny zgodny zgodny zgodny zgodny XHTML 1.1 zgodny zgodny zgodny zgodny zgodny zgodny zgodny Zamknicie zanacznika jest jest
brak
jest jest jest jest jest jest jest jest jest jest
Deprecated zgodny
zgodny
Frameset Frameset
zgodny
jest
zgodny zgodny zgodny zgodny zgodny zgodny zgodny zgodny zgodny zgodny zgodny zgodny zgodny zgodny
zgodny zgodny zgodny zgodny zgodny zgodny zgodny zgodny zgodny zgodny zgodny zgodny zgodny
jest jest
brak brak
Unsupported jest
jest
Spis znacznikw Nazwa znacznika isindex kbd label legend li link map menu meta noframes noscript object ol optgroup option p param pre q s samp script select small span strike strong style Opis znacznika element wprowadzania tekstu tekst do wypisania etykieta opisu elementu przypisanie opisu element listy wyliczeniowej odnonik np. do stylw lista menu okrelanie wasnoci dokumentu tekst dla przegldarek bez ramek tekst dla przegldarek bez skryptw obiekt w dokumencie tworzenie uporzdkowanej listy logiczne grupowanie opcji wyboru opcja listy wyboru akapit parametr apletu lub obiektu tekst preformatowany przekrelony tekst przykad skrypty XHTML 1.0 XHTML 1.1 Zamknicie zanacznika
jest
zgodny
Frameset
zgodny
brak
Unsupported jest
zgodny
jest
Unsupported jest
zgodny zgodny zgodny zgodny zgodny zgodny zgodny zgodny zgodny zgodny zgodny zgodny zgodny zgodny
jest jest jest jest jest jest jest jest jest jest jest jest jest jest
tworzenie listy wyboru w zgodny formularzach tekst mniejszy o 1 przekrelony tekst wyrnienie tekstu definiowanie stylw zgodny wygld fragmentu tekstu zgodny zgodny zgodny
Spis znacznikw Nazwa znacznika sub sup table tbody td textarea tfoot th thead title tr tt u ul Opis znacznika indeks dolny indeks grny tabela obszar gwnej treci tabeli komrka tabeli wieloliniowy obszar tekstu obszar stopki tabeli obszar gwka tabeli tytu dokumentu wiersz tabeli tekst o tych samych odstpach podkrelony tekst tworzenie listy wyliczeniowej XHTML 1.0 zgodny zgodny zgodny zgodny zgodny zgodny zgodny zgodny zgodny zgodny zgodny XHTML 1.1 zgodny zgodny zgodny zgodny zgodny zgodny zgodny zgodny zgodny zgodny zgodny zgodny Zamknicie zanacznika jest jest jest jest jest jest jest jest jest jest jest jest
zgodny
zgodny
jest
var przykad zmiennej zgodny zgodny jest Deprecated znaczniki w tym statusie nie mog by uywane w Strict (patrz: 'Wersje DTD') Frameset znaczniki w tym statusie mog by uywane tylko w Frameset (patrz: 'Wersje DTD') Unsupported znaczniki w tym statusie nie mog by uywane w XHTML 1.1 (patrz: 'Wersje DTD') Jak wida statusy deprecated i unsupported w wikszoci znacznikach si pokrywaj, a co za tym idzie dokumenty zgodne ze strict w wikszoci (czasami z drobnymi zmianami) mog by zgodne z XHTML 1.1.
w tym znaczniku nie moe by zawarty <button>, <fieldset>, <form>, <iframe>, <input>, <isindex>, <label>, <select> i <textarea>
<form>
<label>
w tym znaczniku nie moe by zawarty <big>, <img>, <object>, <small>, <sub> i <sup> Naley wic unika zapisu takiego jak ten: <pre><big>bvfbg</big></pre> lub <a href="xyz">xyz<a>abc</a></a>
Atrybuty
Spis atrybutw XHTML
Wybierz liter, na ktr zaczyna si atrybut: 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 Spis atrybutw Nazwa abbr accept accesskey action align align alink alt alt archive archive axis background bgcolor border border td, th form, input a, area, button, input, label, legend, textarea form col, colgroup, tbody, td, tfoot, th, thead, tr accept-charset form Wystpowanie w znacznikach XHTML 1.0 zgodny zgodny zgodny + zgodny zgodny + zgodny
caption, applet, iframe, img, input, object, legend, + Deprecated table, hr, div, h1, h2, h3, h4, h5, h6, p body applet area, img, input object applet td, th body table, tr, td, th, body table img, object
Deprecated Deprecated
zgodny zgodny
Deprecated
zgodny
Deprecated Deprecated
+ zgodny + zgodny
Deprecated
Spis atrybutw Nazwa cellpadding cellspacing char charoff charset checked cite class classid clear code codebase codebase codetype color cols cols colspan compact content coords data datetime declare defer dir dir disabled enctype face for frame frameborder headers table table col, colgroup, tbody, td, tfoot, th, thead, tr col, colgroup, tbody, td, tfoot, th, thead, tr a, link, script input blockquote, q, del, ins wszystkie oprcz: base, basefont, head, html, meta, param, script, style, title object br applet object applet object basefont, font textarea frameset td, th dir, dl, menu, ol, ul meta area, a object del, ins object script Wystpowanie w znacznikach XHTML 1.0 zgodny zgodny zgodny zgodny zgodny zgodny zgodny zgodny zgodny
Deprecated Deprecated
zgodny
Deprecated
zgodny
Deprecated
zgodny
Frameset
zgodny
Deprecated
wszystkie oprcz: applet, base, basefont, bdo, br, zgodny frame, frameset, iframe, param, script bdo button, input, optgroup, option, select, textarea form basefont, font label table frame, iframe td, th zgodny zgodny zgodny
Deprecated
Spis atrybutw Nazwa height height href hreflang hspace http-equiv id ismap label lang language link longdesc longdesc marginheight marginwidth maxlength media method multiple name name name nohref noresize noshade nowrap object onblur
*
Wystpowanie w znacznikach img, object iframe, td, th, applet a, area, link, base a, link applet, img, object meta wszystkie oprcz: base, head, html, meta, script, style, title img, input option, optgroup wszystkie oprcz: applet, base, basefont, br, frame, frameset, iframe, param, script script body img frame, iframe frame, iframe frame, iframe input style, link form select button, textarea, select, form, img, a, input, object, map, param, meta frame, iframe applet area frame hr td, th applet a, area, button, input, label, select, textarea input, select, textarea
zgodny
Frameset Frameset Frameset
zgodny zgodny
wszystkie oprcz: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, zgodny meta, param, script, style, title wszystkie oprcz: applet, base, basefont, bdo, br, zgodny
Spis atrybutw Nazwa Wystpowanie w znacznikach font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title onfocus* onkeydown* a, area, button, input, label, select, textarea zgodny wszystkie oprcz: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, zgodny meta, param, script, style, title wszystkie oprcz: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, zgodny meta, param, script, style, title wszystkie oprcz: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, zgodny meta, param, script, style, title body frameset
*
XHTML 1.0
onkeypress*
zgodny
Frameset
wszystkie oprcz: applet, base, basefont, bdo, br, onmousedown font, frame, frameset, head, html, iframe, isindex, zgodny meta, param, script, style, title wszystkie oprcz: applet, base, basefont, bdo, br, onmousemove* font, frame, frameset, head, html, iframe, isindex, zgodny meta, param, script, style, title onmouseout* wszystkie oprcz: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, zgodny meta, param, script, style, title
wszystkie oprcz: applet, base, basefont, bdo, br, onmouseover* font, frame, frameset, head, html, iframe, isindex, zgodny meta, param, script, style, title onmouseup* onreset* onselect* onsubmit onunload onunload profile prompt readonly rel rev rows
* * *
wszystkie oprcz: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, zgodny meta, param, script, style, title form input, textarea form body frameset head isindex textarea, input a, link a, link textarea zgodny zgodny zgodny zgodny
Frameset
zgodny
Deprecated
Spis atrybutw Nazwa rows rowspan rules scheme scope scrolling selected shape shape size size span span src src standby start style summary tabindex target text title type type usemap valign value value valuetype version vlink vspace width frameset td, th table meta td, th frame, iframe option area a input, select hr, font, basefont col colgroup script, input, img frame, iframe object ol wszystkie oprcz: base, basefont, head, html, meta, param, script, style, title table a, area, button, input, object, select, textarea a, area, base, form, link body wszystkie oprcz: base, basefont, head, html, meta, param, script, title a, link, object, param, script, style, input, button li, ol, ul img, input, object col, colgroup, tbody, td, tfoot, th, thead, tr input, option, param, button li param html body applet, img, object img, object, table, col, colgroup Wystpowanie w znacznikach XHTML 1.0
Frameset
zgodny
Deprecated
zgodny
Deprecated Deprecated Deprecated
+ zgodny
Zdarzenia
patrz niej
accesskey nie mona go uywa w <a> align nie mona go uywa w <capiton>, <div>, <h1> - <h6>, <hr>, <img>, <input>, <legend>, <p> i <table> border nie mona go uywa w <img> height nie mona go uywa w <td> i <th> lang nie mona go uywa we wszystkich znacznikach! name nie mona go uywa w <a> i <map> size nie mona go uywa w <hr> tabindex nie mona go uywa w <a> target nie mona uywa go uywa <a>, <area>, <link> i <base>. type nie mona go uywa w <ol>, <li> i <ul> value nie mona go uywa w <li> width nie mona go uywa w <hr>, <td>, <th> i <pre> W dalszych wersjach XHTML stopniowo bdzie si likwidowao atrybuty zastpi si je stylami lub w inny sposb (oczywicie atrybuty np: alt lub summary nie znikn cakowicie nigdy).
Style w XHTML
Podstawowe informacje
Style s nieodczn czci XHTML. Odpowiadaj one na wizualn, interaktywn syszaln i dotykow cz strony. Style zastpuj wiele
atrybutw. Niestety CSS2 nie jest w peni interpretowany przez aktualne wersje przegldarek. Budowa stylu:
selektor { element: warto }
Selektor to znacznik XHTML (HTML) np.: p, h1, li itp. Element (cecha) to waciwo danego znacznika odpowiadajca w pewnym sensie atrybutowi w XHTML (HTML). Elementy s wymienione poniej. Warto moe by liczb lub cigiem znakw.
Spis elementw
Elementy: azimuth
# #
cue-after cursor+
background+ background-
cue-before#
attachment+ background-color+ background-image+ background-position+ background-repeat+ border+ border-collapse+ border-color+ border-spacing+ border-style+ border-top*+ border-top-color*+ border-top-style*+ border-top-width*+ border-width+ bottom+ caption-side+ clear+ clip+ color+ content+#@ counter-increment+#@ counter-reset+#@ cue#
*
direction+ display+#@ elevation# empty-cells+ float+ font+ font-family+ font-size+ font-stretch+ font-style+ font-variant+ font-weight+ height+ left+ letter-spacing+ line-height+ list-style+ list-styleposition+ list-style-type+ margin+ margin-top*+
+
max-width+ min-height+ min-width+ orphans+ outline+ outline-color+ outline-style+ outline-width+ padding+ padding-top*+ page+ page-breakbefore+ page-breakinside+ pause# pause-after# pause-before# pitch-range# play-during# position+ quotes+
#
speak# speak-header# speak-numeral# speakpunctuation# speech-rate# stress# table-layout+ text-align+ text-decoration+ text-indent+ text-shadow+ text-transform+ unicode-bidi+ vertical-align+ visibility+ voice-family# volume# white-space+ widows+ width+ word-spacing+ z-index+
@
font-size-adjust+ overflow+
page-break-after+ top+
list-style-image+ pitch#
wzrokowy
suchowy
dotykowy
Wstawianie stylw
<!-- koniec stylw --> </head> <!-- dalsza cz jest dokumentu -->
Mona te arkusz stylu zewntrznego doczy w znaczniku <? ?> (patrz: 'Prolog i skadnia'). Ta metoda nie jest obowizkowa ale zalecana ze wzgldu za zgodno z XML.
<style type="text/css"> @import url(http://www.xyz.pl/style.css) </style> </head> <!-- dalsza cz jest dokumentu -->
5. Inne metody
Rozciganie stylu przez znaczniki <span> i <div>. Oba sposoby s podobne. Rni si tylko tym, e <div> jest bardziej elastyczny. Nie s to popularne metody. Przykad z <span>:
<!-- prolog i sekcja head --> <body> <!-- 1 moliwo --> <span class="klasa"> <dl> <dt>to jest lista</dt> <dd>jeden</dd> <dd>dwa</dd> <dd>trzy</dd> </dl> </span> <!-- 2 moliwo --> <span style="font-size: 10pt; color: green"> <dl> <dt>to jest lista</dt> <dd>jeden</dd> <dd>dwa</dd> <dd>trzy</dd> </dl> </span> </body> <!-- dalej koniec dokumentu -->
Przykad z <div>:
<!-- prolog i sekcja head --> <body> <!-- 1 moliwo --> <div class="klasa"> <table summary="przykad" border="1"> <tbody> <tr> <td>zz</td> <td>zz</td> </tr> </tbody> </table> </div> <div style="font-size: 10pt; text-align: right"> <table summary="przykad" border="1"> <tbody> <tr> <td>vv</td>
<td>vv</td> </tr> </tbody> </table> </div> </body> <!-- dalej koniec dokumentu -->
Symbol '&'
Jeli w adresie bdzie symbol '&' (szczeglnie w skryptach CGI) naley go zastpi zamiennikiem &. Przykad nie poprawnego zapisu:
Poprawny przykad:
http://my.site.dom/cgi-bin/myscript.pl?class=guest&name=user.
Przykad wywoania:
<a href="#poczatek>xyz</a>
Atrybuty id i class s cile zwizane ze stylami (patrz: 'Style w XHTML'). W XHTML odwoanie si do '#' moliwe jest tylko przez atrybut id (identyfikator ID) a odwoanie si do '.' moliwe jest tylko przez class (klasa).
<!-- prolog --> <head> <style type="text/css"> .klasa { color: blue } #id { color: green } </style> </head> <body> <p class="klasa">To jest tekst niebieski</p> <p id="id">To jest tekst zielony</p> </body> <!-- dalej koniec dokumentu -->
Komentarze
Komentarze w XHTML wygldaj tak samo jak w HTML: zaczynaj si <!-- a kocz si -->. Przykad:
<!-- tre komentarza -->
Skrypty i style
XHTML zaleca si stosowanie innego zapisu stylw i skryptw ni w HTML. Zwizane jest to z sekcj CDATA. Przykad:
<script type="text/javascript"> <![CDATA[ tre skryptu ]]> </script>
lub
<style type="text/css"> <![CDATA[ tre stylw ]]> </style>
Zapis ten ma ujednolici zapis elementw nie zwizanych z jzykami opartymi na znacznikach (np. XHTML). Zapis ten ma take "czuwa" nad poprawnym rozwijaniem si stylw, skryptw itp. Oczywicie ten zapis zosta zaczerpnity z XML. Wszystko co znajduje si w sekcji CDATA jest ignorowane przez paser.
Niestety dzisiejsze przegldarki nie interpretuj tak zapisanych stylw i skryptw wewntrz dokumentu XHTML, mona wic przejciowo zasad t pomin.
Skrypty PHP
W specyfikacji XHTML nie ma mowy o skryptach takich jak PHP ale jeli nadejdzie potrzeba ich uycia to naley posuy si instrukcjami przetwarzania (s one zaczerpnite bezporednio ze specyfikacji XML). Prosz zwrci uwag na to, e po <? wystpuje nazwa (<?php). Jest to bardzo wane, poniewa nazwa pozwala zidentyfikowa dalszy cig znakw. W HTML mona spotka tre skryptw w rodku znacznikw takich jak <? ?>, <% %>. Wszystkie te oznaczenia w XHTML s nie prawidowe! Nie zaleca si te stosowania <script language="php"></script>. Poprawny przykad:
<?php // tre skryptu ?>
Na dzie dzisiejszy we wstawianiu skryptw zaleca si stosowanie sekcji CDATA jednak zapis powyej jednak jest bardziej powszechny. atwo zauway, e deklaracja zgodnoci z XML jest take instrukcj przetwarzania (patrz: 'Prolog i skadnia').
Przykad SVG:
<?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg"> <rect stroke="black" y="80px" x="50px" width="160px" height="70px" /> <circle stroke="black" cy="80px" cx="50px" r="50px" /> </svg>
Matematyka w XHTML
XHTML (podobnie jak HTML) nie jest przystosowany do zapisu wzorw matematycznych. Matematycy, fizycy i inni ludzie nauk cisych powinni wic korzysta z jzyka MathML. Jzyk ten jest bardzo podobny do XHTML poniewa jest oparty na XML. Ju teraz niektre przegldarki interpretuj dostatecznie ten jzyk. MathML i znaki specjalne (patrz: 'Symbole i znaki specjalne') umoliwiaj zapisanie niemal kadego dziaania matematycznego. Przykad MathML:
<?xml version="1.0"?> <math xmlns="http://www.w3.org/1998/Math/MathML"> <mroot> <mfrac> <mn>2</mn> <mn>3</mn> </mfrac> <mn>3</mn> </mroot> </math>
Symbol
Spis wielkich liter greckich I Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω
II Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω
Symbol
Spis maych liter greckich I α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ
II α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ
Symbol
Spis maych liter greckich I φ χ ψ ω ϑ ϒ ϖ
Symbol
Spis symboli listowych I ℘ ℑ ℜ ™ ℵ ℘ ℑ ℜ ™ ℵ
II
Strzaki I ← ↑ → ↓ ↔ ↵ ⇐ ⇑ ⇒
II
Symbol prod sum radic infin and or int sim cong asymp ne equiv le ge
I ∏ ∑ √ ∞ ∧ ∨ ∫ ∼ ≅ ≈ ≠ ≡ ≤ ≥
II
Symbol
Rne znaki I Œ œ Š š Ÿ › € £ ¥ ¢ §
II Œ œ Š š Ÿ › € £ ¥ ¢ §
Rne znaki Symbol I II © © º º ® ® ² ² ³ ³ ‰ ‰ ¼ ¼ ½ ½ ¾ ¾ ° ° ± ± ÷ ÷ ø ø · · Niestety nie wszystkie znaki powyej mona zobaczy w przegldarkach. Np. w Netscape Communicator 4 nie wida adnych znakw.
Basic XHTML
Opis jzyka
Basic XHTML jest nastpc Compact HTML. Jest to modszy brat XHTML, za pomoc ktrego tworzy si mniej skomplikowane strony, podobny jest do WML. Jest jego konkurentem. Basic XHTML przeznaczony jest do takich urzdze jak:
telefony komrkowe telewizory pejdery systemy nawigacyjne samochodu przenone gry telewizyjne organizery zegarki notatniki managerskie i wiele innych
Basic XHTML jest standardem zalecanym przez W3C. Strony napisane w Basic XHTML s zgodne z XHTML.
2.
3. 4.
5.
6.
7.
body head html title meta base link Tekstu: o abbr o acronym o address o blockquote o br o cite o code o dfn o div o em o h1, h2, h3, h4, h5, h6 o kbd o p o pre o q o samp o span o strong o var Linku: o a Listy: o dl o dt o dd o ol o ul o li Formularzy: o from o input o label o select o option o textarea Tabel: o caption o table o td o th o tr Obrazu:
o o o o o o o
Prolog
Tak powinien wyglda prolog:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
Dokumenty Basic XHTML wygldaj tak samo jak dokumenty XHTML. A oto przykad:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <title>Przypadowa strona</title> </head> <body> <h1>Oto przykad</h1> </body> </html>
Style
W specyfikacji Basic XHTML nie ma znacznika <style>. Mona tylko uywa znacznika <link> do arkusza zewntrznego. W Bacic XHTML style mog by przedstawiane znacznikami <div> i <span>. Atrybut stylw jest dozwolony tylko 'class'. Zaleca si deklarowanie atrybutu 'media' by rozpozna typ urzdzenia, do ktrego dokument jest przeznaczony.
Linki i parsery
Linki
Strony polskie:
http://webmaster.helion.pl/kurshtml/
Strony kursu jzyka HTML Pawa Wimmera. http://www.pajaczek.pl/ Strony najlepszego edytora stron internetowych. Wersja 5.0 Pajczka obsuguje XHTML.
Strony zagraniczne:
http://www.w3.org/ Strony World Wide Web Consortium. Tu znajdziesz wszelkie informacje o nowych i starych standardach internetowych. http://www.w3schools.com/xhtml/ W3 Schools, ciekawy strony o XHTML i nie tylko. http://www.w3.org/TR/xhtml11/ Specyfikacja XHTML 1.1, najnowsze zalecenia i zmiany dotyczce XHTML 1.1 - niepena specyfikacja. http://www.w3.org/TR/xhtml1/ Specyfikacja XHTML 1.0, komplet informacji i wprowadzenie w "wiat" XHTML - pena specyfikacja. http://www.w3.org/TR/xhtml-basic/ Specyfikacja Basic XHTML. http://www.w3.org/TR/SVG11/ Specyfikacja SVG 1.1. http://www.w3.org/TR/SVG/ Specyfikacja SVG 1.0. http://www.w3.org/TR/MathML2/ Specyfikacja MathML. http://www.xhtml.org/ Strony przeznaczone wycznie dla XHTML.
Parsery
Parsery su do sprawdzania bdw (czasami te do ich poprawiania). Zachcam do korzystania z nich, poniewa nawet najlepszym zdarzaj si pomyki. Parserem do XHTML godnym polecenia jest W3C Validator, ktry znajduje si pod adresem: http://validator.w3.org/. Moemy take sprawdzi poprawno stylw pod adresem: http://jigsaw.w3.org/css-validator/. Dobrym programem sprawdzajcym poprawno dokumentu jest Tidy. Wszystkie informacje dotyczce tego programy znajduj si na http://www.w3.org/People/Raggett/tidy/. Gdy strona zostanie sprawdzona i zostan poprawione bdy dobrym zwyczajem jest umieci button wskazujcy na zgodno z XHTML i CSS (patrz na d). Copyright 2002 Dominik Tomaszuk Wszystkie prawa zastrzeone.