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 lý thuyết tin học 12 - sách Cánh diều. Bài học 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). Lý thuyết được tóm tắt ngắn gọn, dễ hiểu, bám sát nội dung cốt lõi của bài học. Quý Thầy Cô và các em học sinh truy cập để làm tài liệu tham khảo nhé. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.

---

1. Mô hình hộp trong trình bày phần tử HTML

 Mỗi phần tử HTML khi hiển thị trên trình duyệt được cấu tạo theo mô hình hộp, gồm:
  - Vùng nội dung (content): Chứa nội dung chính.
  - Vùng đệm (padding): Khoảng cách giữa nội dung và đường viền.
  - Đường viền (border): Viền bao quanh nội dung.
  - Vùng lề (margin): Khoảng cách giữa phần tử với các phần tử khác.

 Ví dụ: CSS điều chỉnh kích thước vùng lề, đệm, và đường viền của phần tử <p> để thay đổi khoảng cách hiển thị trên trang web.

2. Hiển thị phần tử theo khối, theo dòng

 - Phần tử khối (block-level elements):

 - Phần tử dòng (inline elements):

 - CSS có thể thay đổi cách hiển thị mặc định bằng thuộc tính display:

 Ví dụ:

3. Bố cục trang web

 Bố cục giúp sắp xếp các thành phần trên trang web một cách hợp lý. Một trang web điển hình có các phần chính sau:
  - Header: Chứa logo, tiêu đề trang web.
  - Navigation: Thanh điều hướng chứa các liên kết.
  - Content: Nội dung chính của trang web.
  - Footer: Chứa thông tin bổ trợ như bản quyền, liên kết nhanh.
  - Tạo bố cục bằng <div> và CSS:
   + Sử dụng <div> để chia các vùng trong trang web.
   + Định dạng từng phần bằng class hoặc id trong CSS.
  - Ví dụ:

 Tóm lại:
  - Mô hình hộp giúp kiểm soát bố cục phần tử bằng margin, padding, border.
  - Hiển thị phần tử có thể thay đổi giữa khối (block) và dòng (inline).
  - Bố cục trang web được tạo bằng <div> kết hợp với CSS để định dạng.

---The End!---

CÙNG CHUYÊN MỤC:

Bài 1. Giới thiệu về trí tuệ nhân tạo
Bài 2. Giới thiệu về trí tuệ nhân tạo (tiếp theo)

Bài 1. Cơ sở về mạng máy tính
Bài 2. Mô hình và các giao thức mạng
Bài 3. Thực hành thiết lập kết nối và sử dụng mạng

Bài. Giữ gìn tính nhân văn trong thế giới ảo

Bài 1. Làm quen với ngôn ngữ đánh dấu siêu văn bản
Bài 2. Định dạng văn bản và tạo siêu liên kết
Bài 3. Thực hành định dạng văn bản và tạo siêu liên kết
Bài 4. Trình bày nội dung theo dạng danh sách, bảng biểu
Bài 5. Chèn hình ảnh, âm thanh, video và sử dụng khung
Bài 6. Tạo biểu mẫu
Bài 7. Thực hành tạo biểu mẫu
Bài 8. Làm quen với CSS
Bài 9. Thực hành định dạng một số thuộc tính CSS
Bài 10. Bộ chọn lớp, bộ chọn định danh
Bài 11. Mô hình hộp, bố cục trang web
Bài 12. Dự án nhỏ: Tạo trang web báo tường

Bài 1. Giới thiệu nhóm nghề Dịch vụ và Quản trị trong ngành Công nghệ thông tin
Bài 2. Một số nghề khác trong ngành Công nghệ thông tin và một số nghề ứng dụng Công nghệ thông tin
Bài 3. Dự án nhỏ: Tìm hiểu thông tin tuyển sinh và hướng nghiệp về lĩnh vực đào tạo “Máy tính và Công nghệ thông tin” ở Việt Nam.

Bài 1. Thực hành kết nối máy tính với ti vi thông minh
Bài 2. Thực hành theo nhóm: Kết nối các thiết bị không dây cho ứng dụng

Bài 1. Giới thiệu phần mềm tạo website
Bài 2. Tạo website bằng phần mềm
Bài 3. Tạo thanh điều hướng cho trang web
Bài 4. Tạo nội dung văn bản cho trang web
Bài 5. Tạo nội dung hình ảnh cho trang web
Bài 6. Tạo biểu mẫu cho trang web và xuất bản website
Bài 7. Tạo sản phẩm theo nhóm (Bài tập nhóm)

Bài 1. Môi trường truyền dẫn
Bài 2. Thiết bị mạng
Bài 3. Thiết bị mạng LAN
Bài 4. Thực hành về nhận diện thiết bị mạng và thiết kế mạng LAN (Bài tập nhóm)

Bài 1. Giới thiệu về học máy
Bài 2. Giới thiệu về khoa học dữ liệu
Bài 3. Giới thiệu về khoa học dữ liệu (tiếp theo)
Bài 4. Thực hành phân tích dữ liệu

Bài 1. Mô phỏng được sử dụng trong nhiều lĩnh vực
Bài 2. Thực hành về mô phỏng

---

CÁC CHUYÊN MỤC LIÊN QUAN:

☞ Kiểm tra tin học 12 - Cánh diều
☞ Lý thuyết tin học 12 - Cánh diều
☞ Thực hành tin học 12 - Cánh diều
☞ Gợi ý trả lời tin học 12 - Cánh diều
☞ Trắc nghiệm tin học 12 - Cánh diềuc
☞ Bài giảng điện tử tin học 12 - Cánh diều