kacala przywarty trawinski html dom xhtml cel i charakterystyka

background image

HTML DOM, XHTML – cel, charakterystyka




Mariusz Kacała
Łukasz Przywarty
Grzegorz Trawiński

HTML DOM XHTML

background image

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

background image

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

background image

HTML DOM

- Model i struktura dokumentu

HTML DOM XHTML – Slajd 4

• document node, element node, text nodes,

• attribute node, comment nodes

background image

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

background image

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

background image

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

background image

HTML DOM

– Zastosowanie

HTML DOM XHTML – Slajd 8

InnerHTML

<html>

<body>

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

<script type="text/javascript">

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

tekst!";

</script>

</body>

</html>

background image

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>

background image

HTML DOM

– Zastosowanie

HTML DOM XHTML – Slajd 10

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>

background image

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

background image

XML

– Informacje wstępne

HTML DOM XHTML – Slajd 12

• Ładny

• Węzły

• Nie wyświetla 

• Przechowuje 

- współdzielenie

- edytowanie

background image

XHTML vs HTML (0)

HTML DOM XHTML – Slajd 13

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

background image

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.

background image

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>

background image

XHTML vs HTML (3)

HTML DOM XHTML – Slajd 16

• Jeden główny węzeł

<html>

<head> ... </head>

<body> ... </body>

</html>

• ”Atrybuty”

Poprawnie: <td rowspan="3">

Niepoprawnie: <td rowspan=3>

background image

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

background image

DTD -

Document Type Definition

HTML DOM XHTML – Slajd 18

• Definiuje:

• Strukturę

• Składnię

• Elementy

• Atrybuty

• Wartości

background image

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>

background image

HTML DOM, XHTML


Dziękujemy za uwagę

HTML DOM XHTML


Wyszukiwarka

Podobne podstrony:
HTML czy XHTML cz 107 2006
ABC jezyka html i xhtml
CWICZ48, 1.Cel ˙wiczenia : Zbadanie charakterystyki o˙wietleniowej fotoopornika,
html, xhtml i css biblia helion UJ4IXAMWV6CBHRXSIBUKLUYXZASBBYAQMBA3XRI
charakterystyka ene dom dziecka
Badanie statystycznego charakteru rozpadu promieniotwórczego, Promieniowanie metodą absorbcyjną, Cel
FIZ-47, 1.Cel ˙wiczenia: Wyznaczenie charakterystyki o˙wietleniowej fotoogniwa oraz zbadanie
HTML, XHTML i CSS Biblia Wydanie V
ABC języka HTML i XHTML
Po prostu HTML, XHTML i CSS Wydanie VI
HTML XHTML i CSS Biblia Wydanie V hxcbi5
charakterystyka ene dom dziecka
HTML XHTML i CSS Praktyczne projekty Wydanie II htxpp2
ABC jezyka HTML i XHTML
HTML XHTML i CSS Biblia Wydanie IV hxcbi4

więcej podobnych podstron