Lý thuyết Tin học 12 Bài 4 (Cánh diều): Trình bày nội dung theo dạng danh sách, bảng biểu

Lý thuyết Tin học 12 Bài 4: Trình bày nội dung theo dạng danh sách, bảng biểu

1. Tạo danh sách

a) Danh sách có hoặc không có 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.

Phần tử ol dùng để tạo danh sách xác định thứ tự:

<ol>

<li> Nội dung 1<li>

<li> Nội dung n<li>

</ol>

Phần tử li được sử dụng để tạo các mục nội dung trong danh sách. Nội dung của mỗi mục được viết trong cặp thẻ <li></li>.

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 trong Hình la khai báo một danh sách gồm ba mục nội dung. Khi hiển thị trên màn hình trình duyệt web (Hình 1b), các mục đó được xác định thứ tự. Nội dung mục đầu tiên “HTML” được xác định thứ tự là 1.

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.

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

Muốn 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.

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 viết hoa.

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

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

- Phần tử ul được dùng để tạo danh sách không xác định thứ tự, các mục nội dung được khai báo thông qua phần tử li tương tự như với danh sách xác định thứ tự.

- Mỗi mục nội dung khi hiển thị được bắt đầu bằng một dấu chấm tròn màu đen.

Ví dụ 4. Nội dung trong phần body của văn bản HTML ở Hình 2a khai báo danh sách gồm hai mục nội dung trong cặp thẻ <ul></ul> và kết quả hiển thị trên màn hình trình duyệt web như ở Hình 2b.

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 định nghĩa phần tử table để tạo bảng. Bảng được tạo bởi lần lượt các hàng. Mỗi hàng được khai báo bằng phần tử tr. Mỗi hàng chứa một hoặc nhiều ô dữ liệu, mỗi ô dữ liệu được khai báo bằng phần tử td.

Phần tử table có cú pháp khai báo như sau:

<table>

<tr>

<td>Dữ liệu</td>

<td>Dữ liệu</td>

</tr>

…

</table>

Dữ liệu trong các ô thường là văn bản, hình ảnh, siêu liên kết,... Dữ liệu 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 trong 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ị trên màn hình trình duyệt web như Hình 36.

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

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: Soạn văn bản HTML để khi mở bằng trình duyệt web sẽ có danh sách xuất hiện như ở Hình 4.

Hướng dẫn thực hiện:

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

Bước 2. Tạo cấu trúc và khai báo phần tur head cho têp "Bai4-NV1.html".

Bước 3. Tạo danh sách xác định thứ tự.

- Danh sách đánh số La Mã viết hoa

- Danh sách đánh số chữ cái viết thường cho các mục con

- Các danh sách con của các nhóm khác

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

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

Yêu cầu:

Soạn văn bản HTML để hiển thị trên màn hình trình duyệt web thông tin dạng bảng như ở Hình 5.

Hướng dẫn thực hiện:

Bước 1. Tạo tệp “Bai4-NV2.html”.

Bước 2. Tạo cấu trúc và khai báo phần tử head cho têp "Bai4-NV2.html".

Bước 3. Tạo đường viền và chú thích cho bảng.

– Tạo đường viền bao quanh các ô

- Khai báo chú thích của bảng ngay sau thẻ mở table bằng cặp thẻ <caption></caption>.

Bước 4. Tạo nội dung bảng.

Tạo nội dung bảng bằng cách khai báo nội dung cho từng hàng, từng ô.

Sau phần chú thích, khai báo tạo bốn hàng bằng các cặp thẻ <tr></tr>. Trong mỗi hàng, tạo ba ô bằng cặp thẻ <td></td> và viết nội dung tương ứng

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

Trắc nghiệm: Trình bày nội dung theo dạng danh sách, bảng biểu

PHẦN I. Câu trắc nghiệm nhiều phương án lựa chọn. Thí sinh trả lời từ câu 1 đến câu 10. Mỗi câu hỏi thí sinh chỉ lựa chọn một phương án.

Câu 1: Thẻ nào được sử dụng để tạo danh sách xác định thứ tự trong HTML?

A. <ul>

B. <ol>

C. <li>

D. <table>

Câu 2: Thẻ nào được sử dụng để tạo các mục nội dung trong danh sách?

A. <ol>

B. <ul>

C. <li>

D. <table>

Câu 3: Thuộc tính nào được sử dụng để xác định thứ tự bắt đầu của danh sách xác định thứ tự?

A. type

B. start

C. order

D. list

Câu 4: Thẻ nào được sử dụng để tạo bảng trong HTML?

A. <ul>

B. <li>

C. <table>

D. <div>

Câu 5: Thẻ nào được sử dụng để tạo các hàng trong bảng?

A. <td>

B. <th>

C. <tr>

D. <caption>

Câu 6: Thuộc tính nào trong thẻ <table> được sử dụng để thêm chú thích cho bảng?

A. caption

B. header

C. note

D. description

Câu 7: Cú pháp nào là đúng để khai báo một ô dữ liệu trong bảng?

A. <td>Data</td>

B. <tr>Data</tr>

C. <table>Data</table>

D. <th>Data</th>

Câu 8: Để tạo danh sách không xác định thứ tự trong HTML, bạn nên sử dụng thẻ nào?

A. <ol>

B. <ul>

C. <li>

D. <table>

Câu 9: Khi khai báo danh sách con trong danh sách xác định thứ tự, thẻ nào được sử dụng để tạo mục con?

A. <li>

B. <ol>

C. <ul>

D. <table>

Câu 10: Khi tạo bảng và muốn đặt đường viền cho các ô trong bảng, thuộc tính nào cần thiết?

A. border

B. padding

C. margin

D. color

PHẦN II. Câu trắc nghiệm đúng sai. Thí sinh trả lời từ câu 1 đến câu 2. Trong mỗi ý a), b), c), d) ở mỗi câu, thí sinh chọn đúng hoặc sai

Câu 1: Đánh dấu đúng hoặc sai khi khai báo danh sách xác định thứ tự trong HTML, bạn có thể thay đổi cách đánh số mục trong danh sách bằng cách:

a) Sử dụng thuộc tính type của phần tử <li>

b) Sử dụng thuộc tính type của phần tử <ol>

c) Sử dụng thuộc tính start của phần tử <li>

d) Sử dụng thuộc tính start của phần tử <ol>

Câu 2: Để tạo bảng trong HTML với đường viền xung quanh các ô và có chú thích cho bảng, bạn cần thực hiện những bước sau đúng hay sai?

a) Sử dụng thẻ <caption> sau thẻ <tr> và thiết lập thuộc tính border cho thẻ <td>

b) Sử dụng thẻ <caption> ngay sau thẻ <table> và thiết lập thuộc tính border cho thẻ <table>

c) Sử dụng thẻ <caption> ngay sau thẻ <tr> và thiết lập thuộc tính border cho thẻ <table>

d) Sử dụng thẻ <caption> ngay sau thẻ <table> và thiết lập thuộc tính border cho thẻ <td>

PHẦN III. Câu trả lời ngắn. Thí sinh trả lời từ câu 1 đến câu 3

Câu 1: Để thay đổi cách đánh số trong danh sách xác định thứ tự, bạn cần sử dụng thuộc tính nào trong thẻ <ol>?

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

Câu 3: Để tạo một bảng trong HTML với chú thích và đường viền, bạn cần sử dụng các thẻ nào?