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

b)

a)

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, đọc Hoạt động 1 – Nhận biết thuộc tính thẻ SGK tr.46 và trả lời câu hỏi:

Hãy quan sát các thẻ trong tệp newpage.html ở Hoạt động 2, Bài 7. Trong các thẻ đó có một thẻ có thêm thuộc tính. Theo em đó là thẻ nào? Em hãy đưa ra dự đoán về tác dụng của các thuộc tính thẻ.

Hình 7.2. Cấu trúc tệp HTML

- GV chia lớp thành các nhóm 2 – 3 HS để thảo luận và đặt câu hỏi:

+ Các thẻ có bắt buộc phải có thuộc tính không?

+ Thuộc tính thẻ có tác dụng gì?

+ Thuộc tính thẻ được khai báo như thế nào?

+ Thuộc tính thẻ được đặt ở vị trí nào?

+ Một thẻ có thể có nhiều thuộc tính được không?

- 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 củng cố kiến thức SGK  tr.47:

Xác định các tên thuộc tính và thẻ chứa thuộc tính tương ứng xuất hiện trong Bài 7.

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.46 – 47 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.

- GV kết luận:

Thẻ có thể có hoặc không có thuộc tính. Thuộc tính của thẻ có tác dụng bổ sung thông tin, làm rõ cách xử lí cho thẻ chứa nó.

1. THUỘC TÍNH THẺ

- Thẻ có thể có hoặc không có thuộc tính.

- Tác dụng: bổ sung thông tin, làm rõ các điều khiển được thẻ chỉ định.

- Cách khai báo:

- Vị trí: Thuộc tính nằm trong thẻ bắt đầu (không nằm trong thẻ kết thúc), sau tên thẻ.

- Một thẻ có thể có nhiều thuộc tính được ngăn cách bởi dấu cách.

Ví dụ:

- Một trong những thuộc tính được sử dụng thường xuyên nhất là thuộc tính style, dùng để thiết lập định dạng văn bản như chọn màu sắc, phông chữ, cỡ chữ, kiểu chữ, căn lề, tạo khung,... cho một phần tử HTML.

Ví dụ:

Hướng dẫn trả lời câu hỏi Hoạt động 1 SGK tr.46:

- Thẻ có thêm thuộc tính là thẻ meta.

- Thuộc tính charset="utf-8" đảm bảo trang web hiển thị đúng các kí tự và ngôn ngữ khác nhau trên toàn thế giới.

Hướng dẫn trả lời Câu hỏi củng cố kiến thức SGK tr.47:

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

SẢN PHẨM DỰ KIẾN

a) Định dạng tiêu đề

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

- GV yêu cầu HS hoạt động cá nhân, đọc Hoạt động 2 – Xác định thành phần cấu thành một văn bản SGK trang 47 và trả lời câu hỏi:

Thảo luận: Khi trình bày một văn bản (bài thơ, đoạn văn, trang web,...) có thể có những thành phần nào? Hãy kể tên các thành phần đó.

- GV chia lớp thành các nhóm 2 – 3 HS để thảo luận và đặt câu hỏi:

+ HTML5 hỗ trợ thẻ nào để định dạng tiêu đề?

+ Việc sử dụng thẻ định dạng tiêu đề mang lại những lợi ích gì?

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 2a SGK tr.47 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.

Hướng dẫn trả lời câu hỏi Hoạt động 2 SGK tr.47:

Những thành phần có thể có khi trình bày một văn bản là:

+ Tiêu đề.

+ Các đề mục.

+ Các đoạn văn bản.

+ Các hình ảnh minh họa.

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. CÁC THẺ ĐỊNH DẠNG TRÌNH BÀY VĂN BẢN

a) Định dạng tiêu đề

- HTML sử dụng các thẻ dạng <hx> trong đó x nhận một trong các giá trị từ 1 đến 6 để định dạng và phân cấp tiêu đề theo các mức khác nhau:

+ Thẻ <h1> được sử dụng cho tiêu đề chính hay tiêu đề chung của cả văn bản.

+ Các tiêu đề ở mức thấp hơn dùng thẻ <h2> và tiếp tục với các mức tiếp theo,…

- Lợi ích khi sử dụng thẻ <hx>:

+ Trình duyệt sử dụng thẻ <hx> để hiển thị trang web và định dạng văn bản giúp người dùng đọc lướt trang web theo tiêu đề. 

+ Các công cụ tìm kiếm sử dụng thẻ    <hx> để xác định cấu trúc và nội dung trang web.

Ví dụ 1: Đoạn mã HTML dưới đây minh hoạ một văn bản có bốn mức tiêu đề:

Hình 8.2. Kết quả khi dùng thẻ tiêu đề trong Ví dụ 1

b) Định dạng đoạn văn bản

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

- GV chia lớp thành các nhóm 2 – 3 HS để thảo luận và đặt câu hỏi:

+ HTML5 hỗ trợ thẻ nào để định dạng đoạn văn bản?

+ Trình duyệt sẽ hiển thị nội dung đoạn trong cặp thẻ <p>…</p> như thế nào?

+ Nội dung đoạn văn bản có thể chứa các phần tử khác được không?

- 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 củng cố kiến thức SGK tr.48:

Câu 1. Trình duyệt hiển thị đoạn mã HTML sau thành mấy dòng? Em có nhận xét gì về khoảng cách giữa các dòng?

Câu 2. Chỉnh sửa đoạn mã HTML trong Ví dụ 1 để hiển thị thêm một đường kẻ ngang phân tách giữa dòng tiêu đề “Tin học 12” và nội dung phía dưới.

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 2b SGK tr.48 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.

Hướng dẫn trả lời Câu hỏi củng cố kiến thức SGK tr.48:

Câu 1. 

+ Trình duyệt hiển thị thành 4 dòng.

+ Nhận xét về khoảng cách giữa các dòng: một cách mặc định, khi sử dụng thẻ <br>, khoảng cách giữa hai dòng nhỏ hơn so với thẻ <p>.

Tuy nhiên hai loại khoảng cách đều có thể điều chỉnh (bằng thuộc tính line-height hoặc margin-top/margin-bottom).

Câu 2. Thêm thẻ <hr> vào sau dòng đầu tiên.

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.

- GV kết luận:

Một văn bản thông thường được tạo bởi hai thành phần cơ bản là tiêu đề và các đoạn văn bản. Tiêu đề được định dạng bởi thẻ <hx>, có 6 mức tiêu đề từ <h1> đến <h6>. Đoạn văn bản được định dạng bởi thẻ <p>. Khối là một phần tử chứa nhiều loại dữ liệu, được định nghĩa bởi thẻ <div> và <span>.

b) Định dạng đoạn văn bản

- HTML sử dụng thẻ <p> để định dạng đoạn văn bản:

- Khi gặp cặp thẻ <p>…</p>, trình duyệt sẽ hiển thị nội dung đoạn trên dòng mới kèm với khoảng trống nhỏ trước và sau đoạn.

- Nội dung đoạn có thể chứa văn bản, hình ảnh và cả các phần tử khác nhưng không được chứa tiêu đề, danh sách, phần tử phân đoạn hoặc các phần tử dạng khối khác.

- Khi cần thao tác với nhiều loại nội dung, ta có thể sử dụng cặp thẻ <div>...</div> hay <span>...</span> để tạo một khối chứa nội dung bất kì đặt ở giữa hai thẻ:

+ Phần tử <div> là một khối, bắt đầu trên dòng mới.

+ Phần tử <span> có tác dụng tương tự nhưng sử dụng cho quy mô nhỏ hơn; nội dung khối hiển thị trên cùng dòng đang viết.

- Để thêm các định dạng như khung, lề,... cho đoạn, ta sử dụng thuộc tính style. Thuộc tính này sẽ được giới thiệu chi tiết trong các bài sau.

- Lưu ý: Ngoài các thẻ định dạng đoạn và khối kể trên, còn có hai thẻ <br> và <hr> để xuống dòng hoặc tạo ra một đường kẻ ngang trên trang web.