Prezentacja programu PowerPoint

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

HTML DOM XHTML – Slajd 3

• DOM obiektowy model dokumentu - wszystko jest

węzłem

• interfejs niezależny od sprzętu i języka

• pozwala modyfikowad strukturę i styl dokumentów

HTML DOM

- Model i struktura dokumentu

HTML DOM XHTML – Slajd 4

• document node, element node, text nodes,

• attribute node, comment nodes

HTML DOM

– Struktura: zasady

HTML DOM XHTML – Slajd 5

• wierzchołek drzewa – korzeo

• jeden węzeł – jeden rodzic, nieograniczona liczba dzieci

• rodzeostwo – węzły tego samego rodzica

• liśd – węzeł bez dzieci

HTML DOM

– Właściwości węzłów

HTML DOM XHTML – Slajd 6

• atrybuty (różne dla konkretnych węzłów np. dla a - linku -

href, target, charset)

• nazwa

• rodzaj - 1 - element, 2 - tekst

• relacje - dzieci, rodzice, rodzeostwo

HTML DOM

– Metody

HTML DOM XHTML – Slajd 7

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

HTML DOM XHTML – Slajd 8

InnerHTML

<html>

<body>

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

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

tekst!";

</script>

</body>

</html>

HTML DOM

– Zastosowanie

HTML DOM XHTML – Slajd 9

Eventy

<html>

<body>

<input type="button„

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

value=„Zmienia kolor tła" />

</body>

</html>

HTML DOM

– Zastosowanie

HTML DOM XHTML – Slajd 10

Funkcje

<head>

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

HTML DOM XHTML – Slajd 11

• Język - WWW

• W3C

• XHTML = ( HTML + XML )

• XHTML/1.0 = HTML 4.01

• Poprawnośd:

- Składniowa

- Strukturalna

XML

– Informacje wstępne

HTML DOM XHTML – Slajd 12

• Ładny

• Węzły

• Nie wyświetla 

• Przechowuje 

- współdzielenie

- edytowanie

XHTML vs HTML (0)

HTML DOM XHTML – Slajd 13

• Deklaracja przestrzeni nazw

• Deklaracja kodowania (opcjonalne)

<?xml version="1.0" encoding="UTF-8"?>

XHTML vs HTML (1)

HTML DOM XHTML – Slajd 14

• 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.

XHTML vs HTML (2)

HTML DOM XHTML – Slajd 15

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

XHTML vs HTML (3)

HTML DOM XHTML – Slajd 16

• Jeden główny węzeł

<html>

</html>

• ”Atrybuty”

Poprawnie: <td rowspan="3">

Niepoprawnie: <td rowspan=3>

XHTML vs HTML (4)

HTML DOM XHTML – Slajd 17

• Atrybuty – nie wolno minimalizowad!

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

HTML DOM XHTML – Slajd 18

• Definiuje:

• Strukturę

• Składnię

• Elementy

• Atrybuty

• Wartości

XHTML - przykład

HTML DOM XHTML – Slajd 19

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