Giáo án Khoa học máy tính 12 Kết nối bài 16: Định dạng khung
Giáo án bài 16: Định dạng khung sách Tin học 12 - Định hướng Khoa học máy tính kết nối tri thức. Được thiết kế theo công văn 5512, chi tiết, đầy đủ. Giáo án là bản word, có thể tải về và dễ dàng chỉnh sửa. Bộ giáo án có đầy đủ các bài trong học kì 1 + học kì 2 của Tin học 12 kết nối tri thức. Kéo xuống dưới để tham khảo chi tiết.
Xem: => Giáo án Tin học 12 - Định hướng Khoa học máy tính kết nối tri thức
Các tài liệu bổ trợ khác
Xem toàn bộ: Giáo án khoa học máy tính 12 kết nối tri thức đủ cả năm
Ngày soạn:…/…/…
Ngày dạy:…/…/…
BÀI 16: ĐỊNH DẠNG KHUNG
(2 tiết)
I. MỤC TIÊU
1. Kiến thức
Sau bài học này, HS sẽ:
Sử dụng được CSS để định dạng khung văn bản, kích thước khung, kiểu đường viền,…
Biết sử dụng CSS cho các bộ chọn khác nhau (id, class,…).
2. Năng lực
Năng lực chung:
Năng lực học tập, tự học: HS biết tự tìm kiếm, chuẩn bị và lựa chọn tài liệu, phương tiện học tập trước giờ học, quá trình tự giác tham gia các và thực hiện các hoạt động học tập cá nhân trong giờ học ở trên lớp,…
Năng lực giao tiếp và hợp tác: Khả năng phân công và phối hợp thực hiện nhiệm vụ học tập.
Năng lực giải quyết vấn đề sáng tạo: HS đưa ra các phương án trả lời cho câu hỏi, bài tập xử lý tình huống, vận dụng kiến thức, kĩ năng của bài học để giải quyết vấn đề thường gặp.
Năng lực Tin họ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, 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.
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: SGK, SBT Tin học 12 – Định hướng Khoa học máy tính – Kết nối tri thức, bài trình chiếu (Slide), máy chiếu, phòng máy tính có kết nối Internet, các ví dụ minh hoạ tương ứng trong bài như mô tả SGK.
HS: SGK, SBT Tin học 12 – Định hướng Khoa học máy tính – Kết nối tri thức, vở ghi.
III. TIẾN TRÌNH DẠY HỌC
A. HOẠT ĐỘNG KHỞI ĐỘNG
a) Mục tiêu: HS được gợi ý cách giải quyết với câu hỏi làm thế nào có thể thiết lập định dạng để ứng dụng khác biệt với cùng một phần tử HTML.
b) Nội dung: HS thảo luận nhóm để trả lời câu hỏi.
c) Sản phẩm: Từ yêu cầu, HS vận dụng sự hiểu biết để trả lời câu hỏi GV đưa ra.
d) Tổ chức thực hiện:
Bước 1: GV chuyển giao nhiệm vụ:
- GV chia lớp thành 4 nhóm học tập, sau đó nêu câu hỏi Khởi động SGK trang 89 cho các nhóm thảo luận:
Trên một trang web thường có rất nhiều phần tử cùng loại (cùng tên thẻ). Ví dụ thẻ p sẽ tương ứng với rất nhiều phần tử của trang web. Một định dạng với bộ chọn p sẽ áp dụng cho tất cả các thẻ p. Nếu muốn phân biệt các thẻ p với nhau và muốn tạo ra các CSS để phân biệt các thẻ p thì có thể thực hiện được không?
Bước 2: HS thực hiện nhiệm vụ học tập:
- HS xem video và trả lời câu hỏi.
- GV quan sát và hỗ trợ HS khi cần thiết.
Bước 3: Báo cáo kết quả hoạt động, thảo luận:
- GV mời đại diện các nhóm HS trình bày kết quả thảo luận.
Gợi ý trả lời: Có thể tạo ra các CSS để phân biệt các phần tử HTML cùng loại bằng cách thiết lập các định dạng kiểu lớp.
- HS khác lắng nghe, nhận xét và bổ sung.
Bước 4: Đánh giá kết quả thực hiện:
GV đánh giá kết quả của HS, dẫn dắt HS vào bài học mới: CSS có thể hỗ trợ thiết lập các định dạng kiểu lớp để định dạng khác biệt với cùng một phần tử HTML. Để giúp các em hiểu rõ hơn, chúng ta sẽ cùng nhau đến với Bài 16: Định dạng khung.
B. HÌNH THÀNH KIẾN THỨC MỚI
Hoạt động 1: Tìm hiểu và phân biệt phần tử khối và phần tử nội tuyến
a) Mục tiêu: HS biết và hiểu khái niệm kiểu phần tử khối và nội tuyến thông qua thuộc tính display.
b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 1. PHÂN LOẠI PHẦN TỬ KHỐI VÀ NỘI TUYẾN và thực hiện nhiệm vụ.
c) Sản phẩm: Phần tử khối và phần tử nội tuyến.
d) Tổ chức thực hiện:
HOẠT ĐỘNG CỦA GV VÀ HS | SẢN PHẨM DỰ KIẾN | |
Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu HS làm việc cá nhân, thực hiện Hoạt động 1 – Tìm hiểu và phân biệt phần tử khối và phần tử nội tuyến SGK tr.89: Quan sát cách tô màu nền của hai phần tử trên trang web trong Hình 16.1, em có nhận xét gì? Hình 16.1. Nội dung trang web - Từ Hoạt động 1, GV giới thiệu cho HS về phần tử khối và phần tử nội tuyến. - GV cho HS quan sát ví dụ minh hoạ SGK tr.90 và đưa ra câu hỏi định hướng: + Theo em, có thể thay đổi loại phần tử HTML bằng thuộc tính CSS nào? - GV cho HS xem video https://www. - GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời câu hỏi Hoạt động củng cố kiến thức tr.90 SGK: Câu 1. Chiều rộng của các phần tử nội tuyến phụ thuộc vào những yếu tố nào? Có phụ thuộc vào chiều rộng của cửa sổ trình duyệt không? Câu 2. Khẳng định “Chiều rộng của các phần tử khối chỉ phụ thuộc vào kích thước của cửa sổ trình duyệt” là đúng hay sai? Bước 2: HS thực hiện nhiệm vụ học tập: - HS tìm hiểu nội dung mục 1 SGK tr.89 – 90 và trả lời các câu hỏi mà GV đưa ra. - GV quan sát và trợ giúp HS (nếu cần thiết). Bước 3: Báo cáo kết quả hoạt động, thảo luận: - HS lần lượt trả lời các câu hỏi. - HS khác nhận xét, bổ sung. Bước 4: Đánh giá kết quả thực hiện nhiệm vụ học tập: - Từ kết quả thảo luận của nhóm, GV nhận xét, đánh giá quá trình HS thực hiện nhiệm vụ. - GV chính xác hoá lại các nội dung kiến thức. - GV chốt kiến thức theo Hộp kiến thức:
| 1. PHÂN LOẠI PHẦN TỬ KHỐI VÀ NỘI TUYẾN - Các thẻ (hay phần tử) HTML được chia làm hai loại: + Khối (block level): Các phần tử khối thường bắt đầu từ đầu hàng và kéo dài suốt chiều rộng của trang web. Ví dụ: Dòng chữ “Thư Bác Hồ gửi học sinh” trong Hình 16.1 được thể hiện ở dạng khối. + Nội tuyến (inline level): Các phần tử nội tuyến là các phần tử nhúng bên trong một phần tử khác. Ví dụ: Cụm từ “Việt Nam” là một phần tử nội tuyến, được nhúng trong phần tử p. - Mặc định các phần tử HTML sẽ thuộc một trong hai loại khối hoặc nội tuyến. Bảng 16.1. Phân loại phần tử CSS - Cách thay đổi loại phần tử HTML bằng CSS: Ví dụ: CSS sau sẽ đổi loại phần tử span từ dạng mặc định là inline sang block: Kết quả áp dụng mẫu CSS trên: a) Mã HTML b) Kết quả hiển thị trên trình duyệt Hình 16.2. Minh hoạ chuyển đổi phần tử nội tuyến sang khối Có thể thay đổi loại phần tử HTML bằng thuộc tính display. Các giá trị của thuộc tính này bao gồm block, inline, none. Giá trị none sẽ làm ẩn (không hiển thị) phần tử này trên trang web. | |
Hướng dẫn trả lời câu hỏi Hoạt động 1 SGK tr.89: + Màu nền của dòng chữ “Thư Bác Hồ gửi học sinh” được tô màu từ đầu dòng và kéo dài suốt chiều rộng của trang web. + Phần nền màu da cam chỉ được áp dụng cho cụm từ “Việt Nam”. Hướng dẫn trả lời câu hỏi Hoạt động củng cố kiến thức tr.90 SGK: Câu 1. Chiều rộng của các phần tử nội tuyến chỉ phụ thuộc vào độ rộng của phần văn bản của các phần tử này mà không phụ thuộc vào chiều rộng của cửa sổ trình duyệt. Câu 2. Đúng. |
Hoạt động 2: Tìm hiểu cách thiết lập định dạng khung cho các phần tử
a) Mục tiêu: HS biết được các khái niệm và định nghĩa liên quan đến khung viền của 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 đặt các định dạng cho khung này.
b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 2. THIẾT LẬP ĐỊNH DẠNG KHUNG BẰNG CSS, thảo luận nhóm thực hiện nhiệm vụ.
c) Sản phẩm: Cách thiết lập định dạng khung cho các phần tử.
d) Tổ chức thực hiện:
HOẠT ĐỘNG CỦA GV VÀ HS | SẢN PHẨM DỰ KIẾN | |
Bước 1: GV chuyển giao nhiệm vụ: - GV cho HS đọc Hoạt động 2 – Tìm hiểu cách thiết lập định dạng khung cho các phần tử SGK tr.90: Quan sát Hình 16.3 để biết các thông số chính của khung của phần tử HTML để có thể hiểu được cách thiết lập khung, viền bằng CSS. Hình 16.3. Các thông số chính của khung - GV lưu ý HS về việc thiết lập định dạng khung cho phần tử dạng khối và các phần tử nội tuyến. - GV chia lớp thành các nhóm 2 – 3 HS, mỗi nhóm tìm hiểu về một nhóm thuộc tính: + Em hãy trình bày một số thuộc tính liên quan đến khung của một phần tử HTML theo cách phân loại sau:
+ Các thuộc tính liên quan đến khung có tính kế thừa không? - GV phân tích ví dụ SGK tr.91 để HS hiểu rõ hơn về cách thiết lập định dạng khung. - GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời câu hỏi Hoạt động củng cố kiến thức tr.92 SGK: Câu 1. Trong các thuộc tính khung của một phần tử HTML, khoảng cách từ vùng văn bản đến đường viền khung được gọi là gì? Câu 2. Lề khung khác gì với vùng đệm? Bước 2: HS thực hiện nhiệm vụ học tập: - HS tìm hiểu nội dung mục 2 SGK tr.90 – 91 sau đó trao đổi, thảo luận trả lời các câu hỏi mà GV đưa ra. - GV quan sát và trợ giúp HS (nếu cần thiết). Bước 3: Báo cáo kết quả hoạt động, thảo luận: - GV mời đại diện các nhóm báo cáo kết quả thảo luận. - Các nhóm khác đưa ra ý kiến nhận xét. Bước 4: Đánh giá kết quả thực hiện nhiệm vụ học tập: - Từ kết quả thảo luận của nhóm, GV nhận xét, đánh giá quá trình HS thực hiện nhiệm vụ. - GV chính xác hoá lại các nội dung kiến thức. - GV chốt kiến thức theo Hộp kiến thức:
| 2. THIẾT LẬP ĐỊNH DẠNG KHUNG BẰNG CSS - Lưu ý: Cần phân biệt hai loại phần tử HTML, phần tử khối và phần tử nội tuyến. Với phần tử dạng khối, các khung được xác định với đầy đủ tính chất, còn với các phần tử nội tuyến thì khung chỉ có thể thiết lập mà không có các thông số chiều cao, chiều rộng. Bảng 16.2. Các thuộc tính liên quan đến khung * Các thuộc tính trên đều không có tính kế thừa. - Ví dụ: Cho một đoạn mã HTML như sau: Nếu thiết lập mẫu định dạng như Hình 16.4a cho đoạn mã HTML ở trên thì kết quả nhận được tương tự như Hình 16.4b. a) Mẫu định dạng khung viền b) Kết quả hiển thị trên trình duyệt Hình 16.4. Định dạng khung | |
Hướng dẫn trả lời câu hỏi Hoạt động củng cố kiến thức tr.92 SGK: Câu 1. Trong các thuộc tính khung của một phần tử HTML, khoảng cách từ vùng văn bản đến đường viền khung được gọi là vùng đệm (padding). Câu 2. - Lề khung là khoảng cách từ khung đến phần text bên ngoài khung. - Vùng đệm là khoảng cách từ khung đến phần text bên trong khung. |
Hoạt động 3: Tìm hiểu một số cách thiết lập các bộ chọn đặc biệt khác
a) Mục tiêu: HS biết và hiểu được cách thiết lập định dạng cho các phần tử đặc biệt để trả lời câu hỏi đã được đặt ra ở phần hoạt động Khởi động.
b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 3. MỘT SỐ BỘ CHỌN ĐẶC BIỆT CỦA CSS, thảo luận nhóm thực hiện nhiệm vụ.
c) Sản phẩm: Các cách thiết lập bộ chọn là tổ hợp các phần tử.
d) Tổ chức thực hiện:
HOẠT ĐỘNG CỦA GV VÀ HS | SẢN PHẨM DỰ KIẾN | ||||||||
Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu HS thảo luận theo nhóm 2 – 3 HS, thực hiện Hoạt động 3 – Tìm hiểu một số cách thiết lập các bộ chọn đặc biệt khác SGK tr.92: Thảo luận, tìm hiểu thêm cách thiết lập bộ chọn đặc biệt của CSS và trả lời các câu hỏi sau: 1. Có thể đặt mẫu định dạng cho các thẻ với thuộc tính cho trước được không? 2. Có thể thiết lập các mẫu định dạng khác nhau cho cùng một loại phần tử giống nhau được không? Nếu có thì thực hiện bằng cách nào? - GV yêu cầu HS thảo luận theo nhóm 2 – 3 HS, mỗi nhóm tìm hiểu một bộ chọn: + Em hãy nêu ý nghĩa, cấu trúc chung của các bộ chọn sau:
- GV phân tích các ví dụ minh hoạ để HS hiểu rõ cách thiết lập các bộ chọn. - GV lưu ý HS về cách đặt tên cho id và class. - GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời câu hỏi Hoạt động củng cố kiến thức tr.93 SGK: Câu 1. Nêu sự khác biệt cơ bản giữa thuộc tính id và class của các phần tử HTML. Câu 2. Mỗi bộ chọn sau có ý nghĩa gì? a) div#bat_dau > p. b) p.test em#p123. Bước 2: HS thực hiện nhiệm vụ học tập: …………………. | 3. MỘT SỐ BỘ CHỌN ĐẶC BIỆT CỦA CSS a) Thiết lập bộ chọn là một lớp các phần tử có ý nghĩa gần giống nhau - Trong thực tế, có thể có nhu cầu định dạng cho một nhóm phần tử có cùng ý nghĩa, ví dụ các đoạn văn bản có liên quan đến một sự kiện nào đó hoặc một số đoạn văn bản quan trọng cần nhấn mạnh. Trong các trường hợp này, thiết lập bộ chọn lớp class cho các phần tử đó để có thể thiết lập định dạng chung. - Cấu trúc chung của bộ chọn lớp: - Ví dụ một số bộ chọn lớp CSS: - Ví dụ đoạn mã HTML sau được áp dụng mẫu CSS ở ví dụ trên thì đoạn văn bản thứ nhất có chữ màu xanh và in đậm, đoạn văn bản thứ hai có chữ màu đỏ. Bảng 16.3. Một số định dạng hay gặp với bộ chọn lớp
b) Thiết lập bộ chọn riêng cho từng phần tử riêng biệt có mã định danh id - Nếu muốn định dạng cho các phần tử riêng biệt thì cần thiết lập mã định danh id cho phần tử này. …………… |
A---------------------------------------
----------------------Còn tiếp---------------------
Trên chỉ là 1 phần của giáo án. Giáo án khi tải về có đầy đủ nội dung của bài. Đủ nội dung của học kì I + học kì II
MỘT VÀI THÔNG TIN:
- Word được soạn: Chi tiết, rõ ràng, mạch lạc
- Powerpoint soạn: Hiện đại, đẹp mắt để tạo hứng thú học tập
- Word và powepoint đồng bộ với nhau
Thời gian bàn giao
- Khi đặt, nhận luôn giáo án kì 1
- Sau đó, bổ sung liên tục để 30/01 có đủ cả năm
Phí giáo án
- Giáo án word: 400k
- Giáo án Powerpoint: 500k
- Trọn bộ word + PPT: 800k
=> Chỉ gửi trước 400k. Sau đó gửi dần trong quá trình nhận. Đến lúc nhận đủ kì 1 thì gửi số còn lại
Khi đặt nhận ngay và luôn:
- Giáo án word kì I
- Giáo án điện tử kì I
- Trắc nghiệm cấu trúc mới: 10 -15 phiếu
- Ít nhất 5 đề thi cấu trúc mới với ma trận, đáp án...
- PPCT, file word lời giải SGK
Cách đặt:
- Bước 1: Gửi phí vào tk: 10711017 - Chu Văn Trí - Ngân hàng ACB (QR)
- Bước 2: Nhắn tin tới Zalo Fidutech - nhấn vào đây để thông báo và nhận giáo án
Xem toàn bộ: Giáo án khoa học máy tính 12 kết nối tri thức đủ cả năm
ĐẦY ĐỦ GIÁO ÁN CÁC BỘ SÁCH KHÁC
GIÁO ÁN WORD LỚP 12 KẾT NỐI TRI THỨC
Giáo án toán 12 kết nối tri thức
Giáo án đại số 12 kết nối tri thức
Giáo án hình học 12 kết nối tri thức
Giáo án vật lí 12 kết nối tri thức
Giáo án hoá học 12 kết nối tri thức
Giáo án sinh học 12 kết nối tri thức
Giáo án ngữ văn 12 kết nối tri thức
Giáo án lịch sử 12 kết nối tri thức
Giáo án địa lí 12 kết nối tri thức
Giáo án kinh tế pháp luật 12 kết nối tri thức
Giáo án Công nghệ Điện - điện tử 12 kết nối tri thức
Giáo án Công nghệ 12 Lâm nghiệp - Thuỷ sản kết nối tri thức
Giáo án Tin học 12 - Định hướng Khoa học máy tính kết nối tri thức
Giáo án Tin học 12 - Định hướng Tin học ứng dụng kết nối tri thức
Giáo án thể dục 12 bóng rổ kết nối tri thức
Giáo án thể dục 12 cầu lông kết nối tri thức
Giáo án thể dục 12 bóng chuyền kết nối tri thức
Giáo án mĩ thuật 12 kết nối tri thức
Giáo án âm nhạc 12 kết nối tri thức
Giáo án hoạt động trải nghiệm hướng nghiệp 12 kết nối tri thức
GIÁO ÁN POWERPOINT LỚP 12 KẾT NỐI TRI THỨC
Giáo án Powerpoint Toán 12 kết nối tri thức
Giáo án Powerpoint hình học 12 kết nối tri thức
Giáo án Powerpoint đại số 12 kết nối tri thức
Giáo án powerpoint vật lí 12 kết nối tri thức
Giáo án powerpoint ngữ văn 12 kết nối tri thức
Giáo án powerpoint địa lí 12 kết nối tri thức
Giáo án powerpoint lịch sử 12 kết nối tri thức
Giáo án powerpoint địa lí 12 kết nối tri thức
Giáo án Powerpoint Kinh tế pháp luật 12 kết nối tri thức
Giáo án Powerpoint Mĩ thuật 12 kết nối tri thức
Giáo án Powerpoint Tin học 12 - Định hướng Tin học ứng dụng kết nối tri thức
Giáo án Powerpoint Tin học 12 - Định hướng Khoa học máy tính kết nối tri thức
Giáo án powerpoint Công nghệ 12 Điện - điện tử kết nối tri thức
Giáo án powerpoint Công nghệ 12 Lâm nghiệp - Thuỷ sản kết nối tri thức
Giáo án powerpoint hoạt động trải nghiệm hướng nghiệp 12 kết nối tri thức
GIÁO ÁN CHUYÊN ĐỀ LỚP 12 KẾT NỐI TRI THỨC
Giáo án chuyên đề toán 12 kết nối tri thức
Giáo án chuyên đề vật lí 12 kết nối tri thức
Giáo án chuyên đề hoá học 12 kết nối tri thức
Giáo án chuyên đề sinh học 12 kết nối tri thức
Giáo án chuyên đề ngữ văn 12 kết nối tri thức
Giáo án chuyên đề lịch sử 12 kết nối tri thức
Giáo án chuyên đề địa lí 12 kết nối tri thứ
Giáo án chuyên đề kinh tế pháp luật 12 kết nối tri thức
Giáo án chuyên đề Công nghệ 12 Công nghệ điện - điện tử kết nối tri thức
Giáo án chuyên đề Công nghệ 12 Lâm nghiệp - Thuỷ sản kết nối tri thức
Giáo án chuyên đề Tin học 12 - Định hướng Khoa học máy tính kết nối tri thức
Giáo án chuyên đề Tin học 12 - Định hướng Tin học ứng dụng kết nối tri thức
GIÁO ÁN POWERPOINT CHUYÊN ĐỀ LỚP 12 KẾT NỐI TRI THỨC
Giáo án powerpoint chuyên đề ngữ văn 12 kết nối tri thức
Giáo án Powerpoint chuyên đề Kinh tế pháp luật 12 kết nối tri thức
GIÁO ÁN DẠY THÊM LỚP 12 KẾT NỐI TRI THỨC
Giáo án dạy thêm ngữ văn 12 kết nối tri thức
Giáo án powerpoint dạy thêm ngữ văn 12 kết nối tri thức
Giáo án dạy thêm toán 12 kết nối tri thức
Giáo án powerpoint dạy thêm toán 12 kết nối tri thức