..:: Kurs języka XHTML ::.. Wstęp Co to jest XHTML? XHTML (extensible HyperText Markup Language) to język hipertekstowy używany do tworzenia dokumentów czyli stron internetowych. Polecenia tekstowe (znaczniki i atrybuty) pozwalają na realizację tzw. linków (odsyłaczy), wyświetlanie różnych czcionek, grafiki i innych elementów. Definicja ta pasuje nie tylko do XHTML ale także do HTML. To nie przypadek, że definicje są podobne (a właściwie takie same). Obydwa języki pełnią taką samą funkcję. Po co mi XHTML? Te pytanie nasuwa się wszystkim webmasterom, którzy stykają się z XHTML Odpowiedź jest prosta. XHTML jest aktualnie obowiązującym standardem opisu stron WWW zalecanym przez W3C. XHTML należy traktować jako stanadard "HTML 5" (co oczywiście nie jest prawdą, ponieważ prace nad rozwijaniem języka HTML zostały zakończone na wersji 4.01). Wcześniej czy później wszystkie strony będą zgodne z tym standardem. XHTML jest także zgodny z XML, który staje się uniwersalnym standardem przetwarzania opisu środowiska WWW i dokumentów strukturalnie uporządkowanych informacji. XHTML jest ściśle związany z kaskadowymi stylami - CSS1 i CSS2, w przyszłości także - CSS3. Przeglądarki XHTML Większość przeglądarek dokumentów HTML dobrze interpretuje XHTML. Są to przeglądarki: Netscape Communicator/Sylaba Komunikator/Mozilla, Microsoft Internet Explorer, Opera, Konqueror i inne. Należy pamiętać, że im nowsza przeglądarka tym lepiej będzie interpretować XHTML. Nawiasem mówiąc (czytaj pisząc:-) 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 obsługuje style. Ciekawą alternatywą jest Opera (szczególnie Opera 5 i 6), która działa szybko i sprawnie. Jak widać problemy sprawiają style, które są nieodłącznym elementem XHTML. Informacje ogólne Podobieństwa z HTML Dane są w formie tekstowej Dane opisywane są znacznikami (tagami) np: <img> Znaczniki mogą posiadać atrybuty np: src="przyk.gif" Atrybuty posiadają wartości (przykład jak wyżej) Tagi rozpoczynają się znakiem '<'a kończą '>' np: <html> Przykład zamknięcia znacznika (jeśli jest wymagany) </html> Wartości zawarte są w symbolach "" np: "przyk.gif" A oto przykładowy dokument HTML (także 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>przypładowa strona</title> </head> <body> <p>to tylko przykład</p> <img src="przyk.gif"> <body> </html> Bardzo początkujących (nie znających HTML i nie rozumiejących składni języka) zapraszam na świetny kurs Pawła Wimmera: http://wwwmag.com.pl/kurs/ Nowości w stosunku do HTML Znaczniki niepuste mają zawsze znacznik końcowy np: <p>coś tam</p> Znaczniki puste muszą być zawsze zakończone '/>' np: <br /> Wszystkie atrybuty i tagi muszą być pisane małymi literami np: <img src="przyk.gif"> Atrybuty typu boolean (logiczne) muszą być uzupełniane o wartość np: noshade="noshade" Wartości atrybutów muszą być zawarte w symbolach (nawet te jedno wyrazowe) "" np: "przyk.gif" Zlikwidowano znaczniki (dotyczy też HTML 4, patrz: 'Znaczniki'): <font> - należy używać stylów <basefont> - należy używać stylów <strike> - należy używać stylów <s> - należy używać stylów <u> - należy używać stylów <center> - należy używać stylów i znacznika <div> <menu> - należy używać znacznika <ul> <dir> - należy używać znacznika <ul> <isindex> - należy używać znacznika <input> <xmp> - należy używać znacznika <pre> <plaintext> - należy używać znacznika <pre> <listing> - należy używać znacznika <pre> <applet> - należy używać znacznika <object> (dotyczy tylko XHTML 1.0) Zlikwidowano atrubuty (dotyczy też HTML 4, patrz: 'Atrybuty'): accesskey align (uwaga: można używać w <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>) alink background bgcolor border (uwaga: można używać w <table>) clear color compact
face height (uwaga: można używać w <iframe>, <img>, <object> ale się nie zaleca) hspace lang language (należy używać type="text/javascript" w znaczniku <script>) link name (zlikwidowano w <a> i <map>) size (uwaga: można używać w <input>, <select> start tabindex target (zlikwidowano w <a>, <area> i <link>) text type value version vlink vspace width (uwaga: można używać w <colgroup>, <col>, <table>, <img>, <object>, <iframe> ale się nie zaleca) Wszystkie atrybuty wymienione wyżej należy zastąpić stylami chyba, że jest to zaznaczone w nawiasie Między znacznikami <table> musi znajdować się tag <tbody> np: <table><tbody><tr><td></td></tr></tbody></table>, jeśli tabela jest długa należy stosować znaczniki <thead> i/lub <tfoot> Pomimo, że tagi takie jak <b>, <i> znajdują się w specyfikacji to zaleca się stosowanie stylów. W przyszłości wszystkie atrybuty i znaczniki opisujące pod względem wizualnym stronę zostaną zlikwidowane. Atrybuty wymienione wyżej, które teraz można używać z niektórymi tagami w przyszłości zostaną zlikwidowane (np: size, width, height, border, align). Przy znaczniku <img> należy używać atrybutu 'alt'. Więcej nowych cech znajduje się w dalszych częściach kursu (patrz: 'Inne ważne zasady'). Większość cech wymienionych wyżej nie związanych z HTML pochodzi z XML. Więcej informacji o XML znajduje się na stronie Pawła Stroińskiego. A oto przykład 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>przypładowa strona</title> </head> <body> <p>oto przykład</p> <hr />
<img src="przyk.gif" alt="tekst" /> </body> </html> Specyfikacja XHTML Co to jest specyfikacja? Specyfikacja to pełny zbiór zasad i reguł dotyczących danego języka np. XHTML, HTML, SVG itp. Specyfikacja jest ustalana przez specjalistów z danej dziedziny (w tym przypadku ludzi z W3C), wytycza ona drogi rozwoju dla języków. Specyfikacja XHTML jest napisana w języku angielskim (występuje w niej wiele specjalistycznych wyrażeń) a co za tym idzie jest trudna do zrozumienia. Ten kurs w poszczególnych rozdziałach przedstawia zasady zawarte w specyfikacji napisane prostym językiem (i jak widać po polsku:-). Część informacji zawartych w tym kursie nie występuje w specyfikacji XHTML ale jest równie ważna (czasami są one zawarte w innych specyfikacjach zgodnych z XHTML np. w XML, inne zaś są rodzajami reguł ogólnie przyjętych zgodnych oczywiście ze specyfikacjami). Specyfikacja HTML XHTML jest bardzo podobny do HTML i XML. Specyfikacja XHTML nie zawiera opisu znaczników i atrybutów, ponieważ jest to zawarte w specyfikacji HTML 4.01 (patrz: 'Informacje ogólne', 'Znaczniki' i 'Atrybuty'). Specyfikacja HTML 4.01 jest poprawioną i uzupełnioną wersją specyfikacji HTML 4.0. HTML jest uproszczoną wersją metajęzyka SGML. Specyfikacja HTML 4.01: http://www.w3.org/tr/html401 Specyfikacja XHTML i XML Specyfikacja XHTML zawiera reguły, które są związane z XML. Inaczej mówiąc (właściwie pisząc:-) XHTML jest odmianą języka HTML przeformatowanego do metajęzyka XML. XHTML jest więc zgodny XML, który w przyszłości stanie się standardem przechowywania informacji nie tylko stron internetowych. Od niedawna pojawiła 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/ Większość informacji ze specyfikacji dotyczących XHTML jest zawarte w tym kursie (a niektórych informacji nawet nie znajdziesz w specyfikacji). Specyfikacja CSS Osoby znające HTML i XML nie będą mieli żadnych problemów z opanowaniem języka XHTML (pozostali będą się musieli trochę pomęczyć, ale zapewniam, że XHTML to prosty język:-). Niestety sam XHTML nie wystarczy, trzeba znać style kaskadowe, które zajmują się formatowaniem i upiększaniem stron (tzw. Strona napisana w czystym XHTML wygląda niezbyt ładnie). Jeśli ktoś miał wcześniej
styczność z CSS1 nie będzie miał problemu z opanowaniem CSS2, ponieważ obydwie specyfikacje są do siebie bliźniaczo podobne. Większość dokumentów zgodnych z CSS1 jest zarówno zgodne z CSS2. Specyfikacja CSS2 nie jest nowa, była już zalecana do HTML (patrz: 'Style w XHTML'). Do mniej skomplikowanych dokumentów wystarczy nawet CSS1. Ostatnio prowadzone są prace nad CSS3. Warto pamiętać, że CSS2 nie jest jeszcze w pełni interpretowany przez przeglądarki a CSS3 to zupełna nowość. Specyfikacja CSS2: http://www.w3.org/tr/rec-css2/ Specyfikacja CSS1: http://www.w3.org/tr/rec-css1/ Wszystkie ważne zagadnienia dotyczące XHTML, HTML, XML, CSS1, CSS2 znajdziecie na tej stronie. Bardziej szczegółowe informacje o HTML, XML i CSS znajdziecie w EduWebie (więc nie martwcie się jeśli nie znacie języka 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 poprawności dokumentu XHTML. Transitional Transitional to najczęściej stosowana wersja DTD. Jest swego rodzaju formą przejściową pomiędzy HTML a XHTML, ponieważ zezwala na korzystanie ze znaczników i atrybutów w statusie deprecated (takich jak <applet>, <font>, <s>, align, width i innych wymienionych na stronie: 'Informacje ogólne'). W tej wersji nie można stosować ramek. Przykład: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> Należy unikać 'Transitional', zaleca się stosowanie 'Strict'. Strict Strict jest to wersja DTD, do której wszyscy dążą. Jest bardzo trudna do zrealizowania, ponieważ zabrania stosowania tagów i atrybutów w statusie deprecated (patrz: 'Znaczniki' i 'Atrybuty'). Nie można w niej korzystać z ramek. Przykład: <!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, która dopuszcza wszystkie elementy (czyli z atrybutów i znaczników deprecated i ramek). Jak widać ta wersja podobna jest do 'transitional'.
Przykład: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd"> Należy unikać 'Frameset', zaleca się korzystanie z 'div' i CSS. Wersja DTD XHTML 1.1 Do XHTML 1.1 zalecana jest następująca 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 należy ją poddać walidacji i na podstawie wyników zadeklarować wersję DTD (patrz: 'Linki i parsery'). Prolog i składnia Prolog W XHTML istnieją elementy, których nie można 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 należy używać zawsze na początku dokumentu. Prolog to zadeklarowanie zgodności z XML. A wygląda tak: <?xml version="1.0" encoding="iso-8859-2"?> Pierwsza część prologu (czyli: <?xml version="1.0") nie zmienia się. Dalsza część dotyczy kodowania znaków (w naszym przypadku polskich znaków). Standard dla polskich "ogonków" to 'iso-8859-2' (ISO Latin 2). Należy zwrócić uwagę na to, że version w prologu nie jest traktowane jako zwykły atrybut a więc nie posiada statusu Deprecated (jako to ma miejsce w znaczniku <html>, patrz: 'Atrybuty'). Do prologu można też dodać standalone z wartością "no". Oznacza to, że definiujemy dokument z zewnętrzną definicją w innych plikach. Przykład: <?xml version="1.0" encoding="iso-8859-2" standalone="no"?> Dalej należy wpisać wersje DTD dokumentu (patrz: 'Wersje DTD'). Deklaracja XML i wersja DTD to prolog. Przykład: <?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>, który w całości wygląda tak: <html xmlns="http://www.w3.org/1999/xhtml"> Znacznik ten także ma podobne funkcje jak prolog. Znacznik 'body' Dobrym zwyczajem jest zadeklarowanie języka. Robi się to w znaczniku <body>. Przykład: <body xml:lang="pl"> Podsumowując prawidłowy dokument powinien wyglądać 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" można też wstawiać do znacznika <html>. W XHTML 1.0 można używać także atrybutu lang. Oczywiście sekcje <head> i <body> można (nawet trzeba!) uzupełniać nowymi znacznikami. Dołączanie arkusza stylów Dołączanie arkusza stylów w XML jest związane z prologiem (dotyczy to także XHTML) i odbywa się w inny sposób niż w HTML. A oto przykład: <?xml-stylesheet type="text/css" href="style.css"?> W celu zachowania zgodności z HTML w dokumentach XHTML zaleca się stosowanie górnego zapisu i równocześnie stosowanie znacznika <link>. Przykład:
<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 początku dokumentu. Przykład <?xml version="1.0" encoding="iso-8859-2"?> <?xml-stylesheet type="text/css" href="style.css"?> Znaczniki Spis znaczników XHTML Wybierz literę, na którą 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 Nazwa znacznika Opis znacznika Spis znaczników XHTML 1.0 XHTML 1.1 a odnośniki zgodny zgodny jest abbr forma skrócona zgodny zgodny jest acronym akronim zgodny zgodny jest address dane kontaktowe zgodny zgodny jest applet aplet Javy Deprecated zgodny jest area mapa odnośników zgodny zgodny brak b pogrubiony tekst zgodny zgodny jest base adres bazowy zgodny Unsupported brak basefont czcionka bazowa Deprecated Unsupported brak bdo wyłączenie dwustronnego zgodny zgodny jest wypisywania big tekst większy o 1 zgodny zgodny jest blockquote cytat do długich tekstów zgodny zgodny jest body ciało dokumentu zgodny zgodny jest br nowa linia zgodny zgodny brak button przyciski zgodny zgodny jest caption opis tabeli zgodny zgodny jest center wyśrodkowanie Deprecated Unsupported jest Zamknięcie zanacznika
Nazwa znacznika Opis znacznika Spis znaczników XHTML 1.0 XHTML 1.1 cite cytat, źródło zgodny zgodny jest code kod programu zgodny zgodny jest col atrybuty kilku kolumn zgodny zgodny brak colgroup grupowanie kolumn zgodny zgodny jest dd termin w liście definicyjnej zgodny zgodny jest del tekst usunięty zgodny zgodny jest dfn definicja zgodny zgodny jest dir zawartość katalogu Deprecated zgodny jest div wygląd długiego fragmentu dokumentu zgodny zgodny jest dl tworzenie listy definicyjnej zgodny zgodny jest dt termin w liście definicyjnej zgodny zgodny jest em wyróżnienie tekstu zgodny zgodny jest fieldset grupowanie elementów formularza zgodny zgodny jest font czcionka Deprecated Unsupported jest form tworzenie formularzy zgodny zgodny jest frame zawartość ramki Frameset Unsupported brak frameset wyglad ramek Frameset Unsupported jest h1 nagłówek 1 zgodny zgodny jest h2 nagłówek 2 zgodny zgodny jest h3 nagłówek 3 zgodny zgodny jest h4 nagłówek 4 zgodny zgodny jest h5 nagłówek 5 zgodny zgodny jest h6 nagłówek 6 zgodny zgodny jest head nagłówek dokumentu zgodny zgodny jest hr linia pozioma zgodny zgodny brak html rozpoczyna dokument zgodny zgodny jest i pochylony tekst zgodny zgodny jest iframe ramki wewnętrzne zgodny Unsupported jest img obrazek zgodny zgodny brak input elementy formularza zgodny zgodny brak ins wstawiony tekst zgodny zgodny jest Zamknięcie zanacznika
Nazwa znacznika Opis znacznika Spis znaczników XHTML 1.0 XHTML 1.1 isindex element wprowadzania tekstu Deprecated Unsupported brak kbd tekst do wypisania zgodny zgodny jest label etykieta opisu elementu zgodny zgodny jest legend przypisanie opisu zgodny zgodny jest li element listy wyliczeniowej zgodny zgodny jest link odnośnik np. do stylów zgodny zgodny brak map definicja mapy odsyłaczy zgodny zgodny jest menu lista menu Deprecated Unsupported jest meta określanie własności dokumentu zgodny zgodny brak noframes tekst dla przeglądarek bez ramek Frameset Unsupported jest noscript tekst dla przeglądarek bez skryptów zgodny zgodny jest object obiekt w dokumencie zgodny Unsupported jest ol tworzenie uporządkowanej listy zgodny zgodny jest optgroup logiczne grupowanie opcji wyboru zgodny zgodny jest option opcja listy wyboru zgodny zgodny jest p akapit zgodny zgodny jest param parametr apletu lub obiektu zgodny zgodny jest pre tekst preformatowany zgodny zgodny jest q cytat do krótkich tekstów zgodny zgodny jest s przekreślony tekst Deprecated Unsupported jest samp przykład zgodny zgodny jest script skrypty zgodny zgodny jest select tworzenie listy wyboru w formularzach zgodny zgodny jest small tekst mniejszy o 1 zgodny zgodny jest span wygląd fragmentu tekstu zgodny zgodny jest strike przekreślony tekst Deprecated Unsupported jest strong wyróżnienie tekstu zgodny zgodny jest style definiowanie stylów zgodny zgodny jest Zamknięcie zanacznika
Nazwa znacznika Opis znacznika Spis znaczników XHTML 1.0 XHTML 1.1 sub indeks dolny zgodny zgodny jest sup indeks górny zgodny zgodny jest table tabela zgodny zgodny jest tbody obszar głównej treści tabeli zgodny zgodny jest td komórka tabeli zgodny zgodny jest Zamknięcie zanacznika textarea wieloliniowy obszar tekstu zgodny zgodny jest tfoot obszar stopki tabeli zgodny zgodny jest th komórka nagłówka tabeli zgodny zgodny jest thead obszar główka tabeli zgodny zgodny jest title tytuł dokumentu zgodny zgodny jest tr wiersz tabeli zgodny zgodny jest tt tekst o tych samych odstępach zgodny zgodny jest u podkreślony tekst Deprecated Unsupported jest ul tworzenie listy wyliczeniowej zgodny zgodny jest var przykład zmiennej zgodny zgodny jest Deprecated znaczniki w tym statusie nie mogą być używane w Strict (patrz: 'Wersje DTD') Frameset znaczniki w tym statusie mogą być używane tylko w Frameset (patrz: 'Wersje DTD') Unsupported znaczniki w tym statusie nie mogą być używane w XHTML 1.1 (patrz: 'Wersje DTD') Jak widać statusy deprecated i unsupported w większości znacznikach się pokrywają, a co za tym idzie dokumenty zgodne ze strict w większości (czasami z drobnymi zmianami) mogą być zgodne z XHTML 1.1. Zasady dotyczące znaczników <a> w tym znaczniku nie może być zawarty inny znacznik <a> <button> w tym znaczniku nie może być zawarty <button>, <fieldset>, <form>, <iframe>, <input>, <isindex>, <label>, <select> i <textarea> <form> w tym znaczniku nie może być zawarty inny znacznik <form>
<label> w tym znaczniku nie może być zawarty inny znacznik <label> <pre> w tym znaczniku nie może być zawarty <big>, <img>, <object>, <small>, <sub> i <sup> Należy więc unikać zapisu takiego jak ten: <pre><big>bvfbg</big></pre> lub <a href="xyz">xyz<a>abc</a></a> Atrybuty Spis atrybutów XHTML Wybierz literę, na którą 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 atrybutów Nazwa Występowanie w znacznikach XHTML 1.0 abbr td, th zgodny accept-charset form zgodny accept form, input zgodny accesskey a, area, button, input, label, legend, textarea + zgodny action form zgodny align col, colgroup, tbody, td, tfoot, th, thead, tr + zgodny align caption, applet, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p + Deprecated alink body Deprecated alt applet Deprecated alt area, img, input zgodny archive object zgodny archive applet Deprecated axis td, th zgodny background body Deprecated bgcolor table, tr, td, th, body Deprecated border table + zgodny border img, object + zgodny Deprecated
Spis atrybutów Nazwa Występowanie w znacznikach XHTML 1.0 cellpadding table zgodny cellspacing table zgodny char col, colgroup, tbody, td, tfoot, th, thead, tr zgodny charoff col, colgroup, tbody, td, tfoot, th, thead, tr zgodny charset a, link, script zgodny checked input zgodny cite blockquote, q, del, ins zgodny class wszystkie oprócz: base, basefont, head, html, meta, param, script, style, title zgodny classid object zgodny clear br Deprecated code applet Deprecated codebase object zgodny codebase applet Deprecated codetype object zgodny color basefont, font Deprecated cols textarea zgodny cols frameset Frameset colspan td, th zgodny compact dir, dl, menu, ol, ul Deprecated content meta zgodny coords area, a zgodny data object zgodny datetime del, ins zgodny declare object zgodny defer script zgodny dir wszystkie oprócz: applet, base, basefont, bdo, br, zgodny frame, frameset, iframe, param, script dir bdo zgodny disabled button, input, optgroup, option, select, textarea zgodny enctype form zgodny face basefont, font Deprecated for label zgodny frame table zgodny frameborder frame, iframe Frameset headers td, th zgodny
Spis atrybutów Nazwa Występowanie w znacznikach XHTML 1.0 height img, object + zgodny height iframe, td, th, applet + Deprecated href a, area, link, base zgodny hreflang a, link zgodny hspace applet, img, object Deprecated http-equiv meta zgodny id wszystkie oprócz: base, head, html, meta, script, style, title zgodny ismap img, input zgodny label option, optgroup zgodny lang wszystkie oprócz: applet, base, basefont, br, frame, frameset, iframe, param, script + zgodny language script Deprecated link body Deprecated longdesc img zgodny longdesc frame, iframe Frameset marginheight frame, iframe Frameset marginwidth frame, iframe Frameset maxlength input zgodny media style, link zgodny method form zgodny multiple select zgodny name button, textarea, select, form, img, a, input, object, map, param, meta zgodny name frame, iframe + Frameset name applet + Deprecated nohref area zgodny noresize frame Frameset noshade hr Deprecated nowrap td, th Deprecated object applet Deprecated onblur * a, area, button, input, label, select, textarea zgodny onchange * input, select, textarea zgodny onclick * wszystkie oprócz: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, zgodny meta, param, script, style, title ondblclick * wszystkie oprócz: applet, base, basefont, bdo, br, zgodny
Spis atrybutów Nazwa Występowanie w znacznikach XHTML 1.0 font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title onfocus * a, area, button, input, label, select, textarea zgodny onkeydown * onkeypress * onkeyup * wszystkie oprócz: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title wszystkie oprócz: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title wszystkie oprócz: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title zgodny zgodny zgodny onload * body zgodny onload * frameset Frameset onmousedown * wszystkie oprócz: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title onmousemove * wszystkie oprócz: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title onmouseout * onmouseover * onmouseup * wszystkie oprócz: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title wszystkie oprócz: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title wszystkie oprócz: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title zgodny zgodny zgodny zgodny zgodny onreset * form zgodny onselect * input, textarea zgodny onsubmit * form zgodny onunload * body zgodny onunload * frameset Frameset profile head zgodny prompt isindex Deprecated readonly textarea, input zgodny rel a, link zgodny rev a, link zgodny rows textarea zgodny
Spis atrybutów Nazwa Występowanie w znacznikach XHTML 1.0 rows frameset Frameset rowspan td, th zgodny rules table zgodny scheme meta zgodny scope td, th zgodny scrolling frame, iframe Frameset selected option zgodny shape area zgodny shape a zgodny size input, select + zgodny size hr, font, basefont + Deprecated span col zgodny span colgroup zgodny src script, input, img zgodny src frame, iframe Frameset standby object zgodny start ol Deprecated style wszystkie oprócz: base, basefont, head, html, meta, param, script, style, title zgodny summary table zgodny tabindex a, area, button, input, object, select, textarea + zgodny target a, area, base, form, link + Deprecated text body Deprecated title wszystkie oprócz: base, basefont, head, html, meta, param, script, title zgodny type a, link, object, param, script, style, input, button + zgodny type li, ol, ul + Deprecated usemap img, input, object zgodny valign col, colgroup, tbody, td, tfoot, th, thead, tr zgodny value input, option, param, button zgodny value li Deprecated valuetype param zgodny version html Deprecated vlink body Deprecated vspace applet, img, object Deprecated width img, object, table, col, colgroup + zgodny
Spis atrybutów Nazwa Występowanie w znacznikach XHTML 1.0 width hr, td, th, applet, pre, iframe + Deprecated * Zdarzenia + patrz niżej Wyjaśnienia terminów deprecated i frameset występują w dziale 'Znaczniki'. + Zmiany XHTML 1.1 w stosunku do 1.0 accesskey nie można go używać w <a> align nie można go używać w <capiton>, <div>, <h1> - <h6>, <hr>, <img>, <input>, <legend>, <p> i <table> border nie można go używać w <img> height nie można go używać w <td> i <th> lang nie można go używać we wszystkich znacznikach! name nie można go używać w <a> i <map> size nie można go używać w <hr> tabindex nie można go używać w <a> target nie można używać go używać <a>, <area>, <link> i <base>. type nie można go używać w <ol>, <li> i <ul> value nie można go używać w <li> width nie można go używać w <hr>, <td>, <th> i <pre> W dalszych wersjach XHTML stopniowo będzie się likwidowało atrybuty - zastąpi się je stylami lub w inny sposób (oczywiście atrybuty np: alt lub summary nie znikną całkowicie nigdy). Style w XHTML Podstawowe informacje Style są nieodłączną częścią XHTML. Odpowiadają one na wizualną, interaktywną słyszalną i dotykową część strony. Style zastępują wiele
atrybutów. Niestety CSS2 nie jest w pełni interpretowany przez aktualne wersje przeglądarek. Budowa stylu: selektor { element: wartość } Selektor to znacznik XHTML (HTML) np.: p, h1, li itp. Element (cecha) to właściwość danego znacznika odpowiadająca w pewnym sensie atrybutowi w XHTML (HTML). Elementy są wymienione poniżej. Wartość może być liczbą lub ciągiem znaków. Elementy zastępujące atrybuty Elementy zastępujące niektóre atrybuty: Atrybut Element align text-align face (w <font>) font-family size (w <font>) font-size cellpadding padding cellspacing paddnig color color bgcolor background-color background background-image valign vertical-align width width height height clear clear border border Zamiast: należy używać: <h1 style="text-align: center">xyz</h1> Oczywiście jest to tylko przykład. Spis elementów Elementy: azimuth # cue-after # marker-offset + richness # background + cue-before # marks + right + background- cursor + max-height + size +
attachment + background-color + direction + max-width + speak # background-image + display +#@ min-height + speak-header # background-position + elevation # min-width + speak-numeral # background-repeat + empty-cells + orphans + speakpunctuation border + float + outline + speech-rate # border-collapse + font + outline-color + stress # border-color + font-family + outline-style + table-layout + border-spacing + font-size + outline-width + text-align + border-style + font-size-adjust + overflow + text-decoration + border-top *+ font-stretch + padding + text-indent + border-top-color *+ font-style + padding-top *+ text-shadow + border-top-style *+ font-variant + page + text-transform + border-top-width *+ font-weight + page-break-after + top + border-width + height + page-breakbefore + unicode-bidi + bottom + left + page-breakinside vertical-align + caption-side + letter-spacing + pause # visibility + clear + line-height + pause-after # voice-family # clip + list-style + pause-before # volume # color + list-style-image + pitch # white-space + content +#@ list-styleposition pitch-range # widows + counter-increment +#@ list-style-type + play-during # width + counter-reset +#@ margin + position + word-spacing + cue # margin-top *+ quotes + z-index + * right, left lub bottom + wzrokowy # słuchowy @ dotykowy Wstawianie stylów 1. Zagnieżdżanie stylów wewnątrz dokumentu Przykład: <!-- prolog na początku --> <head> <!-- to są właściwe style, w sekcji head --> <style type="text/css"> p { font-size: 10px; font-family: monospace } h1,h2 { text-align: center; color: blue } </style>
<!-- koniec stylów --> </head> <!-- dalsza część jest dokumentu --> 2. Style lokalne w dokumencie Jest to metoda nie zalecana, ponieważ jest niewydajna. Zadaniem styli przecież jest ułatwianie pracy i maksymalne jej skracanie. Jedną z ważnych funkcji CSS jest możliwość wykorzystywania ich w kilku dokumentach, czego nie oferuje ta metoda. Radzę korzystać z innych rodzajów wstawiania styli. Jeśli ktoś chce dla jednego znacznika przypisywać różne właściwości (i używać go kilka razy w dokumencie XHTML) polecam class lub id. Przykład: <!-- wsześniej prolog i sekcja head --> <body> <p style="color: red; font-size: 10pt">XYZ</p> <p style="color: green">abc</p> </body> <!-- dalej koniec dokumentu --> 3. Dołączanie zewnętrznego arkusza stylów Jest to metoda najczęściej spotykana. Daje ona najwięcej możliwości i w pełni wykorzystuje funkcje stylów. Po stworzeniu zewnętrznego pliku CSS można go wykorzystać w kilku stronach (zyskacie naprawdę dużo czasu:-). Przykład pliku zewnętrznego: /* jest to przykład zewnętrznego pliku z rozszerzeniem CSS */ p { font-size: 10px; font-family: monospace } h1,h2 { text-align: center; color: blue } Przykład pliku XHTML: <!-- prolog na początku --> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <!-- dalsza część jest dokumentu --> Można też arkusz stylu zewnętrznego dołączyć w znaczniku <??> (patrz: 'Prolog i składnia'). Ta metoda nie jest obowiązkowa ale zalecana ze względu za zgodność z XML. 4. Importowanie arkusza stylów Przykład: <!-- prolog na początku --> <head> <!-- to są właściwe style, w sekcji head -->
<style type="text/css"> @import url(http://www.xyz.pl/style.css) </style> </head> <!-- dalsza część jest dokumentu --> 5. Inne metody Rozciąganie stylu przez znaczniki <span> i <div>. Oba sposoby są podobne. Różnią się tylko tym, że <div> jest bardziej elastyczny. Nie są to popularne metody. Przykład z <span>: <!-- prolog i sekcja head --> <body> <!-- 1 możliwość --> <span class="klasa"> <dl> <dt>to jest lista</dt> <dd>jeden</dd> <dd>dwa</dd> <dd>trzy</dd> </dl> </span> <!-- 2 możliwość --> <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 --> Przykład z <div>: <!-- prolog i sekcja head --> <body> <!-- 1 możliwość --> <div class="klasa"> <table summary="przykład" border="1"> <tbody> <tr> <td>zz</td> <td>zz</td> </tr> </tbody> </table> </div> <div style="font-size: 10pt; text-align: right"> <table summary="przykład" border="1"> <tbody> <tr> <td>vv</td>
<td>vv</td> </tr> </tbody> </table> </div> </body> <!-- dalej koniec dokumentu --> Zobasz też 'Inne ważne zasady' i 'Prolog'. Inne ważne zasady Są tu wymienione zasady XHTML, które zmieniły się w stosunku do HTML. Są to zasady, które dotyczą bardziej skomplikowanych rzeczy niż wymienione w temacie 'Informacje ogólne'. Symbol '&' Jeśli w adresie będzie symbol '&' (szczególnie w skryptach CGI) należy go zastąpić zamiennikiem &. Przykład nie poprawnego zapisu: Poprawny przykład: http://my.site.dom/cgi-bin/myscript.pl?class=guest&name=user. Atrybuty 'id' i 'name' W znacznikach <a> i <map> atrybuty name są zakazane. Teraz należy używać atrybutu id. W specyfikacji XHTML identyfikator # nie odnosi się do name tylko do id. Przykład nie poprawnego zapisu: Poprawny przykład: <a id="poczatek"></a> Przykład wywołania: <a href="#poczatek>xyz</a> Atrybuty 'id' i 'class'
Atrybuty id i class są ściśle związane ze stylami (patrz: 'Style w XHTML'). W XHTML odwołanie się do '#' możliwe jest tylko przez atrybut id (identyfikator ID) a odwołanie się do '.' możliwe 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 wyglądają tak samo jak w HTML: zaczynają się <!-- a kończą się -->. Przykład: <!-- treść komentarza --> Skrypty i style XHTML zaleca się stosowanie innego zapisu stylów i skryptów niż w HTML. Związane jest to z sekcją CDATA. Przykład: <script type="text/javascript"> <![CDATA[ treść skryptu ]]> </script> lub <style type="text/css"> <![CDATA[ treść stylów ]]> </style> Zapis ten ma ujednolicić zapis elementów nie związanych z językami opartymi na znacznikach (np. XHTML). Zapis ten ma także "czuwać" nad poprawnym rozwijaniem się stylów, skryptów itp. Oczywiście ten zapis został zaczerpnięty z XML. Wszystko co znajduje się w sekcji CDATA jest ignorowane przez paser.
Niestety dzisiejsze przeglądarki nie interpretują tak zapisanych stylów i skryptów wewnątrz dokumentu XHTML, można więc przejściowo zasadę tą pominąć. Rozszerzenie dokumentu XHTML W XHTML zezwala się na korzystanie z rozszerzenia *.html, jednak poprawnym rozszerzeniem jest *.xhtml. W przyszłości planuje się korzystanie tylko z rozszerzenia *.xhtml. Należy zaznaczyć, że dokumenty z takim roszerzeniem mają typ MINE: application/xhtml+xml a nie text/html. Niektóre przeglądarki mają problem poprawnym wyświetlaniem plików *.xhtml. Skrypty PHP W specyfikacji XHTML nie ma mowy o skryptach takich jak PHP ale jeśli nadejdzie potrzeba ich użycia to należy posłużyć się instrukcjami przetwarzania (są one zaczerpnięte bezpośrednio ze specyfikacji XML). Proszę zwrócić uwagę na to, że po <? występuje nazwa (<?php). Jest to bardzo ważne, ponieważ nazwa pozwala zidentyfikować dalszy ciąg znaków. W HTML można spotkać treść skryptów w środku znaczników takich jak <??>, <% %>. Wszystkie te oznaczenia w XHTML są nie prawidłowe! Nie zaleca się też stosowania <script language="php"></script>. Poprawny przykład: <?php // treść skryptu?> Na dzień dzisiejszy we wstawianiu skryptów zaleca się stosowanie sekcji CDATA jednak zapis powyżej jednak jest bardziej powszechny. Łatwo zauważyć, że deklaracja zgodności z XML jest także instrukcją przetwarzania (patrz: 'Prolog i składnia'). Animacje Flash a XHTML Na większości stronach animacje Flash są wstawiane niepoprawnie. Nawet programy generujące kod HTML robią to często niepoprawnie. Prawidłowe wstawienie Flasha do dokumentu XHTML powinno wiązać się tylko z znacznikiem <object>. Używanie znacznika <embed> jest nieprawidłowe, ponieważ taki znacznik nie figuruje w specyfikacji XHTML (nawet nie występuje w specyfikacji HTML). W XHTML 1.1 nie ma możliwości wstawienia jakiegokolwiek obiektu (czyli także Flasha). Warto zwrócić uwagę na SVG, które w najbliższym czasie wyprze Flasha lub przynajmniej będzie stanowić dla niego alternatywę. SVG jest to język oparty na XML, który służy do opisywania figur za pomocą wektorów (czyli obrazek SVG można będzie zmieniać, poprawiać lub nawet tworzyć za pomocą zwykłego edytora tekstowego tak jak XHTML). SVG ma typ MINE: image/svg+xml.
Przykład 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 wzorów matematycznych. Matematycy, fizycy i inni ludzie nauk ścisłych powinni więc korzystać z języka MathML. Język ten jest bardzo podobny do XHTML ponieważ jest oparty na XML. Już teraz niektóre przeglądarki interpretują dostatecznie ten język. MathML i znaki specjalne (patrz: 'Symbole i znaki specjalne') umożliwiają zapisanie niemal każdego działania matematycznego. Przykład 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> Symbole i znaki specjalne Spis niektórych symboli Spis wielkich liter greckich Symbol I II Α Α Α Β Β Β Γ Γ Γ Δ Δ Ε Ε Ε Ζ Ζ Ζ Η Η Η Θ Θ Θ Ι Ι Ι Κ Κ Κ Λ Λ Λ
Spis wielkich liter greckich Symbol I II Μ Μ Μ Ν Ν Ν Ξ Ξ Ξ Ο Ο Ο Π Π Π Ρ Ρ Ρ Σ Σ Σ Τ Τ Τ Υ Υ Υ Φ Φ Φ Χ Χ Χ Ψ Ψ Ψ Ω Ω Ω Spis małych liter greckich Symbol I II α α α β β β γ γ γ δ δ δ ε ε ε ζ ζ ζ η η η θ θ θ ι ι ι κ κ κ λ λ λ µ μ μ ν ν ν ξ ξ ξ ο ο ο π π π ρ ρ ρ ς ς ς σ σ σ τ τ τ υ υ υ
Spis małych liter greckich Symbol I II φ φ φ χ χ χ ψ ψ ψ ω ω ω ϑ ϑ ϑ ϒ ϒ ϒ ϖ ϖ ϖ Spis symboli listowych Symbol I II I ℑ ℑ R ℜ ℜ ℵ ℵ ℵ Strzałki Symbol I II Spis symboli matematycznych
Symbol I II prod sum radic infin and or int sim cong asymp ne equiv le ge Spis niektórych znaków specjalnych Podstawowe znaki Symbol I II " " " & & & < < < > > > ' ' ' Różne znaki Symbol I II Œ Œ Œ œ œ œ Š Š Š š š š Ÿ Ÿ Ÿ
Różne znaki Symbol I II º º º ² ² ² ³ ³ ³ ¼ ¼ ¼ ½ ½ ½ ¾ ¾ ¾ ± ± ± ø ø ø Niestety nie wszystkie znaki powyżej można zobaczyć w przeglądarkach. Np. w Netscape Communicator 4 nie widać żadnych znaków. Basic XHTML Opis języka Basic XHTML jest następcą Compact HTML. Jest to młodszy brat XHTML, za pomocą którego tworzy się mniej skomplikowane strony, podobny jest do WML. Jest jego konkurentem. Basic XHTML przeznaczony jest do takich urządzeń jak: telefony komórkowe telewizory pejdżery systemy nawigacyjne samochodu przenośne 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. Znaczniki Basic XHTML 1. Ogólne:
o body o head o html o title o meta o base o link 2. 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 3. Linku: o a 4. Listy: o dl o dt o dd o ol o ul o li 5. Formularzy: o from o input o label o select o option o textarea 6. Tabel: o caption o table o td o th o tr 7. Obrazu:
o img 8. Obiektu: o object o param Prolog Tak powinien wyglądać prolog: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/tr/xhtml-basic/xhtml-basic10.dtd"> Dokumenty Basic XHTML wyglądają tak samo jak dokumenty XHTML. A oto przykład: <!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>przypładowa strona</title> </head> <body> <h1>oto przykład</h1> </body> </html> Style W specyfikacji Basic XHTML nie ma znacznika <style>. Można tylko używać znacznika <link> do arkusza zewnętrznego. W Bacic XHTML style mogą być przedstawiane znacznikami <div> i <span>. Atrybut stylów jest dozwolony tylko 'class'. Zaleca się deklarowanie atrybutu 'media' by rozpoznać typ urządzenia, do którego dokument jest przeznaczony. Inne ważne zasady Znaczniki <script> i <noscript> są zabronione w specyfikacji tego języka (ze względu na swoje przeznaczenie). Reszta zasad jest tak sam jak w XHTML i jest przedstawiona w całym kursie. Linki i parsery Linki Strony polskie: http://webmaster.helion.pl/kurshtml/
Strony kursu języka HTML Pawła Wimmera. http://www.pajaczek.pl/ Strony najlepszego edytora stron internetowych. Wersja 5.0 Pajączka obsługuje 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 dotyczące XHTML 1.1 - niepełna specyfikacja. http://www.w3.org/tr/xhtml1/ Specyfikacja XHTML 1.0, komplet informacji i wprowadzenie w "świat" XHTML - pełna 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 wyłącznie dla XHTML. Parsery Parsery służą do sprawdzania błędów (czasami też do ich poprawiania). Zachęcam do korzystania z nich, ponieważ nawet najlepszym zdarzają się pomyłki. Parserem do XHTML godnym polecenia jest W3C Validator, który znajduje się pod adresem: http://validator.w3.org/. Możemy także sprawdzić poprawność stylów pod adresem: http://jigsaw.w3.org/css-validator/. Dobrym programem sprawdzającym poprawność dokumentu jest Tidy. Wszystkie informacje dotyczące tego programy znajdują się na http://www.w3.org/people/raggett/tidy/. Gdy strona zostanie sprawdzona i zostaną poprawione błędy dobrym zwyczajem jest umieścić button wskazujący na zgodność z XHTML i CSS (patrz na dół). Copyright 2002 Dominik Tomaszuk Wszystkie prawa zastrzeżone.