CHỦ ĐỀ F. BÀI 4. TRÌNH BÀY NỘI DUNG THEO DẠNG DANH SÁCH, BẢNG BIỂU
Trang bìa
Trang bìa
Ảnh
TIN HỌC 12 CHỦ ĐỀ F. BÀI 4. TRÌNH BÀY NỘI DUNG THEO DẠNG DANH SÁCH, BẢNG BIỂU
Ảnh
Yêu cầu cần đạt
Yêu cầu cần đạt
Ảnh
Yêu cầu cần đạt
Hình vẽ
Trình bày được nội dung trang web. Tạo được bảng biểu trên trang web
Khởi động
Khởi động
Khởi động
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?
Ảnh
1. Tạo danh sách
a, Danh sách xác định thứ tự
1. 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:
Ảnh
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ẻ

. 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.
Tiếp (a, Danh sách xác định thứ tự)
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 16), 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.
Ảnh
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.
Tiếp (a, Danh sách xác định thứ tự)
Ví dụ 2. Khai báo

xác định thứ tự mục đầu tiên của danh sách là 5. Hoạt động 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 1 liệt kê một số giá trị của thuộc tính type thường dùng.
Ảnh
Tiếp (a, Danh sách xác định thứ tự)
Ví dụ 3. Khai báo
xác định thứ tự các mục trong danh sách bằng chữ cái in hoa.
b, Danh sách không xác định thứ tự
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.
Tiếp (b, Danh sách không xác định thứ tự)
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ẻ
và kết quả hiển thị trên màn hình trình duyệt web như ở Hình 2b.
Ảnh
2. Tạo bảng
Tìm hiểu
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ử tả. Phần tử table có cú pháp khai báo như sau:
Ảnh
Tiếp
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.
Ảnh
Tiếp
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ở .
3. Thực hành tạo danh sách, tạo bảng
NV1. Tạo danh sách
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.
Ảnh
Tiếp (NV1. Tạo danh sách)
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 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. Bước 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ã in hoa như sau:
.– 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 in thường như sau:
.– 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:
. Thực hiện tương tự với danh sách mục con của nhóm Các trường Quân đội – Công an.Bước 4. Ghi lưu, mở tệp bằng trình duyệt web và xem kết quả.
NV2. Tạo bảng
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ìnhduyệt web thông tin dạng bảng như ở Hình 5.
Ảnh
Tiếp (NV2. Tạo bảng)
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.Trong nội dung phần tử body:- Khai báo phần tử table.- Tạo đường viền bao quanh các ô: .- 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ẻ .
Tiếp (NV2. Tạo bảng)
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, 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ẻ .- Trong mỗi hàng, tạo ba ô bằng cặp thẻ và viết nội dung tương ứng vào các ô như yêu cầu trong Hình 5.
Ảnh
Tiếp (NV2. Tạo bảng)
Bước 5. Ghi lưu, mở tệp bằng trình duyệt web và xem kết quả.
Vân dụng
Vận dụng
Vận dụng
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 h1 “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 hỏi tự kiểm tra
Câu hỏi 1
Câu hỏi tự kiểm tra
Bài tập trắc nghiệm
Câu 1: Mỗi phát biểu sau đây là dú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 hỏi 2
Bài tập trắc nghiệm
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. Hàng 1Hàng2
B. Hàng 1Hàng 2
C.

Hàng 1

Hàng2


D.

Hàng 1

Hàng 2


Tổng kết
Ghi nhớ
Ghi nhớ
Hình vẽ
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.
Kết thúc bài hoc
Ảnh