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

HTML DOM XHTML

Ramowy plan prezentacji

HTML DOM XHTML – Slajd 2

• 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


• 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 - Model i struktura dokumentu


• document node, element node, text nodes,

• attribute node, comment nodes

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 – 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 – 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 – Zastosowanie


InnerHTML<html>

<body>

<p id="p1">Hello World!</p>

<script type="text/javascript">

document.getElementById("p1").innerHTML=„Nowy

tekst!";

</script>

</body>

</html>



Eventy<html>

<body>

<input type="button„

onclick="document.body.bgColor=‚blue';"

value=„Zmienia kolor tła" />

</body>

</html>



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>

XHTML – Informacje wstępne


• Język - WWW

• W3C

• XHTML = ( HTML + XML )

• XHTML/1.0 = HTML 4.01

• Poprawność:

- Składniowa

- Strukturalna

XML – Informacje wstępne


• Ładny

• Węzły

• Nie wyświetla

• Przechowuje

- współdzielenie

- edytowanie

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

XHTML vs HTML (1)


• Zagnieżdżenie w węzłachPoprawnie: <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.

XHTML vs HTML (2)


• Zamykanie znaczników (pustych)Poprawnie: <br/><br /><hr></hr>

Niepoprawnie: <br><hr>

• Małe literyPoprawnie: <body><p>To jest paragraf</p></body>

Niepoprawnie: <BODY><P>To jest paragraf</P></BODY>

XHTML vs HTML (3)


• Jeden główny węzeł<html>

<head> ... </head>

<body> ... </body>

</html>

• ”Atrybuty”Poprawnie: <td rowspan="3">

Niepoprawnie: <td rowspan=3>

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

DTD - Document Type Definition


• Definiuje:

• Strukturę

• Składnię

• Elementy

• Atrybuty

• Wartości

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

Dziękujemy za uwagę

HTML DOM XHTML

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

Documents

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