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

KHỞI ĐỘNG

• Theo em, khi trang web chỉ toàn các đoạn văn bản thì cần trình bày thế nào cho dễ nhìn?

1. TẠO DANH SÁCH

Hoạt động 1: Nhận biết phần tử từ danh sách

• Trong HTML có những dạng danh sách nào?
• Để tạo danh sách có thứ tự, ta sẽ dùng cặp thẻ nào? Để chọn kiểu đánh thứ tự và giá trị bắt đầu ta dùng thuộc tính nào?
• Để tạo danh sách không có thứ tự, ta sẽ dùng cặp thẻ nào? Để chọn kí tự đầu dòng ta sẽ thiết lập giá trị như thế nào?
• Danh sách mô tả dùng để làm gì? Để tạo danh sách mô tả em có thể dùng những thẻ gì?
• 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 dạng a, b, c.

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?
• Phần tử bảng được dùng khi nào?
• Trình bày cấu tạo của bảng? Trong ngôn ngữ HTML để xây dựng các thành phần của bảng sẽ sử dụng các thẻ nào?
• Các định dạng cơ bản để có được một bảng đẹp hơn và dễ đọc hơn bao gồm những dạng cơ bản nào?
• 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 đó?

3. THỰC HÀNH TẠO DANH SÁCH VÀ BẢNG

• HS nghiên cứu Nhiệm vụ 1 trong SGK và nêu yêu cầu cần đạt trong nhiệm vụ, những điều cần lưu ý trong quá trình thực hành.
• HS nghiên cứu Nhiệm vụ 2 trong SGK và nêu yêu cầu cần đạt trong nhiệm vụ, những điều cần lưu ý trong quá trình thực hành.

LUYỆN TẬP

• Sửa lại chương trình trong Hình 9.5a, sử dụng thuộc tính style thay vì thuộc tính border để tạo viền cho bảng. Sử dụng màu xanh cho viền của ô hai dòng đầu bảng và sử dụng ba màu đỏ, vàng, xanh cho ba chữ Toán, Vật lí và Hoá học.

VẬN DỤNG

• Cho trước một bảng dữ liệu cỡ n x 4, mỗi hàng tương ứng với một bộ (họ tên, điểm Toán, điểm Vật lí, điểm Hoá học). Viết chương trình Python để tạo ra tệp HTML thực hiện việc vẽ bảng tương tự như Hình 9.5 và bổ sung dữ liệu vào các hàng phía dưới.