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
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
HTML DOM - Model i struktura dokumentu document node, element node, text nodes, attribute node, comment nodes HTML DOM XHTML – Slajd 4
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
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
HTML DOM – Metody Operacje na węzłach Modyfikacja danych appendChild cloneNode removeChild Identyfikacja węzłów getElementById getElementByName getElementsByTagName Modyfikacja danych deleteData insertData replaceData Identyfikacja atrybutów: getAttribute getAttributeNode setAttribute HTML DOM XHTML – Slajd 7
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
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
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
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
XML – Informacje wstępne Ładny Węzły Nie wyświetla Przechowuje - współdzielenie - edytowanie HTML DOM XHTML – Slajd 12
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
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
XHTML vs HTML (2) Zamykanie znaczników (pustych) Małe litery 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
XHTML vs HTML (3) Jeden główny węzeł ”Atrybuty” <html> <head> ... </head> <body> ... </body> </html> ”Atrybuty” Poprawnie: <td rowspan="3"> Niepoprawnie: <td rowspan=3> HTML DOM XHTML – Slajd 16
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
DTD - Document Type Definition Definiuje: Strukturę Składnię Elementy Atrybuty Wartości HTML DOM XHTML – Slajd 18
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
HTML DOM, XHTML Dziękujemy za uwagę HTML DOM XHTML