1 / 20

HTML DOM, XHTML – cel, charakterystyka Mariusz Kacała Łukasz Przywarty Grzegorz Trawiński

HTML DOM, XHTML – cel, charakterystyka Mariusz Kacała Łukasz Przywarty Grzegorz Trawiński. 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 - Założenia.

dolph
Download Presentation

HTML DOM, XHTML – cel, charakterystyka Mariusz Kacała Łukasz Przywarty Grzegorz Trawiński

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 obiektowymodel 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 • documentnode, elementnode, textnodes, • attributenode, commentnodes 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 - 1 - element, 2 - tekst • relacje- dzieci, rodzice, rodzeństwo HTML DOM XHTML – Slajd 6

  7. HTML DOM – Metody • Operacje na węzłach • 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> <scripttype="text/javascript">document.getElementById("p1").innerHTML=„Nowy tekst!"; </script> </body></html> HTML DOM XHTML – Slajd 8

  9. HTML DOM – Zastosowanie Eventy <html> <body><inputtype="button„ onclick="document.body.bgColor=‚blue';"value=„Zmienia kolor tła" /> </body></html> HTML DOM XHTML – Slajd 9

  10. HTML DOM – Zastosowanie Funkcje <head> <scripttype="text/javascript"> functionChangeStyle() { document.getElementById("p1").style.color="blue"; document.getElementById("p1").style.fontFamily="Arial"; } </script> </head> <body> <p id="p1">Hello world!</p> <inputtype="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="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) 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ł • <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 - DocumentTypeDefinition • 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"> <htmlxmlns="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

More Related