Tài liệu ÔN TẬP VỀ HTML ppt
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.44 MB, 36 trang )
Bài giảng môn học
Thi
Thi
ế
ế
t
t
k
k
ế
ế
&
&
L
L
ậ
ậ
p
p
tr
tr
ì
ì
nh
nh
WEB 2
WEB 2
ÔN T
ÔN T
Ậ
Ậ
P V
P V
Ề
Ề
HTML
HTML
Khoa Công nghệ thông tin
Trường ĐạihọcKhoahọcTự nhiên
Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML
© 2007 Khoa CNTT – ĐH KHTN
Giớithiệuvề HTML
HTML (Hyper Text Markup Language - Ngôn ngữđánh dấu
siêu vănbản)
Là một ngôn ngữ dùng để xây dựng một trang Web.
Chứa các thành phần định dạng để báo cho trình duyệtWeb
biết cách để hiểnt
hị mộttrangWeb.
Một trang web thông thường gồmcó2 thànhphầnchính:
– Dữ liệucủa trang web (vănbản, âm thanh, hình ảnh )
– Các thẻ (tag) HTML dùng để định dạng mô tả cách thứccácdữ
liệutrênhiểnthị trên trình duyệt.
Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML
© 2007 Khoa CNTT – ĐH KHTN
Cấu trúc trang HTML
<html>
</html>
<body>
</body>
<head>
</head>
Bắt đầuvà
Kếtthúccủa
trang HTML
Phần đầu
trang HTML
Nộidung
trang HTML
<title>Tiêu đề </title>
Nộidung 1
Nộidung 2
Nộidung 3
Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML
© 2007 Khoa CNTT – ĐH KHTN
C
C
ấ
ấ
u
u
tr
tr
ú
ú
c
c
1
1
t
t
à
à
i
i
li
li
ệ
ệ
u
u
HTML
HTML
–
–
V
V
í
í
d
d
ụ
ụ
<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<H3>My first HTML document</H3>
</BODY>
</HTML>
Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML
© 2007 Khoa CNTT – ĐH KHTN
Danh sách - List
Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML
© 2007 Khoa CNTT – ĐH KHTN
Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML
© 2007 Khoa CNTT – ĐH KHTN
Hình ảnh - Image
Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML
© 2007 Khoa CNTT – ĐH KHTN
Ví dụ
<img src = "Dowload.jpg" align = top alt = "Download Software">
Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML
© 2007 Khoa CNTT – ĐH KHTN
myimage.gif
<IMG SRC=“myimage.gif“ ALT=“Chan troi tri thuc”>
Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML
© 2007 Khoa CNTT – ĐH KHTN
Bảng - Table
Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML
© 2007 Khoa CNTT – ĐH KHTN
Bảng – Table (tt)
Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML
© 2007 Khoa CNTT – ĐH KHTN
Bảng – Table (tt)
Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML
© 2007 Khoa CNTT – ĐH KHTN
Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML
© 2007 Khoa CNTT – ĐH KHTN
Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML
© 2007 Khoa CNTT – ĐH KHTN
Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML
© 2007 Khoa CNTT – ĐH KHTN
Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML
© 2007 Khoa CNTT – ĐH KHTN
Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML
© 2007 Khoa CNTT – ĐH KHTN
Topleft.png
Topright.png
bottomleft.png
bottomright.png
Top.png
left.png
right.png
Bottom.png
Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML
© 2007 Khoa CNTT – ĐH KHTN
Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML
© 2007 Khoa CNTT – ĐH KHTN
Liên
Liên
k
k
ế
ế
t
t
–
–
Hyperlink
Hyperlink
Cú pháp :
<a href="URL“ target=‘……’> Linked content </a>
Thuộctínhtarget củatag <a>
– name: tải trang web vào frame có tên NAME
– _blank: tải trang web vào cửasổ mới
– _parent: tải trang web vào cửasổ cha củanó
– _self: tải trang web vào chính cửasổ hiện hành
– _top: tải trang web vào cửasố cao nhất
Ví dụ :
Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML
© 2007 Khoa CNTT – ĐH KHTN
Ví dụ Tag Liên kết trang
Thuộc tính TARGET
KếthợpLiênkếtvàHìnhảnh
Liên kết download tài liệu
Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML
© 2007 Khoa CNTT – ĐH KHTN
Tag
Tag
liên
liên
k
k
ế
ế
t
t
trang
trang
–
–
Phân
Phân
lo
lo
ạ
ạ
i
i
liên
liên
k
k
ế
ế
t
t
Phân loại:
– Liên kết ngoại (external link)
– Liên kếtnội (internal link)
– Liên kết email (email link)
Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML
© 2007 Khoa CNTT – ĐH KHTN
Tag
Tag
liên
liên
k
k
ế
ế
t
t
trang
trang
–
–
Liên
Liên
k
k
ế
ế
t
t
ngo
ngo
ạ
ạ
i
i
(External Link)
(External Link)
…………………
…………………
…………………
Bài học2
…………………
…………………
Trang hiệntại
baihoc1.htm
…………………
…………………
…………………
…………………
…………………
…………………
Trang có địachỉ
xác định từ URL
baihoc2.htm
Click
chuột
<a href=“URL”> Text đạidiện </a>
Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML
© 2007 Khoa CNTT – ĐH KHTN
Tag
Tag
liên
liên
k
k
ế
ế
t
t
trang
trang
–
–
Liên
Liên
k
k
ế
ế
t
t
n
n
ộ
ộ
i
i
(Internal Link)
(Internal Link)
<a name=“TenViTri"> Vi tri bat dau </a>
<a href=“#TenViTri"> Text đạidiện </a>
…………………
…………………
Text đạidiện
…………………
…………………
…………………
…………………
Vi tri bat dau
.…abcdefgh…
01234567…
.…………………
Nội
dung
trang
khi
chưa
liên
kết
.…………………
.…………………
Text đạidiện
…………………
…………………
…………………
…………………
Vi tri bat dau
.…abcdefgh…
01234567…
.…………………
.…………………
.…………………
.…………………
.…………………
Nội
dung
trang
khi
bấm
liên
kết
Click
chuột
Thiếtkế & Lập trình WEB 2 – Ôn tậpHTML
© 2007 Khoa CNTT – ĐH KHTN
Tag
Tag
liên
liên
k
k
ế
ế
t
t
trang
trang
–
–
Liên
Liên
k
k
ế
ế
t
t
…………………
…………………
…………………
Liên hệ Admin
…………………
…………………
Click
chuột
<a href=“mailto:emailAddress">Liên hệ Admin</a>
