Giáo án Khoa học máy tính 12 Cánh diều bài 3: Thực hành định dạng văn bản và tạo siêu liên kết

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

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

BÀI 3: THỰC HÀNH ĐỊNH DẠNG VĂN BẢN VÀ TẠO SIÊU LIÊN KẾT

(2 tiết)

I. MỤC TIÊU

1. Kiến thức

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

• Tạo được trang web đơn giản với các đoạn văn bản và các tiêu đề mục.

• Làm nổi bật được nội dung văn bản trên màn hình trình duyệt web.

• Tạo được siêu liên kết.

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 cách tạo nội dung trang web theo đoạn văn bản và cách tạo tiêu đề mục.

• Hiểu được các thành phần khác nhau của văn bản cần có kiểu định dạng khác nhau, phù hợp và giúp nhấn mạnh nội dung.

• Tạo được siêu liên kết.

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, phòng máy tính có kết nối Internet, các ví dụ và hình ảnh minh hoạ kết quả.

• 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 tập lại một số cách làm nổi bật nội dung văn bản.

b) Nội dung: HS ôn tập lại một số phần tử HTML dùng để làm nổi bật nội dung văn bản.

c) Sản phẩm: Một số phần tử HTML dùng để làm nổi bật nội dung văn bản.

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

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

- GV cho HS nối tên một số phần tử HTML với mục đích sử dụng của nó.

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

- HS vận dụng những kiến thức đã học để hoàn thành hoạt động.

- 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ình bày đáp án.

Gợi ý trả lời: 

 - 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: Ở Bài 2, các em đã được học cách tạo tiêu đề mục, làm nổi bật nội dung văn bản, tạo siêu liên kết. Để giúp các em ôn tập lại kiến thức đồng thời được thực hành theo nội dung lí thuyết đã học, chúng ta sẽ cùng nhau đến với Bài 3: Thực hành định dạng văn bản và tạo siêu liên kết.

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

Hoạt động 1: Tạo tiêu đề mục cho trang web giới thiệu về bản thân

a) Mục tiêu: Giúp HS luyện tập việc khai báo văn bản HTML cơ bản gồm các thành phần head, body, tiêu đề trang web thông qua phần tử title, các khai báo cơ bản một số tiêu đề mục cấp 1 và cấp 2.

b) Nội dung: GV hướng dẫn HS thực hiện theo Nhiệm vụ 1 SGK tr.46 để tạo tiêu đề mục cho trang web giới thiệu về bản thân.

c) Sản phẩm: HS tạo được tiêu đề mục cho trang web giới thiệu về bản thân.

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

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

SẢN PHẨM DỰ KIẾN

Nhiệm vụ 1. Tạo tiêu đề mục cho trang web giới thiệu về bản thân Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu HS đọc kĩ yêu cầu của Nhiệm vụ 1 SGK tr.46 và thực hành cá nhân theo hướng dẫn. Yêu cầu: Soạn thảo nội dung trang web giới thiệu bản thân và lưu tệp văn bản HTML với tên “Bai3-NV1.html”. Màn hình trình duyệt web cần hiển thị: Tiêu đề trang web là: Trang web cá nhân. Dòng đầu tiên viết nội dung: Trang web cá nhân của <Tên của em> được trình bày với tiêu đề mục Heading 1. Ví dụ: Trang web cá nhân của Thanh Uyên. Các dòng tiếp theo là tiêu đề mục Heading 2 với các mục Thông tin cá nhân, Sở thích, mỗi mục viết trên một dòng. Hình 1 minh hoạ các tiêu đề mục trong trang web cá nhân của bạn Thanh Uyên được hiển thị trên màn hình trình duyệt web Google Chrome. Hình 1. Các tiêu đề mục trong trang web cá nhân của bạn Thanh Uyên Hướng dẫn: + Bước 1: Tạo tệp “Bai3-NV1.html”. Mở phần mềm Sublime Text. Mở tệp mới: Chọn File\New File. Lưu tệp với tên “Bai3-NV1.html”. + Bước 2: Tạo cấu trúc và khai báo phần tử head. Dòng đầu tiên: <!DOCTYPE html>. Khai báo phần tử html bằng cặp thẻ: <html></html>. Trong nội dung phần tử html: Khai báo phần tử head bằng cặp thẻ: <head></head>. Khai báo phần tử body bằng cặp thẻ: <body></body>. Trong nội dung phần tử head: Khai báo tiêu đề trang web bằng phần tử title. Thiết lập thuộc tính charset của phần tử meta để hiển thị đúng tiếng Việt trên trình duyệt bằng khai báo <meta charset=“utf-8”>. + Bước 3: Soạn nội dung phần tử body. Sử dụng phần tử h1 để trình bày tiêu đề mục Heading 1. Sử dụng phần tử h2 để trình bày tiêu đề mục Heading 2. + Bước 4: Ghi lưu, mở tệp bằng trình duyệt web và xem kết quả. - GV lưu ý HS cách thêm chú thích vào văn bản HTML. Bước 2: HS thực hiện nhiệm vụ học tập:  - HS tiếp nhận và thực hiện theo đúng hướng dẫn để hoàn thành yêu cầu Nhiệm vụ 1. - Trong quá trình HS thực hành, GV quan sát, hỗ trợ, giải đáp các vướng mắc của HS. Bước 3: Báo cáo kết quả hoạt động, thảo luận:  - GV mời một số HS trình bày kết quả. - HS quan sát bài làm của các bạn khác, nhận xét nhau. Bước 4: Đánh giá kết quả thực hiện:  - GV nhận xét, kiểm tra kết quả thực hiện Nhiệm vụ 1 của HS. - Nhiệm vụ 1 được gọi là hoàn thành khi HS tạo được các tiêu đề mục như Hình 1.

Nhiệm vụ 1. Tạo tiêu đề mục cho trang web giới thiệu về bản thân - Bước 1: HS tạo tệp “Bai3-NV1.html”. - Bước 2: HS thực hiện tạo cấu trúc và khai báo phần tử head.  - Bước 3: HS thực hiện soạn nội dung phần tử body. - Bước 4: HS ghi lưu, mở tệp bằng trình duyệt web và xem kết quả. Lưu ý: Để thêm chú thích vào văn bản HTML, em viết chú thích trong cặp thẻ  <!-- và -->. Các chú thích sẽ không hiển thị trên trình duyệt web. * Nội dung tệp “Bai3-NV1.html”:

Hoạt động 2: Làm nổi bật nội dung cho trang web giới thiệu về bản thân

a) Mục tiêu: HS sử dụng thêm các phần tử khác đã được học ở Bài 2 để làm nổi bật văn bản theo một số cách khác nhau.

b) Nội dung: GV hướng dẫn HS thực hiện theo Nhiệm vụ 2 SGK tr.47 để làm nổi bật nội dung cho trang web giới thiệu về bản thân.

c) Sản phẩm: HS sử dụng được các phần tử đã học ở Bài 2 để cập nhật và làm nổi bật nội dung cho trang web giới thiệu về bản thân.

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

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

SẢN PHẨM DỰ KIẾN

Nhiệm vụ 2. Làm nổi bật nội dung cho trang web giới thiệu về bản thân Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu HS đọc kĩ yêu cầu của Nhiệm vụ 2 SGK tr.47 và thực hành cá nhân theo hướng dẫn. Yêu cầu: 1) Soạn nội dung chi tiết cho mỗi mục đã có tiêu đề trong trang web giới thiệu bản thân ở tệp “Bai3-NV1.html”. Mục Thông tin cá nhân cần có các thông tin: Họ và tên, Sinh năm, Quê quán. Mục Sở thích, nêu các sở thích của mình (ví dụ, Đọc sách: Các tác phẩm của nhà văn Nguyễn Nhật Ánh, Thể thao: Chơi bóng chuyền, Chơi cầu lông). …………………

Nhiệm vụ 2. Làm nổi bật nội dung cho trang web giới thiệu về bản thân - Bước 1: HS đổi tên tệp “Bai3-NV1.html” thành “Bai3-NV2.html”. - Bước 2: HS thực hiện cập nhật nội dung phần tử body. - Bước 3: HS thực hiện làm nổi bật nội dung trang web. …………………..

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

----------------------Còn tiếp---------------------