Câu hỏi mở đầu trang 52

Đề bài: 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?

Lời giải:

Khi trang web chỉ toàn đoạn văn bản, có thể cải thiện cách trình bày như sau:

• Sử dụng tiêu đề phân cấp (thẻ <h1> đến <h6>) để phân chia nội dung rõ ràng.
• Sử dụng danh sách (có thứ tự hoặc không có thứ tự) để liệt kê các mục.
• Sử dụng bảng để trình bày dữ liệu có cấu trúc hàng – cột.
• Kết hợp định dạng chữ (in đậm, in nghiêng, gạch chân, đổi màu) để nhấn mạnh nội dung quan trọng.
• Thêm hình ảnh minh hoạ để trang web sinh động hơn.

1. Tạo danh sách

Hoạt động 1 trang 52

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

Lời giải:

Nhận xét về Hình 8.3 (đoạn văn bản biện luận số nghiệm của phương trình bậc 2):

• Các bước B₁, B₂, B₃ đang được viết thành các đoạn rời → có thể trình bày dưới dạng danh sách có thứ tự (<ol>) để rõ các bước.
• Ba dòng “+ Nếu delta…” đang mở đầu bằng dấu “+” → có thể trình bày dưới dạng danh sách không có thứ tự (<ul>) để nhìn gọn gàng, đúng vai trò là các trường hợp liệt kê.
• Có thể tổ chức thành danh sách lồng nhau: bước B₃ (Kết luận) chứa danh sách con là 3 trường hợp của delta.

2. Thiết lập bảng

Câu hỏi củng cố mục 1 trang 53

Đề bà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 đánh số dạng a, b, c?

Lời giải:

Cách thực hiện:

• Danh sách mức 1: dùng cặp thẻ <ol type="1">...</ol>.
• Danh sách mức 2: đặt danh sách con <ol type="a">...</ol> bên trong cặp thẻ <li>...</li> của mục thuộc danh sách mức 1.

Ví dụ mã HTML:

<ol type="1">
  <li>Mục thứ nhất
    <ol type="a">
      <li>Mục con a</li>
      <li>Mục con b</li>
    </ol>
  </li>
  <li>Mục thứ hai
    <ol type="a">
      <li>Mục con a</li>
      <li>Mục con b</li>
    </ol>
  </li>
</ol>

Trong đó:

• type="1" cho biết danh sách đánh số 1, 2, 3,…
• type="a" cho biết danh sách đánh số a, b, c,…

Hoạt động 2 trang 53

Đề bài: 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?

Lời giải:

Nên dùng bảng. Vì:

• Có 4 loại thông tin (món ăn, đơn giá, số lượng, tổng số tiền) đi kèm với mỗi món → phù hợp trình bày dạng cột.
• Mỗi món tương ứng với một hàng, dễ so sánh giữa các món.
• Bảng giúp tính toán và tổng hợp thuận tiện (ví dụ tính tổng doanh thu).
• Danh sách chỉ phù hợp khi liệt kê một loại thông tin.
• Danh sách mô tả chỉ phù hợp cho cặp “tên – mô tả”, không phù hợp khi có nhiều thuộc tính.

Câu hỏi củng cố mục 2 trang 55

Đề bà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 đó?

Lời giải:

Nhược điểm:

• Khi hiển thị, bảng xuất hiện đường viền đôi (viền của các ô liền kề chồng lên nhau) → nhìn không đẹp mắt, thiếu chuyên nghiệp.
• Việc gộp ô bằng rowspan, colspan làm mã HTML khó theo dõi và kiểm soát số lượng ô hơn.

Cách giải quyết:

• Thay vì dùng border="1", sử dụng thuộc tính style="border:1px solid" cho cả thẻ <table> và từng thẻ <td>, <th> trong bảng → viền đều và gọn gàng hơn.
• Khi viết mã HTML, cần canh lề (thụt đầu dòng) và có chú thích để dễ theo dõi vị trí các ô đã gộp.

Luyện tập trang 56

Đề bài: Sửa lại chương trình trong Hình 9.6a, 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.

Lời giải:

<table style="border:1px solid">
  <tr>
    <th rowspan="2" style="border:1px solid blue">Họ và tên</th>
    <th colspan="3" style="border:1px solid blue">Điểm thi</th>
  </tr>
  <tr>
    <td style="border:1px solid blue; color:red">Toán</td>
    <td style="border:1px solid blue; color:yellow">Vật lí</td>
    <td style="border:1px solid blue; color:green">Hoá học</td>
  </tr>
  <!-- Các hàng dữ liệu tiếp theo có thể thêm ở đây -->
</table>

Giải thích:

• Thay border="1" bằng style="border:1px solid" trong thẻ <table>.
• Với 2 dòng đầu (dòng có “Họ và tên”, “Điểm thi” và dòng “Toán, Vật lí, Hoá học”): thêm style="border:1px solid blue" cho các ô → viền màu xanh.
• Với 3 chữ Toán, Vật lí, Hoá học: thêm color:red, color:yellow, color:green vào thuộc tính style để đổi màu chữ.

Vận dụng trang 56

Đề bài: Cho trước một bảng dữ liệu cỡ n × 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.6b và bổ sung dữ liệu vào các hàng phía dưới.

Lời giải:

Chương trình Python:

# Dữ liệu mẫu (n hàng, mỗi hàng gồm 4 thông tin)
data = [
    ("Nguyễn Văn A", 8, 7, 9),
    ("Trần Thị B", 9, 8, 7),
    ("Lê Văn C", 7, 9, 8)
]

# Mở tệp HTML để ghi
with open("bang_diem.html", "w", encoding="utf-8") as f:
    # Phần đầu tệp
    f.write('<!DOCTYPE html>\n')
    f.write('<html>\n')
    f.write('<head><meta charset="utf-8"><title>Bảng điểm</title></head>\n')
    f.write('<body>\n')

    # Bắt đầu bảng
    f.write('<table border="1">\n')
    f.write('  <caption>Bảng điểm thi</caption>\n')

    # Hai hàng đầu (gộp ô)
    f.write('  <tr>\n')
    f.write('    <th rowspan="2">Họ và tên</th>\n')
    f.write('    <th colspan="3">Điểm thi</th>\n')
    f.write('  </tr>\n')
    f.write('  <tr>\n')
    f.write('    <th>Toán</th>\n')
    f.write('    <th>Vật lí</th>\n')
    f.write('    <th>Hoá học</th>\n')
    f.write('  </tr>\n')

    # Các hàng dữ liệu
    for hoten, toan, li, hoa in data:
        f.write('  <tr>\n')
        f.write(f'    <td>{hoten}</td>\n')
        f.write(f'    <td>{toan}</td>\n')
        f.write(f'    <td>{li}</td>\n')
        f.write(f'    <td>{hoa}</td>\n')
        f.write('  </tr>\n')

    # Kết thúc bảng và tệp
    f.write('</table>\n')
    f.write('</body>\n')
    f.write('</html>')

print("Đã tạo tệp bang_diem.html")

Giải thích các bước:

• Bước 1: Chuẩn bị dữ liệu dạng danh sách các bộ (họ tên, Toán, Vật lí, Hoá học).
• Bước 2: Mở tệp bang_diem.html để ghi, dùng mã UTF-8 để hiển thị tiếng Việt.
• Bước 3: Ghi phần khai báo HTML, <head> và mở <body>.
• Bước 4: Ghi thẻ <table> cùng với <caption> (tiêu đề bảng).
• Bước 5: Ghi hai hàng đầu (hàng tiêu đề có gộp ô bằng rowspan="2" và colspan="3").
• Bước 6: Dùng vòng lặp for để ghi từng hàng dữ liệu từ danh sách vào các thẻ <td>.
• Bước 7: Ghi thẻ đóng </table>, </body>, </html>.

Kết quả: Mở tệp bang_diem.html bằng trình duyệt sẽ thấy bảng có cấu trúc như Hình 9.6b, kèm theo dữ liệu ở các hàng phía dưới.

Thầy Phạm Thành Danh

(Người kiểm duyệt, ra đề)

Chức vụ: Trưởng ban biên soạn môn Tin Học THPT

Trình độ: Cử nhân Sư phạm Tin học, Chứng chỉ hạng II, Chứng chỉ Tin học, Ngoại ngữ B1

Kinh nghiệm: 8+ năm kinh nghiệm tại Trường THPT Thuận Hóa