Phần head trong HTML được xác định bằng cặp thẻ <head></head>. Vậy thẻ <head> là gì? và các thẻ nằm trong nó là những thẻ nào? Ở bài này tôi sẽ viết về chủ đề này.
1. Thẻ <head>
Cặp thẻ <head> </head> được sử dụng để chứa siêu dữ liệu (metadata) và được đặt giữa thẻ <html> và <body>.
Siêu dữ liệu (Metadata) là những dữ liệu phụ trợ cho một trang HTML, những dữ liệu này không hiển thị khi người dùng duyệt trang.
Các thẻ nằm trong cặp thẻ <head></head> là <title>, <style>, <meta>, <link>, <script> và <base>.
Vậy các thẻ đó có thể chứa được siêu dữ liệu (metadata).
2. Thẻ <title>
Thẻ <title> được dùng để tạo tiêu đề cho trang HTML.
Thẻ <title> là thẻ bắt buộc trong HTML/XHTML.
Thẻ <title>:
– Tạo tiêu đề cho trang, hiển thị trên thanh công cụ của trình duyệt
– Được sử dụng làm tên trang khi bạn lưu vào bookmark của trình duyệt
– Hiển thị ở phần tiêu đề trang trong kết quả tìm kiếm (chẳng hạn như bạn tìm kiếm trên google)
Để cho bạn dễ hiểu tôi sẽ ví dụ như sau Giả sử tôi có code dưới và lưu lại với tên là nguyenhuuthebinh.html
<!DOCTYPE html> <html> <head> <title>Đây là tiêu đề trang</title> </head> <body> <p>Nội dung trong thẻ body sẽ được hiển thị trong cửa sổ trình duyệt.</p> <p>Nội dung của thẻ title được hiển thị trong tab trình duyệt, trong mục yêu thích và trong kết quả của công cụ tìm kiếm.</p> </body> </html>
thì khi tôi mở file nguyenhuuthebinh.html thì tôi sẽ được như hình dưới
3. Thẻ <style>
Thẻ <style> được sử dụng để chứa kiểu trang trí cho trang HTML.
Trong thẻ <style> bạn có thể quy định cách các thành phần HTML sẽ được hiển thị trên trình duyệt
4. Thẻ <link>
Thẻ <link> thường được sử dụng để liên kết tới các trang style sheets như ví dụ dưới đây
5. Thẻ <meta>
Thẻ <meta> có mục đích khai báo các dữ liệu vĩ mô trong tài liệu web HTML của bạn như mô tả, từ khóa, tên tác giả, bảng mã ký tự sử dụng và các thông tin khác cho trang web. Những thông tin này được sử dụng bởi trình duyệt (cách hiển thị nội dung), bởi các công cụ tìm kiếm (từ khóa) và những dịch vụ web khác.
Thẻ meta luôn được khai báo kèm theo ít nhất là một thuộc tính và mỗi thuộc tính phải luôn có giá trị.
5.1 Thuộc tính charset
Như hình trên charset là tên thuộc tính và UTF-8 là giá trị của thuộc tính charset.
Thuộc tính charset trong thẻ <meta> có nhiệm vụ khai báo cho trình duyệt biết bảng mã ký tự siêu văn bản bên trong tập tin là gì. Và hiện nay hầu hết chúng ta đều sử dụng bảng mã UTF-8 cho tất cả ngôn ngữ bao gồm các ngôn ngữ tiếng latin, chữ Hán – Nôm và các ngôn ngữ đọc từ phải sang trái (Right to Left – RTL) như tiếng Ả-Rập chẳng hạn.
5.2 Thuộc tính name
Như hình trên thuộc tính name luôn đi kèm với thuộc tính content trong đó thuộc tính content được xem là thiết lập nội dung cho thuộc tính name.
Các giá trị thường dùng của thuộc tính name:
+ viewport: Giúp trình duyệt kiểm soát kích thước và quy mô trang web. Giá trị này rất quan trọng, bạn nên bao gồm giá trị này cho tất cả các trang web của bạn (cái này tôi sẽ viết kỹ ở phần dưới)
+ description: Khai báo mô tả của tập tin.
+ keyword: Khai báo từ khóa của tập tin, các từ khóa này sẽ đóng vai trò hỗ trợ các trình tìm kiếm văn bản hoặc máy tìm kiếm website dò tìm.
+ author: Khai báo tên tác giả của tập tin.
Đó là các giá trị quan trọng thường dùng, ngoài ra còn một số giá trị khác như:
+ application-name: Tên ứng dụng đại diện của tập tin web.
+ generator: Khai báo tên ứng dụng tạo ra tập tin.
5.3 Thiết lập Viewport
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Trong đó:
+ width=device-width thiết lập chiều rộng của trang theo chiều rộng màn hình của thiết bị (sẽ khác nhau tùy thuộc vào thiết bị).
+ initial-scale=1.0 thiết lập mức độ phóng to (hoặc thu nhỏ) ban đầu khi trang được trình duyệt tải lần đầu tiên.
Để các bạn dễ hiểu tôi sẽ ví dụ như sau với cùng một bức ảnh và cùng một nội dung như nhau chỉ khác nhau là ở trong cặp thẻ <head></head> có sử dụng hoặc không sử dụng <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Khi không sử dụng <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> thì màn hình trên điện thoại (hoặc máy tính bảng) sẽ hiển thị như hình dưới
Khi có sử dụng <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> thì màn hình trên điện thoại (hoặc máy tính bảng) sẽ hiển thị như hình dưới
6. Thẻ <script>
Thẻ <script> được sử dụng để xác định các câu lệnh của JavaScript.
Ví dụ tôi dùng JavaScript để viết “Hello JavaScript!” thành một phần tử HTML với id = “demo”
Nếu bạn muốn biết nhiều hơn về JavaScript thì xem series Học JavaScript của tôi. Tôi đã viết rất kỹ trong đó.
7. Thẻ <base>
Thẻ <base> được sử dụng để quy định cách hiển thị liên kết và địa chỉ cho tất cả các đường dẫn tương đối trong trang.
Để các bạn dễ hiểu tôi sẽ ví dụ như hình dưới đây
8. Lời cuối bài
Vậy là chúng ta đã kết thúc một bài dài về chủ đề trong cặp thẻ <head></head>. Ở bài kế tiếp tôi sẽ viết về cách thiết kế Layout cho trang web trong HTML.
The post [HTML bài 26] Các thẻ nằm trong phần head appeared first on Học online.
from WordPress http://ift.tt/2vIaDLH
via IFTTT
Không có nhận xét nào:
Đăng nhận xét