Đáp án Tin học ứng dụng 12 kết nối bài 9: Tạo danh sách, bảng

BÀI 9. TẠO DANH SÁCH, BẢNG

KHỞI ĐỘNG

Theo em, khi trang web chỉ toàn các đoạn văn bản thì cần trình bày thế nào cho dễ nhìn?

Giải chi tiết:

Khi trình bày một trang web chỉ toàn các đoạn văn bản, cần chú ý đến nhiều yếu tố để đảm bảo văn bản dễ nhìn, dễ đọc, và hấp dẫn. Dưới đây là một số gợi ý cụ thể:

1. Chọn phông chữ phù hợp:

• Phông chữ rõ ràng, dễ đọc: Sử dụng các phông chữ sans-serif như Arial, Helvetica, hoặc Georgia cho nội dung chính.

• Kích thước phông chữ: Đảm bảo kích thước phông chữ đủ lớn để dễ đọc, thường là 16px trở lên cho đoạn văn bản.

• Phông chữ tương phản: Sử dụng màu chữ có độ tương phản cao với nền để đảm bảo dễ đọc, ví dụ: chữ đen trên nền trắng.

2. Sử dụng khoảng cách hợp lý:

• Khoảng cách dòng (line-height): Sử dụng khoảng cách dòng từ 1.5 đến 1.8 để tạo không gian thoáng cho văn bản.

• Khoảng cách đoạn (margin-bottom): Đảm bảo có đủ khoảng cách giữa các đoạn văn để tránh cảm giác dày đặc.

3. Chia văn bản thành các đoạn nhỏ:

• Đoạn văn ngắn: Giữ các đoạn văn ngắn, từ 3-5 câu để tránh đoạn văn dài gây mệt mỏi khi đọc.

• Tiêu đề phụ (subheadings): Sử dụng tiêu đề phụ để chia nhỏ văn bản thành các phần rõ ràng, giúp người đọc dễ dàng tìm kiếm thông tin.

4. Sử dụng danh sách:

• Danh sách gạch đầu dòng hoặc số: Sử dụng danh sách để trình bày các điểm quan trọng một cách dễ nhìn và dễ theo dõi.

5. Định dạng văn bản:

• In đậm và nghiêng: Sử dụng in đậm để nhấn mạnh từ khóa hoặc cụm từ quan trọng, và in nghiêng để làm nổi bật các từ hoặc cụm từ cần chú ý.

• Liên kết (hyperlinks): Sử dụng màu sắc hoặc định dạng khác biệt cho các liên kết để người đọc dễ dàng nhận biết.

6. Bố cục và căn chỉnh:

• Căn chỉnh văn bản: Đảm bảo văn bản được căn chỉnh đều (left-align) thay vì căn giữa (center-align) hoặc căn đều (justify) để tạo cảm giác dễ đọc hơn.

• Khoảng trống (white space): Sử dụng khoảng trống một cách hợp lý để giúp trang web trông thoáng đãng và không bị chật chội.

7. Màu sắc và hình ảnh nền:

• Màu nền và chữ: Đảm bảo màu nền không làm giảm độ dễ đọc của chữ. Tránh nền quá sáng hoặc quá nhiều họa tiết.

• Hình ảnh nền: Nếu sử dụng hình nền, đảm bảo hình nền nhẹ và không gây phân tâm, có thể sử dụng hiệu ứng overlay để tăng độ tương phản.

1. TẠO DANH SÁCH

Hoạt động 1: Nhận biết phần tử từ danh sách

Em hãy quan sát hình 8.3 và nhận xét em có điểm nào có thể cải tiến về mặt trình bày không.

Giải chi tiết:

Quan sát hình 8.3, có một số điểm có thể cải tiến để văn bản trông chuyên nghiệp và dễ đọc hơn:

1. Sử dụng kích thước và kiểu chữ nhất quán:

   • Đảm bảo rằng các tiêu đề và nội dung có kích thước và kiểu chữ nhất quán để tạo sự đồng nhất và dễ đọc.

2. Tăng khoảng cách dòng và đoạn:

   • Tăng khoảng cách giữa các đoạn văn và dòng để tạo sự thoáng đãng và giúp người đọc dễ theo dõi.

3. Sử dụng màu sắc hợp lý:

   • Màu đỏ được sử dụng để nhấn mạnh, nhưng cần cân nhắc không sử dụng quá nhiều để tránh gây rối mắt. Có thể dùng màu đỏ đậm hoặc nhạt hơn cho phần tiêu đề và nội dung cụ thể.

4. Căn chỉnh các mục lục:

   • Căn chỉnh các mục lục để tạo sự gọn gàng và dễ nhìn hơn. Đảm bảo các mục được thụt lề hợp lý.

5. Sử dụng danh sách gạch đầu dòng:

   • Sử dụng danh sách gạch đầu dòng cho các bước làm để tạo sự rõ ràng và dễ theo dõi.

Câu hỏi: Làm thế nào để tạo một danh sách lồng nhau, danh sách mức 1 đánh số dạng 1, 2, 3,… và danh sách mức 2 dạng a, b, c.

Giải chi tiết:

Ta có thể sử dụng các thẻ HTML như sau:

Khi đó kết quả trả về là:

2. THIẾT LẬP BẢNG

Hoạt động 2: Lựa chọn định dạng phù hợp nhất

Trong Hội chợ ẩm thực ở trường, lớp 12E dự định bán một số món, các bạn muốn đăng trên trang web của lớp các thông tin: món ăn, đơn giá, số lượng và tổng số tiền. Theo em, các bạn nên dùng dạng biểu diễn nào: danh sách, danh sách mô tả hay bảng. Tại sao?

Giải chi tiết:

Để trình bày các thông tin về món ăn, đơn giá, số lượng và tổng số tiền trong Hội chợ ẩm thực trên trang web của lớp, các bạn lớp 12E nên sử dụng dạng bảng.

Lý do:

1. Rõ ràng và trực quan: Bảng giúp sắp xếp các thông tin theo cột và hàng, làm cho các dữ liệu dễ đọc và dễ so sánh.

2. Dễ dàng tìm kiếm thông tin: Khi thông tin được sắp xếp theo bảng, người xem có thể dễ dàng tìm kiếm và nhận biết các thông tin cần thiết như món ăn, giá, số lượng một cách nhanh chóng.

3. Trình bày chi tiết: Bảng cho phép các bạn trình bày chi tiết mọi thông tin một cách gọn gàng, giúp tránh nhầm lẫn và giảm bớt sự lộn xộn.

4. Thẩm mỹ và chuyên nghiệp: Trang web sẽ trông chuyên nghiệp hơn khi thông tin được trình bày trong một bảng có cấu trúc rõ ràng.

Câu hỏi: Bảng trong ví dụ trên Hình 9.6 có nhược điểm gì? Cần làm thế nào để giải quyết nhược điểm đó?

Giải chi tiết:

Nhược điểm: cột "Họ và tên" bị mất trong các ô dưới. Điều này xảy ra vì bạn đã sử dụng thuộc tính rowspan="2" trong thẻ <th> của cột này. Khi sử dụng rowspan="2", cột sẽ trải dài qua hai hàng, và do đó, phần tử con bên trong cột không được hiển thị.

Có thể sửa lại bằng các thẻ HTML như sau:

Kết quả trả về:

LUYỆN TẬP

Sửa lại chương trình trong Hình 9.5a, sử dụng thuộc tính style thay vì thuộc tính border để tạo viền cho bảng. Sử dụng màu xanh cho viền của ô hai dòng đầu bảng và sử dụng ba màu đỏ, vàng, xanh cho ba chữ Toán, Vật lí và Hoá học.

Giải chi tiết:

Mã HTML:

Kết quả trả về:

VẬN DỤNG

Cho trước một bảng dữ liệu cỡ n x 4, mỗi hàng tương ứng với một bộ (họ tên, điểm Toán, điểm Vật lí, điểm Hoá học). Viết chương trình Python để tạo ra tệp HTML thực hiện việc vẽ bảng tương tự như Hình 9.5 và bổ sung dữ liệu vào các hàng phía dưới.

Giải chi tiết:

HTML để tạo bảng:

Kết quả trả về: