Pobierz prezentację
Pobieranie prezentacji. Proszę czekać
1
HTML DOM, XHTML – cel, charakterystyka
Mariusz Kacała Łukasz Przywarty Grzegorz Trawiński HTML DOM XHTML
2
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
3
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
4
HTML DOM - Model i struktura dokumentu
document node, element node, text nodes, attribute node, comment nodes HTML DOM XHTML – Slajd 4
5
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
6
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 element, 2 - tekst relacje - dzieci, rodzice, rodzeństwo HTML DOM XHTML – Slajd 6
7
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
8
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
9
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
10
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
11
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
12
XML – Informacje wstępne
Ładny Węzły Nie wyświetla Przechowuje - współdzielenie - edytowanie HTML DOM XHTML – Slajd 12
13
XHTML vs HTML (0) Deklaracja przestrzeni nazw
<html xmlns=" xml:lang="pl" lang="pl"> Deklaracja kodowania (opcjonalne) <?xml version="1.0" encoding="UTF-8"?> HTML DOM XHTML – Slajd 13
14
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
15
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
16
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
17
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" " HTML DOM XHTML – Slajd 17
18
DTD - Document Type Definition
Definiuje: Strukturę Składnię Elementy Atrybuty Wartości HTML DOM XHTML – Slajd 18
19
XHTML - przykład <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN” " <html xmlns=" 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
Podobne prezentacje
