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 ...
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> <meta name="keywords" content="HTML, C, C++, Java, PHP, Perl, Python"> <meta name="description" content="Hoc lap trinh co ban va nang cao tai code24h"> <meta name="author" content="code24h"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="refresh" content="30"> <meta http-equiv="expires" content="Wed, 21 June 2016 14:25:27 GMT"> <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à https://code24h.com/html/).
<!DOCTYPE html> <html> <head> <title>Vi du the base trong HTML</title> <base href="../html/" /> </head> <body> <img src="/pictures/picfullsizes/2018/08/14/kng1534218178.png" alt="Logo Image"/> <a href="../html/index.jsp" 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.
Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.
Bài học HTML phổ biến khác tại code24h.com:
