HTML DOM, XHTML cel, charakterystyka

HTML
DOWNLOAD

Wielkość: px

Rozpocząć pokaz od strony:

Download "HTML DOM, XHTML cel, charakterystyka"

Damian Stefaniak
7 lat temu
Przeglądów:

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 / 20

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 / 20

4 HTML DOM - Model i struktura dokumentu document node, element node, text nodes, attribute node, comment nodes HTML DOM XHTML Slajd 4 / 20

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 / 20

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 / 20

7 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

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 / 20

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 / 20

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 / 20

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 / 20

12 XML Informacje wstępne Ładny Węzły Nie wyświetla Przechowuje - współdzielenie - edytowanie HTML DOM XHTML Slajd 12 / 20

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 / 20

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 / 20

15 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

16 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

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 / 20

18 DTD - Document Type Definition Definiuje: Strukturę Składnię Elementy Atrybuty Wartości HTML DOM XHTML Slajd 18 / 20

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

20 HTML DOM, XHTML Dziękujemy za uwagę HTML DOM XHTML

Podobne dokumenty

Podstawy (X)HTML i CSS

Podstawy (X)HTML i CSS Inżynierskie podejście do budowania stron WWW momat@man.poznan.pl 2005-04-11 1 Hyper Text Markup Language Standardy W3C Przegląd znaczników Przegląd znaczników XHTML 2 Cascading Style Sheets Łączenie z