Giáo án Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Giáo án Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Xem thử

Chỉ từ 400k mua trọn bộ Kế hoạch bài dạy (KHBD) hay Giáo án Tin học 12 Kết nối tri thức bản word chuẩn kiến thức, trình bày đẹp mắt, dễ dàng chỉnh sửa:

• B1: gửi phí vào tk: 0711000255837 - NGUYEN THANH TUYEN - Ngân hàng Vietcombank (QR)
• B2: Nhắn tin tới Zalo VietJack Official - nhấn vào đây để thông báo và nhận giáo án

I. MỤC TIÊU

1. Kiến thức

Học sinh được học về:

- Phần tử khối và phần tử nội tuyến.

- Khung của phần tử và các định nghĩa có liên quan.

- Các thuộc tính định dạng khung.

- Bộ chọn lớp (class selector) và bộ chọn với mã định danh (id selector)

2. Năng lực

- Phân biệt được phần tử khối và phần tử nội tuyến.

- Hiểu được ý nghĩa các thuộc tính liên quan đến khung. Chỉ ra được thuộc tính và giá trị thuộc tính đó trên ví dụ cụ thể.

- Hiểu được ý nghĩa và cách thiết lập và áp dụng bộ chọn đặc biệt (bộ chọn lớp, bộ chọn với mã định danh, bộ chọn thuộc tính) của CSS

- Nâng cao khả năng tự học.

3. Phẩm chất

- Có ý thức chủ động tìm hiểu và cập nhật các kiến thức mới.

- Cẩn thận, tỉ mỉ khi viết các câu lệnh.

- Luôn có ý thức tìm kiếm, lựa chọn các cách làm mới, đơn giản và hiệu quả cho các tình huống thực tiễn.

II. THIẾT BỊ DẠY HỌC VÀ HỌC LIỆU

- GV chuẩn bị:

• SGK, bài giảng PPT, phòng máy tính có kết nối Internet, máy chiếu.

• Chuẩn bị các ví dụ minh hoạ tương ứng trong bài như mô tả SGK, có thể sử dụng mô phỏng cho HS trên lớp, không mất thời gian gõ lại.

• Chuẩn bị thêm các ví dụ khác.

- HS: SGK, vở ghi, chuẩn bị bài ở nhà.

III. TIẾN TRÌNH DẠY HỌC

Bài học được thực hiện trong 2 tiết: 1 tiết lí thuyết, 1 tiết thực hành.

- Tiết lí thuyết: Hoạt động 1,2,3,4

- Tiết thực hành: Hoạt động 5,6,7

A. MỞ ĐẦU

Hoạt động 1: Khởi động (5 phút)

a) Mục tiêu: Ôn tập lại kiến thức bài cũ, tạo động cơ học tập cho HS vì kiến thức đã học chưa giải quyết được nhiệm vụ đặt ra.

b) Tổ chức thực hiện

- GV đưa ra ví dụ Hình 16.1 trang 89, đặt câu hỏi:

• Chỉ ra các phần tử trong trang web?

• Dự kiến định dạng các phần tử như thế nào để thu được kết quả như hình 16.1?

- HS suy nghĩ trả lời. HS có thể chỉ ra phần tử body bao 2 phần tử h1 và p, dự kiến định dạng phần tử h1: tô màu nền background-color bằng màu green, tạo border quanh phần tử body. Để tô màu chữ “Việt Nam” HS có thể trả lời sai (dự kiến tô màu nền vàng cho phần tử p). Nếu HS trả lời đúng, tạo phần tử em trong phần tử p và tô màu nền cho phần tử em (do đã từng thực hiện ví dụ tương tự). ➔ GV dẫn dắt vào bài.

B. HÌNH THÀNH KIẾN THỨC MỚI

Hoạt động 2. Tìm hiểu và phân biệt phần tử khối và phần tử nội tuyến (15 phút)

a) Mục tiêu

- HS biết khái niệm về phần tử khối, phần tử nội tuyến.

- HS phân biệt được 2 loại phần tử này trong ví dụ.

- Áp dụng định dạng cho phần tử khối và phần tử nội tuyến.

b) Tổ chức thực hiện

# 1. Chuyển giao nhiệm vụ

- Từ HĐ khởi động, GV chỉ ra cách tô màu phần tử p và phần tử em, phần tử p: phần tử khối, phần tử em: phần tử nội tuyến.

- GV đưa ra ví dụ đoạn mã + kết quả, HS chỉ ra đâu là phần tử khối, đâu là phần tử nội tuyến?

- GV giới thiệu về thuộc tính display và các giá trị của thuộc tính này.

- GV phân tích ví dụ minh hoạ trong SGK/90.

- GV gửi cho HS đoạn mã nguồn nội dung của hình 16.1, chưa bao gồm định dạng. GV yêu cầu HS vận dụng viết mã định dạng và các câu lệnh áp dụng mã định dạng để được kết quả hình 16.1.

Nội dung: 1. Phần tử khối, phần tử nội tuyến. Ví dụ: chỉ ra các phần tử khối, phần tử nội tuyến trong ví dụ sau? 2. Thuộc tính display. 3. Ví dụ SGK/90 4. Viết mã định dạng và áp dụng mã định dạng để được kết quả như hình 16.1

# 2. Thực hiện nhiệm vụ

- HS nghe giáo viên giảng giải về phần tử khối và phần tử nội tuyến, thuộc tính display và giá trị của nó.

- HS nhận dạng các phần tử khối, phần tử nội tuyến trên ví dụ minh hoạ.

- HS nghe giảng và quan sát kết quả ví dụ SGK/90.

- HS suy nghĩ, viết lệnh tạo mẫu định dạng cho kết quả như hình 16.1

Kết quả: 1. Phần tử khối, phần tử nội tuyến. Phần tử khối (block level): bắt đầu từ đầu hàng và kéo dài suốt chiều rộng của trang web. Phần tử nội tuyến (inline level): là các phần tử nhúng bên trong một phần tử khác. Bảng 16.1: Phân loại phần tử khối, phần tử nội tuyến. - Chỉ ra các phần tử khối và phần tử nội tuyến trong ví dụ. 2. Thuộc tính display – thay đổi cách hiển thị phần tử display: none (không hiển thị), block (hiển thị dạng phần tử khối), inline (hiển thị dạng phần tử nội tuyến) 3. Ví dụ SGK/90 4. Viết mã định dạng và áp dụng mã định dạng để được kết quả như Hình 16.1 Mã định dạng <style> h1 {background-color: green;} em {background-color: orange;} body {border: 2px solid cyan;} </style> Áp dụng mã định dạng cho VB <body> <h1> Thư Bác Hồ gửi học sinh </h1> <p> Non sông <em> Việt Nam </em> có trở nên…các cháu </p> </body>

# 3. Báo cáo, thảo luận

- GV nêu ví dụ, mời một số HS nhận dạng các phần tử khối và phần tử nội tuyến trong ví dụ.

- GV mời 1 số HS chia sẻ cách làm và kết quả hiển thị. HS khác nhận xét, bổ sung. GV chốt kiến thức.

# 4. Kết luận: GV chốt các kiến thức trọng tâm trong hộp ghi nhớ trang 90.

Hoạt động 3. Tìm hiểu cách thiết lập định dạng khung cho các phần tử (15 phút)

a) Mục tiêu:

- HS biết khái niệm và định nghĩa liên quan đến khung viền của các phần tử HTML. Phân biệt được sự khác nhau giữa khung của phần tử khối và phần tử nội tuyến. Biết cách thiết lập khung cho các phần tử.

b) Tổ chức thực hiện:

#1. Chuyển giao nhiệm vụ:

- GV cho HS quan sát hình 16.3. GV giới thiệu các định nghĩa liên quan đến khung (đã được minh hoạ rõ trên hình ảnh) + Bảng 16.2.

- GV yêu cầu HS giải thích các câu lệnh, đoạn lệnh trong ví dụ SGK/91.

- GV cho ví dụ áp dụng, yêu cầu HS vẽ mô phỏng các thuộc tính và giá trị tương ứng vào hình ảnh.

Nội dung: 1. Khung của phần tử Hình 16.3 trang 90 Bảng thuộc tính của khung – Bảng 16.2 trang 91. 2. Ví dụ SGK/91 3. Ví dụ áp dụng Cho đoạn mã thiết lập mẫu định dạng khung và hình ảnh kết quả. Vẽ mô phỏng các thông số chính và giá trị tương ứng của chúng. (tương tự hình 16.3)

................................

................................

................................

(Nguồn: NXB Giáo dục)

Trên đây tóm tắt một số nội dung miễn phí trong bộ Giáo án Tin học 12 Kết nối tri thức mới nhất, để mua tài liệu đầy đủ, Thầy/Cô vui lòng xem thử:

Xem thử

Xem thêm các bài soạn Giáo án Tin học lớp 12 Kết nối tri thức hay, chuẩn khác:

• Giáo án Tin 12 Bài 17: Các mức ưu tiên của bộ chọn

• Giáo án Tin 12 Bài 18: Thực hành tổng hợp thiết kế trang web

• Giáo án Tin 12 Bài 19: Dịch vụ sửa chữa và bảo trì máy tính

• Giáo án Tin 12 Bài 20: Nhóm nghề quản trị thuộc ngành Công nghệ thông tin

• Giáo án Tin 12 Bài 21: Hội thảo hướng nghiệp

---