Tin học 12 - Bài 7. HTML và cấu trúc trang web

1. Trang web và HTML

Ví dụ trong hình sau đây là một trang web và tệp văn bản nguồn của nó:

HTML – 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 viết bằng ngôn ngữ HTML có phần mở rộng .html hoặc .htm.

a. Thẻ đánh dấu HTML

Mỗi thẻ có tên riêng, có ý nghĩa nhất định trong định dạng nội dung.
Cấu trúc: <tên thẻ>[</tên thẻ>]

Phân loại thẻ:
- Thẻ đơn. VD: <hr/>, <br/>, …
- Thẻ đôi. VD: <p></p>, <h1></h1>

b. Phần tử HTML

Thông thường, một phần tử HTML được định nghĩa bởi thẻ bắt đầu, thẻ kết thúc và nội dung nằm giữa cặp thẻ này. Đây là hình mô tả cấu trúc của một phần tử HTML:

Chú ý:

Các phần tử HTML có thể lồng nhau, phần tử bên trong là phần tử con, bên ngoài là phần tử cha.
Phần tử chú thích <! - - Đây là dòng chú thích -- >
Dòng đầu tệp HTML <!DOCTYPE html> không phải là 1 phần tử. Nó có vai trò thông báo kiểm của tệp là html và không được xem là phần tử HTML.

Câu hỏi củng cố:

Câu 1. Tệp văn bản trong hình 7.1 (SGK trang 39) có bao nhiêu phần tử

Có 9 phần tử (đếm từng phần tử)

Câu 2. Nêu sự giống nhau và khác nhau giữa thẻ HTML và phần tử HTML

Giống nhau:
– Đều là các khái niệm cơ bản liên quan đến trang web.
– Đều là các thành phần cơ bản của các trang web.
– Đều có tác dụng định dạng nội dung của văn bản của trang web.

Khác nhau:
– Thẻ HTML bản thân là các từ khoá đặc biệt đóng vai trò cốt lõi của ngôn ngữ HTML. Phần tử HTML bao gồm cả thẻ HTML + nội dung tác dụng của thẻ này.
– Thẻ HTML có tác dụng xác định một định dạng cụ thể. Phần tử HTML đóng vai trò các đơn vị định dạng của toàn bộ trang web.

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/

Tin học 12 Bài 7 Sử dụng trang web hỗ trợ soạn thảo trực tuyến

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

Câu hỏi trắc nghiệm dạng D1 và D2 Tin học 12 Bài 7: HTML và cấu trúc trang web

Họ và tên của bạn

Thời gian làm bài: 30 phút

Đáp án chỉ hiển thị sau khi hoàn thành bài làm

Câu hỏi sẽ được hiển thị ngẫu nhiên

HTML là viết tắt của cụm từ nào sau đây?

Hyper Tool Markup Language.

Home Text Markup Language.

Hyper Text Markup Language.

Home Tool Multiple Language.

Phần mở rộng nào sau đây thường được sử dụng cho các tệp HTML?

.txt

.docx

.html

.pdf

Trong HTML, các thẻ được viết trong cặp dấu nào?

{}

[]

()

<>

Thẻ HTML nào sau đây được sử dụng để tạo một đoạn văn bản?

<h1>

<div>

<p>

<body>

Thẻ HTML nào sau đây được sử dụng để tạo một tiêu đề lớn?

<p>

<h6>

<h1>

<div>

Đâu là thẻ HTML dùng để tạo dòng kẻ ngang?

<br/>

<hr/>

<p>

<div>

Phần tử HTML nào chứa các thông tin liên quan chung đến toàn bộ trang web, chẳng hạn như tiêu đề trang?

<body>

<html>

<head>

<div>

Thuộc tính nào sau đây được sử dụng với thẻ <meta> để chỉ định bảng mã ký tự của trang web?

name

content

charset

http-equiv

Phần tử HTML nào sau đây là phần tử gốc của mọi trang HTML?

<head>

<body>

<html>

<title>

Thẻ HTML nào sau đây dùng để nhúng hình ảnh vào trang web?

<link>

<image>

<src>

<img>

Cho đoạn code sau: <h1>Đây là tiêu đề</h1>. Đoạn code này sẽ hiển thị như thế nào trên trình duyệt?

Đây là tiêu đề (văn bản nhỏ)

Đây là tiêu đề (văn bản vừa)

Đây là tiêu đề (văn bản lớn)

Đây là tiêu đề (văn bản siêu lớn)

Cho đoạn code sau: <p style="color:blue;">Đây là đoạn văn bản.</p>. Đoạn văn bản này sẽ hiển thị màu gì trên trình duyệt?

Đỏ

Xanh lá cây

Đen

Xanh dương

Cho đoạn code sau:
<p>
Đây là dòng 1.<br/>Đây là dòng 2.
</p>
Đoạn code trên hiển thị như thế nào trên trình duyệt?

"Đây là dòng 1. Đây là dòng 2." trên cùng một dòng.

"Đây là dòng 1." và "Đây là dòng 2." trên hai dòng riêng biệt.

Chỉ hiển thị "Đây là dòng 1."

Không hiển thị gì cả.

Cho đoạn code sau:
<!DOCTYPE html>
<html>
<head>
<title>Trang web của tôi</title>
</head>
</html>
Nội dung nào sẽ hiển thị trên thanh tiêu đề (title bar) của trình duyệt?

<!DOCTYPE html>

<html>

Trang web của tôi

Không có gì hiển thị

Cho đoạn code sau:
<html>
<body>
<p>Đây là <b>một ví dụ</b> về văn bản.</p>
</body>
</html>
Từ nào sẽ được in đậm trên trình duyệt?

Đây

là

một ví dụ

về

Phần tử HTML đặc biệt có ý nghĩa chú thích trong tệp HTML có dạng?

<-- đây là dòng chú thích //>

<* đây là dòng chú thích */>

Các thẻ HTML nào sau đây là các thẻ tiêu đề theo thứ tự giảm cấp dần?

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

<h6>, <h5>, <h4>, <h3>, <h2>, <h1>

<h1>, <h4>, <h2>, <h5>, <h3>, <h6>

<h7>, <h6>, <h5>, <h4>, <h3>, <h2>

Cho đoạn code sau:
<html>
<head>
<meta charset="utf-8">
</head>
</html>
Đoạn code trên dùng để làm gì?

Mô tả tên tác giả trang web.

Mô tả cách mã hoá văn bản trên trang web theo mã UTF-8.

Mô tả từ khoá dùng để tìm kiếm trang.

Mô tả tên của trang web hiện thời.

Cho đoạn code sau:
<html>
<body>
<p>Đây là một dòng <em>nhấn mạnh</em>.</p>
</body>
</html>
Từ nào sẽ được in nghiêng trên trình duyệt?

Đây

là

một dòng

nhấn mạnh

Một trang web được tạo ra với mục đích giới thiệu về các địa điểm du lịch nổi tiếng tại Hồ Chí Minh. Trang web này có nhiều hình ảnh đẹp và các đoạn văn bản mô tả chi tiết về lịch sử, văn hóa và ẩm thực của từng địa điểm.

NB HTML là ngôn ngữ được sử dụng để tạo nên cấu trúc và nội dung của trang web này.

Đúng Sai

NB Các hình ảnh trên trang web được nhúng bằng thẻ <link>.

Đúng Sai

TH Thẻ <meta> có thể được sử dụng để cung cấp thông tin về tác giả của trang web.

Đúng Sai

VD Người dùng cần cài đặt một phần mềm đặc biệt để xem được trang web này.

Đúng Sai

Một học sinh đang tạo một trang web đơn giản để chia sẻ thông tin về sở thích cá nhân. Trang web này bao gồm một tiêu đề, một đoạn văn bản giới thiệu về bản thân và một vài hình ảnh.

NB Thẻ <h1> được sử dụng để tạo tiêu đề cho trang web.

Đúng Sai

NB Thẻ <p> được sử dụng để tạo các đường link đến các trang web khác.

Đúng Sai

TH Cấu trúc cơ bản của một trang HTML bao gồm các phần tử <html>, <head> và <body>.

Đúng Sai

VD Để thay đổi màu chữ của đoạn văn bản, học sinh có thể sử dụng thuộc tính style trong thẻ <p>.

Đúng Sai

Bạn đang xem một trang web bán hàng trực tuyến. Trang web này có giao diện đẹp mắt, bố cục rõ ràng và dễ sử dụng. Các sản phẩm được phân loại theo danh mục và có các hình ảnh minh họa chi tiết.

NB Trình duyệt web có chức năng hiển thị nội dung trang web theo đúng định dạng được thiết lập.

Đúng Sai

NB Các tệp HTML là tệp văn bản được cấu tạo từ các phần tử HTML.

Đúng Sai

TH Cấu trúc chung của một trang web có thể hình dung như một đường thẳng các phần tử HTML.

Đúng Sai

VD Gốc của cây HTML chính là phần tử <html>.

Đúng Sai

Bạn muốn tạo một trang web có nội dung đa dạng và phong phú, hình thức trình bày đẹp.

NB Có thể soạn thảo tệp HTML bằng nhiều phần mềm khác nhau.

Đúng Sai

NB Notepad là một phần mềm soạn thảo HTML chuyên nghiệp.