Đáp án Tin học ứng dụng 12 kết nối bài 7: HTML và cấu trúc trang web
File đáp án Tin học 12 tin học ứng dụng kết nối tri thức 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.
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:
1. Cấu trúc của các trang web
Các trang web thường được cấu trúc dựa trên ngôn ngữ HTML (HyperText Markup Language). Một trang web cơ bản có các phần chính sau:
Phần mở đầu (doctype): Xác định phiên bản HTML được sử dụng.
Thẻ <html>: Bao quanh toàn bộ nội dung của trang web.
Thẻ <head>: Chứa các thông tin meta, tiêu đề của trang, liên kết đến các tệp CSS và các tệp JavaScript, và các thông tin không hiển thị trực tiếp trên trang.
Thẻ <body>: Chứa toàn bộ nội dung hiển thị trên trang web, bao gồm văn bản, hình ảnh, liên kết, bảng, danh sách, v.v.
2. Lập trình để tạo ra các trang web
Có thể lập trình để tạo ra các trang web. Quá trình này thường bao gồm:
HTML (HyperText Markup Language): Định nghĩa cấu trúc cơ bản của trang web.
CSS (Cascading Style Sheets): Định nghĩa cách trình bày và bố cục của trang web.
JavaScript: Thêm tính năng động và tương tác cho trang web.
Ngoài ra, còn có các ngôn ngữ lập trình phía máy chủ như PHP, Python, Ruby, và các framework như Django, Ruby on Rails, và Node.js để xử lý logic phức tạp và giao tiếp với cơ sở dữ liệu.
3. Mã nguồn của trang web là gì?
Mã nguồn của trang web bao gồm các tệp HTML, CSS, JavaScript và bất kỳ tệp nào khác được sử dụng để tạo nên trang web. Các tệp này có thể được viết và chỉnh sửa bằng bất kỳ trình soạn thảo văn bản nào.
Ví dụ mã nguồn HTML đơn giản:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My First Web Page</h1>
<p>This is a paragraph of text on my web page.</p>
<script src="script.js"></script>
</body>
</html>
4. Quan hệ giữa trang web và ngôn ngữ HTML
HTML là ngôn ngữ đánh dấu được sử dụng để tạo ra các trang web. Nó xác định cấu trúc và nội dung của trang web bằng cách sử dụng các thẻ và thuộc tính. HTML là nền tảng của mọi trang web và được tất cả các trình duyệt web hỗ trợ.
5. Quan hệ giữa trang web và trình duyệt web
Trình duyệt web (web browser) là phần mềm cho phép người dùng truy cập và hiển thị các trang web. Khi người dùng nhập địa chỉ URL của một trang web vào trình duyệt, trình duyệt sẽ gửi một yêu cầu (request) đến máy chủ chứa trang web đó. Máy chủ sẽ phản hồi (response) bằng mã nguồn HTML, CSS, và JavaScript của trang web. Trình duyệt sẽ đọc và hiển thị nội dung đó cho người dùng.
Các trình duyệt web phổ biến bao gồm Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, và Opera. Mỗi trình duyệt có thể hiển thị trang web hơi khác nhau do cách nó xử lý và hiển thị mã nguồn.
Kết luận
Trang web được xây dựng từ mã nguồn HTML, CSS và JavaScript, cùng với các ngôn ngữ lập trình phía máy chủ nếu cần thiết. HTML định nghĩa cấu trúc, CSS định nghĩa hình thức, và JavaScript thêm tính tương tác cho trang web. Các trang web được hiển thị và tương tác thông qua các trình duyệt web, giúp người dùng truy cập và sử dụng nội dung một cách dễ dàng và hiệu quả.
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:
Quan sát Hình 7.1, chúng ta thấy mã nguồn của trang web được viết bằng ngôn ngữ HTML. Đây là một ngôn ngữ đánh dấu được sử dụng để tạo ra các trang web. Dưới đây là một số nhận xét về mã nguồn:
Cấu trúc cơ bản của HTML:
Mã nguồn bắt đầu với khai báo <!DOCTYPE html> để chỉ định phiên bản HTML được sử dụng.
Thẻ <html> bao quanh toàn bộ nội dung trang web.
Thẻ <head> chứa các thông tin meta, bao gồm tiêu đề của trang web được đặt trong thẻ <title>.
Tiêu đề và nội dung trang web:
Tiêu đề của trang web được đặt trong thẻ <title> là "Tên trang Web", sẽ hiển thị trên thanh tiêu đề của trình duyệt.
Nội dung chính của trang web được đặt trong thẻ <body>.
Các thẻ nội dung trong phần <body>:
Thẻ <div> được sử dụng để nhóm các phần tử HTML lại với nhau.
Thẻ <h1> định dạng văn bản "Trang Web và HTML" thành tiêu đề lớn.
Thẻ <p> định dạng các đoạn văn bản "Đây là dòng đầu tiên" và "Đây là dòng cuối cùng".
Thẻ <hr> tạo một dòng kẻ ngang trên trang web.
Chú thích trong HTML:
Phần chú thích (comment) trong HTML được đặt giữa <!-- và -->. Ví dụ, trong mã nguồn có chú thích <!-- dòng kẻ ngang -->.
Tóm lại, từ mã nguồn này, chúng ta thấy rằng trang web được tạo ra từ các thẻ HTML để định dạng và hiển thị nội dung trên trình duyệt web.
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:
Dưới đây là mã nguồn HTML để tạo trang web theo yêu cầu như hình 7.7:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lịch sử phát triển HTML</title>
</head>
<body>
<h1>Lịch sử phát triển HTML</h1>
<p>Các chuẩn HTML của trang web hiện nay được nhà vật lí Tim Berners-Lee đưa ra lần đầu tiên vào những năm 1990 của thế kỉ XX tại Trung tâm Vật lí Hạt nhân CERN.</p>
<p>Ý tưởng ban đầu của Berners-Lee là muốn thiết lập một chuẩn chung để thể hiện và chia sẻ các văn bản có thể trao đổi bên trong cơ quan CERN.</p>
<p>Hình ảnh sau là sơ đồ thông tin mà Tim Berners-Lee đưa ra lần đầu tiên để minh hoạ cho ý tưởng của mình. Trong sơ đồ này, lần đầu tiên xuất hiện cụm từ "hypertext" (siêu văn bản).</p>
<img src="path/to/your/image.png" alt="Sơ đồ thông tin của Tim Berners-Lee">
<p>Phiên bản đầu tiên của HTML được thiết lập vào cuối năm 1991 mang tên "Các thẻ HTML". Văn bản này do chính Tim Berners-Lee biên soạn.</p>
<p>Từ đó, các phiên bản tiếp theo của HTML lần lượt ra đời cùng với sự phát triển của công nghệ Internet.</p>
<p>Phiên bản hiện tại là HTML5 ra đời năm 2014.</p>
</body>
</html>
- Hướng dẫn để sử dụng:
- Lưu mã nguồn trên vào một tệp có phần mở rộng .html, ví dụ: lich_su_html.html.
- Thay đổi giá trị src của thẻ <img> với đường dẫn đến tệp hình ảnh mà bạn đã tải lên. Ví dụ, nếu tên tệp hình ảnh của bạn là image.png, thì dòng tương ứng sẽ là: <img src="image.png" alt="Sơ đồ thông tin của Tim Berners-Lee">.
- Mở tệp .html này trong trình duyệt web của bạn để xem trang web.
=> Giáo án Tin học ứng dụng 12 kết nối bài 7: HTML và cấu trúc trang web