Một tài liệu HTML tiêu biểu mà có cấu trúc như sau:
<html> <head> Các thẻ hiển thị Header của tài liệu HTML </head> <body> Các thẻ hiển thị body của tài liệu HTML </body> </html>
Chương này sẽ hướng dẫn chi tiết hơn về phần đầu đề mà được biểu diễn bởi thẻ <head>. Thẻ <head> chứa nhiều thẻ quan trọng như <title>, <meta>, <link>, <base>, <style>, <script>, và <noscript>.
Thẻ <title> trong HTML
Thẻ <title> được sử dụng để xác định tiêu đề của tài liệu HTML. Dưới đây là ví dụ của thẻ này.
<html> <head> <title>Vi du the title trong HTML</title> </head> <body> <p>Hello, World!</p> </body> </html>
Nó sẽ tạo ra một tiêu đề như sau:
Thẻ <meta> trong HTML
Thẻ <meta> cung cấp siêu dữ liệu về tài liệu HTML mà bao gồm các thông tin về tên tác giả của trang, danh sách các từ khóa, sự miêu tả trang, ...
Sau đây là một vài cách sử dụng quan trọng của thẻ <meta> bên trong một tài liệu HTML:
<!DOCTYPE html> <html> <head> <title>Vi du the Meta trong HTML</title><!-- The meta cung cap cac tu khoa --> <meta name="keywords" content="HTML, C, C++, Java, PHP, Perl, Python"><!-- The meta cung cap phan mieu ta trang --> <meta name="description" content="Hoc lap trinh co ban va nang cao"><!-- The meta cung cap thong tin tac gia --> <meta name="author" content="Hoclaptrinh"><!-- The meta xac dinh content type --> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><!-- The meta xac dinh thoi gian refresh --> <meta http-equiv="refresh" content="30"><!-- The meta xac dinh thoi gian Expire --> <meta http-equiv="expires" content="Wed, 21 June 2016 14:25:27 GMT"><!-- The meta noi cho robots khong lap index trang --> <meta name="robots" content="noindex, nofollow"> </head> <body> <p>Hello, World!</p> </body> </html>
Đoạn code trên sẽ tạo kết quả sau:
Thẻ <base> trong HTML
Thẻ <base> được sử dụng để xác định địa chỉ URL cơ bản cho tất cả các địa chỉ URL liên quan trong một trang, nghĩa là tất cả các địa chỉ URL khác sẽ được kết nối với địa chỉ URL cơ bản trong khi đặt vị trí cho các mục.
Ví dụ, tất cả các trang và hình ảnh đã cho sẽ được tìm kiếm sau khi đặt ở trước địa chỉ URL đã cho với địa chỉ URL cơ bản là ../hoc-html/ (với trang của mình thì có nghĩa là https://hoc.tv/hoc-html/)
<html> <head> <title>Vi du the base trong HTML</title> <base href="../hoc-html" /> </head> <body> <img src="./images/hoctv.png" alt="Logo Image"/> <a href="../hoc-html/" title="Hoc HTML co ban va nang cao"/>Bai huong dan HTML</a> </body> </html>
Kết quả là:
Thẻ <link> trong HTML
Thẻ <link> được sử dụng để xác định mối quan hệ giữa tài liệu hiện tại và nguồn bên ngoài. Sau đây là một ví dụ để kết nối với một Style Sheet có sẵn bên ngoài trong thư mục phụ css trong trang gốc.
<html> <head> <title>Vi du the link trong HTML</title> <base href="../hoc-html/" /> <link rel="stylesheet" type="text/css" href="../css/style.css"> </head> <body> <p>Hello, World!</p> </body> </html>
Thẻ <style> trong HTML
Thẻ <style> được sử dụng để xác định Style Sheet của tài liệu HTML hiện tại. Dưới đây là một ví dụ xác định một vài quy tắc Style Sheet trong thẻ <style>:
<html>
<head>
<title>Vi du the style trong HTML</title>
<base href="../hoc-html/" />
<style type="text/css">
.myclass{
background-color: #aaa;
padding: 10px;
}
</style>
</head>
<body>
<p class="myclass">Hello, World!</p>
</body>
</html>Thẻ <script> trong HTML
Thẻ <script> được sử dụng hoặc để bao một hoặc nhiều tệp script bên ngoài hoặc để xác định script bên trong của tài liệu HTML. Dưới đây là một ví dụ chúng tôi sử dụng Javascript để xác định một chức năng Javascript đơn giản:
<html>
<head>
<title>Vi du the script trong HTML</title>
<base href="../hoc-html/" />
<script type="text/javascript">
function Hello(){
alert("Hello, World");
}
</script>
</head>
<body>
<input type="button" onclick="Hello();" name="ok" value="OK" />
</body>
</html>Thẻ này tạo kết quả như sau:
