Giáo án tích hợp AI Tin học 12 KHMT Bài 16: Định dạng khung

BÀI 16: ĐỊNH DẠNG KHUNG

I. NỘI DUNG CHI TIẾT BÀI HỌC

1. Phân loại phần tử

• Phần tử khối (block): Bắt đầu ở đầu hàng và chiếm trọn chiều rộng trang web. 

• Phần tử nội tuyến (inline): Nhúng bên trong phần tử khác, không tự động xuống hàng. 

• Thuộc tính display: Dùng để thay đổi loại phần tử (giá trị: block, inline, none - ẩn phần tử). 

1. Định dạng khung (Box Model)

• Width/Height: Chiều rộng và chiều cao khung (chỉ áp dụng cho phần tử khối).

• Padding: Vùng đệm (khoảng cách từ nội dung đến đường viền).

• Margin: Lề khung (khoảng cách từ đường viền đến phần tử xung quanh).

• Border: Định dạng viền (bao gồm border-width, border-style, border-color).

  • Ví dụ: div { border: 2px solid red; }.

1. Bộ chọn đặc biệt

• Class (.class): Định dạng cho nhóm phần tử có cùng ý nghĩa/thuộc tính.

• ID (#id): Định dạng duy nhất cho một phần tử cụ thể.

• Bộ chọn thuộc tính ([attribute]): Định dạng dựa trên thuộc tính của thẻ HTML.

II. KIẾN THỨC TRỌNG TÂM

1. Phần tử HTML được chia thành hai loại chính: phần tử khối và phần tử nội tuyến. 

2. Thuộc tính display cho phép chuyển đổi linh hoạt giữa các loại phần tử. 

3. Mô hình khung (Box Model) bao gồm nội dung, vùng đệm (padding), đường viền (border) và lề (margin).

4. Thuộc tính border cho phép thiết lập đồng thời độ dày, kiểu và màu sắc của viền.

5. Bộ chọn class giúp áp dụng định dạng chung cho nhiều phần tử, trong khi id dùng cho phần tử đơn lẻ.

6. Bộ chọn thuộc tính hỗ trợ tùy biến giao diện dựa trên thông tin thuộc tính có trong thẻ HTML.

III. BỐ CỤC SLIDE PPTX

• Slide 1: Tiêu đề

  • Tiêu đề: BÀI 16: ĐỊNH DẠNG KHUNG

  • Nội dung: Họ và tên, Năm học 2026 - 2027.

• Slide 2: Phân loại phần tử

  • Tiêu đề: Phần tử khối và Nội tuyến

  • Nội dung: Phân biệt block và inline, giới thiệu thuộc tính display.

• Slide 3: Mô hình khung (Box Model)

  • Tiêu đề: Các thành phần của khung

  • Nội dung: Hình ảnh minh họa width, height, padding, margin, border.

• Slide 4: Định dạng viền

  • Tiêu đề: Sử dụng thuộc tính Border

  • Nội dung: Các giá trị của border-style, border-color và cú pháp viết gọn.

• Slide 5: Bộ chọn nâng cao

  • Tiêu đề: Bộ chọn Class và ID

  • Nội dung: Cách sử dụng và sự khác biệt giữa . (class) và # (id).

• Slide 6: Tổng kết

  • Tiêu đề: Tóm tắt bài học

  • Nội dung: Vai trò của định dạng khung trong thiết kế bố cục trang web chuyên nghiệp.