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

Mình ghi chú nhỏ trước nhé: hai trang trong ảnh được đánh số 102 và 103 (không phải 104–105 như đề bài). Mình sẽ giải đúng theo nội dung thực tế trên ảnh để khỏi nhầm lẫn.

Đây là phần đầu của Bài 18 – Thực hành tổng hợp thiết kế trang web, sách Tin học 12 (Định hướng Khoa học máy tính, bộ Kết nối tri thức với cuộc sống).

Tóm tắt lý thuyết

Mục tiêu bài học: sau bài này em tạo được trang web bằng HTML và định dạng bằng CSS.

Ý chính của dự án xây dựng website giới thiệu câu lạc bộ ngoại khoá:

• Một website gồm một trang chủ và các trang riêng cho từng nhóm/câu lạc bộ. Ở mức đơn giản có thể làm 3 trang: trang chủ, trang CLB thể thao, trang CLB nghệ thuật.
• Trang chủ chứa thông tin chung và liên kết tới các trang thành viên (như Hình 18.1), có thể thêm trang chứa biểu mẫu để đăng ký tham gia.
• Tất cả các trang nên dùng chung một tệp CSS để có phong cách trình bày thống nhất.
• Quy trình: lên ý tưởng bố cục từng phần → dùng CSS định dạng (kích thước, vị trí, màu sắc, cỡ chữ…).

Bố cục website (Hình 18.2):

Hai kỹ thuật CSS quan trọng được giới thiệu:

• Banner: dùng một ảnh làm nền (background: url(...)), phủ kín (background-size: cover), căn giữa chữ, dùng !important để ưu tiên định dạng.
• Slogan có 3 ô bằng nhau (mỗi ô rộng 1/3 trang): tạo một lớp dùng chung block_3. Vì thẻ div mặc định xếp dọc, nên cần thêm lớp Row rộng bằng cả trang để chứa 3 ô, giúp chúng nằm ngang.

Hoạt động: Thảo luận theo nhóm (trang 102)

Đây là câu hỏi mở để thảo luận. Mình gợi ý câu trả lời tham khảo cho từng câu.

Câu 1. Tổ chức cấu trúc website như thế nào cho phù hợp?

• Dùng một trang chủ (index.html) làm trung tâm, từ đó liên kết tới các trang con.
• Mỗi câu lạc bộ (hoặc nhóm CLB) có một trang riêng: ví dụ trang CLB thể thao, trang CLB nghệ thuật.
• Có thể thêm một trang chứa biểu mẫu đăng ký tham gia.
• Tất cả trang dùng chung một tệp CSS để đồng bộ giao diện và dễ bảo trì.

Câu 2. Với mỗi câu lạc bộ sẽ đưa những thông tin gì?

• Tên và logo/biểu tượng câu lạc bộ.
• Giới thiệu ngắn về lĩnh vực hoạt động, mục tiêu.
• Lịch sinh hoạt, địa điểm, thời gian.
• Thành tích nổi bật, các hoạt động đã tổ chức.
• Hình ảnh, video minh hoạ.
• Thông tin liên hệ và cách đăng ký tham gia.

Câu 3. Trình bày các trang web như thế nào cho đẹp và thống nhất với nhau?

• Dùng chung một tệp CSS cho tất cả các trang (liên kết bằng ).
• Thống nhất bố cục: đầu trang – nội dung chính – cuối trang.
• Dùng cùng bảng màu, cùng phông chữ, cùng kiểu tiêu đề và nút liên kết.
• Căn lề, khoảng cách (padding/margin) đồng đều giữa các phần.

Câu 4. Làm thế nào để website sinh động và đẹp mắt?

• Thêm ảnh, video chất lượng tốt làm minh hoạa.
• Dùng banner có ảnh nền nổi bật ở đầu trang.
• Phối màu hài hoà, có điểm nhấn cho tiêu đề và nút.
• Bố cục dạng lưới (chia cột) cho phần nội dung gọn gàng.
• Có thể thêm hiệu ứng nhẹ khi di chuột (hover) bằng CSS.

Câu hỏi mở đầu (trang 102)

Đề: Giả sử website có nhiều tệp HTML. Có thể chỉ dùng một tệp CSS duy nhất để định dạng cho toàn bộ các trang web không? Nếu có, hãy nêu các bước thực hiện.

Trả lời: Có thể. Đây chính là cách làm được khuyến khích để đảm bảo tính thống nhất và dễ bảo trì.

Các bước thực hiện:

1. Tạo một tệp CSS riêng, ví dụ style.css, đặt tất cả quy tắc định dạng vào đó.
2. Trong mỗi tệp HTML, thêm thẻ liên kết vào phần :

1. Đảm bảo đường dẫn tới tệp CSS đúng với vị trí lưu (cùng thư mục thì ghi tên tệp, khác thư mục thì ghi đường dẫn tương đối, ví dụ ../css/style.css).
2. Khi cần đổi giao diện toàn site, chỉ cần sửa một tệp CSS duy nhất, mọi trang sẽ cập nhật theo.

Lý do: CSS được thiết kế để tách phần định dạng ra khỏi nội dung. Nhiều tệp HTML có thể cùng tham chiếu tới một tệp CSS, nên một tệp CSS điều khiển được toàn bộ website.

Nhiệm vụ 1: Tạo tệp CSS (trang 103)

Đây là phần thực hành. Yêu cầu: tạo tệp CSS để trình bày website theo bố cục Hình 18.2.

Phần hướng dẫn cung cấp đoạn CSS mẫu cho banner:

.banner {
  background: url("../assets/img/bg-masthead.jpg") no-repeat center center;
  background-size: cover;
  padding-top: 12rem;
  padding-bottom: 12rem;
  text-align: center !important;
  color: darkred !important;
}

Giải thích từng dòng:

• background: url(...) no-repeat center center; — đặt ảnh nền, không lặp lại, căn giữa theo cả chiều ngang và dọc.
• background-size: cover; — phóng ảnh phủ kín toàn bộ vùng banner.
• padding-top và padding-bottom: 12rem; — tạo khoảng đệm trên/dưới để banner cao và thoáng.
• text-align: center !important; — căn giữa chữ; !important để ưu tiên đè lên các quy tắc khác.
• color: darkred !important; — màu chữ đỏ sẫm, có ưu tiên cao.

Gợi ý làm tiếp phần Slogan (theo mô tả trong sách): tạo lớp block_3 rộng 1/3 và lớp Row chứa chúng theo hàng ngang. Ví dụ tham khảo:

.Row {
  width: 100%;
  display: flex;        /* xếp các ô theo hàng ngang */
}
.block_3 {
  width: 33.33%;        /* mỗi ô chiếm 1/3 độ rộng trang */
  text-align: center;
  padding: 1rem;
}

Phần này sách sẽ hướng dẫn chi tiết tiếp ở các trang sau (104–105). Nếu em gửi đúng ảnh trang 104–105, mình sẽ giải tiếp đầy đủ đoạn CSS còn lại cho nội dung chính và footer nhé.