Bài tập — Bài 16: Định dạng khung

Phần 1: Câu hỏi Trắc nghiệm (Nhận biết & Thông hiểu)

Câu 1. Nội dung nào sau đây phản ánh đúng kiến thức cần ghi nhớ trong bài Bài 16: Định dạng khung? A. Mô hình hộp gồm: nội dung, padding, border, margin. B. Bỏ qua các khái niệm cơ bản và chỉ học thuộc lòng kết quả cuối cùng mà không cần hiểu bản chất. C. Chỉ áp dụng kiến thức trong một trường hợp duy nhất, không cần kiểm tra điều kiện hay đơn vị. D. Các nội dung trong bài hoàn toàn độc lập và không có mối liên hệ nào với thực tiễn hay các bài học khác.

Câu 2. Khi học và vận dụng bài Bài 16: Định dạng khung, khẳng định nào dưới đây là chính xác? A. Không cần đọc kĩ đề bài hay phân tích dữ kiện trước khi thực hiện các bước giải. B. padding là khoảng trống bên trong viền; margin là khoảng cách bên ngoài viền. C. Mọi khái niệm trong bài đều có thể thay thế tùy ý cho nhau mà không làm thay đổi kết quả. D. Chỉ cần ghi đáp số ngắn gọn, bỏ qua toàn bộ bước lập luận, giải thích và kiểm tra lại.

Câu 3. Theo phần Kiến thức trọng tâm của bài Bài 16: Định dạng khung, phát biểu nào sau đây là đúng? A. Kết luận ngay kết quả khi chưa đối chiếu với quy tắc hoặc định nghĩa trong bài học. B. Thay đổi toàn bộ quy tắc trọng tâm của bài học theo cảm tính cá nhân. C. Trong CSS, mỗi phần tử HTML được coi như một hộp chữ nhật gồm bốn lớp: nội dung (content), phần đệm (padding) là khoảng trống giữa nội dung và viền, viền (border) bao quanh phần tử và lề ngoài (margin) là khoảng cách tới các phần tử xung quanh. D. Bỏ qua việc rèn luyện qua ví dụ minh họa và bài tập thực hành của tiết học.

Câu 4. Để nắm vững và vận dụng tốt bài Bài 16: Định dạng khung, học sinh cần lưu ý điều nào sau đây? A. Không cần ghi nhớ các lưu ý trọng tâm vì chúng không ảnh hưởng đến việc làm bài tập. B. Áp dụng ngược lại hoàn toàn so với quy tắc và hướng dẫn trong phần kiến thức trọng tâm. C. Chỉ cần đọc lướt tiêu đề bài học mà không cần nắm vững nội dung chi tiết từng mục. D. Thuộc tính width và height đặt chiều rộng, chiều cao của phần nội dung; padding tạo khoảng trống bên trong, border vẽ viền với độ dày, kiểu và màu sắc, margin tạo khoảng cách bên ngoài.

Phần 2: Bài tập Tự luận & Thực hành theo tiết học

Bài 1 (Cơ bản — Hệ thống hóa kiến thức trọng tâm). Dựa vào phần Kiến thức trọng tâm của bài Bài 16: Định dạng khung, em hãy trình bày các khái niệm, quy tắc hoặc nội dung cốt lõi của tiết học và nêu ý nghĩa của chúng.

Bài 2 (Thực hành — Phân tích & Giải mẫu theo ví dụ tiết học). Đọc kĩ tình huống/ví dụ trọng tâm của tiết học dưới đây, sau đó tự trình bày lại các bước thực hiện và nêu nhận xét rút ra:

Yêu cầu: tạo hộp thông báo rộng 300px, nền vàng nhạt, viền cam dày 2px, padding 12px và margin 20px.

Bài 3 (Vận dụng — Áp dụng quy tắc ghi nhớ vào bài tập). Vận dụng các điểm ghi nhớ trọng tâm của bài Bài 16: Định dạng khung để giải thích hoặc thực hiện yêu cầu thực hành mở rộng sau:

.thong-bao { width: 300px; background-color: #FFF9C4; border: 2px solid orange; padding: 12px; margin: 20px; }


**Bài 4 (Luyện tập học kì — Mức độ Cơ bản).**
Hãy thiết kế biểu mẫu khảo sát ý kiến học sinh về câu lạc bộ Tin học gồm ít nhất 4 loại ô nhập khác nhau (text, email, radio, checkbox, textarea...). Viết mã HTML cho biểu mẫu đó.

**Bài 5 (Luyện tập học kì — Mức độ Thông hiểu).**
Một trường học muốn lắp mạng wifi phủ toàn bộ 3 tầng của tòa nhà. Hãy nêu các thiết bị cần dùng và cách bố trí sơ bộ.

**Bài 6 (Luyện tập học kì — Mức độ Vận dụng & Nâng cao).**
Phân tích: Vì sao khi thiết kế mạng, người ta thường vẽ sơ đồ mạng trước khi lắp đặt thiết bị? Nêu 3 lợi ích.

## Phần 3: Đáp án & Hướng dẫn giải chi tiết

### 1. Đáp án phần Trắc nghiệm

- **Bảng đáp án:** **1-A**, **2-B**, **3-C**, **4-D**.
- **Giải thích chi tiết:**
  - **Câu 1 (A):** Khẳng định đúng theo mục *Ghi nhớ* của bài: *"Mô hình hộp gồm: nội dung, padding, border, margin."*
  - **Câu 2 (B):** Khẳng định đúng theo nội dung cốt lõi của tiết học: *"`padding` là khoảng trống bên trong viền; `margin` là khoảng cách bên ngoài viền."*
  - **Câu 3 (C):** Khẳng định chuẩn xác theo phần *Kiến thức trọng tâm*: *"Trong CSS, mỗi phần tử HTML được coi như một hộp chữ nhật gồm bốn lớp: nội dung (content), phần đệm (padding) là khoảng trống giữa nội dung và viền, viền (border) bao quanh phần tử và lề ngoài (margin) là khoảng cách tới các phần tử xung quanh."*
  - **Câu 4 (D):** Khẳng định đúng theo hướng dẫn trọng tâm của bài: *"Thuộc tính `width` và `height` đặt chiều rộng, chiều cao của phần nội dung; `padding` tạo khoảng trống bên trong, `border` vẽ viền với độ dày, kiểu và màu sắc, `margin` tạo khoảng cách bên ngoài."*

### 2. Hướng dẫn giải phần Tự luận & Thực hành

- **Bài 1:**
  - **Nội dung cốt lõi cần trình bày:** Trong CSS, mỗi phần tử HTML được coi như một hộp chữ nhật gồm bốn lớp: nội dung (content), phần đệm (padding) là khoảng trống giữa nội dung và viền, viền (border) bao quanh phần tử và lề ngoài (margin) là khoảng cách tới các phần tử xung quanh. Đây gọi là mô hình hộp (box model).
  - **Tổng kết ghi nhớ:** Mô hình hộp gồm: nội dung, padding, border, margin.; `padding` là khoảng trống bên trong viền; `margin` là khoảng cách bên ngoài viền.; `border` gồm độ dày, kiểu và màu sắc, ví dụ `2px solid orange`.
- **Bài 2:**
  - **Hướng dẫn phân tích & trình bày:** Dựa trực tiếp vào dữ kiện trong ví dụ minh họa của tiết học: *Yêu cầu: tạo hộp thông báo rộng 300px, nền vàng nhạt, viền cam dày 2px, padding 12px và margin 20px.*
  - **Lưu ý khi trình bày:** Xác định rõ yêu cầu, áp dụng đúng quy tắc/khái niệm trong mục 1 và kiểm tra lại kết quả cuối cùng.
- **Bài 3:**
  - **Phương pháp giải:** Áp dụng các quy tắc ghi nhớ của bài **Bài 16: Định dạng khung** (Mô hình hộp gồm: nội dung, padding, border, margin.; `padding` là khoảng trống bên trong viền; `margin` là khoảng cách bên ngoài viền.; `border` gồm độ dày, kiểu và màu sắc, ví dụ `2px solid orange`.).
  - **Lời giải mẫu/Nhận xét:** ```css
.thong-bao {
  width: 300px;
  background-color: #FFF9C4;
  border: 2px solid orange;
  padding: 12px;
  margin: 20px;
}

Bài 4: Biểu mẫu có ít nhất 4 loại ô nhập, ví dụ: text (họ tên), email, radio (mức độ hài lòng), checkbox (hoạt động muốn tham gia), textarea (góp ý). Mã HTML đúng cú pháp từng loại. (Chấm theo tính đầy đủ, đúng cú pháp.)
Bài 5: Thiết bị: router chính, các access point mỗi tầng (2–3 chiếc), dây mạng, switch nếu cần. Bố trí: router ở tầng giữa, access point đặt ở vị trí trung tâm mỗi tầng, tránh vật cản kim loại, đảm bảo vùng phủ chồng lấn nhẹ.
Bài 6: Sơ đồ giúp: thấy rõ thiết bị, kết nối; dự toán thiết bị, dây, chi phí; phát hiện thiếu sót trước khi lắp; thuận tiện cho bảo trì, mở rộng sau này.

Phần 1: Câu hỏi Trắc nghiệm (Nhận biết & Thông hiểu)

Phần 2: Bài tập Tự luận & Thực hành theo tiết học

Yêu cầu: tạo hộp thông báo rộng 300px, nền vàng nhạt, viền cam dày 2px, padding 12px và margin 20px.

.thong-bao { width: 300px; background-color: #FFF9C4; border: 2px solid orange; padding: 12px; margin: 20px; }

**Bài 4 (Luyện tập học kì — Mức độ Cơ bản).** Hãy thiết kế biểu mẫu khảo sát ý kiến học sinh về câu lạc bộ Tin học gồm ít nhất 4 loại ô nhập khác nhau (text, email, radio, checkbox, textarea...). Viết mã HTML cho biểu mẫu đó. **Bài 5 (Luyện tập học kì — Mức độ Thông hiểu).** Một trường học muốn lắp mạng wifi phủ toàn bộ 3 tầng của tòa nhà. Hãy nêu các thiết bị cần dùng và cách bố trí sơ bộ. **Bài 6 (Luyện tập học kì — Mức độ Vận dụng & Nâng cao).** Phân tích: Vì sao khi thiết kế mạng, người ta thường vẽ sơ đồ mạng trước khi lắp đặt thiết bị? Nêu 3 lợi ích. ## Phần 3: Đáp án & Hướng dẫn giải chi tiết ### 1. Đáp án phần Trắc nghiệm - **Bảng đáp án:** **1-A**, **2-B**, **3-C**, **4-D**. - **Giải thích chi tiết:** - **Câu 1 (A):** Khẳng định đúng theo mục *Ghi nhớ* của bài: *"Mô hình hộp gồm: nội dung, padding, border, margin."* - **Câu 2 (B):** Khẳng định đúng theo nội dung cốt lõi của tiết học: *"`padding` là khoảng trống bên trong viền; `margin` là khoảng cách bên ngoài viền."* - **Câu 3 (C):** Khẳng định chuẩn xác theo phần *Kiến thức trọng tâm*: *"Trong CSS, mỗi phần tử HTML được coi như một hộp chữ nhật gồm bốn lớp: nội dung (content), phần đệm (padding) là khoảng trống giữa nội dung và viền, viền (border) bao quanh phần tử và lề ngoài (margin) là khoảng cách tới các phần tử xung quanh."* - **Câu 4 (D):** Khẳng định đúng theo hướng dẫn trọng tâm của bài: *"Thuộc tính `width` và `height` đặt chiều rộng, chiều cao của phần nội dung; `padding` tạo khoảng trống bên trong, `border` vẽ viền với độ dày, kiểu và màu sắc, `margin` tạo khoảng cách bên ngoài."* ### 2. Hướng dẫn giải phần Tự luận & Thực hành - **Bài 1:** - **Nội dung cốt lõi cần trình bày:** Trong CSS, mỗi phần tử HTML được coi như một hộp chữ nhật gồm bốn lớp: nội dung (content), phần đệm (padding) là khoảng trống giữa nội dung và viền, viền (border) bao quanh phần tử và lề ngoài (margin) là khoảng cách tới các phần tử xung quanh. Đây gọi là mô hình hộp (box model). - **Tổng kết ghi nhớ:** Mô hình hộp gồm: nội dung, padding, border, margin.; `padding` là khoảng trống bên trong viền; `margin` là khoảng cách bên ngoài viền.; `border` gồm độ dày, kiểu và màu sắc, ví dụ `2px solid orange`. - **Bài 2:** - **Hướng dẫn phân tích & trình bày:** Dựa trực tiếp vào dữ kiện trong ví dụ minh họa của tiết học: *Yêu cầu: tạo hộp thông báo rộng 300px, nền vàng nhạt, viền cam dày 2px, padding 12px và margin 20px.* - **Lưu ý khi trình bày:** Xác định rõ yêu cầu, áp dụng đúng quy tắc/khái niệm trong mục 1 và kiểm tra lại kết quả cuối cùng. - **Bài 3:** - **Phương pháp giải:** Áp dụng các quy tắc ghi nhớ của bài **Bài 16: Định dạng khung** (Mô hình hộp gồm: nội dung, padding, border, margin.; `padding` là khoảng trống bên trong viền; `margin` là khoảng cách bên ngoài viền.; `border` gồm độ dày, kiểu và màu sắc, ví dụ `2px solid orange`.). - **Lời giải mẫu/Nhận xét:** ```css .thong-bao { width: 300px; background-color: #FFF9C4; border: 2px solid orange; padding: 12px; margin: 20px; }

Bài 4: Biểu mẫu có ít nhất 4 loại ô nhập, ví dụ: text (họ tên), email, radio (mức độ hài lòng), checkbox (hoạt động muốn tham gia), textarea (góp ý). Mã HTML đúng cú pháp từng loại. (Chấm theo tính đầy đủ, đúng cú pháp.)

Bài 5: Thiết bị: router chính, các access point mỗi tầng (2–3 chiếc), dây mạng, switch nếu cần. Bố trí: router ở tầng giữa, access point đặt ở vị trí trung tâm mỗi tầng, tránh vật cản kim loại, đảm bảo vùng phủ chồng lấn nhẹ.

Bài 6: Sơ đồ giúp: thấy rõ thiết bị, kết nối; dự toán thiết bị, dây, chi phí; phát hiện thiếu sót trước khi lắp; thuận tiện cho bảo trì, mở rộng sau này.