Header trong HTML

Một tài liệu HTML tiêu biểu mà có cấu trúc như sau:

Thẻ khai báo <!DOCTYPE html>

<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.

<!DOCTYPE html>
<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:

Hello, World!

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 tai s2sontech"><!-- The meta cung cap thong tin tac gia -->
<meta name="author" content="s2sontech"><!-- 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:

Hello, World!

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à ../html/ (với trang của mình thì có nghĩa là html/).

<!DOCTYPE html>
<html>
<head>
<title>Vi du the base trong HTML</title>
<base href="../html/" />
</head>
<body>
<img src="./images/logo3.png" alt="Logo Image"/>
<a href="../html/index" title="Hoc HTML co ban va nang cao"/>Bai huong dan HTML</a> </body>
</html>

Kết quả là:

Bai huong dan HTML

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.

<!DOCTYPE html>
<html>
<head>
<title>Vi du the link trong HTML</title>
<base href="../html/" />
<link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>

Kết quả của đoạn code trên như sau:

Hello, World!

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>:

<!DOCTYPE html>
<html>
<head>
<title>Vi du the style trong HTML</title>
<base href="../html/" />
<style type="text/css">
.myclass{
   background-color: #aaa;
   padding: 10px;
}
</style>
</head>
<body>
<p class="myclass">Hello, World!</p>
</body>
</html>

Đoạn mã trên sẽ tạo ra kết quả sau:

Hello, World!

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:

<!DOCTYPE html>
<html>
<head>
<title>Vi du the script trong HTML</title>
<base href="../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:

Ghi chú: Để học cách sử dụng Javascript, bạn truy cập trang Học JavaScript cơ bản và nâng cao.

Bài học HTML phổ biến khác tại s2sontech.com: