Giáo án Khoa học máy tính 12 Kết nối bài 16: Định dạng khung

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.
youtube.com/shorts/-FxSjX-B1sM để hiểu rõ hơn cách sử dụng thuộc tính display.

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

• Nhóm thuộc tính liên quan đến thiết lập khuôn dạng khung.

• Nhóm thuộc tính của đường viền khung.

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

• Bộ chọn là một lớp các phần tử có ý nghĩa gần giống nhau.

• Bộ chọn riêng cho từng phần tử riêng biệt có mã định danh id.

• Bộ chọn thuộc tính CSS.

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

……………