Giáo án Tin học ứng dụng 12 cánh diều bài 8: Làm quen với CSS

Giáo án bài 8: Làm quen với CSS sách Tin học 12 - Tin học ứng dụng cánh diều. Đượ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 cánh diều. Kéo xuống dưới để tham khảo chi tiết.

Xem: => Giáo án Tin học 12 - Định hướng Tin học ứng dụng cánh diều

Xem video về mẫu Giáo án Tin học ứng dụng 12 cánh diều bài 8: Làm quen với CSS

Các tài liệu bổ trợ khác

Xem toàn bộ: Giáo án tin học ứng dụng 12 cánh diều đủ cả năm

Ngày soạn:…/…/… 

Ngày dạy:…/…/…

 

BÀI 8: LÀM QUEN VỚI CSS 

(2 tiết)

I. MỤC TIÊU

1. Kiến thức

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

  • Nêu được mục đích sử dụng CSS.

  • Mô tả được bộ chọn phần tử và cách áp dụng CSS.

  • Trình bày được một số thuộc tính định dạng CSS.

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: 

  • Hiểu được mục đích sử dụng CSS.

  • Biết cách khai báo bộ chọn phần tử và áp dụng CSS.

  • Nêu được một số thuộc tính định dạng 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 mã lệnh HTML.

  • Hình thành tư duy lôgic phân tích yêu cầu cần đạt để thực hiện một nhiệm vụ cụ thể.

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

  • GV: SGK, SBT Tin học 12 – Định hướng Tin học ứng dụng – Cánh diều, bài trình chiếu (Slide), máy chiếu, máy tính có kết nối Internet.

  • HS: SGK, SBT Tin học 12 – Định hướng Tin học ứng dụng – Cánh diều, vở ghi.

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

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

a) Mục tiêu: Ôn lại kiến thức đã học và gợi ra các định dạng khác cho việc trình bày văn bản.

b) Nội dung: HS dựa vào hiểu biết để trả lời các 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 trình chiếu hình ảnh trên slide, sau đó yêu cầu HS hoạt động cá nhân, suy nghĩ trả lời câu hỏi: 

Em hãy nhận xét về cách định dạng văn bản trong Hình 1 và Hình 2. Theo em, cách định dạng nào giúp dễ dàng chỉnh sửa và có thể tái sử dụng?

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

- HS quan sát hình ảnh 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 một số HS xung phong trả lời câu hỏi.

Gợi ý trả lời: 

+ So sánh về 2 cách định dạng văn bản:

  • Hình 1: Định dạng trực tiếp cho từng phần tử HTML.

  • Hình 2: Mẫu định dạng được viết tách biệt với các thẻ HTML. Cách viết này chỉ cần khai báo 1 lần và áp dụng cho tất cả các phần tử trong body.

+ Cách định dạng trong Hình 2 giúp dễ dàng chỉnh sửa và có thể tái sử dụng.

- 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: Sử dụng CSS giúp tách biệt khai báo nội dung với định dạng và trang trí trang web. Với sự tách biệt như vậy, khai báo CSS dễ dàng được chỉnh sửa, tái sử dụng. Vậy để giúp các em hiểu rõ hơn về mục đích sử dụng và biết cách áp dụng CSS, chúng ta sẽ cùng nhau đến với Bài 8: Làm quen với CSS.

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

Hoạt động 1: Bảng định dạng CSS

a) Mục tiêu: Giới thiệu về CSS.

b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 1. Bảng định dạng CSS, thảo luận nhóm và thực hiện nhiệm vụ.

c) Sản phẩm: Khái niệm, vai trò và lịch sử phát triển của CSS.

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 và trả lời các câu hỏi:

+ Bảng định dạng CSS là gì?

+ Bảng định dạng CSS được khai báo như thế nào?

+ CSS có vai trò như thế nào trong việc định dạng trang web?

+ Trình duyệt web áp dụng CSS như thế nào?

- GV cung cấp cho HS một số thông tin về lịch sử phát triển của CSS.

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.68 và thảo luận theo nhóm thực hiện nhiệm vụ.

- GV quan sát và trợ giúp HS.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- Đại diện các nhóm HS trả lời.

- 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: 

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

1. Bảng định dạng CSS

- Khái niệm: Bảng định dạng (Cascading Style Sheets - CSS) là ngôn ngữ được sử dụng để khai báo kiểu trình bày các phần tử HTML trong trang web. 

- Cấu trúc: CSS thường gồm một số quy tắc định dạng. Mỗi quy tắc định dạng gồm bộ chọn (selector) và các khai báo thuộc tính CSS (css properties) để xác định kiểu trình bày cho phần tử như màu sắc, phông chữ, kích cỡ, đường viền,...

Hình 1. Một ví dụ CSS có hai quy tắc 
định dạng

- Vai trò: 

+ CSS giúp tách biệt khai báo nội dung với định dạng và trang trí trang web. 

Khai báo CSS dễ dàng được chỉnh sửa, tái sử dụng. 

+ CSS cho phép nhiều trang web hay toàn bộ website cùng dùng chung quy tắc định dạng nhằm tạo sự thống nhất trong trình bày.

- Trình duyệt web áp dụng CSS bằng cách chọn các phần tử trong văn bản HTML khớp với bộ chọn trong CSS và sử dụng các quy tắc định dạng tương ứng để trình bày phần tử.

- Lịch sử phát triển: 

+ Phiên bản đầu tiên CSS1 được công bố vào năm 1996. 

+ Cho đến nay, CSS đã cập nhật và hoàn thiện thêm một số phiên bản. 

+ Trong quyển sách này, phiên bản CSS3 được sử dụng để minh hoạ khai báo CSS.

Hoạt động 2: Khai báo bộ chọn phần tử và áp dụng CSS

a) Mục tiêu: HS hiểu rõ cú pháp khai báo bộ chọn phần tử và các cách áp dụng CSS.

b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 2. Khai báo bộ chọn phần tử và áp dụng CSS, thảo luận nhóm và thực hiện nhiệm vụ.

c) Sản phẩm: Cách khai báo bộ chọn phần tử và áp dụng CSS.

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 và trả lời các câu hỏi:

+ Bộ chọn phần tử được dùng để làm gì?

+ CSS định nghĩa bộ chọn với mỗi phần tử HTML như thế nào?

+ Bộ chọn phần tử được khai báo như thế nào?

+ Có mấy cách khai báo để áp dụng CSS trong văn bản HTML?

+ Internal CSS được sử dụng và khai báo như thế nào? 

+ External CSS được sử dụng và khai báo như thế nào?

- GV lưu ý HS cách khai báo gộp các bộ chọn phần tử.

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.68 – 70 và thảo luận theo nhóm thực hiện nhiệm vụ. 

- GV quan sát và trợ giúp HS.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- Đại diện các nhóm HS trả lời.

- 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: 

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

2. Khai báo bộ chọn phần tử và áp dụng CSS

- Bộ chọn phần tử thường được dùng để áp dụng CSS cho một hoặc nhiều phần tử cụ thể trong văn bản HTML nhằm tạo sự thống nhất trong trình bày.

Ví dụ: Trình bày chữ in nghiêng cho các đoạn văn bản trên trang web. 

- Với mỗi phần tử HTML, CSS định nghĩa một bộ chọn tương ứng và đặt tên theo tên phần tử đó.

Cú pháp khai báo bộ chọn phần tử:

Ví dụ 1: Quy tắc định dạng ở Hình 2 xác định kiểu trình bày nội dung của phần tử p trong văn bản HTML có chữ màu đỏ và in đậm.

Hình 2. Một quy tắc định dạng CSS

- Có hai cách khai báo được sử dụng phổ biến để áp dụng CSS trong văn bản HTML: 

+ CSS trong (internal CSS).

+ CSS ngoài (external CSS).

Khai báo internal CSS: 

+ Thường được sử dụng khi muốn áp dụng CSS trong phạm vì một văn bản HTML. 

+ Các quy tắc định dạng được viết trong cặp thẻ <style></style> và thường được đặt trong nội dung của phần tử head.

Ví dụ 2: Trong văn bản HTML ở Hình 3a, dòng 5 và dòng 6 có khai báo CSS sử dụng bộ chọn phần tử. Kết quả hiển thị như Hình 3b.

Hình 3a. Ví dụ khai báo internal CSS 
và áp dụng bộ chọn phần tử

Hình 3b. Kết quả khi mở văn bản HTML 
ở Hình 3a bằng trình duyệt web

Khai báo external CSS: 

+ Thường được sử dụng khi cần áp dụng chung bảng định dạng CSS cho nhiều văn bản HTML. 

+ Các quy tắc định dạng được ghi lưu dưới dạng tệp có phần mở rộng *.css.  

+ Để áp dụng external CSS, thêm khai báo <link rel=“stylesheet” href=“Tên_tệp.css”> vào trong nội dung phần head của văn bản HTML.

Ví dụ 3: Văn bản HTML ở Hình 4a áp dụng các quy tắc định dạng được khai báo trong tệp external CSS có tên “default.css” (Hình 4b). Kết quả hiển thị như Hình 4c.

- Trong trường hợp một số phần tử có các khai báo CSS giống nhau, có thể viết gộp nhiều bộ chọn. Khi đó, bộ chọn gồm danh sách các phần tử, ngăn cách nhau bởi dấu “,”.

Ví dụ 4: Các bộ chọn p, h1h2, h3 cùng có chung quy tắc định dạng nên được viết gộp như ở Hình 5.

Hình 5. Ví dụ khai báo gộp các bộ chọn phần tử

Hoạt động 3: Một số thuộc tính định dạng CSS

a) Mục tiêu: Cung cấp cho HS một số thuộc tính định dạng CSS cơ bản.

b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 3. Một số thuộc tỉnh định dạng CSS, thảo luận theo nhóm và thực hiện nhiệm vụ.

c) Sản phẩm: Một số thuộc tỉnh định dạng CSS.

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

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

a) Thuộc tính định dạng màu sắc 

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

- GV yêu cầu HS vận dụng kiến thức thực tiễn, trả lời câu hỏi Hoạt động SGK tr.70:

Em hãy nêu một số thuộc tính định dạng cho đoạn văn bản mà em đã dùng trong hệ soạn thảo văn bản Microsoft Word.

- GV yêu cầu HS thảo luận theo nhóm 2 – 3 HS và trả lời các câu hỏi:

+ Trong CSS, thuộc tính định dạng màu chữ và màu nền được khai báo như thế nào?

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 3a SGK tr.71 và thảo luận theo nhóm thực hiện nhiệm vụ. 

- GV quan sát và trợ giúp HS.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- Đại diện các nhóm HS trả lời.

- Các nhóm khác đưa ra ý kiến nhận xét.

………………………

3. Một số thuộc tính định dạng CSS

a) Thuộc tính định dạng màu sắc

- Thuộc tính color định dạng màu chữ, được khai báo như sau:

Trong đó, giá trị Màu thường được xác định bởi tên màu phổ biến như red, green, blue, yellow, brown,…

Ví dụ 5: Văn bản HTML trong Hình 6a  trình bày các phần tử h1, h2 có màu xanh nước biển, phần tử p có màu đỏ khi hiển thị trên màn hình trình duyệt web (Hình 6b).

…………………………..

 

---------------------------------------

----------------------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

Khi đặt nhận được những gì?

  • Trắc nghiệm cấu trúc mới: 15 - 20 phiếu
  • Ít nhất 5 đề thi theo mẫu mới. Có đủ: ma trận, thang điểm, đáp án...
  • Giáo án đồng bộ word + PPT: Đủ kì I
  • Sau đó, sẽ được bổ sung liên tục để 30/01 có đủ cả năm

Phí giáo:

  • Giáo án word: 350k/học kì - 400k/cả năm
  • Giáo án powepoint: 450k/học kì - 500k/cả năm
  • Trọn bộ word + PPT: 700k/học kì - 800k/cả năm

=> Chỉ gửi 350k. Tải giáo án về dùng thực tế. Thấy hài lòng thì 15 ngày sau mới gửi số phí còn lại

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 tin học ứng dụng 12 cánh diều đủ cả năm

ĐẦY ĐỦ GIÁO ÁN CÁC BỘ SÁCH KHÁC

GIÁO ÁN WORD LỚP 12 CÁNH DIỀU

GIÁO ÁN POWERPOINT LỚP 12 CÁNH DIỀU

Giáo án Powerpoint Toán 12 Cánh diều
Giáo án powerpoint hình học 12 cánh diều
Giáo án powerpoint đại số 12 cánh diều

Giáo án powerpoint vật lí 12 cánh diều
Giáo án powerpoint sinh học 12 cánh diều
Giáo án powerpoint hoá học 12 cánh diều

Giáo án powerpoint ngữ văn 12 cánh diều
Giáo án powerpoint lịch sử 12 cánh diều
Giáo án powerpoint địa lí 12 cánh diều

Giáo án powerpoint Kinh tế pháp luật 12 cánh diều
Giáo án powerpoint Công nghệ 12 Công nghệ điện - điện tử cánh diều
Giáo án powerpoint Công nghệ 12 Lâm nghiệp - Thuỷ sản cánh diều

Giáo án powerpoint Tin học 12 - Định hướng Tin học ứng dụng cánh diều
Giáo án powerpoint Tin học 12 - Định hướng khoa học máy tính cánh diều
Giáo án powerpoint hoạt động trải nghiệm hướng nghiệp 12 cánh diều

GIÁO ÁN CHUYÊN ĐỀ LỚP 12 CÁNH DIỀU

GIÁO ÁN POWERPOINT CHUYÊN ĐỀ 12 CÁNH DIỀU

GIÁO ÁN DẠY THÊM LỚP 12 CÁNH DIỀU

Giáo án dạy thêm toán 12 cánh diều
Giáo án dạy thêm ngữ văn 12 cánh diều
Giáo án powerpoint dạy thêm ngữ văn 12 cánh diều
Giáo án powerpoint dạy thêm toán 12 cánh diều

Tài liệu giảng dạy

Xem thêm các bài khác

I. GIÁO ÁN WORD TIN HỌC ỨNG DỤNG 12 CÁNH DIỀU

GIÁO ÁN WORD CHỦ ĐỀ A: MÁY TÍNH VÀ XÃ HỘI TRI THỨC GIỚI THIỆU TRÍ TUỆ NHÂN TẠO

GIÁO ÁN WORD CHỦ ĐỀ B:MẠNG MÁY TÍNH VÀ INTERNET. KẾT NỐI MẠNG

GIÁO ÁN WORD CHỦ ĐỀ D: ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HOÁ TRONG MÔI TRƯỜNG SỐ

GIÁO ÁN WORD CHỦ ĐỀ F: GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH TẠO TRANG WEB

GIÁO ÁN WORD CHỦ ĐỀ E ICT: ỨNG DỤNG TIN HỌC THỰC HÀNH SỬ DỤNG PHẦN MỀM TẠO TRANG WEB

II. GIÁO ÁN POWERPOINT TIN HỌC ỨNG DỤNG 12 CÁNH DIỀU

GIÁO ÁN POWERPOINT CHỦ ĐỀ A: MÁY TÍNH VÀ XÃ HỘI TRI THỨC GIỚI THIỆU TRÍ TUỆ NHÂN TẠO

GIÁO ÁN POWERPOINT CHỦ ĐỀ B:MẠNG MÁY TÍNH VÀ INTERNET. KẾT NỐI MẠNG

GIÁO ÁN POWERPOINT CHỦ ĐỀ D: ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HOÁ TRONG MÔI TRƯỜNG SỐ

GIÁO ÁN POWERPOINT CHỦ ĐỀ F: GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH TẠO TRANG WEB

GIÁO ÁN POWERPOINT CHỦ ĐỀ E ICT: ỨNG DỤNG TIN HỌC THỰC HÀNH SỬ DỤNG PHẦN MỀM TẠO TRANG WEB

III. GIÁO ÁN CHUYÊN ĐỀ TIN HỌC ỨNG DỤNG 12 CÁNH DIỀU

GIÁO ÁN CHUYÊN ĐỀ 1: THỰC HÀNH BẢO VỆ DỮ LIỆU, CÀI ĐẶT VÀ GỠ BỎ PHẦN MỀM

GIÁO ÁN CHUYÊN ĐỀ 3: THỰC HÀNH PHÂN TÍCH DỮ LIỆU VỚI PHẦN MỀM BẢNG TÍNH

Chat hỗ trợ
Chat ngay