HTML - Tiêu đề
Chúng tôi đã biết rằng một tài liệu HTML điển hình sẽ có cấu trúc sau:
Document declaration tag
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>Chương này sẽ cung cấp thêm một chút chi tiết về phần tiêu đề được thể hiện bằng thẻ HTML <head>. Thẻ <head> là một vùng chứa các thẻ quan trọng khác nhau như thẻ <title>, <meta>, <link>, <base>, <style>, <script> và <noscript>.
Thẻ HTML <title>
Thẻ HTML <title> được sử dụng để chỉ định tiêu đề của tài liệu HTML. Sau đây là một ví dụ để đặt tiêu đề cho một tài liệu HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML Title Tag Example</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thẻ HTML <meta>
Thẻ HTML <meta> được sử dụng để cung cấp siêu dữ liệu về tài liệu HTML bao gồm thông tin về thời hạn trang, tác giả trang, danh sách từ khóa, mô tả trang, v.v.
Sau đây là một số cách sử dụng quan trọng của thẻ <meta> bên trong tài liệu HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML Meta Tag Example</title>
<!-- Provide list of keywords -->
<meta name = "keywords" content = "C, C++, Java, PHP, Perl, Python">
<!-- Provide description of the page -->
<meta name = "description" content = "Simply Easy Learning by Tutorials Point">
<!-- Author information -->
<meta name = "author" content = "Tutorials Point">
<!-- Page content type -->
<meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
<!-- Page refreshing delay -->
<meta http-equiv = "refresh" content = "30">
<!-- Page expiry -->
<meta http-equiv = "expires" content = "Wed, 21 June 2006 14:25:27 GMT">
<!-- Tag to tell robots not to index the content of a page -->
<meta name = "robots" content = "noindex, nofollow">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thẻ HTML <base>
Thẻ HTML <base> được sử dụng để chỉ định URL cơ sở cho tất cả các URL tương đối trong một trang, có nghĩa là tất cả các URL khác sẽ được nối thành URL cơ sở trong khi định vị cho mục nhất định.
Ví dụ: tất cả các trang và hình ảnh nhất định sẽ được tìm kiếm sau khi thêm tiền tố vào các URL đã cho với thư mục http://www.tutorialspoint.com/ URL cơ sở -
<!DOCTYPE html>
<html>
<head>
<title>HTML Base Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
</head>
<body>
<img src = "/images/logo.png" alt = "Logo Image"/>
<a href = "/html/index.htm" title = "HTML Tutorial"/>HTML Tutorial</a>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Nhưng nếu bạn thay đổi URL cơ sở thành một cái gì đó khác, ví dụ: nếu URL cơ sở là http://www.tutorialspoint.com/home thì hình ảnh và các liên kết đã cho khác sẽ trở thành http://www.tutorialspoint.com/home/images /logo.png và http://www.tutorialspoint.com/html/index.htm
Thẻ <link> HTML
Thẻ HTML <link> được sử dụng để chỉ định mối quan hệ giữa tài liệu hiện tại và tài nguyên bên ngoài. Sau đây là một ví dụ để liên kết tệp biểu định kiểu bên ngoài có sẵn trongcss thư mục con trong gốc web -
<!DOCTYPE html>
<html>
<head>
<title>HTML link Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
<link rel = "stylesheet" type = "text/css" href = "/css/style.css">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thẻ HTML <style>
Thẻ HTML <style> được sử dụng để chỉ định biểu định kiểu cho tài liệu HTML hiện tại. Sau đây là một ví dụ để xác định một số quy tắc biểu định kiểu bên trong thẻ <style> -
<!DOCTYPE html>
<html>
<head>
<title>HTML style Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
<style type = "text/css">
.myclass {
background-color: #aaa;
padding: 10px;
}
</style>
</head>
<body>
<p class = "myclass">Hello, World!</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Note- Để tìm hiểu về cách Cascading Style Sheet hoạt động, vui lòng xem một hướng dẫn riêng có sẵn tại css
Thẻ HTML <script>
Thẻ HTML <script> được sử dụng để bao gồm tệp kịch bản bên ngoài hoặc để xác định tập lệnh nội bộ cho tài liệu HTML. Sau đây là một ví dụ mà chúng tôi đang sử dụng JavaScript để xác định một hàm JavaScript đơn giản:
<!DOCTYPE html>
<html>
<head>
<title>HTML script Tag Example</title>
<base href = "http://www.tutorialspoint.com/" />
<script type = "text/JavaScript">
function Hello() {
alert("Hello, World");
}
</script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "OK" />
</body>
</html>Điều này sẽ tạo ra kết quả sau, nơi bạn có thể thử nhấp vào nút đã cho -
Note- Để tìm hiểu về cách hoạt động của JavaScript, vui lòng xem một hướng dẫn riêng có sẵn tại javascript