Giáo án Khoa học máy tính 12 Cánh diều bài 4: Trình bày nội dung theo dạng danh sách, bảng biểu

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

a) Danh sách xác định thứ tự

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS thảo luận theo nhóm 2 – 3 HS và trả lời các câu hỏi:

+ Danh sách xác định thứ tự được dùng khi nào?

+ Trong HTML, danh sách xác định thứ tự được tạo như thế nào?

+ Theo em, có thể xác định thứ tự bắt đầu của danh sách bằng một số nguyên khác 1 được không?

- GV yêu cầu HS vận dụng kiến thức thực tiễn, trả lời câu hỏi Hoạt động SGK tr.50:

Hãy nêu một số cách em đã biết để xác định thứ tự các mục được liệt kê trong một danh sách.

- GV tiếp tục đưa ra câu hỏi cho các nhóm thảo luận:

+ Để thay đổi cách xác định thứ tự các mục trong danh sách, em cần thực hiện như thế nào?

Bước 2: HS thực hiện nhiệm vụ học tập: 

- HS tìm hiểu nội dung mục 1a SGK tr.49 – 50 và thảo luận theo nhóm thực hiện nhiệm vụ.

- GV quan sát và trợ giúp HS.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- Đại diện các nhóm HS trả lời.

- Các nhóm khác đưa ra ý kiến nhận xét.

Hướng dẫn trả lời câu hỏi Hoạt động SGK tr.50:

Một số cách để xác định thứ tự các mục được liệt kê trong một danh sách:

+ Sử dụng số nguyên: 1, 2, 3,…

+ Sử dụng chữ cái in thường: a, b, c,...

+ Sử dụng chữ cái in hoa: A, B, C,...

+ Sử dụng chữ số La Mã in thường: i, ii, iii,...

+ Sử dụng chữ số La Mã in hoa: I, II, III,...

Bước 4: Đánh giá kết quả thực hiện: 

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

1. Tạo danh sách

a) Danh sách xác định thứ tự

- Danh sách xác định thứ tự được dùng khi thứ tự xuất hiện các mục của nó là quan trọng.

- HTML sử dụng các thẻ <ol> và <li> để tạo danh sách xác định thứ tự:

Trong đó:

+ Cặp thẻ <ol></ol> dùng để tạo danh sách.

+ Cặp thẻ <li></li> dùng để tạo các mục nội dung trong danh sách.

+ Các mục trong danh sách theo mặc định được xác định thứ tự tăng dần bằng các số nguyên bắt đầu từ 1.

Ví dụ 1: Nội dung phần body của văn bản HTML ở Hình 1a khai báo một danh sách xác định thứ tự gồm ba mục nội dung. Kết quả hiển thị như Hình 1b.

Hình 1a. Ví dụ tạo danh sách 
xác định thứ tự

Hình 1b. Kết quả khi mở văn bản HTML ở Hình 1a bằng trình duyệt web

- Có thể xác định thứ tự bắt đầu của danh sách bằng cách gán một số nguyên khác cho thuộc tính start trong khai báo phần tử ol.

Ví dụ 2: Khai báo <ol start=“5”> xác định thứ tự mục đầu tiên của danh sách là 5.

- Để thay đổi cách xác định thứ tự các mục trong danh sách, cần thiết lập giá trị cho thuộc tính type trong khai báo phần tử ol. 

Bảng 1. Một số giá trị thuộc tính type 
thường dùng

Ví dụ 3: Khai báo <ol type=“A”> xác định thứ tự các mục trong danh sách bằng chữ cái in hoa.

b) Danh sách không xác định thứ tự

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS thảo luận theo nhóm 2 – 3 HS và trả lời các câu hỏi:

+ Danh sách không xác định thứ tự thường được sử dụng khi nào?

+ Trong HTML, danh sách không xác định thứ tự được tạo như thế nào?

- GV lưu ý HS cách thiết lập kí tự đánh dấu các mục của danh sách không xác định thứ tự.

Bước 2: HS thực hiện nhiệm vụ học tập: 

- HS tìm hiểu nội dung mục 1b SGK tr.50 và thảo luận theo nhóm thực hiện nhiệm vụ. 

- GV quan sát và trợ giúp HS.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- Đại diện các nhóm HS trả lời.

- Các nhóm khác đưa ra ý kiến nhận xét.

Bước 4: Đánh giá kết quả thực hiện: 

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

b) Danh sách không xác định thứ tự

- Danh sách không xác định thứ tự thường được sử dụng khi thứ tự xuất hiện các mục của nó là không quan trọng.

- HTML sử dụng các thẻ <ul> và <li> để tạo danh sách không xác định thứ tự:

Trong đó:

+ Cặp thẻ <ul></ul> dùng để tạo danh sách.

+ Cặp thẻ <li></li> dùng để tạo các mục nội dung trong danh sách.

+ Theo mặc định, mỗi mục nội dung khi hiển thị trên màn hình trình duyệt web được bắt đầu bằng một dấu chấm tròn màu đen.

Ví dụ 4: Nội dung phần body của văn bản HTML ở Hình 2a khai báo một danh sách không xác định thứ tự gồm hai mục nội dung. Kết quả hiển thị như Hình 2b.

Hình 2a. Ví dụ tạo danh sách

không xác định thứ tự

Hình 2b. Kết quả khi mở văn bản

HTML ở Hình 2a bằng trình duyệt web

Lưu ý: Cách thiết lập kí tự đánh dấu các mục của danh sách không xác định thứ tự thường được sử dụng thông qua việc thiết lập CSS mà không sử dụng thuộc tính type như danh sách xác định thứ tự.

- GV có thể giới thiệu thêm danh sách mô tả cho HS.

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.

- HTML sử dụng các thẻ <dl>, <dt> và <dd> để tạo danh sách mô tả:

Trong đó:

+ Cặp thẻ <dl></dl> dùng để tạo danh sách.

+ Cặp thẻ <dt></dt> dùng để khai báo tên của các mục.

+ Cặp thẻ <dd></dd> dùng để khai báo giá trị của các mục.

Ví dụ:

Ví dụ tạo danh sách mô tả

Kết quả hiển thị trên trình duyệt web

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS thảo luận theo nhóm 2 – 3 HS và trả lời các câu hỏi:

+ Theo em, khi nào nên sử dụng bảng để trình bày thông tin?

+ Trong HTML, bảng được tạo như thế nào?

+ Dữ liệu trong các ô của bảng thường có dạng gì?

- GV giới thiệu cho HS cách sử dụng phần tử caption để tạo chú thích cho bảng.

Bước 2: HS thực hiện nhiệm vụ học tập: 

- HS tìm hiểu nội dung mục 2 SGK tr.51 và thảo luận theo nhóm thực hiện nhiệm vụ. 

- GV quan sát và trợ giúp HS.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- Đại diện các nhóm HS trả lời.

- Các nhóm khác đưa ra ý kiến nhận xét.

Bước 4: Đánh giá kết quả thực hiện: 

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

- GV tóm tắt bài học:

Trong HTML:

• Phần tử ol dùng để khai báo danh sách xác định thứ tự.

• Phần tử ul dùng để khai báo danh sách không xác định thứ tự.

• Phần tử li dùng để khai báo các mục nội dung trong danh sách.

• Phần tử table, tr, td là các phần tử cơ bản dùng để tạo bảng biểu.

2. Tạo bảng

- Bảng thường được sử dụng để thể hiện thông tin có cấu trúc, dùng cho thống kê, so sánh dữ liệu.

- HTML sử dụng các thẻ <table>, <tr> và <td> để tạo bảng:

Trong đó:

+ Cặp thẻ <table></table> dùng để tạo bảng.

+ Cặp thẻ <tr></tr> dùng để khai báo các hàng trong bảng.

+ Cặp thẻ <td></td> dùng để khai báo các ô dữ liệu của mỗi hàng.

- Dữ liệu trong các ô thường là văn bản, hình ảnh, siêu liên kết,… hoặc cũng có thể bao gồm các bảng khác.

Ví dụ 5: Nội dung phần body của văn bản HTML ở Hình 3a trình bày danh sách cán bộ lớp 12A1 dưới dạng bảng. Kết quả hiển thị như Hình 3b.

Hình 3a. Ví dụ tạo bảng bằng cách kết hợp các phần tử table, tr, td

Hình 3b. Kết quả khi mở văn bản HTML ở Hình 3a bằng trình duyệt web

- Lưu ý: Để bổ sung thông tin chú thích cho bảng, em khai báo phần tử caption. Theo quy định, phần tử caption phải được khai báo ngay sau thẻ mở <table>.