Giáo án Tin học 12 Chân trời sáng tạo Bài F10: Định kiểu CSS cho siêu liên kết và danh sách

Chỉ từ 400k mua trọn bộ Kế hoạch bài dạy (KHBD) hay Giáo án Tin học 12 Chân trời sáng tạo 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: 1053587071 - NGUYEN VAN DOAN - 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

Sau bài học này, HS sẽ:

- Thực hiện được việc định kiểu CSS cho siêu liên kết và danh sách.

2. Năng lực

Năng lực chung:

- Tự chủ và tự học: Tự lực (Chủ động, tích cực thực hiện công việc của bản thân).

- Giao tiếp và hợp tác: Xác định trách nhiệm và hoạt động của bản thân (Phân tích được các công việc cần thực hiện để hoàn thành nhiệm vụ của nhóm trong các hoạt động nhóm).

- Giải quyết vấn đề và sáng tạo:Hình thành và triển khai ý tưởng mới (Nêu được nhiều ý tưởng mới trong học tập, suy nghĩ không theo lối mòn, tạo ra yếu tố mới dựa trên những ý tưởng khác nhau).

Năng lực Tin học:

- NLc (Giải quyết vấn đề với sự hỗ trợ của công nghệ thông tin và truyền thông): Biết cách tổ chức lại mã lệnh theo hướng mới phù hợp hơn để định kiểu cho trang web portfolio.html.

3. Phẩm chất

- Chăm chỉ: Tích cực tìm tòi và sáng tạo trong việc tìm hiểu các thuộc tính cơ bản của CSS.

- Trung thực, trách nhiệm: Trung thực khi giới thiệu bản thân, tôn trọng bản quyền khi sử dụng thông tin, hình ảnh để xây dựng trang web.

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

1. Đối với giáo viên

- SGK, SBT Tin học 12 – Định hướng Tin học ứng dụng – Chân trời sáng tạo, bài trình chiếu(Slide), máy chiếu, phiếu học tập.

- Máy tính có cài sẵn phần mềm Visual Studio Code và có kết nối Internet, các tệp HTML và CSS dùng trong hoạt động Thực hành.

2. Đối với học sinh

- SGK, SBT Tin học 12 – Định hướng Tin học ứng dụng – Chân trời sáng tạo, vở ghi.

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

A. HOẠT ĐỘNG KHỞI ĐỘNG

a) Mục tiêu: Nhận xét được khi nháy chọn siêu liên kết bất kì trên các trang web thực tế.

b) Nội dung: GV cho HS quan sát trang web thực tế và đưa ra nhận xét về siêu liên kết.

c) Sản phẩm: Nhận xét của HS về siêu liên kết.

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

Bước 1: GV chuyển giao nhiệm vụ:

- GV cho HS xem trang web https://www.britishcouncil.vn/, sau đó yêu cầu HS hoạt động cá nhân, suy nghĩ trả lời câu hỏi Khởi động tr.156 SGK:Điều gì sẽ xảy ra khi nháy chọn siêu liên kết bất kì của trang web?

Bước 2: HS thực hiện nhiệm vụ học tập:

- HS vận dụng những hiểu biết thực tế để 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 một số HS xung phong trả lời câu hỏi Khởi động tr.156 SGK.

Gợi ý trả lời:Khi nháy chọn siêu liên kết bất kì của trang web thì sẽ dẫn đến một trang web khác.

- 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: Khi nháy chọn siêu liên kết bất kì trên trang web, chúng ta sẽ được dẫn đến các phần khác của trang hay một trang web khác. Vậy để giúp các em biết cách tạo ra và định kiểu cho siêu liên kết, chúng ta sẽ cùng nhau đến với Bài F10: Định kiểu CSS cho siêu liên kết và danh sách.

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

Hoạt động 1: Định kiểu CSS cho siêu liên kết

a) Mục tiêu: Cung cấp cho HS cách định kiểu CSS cho siêu liên kết và các trạng thái của siêu liên kết.

b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 1. Định kiểu CSS cho siêu liên kết và thực hiện nhiệm vụ.

c) Sản phẩm:Cách định kiểu CSS cho siêu liên kết và các trạng thái của siêu liên kế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 hoạt động cá nhân và trả lờicâu hỏi:

+ Siêu liên kết là gì?

+ Trong HTML, siêu liên kết được tạo như thế nào?

+ Theo em, siêu liên kết trên trang web thường có những trạng thái như thế nào?

- GV giới thiệu cho HS về lớp giả.

- GV tiếp tục đặt câu hỏi định hướng:

Em hãy tìm hiểu cách định kiểu các trạng thái của siêu liên kết thông qua lớp giả theo các nội dung sau:

+ Cách nhận biết trạng thái.

+ Cách định kiểu trạng thái bằng CSS.

- Với mỗi trạng thái, GV phân tích ví dụ minh hoạ để HS hiểu và biết cách áp dụng lớp giả.

- 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 Làm tr.158 SGK:

Viết mã lệnh CSS để khi người dùng di chuyển con trỏ chuột đến siêu liên kết sẽ phóng to cỡ chữ và có màu nền bao quanh (màu sắc tuỳ ý).

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.156 – 158 vàtrả lời các câu hỏi mà GV đưa ra.

- GV quan sát, theo dõi 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:

- HS trả lời các câu hỏi và nhận xét lẫn nhau.

Hướng dẫn trả lời câu hỏi hoạt động Làm tr.158 SGK:

1. Định kiểu CSS cho siêu liên kết

- Khái niệm:Siêu liên kết là một đường dẫn đến các phần khác của trang web hay một trang web khác.

- Trong HTML, siêu liên kết được tạo bằng thẻ và thuộc tính href.

- Khi định kiểu CSS cho siêu liên kết, ta thường quan tâm đến 5 trạng thái của siêu liên kết:

+ Bình thường.

+ Lướt qua (hover).

+ Kích hoạt (active).

+ Đã truy cập (visited).

+ Tập trung (focus).

- Ngôn ngữ CSS đặt ra khái niệm gọi là “lớp giả” để định kiểu cho các trạng thái của một phần tử.

- Lớp giả được kí hiệu bằng dấu hai chấm (:) đặt trước tên lớp, chẳng hạn:

+ a:hover là lớp giả hover của phần tử .

+a:active là lớp giả active của phần tử .

-Các trạng thái của siêu liên kết được định kiểu thông qua các lớp giả như sau:

a) Trạng thái bình thường

+ Đây là trạng thái mặc định của siêu liên kết khi chưa có tương tác hoặc kích hoạt,siêu liên kết sẽ có màu xanh có gạch chân (Hình 1).

+ Muốn thay đổi trạng thái này, em định kiểu bằng cách khai báo vùng chọn là thẻ a.

Ví dụ 1:

Trong đó:

· Thuộc tính color dùng để định kiểu màu cam cho siêu liên kết.

· Thuộc tính text-decoration với giá trị none dùng để bỏ đường gạch chân của siêu liên kết (Hình 2).

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

Trên đây tóm tắt một số nội dung miễn phí trong bộ Kế hoạch bài dạy (KHBD) hay Giáo án Tin học 12 Chân trời sáng tạo 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 Chân trời sáng tạo hay, chuẩn khác:

Trang trước Trang sau

Đề thi, giáo án lớp 12 các môn học