Hướng dẫn header html code - mã html tiêu đề

  • Trang chủ
  • Hướng dẫn học
  • Hướng dẫn học HTML/HTML5
  • Phần đầu trang web : header

Phần đầu: header

Hướng dẫn header html code - mã html tiêu đề

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

Hướng dẫn header html code - mã html tiêu đề

  • 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 webhLeft (header left), phần này chứa logo và domain trang web

    • Logo sử dụng image nên ta dùng thẻ , nhưng do logo là phần quan trọng nhất của trang, nên ta sử dụng thẻ bao ngoài thẻ .
    • Domain ta thấy cần bao bên ngoài bằng thẻ là được.

www.hocwebchuan.com

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 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ẻ .


  • Hướng dẫn header html code - mã html tiêu đề

  • Hướng dẫn header html code - mã html tiêu đề

Để 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

  • 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:





    Tiêu đề trang web




    www.hocwebchuan.com


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

    link 01 link 02 link 03 link 04


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

    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:
    Viết nội dung phần sidebar ở đây


    www.hocwebchuan.com
    Viết nội dung phần footer ở đây



    link 01 link 02 link 03 link 04

    1) Giới thiệu "các thành phần cơ bản của một trang web"

    - Thông thường, một trang web thuộc loại "cơ bản nhất" sẽ có ba thành phần: header, main, footer.

    - Trong đó:

    • Header là phần đầu trang, nó chủ yếu chứa một vài thông tin, tiêu đề, logo, liên hệ, ....
    • Main là phần thân trang, nó dùng để xác định phần nội dung chính của trang web.
    • Footer là phần chân trang, nó chứa thông tin bản quyền, liên hệ, tác giả, ....

    - Ví dụ: Bên dưới là một mẫu trang web thuộc dạng cơ bản nhất.

    WEB CƠ BẢN .VN

    Hướng dẫn học lập trình web từ cơ bản đến nâng cao

    HỌC LÀM WEBSITE BẮT ĐẦU TỪ ĐÂU?

    - Có thể bạn không phải là một lập trình viên nhưng lại rất thích làm website. Bạn muốn học làm, nhưng không biết phải bắt đầu từ đâu và liệu mình có thể học được hay không !?

    - Chúng tôi xin khẳng định với bạn rằng: "Bạn hoàn toàn có thể học và làm được website" nếu kiên trì mỗi ngày dành ra một vài giờ để học. Tùy vào mức độ chăm chỉ, tuy nhiên tối đa không quá sáu tháng bạn sẽ có thể bắt đầu tự làm được website.

    - Ngoài ra, webcoban.vn hân hạnh giới thiệu đến bạn loạt tài liệu Hướng dẫn học lập trình web đã được biên soạn kỹ theo trình tự từ cơ bản đến nâng cao kèm theo một hướng đi đúng đắn đối với người mới bắt đầu học làm website như sau:

    • Trước tiên bạn phải học ngôn ngữ HTML
    • Sau khi đã tìm hiểu xong HTML thì học tiếp CSS
    • Và kế đến là JavaScript sau khi học xong HTML & CSS
    • Tiếp theo là hệ quản trị cơ sở dữ liệu MySQL
    • Và cuối cùng là ngôn ngữ lập trình PHP

    - Sau khi học xong năm ngôn ngữ trên, đồng nghĩa với việc bạn đã có thể bắt đầu tự làm được website. Ngoài ra bạn cũng có thể học thêm các ngôn ngữ khác như jQuery, Bootstrap, Nodejs, Codeigniter,.... để giúp tăng tốc độ phát triển website.

    ©2016 Web cơ bản All Rights Reserved

    2) Thẻ trong HTML

    - Thẻ xác định phần đầu của trang web, nó dùng để làm thùng chứa cho các phần tử là tiêu đề, liên kết, hình ảnh logo, ....

    xác định phần đầu của trang web, nó dùng để làm thùng chứa cho các phần tử là tiêu đề, liên kết, hình ảnh logo, ....


    WEB CƠ BẢN .VN

    Hướng dẫn học lập trình web từ cơ bản đến nâng cao

    Xem ví dụ

    3) Định dạng CSS mặc định

    - Hầu hết các trình duyệt sẽ hiển thị phần tử với định dạng CSS như sau:

    với định dạng CSS như sau:

    header { 
        display: block;
    }