HTML DOM, XHTML cel, charakterystyka Mariusz Kacała Łukasz Przywarty Grzegorz Trawiński HTML DOM XHTML
Ramowy plan prezentacji Wstęp HTML DOM - Założenia - Model i struktura - Właściwości - Metody i zastosowania XHTML - Extensible HTML - XHTML vs HTML - DTD HTML DOM XHTML Slajd 2 / 20
HTML DOM - Założenia DOM obiektowy model dokumentu - wszystko jest węzłem interfejs niezależny od sprzętu i języka pozwala modyfikować strukturę i styl dokumentów HTML DOM XHTML Slajd 3 / 20
HTML DOM - Model i struktura dokumentu document node, element node, text nodes, attribute node, comment nodes HTML DOM XHTML Slajd 4 / 20
HTML DOM Struktura: zasady wierzchołek drzewa korzeń jeden węzeł jeden rodzic, nieograniczona liczba dzieci rodzeństwo węzły tego samego rodzica liść węzeł bez dzieci HTML DOM XHTML Slajd 5 / 20
HTML DOM Właściwości węzłów atrybuty (różne dla konkretnych węzłów np. dla a - linku - href, target, charset) nazwa rodzaj - 1 - element, 2 - tekst relacje - dzieci, rodzice, rodzeństwo HTML DOM XHTML Slajd 6 / 20
HTML DOM Metody Operacje na węzłach appendchild clonenode removechild Modyfikacja danych deletedata insertdata replacedata Identyfikacja węzłów getelementbyid getelementbyname getelementsbytagname Identyfikacja atrybutów: getattribute getattributenode setattribute HTML DOM XHTML Slajd 7 / 20
HTML DOM Zastosowanie InnerHTML <html> <body> <p id="p1">hello World!</p> <script type="text/javascript"> document.getelementbyid("p1").innerhtml= Nowy tekst!"; </script> </body> </html> HTML DOM XHTML Slajd 8 / 20
HTML DOM Zastosowanie Eventy <html> <body> <input type="button onclick="document.body.bgcolor= blue';" value= Zmienia kolor tła" /> </body> </html> HTML DOM XHTML Slajd 9 / 20
HTML DOM Zastosowanie Funkcje <head> <script type="text/javascript"> function ChangeStyle() { document.getelementbyid("p1").style.color="blue"; document.getelementbyid("p1").style.fontfamily="arial"; } </script> </head> <body> <p id="p1">hello world!</p> <input type="button" onclick="changestyle()" value= Zmiana stylu" /> </body> HTML DOM XHTML Slajd 10 / 20
XHTML Informacje wstępne Język - WWW W3C XHTML = ( HTML + XML ) XHTML/1.0 = HTML 4.01 Poprawność: - Składniowa - Strukturalna HTML DOM XHTML Slajd 11 / 20
XML Informacje wstępne Ładny Węzły Nie wyświetla Przechowuje - współdzielenie - edytowanie HTML DOM XHTML Slajd 12 / 20
XHTML vs HTML (0) Deklaracja przestrzeni nazw <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> Deklaracja kodowania (opcjonalne) <?xml version="1.0" encoding="utf-8"?> HTML DOM XHTML Slajd 13 / 20
XHTML vs HTML (1) Zagnieżdżenie w węzłach Poprawnie: <p>wewnątrz paragrafu jest <em>emfaza</em>.</p> Niepoprawnie: <p>wewnątrz paragrafu jest <em>emfaza.</p></em> Zamykanie znaczników (niepustych) Poprawnie: <p>tutaj jest paragraf.</p><p>tutaj jest następny paragraf.</p> Niepoprawnie: <p>tutaj jest paragraf.<p>tutaj jest następny paragraf. HTML DOM XHTML Slajd 14 / 20
XHTML vs HTML (2) Zamykanie znaczników (pustych) Poprawnie: <br/><br /><hr></hr> Niepoprawnie: <br><hr> Małe litery Poprawnie: <body><p>to jest paragraf</p></body> Niepoprawnie: <BODY><P>To jest paragraf</p></body> HTML DOM XHTML Slajd 15 / 20
XHTML vs HTML (3) Jeden główny węzeł <html> <head>... </head> <body>... </body> </html> Atrybuty Poprawnie: <td rowspan="3"> Niepoprawnie: <td rowspan=3> HTML DOM XHTML Slajd 16 / 20
XHTML vs HTML (4) Atrybuty nie wolno minimalizować! Poprawnie: <dl compact="compact"> Niepoprawnie: <dl compact> Wymagana deklaracja DOCTYPE (DTD) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> HTML DOM XHTML Slajd 17 / 20
DTD - Document Type Definition Definiuje: Strukturę Składnię Elementy Atrybuty Wartości HTML DOM XHTML Slajd 18 / 20
XHTML - przykład <?xml version="1.0" encoding="utf-8"?> <!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" xml:lang="pl"> <head> <title>przykład dokumentu zgodnego z XHTML 1.1</title> </head> <body> <div>to jest przykład.</div> </body> </html> HTML DOM XHTML Slajd 19 / 20
HTML DOM, XHTML Dziękujemy za uwagę HTML DOM XHTML