CHÀO ĐÓN CÁC EM
ĐẾN BUỔI HỌC MỚI!

KHỞI ĐỘNG
So sánh Hình 1 và Hình 2, em hãy chỉ ra
các điểm khác biệt trên 2 hình? Việc trình bày
văn bản như Hình 2 có ưu điểm gì?

1

Việc trình bày như Hình 2 giúp văn
Trang web gồm các
bản
Trang web được định
đoạn văn bản viết dàn
sử hơn
dụng
danh
rõ ràng, dễ nhìn vàdạng
khoacó
học
Hình

2

BÀI 9: TẠO
DANH SÁCH,
BẢNG

NỘI DUNG BÀI HỌC
1
2
3

Tạo danh
sách
Thiết lập
bảng
Thực hành tạo
danh sách và

1
TẠO DANH SÁCH

Hoạt động 1: Nhận biết phần tử danh
sách
Em hãy quan sát Hình 8.3 và nhận xét
xem có điểm nào có thể cải tiến về mặt
trình bày không.
Có thể trình bày theo
kiểu danh sách để văn
bản khoa học hơn.

Hình 8.3. Đoạn văn bản cần trình bày bằng HTML

THẢO LUẬN NHÓM

 Trong danh sách có hoặc
không có thứ tự, các mục được
hiển thị như thế nào?
 Trong HTML5, danh sách có
thứ tự được tạo như thế nào?
 Trong HTML5, danh sách
không có thứ tự được tạo như

a) Danh sách có hoặc không có thứ tự

 Trong danh sách, các mục được
hiển thị tuần tự, kí tự đầu dòng
có thể là một số, chữ, dấu, kí
hiệu hoặc hình ảnh.
 Cấu trúc của
đoạn
mã
HTML
tạo
danh sách như
sau:

a) Danh sách có hoặc không có thứ tự

 Để tạo danh sách có thứ tự, dùng

cặp

.
thẻ chọn kiểu đánh thứ tự và giá trị
 Để
• type: xác định kiểu đánh số: "1", "A", "a",
bắtvàđầu:
"I"
"i".
• start: xác định giá trị bắt đầu đánh số,
nhận giá trị là các số nguyên.

a) Danh sách có hoặc không có thứ tự

 Để tạo danh sách không có thứ tự,

cặp thẻ
dùng
Để chọn kí tự đầu dòng, ta thiết lập giá
trị của đặc tính list-style-type trong
thuộc tính style bằng một trong 4 giá
trị disc, circle, square và none.

b) Danh sách mô
tả

Thảo luận nhóm
đôi sách mô tả được
 Danh
dùng để làm gì?

 Trong HTML5, danh
sách mô tả được tạo
như thế nào?

b) Danh sách
mô sách mô tả
b) Danh
tả

 Danh sách mô tả dùng để liệt kê các mục
kèm với mô tả cho từng mục.
 Để tạo danh sách mô tả, dùng ba thẻ

,

và

:

b) Danh sách
mô sách mô tả
b) Danh
 Ví dụ:

tả

 Lưu ý: Có thể tạo ra các danh sách lồng

nhau bằng cách để một danh sách là một
mục của một danh sách khác (đặt danh
sách đó bên trong cụm thẻ

của mục

Câu hỏi củng cố SGK tr.53

Làm thế nào để tạo một
danh sách lồng nhau, danh
sách mức 1 đánh số dạng 1,
2, 3,... và danh sách mức 2
đánh số dạng a, b, c?

 Sử dụng thẻ

để tạo hai
danh sách lồng nhau (cả danh
sách bên ngoài và bên trong
đều tạo bằng• thẻ
Với
):
thẻ
ngoài,
đặt
thuộc
tính
type="1".
• Với thẻ
trong,

KẾT LUẬN

Trong HTML, ta có thể
định nghĩa các kiểu
danh sách có thứ tự,
không có thứ tự và
danh sách mô tả bằng
các thẻ
,
và

LUYỆN TẬP

Nhiệm vụ 1: Tạo danh
sách
Yêu

cầu:

Viết

đoạn

mã

HTML để tạo danh sách các
câu lạc bộ của trường như
Hình 9.7.

Hãy viết đoạn mã HTML tạo danh sách
như sau

• THỂ THAO
• NGHỆ THUẬT

Hãy viết đoạn mã HTML tạo danh sách
như sau

• THỂ THAO

1. Bóng đá
2. Bóng
chuyền
3. Bóng rổ
4. Võ

Hãy viết đoạn mã HTML tạo danh sách
như sau

• NGHỆ THUẬT
1.
2.
3.
4.

Mĩ thuật
Nhiếp ảnh
Âm nhạc
Khiêu vũ

Hãy viết đoạn mã HTML tạo danh sách
như
sauTHAO
• THỂ
1. Bóng đá
2. Bóng chuyền
3. Bóng rổ
4. Võ
a)Karatedo
b)Taekwondo
c)Vovinam
5. Bơi

Hãy viết đoạn mã HTML tạo danh sách
như sau
• NGHỆ THUẬT
1. Mĩ thuật
2. Nhiếp ảnh
3. Âm nhạc
a. Thanh nhạc
b. Piano
c. Violon
4. Khiêu vũ