KIỂM TRA BÀI CŨ
KHỞI ĐỘNG
BÀI 9. TẠO DANH SÁCH, BẢNG
1. TẠO DANH SÁCH
Danh sách giúp nhóm các thông tin liên quan lại với nhau. Có 3 loại danh sách chính.
a) Danh sách có hoặc không có thứ tự
Danh sách có thứ tự (Ordered List):
- Thẻ sử dụng: Cặp thẻ <ol>...</ol> bao bên ngoài, bên trong là các mục <li>...</li>.
- Thuộc tính:
+ type: Xác định kiểu đánh số ("1", "a", "A", "i", "I").
+ start: Xác định giá trị bắt đầu (số nguyên).
Danh sách không có thứ tự (Unordered List):
- Thẻ sử dụng: Cặp thẻ <ul>...</ul> bao bên ngoài, bên trong là các mục <li>...</li>.
- Định dạng: Dùng thuộc tính style với đặc tính list-style-type để chọn kiểu kí tự đầu dòng (disc, circle, square, none).
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM:
Câu 1: Trong thiết kế giao diện trang web, khi cần hiển thị một danh sách các mục không yêu cầu phải sắp xếp theo số thứ tự (ví dụ: danh sách liệt kê các tính năng), người lập trình sử dụng cặp thẻ nào?
Câu 2: Đối với danh sách có thứ tự (Ordered List), ngôn ngữ HTML cho phép lập trình viên thay đổi linh hoạt kiểu đánh số (như "1", "A", "i") thông qua việc khai báo giá trị cho một thuộc tính đặc biệt. Tên của thuộc tính đó là gì?
Câu 3: Mặc dù cả hai loại danh sách có thứ tự và không có thứ tự đều dùng các cặp thẻ khác nhau để bao bọc toàn bộ danh sách, nhưng chúng lại có một điểm chung rất lớn về cấu trúc bên trong. Đặc điểm chung đó là gì?
Câu 4: Khi xây dựng một danh sách không có thứ tự, nếu người lập trình muốn thay đổi kí hiệu chấm tròn mặc định ở đầu mỗi dòng thành một hình vuông, họ phải sử dụng thuộc tính style kết hợp với đặc tính nào sau đây?
Câu 5: Bạn đang viết mã HTML cho một công thức nấu ăn. Ở bước thứ 3, bạn cần liệt kê 2 nguyên liệu phụ nhưng không quan trọng thứ tự. Bạn sẽ đặt đoạn mã tạo danh sách nguyên liệu phụ này ở vị trí nào để đúng chuẩn danh sách lồng nhau?
b) Danh sách mô tả
Khái niệm:
Dùng để liệt kê các mục kèm theo giải thích/mô tả cho mục đó.
Thẻ sử dụng:
- <dl>: Bao quanh toàn bộ danh sách.
- <dt>: Tên mục (thuật ngữ).
- <dd>: Phần mô tả/giải nghĩa.
Lưu ý (Danh sách lồng nhau):
Ta có thể đặt một danh sách con vào bên trong thẻ <li> của danh sách cha.
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM:
Câu 6: Ngoài hai loại danh sách phổ biến là có thứ tự và không có thứ tự, HTML còn hỗ trợ tạo một loại danh sách đặc biệt dùng để liệt kê các thuật ngữ kèm theo lời giải nghĩa. Loại danh sách này gọi là gì?
Câu 7: Để xây dựng hoàn chỉnh một danh sách mô tả trong mã nguồn HTML, người lập trình phải sử dụng kết hợp bộ ba thẻ đánh dấu nào sau đây?
Câu 8: Trong cấu trúc phân cấp của một danh sách mô tả, thẻ <dt> và thẻ <dd> đóng vai trò hoàn toàn khác biệt nhau. Chức năng chính của phần nội dung nằm bên trong thẻ <dt> là để hiển thị thông tin gì?
Câu 9: Khi trình duyệt web dịch đoạn mã chứa danh sách mô tả, sự khác biệt rõ rệt nhất về mặt hiển thị giữa nội dung trong thẻ <dt> và nội dung trong thẻ <dd> thường được thể hiện như thế nào?
Câu 10: Bạn được giao nhiệm vụ thiết kế một từ điển tin học trực tuyến. Để định dạng từ khóa "HTML" và giải nghĩa của nó là "Ngôn ngữ đánh dấu siêu văn bản", đoạn mã nào sau đây là cấu trúc đúng chuẩn nhất?
2. THIẾT LẬP BẢNG
Bảng dùng để hiển thị dữ liệu dạng hàng và cột.
Cấu trúc cơ bản của bảng:
- <table>: Tạo bảng.
- <caption>: Tạo tiêu đề cho bảng (đặt ngay sau thẻ <table>).
- <tr> (table row): Tạo hàng.
- <th> (table header): Tạo ô tiêu đề (thường in đậm, căn giữa).
- <td> (table data): Tạo ô dữ liệu thường.
Các định dạng nâng cao cho bảng:
Tạo khung (Border):
- Sử dụng thuộc tính style với đặc tính border.
- Cú pháp: border: độ_dày kiểu_viền màu_viền.
Kích thước (Size):
Sử dụng width (chiều rộng) và height (chiều cao) trong thuộc tính style. Đơn vị là px hoặc %.
Gộp ô (Merging cells):
Gộp hàng: Dùng thuộc tính rowspan="số_hàng_gộp" trong thẻ <td> hoặc <th>.
Gộp cột: Dùng thuộc tính colspan="số_cột_gộp" trong thẻ <td> hoặc <th>.
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM:
Câu 11: Để trình bày các dữ liệu thống kê một cách khoa học dưới dạng cấu trúc hàng và cột trên trang web, lập trình viên sử dụng phần tử bảng. Thẻ nào sau đây được dùng để bắt đầu việc tạo một bảng?
Câu 12: Một bảng dữ liệu thường có một dòng văn bản ngắn gọn nằm ở vị trí trên cùng để mô tả tóm tắt nội dung của toàn bộ bảng. Thẻ HTML nào chuyên dùng để tạo tiêu đề cho bảng này?
Câu 13: Cấu trúc của một bảng được hình thành từ việc xếp chồng các hàng lên nhau. Trong mã nguồn HTML, mỗi một hàng ngang của bảng (table row) được xác định bởi cặp thẻ nào?
Câu 14: Trong một hàng của bảng, dữ liệu có thể là ô tiêu đề hoặc ô dữ liệu thông thường. Để tạo ra một ô tiêu đề cột (thường tự động in đậm và căn giữa), người ta dùng thẻ nào?
Câu 15: Mặc định khi tạo bảng bằng HTML, trình duyệt sẽ không hiển thị đường kẻ quanh các ô. Để tạo khung viền cho bảng, ta cần sử dụng thuộc tính style kết hợp với đặc tính nào?
Câu 16: Trong cú pháp định dạng đường viền bảng style="border: độ_dày kiểu_viền màu_viền", nếu bạn bỏ qua (không ghi) tham số màu sắc, thì trình duyệt sẽ xử lý màu viền đó như thế nào?
Câu 17: Khi cần thay đổi kích thước chiều rộng của bảng sao cho bảng có thể tự động co giãn vừa khớp với kích thước cửa sổ trình duyệt hiện tại, người lập trình nên thiết lập thuộc tính width bằng đơn vị nào?
Câu 18: Tính năng gộp ô giúp tạo ra các cấu trúc bảng phức tạp. Sự khác biệt cốt lõi giữa thuộc tính rowspan và colspan khi áp dụng vào một ô dữ liệu (<td> hoặc <th>) là gì?
Câu 19: Bạn đang vẽ một thời khóa biểu. Có môn "Toán" kéo dài liên tục từ tiết 1 đến tiết 3 trong cùng một buổi sáng (nghĩa là môn Toán nằm ở 3 hàng liên tiếp trên cùng một cột). Tại ô "Toán" ở tiết 1, bạn cần khai báo thuộc tính gì?
Câu 20: Trong một bảng danh sách lớp, hàng tiêu đề đầu tiên có một ô mang tên "Thông tin cá nhân" trải dài bao phủ lên hai cột con bên dưới là "Họ tên" và "Ngày sinh". Để làm được điều này, thẻ <th>Thông tin cá nhân</th> cần được thêm vào thuộc tính gì?
3. THỰC HÀNH TẠO DANH SÁCH VÀ BẢNG
Bước 1. Phân tích: Quan sát hình mẫu xem cần dùng loại danh sách nào (có thứ tự hay không?) hoặc bảng có bao nhiêu hàng/cột, có gộp ô không.
Bước 2. Tạo khung: Viết các thẻ chính (<ul>, <ol>, <table>...).
Bước 3. Chi tiết hóa: Thêm nội dung, thêm thuộc tính (style, type, rowspan...) để giống mẫu.