Code header HTML đẹp

Phần đầu: header

Phân tích ta sẽ thấy phần header này gồm có 2 phần:

• Phần bên trái:

ta tạm gọi là hLeft (header left), phần này chứa logo và domain trang web

• Logo sử dụng image nên ta dùng thẻ
  
  

  www.hocwebchuan.com

  Phần bên phải: ta tạm gọi là hRight (header right), phần này chứa 2 button và một danh sách chứa link

  • 2 button này có thể coi như một danh sách không có thứ tự do đó ta có thể sử dụng thẻ
    • .
    • Danh sách chứa link cũng thuộc dạng danh sách không có thứ tự vì vậy ta cũng có thể sử dụng thẻ
      • .
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      

      Để tiện cho việc điều khiển các thẻ, ta sử dụng 2 thẻ

      bao bên ngoài phần bên trái và bên phải, vậy phần header ta có thể code như sau:

      
      

      
      

      
      

      www.hocwebchuan.com

      
      

      
      
      

      
      

      
      
      
      
      
      

      
      
      

      
      
      • link 01
      
      
      • link 02
      
      
      • link 03
      
      
      • link 04
      
      

      
      

      
      

      Kết nối phần header này vào phần cấu trúc cơ bản ta có được cấu trúc sau:

      
      
      
      
      
      
      
      
      

      
      

      
      

      
      

      
      

      www.hocwebchuan.com

      
      

      
      
      

      
      

      
      
      
      
      
      

      
      

      
      
      • link 01
      
      
      • link 02
      
      
      • link 03
      
      
      • link 04
      
      

      
      

      
      

      
      
      

      
      Viết nội dung phần global navigation ở đây
      

      
      
      

      
      

      
      Viết nội dung phần content ở đây
      

      
      
      

      
      Viết nội dung phần sidebar ở đây
      

      
      

      
      
      

      
      Viết nội dung phần footer ở đây
      

      
      

      
      
      

      Vậy là ta đã hoàn thành xong phần header, click để xem trình duyệt chạy như thế nào.

      Kết hợp các thẻ

      Phần : Global navigation

      Video liên quan

      Đọc tiếp