[Học HTML] Bài 03: Cấu trúc cơ bản của một tập tin HTML

Trong bài này chúng ta sẽ cùng tìm hiểu xem một tập tin HTML có cấu trúc ra sao và vai trò của một số thành phần chính trong đó như thế nào nhé.

Cấu trúc cơ bản của tập tin HTML

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>

Để xem chi tiết nó hiển thị như thế nào trên trình duyệt thì bạn dùng CodePen nhé ! Và dưới đây là phần chú giải về vai trò của các thẻ ở trên:

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 bài tiếp theo, chúng ta sẽ đi tạo một file HTML đầy đủ và phổ biến hơn với một số thẻ thông dụng.

Bài học trước đó và tiếp theo

4.5/5 - (2 votes)




Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
Ưu đãi Hosting, VPS lên đến 80% và tặng bộ theme, plugin bản quyền hơn 1.600$XEM CHI TIẾT
+