Mục tiêu bài học
- Kiến thức:
- Hiểu khái niệm và chức năng của HTML.
- Nắm được cấu trúc cơ bản của một trang web.
- Phân biệt khái niệm thẻ HTML và phần tử HTML.
- Biết các phần mềm phổ biến dùng để soạn thảo HTML.
- Năng lực:
- Hiểu và giải thích được cấu trúc của một trang web dưới dạng HTML.
- Phẩm chất:
- Hình thành ý thức trách nhiệm, tính cẩn thận khi làm việc nhóm, phẩm chất làm việc chăm chỉ, chuyên cần để hoàn thành một nhiệm vụ.
Hoạt động khởi động
Khi em truy cập một trang web, em thường thấy những gì? Em có bao giờ tự hỏi trang web đó được xây dựng như thế nào không?
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.
1. Trang web và HTML
- Các trang web thường được hiển thị bởi trình duyệt web và được xây dựng từ các tệp văn bản gọi là trang nguồn (mã nguồn).
- HTML (Hypertext Markup Language) là ngôn ngữ đánh dấu siêu văn bản, dùng để thiết lập cấu trúc và hiển thị nội dung trang web. Các trang web được tạo ra từ HTML thường có phần mở rộng là
.htmlhoặc.htm. - Trên trang HTML, nội dung bao gồm văn bản và các kí tự đặc biệt nằm trong hai dấu “<”, “>”. Các kí tự này được gọi là thẻ đánh dấu HTML (HTML tag).
a. Thẻ đánh dấu HTML
- Thẻ HTML là thành phần chính của ngôn ngữ đánh dấu siêu văn bản, có tên và ý nghĩa riêng.
- Thẻ được viết trong cặp dấu “<”, “>”. Thông thường, một thẻ bao gồm:
- Thẻ bắt đầu (opening tag): VD:
<html> - Thẻ kết thúc (closing tag): Có dấu “/” phía trước tên thẻ. VD:
</html>
- Thẻ bắt đầu (opening tag): VD:
- Phạm vi tác dụng của thẻ nằm giữa thẻ bắt đầu và thẻ kết thúc.
Thẻ HTML có phân biệt chữ hoa, chữ thường không?
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 không? Hãy lấy một ví dụ minh họa.
Các thẻ có thể lồng nhau.
Ví dụ: Thẻ `` được lồng bên trong thẻ `
`:
`
Trang này được lập bởi nhóm bạn bè thân thiết
`
Mỗi thẻ có thể đi kèm các thông tin thuộc tính không? Cho ví dụ.
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ẻ `
`, làm toàn bộ đoạn văn bản có màu đỏ khi hiển thị:
`
This is a paragraph.
`
Có những loại thẻ HTML nào?
Phần lớn các thẻ là **thẻ đôi** (có thẻ bắt đầu và thẻ kết thúc).
Tuy nhiên, có một số loại thẻ là **thẻ đơn** (chỉ có thẻ bắt đầu, không có thẻ kết thúc).
Ví dụ thẻ đơn: `
` (dòng kẻ ngang), `
` (ngắt xuống dòng).
HTML và trình duyệt web xử lý dấu cách và xuống dòng như thế nào?
HTML và trình duyệt không nhận biết được nhiều dấu cách (chỉ hiểu là một dấu cách duy nhất).
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
- Phần tử HTML (element) là khái niệm cơ bản của trang HTML. 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ẻ đó.
- Cấu trúc chung:
<tên thẻ> nội dung của phần tử HTML </tên thẻ>
- Cấu trúc chung:
- Các thẻ đơn cùng với nội dung của nó cũng được gọi là phần tử HTML.
Câu hỏi củng cố:
Tệp văn bản trong Hình 7.1 có bao nhiêu phần tử HTML?
Tệp văn bản trong Hình 7.1 SGK có 9 phần tử HTML.
Nêu sự giống và khác nhau giữa thẻ HTML và phần tử HTML.
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 và các phần tử này có thể lồng vào nhau.
Ví dụ:
Cấu trúc chung của một trang web trong ví dụ trên có thể hình dung như một cây thông tin sau đây:
3. Phần mềm soạn thảo HTML
a. Phần mềm Notepad
Là phần mềm soạn thảo đơn giản không định dạng, chỉ cung cấp một số chỉnh sửa cơ bản, Notepad có sẵn trên Windows, trên MacOS có phần mềm tương tự là TextEdit.
b. Phần mềm soạn thảo HTML chuyên nghiệp mã nguồn mở
Phần mềm Notepad++
Có thể dễ dàng tải về và cài đặt trên máy tính chạy hệ điều hành Windows. Hỗ trợ soạn thảo nhiều ngôn ngữ khác nhau, trong đó có HTML, CSS…
Để hiển thị hỗ trợ soạn thảo cần thực hiện lệnh Language / H / HTML
Phần mềm Sublime Text
Thực hiện lệnh View / Syntax / HTML để Sublime Text hỗ trợ soạn thảo ngôn ngữ HTML
c. Sử dụng trang web hỗ trợ soạn thảo trực tuyến
Một số trang web hỗ trợ soạn thảo HTML trực tuyến như: w3schools.com, tutorialspoint.com…
Đặc biệt tại đây Onthitinhoc.vn có phát triển một công cụ hỗ trợ soạn thảo HTML Code web by Onthitinhoc https://otth.vn/codeweb/
Nếu bạn không có tài khoản, có thể bấm vào “Sử dụng không cần đăng nhập”.
Câu hỏi củng cố kiến thức
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: Notepad, Opera, Sublime Text, Chrome, Cốc Cốc, Notepad++, FireFox, Microsoft Edge.
Phần mềm soạn thảo HTML:
a) Notepad
c) Sublime Text
f) Notepad++
Trình duyệt web:
b) Opera
d) Chrome
e) Cốc Cốc
g) Firefox
h) Microsoft Edge
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)?
Phần mềm chuyên nghiệp (Notepad++, Sublime Text):
– Hỗ trợ cú pháp: Có tính năng tô màu cú pháp (syntax highlighting), giúp dễ dàng phân biệt các thành phần HTML, CSS, JavaScript.
– Tự động hoàn thành: Gợi ý và tự động hoàn thành mã giúp tiết kiệm thời gian.
– Hỗ trợ các tính năng nâng cao: Cho phép tìm kiếm, thay thế nâng cao, quản lý nhiều file cùng lúc, tích hợp với các công cụ lập trình khác.
Phần mềm soạn thảo văn bản thông thường (Notepad):
– Không hỗ trợ cú pháp: Chỉ hiển thị văn bản thuần, không có tính năng tô màu hoặc gợi ý cú pháp.
– Không tự động hoàn thành: Người dùng phải nhập toàn bộ mã thủ công.
– Tính năng hạn chế: Chỉ phù hợp để tạo các file HTML đơn giản hoặc chỉnh sửa nhanh chóng.
Tóm lại: Các phần mềm chuyên nghiệp hỗ trợ nhiều tính năng giúp lập trình hiệu quả hơn, đặc biệt với các dự án lớn.
Câu hỏi 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.
– Các thẻ như h1, h2, p, b, i, u, em… không thể lồng vào nhau
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.
– HS tự thực hiện, sử dụng trình viết code online có chuẩn bị sẵn cấu trúc cơ bản của một tệp HTML: https://otth.vn/codeweb/view_shared.php?id=11
Bài tập vận dụng
Câu 1. Hãy tìm trên mạng một số trang web hỗ trợ soạn thảo HTML trực tuyến
Một số trang soạn thảo HTML trực tuyến:
– https://www.w3schools.com/tryit/tryit.asp?filename=tryhtml_hello
– https://onlinehtmleditor.dev
– https://htmlcodeeditor.com
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.
– Tham khảo code mẫu tại đây: https://otth.vn/codeweb/view_shared.php?id=12
