Giáo án Tin học ứng dụng 12 cánh diều bài 2: Định dạng văn bản và tạo siêu liên kết

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ời các câu hỏi:

+ Việc tổ chức các đoạn văn bản trong trang web có vai trò như thế nào?

+ Cú pháp dùng để tạo đoạn văn bản trên trang web là 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 1 SGK tr.40 – 41 để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: 

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

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. Tổ chức các đoạn văn bản trong trang web

- Vai trò: Việc tổ chức các đoạn văn bản trong trang web làm các ý được phân tách rõ ràng, giúp văn bản dễ hiểu, dễ đọc hơn đối với người dùng.

- Cú pháp tạo đoạn văn bản:

<p>Văn bản</p>

- Lưu ý: HTML không nhận biết kí tự xuống dòng (nhấn phím Enter) để kết thúc đoạn văn bản như các phần mềm soạn thảo văn bản thông thường.

- Ví dụ 1:

Hình 1a. Ví dụ về sử dụng phần tử p để tạo đoạn văn bản cho trang web

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

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 đọc Hoạt động 1 SGK tr.41 và trả lời câu hỏi: 

Em thường định dạng cho tiêu đề mục của các mục lớn và nhỏ trong một văn bản như thế nào?

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

+ HTML hỗ trợ khai báo bao nhiêu cấp độ tiêu đề mục?

+ Cú pháp khai báo các phần tử tạo tiêu đề mục là gì?

+ Trình duyệt web sẽ hiển thị tiêu đề mục với định dạng 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 2 SGK tr.41 – 42 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 1 SGK tr.41:

Tiêu đề các mục trong văn bản có kiểu chữ in đậm và cỡ chữ khác nhau tuỳ theo cấp độ.

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. Tạo tiêu đề mục

- Các cấp độ tiêu đề mục: HTML hỗ trợ khai báo sáu tiêu đề mục được phân cấp, định nghĩa bởi các phần tử h1, h2, h3, h4, h5 và h6 tương ứng (h là viết tắt của heading và các chữ số cho biết cấp của tiêu đề mục).

- Cú pháp khai báo các phần tử tạo tiêu đề mục:

<Cấp của tiêu đề mục>Tiêu đề mục</Cấp của tiêu để mục>

Trong đó: Cấp của tiêu đề mục là một trong các phần tử h1, h2, h3, h4, h5, h6.

- Hiển thị tiêu đề mục trên trình duyệt web:

+ Kiểu chữ in đậm.

+ Cỡ chữ khác nhau: Phần tử h1 tạo tiêu đề mục có cỡ chữ lớn nhất, cỡ chữ sẽ giảm dần theo các cấp từ h2 đến h6.

- Ví dụ 2:

Hình 2a. Ví dụ về khai báo tiêu đề mục

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

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 đọc Hoạt động 2 SGK tr.42 và trả lời câu hỏi: 

Hãy nêu một số cách làm nổi bật nội dung văn bản ở các hệ soạn thảo văn bản mà em đã sử dụng.

- GV yêu cầu HS hoạt động cá nhân và trả lời các câu hỏi:

+ Theo em, có cần thiết phải làm nổi bật nội dung văn bản không? Vì sao?

+ Những phần tử HTML nào giúp em làm nổi bật nội dung văn bản?

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 3 SGK tr.42 – 43 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: 

- HS lần lượt 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 2 SGK tr.42:

Một số cách làm nổi bật nội dung văn bản ở các hệ soạn thảo văn bản: in đậm, in nghiêng, gạch chân, đổi màu, tô nền chữ,…

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.

3. Làm nổi bật nội dung văn bản

- Ý nghĩa: Việc làm nổi bật nội dung văn bản là cần thiết trong quá trình soạn thảo nội dung cho trang web vì không chỉ làm nổi bật nội dung mà còn giúp người soạn thảo nội dung trang web thể hiện được mục đích của tác giả.

Bảng 1. Một số phần tử HTML dùng để làm nổi bật nội dung văn bản

- Ví dụ 3:

Hình 3a. Ví dụ sử dụng phần tử strong, em, mark làm nổi bật nội dung văn bản

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

- Lưu ý:

+ HTML định nghĩa thêm phần tử b để in đậm văn bản và phần tử i để in nghiêng văn bản.

+ Các phần tử dùng để định dạng phông chữ, cỡ chữ không còn được phiên bản HTML5 hỗ trợ. Vì vậy, để định dạng phông chữ, cỡ chữ em sẽ sử dụng CSS. Nội dung về CSS được đề cập trong Bài 8.