© 2007 Khoa CNTT – ĐH KHTNGiới thiệu về HTML siêu văn bản biết cách để hiển thị một trang Web.. – Các thẻ tag HTML dùng để định dạng mô tả cách thức các dữ liệu trên hiển thị trên trình
Trang 1Thi ế t k ế & L ậ p trình WEB 2
Khoa Công nghệ thông tin Trường Đại học Khoa học Tự nhiên
Trang 2© 2007 Khoa CNTT – ĐH KHTN
Giới thiệu về HTML
siêu văn bản)
biết cách để hiển thị một trang Web.
– Dữ liệu của trang web (văn bản, âm thanh, hình ảnh )
– Các thẻ (tag) HTML dùng để định dạng mô tả cách thức các dữ liệu trên hiển thị trên trình duyệt.
Trang 3Ph ần đầu trang HTML
N ội dung trang HTML
<title>Tiêu đ ề </title>
N ội dung 1
N ội dung 2
N ội dung 3
Trang 5Danh sách - List
Trang 6© 2007 Khoa CNTT – ĐH KHTN
Trang 7Hình ảnh - Image
Trang 8© 2007 Khoa CNTT – ĐH KHTN
Ví dụ
<img src = "Dowload.jpg" align = top alt = "Download Software" >
Trang 9 myimage.gif
<IMG SRC=“myimage.gif“ ALT=“Chan troi tri thuc”>
Trang 10© 2007 Khoa CNTT – ĐH KHTN
Bảng - Table
Trang 11Bảng – Table (tt)
Trang 12© 2007 Khoa CNTT – ĐH KHTN
Bảng – Table (tt)
Trang 14© 2007 Khoa CNTT – ĐH KHTN
Trang 16© 2007 Khoa CNTT – ĐH KHTN
Trang 20© 2007 Khoa CNTT – ĐH KHTN
Liên kết – Hyperlink
<a href="URL“ target=‘……’> Linked content </a>
Thuộc tính target của tag <a>
– name : tải trang web vào frame có tên NAME
– _blank : tải trang web vào cửa sổ mới
– _parent : tải trang web vào cửa sổ cha của nó
– _self : tải trang web vào chính cửa sổ hiện hành
– _top : tải trang web vào cửa số cao nhất
Ví dụ :
Trang 21Ví dụ Tag Liên kết trang
Thuộc tính TARGET
Kết hợp Liên kết và Hình ảnh
Liên kết download tài liệu
Trang 22© 2007 Khoa CNTT – ĐH KHTN
Tag liên kết trang – Phân loại liên kết
Phân loại :
– Liên kết ngoại (external link)
– Liên kết nội (internal link)
– Liên kết email (email link)
Trang 23Tag liên kết trang – Liên kết ngoại (External Link)
………
………
………
Bài h ọc 2 ………
………
Trang hi ện tại ………
………
………
………
………
………
Trang có đ ịa chỉ xác đ ịnh từ URL
baihoc2.htm
Click chu ột
<a href =“URL”> Text đ ại diện </a>
Trang 24© 2007 Khoa CNTT – ĐH KHTN
Tag liên kết trang – Liên kết nội (Internal Link)
<a name =“TenViTri"> Vi tri bat dau </a>
<a href =“ # TenViTri"> Text đ ại diện </a>
………
………
Text đ ại diện ………
………
………
………
Vi tri bat dau …abcdefgh… 01234567…
.………
N ội dung trang khi chưa liên k ết ………
.………
Text đ ại diện ………
………
………
………
Vi tri bat dau …abcdefgh… 01234567…
.………
.………
.………
.………
.………
N ội dung trang khi
b ấm liên
k ết Click
chu ột
Trang 25Tag liên kết trang – Liên kết Email
<a href =“ mailto:emailAddress ">Liên h ệ Admin</a>
Trang 26© 2007 Khoa CNTT – ĐH KHTN
Tag liên kết trang – Phân loại địa chỉ URL
– Địa chỉ tuyệt đối : Là vị trí tuyệt đối so với Mạng Internet – Địa chỉ tương đối : Là vị trí tương đối so với trang web hiện hành đang chứ liên kết.
<a href=" URL “ target=‘……’> Linked content </a>
M ột số ký hiệu đường dẫn đặc biệt:
Trang 27Ví dụ
file A có link đ ến file B, vậy trong file
A có HTML element:
<a href=“URL”>liên k ết đến B</a>
http://127.0.0.1/demo/Thu muc 1/file B.htm
Trang 29file C có link đ ến file D, vậy trong file
Trang 30© 2007 Khoa CNTT – ĐH KHTN
file D có link đ ến file F, vậy trong file
F có HTML element:
<a href=“URL”>liên k ết đến F</a>
http://127.0.0.1/demo/Thu muc 2/file F.htm
Trang 31file F có link đ ến file E, vậy trong file
F có HTML element:
<a href=“URL”>liên k ết đến E</a>
http://127.0.0.1/demo/Thu muc 1/ Thu muc
1_2/Thu muc 1_2_1/file E.htm
URL =
/demo/Thu muc 1/Thu muc 1_2/
Thu muc 1_2_1/file E.htm
# 127.0.0.1/demo
/Thu muc 1 /Thu muc 1_2/Thu muc1_2_1/
Trang 32© 2007 Khoa CNTT – ĐH KHTN
file E có link đ ến file A ở vị trí xác
Trang 33Bài tập
Trang 34© 2007 Khoa CNTT – ĐH KHTN
liên k ết đến những trang index trong các thư m ục con: Am nhac, Tin hoc, .
Trang 35liên k ết đến vị trí chính xác của nội dung
gi ới thiệu quyển sách tương ứng trong file
details.htm
Trang 36© 2007 Khoa CNTT – ĐH KHTN
