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

2

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

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

NỘI DUNG BÀI HỌC
1

Tạo danh sách

2

Thiết lập bảng

3

Thực hành tạo
danh sách và bảng

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ư thế nào?

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ị bắt đầu:
• type: xác định kiểu đánh số: "1", "A", "a", "I" và "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ự, dùng cặp thẻ

.
 Để chọn kí tự đầu dòng, ta thiết lập giá trị của đặc tính liststyle-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
 Danh sách mô tả được dùng để
làm gì?
 Trong HTML5, danh sách mô tả
được tạo như thế nào?

b) Danh sách mô 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ô tả
 Ví dụ:

 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 tương ứng).

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, đặt
thuộc tính type="a".

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à

.

2
THIẾT LẬP BẢNG

Hoạt động 2: Lựa chọn định dạng phù hợp nhất
Trong Hội chợ ẩm thực ở trường, lớp 12E dự định bán
một số món, các bạn muốn đăng trên trang web của
lớp các thông tin: món ăn, đơn giá, số lượng và tổng số
tiền. Theo em, các bạn nên dùng dạng biểu diễn nào:
danh sách, danh sách mô tả hay bảng. Tại sao?
Giúp tổ chức thông tin khoa học, dễ dàng so sánh
các mục và chi tiết của từng món ăn.

2. THIẾT LẬP BẢNG
Thảo luận nhóm đôi
 Phần tử bảng được dùng khi nào?
 Bảng có cấu trúc như thế nào?
 Trong HTML5, bảng được tạo như
thế nào?
 Có thể định dạng bảng bằng
những thuộc tính nào?

2. THIẾT LẬP BẢNG
 Phần tử bảng được dùng khi cần thêm dữ liệu có thể sắp xếp dưới
dạng hàng và cột vào trang web.
 Bảng được tạo từ các hàng, mỗi hàng gồm các ô dữ liệu. Hàng đầu
tiên có thể là hàng tiêu đề.
 Trong HTML5, các thành phần của bảng lần lượt được định nghĩa
bởi các thẻ:
 - tạo bảng.

 - tạo hàng.



, ngay sau
thẻ và trước thẻ đầu tiên.
• Ví dụ:

2. THIẾT LẬP BẢNG
•

Tạo khung bảng: sử dụng thuộc tính con border của thuộc tính
style có giá trị là một bộ ba thuộc tính nhỏ hơn sau:

•

Trong đó:

 Ba thuộc tính cách nhau bởi dấu cách.
 Hai thuộc tính đầu là bắt buộc.
 Thuộc tính kiểu viền có thể nhận một trong bốn giá trị (solid,
dotted, double, none), thuộc tính màu viền mặc định là màu
đen và có thể bỏ qua.

2. THIẾT LẬP BẢNG
• Điều chỉnh kích thước: sử dụng thuộc tính con width
và height của thuộc tính style. Kích thước được đặt có
thể là theo tỉ lệ với khối bao ngoài đối tượng (%) hoặc
theo số điểm ảnh (px).
• Lưu ý: Không nên sử dụng kích thước theo px do các
thiết bị hiển thị có sự khác nhau về kích thước và số
điểm ảnh có thể dẫn đến bảng không hiển thị đúng
như mong đợi.

2. THIẾT LẬP BẢNG
• Ví dụ:

Hình 9.5. Ví dụ thuộc tính của bảng

2. THIẾT LẬP BẢNG
• Gộp ô: sử dụng thuộc tính rowspan (cho hàng) và
colspan (cho cột). Cách thực hiện (tương tự đối với
cột, sử dụng thuộc tính colspan):
 Thêm rowspan="số_hàng_muốn ghép" cho phần tử
của bảng.

KẾT LUẬN
Phần tử bảng dùng để biểu diễn dữ
liệu có cấu trúc dạng bảng. Phần tử
bảng được tạo bởi các thẻ chính là

hoặc	thuộc hàng đầu tiên cần ghép.  Đối với các hàng tiếp theo: Bỏ qua cặp thẻ	hoặc	tại vị trí tương ứng (nếu bước trên đặt rowspan="3" thì bỏ qua hai hàng tiếp theo). 2. THIẾT LẬP BẢNG • Ví dụ: Hình 9.6. Ví dụ gộp hàng và cột của bảng Câu hỏi củng cố SGK tr.55 Bảng trong ví dụ trên Hình 9.6 có nhược điểm gì? Cần làm thế nào để giải quyết nhược điểm đó? Trả lời  Nhược điểm: không được định dạng thêm, biên cột sát vào chữ → tổng thể khó nhìn, các cột không đều.  Cách cải tiến: • Thêm độ rộng của bảng, cột, ô. Ví dụ: style="width:80%",... • Đổi kiểu viền cho bảng. Ví dụ: style="border: 1px solid green" sẽ xác định viền cho bảng, cho từng ô là 1 pixel với màu xanh. Nếu muốn đặt viền cho từng ô, cần đặt cụm thuộc tính trong từng cặp	...

, ,

và

; trình bày bảng bằng thuộc tính style. 3 THỰC HÀNH TẠO DANH SÁCH VÀ BẢNG 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. Nhiệm vụ 1: Tạo danh sách  Bước 1: Xác định thành phần của văn bản: • Một phần tử tiêu đề. • Một phần tử danh sách lồng nhau.  Bước 2: Tạo tiêu đều bằng cặp thẻ ... .  Bước 3: Tạo danh sách không có thứ tự. Nhiệm vụ 1: Tạo danh sách  Bước 4: Tạo mục THỂ THAO, với phần mã được thêm vào giữa cặp thẻ ở dòng 2 là định nghĩa của một danh sách có thứ tự.  Lưu ý: Mục thứ tư của danh sách này là một danh sách có thứ tự, kiểu đánh số type="a".  Bước 5: Làm tương tự với mục NGHỆ THUẬT để hoàn thiện danh sách.   ↓   ↓ Gửi ý kiến Hãy thử nhiều lựa chọn khác Bài 1 Làm quen với Trí tuệ nhân tạo BÀI 9 TẠO DANH SÁCH VÀ BẢNG(T1) Giáo án tích hợp AI Tin học 12 ... dạng văn bản Giáo án tích hợp AI Tin học 12 ... Tạo liên kết Tin học 12, liên hệ nhận trọn bộ Tin 12 KNTT. Bài 1 Làm quen với ... tuệ nhân tạo Còn nữa... ©2008-2017 Thư viện trực tuyến ViOLET Đơn vị chủ quản: Công ty Cổ phần Mạng giáo dục Bạch Kim - ĐT: 04.66745632 Giấy phép mạng xã hội số 16/GXN-TTĐT cấp ngày 13 tháng 2 năm 2012

- tạo các ô dữ liệu. 
- tạo ô tiêu đề. 2. THIẾT LẬP BẢNG  Ví dụ: Bảng trong Hình 9.4 có thể được định dạng thêm để đẹp và dễ đọc hơn bằng cách chỉnh các thuộc tính của bảng. 2. THIẾT LẬP BẢNG • Thêm tiêu đề: sử dụng thẻ