Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Grzegorz Getka. Czym jest XHTML ? Język wykorzystywany do tworzenia stron www Rozszerzalny hipertekstowy język znaczników (Extensible HyperText Markup.

Podobne prezentacje


Prezentacja na temat: "Grzegorz Getka. Czym jest XHTML ? Język wykorzystywany do tworzenia stron www Rozszerzalny hipertekstowy język znaczników (Extensible HyperText Markup."— Zapis prezentacji:

1 Grzegorz Getka

2 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 SGMLHTML HTML 4.01XML XHTML

3 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

4 Składnia języka XHTML (1) Definicja dokumentu DOCTYPE html head title body address

5 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

6 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)

7 Składnia języka XHTML (4) Listy (ul, ol, li, dl, dt, dd)

8 DTD DTD, czyli Document Type Definition Rodzaje DTD: Transitional Strict Frameset

9 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.

10 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 } h1 { color: #000} Nagłówek

11 Przykład użycia CSS w XHTML (1)

12 Przykład uzycia CSS w XHTML (2)

13 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: wewnątrz paragrafu jest emfaza. pem p Niepoprawnie: wewnątrz paragrafu jest emfaza. pempem Poprawnie: tutaj jest paragraf. tutaj jest następny paragraf. p Niepoprawnie: tutaj jest paragraf. tutaj jest następny paragraf.p Poprawnie: td Niepoprawnie: td Poprawnie: dl Niepoprawnie: dl

14 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 hr Niepoprawnie: brhr script script

15 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;.

16 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 applet background body bgcolor table, tr, td, th, body border img, object clear br code applet codebase applet color basefont, font compact dir, dl, menu, ol, ul face basefont, font height iframe, td, th, applet hspace applet, img, object

17 Elementy zdeprecjonowane przez XHTML 1.0 (2) NazwaWystępowanie w znacznikach language script link body name applet noshade hr nowrap td, th object applet prompt isindex size hr, font, basefont start ol target a, area, base, form, link text body type li, ol, ul value li version html vlink body vspace applet, img, object width hr, td, th, applet, pre, iframe

18 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)

19 Jak sprawdzić poprawność kodu ? Sprawdzanie kodu (X)HTML: Poprawność CSS:

20 Respektowanie zaleceń W3C L.p.AdresTechnologiaIlość błędów 1 google.pl brak DTD48 2 nasza-klasa.pl HTML 4.01 Strict0 3 allegro.pl HTML 4.01 Transitional314 4 onet.pl HTML 4.0 Transitional284 5 wp.pl XHTML 1.0 Strict0 6 fotka.pl brak DTD22 7 interia.pl XHTML 1.0 Transitional5 8 grono.net XHTML wrzuta.pl XHTML 1.0 Transitional72 10 o2.pl XHTML 1.0 Transitional58 11 peb.pl XHTML 1.0 Transitional13 12 plemiona.pl XHTML 1.0 Transitional22 13 gazeta.pl HTML 4.01 Transitional21 14 epuls.pl brak DTD16 15 otomoto.pl XHTML 1.0 Transitional17 16 photoblog.pl HTML 4.01 Transitional8 17 fora.pl HTML 4.01 Transitional torrenty.org XHTML 1.0 Transitional pudelek.pl XHTML 1.0 Transitional filmweb.pl XHTML 1.0 Strict344

21 Co po XHTML 1.x ? XHTML 2.0 (Working draft) HTML 5 (Editors 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ą.


Pobierz ppt "Grzegorz Getka. Czym jest XHTML ? Język wykorzystywany do tworzenia stron www Rozszerzalny hipertekstowy język znaczników (Extensible HyperText Markup."

Podobne prezentacje


Reklamy Google