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 106

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

Nguon: Tin Hoc 12 KHMT (trang 106 – 107)
⚠️ Lưu ý: Ảnh em gửi thực tế là trang 104 – 105 (xem số trang ở góc dưới), nội dung thuộc Bài 18 về thiết kế bố cục trang web bằng CSS. Thầy sẽ giải đúng theo nội dung có trong ảnh.

🔍 Kiến thức cần nhớ

Nội dung hai trang này hướng dẫn cách dùng CSS Flexbox để chia bố cục trang web thành nhiều ô trên cùng một hàng.

1. Lớp .row (hàng) — dùng Flexbox để xếp các ô ngang nhau:

.row {
  display: flex;        /* Kích hoạt mô hình hộp linh hoạt */
  flex-wrap: wrap;      /* Cho phép xuống dòng khi thiếu chỗ */
  margin-top: -1;
  max-width: 100%;
  padding-right: 3rem;
  padding-left: 3rem;
}

2. Lớp .block_3 — mỗi ô chiếm 1/3 chiều rộng hàng:

.block_3 {
  flex: 0 0 auto;
  width: 33.33333333%;   /* = 100% ÷ 3 */
}

3. Lớp .slogan — khối bao ngoài, định dạng nền và canh giữa:

.slogan {
  background-color: rgb(248, 249, 250) !important;
  text-align: center !important;
  width: 100%;
  padding-right: 0.5rem;
  padding-left: 3rem;
  padding-top: 7rem;
  padding-bottom: 7rem;
}

4. Cấu trúc HTML tương ứng — dùng các thẻ

lồng nhau, gắn lớp CSS đã tạo:


  

    

      
Năng động

      
Hoạt động năng nổ và hiệu quả

    

    

      
Đam mê

      
Cháy hết mình trong các cuộc chơi

    

    

      
Toả sáng

      
Giành những giải thưởng cao nhất
💡 Mẹo nhớ: Quy tắc chia cột bằng Flexbox: - Chia n cột bằng nhau → mỗi cột rộng (100/n)% → tạo lớp block_n. - display: flex đặt ở lớp cha (hàng), width đặt ở lớp con (ô). - !important ép buộc thuộc tính được ưu tiên, ghi đè lên các quy tắc CSS khác.

⚙️ Bài tập

Phần này gồm Luyện tập (2 câu) và Vận dụng (1 câu) ở cuối trang 105.

Câu 1 (Luyện tập)

Đề bài: Tạo trang dang_ki.html chứa biểu mẫu đăng kí câu lạc bộ và bổ sung liên kết tới trang dang_ki trong phần cuối trang của tất cả các trang.

Cách 1 — Tạo biểu mẫu bằng thẻ
chuẩn

Tạo tệp dang_ki.html với biểu mẫu thu thập thông tin học sinh muốn đăng kí:




  
  Đăng kí câu lạc bộ
  


  

  

    
Biểu mẫu đăng kí câu lạc bộ


    
      

        
        
      

      

        
        
      

      

        
        
      

      

        
        
      

      

        

        
      

      

        
        
      

    
  


  
  

    Trang chủ |
    Thể thao |
    Nghệ thuật |
    Đăng kí

Bổ sung liên kết ở cuối tất cả các trang: Trong phần footer của index.html, thethao.html, nghethuat.html, thêm dòng liên kết tới trang đăng kí:

Đăng kí
Cách 2 — Thêm thuộc tính kiểm tra dữ liệu (validation)

Để biểu mẫu chuyên nghiệp hơn, dùng thêm các thuộc tính HTML5 giúp trình duyệt tự kiểm tra dữ liệu trước khi gửi:
  • required: bắt buộc nhập.
  • placeholder: gợi ý nội dung cần nhập.
  • pattern: yêu cầu định dạng (ví dụ đúng 10 chữ số).
💡 Mẹo nhớ: Mỗi ô nhập nên có một thẻ đi kèm, thuộc tính for của label phải trùng với id của ô nhập để tăng khả năng truy cập (accessibility).

Câu 2 (Luyện tập)

Đề bài: Thay đổi định dạng và màu sắc của phông chữ trong các vùng khi di chuyển chuột qua.

Cách 1 — Dùng lớp giả :hover trong CSS

Lớp giả (pseudo-class) :hover áp dụng định dạng khi con trỏ chuột di chuyển qua phần tử. Thêm vào tệp style.css:

/* Đổi màu chữ và nền khi rê chuột vào mỗi ô block_3 */
.block_3:hover {
  color: rgb(220, 53, 69);      /* chữ chuyển sang màu đỏ */
  background-color: rgb(255, 243, 205);
  font-weight: bold;            /* in đậm */
  cursor: pointer;              /* con trỏ thành hình bàn tay */
}

/* Đổi màu liên kết ở footer khi rê chuột */
.footer a:hover {
  color: rgb(0, 123, 255);
  text-decoration: underline;
}
Cách 2 — Thêm hiệu ứng chuyển mượt với transition

Để hiệu ứng đổi màu diễn ra từ từ thay vì đột ngột, kết hợp thuộc tính transition:

.block_3 {
  flex: 0 0 auto;
  width: 33.33333333%;
  transition: all 0.3s ease;   /* hiệu ứng mượt trong 0,3 giây */
}

.block_3:hover {
  color: rgb(220, 53, 69);
  background-color: rgb(255, 243, 205);
  transform: scale(1.05);      /* phóng to nhẹ 5% */
}
⚠️ Lưu ý thi: :hover chỉ là hiệu ứng tạm thời khi rê chuột, không làm thay đổi vĩnh viễn nội dung. Đặt transition ở trạng thái thường (không phải trong :hover) thì hiệu ứng mới mượt cả khi vào và khi ra.

Câu 3 (Vận dụng)

Đề bài: Hãy đưa ra một thiết kế khác cho website đã tạo ở phần Thực hành. Viết định dạng theo thiết kế mới và chuyển toàn bộ website sang định dạng mới.

Đây là bài mở, mục tiêu rèn luyện khả năng tách biệt nội dung (HTML) và trình bày (CSS). Thầy gợi ý hai hướng thiết kế mới.

Cách 1 — Đổi bố cục từ 3 cột sang 2 cột

Tạo lớp block_2 để mỗi ô chiếm 1/2 chiều rộng, thay cho block_3:

.block_2 {
  flex: 0 0 auto;
  width: 50%;          /* = 100% ÷ 2 */
}

Sau đó trong HTML chỉ cần đổi tên lớp block_3 thành block_2. Toàn bộ nội dung giữ nguyên, chỉ thay đổi cách hiển thị.

Cách 2 — Đổi phong cách màu sắc (chuyển sang giao diện tối – dark theme)

Sửa lại các biến màu trong style.css để chuyển toàn website sang tông tối hiện đại:

body {
  background-color: rgb(33, 37, 41);   /* nền đen xám */
  color: rgb(248, 249, 250);           /* chữ trắng sáng */
  font-family: 'Segoe UI', Arial, sans-serif;
}

.banner {
  background-color: rgb(13, 110, 253);
  color: white;
}

.slogan {
  background-color: rgb(52, 58, 64) !important;
  color: rgb(248, 249, 250) !important;
}

.footer a {
  color: rgb(102, 178, 255);
}

Ý nghĩa cốt lõi: Nhờ tách CSS ra tệp riêng (style.css), ta chỉ cần sửa một tệp định dạng là toàn bộ các trang HTML (index, thethao, nghethuat, dang_ki) tự động đổi sang giao diện mới mà không phải sửa từng trang.

💡 Mẹo nhớ: Đây chính là sức mạnh của CSS — "viết một lần, dùng nhiều nơi". Đó là lí do ta dùng ở tất cả các trang.
🎯 Ghi nhớ: - Flexbox (display: flex) là công cụ chính để chia cột: lớp cha dùng flex, lớp con dùng width = (100/n)%. - Biểu mẫu dùng thẻ
với các ô ,