BÀI 11 - MÔ HÌNH HỘP, BỐ CỤC TRANG WEB (CÁNH DIỀU

Bài 11 - Mô hình hộp, bố cục trang web (Cánh diều - cs & ict)

Đây là bài soạn gợi ý trả lời SGK tin học 12 (bộ sách Cánh diều). Bài này là kiến thức cốt lõi chung cho cả hai định hướng: Khoa học máy tính (CS) và Tin học ứng dụng (ICT). Các em truy cập vào để tham khảo nhé. Chúc các em có nhiều sức khỏe và chăm ngoan học giỏi.

Nháy vào các mục bên dưới để xem nhanh hơn
Khởi động	Hoạt động	Luyện tập
Vận dụng	Câu hỏi tự kiểm tra

Khởi động (trang 83):

Em hãy truy cập trang chủ của các website: https://most gov.vn, https://tienphong.vn. Theo em, bố cục của hai trang web này có giống nhau không?

Gợi ý trả lời:

Theo em, bố cục của hai trang web này giống nhau: Cả hai trang web đều sử dụng thanh menu ngang ở đầu trang để điều hướng và bố cục ba cột dọc để hiển thị nội dung.

Hoạt động (trang 84):

Theo em, trên một dòng của màn hình trình duyệt web có thể hiển thị nhiều phần tử HTML được không?

Gợi ý trả lời:

Được, trên một dòng của màn hình trình duyệt web có thể hiển thị nhiều phần tử HTML cùng lúc. Điều này phụ thuộc vào loại phần tử HTML và cách chúng được định dạng bằng CSS.
- Dựa vào loại phần tử:
+ Phần tử nội tuyến (inline elements) như <span>, <a>, <strong> có thể xuất hiện trên cùng một dòng.
+ Phần tử khối (block elements) như <div>, <p>, <h1> mặc định chiếm toàn bộ chiều rộng của dòng, vì vậy chúng thường xuống dòng mới.
- Dùng CSS để kiểm soát hiển thị:
+ display: inline hoặc display: inline-block giúp phần tử xuất hiện trên cùng một dòng.
+ float và flexbox (display: flex) có thể sắp xếp nhiều phần tử trên cùng một hàng.
+ grid layout (display: grid) giúp bố trí các phần tử trên một dòng tùy chỉnh.

Luyện tập (trang 87):

Em hãy khai báo thêm các quy tắc định dạng cho trang web “Bai10-NVI.html" để: nội dung phần tử body có khoảng cách lề 30 pixel; phần tử h3 có đường viền tô liền nét (solid), khoảng cách vùng đệm là 20 pixel.

Gợi ý trả lời:

Thêm đoạn mã CSS sau vào trong thẻ <style> bên trong phần <head> của Bai10-NV1.html:

Vận dụng (trang 87):

Em hãy sử dụng phần tử div kết hợp với định dạng CSS để tách trang web Bai10-NV1.html thành hai phần: phần đầu trang và phần nội dung. Phần đầu trang là tiêu đề “Đóng góp ý kiến cho thư viện của nhà trường", phần nội dung là các thông tin còn lại. Tạo màu nền khác nhau cho hai phần này.

Gợi ý trả lời:

Giải thích
- Sử dụng <div class="header"> để tạo phần đầu trang chứa tiêu đề, với màu nền xanh dương và chữ trắng.
- Sử dụng <div class="content"> để tạo phần nội dung, với màu nền xám nhạt và phần văn bản đóng góp.
- CSS điều chỉnh màu sắc, căn giữa tiêu đề, thêm khoảng cách (padding) để tạo bố cục đẹp hơn.
Khi chạy tệp HTML này, trang web sẽ hiển thị hai phần rõ ràng với màu nền khác nhau.

Câu hỏi tự kiểm tra (trang 87):

Câu 1. Cho khai báo định dạng sau: p{height: 50 px; padding:5px; border: 2px solid; margin: 4px;}. Khi đó chiều cao của phần từ p tính theo pixel là bao nhiêu?
A. 60px
B. 72px
C. 54px
D. 64px
Câu 2. Cần thiết lập hiển thị theo dòng hoặc theo khối để tạo trang web như ở Hình 7, mỗi phát biểu dưới đây là đúng hay sai?

a) Theo mặc định, các phần tử input được hiển thị theo khối nên khi khai báo các phần tử input trong văn bản HTML không cần xác định thuộc tính display mà các điều khiển trên biểu mẫu vẫn hiển thị đúng như yêu cầu.
b) Để hiển thị như yêu cầu cần định dạng các label được hiển thị theo khối bằng khai báo định dạng label {display: block). Phần body của văn bản HTML khai báo như sau:

c) Để hiển thị như yêu cầu cần định dạng các label được hiển thị theo khối bằng khai báo label {display: block}. Phần body của văn bản HTML khai báo như sau:

d) Theo mặc định, các phần tử input được hiển thị theo dòng nên cần khai báo định dạng hiển thị theo khối cho hai ô text nhập dữ liệu .bl {display: block}. Phần body của văn bản HTML khai báo như sau:

Gợi ý trả lời:

Câu 1.
Tính tổng chiều cao của phần tử <p>, chúng ta sử dụng công thức:
Chiều cao tổng = height + padding trên + padding dưới + border trên+border dưới + margin trên + margin dưới
Dựa vào khai báo CSS:
- height = 50px (chiều cao nội dung)
- padding = 5px (cả trên và dưới)
- border = 2px (cả trên và dưới)
- margin = 4px (cả trên và dưới)
Tính toán:
50+(5×2)+(2×2)+(4×2)=50+10+4+8=72px
Vậy: đáp án đúng là B (72px)
Câu 2.
Phát biểu a)
"Theo mặc định, các phần tử input được hiển thị theo khối nên khi khai báo các phần tử input trong văn bản HTML không cần xác định thuộc tính display mà các điều khiển trên biểu mẫu vẫn hiển thị đúng như yêu cầu."
⤷ Sai:
- Các phần tử <input> mặc định thuộc nhóm inline-block, không phải block.
- Do đó, nếu không có CSS tùy chỉnh, các phần tử <input> sẽ nằm trên cùng một dòng với các phần tử khác, thay vì hiển thị theo khối.
Phát biểu b)
"Để hiển thị như yêu cầu cần định dạng các label được hiển thị theo khối bằng khai báo định dạng label {display: block}. Phần body của văn bản HTML khai báo như sau:"
⤷ Đúng:
- Mặc định, <label> là inline.
- Nếu muốn hiển thị mỗi <label> trên một dòng riêng biệt (giống như trong các biểu mẫu nhập liệu), cần đặt:
label {
display: block;
}
Phát biểu c)
"Để hiển thị như yêu cầu cần định dạng các label được hiển thị theo khối bằng khai báo label {display: block}. Phần body của văn bản HTML khai báo như sau:"
⤷ Đúng (giống phát biểu b):
- Vì cách định dạng này đảm bảo mỗi <label> nằm trên một dòng riêng.
Phát biểu d)
"Theo mặc định, các phần tử input được hiển thị theo dòng nên cần khai báo định dạng hiển thị theo khối cho hai ô text nhập dữ liệu .bl {display: block}. Phần body của văn bản HTML khai báo như sau:"
⤷ Đúng:
- <input> mặc định là inline-block, tức là nó có thể xuất hiện trên cùng một dòng với các phần tử khác.
- Để làm cho chúng hiển thị thành khối riêng biệt, ta cần đặt:
.bl {
display: block;
}

---The end!---

CÙNG CHUYÊN MỤC: