- Tham gia
- 28/02/2015
- Bài viết
- 16,828
- Được Like
- 12,687
Sử dụng các thẻ khai báo thông tin web cơ bản
Như ở phần trước thì bạn đã hiểu một tài liệu web bằng HTML hoàn chỉnh sẽ bao gồm 4 phần chính là thẻ khai báo loại tập tin <!DOCTYPE>, thẻ <html>, thẻ khai báo thông tin website <head> và thẻ <body>.
Và bên trong cặp thẻ <html> trong tài liệu thì đầu tiên sẽ là cặp thẻ <head>, cặp thẻ này sẽ có nhiệm vụ để bạn khai báo thông tin tài liệu website mà bạn đang tạo ra như tên tài liệu, tên tác giả, mô tả, khai báo CSS, khai báo Javascript,…rất nhiều. Nhưng tạm thời ở đây, các bạn chỉ cần biết qua một số thẻ khai báo thông tin web cơ bản được đặt bên trong thẻ cặp <head> mà hầu như dự án nào bạn cũng sẽ dùng tới.
Trước khi bắt đầu, bạn hãy viết một tài liệu HTML như dưới đây.
Khai báo tên tài liệu với cặp thẻ <title>
Thẻ <title> </title> có tác dụng khai báo tên tài liệu web của bạn đang soạn. Ứng dụng thực tiễn của thẻ này là giúp trình duyệt hiển thị tên tài liệu khi mở lên và các cỗ máy tìm kiếm như Google cũng hiển thị nội dung trong cặp thẻ này để lấy tên tài liệu.
Ví dụ như với đoạn HTML trên, mình sẽ thiết lập tên tài liệu này là Cộng đồng Xenforo - vnxf.vn, bạn hãy thử lưu lại và mở nó lên bằng trình duyệt sẽ thấy kết quả như sau.
Khai báo dữ liệu vĩ mô với thẻ <meta>
Thẻ <meta> là một thẻ đặc biệt vì nó không có thẻ đóng như các thẻ khác mà sẽ có dấu gạch chéo như / ở đằng trước ký tự > cuối cùng. Thẻ này có mục đích khai báo các dữ liệu vĩ mô trong tài liệu web HTML của bạn như mô tả, từ khóa, tên tác giả, bảng mã ký tự sử dụng,…
Thẻ meta luôn được khai báo kèm theo ít nhất là một thuộc tính và mỗi thuộc tính phải luôn có giá trị. Ví dụ:
Trong đó, charset là tên thuộc tính và utf-8 là giá trị của thuộc tính charset.
Thuộc tính charset
Thuộc tính charset trong thẻ <meta> có nhiệm vụ khai báo cho trình duyệt biết bảng mã ký tự siêu văn bản bên trong tài liệu là gì. Và hiện nay hầu hết chúng ta đều sử dụng bảng mã UTF-8 cho tất cả ngôn ngữ bao gồm các ngôn ngữ tiếng latin, chữ Hán – Nôm và các ngôn ngữ đọc từ phải sang trái (Right to Left – RTL) như tiếng Ả-Rập chẳng hạn.
Thuộc tính name
Đối với thuộc tính name thì thẻ meta của bạn phải có hai thuộc tính, đó là thuộc tính name và content, trong đó thuộc tính content được xem là thiết lập nội dung cho thuộc tính name. Ví dụ:
Trong đó, giá trị của thuộc tính name là một giá trị có sẵn vì hiện tại thuộc tính name hỗ trợ một số giá trị như:
Như mình đã nói ở đầu bài là các thẻ khai báo thông tin quan trọng cho tài liệu HTML còn khá là nhiều nhưng dù sao các thẻ đó bạn cũng sẽ không sử dụng bây giờ nên mình sẽ đề cập tới ở các serie khác. Nhưng trước mắt bạn nên nắm rõ ý nghĩa các thẻ kia để khi nhìn vào một mã nguồn HTML thì bạn còn hiểu được ý nghĩa của chúng.
Chúc các bạn thành công.
Như ở phần trước thì bạn đã hiểu một tài liệu web bằng HTML hoàn chỉnh sẽ bao gồm 4 phần chính là thẻ khai báo loại tập tin <!DOCTYPE>, thẻ <html>, thẻ khai báo thông tin website <head> và thẻ <body>.
Trước khi bắt đầu, bạn hãy viết một tài liệu HTML như dưới đây.
HTML:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8" />
<title>Cộng đồng Xenforo - vnxf.vn</title>
<meta name="author" content="VNXF" />
<meta name="description" content="Hoc HTML toan tap mien phi, day la noi dung bai hoc." />
<meta name="keyword" content="Hoc html, huong dan html, html co ban" />
</head>
<body>
<p>Đây là nội dung website</p>
</body>
</html>Khai báo tên tài liệu với cặp thẻ <title>
Thẻ <title> </title> có tác dụng khai báo tên tài liệu web của bạn đang soạn. Ứng dụng thực tiễn của thẻ này là giúp trình duyệt hiển thị tên tài liệu khi mở lên và các cỗ máy tìm kiếm như Google cũng hiển thị nội dung trong cặp thẻ này để lấy tên tài liệu.
Ví dụ như với đoạn HTML trên, mình sẽ thiết lập tên tài liệu này là Cộng đồng Xenforo - vnxf.vn, bạn hãy thử lưu lại và mở nó lên bằng trình duyệt sẽ thấy kết quả như sau.
Thẻ <meta> là một thẻ đặc biệt vì nó không có thẻ đóng như các thẻ khác mà sẽ có dấu gạch chéo như / ở đằng trước ký tự > cuối cùng. Thẻ này có mục đích khai báo các dữ liệu vĩ mô trong tài liệu web HTML của bạn như mô tả, từ khóa, tên tác giả, bảng mã ký tự sử dụng,…
Thẻ meta luôn được khai báo kèm theo ít nhất là một thuộc tính và mỗi thuộc tính phải luôn có giá trị. Ví dụ:
Mã:
<meta charset="utf-8" />Trong đó, charset là tên thuộc tính và utf-8 là giá trị của thuộc tính charset.
Thuộc tính charset
Thuộc tính charset trong thẻ <meta> có nhiệm vụ khai báo cho trình duyệt biết bảng mã ký tự siêu văn bản bên trong tài liệu là gì. Và hiện nay hầu hết chúng ta đều sử dụng bảng mã UTF-8 cho tất cả ngôn ngữ bao gồm các ngôn ngữ tiếng latin, chữ Hán – Nôm và các ngôn ngữ đọc từ phải sang trái (Right to Left – RTL) như tiếng Ả-Rập chẳng hạn.
Thuộc tính name
Đối với thuộc tính name thì thẻ meta của bạn phải có hai thuộc tính, đó là thuộc tính name và content, trong đó thuộc tính content được xem là thiết lập nội dung cho thuộc tính name. Ví dụ:
Mã:
<meta name="author" content="VNXF" />Trong đó, giá trị của thuộc tính name là một giá trị có sẵn vì hiện tại thuộc tính name hỗ trợ một số giá trị như:
- author: Khai báo tên tác giả của tài liệu.
- description: Khai báo mô tả của tài liệu.
- keyword: Khai báo từ khóa của tài liệu, các từ khóa này sẽ đóng vai trò hỗ trợ các trình tìm kiếm văn bản hoặc máy tìm kiếm website dò tìm.
- application-name: Tên ứng dụng đại diện của tài liệu web.
- generator: Khai báo tên ứng dụng tạo ra tài liệu.
Như mình đã nói ở đầu bài là các thẻ khai báo thông tin quan trọng cho tài liệu HTML còn khá là nhiều nhưng dù sao các thẻ đó bạn cũng sẽ không sử dụng bây giờ nên mình sẽ đề cập tới ở các serie khác. Nhưng trước mắt bạn nên nắm rõ ý nghĩa các thẻ kia để khi nhìn vào một mã nguồn HTML thì bạn còn hiểu được ý nghĩa của chúng.
Chúc các bạn thành công.
Nguồn: thachpham.com
Bài viết liên quan
Bài viết mới
