Giáo án NLS Tin học 12 KHMT kết nối Bài 9: Tạo danh sách, bảng

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

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

- GV yêu cầu HS hoạt động cá nhân, đọc Hoạt động 1 – Nhận biết phần tử danh sách SGK tr.52 và trả lời câu hỏi:

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.

Hình 8.3.

- GV chia lớp thành các nhóm 2 – 3 HS để thảo luận và đặt câu hỏi:

+ 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?

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.52 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 1 SGK tr.52:

3 dòng cuối có thể trình bày theo kiểu danh sách để văn bản được khoa học hơn.

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 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:

+ Để tạo danh sách có thứ tự, dùng cặp thẻ <ol></ol>. Để chọn kiểu đánh thứ

tự và giá trị bắt đầu, dùng thuộc tính type và start (Hình 9.1):

• 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.

Hình 9.1. Danh sách có thứ tự

+ Để tạo danh sách không có thứ tự, dùng cặp thẻ <ul></ul>. Để 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. 

Hình 9.2. Danh sách có kí tự đầu dòng

b) Danh sách mô tả

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

- GV chia lớp thành các nhóm 2 – 3 HS để thảo luận và đặt câu hỏ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?

- GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời Câu hỏi củng cố kiến thứ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?

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.53 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 củng cố kiến thức SGK tr.53:

Sử dụng thẻ <ol> để 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ẻ <ol>):

Với thẻ <ol> ngoài, đặt thuộc tính type="1".

Với thẻ <ol> trong, đặt thuộc tính type="a".

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 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ẻ <ol>, <ul> và <dl>.

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ẻ <dl>, <dt> và <dd>:

Ví dụ:

Hình 9.3. Danh sách mô tả

- Lưu ý: Ta 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 (bằng cách đặt danh sách đó bên trong cụm thẻ <li></li> của mục tương ứng).

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

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

- GV yêu cầu HS đọc kĩ yêu cầu của Nhiệm vụ 1 SGK tr.55 và thực hành cá nhân theo hướng dẫn.

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ình 9.7. Danh sách các câu lạc bộ

+ 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ẻ <h2>...</h2>.

+ Bước 3: Tạo danh sách không có thứ tự.

+ 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.

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

- HS tiếp nhận và thực hiện nhiệm vụ theo đúng hướng dẫn để hoàn thành yêu cầu Nhiệm vụ 1.

- Nếu gặp lỗi khi viết mã lệnh, HS có thể sử dụng Chatbot AI để tìm hiểu và gỡ lỗi.

- Trong quá trình HS thực hành, GV quan sát, hỗ trợ, giải đáp các vướng mắc của HS.

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

- HS quan sát bài làm của các bạn khác, nhận xét nhau. 

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

- GV nhận xét, kiểm tra kết quả thực hiện Nhiệm vụ 1 của HS.

- Nhiệm vụ 1 được gọi là hoàn thành khi HS viết được đ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.

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

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

- Bước 1: Văn bản gồm hai phần tử:

• 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ước 3: Tạo danh sách không có thứ tự.

- Bước 4: Tạo mục THỂ THAO.

- Bước 5: Tạo mục NGHỆ THUẬT.

* Đoạn mã HTML hoàn chỉnh:

- 3.4.NC1a: Viết mã lệnh HTML.

- 3.1.NC1a: Sử dụng các công cụ kỹ thuật số để tạo, thiết kế và phát triển các nội dung số phức tạp.

- 6.2.NC1a: Lựa chọn và sử dụng được các công cụ AI phù hợp để nâng cao hiệu suất học tập và giải quyết vấn đề.

Nhiệm vụ 2: Tạo bảng

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

- GV yêu cầu HS đọc kĩ yêu cầu của Nhiệm vụ 2 SGK tr.56 và thực hành cá nhân theo hướng dẫn.

Yêu cầu: Lập bảng lịch hoạt động của các câu lạc bộ (Hình 9.8):

Hình 9.8. Lịch hoạt động

+ Bước 1: Xác định các thông số của bảng:

• Bảng có 7 hàng, 7 cột.
• Thuộc tính Caption của bảng là “Lịch hoạt động CLB Thể thao”.
• Hai ô 1, 2 của cột 1 và hai ô 1, 2 của cột 2 được gộp (rowspan="2").
• Các ô 3, 4, 5, 6, 7 của hàng 1 được gộp (colspan="5").

Khung viền được đặt border="1" trong thẻ <table> hoặc sử dụng style="border: 1px solid" cho thẻ <table> và từng thẻ <td> trong bảng.

+ Bước 2: Tạo bảng kèm caption:

+ Bước 3: Tạo hai hàng đầu như phân tích phía trên.

+ Bước 4: Tạo các hàng còn lại, mỗi hàng là một cặp <tr></tr> bao gồm bảy cặp

<td></td> ở giữa chứa dữ liệu như Hình 9.8.

Lưu lại tệp với tên CLB.html.

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

- HS tiếp nhận và thực hiện nhiệm vụ theo đúng hướng dẫn để hoàn thành yêu cầu Nhiệm vụ 2.

- Nếu gặp lỗi khi viết mã lệnh, HS có thể sử dụng Chatbot AI để tìm hiểu và gỡ lỗi.

- Trong quá trình HS thực hành, GV quan sát, hỗ trợ, giải đáp các vướng mắc của HS.

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

- HS quan sát bài làm của các bạn khác, nhận xét nhau. 

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

- GV nhận xét, kiểm tra kết quả thực hiện Nhiệm vụ 2 của HS.

- Nhiệm vụ 2 được gọi là hoàn thành khi HS viết được đ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ụ 2: Tạo bảng

- Bước 1: Xác định các thông số của bảng.

- Bước 2: Tạo bảng kèm caption.

- Bước 3: Tạo hai hàng đầu.

- Bước 4: Tạo các hàng còn lại.

* Đoạn mã HTML hoàn chỉnh: