Tin hoc 12_Bai 4F.pdf

## BÀI 4 TRÌNH BÀY NỘI DUNG THEO DẠNG DANH SÁCH, BẢNG BIỂU **Học xong bài này, em sẽ:** - Trình bày được nội dung dạng danh sách trên trang web. - Tạo được bảng biểu trên trang web. **Theo em, để trình bày một văn bản, khi nào nên trình bày theo dạng liệt kê các mục và khi nào nên trình bày theo dạng bảng?** ### 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. Phần tử ol dùng để tạo danh sách xác định thứ tự và được khai báo như sau: ```html <ol> </ol> ``` **Nội dung 1** **Nội dung n** 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 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 ), 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. ```html <body> <p>Các công nghệ cần biết khi tạo trang web</p> <ol> <li>HTML </li> <li>Cascading Style Sheets (CSS)</li> <li>JavaScript</li> </ol> </body> ``` **Hình Ví dụ tạo danh sách xác định thứ tự** **Hình Kết quả khi mở văn bản HTML ở Hình bằng trình duyệt web** Em 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. **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.** Muốn thay đổi cách xác định thứ tự các mục trong danh sách, em cần thiết lập giá trị cho thuộc tính type trong khai báo phần tử ol. Bảng liệt kê một số giá trị của thuộc tính type thường dùng. | Giá trị | Cách xác định thứ tự | | --------| -------- | | 1 | Số nguyên: 1, 2, 3,... | | a | Chữ cái in thường: a, b, c,... | | A | Chữ cái in hoa: A, B, C,... | | i | Chữ số La Mã in thường: i, ii, iii,... | | I | Chữ số La Mã in hoa: I, II, III,... | **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ự 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. 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ự. 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 trong phần body của văn bản HTML ở Hình 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 . ```html <body> <p>HTML hỗ trợ tạo danh sách</p> <ul> <li>Danh sách xác định thứ tự</li> <li>Danh sách không xác định thứ tự</li> </ul> </body> ``` **Hình Ví dụ tạo danh sách không xác định thứ tự** **Hình Kết quả khi mở văn bản HTML ở Hình bằng trình duyệt web** ### 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: ```html <table> <tr> <td>Dữ liệu</td> </tr> </table> ``` **<td>Dữ liệu</td>** 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 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 . ```html <body> <p>Danh sách cán bộ lớp 12A1</p> <table> <tr> <td>STT</td> <td>Họ và tên</td> <td>Chức vụ</td> </tr> <tr> <td>1</td> <td>Nguyễn Thảo Linh</td> <td>Lớp trưởng</td> </tr> <tr> <td>2</td> <td>Nguyễn Hoàng Nam</td> <td>Bí thư chi đoàn</td> </tr> </table> </body> ``` **Hình Ví dụ tạo bảng bằng cách kết hợp các phần tử table, tr, td** **Hình Kết quả khi mở văn bản HTML ở Hình 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>`. ### 3 Thực hành tạo danh sách, tạo 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:** 1. Tạo tệp “Bai4-NV1.html”. 2. Tạo cấu trúc và khai báo phần tử head cho tệp “Bai4-NV1.html”. Các thao tác cụ thể thực hiện như hướng dẫn trong Bước 2, Nhiệm vụ 1 ở Bài 3. 3. Tạo danh sách xác định thứ tự. Trong nội dung phần tử body: - Khai báo danh sách xác định thứ tự theo các chữ số La Mã viết hoa như sau: `<ol type = "I"></ol>`. Với các mục con của nhóm Các trường Kĩ thuật - Công nghệ, khai báo danh sách xác định thứ tự theo chữ cái viết thường như sau: `<ol type= "a"></ol>`. Quan sát các nhóm tiếp theo, các mục con được đánh thứ tự kế tiếp, cùng kiểu của các mục con trước đó. Danh sách các mục con này cần khai báo thuộc tính start để xác định giá trị thứ tự bắt đầu cho phù hợp. Ví dụ, các mục con của nhóm Các trường Kinh tế được khai báo như sau: `<ol type= "a" start = "3"></ol>`. Thực hiện tương tự với danh sách con của nhóm Các trường Quân đội – Công an. 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:** 1. Tạo tệp “Bai4-NV2.html”. 2. Tạo cấu trúc và khai báo phần tử head cho tệp “Bai4-NV2.html”. 3. Tạo đường viền và chú thích cho bảng. Trong nội dung phần tử body: - Khai báo phần tử table. – Tạo đường viền bao quanh các ô: <table border = "I>. - Khai báo chú thích “Thống kê số lượng học sinh lớp 12A1 tham gia hoạt động thể thao của trường” của bảng ngay sau thẻ mở table bằng cặp thẻ <caption></caption>. 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, trong mỗi hàng khai báo nội dung cho từng ô. Trong nội dung phần tử table: - 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 vào các ô như yêu cầu trong Hình 5. 5. Ghi lưu, mở tệp bằng trình duyệt web và xem kết quả. **Tạo website cá nhân:** Em hãy bổ sung thêm một số nội dung cho website cá nhân đã được tạo ở các bài học trước. **Gợi ý thực hiện:** - Trong tệp “hobbies.html”, bổ sung tiêu đề mục hl “Sở thích của em” tạo danh sách xác định thứ tự hoặc không xác định thứ tự liệt kê các sở thích của em. - Trong tệp “index.html”, bổ sung tiêu đề mục h2 “Kế hoạch học tập” và trình bày thời khoá biểu của em dưới dạng bảng. **Câu 1.** Mỗi phát biểu sau đây là đúng hay sai khi sử dụng các phần ol, ul để tạo danh sách trên trang web? a) Khi khai báo thuộc tính type = "A" danh sách xác định thứ tự các mục theo chữ cái viết hoa. b) Số thứ tự trong danh sách xác định thứ tự luôn là số nguyên. c) Khi mở bằng trình duyệt web, theo mặc định mục trong danh sách không xác định thứ tự được hiển thị bắt đầu bằng dấu sao (*). d) Có thể thay đổi số thứ tự của mục bắt đầu trong danh sách xác định thứ tự. **Câu 2.** 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>` **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.

Tin hoc 12_Bai 4F.pdf

Document Details

Related

Full Transcript