HocKhaThư viện lời giải bài tập

Giải Tin học 12 - Định hướng khoa học máy tính trang 58

Lời giải chi tiết SGK Lớp 12 · Môn Tin Học · Trang 58–59

Tóm tắt lý thuyết

Trang 56 là phần cuối của Bài 9 (thực hành tạo danh sách và bảng trong HTML), kèm hai bài tập Luyện tập – Vận dụng. Những điểm cần nhớ:

  • Tạo bảng dùng thẻ , mỗi hàng là , mỗi ô tiêu đề là chứa bốn
    , ô dữ liệu là .
  • Tiêu đề bảng dùng thẻ
    • .
  • Gộp ô theo chiều dọc bằng rowspan, gộp ô theo chiều ngang bằng colspan.
  • Tạo viền có hai cách: thuộc tính border="1" hoặc thuộc tính style="border:1px solid".

    • Trang 57 mở đầu Bài 10 – Tạo liên kết:

    • Siêu văn bản (hypertext): văn bản chứa thêm âm thanh, hình ảnh và đặc biệt là các siêu liên kết (hyperlink) dẫn tới văn bản khác. Người xem không cần đọc tuần tự mà nhảy tới vị trí bất kỳ qua liên kết.
    • Thẻ tạo liên kết là , cú pháp chung:
    Nội dung hiển thị tại vị trí đặt liên kết
    • Thuộc tính href chứa địa chỉ (URL) của tài liệu đích, đặt trong cặp nháy kép.
    • Có hai loại URL:
    • Đường dẫn tuyệt đối: địa chỉ đầy đủ gồm giao thức (http:// hoặc https://), tên miền và đường dẫn chi tiết. Dùng khi tài liệu nằm trên máy chủ khác. Ví dụ: href="https://www.nxbgd.vn/".
    • Đường dẫn tương đối: (tiếp ở trang sau).

    Bài tập Luyện tập (trang 56)

    Đề: 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. Dùng màu xanh cho viền của ô hai dòng đầu bảng và dùng ba màu đỏ, vàng, xanh cho ba chữ Toán, Vật lí và Hoá học.

    Lời giải:

    Ý tưởng: bỏ border="1" ở thẻ

    , thay bằng style="border:1px solid" cho cả
    và từng ô. Riêng các ô của hai dòng đầu thì viền màu xanh, ba ô chữ môn học thì tô màu chữ tương ứng bằng color.

    


    
    Bảng điểm
    Họ tên Điểm
    Toán Vật lí Hoá học
    Nguyễn Văn An 8.5 7.0 9.0

    Giải thích:

    • border-collapse:collapse giúp các đường viền của các ô gộp sát vào nhau, nhìn gọn như bảng thật.
    • border:1px solid blue đặt cho các ô của hai dòng đầu để có viền màu xanh.
    • color:red, color:gold (vàng), color:green đặt riêng cho ba thẻ
    chứa chữ Toán, Vật lí, Hoá học để đổi màu chữ.

    Bài tập Vận dụng (trang 56)

    Đề: 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 vẽ bảng tương tự Hình 9.5 và bổ sung dữ liệu vào các hàng phía dưới.

    Lời giải:

    # Dữ liệu mẫu: mỗi phần tử là một bộ (họ tên, Toán, Vật lí, Hoá học)
data = [
    ("Nguyễn Văn An", 8.5, 7.0, 9.0),
    ("Trần Thị Bình", 6.0, 8.5, 7.5),
    ("Lê Hoàng Cường", 9.0, 9.0, 8.0),
]

# Bắt đầu xây dựng nội dung HTML
html = []
html.append("")
html.append("")
html.append("Bảng điểm")
html.append("")
html.append("")
html.append("")

# Hàng tiêu đề
html.append("")
for tieu_de in ["Họ tên", "Toán", "Vật lí", "Hoá học"]:
    html.append(f"  ")
html.append("")

# Bổ sung từng hàng dữ liệu
for ho_ten, toan, ly, hoa in data:
    html.append("")
    html.append(f"  ")
    html.append(f"  ")
    html.append(f"  ")
    html.append(f"  ")
    html.append("")

html.append("
    Bảng điểm học sinh
    {tieu_de}
    {ho_ten}{toan}{ly}{hoa}
    ")
html.append("")
html.append("")

# Ghi ra tệp HTML
with open("bangdiem.html", "w", encoding="utf-8") as f:
    f.write("\n".join(html))

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

    Giải thích từng bước:

    1. data là danh sách các bộ (tuple), số phần tử chính là n hàng – chương trình không phụ thuộc vào n cụ thể.
    2. Dùng danh sách html rồi append từng dòng, cuối cùng nối lại bằng "\n".join(...) cho dễ đọc.
    3. Vòng lặp for đầu tạo hàng tiêu đề bằng thẻ
    		.
  • Vòng lặp for thứ hai duyệt qua từng bộ dữ liệu, tự động tạo
    • tương ứng. Đây chính là phần "bổ sung dữ liệu vào các hàng phía dưới".
  • open(..., "w", encoding="utf-8") ghi nội dung ra tệp bangdiem.html. Mở tệp này bằng trình duyệt sẽ thấy bảng điểm.

    • Câu hỏi gợi mở (trang 57)

    Câu mở đầu Bài 10: Em hãy nêu những điểm khác biệt khi đọc thông tin trên trang web với việc đọc sách, báo giấy. Điểm khác biệt nào quan trọng nhất?

    Gợi ý trả lời:

    Tiêu chíTrang webSách, báo giấy
    Cách đọcNhảy tự do qua liên kết, không theo thứ tựĐọc tuần tự từng trang
    Nội dungChữ, hình, âm thanh, videoChủ yếu chữ và hình tĩnh
    Cập nhậtSửa, cập nhật ngay lập tứcCố định khi đã in
    Tương tácTìm kiếm, bấm liên kếtKhông tương tác

    Điểm quan trọng nhất là siêu liên kết – cho phép nhảy tới nội dung liên quan ở bất kỳ đâu, không cần đọc tuần tự.

    Hoạt động 1 – Nhận biết siêu văn bản: Tệp .docx (Word) có thể là siêu văn bản còn tệp .txt (Notepad) thì không. Theo em siêu văn bản có đặc điểm gì?

    Gợi ý trả lời: Siêu văn bản có những đặc điểm:

    • Chứa nhiều dạng dữ liệu: ngoài chữ còn có hình ảnh, âm thanh, video, định dạng (font, màu, cỡ chữ).
    • Chứa các siêu liên kết dẫn tới văn bản hoặc tài nguyên khác.
    • Cho phép đọc không tuần tự, truy cập vị trí bất kỳ qua liên kết.

    Tệp .txt chỉ chứa văn bản thuần (plain text), không có định dạng và không có liên kết nên không phải siêu văn bản.

    Nếu em gửi đúng ảnh trang 58 – 59 thầy sẽ giải tiếp phần đường dẫn tương đối và các bài tập kế tiếp nhé.

    Chế độ đọc sách →