Giáo án NLS Tin học 12 THUD kết nối Bài 7: HTML và cấu trúc trang web
Giáo án NLS Tin học 12 (ứng dụng) kết nối tri thức Bài 7: HTML và cấu trúc trang web. Với năng lực số được tích hợp, tiết học sẽ giúp học sinh làm quen và ứng dụng công nghệ, tin học. KHBD này là file word, tải về dễ dàng. Là mẫu giáo án mới nhất năm 2026 để giáo viên dạy tốt môn Tin học 12.
=> Giáo án tích hợp NLS Tin học 12 TH ứng dụng Kết nối tri thức
Các tài liệu bổ trợ
Ngày soạn:…/…/…
Ngày dạy:…/…/…
CHỦ ĐỀ 4: GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH
BÀI 7. HTML VÀ CẤU TRÚC TRANG WEB
(2 tiết)
I. MỤC TIÊU
1. Kiến thức
Sau bài học này, HS sẽ:
- Hiểu và giải thích được cấu trúc của một trang web dưới dạng HTML.
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ế.
Năng lực số:
- 1.1.NC1a: Đáp ứng được nhu cầu thông tin.
- 1.1.NC1b: Áp dụng được kỹ thuật tìm kiếm để lấy được dữ liệu, thông tin và nội dung trong môi trường số.
- 1.3.NC1a: Thao tác được thông tin, dữ liệu và nội dung để tổ chức, lưu trữ và truy xuất dễ dàng hơn.
- 3.1.NC1a: Áp dụng được các cách tạo và chỉnh sửa nội dung ở các định dạng khác nhau.
- 3.4.NC1a: Lập trình.
- 5.2.NC1a: Đánh giá và lựa chọn các công cụ số, môi trường kỹ thuật số phù hợp để giải quyết các vấn đề chuyên môn.
- 5.2.NC1b: Áp dụng được các công cụ số khác nhau và các giải pháp công nghệ có thể có để giải quyết vấn đề.
- 6.1.NC1a: Phân tích được cách AI hoạt động trong các ứng dụng cụ thể.
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: KHBD, SGK, SBT Tin học 12 – Định hướng Tin học ứng dụng – Kết nối tri thức, bài trình chiếu (Slide), phòng thực hành máy tính cài sẵn phần mềm soạn thảo HTML và kết nối Internet, máy chiếu, video AI tạo bằng công cụ AI được dùng để khởi động bài học, bộ câu hỏi trắc nghiệm trên phần mềm Quizizz.
- HS: SGK, SBT Tin học 12 – Định hướng Tin học ứng dụng – Kết nối tri thức, vở ghi.
III. TIẾN TRÌNH DẠY HỌC
1. HOẠT ĐỘNG KHỞI ĐỘNG
…………………………………………..
…………………………………………..
…………………………………………..
2. HÌNH THÀNH KIẾN THỨC MỚI
Hoạt động 1: Tìm hiểu ngôn ngữ HTML và trang web
a) Mục tiêu: Giúp HS nhận biết được một số khái niệm, định nghĩa về trang web, thẻ HTML và phần tử HTML.
b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 1. Trang web và HTML, kết hợp với những hiểu biết thực tiễn để thực hiện nhiệm vụ.
c) Sản phẩm: Một số khái niệm, định nghĩa về trang web, thẻ HTML và phần tử HTML.
d) Tổ chức thực hiện:
| HOẠT ĐỘNG CỦA GV VÀ HS | SẢN PHẨM DỰ KIẾN | NLS | ||||||||||||
a) Thẻ đánh dấu HTML Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu HS đọc Hoạt động 1 - Tìm hiểu ngôn ngữ HTML và trang web SGK trang 39 và trả lời câu hỏi: Các trang web mà em vẫn thường xem được hiển thị bởi trình duyệt web (ví dụ: Cốc cốc, FireFox, Chrome). Thực chất chúng được tạo ra từ các tệp văn bản. Các tệp văn bản này được gọi là trang nguồn (hay mã nguồn) của trang web tương ứng. Quan sát Hình 7.1 và nêu nhận xét về mã nguồn của trang web.
a) Trang web hiển thị bởi trình duyệt
b) Tệp văn bản nguồn Hình 7.1. Trang web và tệp văn bản nguồn - GV chia lớp thành các nhóm 2 – 3 HS và yêu cầu: Sử dụng công cụ số tìm kiếm thông tin kết hợp đọc SGK để trả lời các câu hỏi sau: + HTML là gì? + Trang web như thế nào được gọi là trang HTML? + Em hãy quan sát Hình 7.1b và cho biết nội dung trên trang HTML bao gồm những phần nào? + Liệt kê một số thẻ đánh dấu HTML trong ví dụ ở Hình 7.1b. + Thẻ đánh dấu HTML là gì? + Thẻ đánh dấu HTML có cấu trúc như thế nào? - GV hướng dẫn HS sử dụng tính năng View Page Source (nhấn tổ hợp phím Ctrl+U) hoặc Inspect (F12) để xem mã nguồn HTML thực tế của một trang web bất kỳ, từ đó đối chiếu trực quan giữa mã lệnh đánh dấu (các thẻ <p>, <h1>) và nội dung hiển thị cho người dùng. Bước 2: HS thực hiện nhiệm vụ học tập: - HS sử dụng công cụ số tìm hiểu kiến thức. - HS tìm hiểu nội dung mục 1a SGK tr. 39 – 40 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 đọc kết quả tìm kiếm, đối chiếu với SGK và rút ra kết 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 tr.39 SGK: Đây là mã nguồn của trang web được viết bằng ngôn ngữ HTML. Nó bao gồm các thành phần như tiêu đề trang, thẻ div để nhóm các phần tử, các thẻ h1 và p để định dạng tiêu đề và đoạn văn bản, và thẻ hr để tạo dòng kẻ ngang. Mã nguồn này xác định cấu trúc và nội dung của trang web và được trình duyệt dùng để hiển thị trang web theo đúng định dạng đã được thiết lậ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. | 1. TRANG WEB VÀ HTML - HTML là viết tắt của cụm từ Hypertext Markup Language (ngôn ngữ đánh dấu siêu văn bản), là một bộ quy tắc dùng để thiết lập cấu trúc và hiển thị nội dung trang web. - Trang web được thiết lập từ các tệp văn bản thường có phần mở rộng là .html hoặc .htm được gọi là trang HTML. - Nội dung trên trang HTML bao gồm phần văn bản (text) và các kí tự đánh dấu đặc biệt nằm trong cặp dấu “<”, “>”. Các kí tự này được gọi là thẻ đánh dấu (còn gọi là thẻ HTML hay tag). - Một số thẻ đánh dấu HTML trong ví dụ ở Hình 7.1b là <head>, <body>, <h1>, <p>, <div>,… a) Thẻ đánh dấu HTML - Khái niệm: Thẻ đánh dấu HTML (tag) là các thành phần chính tạo thành ngôn ngữ đánh dấu siêu văn bản. Mỗi loại thẻ có một tên riêng và có ý nghĩa nhất định trong định dạng nội dung của trang web. - Cấu trúc: Thẻ đánh dấu HTML được viết trong cặp dấu “<”, “>”.
- Lưu ý: + Tên thẻ HTML không phân biệt chữ hoa, chữ thường nhưng mặc định tên thẻ được viết chữ thường. + Các thẻ có thể lồng nhau. Ví dụ: Thẻ <em> được lồng bên trong thẻ <p>:
+ Mỗi thẻ có thể đi kèm các thông tin thuộc tính của thẻ. Ví dụ: Thuộc tính màu được gán thêm cho thẻ <p>, do đó toàn bộ đoạn văn bản này có màu đỏ khi hiển thị trên trình duyệt:
+ Phần lớn các thẻ đều là thẻ đôi, tức là có thể bắt đầu (opening tag) và thẻ kết thúc (closing tag). Vị trí kết thúc thẻ có thêm dấu “/” chẳng hạn </p>. + Có một số loại thẻ đơn, tức là chỉ có thẻ bắt đầu. Các thẻ đơn thường có dạng <tên thẻ> hoặc <tên thẻ/>, ví dụ <hr/> (dòng kẻ ngang), <br/> (ngắt xuống dòng),… + HTML và trình duyệt không nhận biết được nhiều dấu cách. Nếu gõ nhiều dấu cách máy sẽ hiểu là chỉ có một dấu cách. Trình duyệt cũng không nhận biết dấu xuống dòng khi người dùng nhấn phím Enter trong quá trình soạn thảo. | - 1.1.NC1b: Áp dụng được kỹ thuật tìm kiếm để lấy được dữ liệu, thông tin và nội dung trong môi trường số. - 5.2.NC1b: HS sử dụng công cụ số để tìm kiếm thông tin. | ||||||||||||
b) Phần tử HTML Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu HS hoạt động cá nhân: Sử dụng công cụ số tìm kiếm thông tin kết hợp đọc SGK để trả lời các câu hỏi sau: + Phần tử HTML là gì? + Phần tử HTML có ý nghĩa như thế nào đối với trang web? + Em có nhận xét gì về vị trí của các phần tử HTML <head>, <body> và <div> trong ví dụ ở Hình 7.1b? - 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 tr.41 SGK: Câu 1. Tệp văn bản trong Hình 7.1 có bao nhiêu phần tử HTML? Câu 2. Nêu sự giống và khác nhau giữa thẻ HTML và phần tử HTML. Bước 2: HS thực hiện nhiệm vụ học tập: - HS sử dụng công cụ số tìm hiểu kiến thức. - HS tìm hiểu nội dung mục 1b SGK tr.40 – 41 và 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 đọc kết quả tìm kiếm, đối chiếu với SGK và rút ra kết 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 củng cố kiến tr.41 SGK: Câu 1. Tệp văn bản trong Hình 7.1 có 9 phần tử HTML. Câu 2. Sự giống và khác nhau giữa thẻ HTML và phần tử HTML: - Giống nhau: + Đều là các khái niệm cơ bản liên quan đến trang web. + Đều là các thành phần cơ bản của các trang web. + Đều có tác dụng định dạng nội dung văn bản của trang web. - Khác nhau: + Thẻ HTML là các từ khoá đặc biệt đóng vai trò cốt lõi của ngôn ngữ HTML. Phần tử HTML bao gồm cả thẻ HTML và nội dung văn bản chịu tác động của thẻ này. + Thẻ HTML có tác dụng xác định một định dạng cụ thể. Phần tử HTML đóng vai trò các đơn vị định dạng của toàn bộ trang web. 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: Trang web được thiết lập theo một ngôn ngữ có cấu trúc đặc biệt gọi là ngôn ngữ đánh dấu siêu văn bản HTML. Các tệp HTML là tệp văn bản được cấu tạo từ các phần tử HTML. Mỗi phần tử HTML gồm nội dung được đánh dấu bởi các thẻ (HTML tag) có tính năng điều khiển hoặc định dạng nội dung. Trình duyệt có chức năng hiển thị nội dung trang web theo đúng định dạng được thiết lập. | b) Phần tử HTML - Khái niệm: Phần tử HTML (element) là khái niệm cơ bản của trang HTML. Thông thường, một phần tử được định nghĩa bởi thẻ bắt đầu, thẻ kết thúc và phần nội dung nằm giữa cặp thẻ này.
- Lưu ý: Các thẻ đơn cùng với nội dung của nó cũng được gọi là phần tử HTML.
- Ý nghĩa: Các phần tử HTML đóng vai trò quan trọng tạo nên cấu trúc và nội dung của trang web. - Trong ví dụ ở Hình 7.1b: + Hai phần tử <head> và <body> rời nhau. + Phần tử <div> chứa bên trong bốn phần tử HTML khác.
- Lưu ý: + Dòng đầu tiên của mỗi tệp HTML có dạng <!DOCTYPE html> có vai trò thông báo kiểu của tệp là html và không được xem là phần tử HTML. + Phần tử HTML đặc biệt có ý nghĩa chú thích trong tệp HTML có dạng:
| - 1.1.NC1b: Áp dụng được kỹ thuật tìm kiếm để lấy được dữ liệu, thông tin và nội dung trong môi trường số. - 5.2.NC1b: HS sử dụng công cụ số để tìm kiếm thông tin. |
Hoạt động 2: Tìm hiểu cấu trúc cơ bản của một tệp HTML
a) Mục tiêu: HS nắm được cấu trúc trang web.
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ơ bản của một tệp HTML để thực hiện nhiệm vụ.
c) Sản phẩm: Cấu trúc trang web.
d) Tổ chức thực hiện:
…………………………………………..
…………………………………………..
…………………………………………..
Hoạt động 3: Tìm hiểu cách soạn thảo các tệp HTML
a) Mục tiêu: HS biết có nhiều phần mềm soạn thảo tệp HTML, ưu nhược điểm của từng phần mềm để lựa chọn phần mềm phù hợp với hoàn cảnh sử dụng.
b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 3. Phần mềm soạn thảo HTML, kết hợp với những hiểu biết thực tiễn để thực hiện nhiệm vụ.
c) Sản phẩm: Các cách soạn thảo HTML.
d) Tổ chức thực hiện:
| HOẠT ĐỘNG CỦA GV VÀ HS | SẢN PHẨM DỰ KIẾN | NLS | |||||||
a) Phần mềm Notepad Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu HS đọc Hoạt động 3 - Tìm hiểu cách soạn thảo các tệp HTML SGK trang 43: Hãy tìm hiểu những phần mềm có thể dùng để soạn thảo tệp HTML. Thảo luận để tìm ra cách soạn thảo tệp HTML hợp lí nhất. - GV yêu cầu HS hoạt động cá nhân và đặt câu hỏi: + Phần mềm Notepad có sẵn trên hệ điều hành nào? + Em hãy nêu tên của một phần mềm tương tự Notepad trên hệ điều hành khác. 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 3a SGK tr.43 để 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. | 3. PHẦN MỀM SOẠN THẢO HTML Có nhiều cách để tạo tệp nguồn HTML. Ví dụ sử dụng các phần mềm soạn thảo như Notepad, Notepad++ hay Sublime Text. Ta cũng có thể soạn thảo trên các trang hỗ trợ tạo tệp HTML trực tuyến. a) Phần mềm Notepad - Đây là phần mềm soạn thảo văn bản đơn giản không định dạng, cung cấp một số chức năng chỉnh sửa cơ bản. - Notepad có sẵn trên hệ điều hành Windows. - Trên MacOS cũng có phần mềm tương tự Notepad là TextEdit. | 5.2.NC1a: Đánh giá và lựa chọn các công cụ số, môi trường kỹ thuật số phù hợp để giải quyết các nhu cầu chuyên môn. | |||||||
b) Phần mềm soạn thảo HTML chuyên nghiệp nguồn mở Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu HS hoạt động cá nhân và đặt câu hỏi: + Notepad++ là phần mềm gì? + Em cần thực hiện những thao tác nào để phần mềm Notepad++ hiển thị và hỗ trợ soạn thảo HTML? + Ngoài Notepad++, phần mềm nào cũng hỗ trợ soạn thảo chương trình với nhiều ngôn ngữ khác nhau? + Em cần thực hiện những thao tác nào để phần mềm Sublime Text hiển thị và hỗ trợ soạn thảo HTML? 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 3b SGK tr.43 để 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. | b) Phần mềm soạn thảo HTML chuyên nghiệp nguồn mở - Phần mềm Notepad++ + Notepad++ là phần mềm soạn thảo chương trình đa năng, hỗ trợ soạn thảo chương trình với nhiều ngôn ngữ khác nhau, trong đó có ngôn ngữ HTML. + Notepad++ là phần mềm miễn phí, mã nguồn mở và có thể tải về từ địa chỉ https://notepad-plus-plus.org/.
Hình 7.5. Giao diện soạn thảo HTML của Notepad++ + Lưu ý: Để phần mềm hiển thị và hỗ trợ soạn thảo HTML cần thực hiện lệnh Language - Phần mềm Sublime Text + Sublime Text là phần mềm soạn thảo chương trình với nhiều ngôn ngữ khác nhau, tương tự như Notepad++. + Sublime Text có phiên bản cơ bản miễn phí và có thể tải về từ địa chỉ https://www.sublimetext.com/. + Lưu ý: Để phần mềm hiển thị và hỗ trợ soạn thảo HTML cần thực hiện lệnh View | ||||||||
c) Sử dụng trang web hỗ trợ soạn thảo HTML trực tuyến Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu HS hoạt động cá nhân và đặt câu hỏi: + Ngoài các phần mềm như Notepad, Notepad++ hay Sublime Text, còn có cách nào khác để soạn thảo HTML không? + Để soạn thảo HTML trực tuyến, máy tính cần đáp ứng những yêu cầu gì? - GV giới thiệu cho HS một số trang web hỗ trợ soạn thảo HTML trực tuyến. - 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 tr.44 SGK: Câu 1. Xếp các tên sau vào hai nhóm: phần mềm soạn thảo HTML và trình duyệt web:
Câu 2. Em có nhận xét gì về sự khác biệt khi soạn thảo HTML giữa các phần mềm chuyên nghiệp (ví dụ Notepad++, SublimeText) và phần mềm soạn thảo văn bản thông thường (ví dụ Notepad)? 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 3c SGK tr.44 để 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 củng cố kiến thức tr.44 SGK: Câu 1. - Phần mềm soạn thảo HTML: a, c, f. - Trình duyệt web: b, d, e, g, h. Câu 2. Sự khác biệt khi soạn thảo HTML giữa các phần mềm chuyên nghiệp (ví dụ Notepad++, SublimeText) và phần mềm soạn thảo văn bản thông thường (ví dụ Notepad): - Trong phần mềm chuyên nghiệp thì văn bản nguồn HTML sẽ tự động tô màu các thẻ HTML và thuộc tính của nó, còn phần mềm soạn thảo bình thường thì không có tính năng đó. - Các phần mềm soạn thảo chuyên nghiệp có thể có thêm các tính năng sau: + Hỗ trợ tự động điền để hoàn thiện việc nhập thẻ. + Hỗ trợ nhập tự động thẻ. + Hỗ trợ chế độ nhập như trong các phần mềm soạn thảo hiện đại. 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: Có thể soạn thảo tệp HTML bằng nhiều phần mềm khác nhau. Cũng có thể soạn thảo trực tuyến và kiểm tra kết quả trực tiếp trên trình duyệt. | c) Sử dụng trang web hỗ trợ soạn thảo HTML trực tuyến - Một cách phổ biến để soạn thảo HTML là sử dụng các trang hỗ trợ soạn thảo HTML trực tuyến. - Để thực hiện theo cách này, yêu cầu máy tính có kết nối Internet và cài đặt trình duyệt chuẩn, ví dụ như Cốc Cốc, FireFox, Chrome hay Microsoft Edge. - Khi soạn thảo HTML trực tuyến, có thể quan sát ngay kết quả hiển thị trang web trên trình duyệt. Trong Hình 7.6, việc soạn thảo HTML được thực hiện tại khung bên trái, nháy nút Run để kiểm tra kết quả tại khung bên phải.
Hình 7.6. Soạn thảo trang HTML trực tuyến - Một số trang web hỗ trợ soạn thảo HTML trực tuyến là: + https://www.tutorialspoint.com/ … |
3. HOẠT ĐỘNG LUYỆN TẬP
a) Mục tiêu: Giúp HS củng cố kiến thức đã học về HTML.
b) Nội dung: GV giao nhiệm vụ cho HS, HS hoàn thành phiếu bài tập.
c) Sản phẩm học tập:
- Phiếu bài tập.
- HS hệ thống lại các kiến thức về HTML.
d) Tổ chức thực hiện:
Bước 1: GV chuyển giao nhiệm vụ:
- GV tổng hợp các kiến thức cần ghi nhớ cho HS.
- GV tổ chức trò chơi trắc nghiệm nhanh trên Quizizz để củng cố toàn bài.
- GV cung cấp mã QR hoặc đường Links cho HS làm Phiếu bài tập, trả lời nhanh một số câu hỏi trắc nghiệm tổng kết bài học.
Trường THPT:…………………………………………. Lớp:……………………………………………………... Họ và tên:………………………………………………. PHIẾU BÀI TẬP TIN HỌC 12 ĐỊNH HƯỚNG TIN HỌC ỨNG DỤNG – KẾT NỐI TRI THỨC BÀI 7: HTML VÀ CẤU TRÚC TRANG WEB A. PHẦN TRẮC NGHIỆM NHIỀU PHƯƠNG ÁN LỰA CHỌN Khoanh tròn vào chữ cái đứng trước câu trả lời đúng nhất: Câu 1: Trên trang HTML, thẻ p có ý nghĩa gì? A. Đoạn văn bản. B. Tiêu đề trang web. C. Tiêu đề văn bản. D. Một câu trích dẫn ngắn. Câu 2: Phát biểu nào sau đây sai? A. Một phần tử HTML được định nghĩa bởi thẻ bắt đầu, thẻ kết thúc và phần nội dung nằm giữa cặp thẻ này. B. Dòng đầu tiên của mỗi tệp HTML có dạng <!DOCTYPE html> có vai trò thông báo kiểu của tệp là html và được xem là phần tử HTML. C. <br> là thẻ đơn. D. 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. Câu 3. Em sử dụng thẻ nào sau đây để chèn dòng kẻ ngang vào trang HTML? A. <br/>. B. <hr/>. C. <qr/>. D. <dr/>. Câu 4. ………………………………………….. ………………………………………….. ………………………………………….. B. PHẦN TRẮC NGHIỆM ĐÚNG – SAI Câu 1. Mỗi tệp HTML bao gồm nhiều phần tử HTML, các phần tử HTML có thể lồng nhau. a. Phần tử <meta> nằm trong phần tử <body> và được dùng để mô tả các thông tin bổ sung của trang web như cách mã hoá Unicode, từ khoá dùng để tìm kiếm trang, tên tác giả trang web. b. Trong sơ đồ hình cây HTML, phần tử <html> là phần tử gốc (root). c. Nhóm các thẻ định dạng văn bản thường dùng là các thẻ tiêu đề theo thứ tự tăng cấp dần là <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. d. Phần tử <title> nằm trong phần tử <head> và được dùng để mô tả tên của trang web. |
- GV yêu cầu HS hoạt động cá nhân và thực hiện hoạt động Luyện tập SGK tr.44:
Câu 1. Tìm ví dụ về phần tử HTML không thể lồng, tức là không thể có quan hệ cha – con trong cây thông tin của trang web.
Câu 2. Chọn một văn bản đơn giản. Soạn thảo tệp HTML để hiển thị nội dung văn bản đó. Vẽ cây thông tin các phần tử HTML của trang web vừa soạn thảo.
Bước 2: HS thực hiện nhiệm vụ học tập:
- HS suy nghĩ, hoàn thành các bài tập GV yêu cầu.
- GV quan sát và hỗ trợ, hướng dẫn HS.
Bước 3: Báo cáo kết quả hoạt động, thảo luận:
- HS trả lời nhanh câu hỏi trắc nghiệm.
- Mỗi bài tập GV mời 1 đến 2 HS trình bày. Các HS khác chú ý chữa bài, theo dõi nhận xét bài làm của các bạn.
Gợi ý đáp án:
* PHIẾU BÀI TẬP
A. PHẦN TRẮC NGHIỆM NHIỀU PHƯƠNG ÁN LỰA CHỌN
| Câu 1 | Câu 2 | Câu 3 | Câu 4 | Câu 5 |
| A | B | B | D | C |
B. PHẦN TRẮC NGHIỆM ĐÚNG – SAI
Câu 1.
a. S
b. Đ
c. S
d. Đ
[2.1.NC1a: HS thực hiện các tương tác được xác định rõ ràng với công nghệ số (làm bài tập online) trong lớp học.]
* LUYỆN TẬP
Câu 1. Một số ví dụ về các phần tử HTML không thể có quan hệ cha – con:
- Các thẻ như h1, h2,…, p không thể lồng nhau.
- Các thẻ như b, i, u, em, strong cũng không thể lồng nhau.
Câu 2. GV cho HS hoàn thành ở nhà.
[3.4.NC1a: Viết mã lệnh HTML.
3.1.NC1a: Sử dụng các công cụ kỹ thuật số để tạo, thiết kế và phát triển các nội dung số phức tạp.]
Bước 4: Đánh giá kết quả thực hiện:
- GV chữa bài, chốt đáp án, tuyên dương các hoạt động tốt, nhanh và chính xác.
4. HOẠT ĐỘNG VẬN DỤNG
a) Mục tiêu:
…………………………………………..
…………………………………………..
…………………………………………..