NTM Solutions

Facebook Youtube Google+

Chủ Nhật, 4 tháng 12, 2016

Tự học HTML - Bài 17 - Thẻ HEAD

Các phần tử trong thẻ <head>

Thẻ
Mô tả
Xác định thông tin về trang web
Phần tiêu đề trang web hiển thị trên trình duyệt (thanh tiêu đề)
Xác định địa chỉ mặc định hoặc 01 target cho tất cả liên kết trên trang web.
Xác định liên kết giữa 01 văn bản và 01 tài liệu bên ngoài.
Xác định metadata về 01 tài liệu HTML.
Xác định 01 đoạn script trên máy người dùng.
Định kiểu dáng cho trang web.

Thẻ <head> là thẻ chứa thông tin metadata (thông tin dữ liệu) và được đặt giữa thẻ <html> và thẻ <body>.
HTML metadata chứa thông tin về văn bản HTML. Metadata không được hiển thị trên trình duyệt web.
Metadata thường dùng xác định tiêu đề, kiểu ký tự, kiểu định dạng, liên kết, scripts, và các thông tin meta khác.
Các thẻ sau thường được dùng trong phần metadata: <title>, <style>, <meta>, <link>, <script>, và <base>.


Thẻ <title>

Công dụng thẻ <title>:
  • Xác định phần tiêu đề hiển thị trên trình duyệt web.
  • Cung cấp tiêu đề cho trang web khi thêm vào mục favorites (của trình duyệt)
  • Cung cấp tiêu đề cho trang web hiển thị trên kết quả của công cụ tìm kiếm.
A simple HTML document:

Ví dụ:

<!DOCTYPE html>
<html>
<head>
  
<title>Page Title</title>
</head>
<body>
The content of the document......
</body>
</html>

Thẻ <style>

Thẻ <style> xác định các cấu hình định kiểu dáng cho trang web đó.

Ví dụ:

<style>
  body 
{background-color: powderblue;}
  h1 
{color: red;}
  p 
{color: blue;}
</style>

Thẻ <link>

Thẻ <link> định liên kết đến trang CSS bên ngoài.

Ví dụ:

<link rel="stylesheet" href="mystyle.css">

Thẻ <meta>

Xác định bộ ký tự (character set) nào sẽ được dùng, mô tả về trang, các từ khóa, tác giả, và các thông tin khác.
Metadata được trình duyệt web dùng (không hiển thị ra), được công cụ tìm kiếm dùng (từ khóa), và các dịch vụ web khác.
Để hiển thị được Tiếng Việt thì thêm trong thẻ <head>:
<meta charset="UTF-8">
Để mô tả nội dung trang web của bạn:
<meta name="description" content="Chia sẻ kiến thức lập trình, vi tính">
Xác định từ khóa cho công cụ tìm kiếm"
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
Xác định tác giả trang WEB:
<meta name="author" content="NTM Solutions">
Làm mới lại trang web sau mỗi 30 giây:
<meta http-equiv="refresh" content="30">

Ví dụ:

<meta charset="UTF-8">
<meta name="description" content="Hướng dẫn kiến thức lập trình, vi tính">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="NTM Solutions">

Thẻ <script>

Dùng xác định đoạn CODE JavaScripts trên máy người dùng.
Đoạn JavaScript sau sẽ ghi chữ "Hello JavaScript!" vào thẻ HTML có id="demo":

Ví dụ:

<script>
function myFunction (){
    document.getElementById(
"demo").innerHTML = "Xin chào JavaScript!";
}
</script>

Thẻ <base>

Dùng xác định URL mặc định và target mặc định cho tất cả URLs trên trang:

Ví dụ:

<base href="http://www.lophocvitinh.com" target="_blank">

Có thể bỏ thẻ nào <html>, <head> and <body>?

Theo tiêu chuẩn HTML5; thẻ <html>, thẻ <body>, và thẻ <head> đều có thể bỏ đi.

Ví dụ:

<!DOCTYPE html>
<title>Page Title</title>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>Try it Yourself »

Chú ý: Tôi khuyến cáo các bạn không nên bỏ các thẻ <html>, <body>, và <head> vì có thể gây phát sinh lỗi ở các trình duyệt cũ.