Bài 02: Cấu trúc cơ bản của một tập tin HTML


Cấu trúc cơ bản

Một tập tin HTML được bắt đầu bằng thẻ <html> và kết thúc bởi </html>. Bên trong cặp thẻ <html>...</html> sẽ chứa nhiều cặp thẻ con. Mỗi cặp thẻ con thường bắt đầu với dạng <tên-thẻ> và kết thúc dạng </tên-thẻ> tương tự như cặp thẻ <html>.

<!DOCTYPE html>
<html>
   <head>
      <title>Tiêu đề của trang web </title>
      <meta charset="UTF-8" />
   </head>
   <body>
      <h1> Tên tiêu đề bài viết </h1>
      <p> Nội dung của đoạn văn thứ nhất </p>
      <p> Nội dung của đoạn văn thứ hai </p>
   </body>
</html>

1. Thẻ <!DOCTYPE>

Trong dòng đầu tiên các bạn thấy rằng có một thẻ khai báo tập tin <!DOCTYPE html> . Ý nghĩa của nó là khai báo với trình duyệt rằng: “Đây là một tập tin HTML5” Và từ nay trở về sau các bạn không cần quan tâm gì thêm ở đoạn này. Cứ vào là khai báo ngay <!DOCTYPE html> là được, ngay cả khi phiên bản HTML chúng ta sử dụng không phải là HTML5.

2. Cặp thẻ <html> </html>

Cặp thẻ <html> </html> là 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.

3. Thẻ <head>

Bên trong cặp thẻ <head> </head> là khu vực chứa tiêu đề của trang web, các tập tin hỗ trợ và các khai báo,…

Thường là các thông tin được khai báo trong đây sẽ không hiển thị trực tiếp trên web nhưng nó luôn giữ nhiệm vụ chứa các thông tin quan trọng về website.

4. Thẻ <body>

Bên trong cặp thẻ <body> </body> chứa toàn bộ các nội dung hiển thị lên trang web. Bạn có thể xem lại phần thực hành ở trên, bên cột kết quả, sẽ thấy rằng trên trang web nó chỉ hiển thị những gì có trong cặp thẻ <body> thôi.

5. Bổ sung

Có khá nhiều các cặp thẻ, thuộc tính cũng như ý nghĩa của chúng. Vì thế chúng ta sẽ dần tìm hiểu ở các bài sau. Ở đây mình sẽ chú giải về ý nghĩa của một số thẻ đã viết trong tập tin HTML ở trên.

Đoạn <meta charset="UTF-8"> có nhiệm vụ khai báo về mã ký tự được sử dụng bên trong tập tin HTML. 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ữ, tất nhiên trong đó có tiếng Việt.
Thẻ tiêu đề <H1> cái này là viết tắc của từ Heading (tiêu đề). HTML hỗ trợ 6 thẻ Heading (H1, H2, H3, H4, H5, H6) để phân cấp tiêu đề. Song hầu như chúng ta chỉ sử dụng đến H4 thôi.
Thẻ <p> chứa nội dung của một đoạn văn, cái này là viết tắc của từ Paragraph (đoạn văn). Để xem nó như thế nào thì các bạn copy đoạn HTML sau và dán vào cái công cụ mình đã đề xuất ởn trên nhé !

<html>
   <head>
      <title>Tiêu đề của trang web </title>
      <meta charset="UTF-8" />
   </head>
   <body>
      <h1> Chương I </h1>
      <h2> Bài 01 </h2>
      <h3> A. Các nội dung chính </h3>
      <h4> 1. Nội dung thứ nhất </h4>
      <h4> 2. Nội dung thứ hai </h4>
      <p> Đoạn văn thứ nhất </p>
      <p> Đoạn văn thứ hai </p>
   </body>
</html>

Nội dung bài này rất quan trọng, các bạn chỉ cần nắm được cấu trúc cơ bản của một tập tin HTML và hiểu được ý nghĩa / vai trò của một số thẻ như: thẻ khai báo <meta>, thẻ tiêu đề <H1, H2,...H6>, thẻ định nghĩa cho một đoạn văn bản <p>

trong HTML Cơ bản
Vui lòng đánh giá chất lượng bài viết

Chào mừng bạn đến Cùng Học Web

Fill the forms bellow to register

Lấy lại mật khẩu

Vui lòng nhập email hoặc tên đăng nhập vào ô bên dưới.