Bài 3. Xây dựng phần đầu trang: header và logo
Sau khi đã phác thảo cấu trúc website ở bài trước, hôm nay em bắt tay dựng phần đầu trang (header) cho dự án: nơi đặt logo và tiêu đề chính để mọi người vừa mở trang đã nhận ra ngay đây là website của ai, về chủ đề gì.
- Chân trời sáng tạoTin học 12 (Tin học ứng dụng) - Bài E5. Nhúng mã và tạo băng chuyền hình ảnhtr. 78
- Chân trời sáng tạoTin học 12 (Tin học ứng dụng) - Bài E6. Chèn YouTube, Calendar, Drive và Collapsible grouptr. 84
- Kết nối tri thứcTin học 12 (Tin học ứng dụng) - Bài 24. Xây dựng phần đầu trang webtr. 134
Bắt đầu bằng một hình dung
Câu lạc bộ Sách của lớp 12A giao cho Lan làm một website nhỏ để giới thiệu hoạt động và danh sách sách hay. Lan đã có sẵn bản phác thảo trên giấy: trên cùng là một dải màu xanh chứa hình cuốn sách nhỏ bên trái và dòng chữ lớn 'Câu lạc bộ Sách 12A' ở giữa.
Lan mở tệp trang chủ ra và bắt đầu gõ nội dung, nhưng bạn phân vân: dòng tiêu đề với hình cuốn sách nên đặt ở đâu trong tệp cho gọn gàng? Nếu cứ để lẫn với phần giới thiệu ở giữa trang thì sau này sửa rất rối, mà mỗi trang lại làm một kiểu thì cả website trông chắp vá.
Bạn Khoa ngồi cạnh nhắc: 'Cái dải trên cùng đó gọi là phần đầu trang. Cậu gom nó vào một khu riêng, làm thật đẹp một lần, rồi trang nào cũng dùng y hệt thì website mới nhất quán.' Lan gật gù: hoá ra phần nhìn thì nhỏ nhưng lại là bộ mặt của cả trang.
Nội dung bài học
- 1) Phần đầu trang là gì và gồm những gì
- 2) Chèn logo và chỉnh kích thước cho vừa
- 3) Trang trí dải đầu trang bằng CSS
- 4) Giữ phần đầu nhất quán trên mọi trang
Tóm tắt lý thuyết cần nhớ
- Phần đầu trang gói trong thẻ
header, gồm logo và tiêu đề chính, là bộ mặt nhận diện của website - Logo là ảnh: chèn bằng thẻ ảnh có mô tả
alt, chỉnh kích thước bằng cách cố định chiều cao để không méo - Dùng lại CSS để tô màu nền, chọn màu chữ tương phản và canh giữa logo với tiêu đề bằng bố cục linh hoạt
- Giữ phần đầu nhất quán trên mọi trang: cùng cấu trúc, dùng chung một tệp CSS và đường dẫn logo cố định
Thuật ngữ tiếng Anh trong bài
| Tiếng Anh | Đọc là | Nghĩa |
|---|---|---|
| img | im-mít | thẻ chèn ảnh Dùng để đưa một tấm ảnh vào trang web. |
| alt | ót | chữ mô tả ảnh Là dòng chữ mô tả tấm ảnh, sẽ hiện ra khi ảnh bị lỗi không tải được. |
| background-color | béc-grao cơ-lơ | màu nền Thuộc tính CSS để tô màu nền phía sau chữ và hình. |
| height | hai | chiều cao Thuộc tính CSS để đặt chiều cao cho một khối. |
| header | HÉT-đơ | phần đầu trang Dải trên cùng của trang web, thường chứa logo và tiêu đề chính. |
| logo | LÔ-gô | hình nhận diện Hình đại diện cho trang hoặc tổ chức, thường đặt bên trái phần đầu trang. |
Câu hỏi trắc nghiệm có đáp án
Mấy câu mẫu để bạn tự kiểm tra ngay. Trong ứng dụng, bài này có đủ 22 câu, chấm điểm tự động và giải thích từng câu sai.
- header
- footer
- table
- form
- Để ảnh tự động phóng to khi rê chuột vào, nhờ phần mô tả hiện kèm theo ảnh
- Để logo luôn nằm chính giữa dải đầu trang mà không phải viết thêm CSS
- Để giúp người khiếm thị nghe được và hiện ra khi ảnh không tải được
- Để giảm dung lượng tệp ảnh logo, nhờ đó trang tải nhanh hơn hẳn
- Ép cả chiều cao và chiều rộng bằng hai số bất kì cho vừa mắt
- Đặt một chiều cao cố định và để chiều rộng tự co theo
- Giữ nguyên kích thước gốc và để trình duyệt tự cắt bớt
- Xoá bớt màu trong ảnh để ảnh nhỏ lại
- a)Phần đầu trang thường gồm logo và tiêu đề chính, đóng vai trò nhận diện website.Đúng
- b)Thẻ header tự nó vẽ ra màu nền và khung viền cho phần đầu trang.Sai
- c)Nên giữ phần đầu ngắn gọn, tránh nhồi quá nhiều chữ và ảnh.Đúng
- d)Phần đầu trang bắt buộc phải đặt ở cuối tệp, sau nội dung chính.Sai
- (a) Đúng - logo và tiêu đề chính là bộ mặt nhận diện của website.
- (b) Sai - header chỉ là chiếc hộp có ý nghĩa, màu nền và viền phải do CSS tạo ra.
- (c) Đúng - phần đầu gọn gàng giúp người xem không rối mắt và không đẩy nội dung xuống quá thấp.
- (d) Sai - phần đầu nằm trên cùng, xuất hiện đầu tiên chứ không đặt ở cuối tệp.
Thử ngay: minh hoạ từng bước
Bấm từng bước để tự xem cơ chế hoạt động, hoặc bấm “Tự chạy” cho nó tiến mỗi giây một lần. Đổi được dữ liệu đầu vào - không cần đăng nhập.
Học trọn bài này trong ứng dụng
Bài giảng đầy đủ, 22 câu luyện tập chấm tự động, thi thử đúng cấu trúc đề tốt nghiệp (24 trắc nghiệm + 4 Đúng/Sai), bài thực hành máy tự chấm và gia sư AI giải thích chỗ sai.
Phần học miễn phí, không cần tạo tài khoản.
Bài liên quan - Ứng dụng tin học & Thiết kế web
Cùng mạch kiến thức với bài này, học nối tiếp cho chắc phần lí thuyết.