032.1 Bài 1
Chứng chỉ: |
Web Development Essentials |
---|---|
Phiên bản: |
1.0 |
Chủ đề: |
032 Đánh dấu Tài liệu HTML |
Mục tiêu: |
032.1 Cấu trúc tài liệu HTML |
Bài: |
1 trên 1 |
Giới thiệu
HTML (HyperText Markup Language - Ngôn ngữ đánh dấu siêu văn bản) là ngôn ngữ đánh dấu được sử dụng để trình duyệt web biết được cách cấu trúc và hiển thị các trang web. Phiên bản hiện tại của nó là 5.0 và được phát hành vào năm 2012. Cú pháp HTML được xác định bởi Tổ chức Quốc tế World Wide Web (W3C).
HTML là một kỹ năng cơ bản trong phát triển web bởi nó xác lập cấu trúc và phần lớn giao diện của một trang web. Nếu bạn muốn phát triển sự nghiệp trong lĩnh vực phát triển web, HTML hiển nhiên là một điểm khởi đầu tốt dành cho bạn.
Cấu trúc của một Tài liệu HTML
Một trang HTML cơ bản sẽ có cấu trúc như sau:
<!DOCTYPE html>
<html>
<head>
<title>My HTML Page</title>
<!-- This is the Document Header -->
</head>
<body>
<!-- This is the Document Body -->
</body>
</html>
Hãy cùng phân tích nó một cách chi tiết ngay sau đây.
Thẻ HTML
HTML sử dụng các phần tử và thẻ để mô tả và định dạng nội dung. Thẻ bao gồm các dấu ngoặc nhọn xung quanh tên thẻ, ví dụ như <title>
. Tên thẻ không phân biệt chữ hoa và chữ thường dù Tổ chức Quốc tế World Wide Web (W3C) có khuyến nghị người dùng sử dụng các chữ cái viết thường trong các phiên bản HTML hiện tại. Các thẻ HTML này được sử dụng để xây dựng các phần tử HTML. Thẻ <title>
là ví dụ của một thẻ mở trong một phần tử HTML xác định tiêu đề của tài liệu HTML. Tuy nhiên, một phần tử còn có hai thành phần nữa. Một phần tử <title>
đầy đủ sẽ trông như thế này:
<title>My HTML Page</title>
Ở đây, My HTML Page
đóng vai trò là thành phần nội dung, trong khi </title>
đóng vai trò là thẻ đóng cho biết rằng phần tử này đã hoàn thiện.
Note
|
Không phải tất cả các phần tử HTML đều cần phải đóng; trong những trường hợp như vậy, nó được gọi là các phần tử trống hoặc phần tử tự đóng. |
Sau đây là các phần tử HTML còn lại ở trong ví dụ trước:
<html>
-
Kèm theo toàn bộ tài liệu HTML. Nó chứa tất cả các thẻ tạo nên trang. Nó cũng chỉ ra rằng nội dung của tệp này được viết bằng ngôn ngữ HTML. Thẻ đóng tương ứng của nó là
</html>
. <head>
-
Vùng chứa tất cả các thông tin meta liên quan đến trang. Thẻ đóng tương ứng của phần tử này là
</head>
. <body>
-
Vùng chứa nội dung của trang và biểu diễn cấu trúc của nó. Thẻ đóng tương ứng của nó là
</body>
.
Các thẻ <html>
, <head>
(phần mở đầu), <body>
(phần thân) và <title>
(tiêu đề) được gọi là thẻ skeleton và dùng để cung cấp cấu trúc cơ bản cho tài liệu HTML. Đặc biệt, chúng sẽ cho trình duyệt web biết rằng nó đang đọc một trang HTML.
Note
|
Trong số các phần tử HTML này, phần tử duy nhất cần có để tài liệu HTML được xác thực là thẻ |
Như có thể thấy, mỗi trang HTML là một tài liệu được cấu trúc cẩn thận và thậm chí có thể được gọi là một cây, trong đó phần tử <html>
đại diện cho gốc tài liệu và các phần tử <head>
và <body>
là những nhánh đầu tiên. Ví dụ đã cho ta thấy rằng các phần tử có thể được lồng ghép vào với nhau. Ví dụ: phần tử <title>
được lồng bên trong phần tử <head>
, phần tử này lại được lồng bên trong phần tử <html>
.
Để đảm bảo rằng mã HTML của bạn có thể đọc và duy trì được, hãy đảm bảo rằng tất cả các phần tử HTML được đóng đúng cách và theo thứ tự. Các trình duyệt web vẫn có thể hiển thị trang web của bạn như mong đợi, nhưng việc lồng các phần tử và thẻ của chúng không chính xác là một việc dễ gây ra lỗi.
Cuối cùng, phải đặc biệt đề cập đến khai báo doctype ở trên cùng của cấu trúc tài liệu ví dụ. <!DOCTYPE>
không phải là một thẻ HTML mà là một hướng dẫn dành cho trình duyệt web chỉ định phiên bản HTML được sử dụng trong tài liệu. Trong cấu trúc tài liệu HTML cơ bản được hiển thị trước đó, <!DOCTYPE html>
đã được sử dụng và nó chỉ định rằng HTML5 đang được sử dụng trong tài liệu này.
Chú thích HTML
Khi tạo một trang HTML, bạn nên chèn các chú thích vào mã để cải thiện khả năng đọc và mô tả mục đích của các khối mã lớn. Một chú thích có thể được chèn vào giữa các thẻ <!--
và -->
như minh họa trong ví dụ sau:
<!-- This is a comment. -->
<!--
This is a
multiline
comment.
-->
Ví dụ này cho thấy rằng các chú thích HTML có thể được đặt trong một dòng và cũng có thể trải dài trên nhiều dòng. Trong tất cả mọi trường hợp, văn bản ở giữa <!--
và -->
sẽ được trình duyệt web bỏ qua và do đó không được hiển thị trong trang HTML. Dựa trên những cân nhắc này, bạn có thể suy luận rằng trang HTML cơ bản được hiển thị trong phần trước không hề hiển thị bất kỳ văn bản nào, bởi vì các dòng <!-- This is the Document Header -->
và <!-- This is the Document Body -->
chỉ đơn giản là hai chú thích.
Warning
|
Các chú thích không thể được lồng vào nhau. |
Thuộc tính HTML
Các thẻ HTML có thể bao gồm một hoặc nhiều thuộc tính để chỉ định chi tiết của phần tử HTML. Một thẻ đơn giản với hai thuộc tính sẽ có dạng sau:
<tag attribute-a="value-a" attribute-b="value-b">
Các thuộc tính phải luôn được đặt trên thẻ mở.
Một thuộc tính bao gồm tên (cho biết thuộc tính nào sẽ được đặt), dấu bằng và giá trị mong muốn trong dấu trích dẫn kép. Cả dấu trích dẫn đơn và kép đều có thể được chấp nhận, nhưng ta nên sử dụng một trong hai loại dấu một cách nhất quán trong suốt dự án. Điều quan trọng là không trộn lẫn dấu trích dẫn đơn và dấu trích dẫn kép cho một giá trị thuộc tính bởi trình duyệt web sẽ không nhận các kết hợp lẫn lộn giữa các dấu trích dẫn là một đơn vị.
Note
|
Bạn có thể sử dụng một loại dấu trích dẫn ở bên trong loại kia mà không gặp vấn đề gì. Ví dụ: nếu bạn cần sử dụng |
Các thuộc tính có thể được phân loại thành thuộc tính cốt lõi và thuộc tính cụ thể như sẽ được giải thích trong các phần sau đây.
Thuộc tính Cốt lõi
Thuộc tính cốt lõi là thuộc tính có thể được sử dụng trên bất kỳ phần tử HTML nào. Chúng bao gồm:
title
-
Mô tả nội dung của phần tử. Giá trị của nó thường được hiển thị dưới dạng chú giải công cụ (tooltip) được hiển thị khi người dùng di chuyển con trỏ qua phần tử.
id
-
Liên kết một mã định danh duy nhất với một phần tử. Số nhận dạng này phải là duy nhất trong tài liệu và tài liệu sẽ không hợp lệ khi nhiều thành phần chia sẻ cùng một
id
. style
-
Gán các thuộc tính đồ họa (kiểu CSS) cho phần tử.
class
-
Chỉ định một hoặc nhiều hạng cho phần tử trong danh sách tên hạng được phân tách bằng dấu cách. Các hạng này có thể được tham chiếu trong biểu định kiểu CSS.
lang
-
Chỉ định ngôn ngữ của nội dung thành phần bằng mã ngôn ngữ hai ký tự tiêu chuẩn ISO-639.
Note
|
Nhà phát triển có thể lưu trữ thông tin tùy chỉnh về một phần tử bằng cách xác định cái gọi là thuộc tính |
Thuộc tính Riêng
Các thuộc tính còn lại chỉ dành riêng cho từng phần tử HTML. Ví dụ: thuộc tính src
của phần tử HTML <img>
chỉ định URL của hình ảnh. Còn nhiều thuộc tính riêng khác nữa sẽ được đề cập tới trong các bài học sau.
Tiêu đề của Tài liệu
Tiêu đề của tài liệu sẽ xác định thông tin meta liên quan đến trang và được mô tả bởi phần tử <head>
. Theo mặc định, thông tin trong tiêu đề của tài liệu sẽ không được trình duyệt web hiển thị. Mặc dù có thể sử dụng phần tử <head>
để chứa các phần tử HTML có thể được hiển thị trên trang nhưng trên thực tế ta lại không nên làm như vậy.
Title
Tiêu đề của tài liệu sẽ được xác định bằng phần tử <title>
. Tiêu đề được xác định giữa các thẻ sẽ xuất hiện trong thanh tiêu đề của trình duyệt web và sẽ là tên gợi ý cho thẻ đánh dấu trang khi bạn muốn đánh dấu một trang. Nó cũng sẽ được hiển thị trong kết quả của công cụ tìm kiếm dưới dạng tiêu đề của trang.
Sau đây là một ví dụ về phần tử này:
<title>My test page</title>
Thẻ <title>
được yêu cầu trong tất cả các tài liệu HTML và chỉ xuất hiện một lần trong mỗi tài liệu.
Note
|
Đừng nhầm lẫn tiêu đề của tài liệu với tiêu đề của trang được đặt trong phần thân. |
Siêu Dữ liệu
Phần tử <meta>
được sử dụng để chỉ định thông tin meta nhằm mô tả thêm nội dung của tài liệu HTML. Nó được gọi là phần tử tự đóng, tức là nó không có thẻ đóng. Ngoài các thuộc tính cốt lõi hợp lệ cho mọi phần tử HTML, phần tử <meta>
còn sử dụng các thuộc tính sau:
name
-
Xác định siêu dữ liệu nào sẽ được mô tả trong phần tử này. Nó có thể được đặt thành bất kỳ giá trị được xác định tùy chỉnh nào, nhưng các giá trị thường được sử dụng là
author
(tác giả),description
(mô tả) vàkeywords
(từ khóa). http-equiv
-
Cung cấp tiêu đề HTTP cho giá trị của thuộc tính
content
(nội dung). Một giá trị phổ biến làrefresh
(làm mới); giá trị này sẽ được giải thích sau. Nếu thuộc tính này được đặt thì ta không nên đặt thuộc tínhname
. content
-
Cung cấp giá trị được liên quan tới thuộc tính
name
hoặchttp-equiv
. charset
-
Chỉ định mã ký tự cho tài liệu HTML, ví dụ như
utf-8
để đặt nó thành Định dạng Chuyển đổi Unicode — 8-bit.
Thêm Thông tin về Tác giả, Mô tả và Từ khóa
Bằng cách sử dụng thẻ <meta>
, ta có thể chỉ định thông tin bổ sung về tác giả của trang HTML và mô tả nội dung trang như sau:
<meta name="author" content="Name Surname">
<meta name="description" content="A short summary of the page content.">
Hãy thử cho thêm một loạt các từ khóa liên quan đến nội dung của trang trong mô tả. Mô tả này thường sẽ là điều đầu tiên người dùng nhìn thấy khi điều hướng bằng công cụ tìm kiếm.
Nếu bạn cũng muốn cung cấp các từ khóa bổ sung liên quan đến trang web cho các công cụ tìm kiếm, bạn có thể thêm phần tử này:
<meta name="keywords" content="keyword1, keyword2, keyword3, keyword4, keyword5">
Note
|
Trước đây, những kẻ gửi thư rác đã nhập hàng trăm từ khóa và mô tả không liên quan đến nội dung thực tế của trang để nó cũng xuất hiện trong các kết quả tìm kiếm không liên quan đến cụm từ mà mọi người đã tìm kiếm. Ngày nay, các thẻ |
Chuyển hướng trang HTML và Xác định khoảng thời gian để Tài liệu tự làm mới
Bằng cách sử dụng thẻ <meta>
, ta có thể tự động làm mới trang HTML sau một khoảng thời gian nhất định (ví dụ: sau 30 giây) theo cách này:
<meta http-equiv="refresh" content="30">
Ngoài ra, bạn có thể chuyển hướng một trang web đến một trang web khác sau cùng một khoảng thời gian với đoạn mã sau:
<meta http-equiv="refresh" content="30; url=http://www.lpi.org">
Trong ví dụ này, người dùng sẽ được chuyển hướng từ trang hiện tại đến http://www.lpi.org
sau 30 giây. Các giá trị có thể là bất cứ thứ gì bạn muốn. Ví dụ: nếu bạn chỉ định content="0; url=http://www.lpi.org"
, trang sẽ được chuyển hướng ngay lập tức.
Chỉ định Mã hóa Ký tự
Thuộc tính charset
(bộ ký tự) chỉ định mã hóa ký tự cho tài liệu HTML. Một ví dụ phổ biến là:
<meta charset="utf-8">
Phần tử này chỉ định rằng mã hóa ký tự của tài liệu là utf-8
; đây là một bộ ký tự chung thực tế bao gồm bất kỳ ký tự nào của bất kỳ ngôn ngữ nào của con người. Do đó, bằng cách sử dụng nó, ta sẽ tránh được các sự cố khi hiển thị một số ký tự ta có thể gặp phải khi sử dụng các bộ ký tự khác, chẳng hạn như ISO-8859-1 (bảng chữ cái Latinh).
Các Ví dụ hữu ích khác
Hai ứng dụng hữu ích khác của thẻ <meta>
là:
-
Thiết lập cookies để theo dõi khách truy cập trang web.
-
Kiểm soát chế độ xem (khu vực hiển thị của trang web bên trong cửa sổ trình duyệt web) tùy thuộc vào kích thước màn hình của thiết bị người dùng (ví dụ như điện thoại di động hoặc máy tính).
Tuy nhiên, hai ví dụ này nằm ngoài phạm vi của bài kiểm tra và việc nghiên cứu chúng sẽ chỉ dành cho những độc giả có trí tò mò và muốn khám phá trong phạm vị rộng hơn.
Bài tập Hướng dẫn
-
Đối với mỗi thẻ sau, hãy cho biết thẻ đóng tương ứng:
<body>
<head>
<html>
<meta>
<title>
-
Sự khác biệt giữa thẻ và phần tử là gì? Tham khảo mục sau đây:
<title>HTML Page Title</title>
-
Các thẻ nào có thể có chú thích đặt giữa chúng?
-
Hãy giải thích thuộc tính là gì và cho một số ví dụ về thẻ
<meta>
.
Bài tập Mở rộng
-
Hãy tạo một tài liệu HTML phiên bản 5 đơn giản với tiêu đề
My first HTML document
và chỉ có một đoạn trong phần nội dung chứa đoạn văn bảnHello World
. Hãy s dụng thẻ đoạn văn<p>
trong phần thân. -
Hãy thêm tác giả (
Kevin Author
) và mô tả (This is my first HTML page.
) của tài liệu HTML. -
Hãy thêm các từ khóa sau liên quan đến tài liệu HTML:
HTML
,Example
,Test
vàMetadata
. -
Hãy thêm phần tử
<meta charset="ISO-8859-1">
vào tiêu đề của tài liệu và thay đổi văn bảnHello World
thành tiếng Nhật (こんにちは世界). Điều gì sẽ xảy ra? Bạn sẽ giải quyết vấn đề này như thế nào? -
Sau khi thay đổi văn bản đoạn trở lại thành
Hello World
, hãy chuyển hướng trang HTML đếnhttps://www.google.com
sau 30 giây và thêm một chú thích để giải thích điều này trong tiêu đề của tài liệu.
Tóm tắt
Trong bài học này, bạn đã học về:
-
Vai trò của HTML
-
Skeleton trong HTML
-
Cú pháp HTML (thẻ, thuộc tính, chú thích)
-
Phần đầu của HTML
-
Các thẻ meta
-
Cách tạo một tài liệu HTML đơn giản
Các thuật ngữ sau đây đã được thảo luận trong bài học này:
<!DOCTYPE html>
-
Thẻ khai báo.
<html>
-
Vùng chứa cho tất cả các thẻ tạo nên trang HTML.
<head>
-
Vùng chứa cho tất cả các phần tử phần đầu.
<body>
-
Vùng chứa cho tất cả các phần tử phần thân.
<meta>
-
Thẻ dành cho siêu dữ liệu được sử dụng để chỉ định thông tin bổ sung cho trang HTML (chẳng hạn như tác giả, mô tả và mã hóa ký tự).
Đáp án Bài tập Hướng dẫn
-
Đối với mỗi thẻ sau, hãy cho biết thẻ đóng tương ứng:
<body>
</body>
<head>
</head>
<html>
</html>
<meta>
None
<title>
</title>
-
Sự khác biệt giữa thẻ và phần tử là gì? Tham khảo mục sau đây:
<title>HTML Page Title</title>
Một phần tử HTML sẽ bao gồm thẻ mở, thẻ đóng và mọi thứ nằm ở giữa chúng. Thẻ HTML được sử dụng để đánh dấu phần đầu hoặc phần cuối của một phần tử. Do đó,
<title>HTML Page Title</title>
là một thành phần HTML, trong khi<title>
và</title>
lần lượt là thẻ mở và thẻ đóng. -
Các thẻ nào có thể có chú thích đặt giữa chúng?
Một chú thích sẽ được chèn vào giữa các thẻ
<!--
và-->
và có thể được đặt trên một hoặc nhiều dòng. -
Hãy giải thích thuộc tính là gì và cho một số ví dụ về thẻ
<meta>
.Đây là một thuộc tính được sử dụng để xác định chính xác hơn một phần tử HTML. Ví dụ: thẻ
<meta>
sử dụng cặp thuộc tínhname
vàcontent
để thêm tác giả và mô tả của trang HTML. Thay vào đó, bằng cách sử dụng thuộc tínhcharset
, bạn có thể chỉ định mã hóa ký tự cho tài liệu HTML.
Đáp án Bài tập Mở rộng
-
Hãy tạo một tài liệu HTML phiên bản 5 đơn giản với tiêu đề
My first HTML document
và chỉ có một đoạn trong phần nội dung chứa đoạn văn bảnHello World
. Hãy s dụng thẻ đoạn văn<p>
trong phần thân.<!DOCTYPE html> <html> <head> <title>My first HTML document</title> </head> <body> <p>Hello World</p> </body> </html>
-
Hãy thêm tác giả (
Kevin Author
) và mô tả (This is my first HTML page.
) của tài liệu HTML.<!DOCTYPE html> <html> <head> <title>My first HTML document</title> <meta name="author" content="Kevin Author"> <meta name="description" content="This is my first HTML page."> </head> <body> <p>Hello World</p> </body> </html>
-
Hãy thêm các từ khóa sau liên quan đến tài liệu HTML:
HTML
,Example
,Test
vàMetadata
.<!DOCTYPE html> <html> <head> <title>My first HTML document</title> <meta name="author" content="Kevin Author"> <meta name="description" content="This is my first HTML page."> <meta name="keywords" content="HTML, Example, Test, Metadata"> </head> <body> <p>Hello World</p> </body> </html>
-
Hãy thêm phần tử
<meta charset="ISO-8859-1">
vào tiêu đề của tài liệu và thay đổi văn bảnHello World
thành tiếng Nhật (こんにちは世界). Điều gì sẽ xảy ra? Bạn sẽ giải quyết vấn đề này như thế nào?Nếu ví dụ được thực hiện như mô tả, văn bản tiếng Nhật sex không được hiển thị chính xác. Điều này là do ISO-8859-1 đại diện cho mã hóa ký tự cho bảng chữ cái Latinh. Để xem văn bản, bạn cần thay đổi mã hóa ký tự, chẳng hạn nhw sử dụng UTF-8 (
<meta charset="utf-8">
). -
Sau khi thay đổi văn bản đoạn trở lại thành
Hello World
, hãy chuyển hướng trang HTML đếnhttps://www.google.com
sau 30 giây và thêm một chú thích để giải thích điều này trong tiêu đề của tài liệu.<!DOCTYPE html> <html> <head> <title>My first HTML document</title> <meta name="author" content="Kevin Author"> <meta name="description" content="This is my first HTML page."> <meta name="keywords" content="HTML, Example, Test, Metadata"> <meta charset="utf-8"> <!-- The page is redirected to Google after 30 seconds --> <meta http-equiv="refresh" content="30; url=https://www.google.com"> </head> <body> <p>Hello World</p> </body> </html>