Bài giảng Lập trình web - Chương 2: Dynamic HTML

Khoa Công Ngh Thông Tin
Trư ng i H c C n Thơ

Dynamic HTML

Thanh Ngh
dtnghi@cit.ctu.edu.vn

C n Thơ
10-11-2005

N i dung
Gi i thi u
Cascading Style Sheets (DHTML CSS)
Document Object Model (DHTML DOM)
S ki n (DHTML events)

Printed with FinePrint trial version - purchase at www.fineprint.com

2

Gi i thi u
Cascading Style Sheets (DHTML CSS)
Document Object Model (DHTML DOM)
S ki n (DHTML events)

3

Gi i thi u v DHTML
DHTML là gì ?
Không là chu n nh nghĩa b i W3C mà do các nhà cung c p
trình duy t Web h tr cho chu n 4.x
DHTML k t h p nhi u công ngh
h tr thi t k trang Web
Ngư i s d ng có th nh d ng ư c s hi n th c a các thành
ph n trong c a s browser
HTML 4.0 tách r i vi c trình bày tài li u ra kh i c u trúc c a nó

Printed with FinePrint trial version - purchase at www.fineprint.com

4

Gi i thi u v DHTML
CSS
Dùng
ng style và layout c a các tài li u HTML
nh d ng ch 1 l n cho m i thành ph n c a trang HTML, sau ó
ta có th áp d ng ng d ng này cho các trang khác
Ch c n thay i ng d ng, t t c các thành ph n khác u t
ng ư c c p nh t theo

DOM
nh nghĩa t p h p c a nh ng i tư ng cho trang HTML thông
qua ó ta có th truy c p và khai thác các i tư ng
W3C Document Object Model (DOM) : cho phép chương trình
và các scripts truy c p m t cách ng, c p nh t n i dung, c u trúc
và nh d ng c a các tài li u HTML
Javascript có th i u khi n ư c t t c các ph n t c a trang
HTML
5

Gi i thi u v DHTML

Printed with FinePrint trial version - purchase at www.fineprint.com

6

Gi i thi u
Cascading Style Sheets (DHTML CSS)
Document Object Model (DHTML DOM)
S ki n (DHTML events)

7

DHTML CSS
CSS

nh v trí hi n th

position:relative
position:absolute
Các thu c tính : left, top, visibility, z-index
Ví d 1 :
div
{
position:relative;
left:10;
}

Printed with FinePrint trial version - purchase at www.fineprint.com

8

DHTML CSS
CSS

nh v trí hi n th

Ví d 2 :
div
{
position:absolute;
left:10;
}

9

DHTML CSS

Printed with FinePrint trial version - purchase at www.fineprint.com

10