Slide bài giảng Tin học ứng dụng 12 kết nối bài 7: HTML và cấu trúc trang web
Slide điện tử bài 7: HTML và cấu trúc trang web. Trình bày với các hiệu ứng hiện đại, hấp dẫn. Giúp học sinh hứng thú học bài. Học nhanh, nhớ lâu. Có tài liệu này, hiệu quả học tập của môn Tin học ứng dụng 12 Kết nối tri thức sẽ khác biệt
Bạn chưa đủ điều kiện để xem được slide bài này. => Xem slide bài mẫu
Tóm lược nội dung
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.
Trả lời rút gọn:
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. 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?
Trả lời rút gọn:
a) Quan sát tranh cho thấy 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)
Đâ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?
Trả lời rút gọn:
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.
Trả lời rút gọn:
- Sự giống giữa thẻ HTML và phần từ HTML là:
+ 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?
Trả lời rút gọn:
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:
Trả lời rút gọn:
Từ đoạn văn bản HTML, ta vẽ được sơ đồ như sau:
Câu hỏi 2: Cây HTML có bao nhiêu phần tử gốc?
Trả lời rút gọn:
Phần tử <html> là phần tử gốc duy nhất của cây 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.
Trả lời rút gọn:
Qua tìm hiểu, em tìm kiếm được 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.
Trả lời rút gọn:
Nhóm phần mềm soạn thảo HTML | Nhóm trình duyệt web |
a) Notepad. b) Sublime Text. c) Notepad++.
| 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)?
Trả lời rút gọn:
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.
Trả lời rút gọn:
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.
Trả lời rút gọn:
-Em chọn được văn bả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.
Trả lời rút gọn:
Tìm kiếm, em biết được một số trang web hỗ trợ soạn thảo HTML trực tuyến là:
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.
Trả lời rút gọn:
Thực hiện soạn thảo HTML và soạn thảo trang web có nội dung như sau:
<!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="BÀI 7. HTML VÀ CẤU TRÚC TRANG WEB">
</body>
</html>
Slide bài giảng lớp 12 cánh diều
Slide bài giảng lớp 12 chân trời sáng tạo
Slide bài giảng lớp 12 kết nối tri thức
