Đáp án Khoa học máy tính 12 Kết nối bài 7: HTML và cấu trúc trang web
File đáp án Khoa học máy tính 12 Kết nối bài 7: HTML và cấu trúc trang web. Toàn bộ câu hỏi, bài tập ở trong bài học đều có đáp án. Tài liệu dạng file word, tải về dễ dàng. File đáp án này giúp kiểm tra nhanh kết quả. Chỉ có đáp án nên giúp học sinh tư duy, tránh học vẹt.
Xem: => Giáo án Tin học 12 - Định hướng Khoa học máy tính kết nối tri thức
BÀI 7. HTML VÀ CẤU TRÚC TRANG WEB
KHỞI ĐỘNG
Các em đã được làm quen với khái niệm website và trang web, cũng có thể em đã biết cách sử dụng phần mềm để tạo ra các trang web với nội dung đa dạng và phong phú, hình thức trình bày đẹp.
Tuy nhiên, có thể các em vẫn muốn biết:
Các trang web thực chất có cấu trúc như thế nào?
Có thể “lập trình” để tạo ra được các trang web hay không? Nếu lập trình được thì “mã nguồn” của trang web là gì?
Các trang web có quan hệ như thế nào với ngôn ngữ HTML?
Trang web và trình duyệt web có quan hệ như thế nào?
Em hãy tìm câu trả lời.
Giải chi tiết:
Các trang web thực chất có cấu trúc dựa trên ngôn ngữ đánh dấu siêu văn bản (HTML). HTML định nghĩa cấu trúc và nội dung của trang web bằng cách sử dụng các thẻ và phần tử.
Có thể lập trình để tạo ra các trang web. Ngôn ngữ lập trình phổ biến được sử dụng trong việc phát triển trang web là JavaScript, PHP, Python và nhiều ngôn ngữ khác. Mã nguồn của trang web là mã được viết bằng các ngôn ngữ lập trình này, và nó thường bao gồm HTML, CSS và JavaScript.
Các trang web được xây dựng bằng ngôn ngữ HTML. HTML định nghĩa cấu trúc và nội dung của trang web bằng cách sử dụng các thẻ và phần tử. Ngoài HTML, để trang web có giao diện đẹp và tương tác, CSS được sử dụng để định dạng và trình bày trang web, JavaScript được sử dụng để thêm tính năng tương tác và xử lý logic.
Trang web và trình duyệt web có mối quan hệ chặt chẽ. Trình duyệt web là phần mềm dùng để hiển thị các trang web. Khi trình duyệt nhận được mã nguồn của một trang web, nó sẽ tải và hiển thị trang web đó theo cấu trúc và nội dung đã được định nghĩa trong ngôn ngữ HTML. Trình duyệt cũng có khả năng hiển thị các phần tử CSS và thực thi mã JavaScript để đạt được hiệu ứng và tính năng tương tác trên trang web.
1. TRANG WEB VÀ HTML
Hoạt động 1: Tìm hiểu ngôn ngữ HTML và trang WEB
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ốcC, 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à nhận xét về mã nguồn. Em thấy gì từ tệp nguồn của trang web?
Giải chi tiết:
a) Trang web hiển thị bởi trình duyệt:
- Tiêu đề của trang web được hiển thị là "Trang web và HTML".
- Dòng đầu tiên được hiển thị là "Đây là dòng đầu tiên".
- Dòng cuối cùng được hiển thị là "Đây là dòng cuối cùng"
b) Tệp văn bản nguồn Hình 7.1:
<!DOCTYPE html> <html> <head> <title>Tên trang Web</title> </head> <body> <div> <h1>Trang Web và HTML </h1> <p>Đây là dòng đầu tiên</p> <hr> <!-- dòng kẻ ngang <p>Đây là dòng cuối cùng </p> </div> </body> </html>
Đâ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.
Câu hỏi 1: Tệp văn bản trong Hình 7.1 có bao nhiêu phần tử HTML?
Giải chi tiết:
Có 8 phần tử HTML, gồm:
1. <html>: Đây là phần tử gốc (root element) của trang web.
2. <head>: Đây là phần tử đại diện cho phần đầu của trang web, chứa thông tin về trang web như tiêu đề và các thẻ meta.
3. <title>: Đây là phần tử đại diện cho tiêu đề của trang web.
4. <body>: Đây là phần tử đại diện cho phần thân của trang web, chứa nội dung hiển thị trên trình duyệt.
5. <div>: Đây là phần tử đại diện cho một khối (block) trong trang web, được sử dụng để nhóm các phần tử.
6. <h1>: Đây là phần tử đại diện cho tiêu đề cấp 1.
7. <p>: Đây là phần tử đại diện cho một đoạn văn bản.
8. <hr>: Đây là phần tử đại diện cho một dòng kẻ ngang.
Câu hỏi 2: Nêu sự giống và khác nhau giữa thẻ HTML và phần từ HTML.
Giải chi tiết:
- Giống nhau:
+ Cả thẻ HTML và phần tử HTML đều là các thành phần cơ bản của ngôn ngữ đánh dấu siêu văn bản HTML.
+ Cả hai đều được sử dụng để tạo cấu trúc và hiển thị nội dung trên trang web.
- Khác nhau:
+ Thẻ HTML là các cặp thẻ bao gồm thẻ bắt đầu và thẻ kết thúc, được viết trong cặp dấu <" và ">" (ví dụ: <p></p>). Chúng chỉ ra phạm vi tác dụng của thẻ và được sử dụng để đánh dấu các phần tử trong trang web.
+ Phần từ HTML là toàn bộ phần tử bao gồm thẻ bắt đầu, thẻ kết thúc và nội dung nằm giữa cặp thẻ đó. Nó là một khái niệm tổng quát hơn, bao gồm cả thẻ và nội dung của nó.
2. CẤU TRÚC CƠ BẢN CỦA MỘT TỆP HTML
Hoạt động 2: Tìm hiểu cấu trúc cơ bản của một tệp HTML
Quan sát tệp HTML sau, em có nhận xét gì về cấu trúc chung của một trang web?
Giải chi tiết:
Cấu trúc chung của một trang web dựa trên tệp HTML được mô tả như sau:
- Trang web bao gồm các phần tử HTML lồng nhau, tạo thành một cây thông tin. Phần tử gốc của cây là <html>.
- Trong <html>, ta có phần tử <head> và phần tử <body>.
- Phần tử <head> chứa các phần tử liên quan chung đến trang web, ví dụ như <title> để đặt tên trang web, <meta> để định nghĩa thông tin bổ sung, và các phần tử khác như <style> và <script>.
- Phần tử <body> chứa nội dung hiển thị trên trang web, bao gồm các phần tử như tiêu đề (<h1>, <h2>,...), đoạn văn bản (<p>), và các phần tử khác để định dạng và trình bày nội dung.
- Các phần tử HTML có thể lồng nhau, tạo thành quan hệ cha-con trong cây thông tin. Ví dụ, trong tệp HTML được đưa ra, phần tử <div> là cha của phần tử <h1>, và phần tử <body> là cha của cả <div> và <p>.
- Cấu trúc cây HTML này cho phép tổ chức và hiển thị nội dung của trang web theo cách tùy chỉnh, tạo ra giao diện và trải nghiệm người dùng.
Câu hỏi 1: Vẽ sơ đồ cây của đoạn văn bản HTML sau:
Giải chi tiết:
Câu hỏi 2: Cây HTML có bao nhiêu phần tử gốc?
Giải chi tiết:
Cây HTML này có một phần tử gốc duy nhất là phần tử <html>.
3. PHẦN MỀM SOẠN THẢO HTML
Hoạt động 3: Tìm hiểu cách soạn thảo các tệp HTML
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.
Giải chi tiết:
Dưới đây là một số phần mềm và cách để soạn thảo tệp HTML:
- Notepad (hoặc TextEdit trên MacOS): Đây là phần mềm soạn thảo văn bản đơn giản có sẵn trên hệ điều hành Windows và MacOS. Bạn có thể sử dụng Notepad để viết mã HTML cơ bản.
- Notepad++: Đây là một phần mềm soạn thảo chương trình đa năng, hỗ trợ nhiều ngôn ngữ lập trình, bao gồm cả HTML. Notepad++ là một phần mềm miễn phí và có thể tải về từ trang web chính thức của nó: https://notepad-plus-plus.org/. Để sử dụng Notepad++ cho HTML, bạn cần chọn ngôn ngữ HTML trong menu "Language" (Ngôn ngữ).
- Sublime Text: Sublime Text cũng là một phần mềm soạn thảo chương trình mạnh mẽ hỗ trợ nhiều ngôn ngữ lập trình, bao gồm HTML. Phiên bản cơ bản của Sublime Text là miễn phí và có thể tải về từ trang web chính thức của nó: https://www.sublimetext.com/. Để sử dụng Sublime Text cho HTML, bạn cần chọn ngôn ngữ HTML trong menu "View" (Xem) và sau đó chọn "Syntax" (Cú pháp).
- Trang web hỗ trợ soạn thảo HTML trực tuyến: Có nhiều trang web cho phép bạn soạn thảo mã HTML trực tuyến và xem kết quả ngay trên trình duyệt. Một số trang web phổ biến bao gồm w3schools.com và tutorialspoint.com Bạn có thể viết mã HTML trong khung soạn thảo trên trang web và nhấn nút "Run" (Chạy) để xem kết quả ngay trên trình duyệt.
Câu hỏi 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:
a) Notepad.
b) Opera.
c) Sublime Text.
d) Chrome.
e) Cốc Cốc.
f) Notepad++.
g) FireFox.
h) Microsoft Edge.
Giải chi tiết:
- Nhóm phần mềm soạn thảo HTML:
a) Notepad.
b) Sublime Text.
c) Notepad++.
- Nhóm trình duyệt web:
d) Opera.
e) Chrome.
f) Cốc Cốc.
g) FireFox.
h) Microsoft Edge.
Câu hỏi 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++, Sublime Text) và phần mềm soạn thảo văn bản thông thường (ví dụ Notepad)?
Giải chi tiết:
Khi soạn thảo HTML, các phần mềm chuyên nghiệp như Notepad++, Sublime Text thường cung cấp nhiều tính năng hỗ trợ và định dạng mã nguồn, bao gồm tô màu cú pháp, gợi ý từ khóa, kiểm tra lỗi cú pháp, và khả năng mở và sắp xếp nhiều tệp cùng một lúc. Chúng cũng thường có giao diện tùy chỉnh và phím tắt cho việc nhanh chóng thao tác và chỉnh sửa mã nguồn.
Trong khi đó, các phần mềm soạn thảo văn bản thông thường như Notepad chỉ cung cấp một giao diện đơn giản và ít tính năng hơn. Chúng không có tích hợp sẵn các công cụ đặc biệt cho việc soạn thảo HTML, nhưng vẫn cho phép bạn tạo và chỉnh sửa mã nguồn HTML cơ bản.
Vì vậy, sự khác biệt chính giữa các phần mềm chuyên nghiệp và phần mềm thông thường khi soạn thảo HTML là mức độ hỗ trợ và tính năng có sẵn để tăng cường quá trình soạn thảo và chỉnh sửa mã nguồn HTΜL
LUYỆN TẬP
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.
Giải chi tiết:
Một ví dụ về phần tử HTML không thể lồng là phần tử <img>. Phần tử <img> được sử dụng để hiển thị hình ảnh trên trang web và không có quan hệ cha-con với các phần tử khác. Nó được sử dụng độc lập và không thể chứa bất kỳ phần tử con nào.
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.
Giải chi tiết:
- Văn bản đơn giản: "Xin chào! Đây là trang web của tôi."
Tệp HTML tương ứng:
Html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Trang Web Của Tôi</title>
</head>
<body>
<h1>Xin chào!</h1>
<p>Đây là trang web của tôi.</p>
</body>
</html>
- Cây thông tin các phần tử HTML của trang web này:
+ <html>: Phần tử gốc của trang web.
+ <head>: Phần tử chứa thông tin đầu trang web.
+ <meta>: Phần tử định nghĩa các thông tin về tệp HTML.
+ <title>: Phần tử đặt tiêu đề cho trang web.
+ <body>: Phần tử chứa nội dung hiển thị trên trang web.
+ <h1>: Phần tử tiêu đề cấp 1.
+ <p>: Phần tử đoạn văn bản.
VẬN DỤNG
Câu 1: Em hãy tìm trên mạng các trang web hỗ trợ soạn thảo HTML trực tuyến.
Giải chi tiết:
Dưới đây là một số trang web hỗ trợ soạn thảo HTML trực tuyến:
1. CodePen (https://codepen.io )
2. JSFiddle (https://jsfiddle.net/)
Câu 2: Sử dụng phần mềm soạn thảo HTML và soạn thảo trang web có nội dung như
Hình 7.7. Lưu ý rằng thẻ <img> với tính năng thể hiện ảnh trên trang web có
cú pháp: <img src="tên tệp ảnh">, trong đó “tên tệp ảnh” chính là đường dẫn
của tệp hình ảnh cần đưa lên trang.
Giải chi tiết:
Gợi ý:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Trang Web Với Hình Ảnh</title>
</head>
<body>
<h1>Hình 7.7</h1>
<p>Lưu ý rằng thẻ <img> với tính năng thể hiện ảnh trên trang web có cú pháp:</p>
<p><img src="tên tệp ảnh">, trong đó "tên tệp ảnh" chính là đường dẫn của tệp hình ảnh cần đưa lên trang.</p>
<img src="ten-tep-anh.jpg" alt="Hình 7.7">
</body>
</html>
=> Giáo án Khoa học máy tính 12 Kết nối bài 7: HTML và cấu trúc trang web