Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

HTML DOM, XHTML – cel, charakterystyka

Podobne prezentacje


Prezentacja na temat: "HTML DOM, XHTML – cel, charakterystyka"— Zapis prezentacji:

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 HTML DOM XHTML – Slajd 8.", "width": "800" }

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

Hello world!

HTML DOM XHTML – Slajd 10.", "width": "800" }

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="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

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 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” "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


Pobierz ppt "HTML DOM, XHTML – cel, charakterystyka"

Podobne prezentacje


Reklamy Google