Giáo án Tin học ứng dụng 12 cánh diều bài 1: Làm quen với ngôn ngữ đánh dấu siêu văn bản

TẠO TRANG WEB BÀI 1: LÀM QUEN VỚI NGÔN NGỮ ĐÁNH DẤU SIÊU VĂN BẢN (2 tiết) I. MỤC TIÊU 1. Kiến thức Sau bài học này, HS sẽ: - Nhận biết được một số khái niệm chính của ngôn ngữ đánh dấu siêu văn bản: phần tử, thẻ mở, thẻ đóng. - Trình bày được cấu trúc của văn bản HTML. - Tạo được một trang web đơn giản bằng ngôn ngữ đánh dấu siêu văn bản. 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 khái niệm và chức năng của ngôn ngữ HTML. - Hiểu cấu trúc thẻ HTML, phần tử HTML, nhận dạng được thẻ HTML và phần tử HTML trong ví dụ cụ thể. - Hiểu và giải thích được cấu trúc trang web. - Biết về các phần mềm soạn thảo HTML, các ưu nhược điểm của từng phần mềm, từ đó lựa chọn được phần mềm soạn thảo phù hợp với nhiệm vụ và điều kiện thực tế. 3. Phẩm chất - Hình thành ý thức trách nhiệm khi làm việc nhóm. Rèn tính cẩn thận, kiên trì, chăm chỉ học hỏi để hoàn thành nhiệm vụ được giao. 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, một số tệp HTML có cấu trúc đầy đủ. - HS: SGK, SBT Tin học 12 – Định hướng Tin học ứng dụng – Cánh diều, vở ghi, máy tính. III. TIẾN TRÌNH DẠY HỌC A. HOẠT ĐỘNG KHỞI ĐỘNG a) Mục tiêu: - Khơi gợi nhu cầu tìm hiểu bản chất của một vấn đề quen thuộc, từ đó HS thấy được sự cần thiết phải tìm hiểu các kiến thức mới bổ sung cho hiểu biết của bản thân. - Tạo không khí hứng khởi khi bắt đầu tiết học. 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 cho HS xem video về HTML https://www.youtube.com/watch?v=xKuJrmlCdig, sau đó nêu câu hỏi Khởi động SGK trang 35: Theo em, có ngôn ngữ chuyên dụng dùng để tạo trang web không? Bước 2: HS thực hiện nhiệm vụ học tập: - HS theo dõi video 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 Khởi động tr.35 SGK. Gợi ý trả lời: Có ngôn ngữ chuyên dụng dùng để tạo trang web. Đó là HTML. - 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: HTML đóng vai trò là bước đệm không thể thiếu trong hành trình khám phá thế giới lập trình dành cho người mới. Đơn giản nhưng mạnh mẽ, HTML là ngôn ngữ đánh dấu siêu văn bản, mở cánh cửa đầu tiên để bắt đầu sáng tạo trên không gian web. Vậy để hiểu rõ hơn về cấu trúc và sức mạnh của HTML, chúng ta sẽ cùng nhau đến với Bài 1: Làm quen với ngôn ngữ đánh dấu siêu văn bản. B. HÌNH THÀNH KIẾN THỨC MỚI Hoạt động 1: Ngôn ngữ đánh dấu siêu văn bản a) Mục tiêu: Giới thiệu cho HS về ngôn ngữ đánh dấu siêu văn bản. b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 1. Ngôn ngữ đánh dấu siêu văn bản, kết hợp với những hiểu biết thực tiễn, thảo luận nhóm thực hiện nhiệm vụ. c) Sản phẩm: Một số khái niệm cơ bản. 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: + Thế nào là trang web tĩnh, trang web động? + Em có thể tạo trang web bằng những cách nào? - GV yêu cầu HS đọc Hoạt động SGK trang 35 và trả lời câu hỏi: Em hãy cho biết các thành phần trong trang chủ của website minh hoạ ở Hình 1. - 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: + Phần tử HTML là gì? + Một phần tử HTML được khai báo như thế nào? + Có thể cung cấp thông tin bổ sung cho phần tử bằng cách 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 1 SGK tr.35 – 36 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 tr.35 SGK: Các thành phần trong trang chủ của website minh hoạ ở Hình 1: tiêu đề, menu điều hướng, banner/hình ảnh nền, nội dung chính, sidebar, các siêu liên kết giúp người sử dụng dễ dàng truy cập đến các tài nguyên web khác. 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. Ngôn ngữ đánh dấu siêu văn bản - Thông thường, một website (như Hình 1) gồm một số trang web tĩnh và một số trang web động. Hình 1. Trang chủ của website https://moet.gov.vn ngày 21/9/2023 + Trang web tĩnh: nội dung không thay đổi mỗi khi người dùng truy cập. + Trang web động: nội dung có thể thay đổi tuỳ theo yêu cầu của người dùng. * Tìm hiểu xong chủ đề này, em sẽ tạo được các trang web tĩnh. - Có nhiều cách để tạo trang web: + Sử dụng phần mềm có sẵn. DreamWeaver Mobirise + Sử dụng ngôn ngữ chuyên dụng - ngôn ngữ đánh dấu siêu văn bản (HyperText Markup Language - HTML). - Phần tử là các đối tượng được HTML định nghĩa để khai báo các thành phần của trang web như tiêu đề mục, đoạn văn, bảng biểu, hình ảnh, âm thanh và các siêu liên kết.... - Thông thường, một phần tử được khai báo bắt đầu bằng thẻ mở (<>), sau đó đến phần nội dung và kết thúc bằng thẻ đóng (). Hình 2. Cấu trúc của một phần tử Ngoài ra, có một số phần tử không sử dụng thẻ đóng để kết thúc khai báo như: , , . - Để cung cấp thông tin bổ sung, một số phần tử cho phép khai báo thêm một hoặc nhiều thuộc tính theo cú pháp tên thuộc tính = “giá trị”. Hình 3. Ví dụ khai báo thuộc tính của phần tử Hoạt động 2: Cấu trúc của một văn bản HTML a) Mục tiêu: Giúp HS hiểu rõ cấu trúc, cú pháp văn bản HTML, vai trò của phần đầu tài liệu (head), phần thân (body). b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 2. Cấu trúc của một văn bản HTML, kết hợp với những hiểu biết thực tiễn, thảo luận nhóm thực hiện nhiệm vụ. c) Sản phẩm: Cấu trúc, cú pháp văn bản HTML, vai trò của phần đầu tài liệu (head), phần thân (body). 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: + Một văn bản HTML thường có cấu trúc 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.36 - 37 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. Cấu trúc của một văn bản HTML Hình 4a. Một văn bản HTML - Thông thường, dòng đầu tiên của văn bản HTML là một chỉ dẫn cung cấp thông tin phiên bản HTML được sử dụng. - Toàn bộ cấu trúc và nội dung trang web được viết trong cặp thẻ mở và thẻ đóng . - Nội dung trang web thường được chia thành hai phần: + Phần đầu (head): • Được viết trong cặp thẻ mở và thẻ đóng . • Tiêu đề trang web được viết trong cặp thẻ mở và sẽ được hiển thị trên tiêu đề của cửa sổ trình duyệt web. • Phần tử meta khai báo thông tin liên quan đến bảng mã kí tự, từ khoá tìm kiếm, thông tin tác giả. + Phần thân (body): Được viết trong cặp thẻ mở và thẻ đóng sẽ được hiển thị trong màn hình của cửa sổ trình duyệt web như minh hoạ ở Hình 4b. Hình 4b. Kết quả khi mở văn bản HTML trong Hình 4a bằng trình duyệt web

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

………..Còn tiếp…………