Lý thuyết trọng tâm Khoa học máy tính 12 Kết nối bài 7: HTML và cấu trúc trang web
Tổng hợp kiến thức trọng tâm Khoa học máy tính 12 kết nối tri thức bài 7: HTML và cấu trúc trang web. Tài liệu nhằm củng cố, ôn tập lại nội dung kiến thức bài học cho học sinh dễ nhớ, dễ ôn luyện. Kéo xuống để tham khảo
Nếu chưa hiểu - hãy xem: => Lời giải chi tiết ở đây
BÀI 7. HTML VÀ CẤU TRÚC TRANG WEB
I - MỤC TIÊU BÀI HỌC
• Hiểu và giải thích được cấu trúc của một trang web dưới dạng HTML.
II - KIẾN THỨC CẦN GHI NHỚ
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 “<”, “>”.
Thẻ | Ý nghĩa thẻ | Mã HTML | Hiển thị trên trình duyệt |
p | Đoạn văn bản | <p>Đây là đoạn văn bản.</p> | Đây là đoạn văn bản. |
h1 | Tiêu đề 1 của văn bản | <h1>Đây là tiêu đề 1</h1> | Đây là tiêu đề 1 |
- 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.
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.
Phần tử HTML có thể hiểu là toàn bộ phần thẻ và nội dung của thẻ. Mỗi tệp HTML là tập hợp các 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.
Các phần tử HTML có thể độc lập, rời nhau hoặc lồng nhau.
- 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:
2. CẤU TRÚC CƠ BẢN CỦA MỘT TỆP HTML
- 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.
- Quan hệ lồng nhau giữa các phần tử HTML có thể hình dung như quan hệ cha – con hay quan hệ giữa các nút của một sơ đồ hình cây.
- Dòng đầu tiên, <!DOCTYPE html> có thể coi là dòng khai báo html của tệp.
- Phần tử <html>:
- Là bắt buộc, là phần tử gốc và chứa tất cả các phần tử HTML còn lại của trang web.
- Là phần tử gốc (root) trong sơ đồ hình cây HTML.
- Thường chứa hai phần tử con <head> và <body>.
- Phần tử <head>:
- Chứa các phần tử có liên quan chung đến toàn bộ trang web.
- Trong <head> thường có phần tử <title> và một số phần tử khác như <meta>, <style> và <script>.
- Phần tử <body> chứa tất cả các phần tử còn lại là thông tin của trang web.
- Phần tử <meta>:
- Nằm trong phần tử <head>.
- 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.
Ví dụ: Trong Hình 7.3, phần tử
mô tả cách mã hoá văn bản trên trang web theo mã UTF-8.
- Phần tử <title>:
- Nằm trong phần tử <head>.
- Mô tả tên của trang web hiện thời.
- Phải là văn bản thường và không được phép chứa các phần tử con.
- 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ự giảm cấp dần là <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Thẻ <p> mô tả một đoạn văn bản hoàn chỉnh.
- Lưu ý: 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 (paragraph) như các phần mềm soạn thảo văn bản thông thường.
- Cấu trúc chung của một trang web có thể hình dung như một cây thông tin các phần tử HTML có quan hệ cha con (lồng nhau), nút gốc (root) là phần tử HTML.
Hình 7.4. Cây thông tin của trang web ở Hình 7.2
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.
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/.
+ 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 H HTML để chọn ngôn ngữ HTML.
- 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 Syntax HTML để chọn ngôn ngữ HTML.
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.
Nếu chưa hiểu - hãy xem: => Lời giải chi tiết ở đây
Nội dung quan tâm khác
Thêm kiến thức môn học
Tóm tắt kiến thức Khoa học máy tính 12 KNTT bài 7: HTML và cấu trúc trang web, kiến thức trọng tâm Khoa học máy tính 12 kết nối tri thức bài 7: HTML và cấu trúc trang web, Ôn tập Khoa học máy tính 12 kết nối tri thức bài 7: HTML và cấu trúc trang web
Giải bài tập những môn khác
Môn học lớp 12 KNTT
5 phút giải toán 12 KNTT
5 phút soạn bài văn 12 KNTT
Văn mẫu 12 KNTT
5 phút giải vật lí 12 KNTT
5 phút giải hoá học 12 KNTT
5 phút giải sinh học 12 KNTT
5 phút giải KTPL 12 KNTT
5 phút giải lịch sử 12 KNTT
5 phút giải địa lí 12 KNTT
5 phút giải CN lâm nghiệp 12 KNTT
5 phút giải CN điện - điện tử 12 KNTT
5 phút giải THUD12 KNTT
5 phút giải KHMT12 KNTT
5 phút giải HĐTN 12 KNTT
5 phút giải ANQP 12 KNTT
Môn học lớp 12 CTST
5 phút giải toán 12 CTST
5 phút soạn bài văn 12 CTST
Văn mẫu 12 CTST
5 phút giải vật lí 12 CTST
5 phút giải hoá học 12 CTST
5 phút giải sinh học 12 CTST
5 phút giải KTPL 12 CTST
5 phút giải lịch sử 12 CTST
5 phút giải địa lí 12 CTST
5 phút giải THUD 12 CTST
5 phút giải KHMT 12 CTST
5 phút giải HĐTN 12 bản 1 CTST
5 phút giải HĐTN 12 bản 2 CTST
Môn học lớp 12 cánh diều
5 phút giải toán 12 CD
5 phút soạn bài văn 12 CD
Văn mẫu 12 CD
5 phút giải vật lí 12 CD
5 phút giải hoá học 12 CD
5 phút giải sinh học 12 CD
5 phút giải KTPL 12 CD
5 phút giải lịch sử 12 CD
5 phút giải địa lí 12 CD
5 phút giải CN lâm nghiệp 12 CD
5 phút giải CN điện - điện tử 12 CD
5 phút giải THUD 12 CD
5 phút giải KHMT 12 CD
5 phút giải HĐTN 12 CD
5 phút giải ANQP 12 CD
Giải chuyên đề học tập lớp 12 kết nối tri thức
Giải chuyên đề Ngữ văn 12 Kết nối tri thức
Giải chuyên đề Toán 12 Kết nối tri thức
Giải chuyên đề Vật lí 12 Kết nối tri thức
Giải chuyên đề Hóa học 12 Kết nối tri thức
Giải chuyên đề Sinh học 12 Kết nối tri thức
Giải chuyên đề Kinh tế pháp luật 12 Kết nối tri thức
Giải chuyên đề Lịch sử 12 Kết nối tri thức
Giải chuyên đề Địa lí 12 Kết nối tri thức
Giải chuyên đề Tin học ứng dụng 12 Kết nối tri thức
Giải chuyên đề Khoa học máy tính 12 Kết nối tri thức
Giải chuyên đề Công nghệ 12 Điện - điện tử Kết nối tri thức
Giải chuyên đề Công nghệ 12 Lâm nghiệp thủy sản Kết nối tri thức
Giải chuyên đề học tập lớp 12 chân trời sáng tạo
Giải chuyên đề Ngữ văn 12 Chân trời sáng tạo
Giải chuyên đề Toán 12 Chân trời sáng tạo
Giải chuyên đề Vật lí 12 Chân trời sáng tạo
Giải chuyên đề Hóa học 12 Chân trời sáng tạo
Giải chuyên đề Sinh học 12 Chân trời sáng tạo
Giải chuyên đề Kinh tế pháp luật 12 Chân trời sáng tạo
Giải chuyên đề Lịch sử 12 Chân trời sáng tạo
Giải chuyên đề Địa lí 12 Chân trời sáng tạo
Giải chuyên đề Tin học ứng dụng 12 Chân trời sáng tạo
Giải chuyên đề Khoa học máy tính 12 Chân trời sáng tạo
Giải chuyên đề Công nghệ 12 Điện - điện tử Chân trời sáng tạo
Giải chuyên đề Công nghệ 12 Lâm nghiệp thủy sản Chân trời sáng tạo
Giải chuyên đề học tập lớp 12 cánh diều
Giải chuyên đề Ngữ văn 12 Cánh diều
Giải chuyên đề Toán 12 Cánh diều
Giải chuyên đề Vật lí 12 Cánh diều
Giải chuyên đề Hóa học 12 Cánh diều
Giải chuyên đề Sinh học 12 Cánh diều
Giải chuyên đề Kinh tế pháp luật 12 Cánh diều
Giải chuyên đề Lịch sử 12 Cánh diều
Giải chuyên đề Địa lí 12 Cánh diều
Giải chuyên đề Tin học ứng dụng 12 Cánh diều
Giải chuyên đề Khoa học máy tính 12 Cánh diều
Giải chuyên đề Công nghệ 12 Điện - điện tử Cánh diều
Giải chuyên đề Công nghệ 12 Lâm nghiệp thủy sản Cánh diều
Trắc nghiệm 12 Kết nối tri thức
Trắc nghiệm 12 Chân trời sáng tạo
Trắc nghiệm 12 Cánh diều
Chuyên đề lớp 12
Bình luận