1. Kiến thức trọng tâm
Phần đầu trang web (header) là vùng nằm ở phía trên cùng của trang, xuất hiện trên mọi trang con và là nơi đầu tiên người xem nhìn thấy. Một phần đầu trang thường gồm: logo hoặc tên trang web, khẩu hiệu, thanh điều hướng và ô tìm kiếm. Phần đầu trang cần ngắn gọn, rõ ràng và nhất quán trên toàn bộ trang web.
Về mặt kĩ thuật, phần đầu trang thường được xây dựng bằng thẻ <header> trong HTML, kết hợp CSS để định dạng màu sắc, phông chữ và bố cục. Logo nên đặt ở góc trái, liên kết về Trang chủ khi người xem nhấp vào. Tên trang web cần nổi bật, dễ đọc. Thanh điều hướng liệt kê các trang chính, giúp người xem di chuyển nhanh giữa các trang. Nếu trang web có nhiều nội dung, có thể thêm ô tìm kiếm để người xem tìm nhanh thông tin cần thiết.
Khi xây dựng phần đầu trang, cần chú ý: màu sắc hài hòa với tổng thể trang, chữ đủ lớn để đọc dễ, phần đầu trang hiển thị tốt trên cả máy tính và điện thoại. Nên kiểm tra trên nhiều kích thước màn hình khác nhau.
2. Ví dụ minh họa
Tình huống: Xây dựng phần đầu trang cho trang web của thư viện trường.
Giải pháp:
<header>
<img src="images/logo.png" alt="Logo thư viện">
<h1>Thư viện Trường THPT Hoa Sen</h1>
<p>Nơi tri thức hội tụ</p>
<nav>
<a href="index.html">Trang chủ</a>
<a href="sach.html">Sách</a>
<a href="lien-he.html">Liên hệ</a>
</nav>
</header>
Kết luận: Đoạn mã trên tạo ra phần đầu trang gồm logo, tên thư viện, khẩu hiệu và thanh điều hướng. Dùng CSS để căn chỉnh bố cục và màu sắc cho đẹp mắt.
3. Ghi nhớ
- Phần đầu trang gồm logo, tên trang, khẩu hiệu, thanh điều hướng.
- Dùng thẻ
<header>và CSS để xây dựng phần đầu trang. - Logo thường đặt ở góc trái và liên kết về Trang chủ.
- Đảm bảo phần đầu trang hiển thị tốt trên mọi kích thước màn hình.