Giáo án và PPT 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

BÀI 4: TRÌNH BÀY NỘI DUNG THEO DẠNG DANH SÁCH, BẢNG BIỂU

A. KHỞI ĐỘNG

HS suy nghĩ trả lời câu hỏi Khởi động tr.49 SGK theo hiểu biết của mình.

B. HOẠT ĐỘNG HÌNH THÀNH KIẾN THỨC

Hoạt động 1: Tạo danh sách

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

Dự kiến sản phẩm:

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

Hoạt động 2: Tạo bảng

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

Dự kiến sản phẩm:

- 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ạt động 3: Thực hành tạo danh sách, tạo bảng

GV hướng dẫn HS thực hiện theo hai nhiệm vụ trong SGK để tạo danh sách và bảng.

Dự kiến sản phẩm:

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

- Bước 1: HS tạo tệp “Bai4-NV1.html”.

- Bước 2: HS thực hiện tạo cấu trúc và khai báo phần tử head.

- Bước 3: HS thực hiện tạo danh sách xác định thứ tự trong phần tử body.

- Bước 4: HS ghi lưu, mở tệp bằng trình duyệt web và xem kết quả.

C. HOẠT ĐỘNG LUYỆN TẬP

Câu 1 (Câu 2 phần Câu hỏi tự kiểm tra SGK tr.53). Khai báo nào sau đây sẽ tạo một bảng có hai hàng, mỗi hàng gồm một ô dữ liệu?

A. <table><td><tr>Hàng 1</tr><tr>Hàng 2</tr></td></table>

B. <table><tr>Hàng 1</tr><tr>Hàng 2</tr></table>

C. <table><tr><td>Hàng 1</td></tr><tr><td>Hàng 2</td></tr></table>

D. <table><td>Hàng 1</td><td>Hàng 2</td></table>

Câu 2. Thẻ nào sau đây được sử dụng để tạo danh sách không xác định thứ tự?

A. <dl>.

B. <ol>.

C. <ul>.

D. <h1>.

Câu 3. HTML định nghĩa phần tử nào để bổ sung thông tin chú thích cho bảng?

A. comment.

B. caption.

C. subtitle.

D. description.

Câu 4. Khi tạo danh sách xác định thứ tự, thuộc tính type được dùng để làm gì?

A. Xác định thứ tự bắt đầu của danh sách.

B. Xác định kiểu danh sách.

C. Xác định kí tự đánh dấu các mục của danh sách.

D. Xác định cách đánh số thứ tự các mục của danh sách.

Câu 5. Khi tạo danh sách xác định thứ tự, nội dung mục đầu tiên được mặc định đánh số thứ tự là

A. i.

B. 1.

C. I.

D. a.

Dự kiến sản phẩm:

D. HOẠT ĐỘNG VẬN DỤNG

HS hoàn thành hoạt động Vận dụng SGK tr.53.