Head trong HTML

  • Nguyễn Lê Điệp
  • 02-01-2017
  • 219
  • 0
  • 2
  • 0
  • Bài viết được đăng tại kennis.vn - không copy dưới mọi hình thức.

    Trong HTML phần tử head là một phần chính cho các dữ liệu và được đặt giữa các thẻ html và body. HTML dữ liệu là các tài liệu của HTML và các dữ liệu HTML sẽ không được hiển thị cho người dùng gọi là Metadata. Metadata thường được dùng để xác định tiêu đề trang, style, liên kết, chức năng, và các thông tin khác. Các thẻ sau đây mô tả về dữ liệu metadata: <title>, <style>, <meta>, <link>, <script> và <base>.

    Phần tử title

    Trong HTML phần tử <title> dùng để xác định tiêu đề của trang, và là cần thiết trong tất cả các trang HTML.

    Phần tử <title>:

    • Định nghĩa một tiêu đề trang trong tab trình duyệt
    • Hiển thị tiêu đề trang web khi được thêm vào danh sách yêu thích
    • Hiển thị tiêu đề trang trong kết quả của các công cụ tìm kiếm
    <!DOCTYPE html>
    <html>
    <head>
      <title>Đây là tiêu đề của một trang</title>
    </head>
    <body>
      Đây là phần nội dung của một trang...
    </body>
    </html>
    Xem ví dụ


    Phần tử style

    Với phần tử <style> nó được sử dụng để xác định thông tin và giao diện cho một trang HTML hiện hành.
    <style>
        body {background-color: yellow;}
        h1 {color: red;}    
        p {color: blue;}
      </style>
    Xem ví dụ

    Phần tử link

    Với phần tử <link> nó được sử dụng để liên kết đến các tập tin giao diện bên ngoài trang HTML hiện tại.
    <link rel="stylesheet" href="/home/tryit/css/style-hochtml.css">
    Xem ví dụ

    Phần tử meta

    Phần tử <meta> nó được sử dụng để xác định ngôn ngữ trang, mô tả trang, từ khóa, tác giả, và các dữ liệu khác.

    Các dữ liệu yêu cầu trình duyệt làm thế nào để hiển thị lên nội dung, và khai báo với công cụ tìm kiếm và các dữ liệu web khác.

    Xác định bộ ngôn ngữ trang

    <meta charset="UTF-8">

    Xác định phần mô tả trang

    <meta name="description" content="Website cung cấp các bài hướng dẫn học tập miễn phí và trực tuyến theo từng bước về các ngôn ngữ PHP, MySQL, SQL, C, C#, HTML, CSS, Wordpress, SEO, Powerpoint, Word, Excel, Hệ điều hành, Công nghệ,...">

    Xác định từ khóa cho trang

    <meta name="keywords" content="Học PHP, MySQL, HTML, CSS, SQL, C, C#, SEO">

    Xác định tác giả trang

    <meta name="author" content="Nguyễn Lê Điệp">

    Xác định bản quyền trang

    <meta name="copyright" content="Copyright © 2016 by kennis.vn" />

    Thời gian để làm mới trang với thời gian là 60 giây

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

    Ví dụ về các meta


    Bạn có thể xem các thẻ meta bên trên với ví dụ sau:
    <meta charset="UTF-8">
    <meta name="description" content="Website cung cấp các bài hướng dẫn học tập miễn phí và trực tuyến theo từng bước về các ngôn ngữ PHP, MySQL, SQL, C, C#, HTML, CSS, Wordpress, SEO, Powerpoint, Word, Excel, Hệ điều hành, Công nghệ,...">
    <meta name="keywords" content="Học PHP, MySQL, HTML, CSS, SQL, C, C#, SEO">
    <meta name="author" content="Nguyễn Lê Điệp">
    <meta name="copyright" content="Copyright © 2016 by kennis.vn" />
    <meta http-equiv="refresh" content="60">
    Xem ví dụ

    Phần tử meta viewport

    Với phần tử meta viewport nó thay đổi cách hiển thị tương thích với các thiết bị. Nếu bạn lên web bằng máy tính thì trang web sẽ hiển thị lớn hơn so với điện thoại. Tốt nhất bạn nên sử dụng phần tử này vào trang web của mình.

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    Phần tử meta viewport sẽ định hướng cho trình duyệt làm thế nào để kiểm soát kích thước và hiển thị của trang.

    Với width=device-width xác định chiều rộng của thiết bị và initial-scale=1.0 nhằm thiết lập chế độ zoom hoặc không zoom khi trình duyệt tải trang lần đầu tiên.

    Phần tử script

    Với phần tử <script> sẽ được sử dụng để xác định JavaScripts phía người dùng.

    <script>
      function myfun() {
        document.getElementById("demo").innerHTML = "Xin chào các bạn";
      }
    </script>
    Xem ví dụ

    Phần tử base

    Với phần tử này giúp các bạn định nghĩa được các trang chủ, trang gốc của một web nào đó.
    <base href="http://kennis.vn/home/images/">
    Xem ví dụ
    Chúc các bạn học tốt và thành công!
    Từ khóa:

    Head trong HTML

    Head trong HTML

    Head trong HTML

    Head trong HTML
    Head trong HTML
    2 or 0
    Lưu ý: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.
    Đang tải...
    Nguyễn Lê Điệp
    Có sở thích lập trình, viết lách nên đã từng tham gia quản trị và viết bài ở một số diễn đàn, đến năm 2016 mới có điều kiện sáng lập ra kennis.vn với mục đích chia sẻ để học tập. Sinh năm 93, đang học tập và làm việc tại Hồ Chí Minh City.

    Thống kê

    - Hôm nay:
    415
    - Hôm qua:
    643
    - Tuần này:
    4.679
    - Tuần trước:
    4.927
    - Tháng này:
    13.788
    - Tháng trước:
    42.741
    - Năm này:
    196.582
    - Năm trước:
    17.373
    - Tổng cộng:
    213.955