Phần đầu Trang Web Header | Hướng Dẫn Học

Trang chủ » Code Header đẹp » Phần đầu Trang Web Header | Hướng Dẫn Học

Có thể bạn quan tâm

Phần đầu trang web : header
  • 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

header

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

header

  • 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ẻ <img />, nhưng do logo là phần quan trọng nhất của trang, nên ta sử dụng thẻ <h1> bao ngoài thẻ <img />.
    • Domain ta thấy cần bao bên ngoài bằng thẻ <p> là được.

<h1><img src="images/img_logo.gif" alt="" /></h1> <p>www.hocwebchuan.com</p>

  • 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ẻ <ul><li>.
    • 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ẻ <ul><li>.

<ul> <li><a href="#"><img src="images/btn_name01.gif" alt="" /></a></li> <li><a href="#"><img src="images/btn_name02.gif" alt="" /></a></li> </ul> <ul> <li><a href="#"link 01</a></li> <li><a href="#"link 02</a></li> <li><a href="#"link 03</a></li> <li><a href="#"link 04</a></li> </ul>

Để tiện cho việc điều khiển các thẻ, ta sử dụng 2 thẻ <div> 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:

<div id="header"> <div class="hLeft"> <h1><img src="images/img_logo.gif" alt="" /></h1> <p>www.hocwebchuan.com</p> <!-- / class hLeft --></div> <div class="hRight"> <ul> <li><a href="#"><img src="images/btn_name01.gif" alt="" /></a></li> <li><a href="#"><img src="images/btn_name02.gif" alt="" /></a></li> </ul> <ul> <li><a href="#">link 01</a></li> <li><a href="#">link 02</a></li> <li><a href="#">link 03</a></li> <li><a href="#">link 04</a></li> </ul> <!-- / class hRight --></div> <!-- / id header --></div>

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:

<!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>Tiêu đề trang web</title> </head> <body> <div id="layout"> <div id="header"> <div class="hLeft"> <h1><img src="images/img_logo.gif" alt="" /></h1> <p>www.hocwebchuan.com</p> <!-- / class hLeft --></div> <div class="hRight"> <ul> <li><a href="#"><img src="images/btn_name01.gif" alt="" /></a></li> <li><a href="#"><img src="images/btn_name02.gif" alt="" /></a></li> </ul> <ul> <li><a href="#">link 01</a></li> <li><a href="#">link 02</a></li> <li><a href="#">link 03</a></li> <li><a href="#">link 04</a></li> </ul> <!-- / class hRight --></div> <!-- / id header --></div> <div id="gNav"> Viết nội dung phần global navigation ở đây <!-- / id gNav --></div> <div id="pageBody"> <div id="content"> Viết nội dung phần content ở đây <!-- / id content --></div> <div id="sidebar"> Viết nội dung phần sidebar ở đây <!-- / id sidebar --></div> <!-- / id pageBody --></div> <div id="footer"> Viết nội dung phần footer ở đây <!-- / id footer --></div> <!-- / id layout --></div> </body> </html>

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

HỌC WEB CHUẨN

HƯỚNG DẪN HỌC

Hướng dẫn học XHTML & HTML5

  • Hướng dẫn học XHTML & HTML5
  • Giới thiệu về HTML
  • Cấu trúc cơ bản của HTML

  • Nhóm các thẻ block

    • <h1> - <h2> - <h3> - <h4> - <h5> - <h6>
    • <p>
    • <div>
    • <dl> - <dt> - <dd>
    • <ul> - <ol> - <li>
    • <nav>
    • <header>
    • <section>
    • <article>
    • <aside>
    • <footer>
    • <figure> - <figcaption>

  • Nhóm các thẻ inline

    • <a>
    • <img />
    • <br />
    • <span>
    • <strong>
    • <em>
  • Xem thêm ví dụ về HTML
  • Bài tập HTML & HTML5 cơ bản
  • Bài tập HTML & HTML5 nâng cao

Hướng dẫn học XHTML & HTML5

Bài tập HTML & HTML5

Hướng dẫn học CSS

Hướng dẫn học CSS3

Bài tập CSS & CSS3

Hướng dẫn học SCSS

Hướng dẫn học Responsive

Hướng dẫn học jQuery

Bài tập jQuery

Hướng dẫn học ES6

Hướng dẫn học React.js

Hướng dẫn học Webpack

Hướng dẫn XAMPP

Hướng dẫn học PHP

Hướng dẫn học Laravel

Hướng dẫn học htaccess

THAM KHẢO

  • Tham khảo
  • Tham khảo HTML4/XHTML
  • Tham khảo HTML5
  • Tham khảo CSS
  • Tham khảo CSS3
  • Tham khảo jQuery

CHUYÊN ĐỀ

  • Chuyên đề
  • Chuyên đề HTML/CSS
  • Chuyên đề HTML5/CSS3
  • Chuyên đề jQuery/JS
  • jQuery/JS plugin

GÓP Ý - LIÊN HỆ

  • CÔNG CỤ TẠO CSS3CSS3 GENERATOR
  • BỘ CÔNG CỤGENERATOR TOOLS
  • CÔNG CỤ HỖ TRỢWEB TOOLS
  • CÔNG CỤ TẠO RANDOMRANDOM GENERATOR
  • CÔNG CỤ KIỂM TRA RESPONSIVE TEST
  • CHIA SẺ HAYWEB & TOOLS
  • Follow us on hocwebchuan.com
  • Short URL
  • Rabbie theme

Từ khóa » Code Header đẹp