BÀI 4. TRÌNH BÀY NỘI DUNG THEO DẠNG DANH SÁCH, BẢNG BIỂU
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?
Giải rút gọn:
Lựa chọn giữa liệt kê và bảng trong văn bản:
Lựa chọn nào phù hợp phụ thuộc vào nội dung và mục đích trình bày:
Liệt kê các mục:
- Dùng khi:
- Liệt kê các mục liên quan không cần so sánh trực tiếp.
- Các mục không có liên kết rõ ràng hoặc cần phân loại theo tiêu chí cụ thể.
- Mô tả ngắn gọn, dễ đọc các điểm, ý tưởng hoặc mục tiêu.
- Thứ tự hoặc tương quan không quan trọng.
- Ví dụ: Liệt kê các nguyên liệu cho một món ăn, các bước thực hiện một dự án.
Trình bày dưới dạng bảng:
- Dùng khi:
- So sánh các giá trị, dữ liệu hoặc thuộc tính của các mục.
- Hiển thị thông tin dưới dạng lưới, sắp xếp theo hàng và cột.
- Biểu diễn lượng lớn dữ liệu cụ thể và dễ hiểu.
- Cần cấu trúc rõ ràng để so sánh và phân tích thông tin.
- Ví dụ: Bảng so sánh giá cả các loại điện thoại, bảng kết quả học tập của học sinh.
1. TẠO DANH SÁCH
HOẠT ĐỘNG
Hãy nêu một số các em đã biết để xác định thứ tự các mục được liệt kê trong một danh sách
Giải rút gọn:
Có nhiều cách để xác định thứ tự các mục trong một danh sách liệt kê trên trang web. Một số cách phổ biến bao gồm sử dụng thứ tự số, thứ tự chữ cái, thứ tự số La Mã, và thứ tự không gian trống.
2. TẠO BẢNG
3. THỰC HÀNH TẠO DANH SÁCH, TẠO BẢ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 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.
Giải rút gọn:
Bổ sung cho hobbies.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sở thích của em</title>
</head>
<body>
<h1>Sở thích của em</h1>
<p>Dưới đây là một số sở thích của tôi:</p>
<ul>
<li>Đọc sách</li>
<li>Chơi thể thao</li>
<li>Âm nhạc</li>
</ul>
</body>
</html>
Bổ sung nội dung cho index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website của tôi</title>
</head>
<body>
<h1>Website của tôi</h1>
<p>Xin chào! Tôi là [Tên của bạn], và đây là trang web cá nhân của tôi.</p>
<p>Dưới đây là những gì bạn có thể tìm thấy trên trang web của tôi:</p>
<ul>
<li><a href="hobbies.html">Sở thích</a></li>
<li><a href="album.html">Ảnh của tôi</a></li>
</ul>
<h2>Kế hoạch học tập</h2>
<table border="1">
<tr>
<th>Thứ hai</th>
<th>Thứ ba</th>
<th>Thứ tư</th>
<th>Thứ năm</th>
<th>Thứ sáu</th>
</tr>
<tr>
<td>Môn A</td>
<td>Môn B</td>
<td>Môn C</td>
<td>Môn D</td>
<td>Môn E</td>
</tr>
<tr>
<td>Môn F</td>
<td>Môn G</td>
<td>Môn H</td>
<td>Môn I</td>
<td>Môn J</td>
</tr>
</table>
</body>
</html>
TỰ KIỂM TRA
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ự.
Giải rút gọn:
Đánh giá các câu về danh sách HTML:
a) Sai. Khi sử dụng thuộc tính type="A" trong danh sách xác định thứ tự, các mục sẽ được đánh số theo chữ cái thường a, b, c, ..., không phải là chữ cái viết hoa. Do đó, phát biểu này không chính xác.
b) Đúng. Trong danh sách xác định thứ tự (<ol>), số thứ tự của các mục là các số nguyên, bắt đầu từ 1 và tăng dần.
c) Sai. Theo mặc định, mục trong danh sách không xác định thứ tự (<ul>) không được hiển thị bắt đầu bằng dấu sao (*). Thay vào đó, các mục trong danh sách này thường được hiển thị với dấu đầu dòng hoặc dấu bullet (ví dụ: tròn, vuông, ...).
d) Đúng. Bạn có thể thay đổi số thứ tự của mục bắt đầu trong danh sách xác định thứ tự (<ol>) bằng cách sử dụng thuộc tính start và chỉ định số bạn muốn danh sách bắt đầu 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>
Giải rút gọn:
Đúng vậy, câu trả lời chính xác là D. <table><td>Hàng 1</td><td>Hàng 2</td></table>.
Giải thích:
- Trong HTML, để tạo một bảng, chúng ta sử dụng các thẻ sau:
- <table>: Thẻ mở đầu và đóng đuôi để xác định một bảng.
- <tr>: Thẻ mở đầu và đóng đuôi để xác định một hàng trong bảng.
- <td>: Thẻ mở đầu và đóng đuôi để xác định một ô dữ liệu trong bảng.
Phân tích đáp án D:
- Đáp án D bao gồm:
- Thẻ <table> để mở và đóng bảng.
- Thẻ <tr> để tạo một hàng trong bảng.
- Thẻ <td> để tạo hai ô dữ liệu trong hàng, chứa nội dung "Hàng 1" và "Hàng 2".
- Cấu trúc này tuân theo đúng cách sử dụng các thẻ HTML để tạo bảng với hai hàng và hai ô dữ liệu.