Xhtml 1.0 Grzegorz Getka
Czym jest XHTML ? Język wykorzystywany do tworzenia stron www Rozszerzalny hipertekstowy język znaczników (Extensible HyperText Markup Language) Jest następcą języka HTML Służy do tworzenia witryn o ogólnym przeznaczeniu SGML HTML HTML 4.01 XML XHTML
Cechy XHTML Zgodność ze specyfikacją XML Możliwość łączenia z innymi językami zgodnymi z XML Do tworzenia stron wg standardu XHTML wystarcza tylko przeglądarka www i lokalny dysk Całkowite rozłączenie treści strony od kodu formatującego Bardzo łatwy do nauczenia Kod strony zgodny ze standardem XHTML jest krótszy i czytelniejszy w stosunku do starych wersji HTML Szybsze ładowanie się strony Poprawne wyświetlanie się stron na telefonach komórkowych
Składnia języka XHTML (1) Definicja dokumentu DOCTYPE html head title body address <!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Strict//EN” „http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd”> <html xmlns=„http://www.w3.org/1999/xhtml” xml:lang=„pl” lang=„pl”> <head> <title></title> <meta http-equiv=„Content-Type” content=„text/html”; charset=utf-8” /> </head> <body> </body> </html> Element DOCTYPE ustala język dokumentu. W znaczniku html możemy wskazać, że treść dokumentu jest napisana w języku polskim oraz wskazać na przestrzeń nazw. Znacznik head określa nagłówek strony. Treść zawieramy pomiędzy znaczniki body. Title, czyli tytuł strony. Pomiędzy znacznikami address zawieramy dane kontaktowe. // Tutaj mamy przykład pustej strony napisanej w XHTML 1.0 Strict. W trzeciej linijce mamy informację, że strona została napisana w języku polskim. W linijce 8 jest ustawione kodowanie na utf-8.
Składnia języka XHTML (2) Dane dodatkowe o dokumencie (meta) Elementy ogólne (div, span) Nagłówki (h1, h2, h3, h4, h5, h6) Zmiany w dokumencie (ins, del) Obrazy i obiekty (img, object, param, map, area) Style (style) Tabele (table, tr, td, th, caption, thead, tfoot, tbody, col, colgroup) Skrypty (script, noscript) Hiperłącza (a, link, base) Formularze (form, input, button, select, option, optgroup, textarea, label, fieldset, legend) Inne (hr, <!-- -->, bdo
Składnia języka XHTML (3) Tekst dokumentu (p, br, pre, q, blockquote, sub, sup, em, strong, dfn, code, samp, kbd, var, cite, abbr, acronym)
Składnia języka XHTML (4) Listy (ul, ol, li, dl, dt, dd)
DTD DTD, czyli Document Type Definition Rodzaje DTD: Transitional Strict Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
CSS (1) Kaskadowe arkusze stylów - Cascading Style Sheets CSS to język opisujący jak ma być wyświetlony dany element lub cała strona www CSS został stworzony po to, by oddzielić warstwę prezentacji od struktury dokumentu Z jednego arkusza stylów może korzystać wiele stron Dzięki CSS można m.in. ustawić rodzaj i kolor czcionki, obramowanie, wysokość, szerokość , marginesy wewnętrzne i zewnętrzne, sformatować wygląd łączy, obrazków, nagłówków, list, sekcji body , ustalić układ strony itd.
<h1 style=„color: #333”>Nagłówek</h1> CSS (2) Składnia arkuszy Przykład: Stosowanie arkuszy w dokumencie Poprzez plik zewnętrzny Poprzez nagłówek dokumentu Jako atrybut selektor { właściwość: wartość; inna-właściwość: inna-wartość } h1 { font-size: 24px; font-family: verdana; color: #000; margin: 0px } <link rel="stylesheet" href=„style.css" /> <style type="text/css">h1 { color: #000}</style> <h1 style=„color: #333”>Nagłówek</h1>
Przykład użycia CSS w XHTML (1)
Przykład uzycia CSS w XHTML (2)
Różnice z HTML 4 (1) Znaczniki należy zamykać obowiązkowo w kolejności odwrotnej do ich otwierania: Nazwy znaczników i atrybutów obowiązkowo muszą być pisane małymi literami. Dla elementów niepustych znaczniki zamykające są obowiązkowe: Wartości atrybutów muszą być zawsze ujęte w cudzysłowy: Nie można minimalizować atrybutów logicznych: Poprawnie: <p>wewnątrz paragrafu jest <em>emfaza</em>.</p> Niepoprawnie: <p>wewnątrz paragrafu jest <em>emfaza.</p></em> Poprawnie: <p>tutaj jest paragraf.</p><p>tutaj jest następny paragraf.</p> Niepoprawnie: <p>tutaj jest paragraf.<p>tutaj jest następny paragraf. Poprawnie: <td rowspan="3"> Niepoprawnie: <td rowspan=3> Poprawnie: <dl compact="compact"> Niepoprawnie: <dl compact>
Różnice z HTML 4 (2) Puste elementy muszą mieć znacznik zamykający albo ich znacznik otwierający musi się kończyć na />: Skrypty osadzone i wewnętrzne arkusze stylów (element style) należy wstawiać w następujący sposób: Nie powinno się zagnieżdzać niektórych znaczników: „a” nie może zawierać innych elementów a. „pre” nie może zawierać elementów: img, object, big, small, sub, sup. „button” nie może zawierać elementów: input, select, textarea, label, button, form, fieldset, iframe, isindex. „label” nie może zawierać innych elementów label. „form” nie może zawierać innych elementów form. Poprawnie: <br/><br /><hr></hr> Niepoprawnie: <br><hr> <script type="text/javascript"> <![CDATA[ ...treść skryptu ]]> </script>
Różnice z HTML 4 (3) Atrybut name dla znaczników a, applet, form, frame, iframe, img, map jest zdeprecjonowany. Należy stosować zamiast niego atrybut id. Wartości atrybutów domyślnych są zawsze definiowane małymi literami. Na przykład jeśli nie podamy jawnie atrybutu type dla znacznika input, zostanie dla niego przyjęta wartość type="text", a nie type="TEXT". Znaki specjalne (tzw. encje) w języku HTML można zapisywać używając wartości szesnastkowych (HEX), np.: &#Xnn; lub &#xnn;, gdzie "nn" to liczba szesnastkowa. XHTML pozwala tylko na drugą wersję, tzn. &#xnn;.
Elementy zdeprecjonowane przez XHTML 1.0 (1) Nazwa Występowanie w znacznikach align caption, applet, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p alink body alt applet archive background bgcolor table, tr, td, th, body border img, object clear br code codebase color basefont, font compact dir, dl, menu, ol, ul face height iframe, td, th, applet hspace applet, img, object
Elementy zdeprecjonowane przez XHTML 1.0 (2) Nazwa Występowanie w znacznikach language script link body name applet noshade hr nowrap td, th object prompt isindex size hr, font, basefont start ol target a, area, base, form, link text type li, ol, ul value li version html vlink vspace applet, img, object width hr, td, th, applet, pre, iframe
Tabele czy warstwy ? Tabele mieszają treść i warstwę prezentacyjną Strony są niepotrzebnie duże Zmiana wyglądu strony jest niezwykle pracochłonna (i tym samym droga) Również trudne (i kosztowne) jest utrzymanie spójnego wyglądu stron w całej witrynie Strony oparte o tabelki są o wiele trudniejsze w odbiorze dla osób niepełnosprawnych albo korzystających z sieci za pomocą urządzeń przenośnych — telefonów komórkowych czy organizerów (PDA)
Jak sprawdzić poprawność kodu ? Sprawdzanie kodu (X)HTML: Poprawność CSS: http://validator.w3.org http://jigsaw.w3.org/css-validator
Respektowanie zaleceń W3C L.p. Adres Technologia Ilość błędów 1 google.pl brak DTD 48 2 nasza-klasa.pl HTML 4.01 Strict 3 allegro.pl HTML 4.01 Transitional 314 4 onet.pl HTML 4.0 Transitional 284 5 wp.pl XHTML 1.0 Strict 6 fotka.pl 22 7 interia.pl XHTML 1.0 Transitional 8 grono.net XHTML 1.1 9 wrzuta.pl 72 10 o2.pl 58 11 peb.pl 13 12 plemiona.pl gazeta.pl 21 14 epuls.pl 16 15 otomoto.pl 17 photoblog.pl fora.pl 179 18 torrenty.org 126 19 pudelek.pl 407 20 filmweb.pl 344
Co po XHTML 1.x ? XHTML 2.0 (Working draft) HTML 5 (Editor’s draft) HTML 5 to konkurencyjna specyfikacja w stosunku do specyfikacji XHTML 2, której rozwój został de facto porzucony - wsparcie wszystkich środowisk i producentów przeglądarek ukierunkowane jest na HTML 5, XHTML 2 praktycznie nie ma poparcia. Główna różnica pomiędzy HTML 5 a XHTML 2 polega na tym, że HTML 5 jest pisane z myślą o kompatybilności wstecznej, podczas gdy XHTML 2 zrywało z kompatybilnością. http://www.w3.org/TR/xhtml2/ http://www.w3.org/html/wg/html5/