Khai báo một tập tin html

Như ở phần trước thì bạn đã hiểu một tài liệu web bằng HTML hoàn chỉnh sẽ bao gồm 4 phần chính là thẻ khai báo loại tập tin , thẻ , thẻ khai báo thông tin website và thẻ .

Và bên trong cặp thẻ trong tài liệu thì đầu tiên sẽ là cặp thẻ , cặp thẻ này sẽ có nhiệm vụ để bạn khai báo thông tin tài liệu website mà bạn đang tạo ra như tên tài liệu, tên tác giả, mô tả, khai báo CSS, khai báo Javascript,…rất nhiều. Nhưng tạm thời ở đây, các bạn chỉ cần biết qua một số thẻ khai báo thông tin web cơ bản được đặt bên trong thẻ cặp mà hầu như dự án nào bạn cũng sẽ dùng tới.

Trước khi bắt đầu, bạn hãy viết một tài liệu HTML như dưới đây.

Khai báo tên tài liệu với cặp thẻ

Thẻ có tác dụng khai báo tên tài liệu web của bạn đang soạn. Ứng dụng thực tiễn của thẻ này là giúp trình duyệt hiển thị tên tài liệu khi mở lên và các cỗ máy tìm kiếm như Google cũng hiển thị nội dung trong cặp thẻ này để lấy tên tài liệu.

Ví dụ như với đoạn HTML trên, mình sẽ thiết lập tên tài liệu này là Thach Pham Blog – wwww.thachpham.com, bạn hãy thử lưu lại và mở nó lên bằng trình duyệt sẽ thấy kết quả như sau.

Khai báo dữ liệu vĩ mô với thẻ

Thẻ là một thẻ đặc biệt vì nó không có thẻ đóng như các thẻ khác mà sẽ có dấu gạch chéo như / ở đằng trước ký tự > cuối cùng. Thẻ này 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,…

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ị. Ví dụ:

[html][/html]

Trong đó, 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

Thuộc tính charset trong thẻ 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ài liệu 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.

Thuộc tính name

Đối với thuộc tính name thì thẻ meta của bạn phải có hai thuộc tính, đó là thuộc tính name và content, trong đó thuộc tính content được xem là thiết lập nội dung cho thuộc tính name. Ví dụ:

[html][/html]

Trong đó, giá trị của thuộc tính name là một giá trị có sẵn vì hiện tại thuộc tính name hỗ trợ một số giá trị như:

• author: Khai báo tên tác giả của tài liệu.
• description: Khai báo mô tả của tài liệu.
• keyword: Khai báo từ khóa của tài liệu, 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.

Đó 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ài liệu web.
• generator: Khai báo tên ứng dụng tạo ra tài liệu.

Lời kết

Như mình đã nói ở đầu bài là các thẻ khai báo thông tin quan trọng cho tài liệu HTML còn khá là nhiều nhưng dù sao các thẻ đó bạn cũng sẽ không sử dụng bây giờ nên mình sẽ đề cập tới ở các serie khác. Nhưng trước mắt bạn nên nắm rõ ý nghĩa các thẻ kia để khi nhìn vào một mã nguồn HTML thì bạn còn hiểu được ý nghĩa của chúng.

Thạch Phạm

Bé Thạch 18 tuổi, hiện công tác tại AZDIGI với vị trí giữ xe và viết thuê tại ThachPham.Com. Sở thích nghiên cứu về website, DevOps, SysAdmin và xăm mình nữa. Phương châm sống của bé là "No Pain, No Gain".

Hiện tại blog tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Bình luận sẽ mở ra cho đến khi mình sẵn sàng.

- Thông thường thì bất kỳ một thứ gì cũng có một cái cấu trúc cơ bản mà nó phải tuân theo để đảm bảo việc nó có thể hoạt động được ổn định [ví dụ như một bài văn thường có cấu trúc gồm ba phần mở bài - thân bài - kết luận, nếu chúng ta loại bỏ đi một thành phần nào đó hoặc xáo trộn thứ tự giữa ba thành phần thì nội dung của bài văn sẽ không được trơn tru mạch lạc]. Việc viết mã lệnh trong một tập tin HTML cũng tương tự như vậy, nó cần phải tuân thủ theo một cấu trúc cơ bản để đảm bảo trang web được hiển thị như ý, tránh mắc phải những lỗi không đáng có.

1] Cấu trúc của một tập tin HTML

- Nội dung của một tập tin HTML phải được bắt đầu bằng thẻ và kết thúc bởi thẻ .

- Bên trong cặp thẻ được chia làm hai thành phần chính:

• Phần head được bắt đầu bằng thẻ và kết thúc bởi thẻ , nó dùng để chứa tiêu đề và các thẻ khai báo thông tin cho trang web.
• Phần body được bắt đầu bằng thẻ và kết thúc bởi thẻ , nó dùng để chứa những nội dung mà chúng ta muốn hiển thị trên trang web.

- Dưới đây là hình ảnh minh họa về cấu trúc cơ bản của một tập tin HTML.

- Tôi có một tập tin HTML với nội dung như bên dưới.

	
		Hello WEB CƠ BẢN
		
	
	
		
1] Tài liệu học HTML
		
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
		
2] Tài liệu học CSS
		
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
		
3] Tài liệu học JavaScript
		
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
	

- Khi thực thi tập tin này thì trình duyệt sẽ hiển thị là.

- Lưu ý: Thẻ có chức năng tương tự như việc chúng ta chọn kiểu mã hóa UTF-8 khi tạo một tập tin HTML, nó sẽ giúp cho trang web hiển thị ngôn ngữ tiếng Việt được chính xác.

2] Cấu trúc của một tập tin HTML5

- Cái cấu trúc của tập tin HTML mà tôi hướng dẫn cho các bạn ở phía trên là cấu trúc của phiên bản HTML đầu tiên. Hiện nay, HTML đã cho ra phiên bản mới nhất là HTML5, phiên bản này hỗ trợ thêm một số thẻ mới cùng với những tính năng vượt trội hơn.

- Để sử dụng phiên bản HTML5 thì ta thêm thẻ vào vị trí đầu tiên bên trong tập tin.

	
		Hello WEB CƠ BẢN
		
	
	
		
1] Tài liệu học HTML
		
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
		
2] Tài liệu học CSS
		
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
		
3] Tài liệu học JavaScript
		
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .