You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. HTML
  4. Tổng hợp các thẻ tạo nên bộ khung HTML bạn cần nắm thật chắc

Tổng hợp các thẻ tạo nên bộ khung HTML bạn cần nắm thật chắc

Hôm nay chúng ta sẽ tìm hiểu thêm về những thẻ đã tạo nên bộ khung cơ bản trong HTML. Lần trước mình đã hướng dẫn các bạn cấu trúc của bộ khung. Hôm nay sẽ hướng dẫn các bạn bộ khung đó có những thẻ nào.

Xem thêm bài viết

Khi đọc đến bài này, các bạn chỉ mới đi được khoảng 2/10 của chặng đường chinh phục HTML. Sẽ còn rất nhiều cung đường cần bạn vượt qua để đi đến chặng đường cuối cùng của HTML. Hôm nay, mình sẽ giới thiệu cho các bạn những thẻ sắp tới chúng ta sẽ dùng để viết thành bộ khung của HTML.

Bộ khung HTML?

Đây là tên mình gọi để dễ hiểu hơn. Tên chính thức của bộ khung này là cấu trúc một trang HTML. Cấu trúc này gồm các thẻ HTML cơ bản để tạo nên một trang tài liệu HTML hoàn chỉnh. Hiển nhiên bộ khung này chỉ dùng để định hình cho nội dung của trang web là chính. Chúng sẽ chứa những nội dung bạn cần cho một trang web.

Bạn sẽ thường thấy trên một trang web của một nhà hàng nào đó thường có nhiều mục khác nhau. Ví dụ như mục Giới thiệu, mục Thực Đơn, mục Liên Hệ, mục Đặt Bàn, mục Khuyến Mãi,…Mỗi mục như thế bạn sẽ phải viết bằng HTML ra từng file khác nhau. Sau đó dùng liên kết ở giao diện chính. Khi người dùng đến trang web của bạn và nhấn vào mục Thực Đơn thì giao diện chính sẽ chuyển qua trang Thực Đơn.

Muốn tạo ra một trang HTML bạn phải có bộ khung này. Bộ khung này quan trọng vô cùng. Không có em nó thì đúng là không thể làm được gì.

Các thẻ cần thiết để tạo nên bộ khung

Khai báo <doctype>

Bất kì một trang HTML nào đều có phần khai báo này. Phần khai báo này rất quan trọng. Nếu bạn không khai báo thì những thứ bạn viết ở dưới cũng không còn nhiều ý nghĩa nữa.

Đặc biệt, bạn mới chỉ học được một ít về HTML thì phải càng lưu ý hơn nữa. Không được quên thẻ này. Nếu quên thẻ này thì thật là tai hại. Trình duyệt dù là được viết ra vốn đã có một sự thông minh nhất định. Nhưng nếu bạn không khai báo dòng này thì đúng là có đến cả chục năm browser (trình duyệt) cũng không biết đây là trang HTML.

Thẻ <html>

Đây là thẻ mở đầu cho chuỗi thẻ sau này của HTML. Mọi thẻ khác đều nằm trong thẻ <html>. Thẻ HTML chính là điểm tạo ra cây cấu trúc HTML sau này. Cây cấu trúc này còn có tên gọi là cây cấu trúc HTML Element. Bạn có thể tưởng tượng thẻ HTML (<html>) giống như là một người cha có hai đứa con. Một người tên Head (<head>) và một người tên Body (<body>). Head là người thích chu du đây đó nên 365 ngày đều không thấy mặt ở nhà. Head đi du lịch lấy theo nhiều đồ vật. Mỗi đồ vật đều được Head đặt tên. Trong khi đó Body lại là người con của gia đình. Sáng đi làm, chiều về làm cơm, tối làm thêm, cuối tuần đi dạy thêm, dạy bơi. Nói chung Body chính là cái gì cũng thích ôm vào người. Thế mà Body lúc nào cũng khoẻ mạnh và không bệnh lấy một giây.

Tưởng tượng như thế thì bạn làm sao mà quên thẻ <html> được.

Thẻ <head>

Đây chính là thẻ con đầu tiên của thẻ <html>. Nếu như tiếp tục với câu chuyện đã kể ở trên thì Head là một người thích chu du đây đó. Head nhận làm người đỡ đầu cho nhiều đứa trẻ tại mỗi nơi mà Head đi qua. Thế nên Head có rất nhiều con đỡ đầu. Vì vậy mà sau này Head nhận một người con nuôi. Head có dẫn người con nuôi này về gặp những đứa con đỡ đầu và chúng trở thành anh em của nhau.

Câu chuyện này đang miêu tả mới quan hệ giữa các thẻ với nhau. Những đứa con đỡ đầu và con nuôi chính là Meta (<meta>), Title (<title>), Link(<link>),…Những thẻ này đều là con của Head.

Thẻ <body>

Đây là thẻ con thứ hai của thẻ  <html>. Chúng ta kể tiếp câu chuyện cuộc đời Body nhé!

Body là một người nghiện việc. Hầu như ngoài việc đi làm, về nhà làm cơm xong là lại chui vào phòng làm việc. Cuối tuần cũng chả thua gì ngày thường. Cuối tuần ngoài đi dạy thêm, dạy bơi, thi thoảng còn dạy nhạc. Buổi tối Chủ Nhật mới chịu nghỉ ngơi. Body là người được tin cậy trong công ty. Thế nên rất nhiều dự án lớn đều đến tay của Body . Những dự án này toàn là lắt léo và nhiều công đoạn. Thế nên chả trách anh làm hoài mà việc vẫn còn.

Trong câu chuyện này những dự án lớn tượng trưng cho các thẻ nằm bên trong thẻ Body. Bên trong những dự án này lại có quá nhiều bước nhỏ khác là tượng trưng cho những thẻ  khác nằm ở bên trong thẻ  “dự án”. Một “dự án” có thể có rất nhiều thẻ khác nữa.

Bạn đã nhớ hết các thẻ chưa? Khá dễ nhớ. Nếu bạn không tưởng tượng được một câu chuyện hài hước để nhớ về những thẻ này thì bạn có thể tưởng tượng bằng bản đồ Mind Map với nhân vật trung tâm là HTML. Bài viết này đến đây là hết. Đây là bà viết tiền đề cho việc bạn chuẩn bị viết bộ khung HTML. Bài viết sau bạn sẽ viết những dòng code HTML đầu tiên. Thế nên bạn cố gắng nhớ những thẻ này nhé!




Đặt câu hỏi cho bài viết này ?