Cấu trúc chuẩn 1 tài liệu web bằng HTML

Chủ nhật - 31/07/2016 08:54
In ra
Đóng cửa sổ này

Trong phần này chúng ta cùng tìm hiểu các thành phần chính quan trong nhất trong một file tài liệu HTML. Vận dụng nó để thực hành viết 1 trang giới thiệu cá nhân.

Một tập tin (file) HTML sẽ giống như bất kỳ 1 tập tin văn bản hay tập tin hình ảnh v.v. Có thể khai báo tên tập tin, loại tập tin ( đuôi mở rộng tương ứng). Và nội dung bên trong nó. Vậy một tài liệu web thì sẽ bao gồm bốn yếu tố chính đó là:

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

Trước khi mình giải thích rõ các thành phần trên thì bạn hãy tạo ra một tập tin HTML với nội dung sau và lưu lại.

<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>Đây là nội dung bài giới thiệu cá nhân</p>
  </body>
</html>

Sau khi lưu lại bạn mở file bằng trình duyệt xem kết quả nhé.

Chúng ta cùng nhau tìm hieur về các thành phần trong nội dung chính của bài:

Thẻ khai báo loại tập tin

Ngay dòng đầu tiên của tài liệu, chúng ta phải có một thẻ khai báo loại tập tin cho nó như thế này, cụ thể là ta sẽ khai báo rằng đây là tập tin HTML.

<!DOCTYPE html>

Với thẻ <!DOCTYPE> ở trên, ta có thêm một tham số đó là html. Tham số này nghĩa là chúng ta khai báo với trình duyệt rằng đây là tài liệu HTML5 (HTML phiên bản 5). Ngoài ra, nó còn có một vài tham số khác mà bạn có thể tham khảo thêm tại đây.

Chú ý rằng thẻ <!DOCTYPE> không phải là một thẻ của HTML, mà nó chỉ là một thẻ khai báo thông tin trên tài liệu để trình duyệt hiểu phiên bản HTML mà bạn sử dụng trên website mà thôi.

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

Ở tầng tiếp theo sẽ là thẻ <html> </html> nó 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. Tuy nhiên, bên trong thẻ này mình có thêm một thuộc tính tên là lang với giá trị là vi (<html lang="vi">). Thuộc tính này nghĩa là chúng ta khai báo cho trình duyệt biết mã ngôn ngữ mà ta sử dụng trên website, mã vi nghĩa là Vietnamese – tiếng Việt, bạn có thể tham khảo các mã ngôn ngữ khác tại đây.

Bạn nên nhớ rằng thẻ <html> </html> phải bao bọc toàn bộ nội dung website, không bao gồm thẻ <!DOCTYPE>.

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

Một số thông tin cho website như: tên website (titlle), thông tin website (meta), khai báo CSS (style), khai báo Javascript (script), và một số thành phấn khác. Sẽ được đặt vào bên trong cặp thẻ <head> </head>. Thường là các thông tin được khai báo trong đây sẽ không hiển thị trực tiếp thành siêu văn bản trên web nhưng nó sẽ có nhiệm vụ chứa các thông tin quan trọng về website.

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

Đây là cặp thẻ mà bạn sẽ tiến hành viết nội dung vào, đó là cặp thẻ <body> </body>. Cặp thẻ này là để trình duyệt xác định đây là phần thân của website, nó sẽ chứa toàn bộ các nội dung siêu văn bản hoặc media mà bạn muốn nó hiển thị lên trang web của bạn. Phần này chúng ta sẽ làm việc nhiều hơn ở các bài sau.

Sau đó nếu bạn mở tài liệu HTML ở trên lên bằng trình duyệt thì chỉ sẽ thấy nó có mỗi đoạn nội dung giới thiệu nằm bên trong thẻ <body> </body> mà thôi.

Lời kết

Vậy là bây giờ bạn đã có thể gõ một bài giới thiệu cá nhân mình, với phân cách từng đoạn là cặp thẻ <p> </p> mà chúng ta đã tìm hiểu ở phần trước. Xây dựng nó thành một trang Giới thiệu cá nhân. Chỉ cần áp dụng cấu trúc tài liệu theo thứ tự mà mình đã giải thích và có ví dụ ở trên. Lưu file HTML này vào một thư mục myweb chẳng hạn. Để sau chúng ta tiếp tục phát triển nó.

Ở bài tiếp theo, chúng ta sẽ tìm hiểu qua một số thẻ quan trọng cần biết mà bạn nên khai báo trong cặp thẻ <head> </head> để khai báo thông tin một website.