Cấu trúc tài liệu html

- 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
		
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
	

Post on: 2016-09-14 14:00:37 | in: HTMLCấu trúc tài liệu website bằng HTML bao gồm các thẻ !DOCTYPE, thẻ html, thẻ head và thẻ body.

• [HTML cơ bản] Các thẻ khai báo cơ bản trong HTML
• [HTML cơ bản] Các thẻ định dạng chữ và văn bản trong HTML
• [HTML cơ bản] Thẻ tạo liên kết trong HTML

Một tài liệu website bằng HTML gồm bốn phần chính sau đây:

• Thẻ khai báo loại tập tin/tài liệu .
• Thẻ đóng và mở tài liệu HTML .
• Thẻ đóng và mở phần thông tin website .
• Thẻ đóng và mở phần nội dung website .

Xem qua ví dụ một tập tin HTML đơn giản.

 
    Page Title
 

 

My First Heading

My first paragraph.

chạy code

Thẻ khai báo loại tập tin/tài liệu              

Nằm ở dòng đầu tiên của tài liệu HTML,thẻ khai bảo loại tệp tập tin có chức năng cho trình duyệt biết loại tập tin được sử dụng. Với ví dụ trên trình duyệt hiểu rằng đây là tài liệu HTML5.

Nằm trong một tài liệu HTML nhưng  điều đặc biệt là thẻ không phải là thẻ HTML nó chỉ là một thẻ khai báo thông tin để trình duyệt hiểu phiên bản HTML mà thôi.

Thẻ đóng và mở tài liệu HTML

Ngay sau thẻ khai báo loại tập tin, cặp thẻ bao bọc toàn bộ nội dung của tài liệu HTML có nhiệm vụ khai báo cho trình duyệt biết rằng những nội dung bên trong cặp thẻ này là HTML.

Bên trong thẻ này có thể thê một thuộc tính lang khai báo cho trình duyệt biết mã ngôn ngữ mà ta sử dụng trên website, ví dụ .

Thẻ đóng và mở phần thông tin website

Cặp thẻ của tài liệu HTML chứa các khai báo thông tin của website. Nội dung bên trong thẻ này gồm:  thẻ tiêu đề trong , thẻ , thẻ khai báo CSS, JAVASCRIPT và một số thông tin liên quan đến SEO.

Nội dung của phần này thường không hiển thị trực tiếp nhưng nó chưa thông tin quan trọng đối với website.

Thẻ đóng và mở phần nội dung website

Cuối cùng phần quan trọng nhất của một tài liệu HTML, phần nội dung nằm trong cặp thẻ chứa toàn bộ nội dung siêu văn bản, media hiển thị trên website.

Nếu bạn chạy code ví dụ trên sẽ thấy phần hiển thị nội dung mà chúng ta thấy chính là nội dung trong cặp thẻ .

Chỉ cần áp dụng cấu trúc tài liệu theo thứ tự  đã giải thích và ví dụ ở trên việc tự tạo ra một tài liệu website đơn giản bằng HTML thật không khó đúng không?