[HTML/HTML5] Phần 23: Phần đầu HTML

46 lượt xem

Nhiều bạn học HTML mà không chú ý nhiều về phần đầu (head) của 1 trang HTML, thật ra phần này có ý nghĩa cũng rất quan trọng. Mời bạn theo dõi nội dung bài để tìm hiểu về công dụng phần này.

Phần tử head
Phần tử head là 1 vùng chứa dành cho các thông tin siêu dữ liệu (meta) và được đặt ở giữa thẻ html và thẻ body. Thông tin siêu dữ liệu (metadata) là thông tin đặc tả về tài liệu HTML và các thông tin này không hiển thị trên giao diện nhưng chúng giúp trang tăng SEO vì các cơ chế tìm kiếm sẽ dựa vào đây trước để đánh giá trang web của bạn.

Siêu dữ liệu thông thường định nghĩa tên tài liệu, tập ký tự (character set), phong cách, liên kết, mã kịch bản (script) và các thông tin khác. Một số thẻ để định nghĩa siêu dữ liệu bao gồm: title, style, meta, link, script, và base.

Phần tử title
Phần tử title định nghĩa tên tài liệu và cần thiết cho tất các tài liệu HTML/XHTML. Phần tử title:

  • định nghĩa tiêu đề sẽ hiển thị ở tab trình duyệt
  • cung cấp tiêu đề cho trang khi trang được thêm vào favorites
  • hiển thị tiêu đề trang web trong các kết quả tìm kiếm (Google)

Ví dụ định nghĩa tiêu đề trang Web dammio.com:

<!DOCTYPE html>
<html>
<head>
  <title>Kiến thức công nghệ & ngôn ngữ</title>
</head>
<body>
Nội dung trang web ở đây... --- dammio.com
</body>
</html>

Phần tử style
Như ở bài trước, bạn đã biết phần tử này dùng để định nghĩa thông tin phong cách cho 1 trang HTML. Ví dụ định nghĩa style bên trong trang Web.

<!DOCTYPE html>
<html>
<head>
<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>
</head>
<body>Nội dung trang web...---dammio.com</body>
</html>

Phần tử link
Phần tử link dùng để liên kết đến phong cách bên ngoài (tập tin *.css).

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>Nội dung trang web...---dammio.com</body>
</html>

Phần tử meta
Phần tử meta dùng để đặc tả tập ký tự, mô tả trang, từ khóa, tác giả và các thông tin khác. Thật ra đây là phần tử quan trọng bậc nhất đối với SEO (tối ưu hóa tìm kiếm), bạn phải triển khai 1 website thực tế chạy trên mạng thì mới hiểu rõ và “thấm” về phần tử meta. Siêu dữ liệu được sử dụng bởi trình duyệt để xem cách nội dung hiển thị và các cơ chế tìm kiếm (thông qua các từ khóa), và các dịch vụ web khác.

Định nghĩa tập ký tự là UTF-8 cho phép website của bạn hiển thị tiếng Việt.

<meta charset="UTF-8">

Định nghĩa mô tả cho website.

<meta name="description" content="Thiết kế, lập trình Web và học tiếng Anh">

Định nghĩa từ khóa cho website.

<meta name="keywords" content="Lập trình Web, thiết kế Web, tiếng Anh, HTML, 
HTML5, Bootstrap, PHP, ASP.NET, C#, dammio, JavaScript, JQuery, NodeJS, TOEFL ibt, IELTS, TOEIC">

Định nghĩa tên tác giả của trang.

<meta name="author" content="Dammio">

Làm tươi (mới) trang web mỗi 30s.

<meta http-equiv="refresh" content="30">

Ví dụ tổng hợp các thông tin ở trên:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Thiết kế, lập trình Web và học tiếng Anh">
  <meta name="keywords" content="Lập trình Web, thiết kế Web, tiếng Anh, HTML, HTML5, Bootstrap, PHP,      ASP.NET, C#, dammio, JavaScript, JQuery, NodeJS, TOEFL ibt, IELTS, TOEIC">
  <meta name="author" content="Dammio">
  <meta http-equiv="refresh" content="30">
</head>
<body>
<p>Nội dung ở đây --- dammio.com</p>
</body>
</html>

Ngoài ra có cả hàng chục các thông tin khác được định nghĩa trong thẻ meta, bạn tìm hiểu hơn trên mạng nhé. Ví dụ thẻ meta được sử dụng ở website dammio.com.

Thiết lập khung nhìn (Viewport)
HTML5 giới thiệu 1 phương pháp cho phép các nhà thiết kế Web kiểm soát khung nhìn thông qua thẻ meta. Khung nhìn là 1 vùng mà người dùng sẽ nhìn thấy 1 trang web. Khung nhìn có kích thước khác nhau tùy theo thiết bị, nó sẽ nhỏ hơn nếu ở điện thoại di động và to hơn nếu ở màn hình máy tính. Bạn nên bao gồm thẻ meta mô tả khung nhìn (viewport) cho tất cả trang web như sau.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>Nội dung ở đây --- dammio.com</p>
</body>

Một phần tử khung nhìn meta cho trình duyệt chỉ dẫn cách kiểm soát các chiều của trang và độ co giãn. Dòng mã width=device-width thiết lập độ rộng của trang theo độ rộng của thiết bị (screen-width). Nếu bạn xài laptop “xịn”, chuẩn HD có độ phân giải là 1920 x 1200 thì độ rộng màn hình screen-width là 1920px, còn nếu bạn hàng iPhone có độ phân giải là 320 x 640 thì độ rộng của bạn là 320 pixels nếu để máy dọc. Dòng mã initial-scale=1.0 thiết lập mức độ phóng (zoom level) là 1.0 (100%) khi trang lần đầu được tải lên bởi trình duyệt.

Thẻ script
Thẻ script dùng để định nghĩa đoạn mã JavaScript. Ví dụ hiển thị dòng chữ “Hello Dammio!” ở phần tử có id=”demo”.

<!DOCTYPE html>
<html>
<head>
  <title>Dammio</title>
  <script>
  function myFunction() {
    document.getElementById("demo").innerHTML = "Hello Dammio!";
  }
  </script>
</head>
<body>

<h1>Trang web dammio.com</h1>
<p id="demo">Đoạn văn bản</p>
<button type="button" onclick="myFunction()">Hiển thị</button>

</body>
</html>

Phần tử base
Phần tử base mô tả đường dẫn URL cơ bản và đích (target) cơ bản cho tất cả các URL tương đối trong trang web.

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

Loại bỏ html, head và body?
Theo chuẩn HTML5, bạn có thể loại bỏ thẻ html, body và head. Tuy nhiên website dammio.com không khuyến khích làm như vậy vì sẽ làm bạn “rối” và khó quản lý các thành phần trang web hơn. Ví dụ trang web HTML5 chạy tốt mà không có các thẻ như trên.

<!DOCTYPE html>
<title>Lập trình Web --- dammio.com</title>
<h1>Đề mục 1</h1>

<p>Đoạn văn bản 1</p>

Kết luận: Bài viết đưa ra các kiến thức cơ bản về phần đầu HTML, hi vọng bạn nắm vững để áp dụng trong việc thiết kế giao diện website.

Bình luận Facebook

Để lại bình luận

1 Comment on "[HTML/HTML5] Phần 23: Phần đầu HTML"

Thông báo khi có
avatar
1000
Sắp xếp theo:   mới nhất | cũ nhất | nhiều bình chọn nhất
trackback

[…] Đăng ngày 4 Tháng Chín, 20177 Tháng Chín, 2017 bởi dammio 24 lượt xem (adsbygoogle = window.adsbygoogle || []).push({}); << Bài trước Trang mục lục Bài tiếp theo >> […]

wpDiscuz