HTML cơ bản – Bài 08: Ghép trang chủ và trang bài viết hoàn chỉnh
Bạn sẽ kết nối những phần đã học thành hai trang thật của Góc học web. Mỗi quyết định chọn thẻ gắn với nội dung cụ thể: menu, danh sách bài, tên bài, ngày đăng và các mục trong bài.
Lộ trình này học qua website “Góc học web”: trang chủ, trang bài viết và trang liên hệ. Mỗi bài giải quyết một việc cụ thể. Các bài về từng thẻ là tài liệu tra cứu, không phải danh sách bắt buộc học thuộc.
Mục lục
Trước khi ghép, chốt nội dung của hai trang
Trang chủ giúp người đọc hiểu website nói về gì và chọn bài để đọc. Trang bài viết tập trung vào một nội dung, có tên rõ ràng, ngày đăng và các mục. Hai trang chia sẻ header, menu và footer, nhưng title và h1 phải phản ánh nội dung riêng của từng trang.
Bộ ví dụ tải về có index.html và bai-viet.html để bạn mở và so sánh. Tại thời điểm này không cần JavaScript, không cần thư viện giao diện và không cần công cụ đóng gói.
Lắp trang chủ từ các thành phần nhỏ
Dùng header chứa tên website và nav. Trong main, h1 giới thiệu chủ đề chính. section Bài học mới chứa một article giới thiệu bài; liên kết trong h3 dẫn tới bai-viet.html. Cuối cùng footer cung cấp thông tin kết thúc.
Bài giới thiệu ngắn trên trang chủ không nên sao chép toàn bộ bài dài. Nó giúp người đọc quyết định có mở bài hay không. Không bọc một liên kết chứa các liên kết khác vì a không được lồng vào a.
Trang bài viết cần gì khác?
Trang bài viết dùng article cho nội dung độc lập và header của bài cho tiêu đề cùng thông tin ngày đăng. time với datetime cung cấp giá trị có cấu trúc; văn bản nhìn thấy có thể theo cách đọc quen thuộc. Các mục h2 tổ chức nội dung thay vì tô đậm một đoạn bằng strong để giả làm heading.
Một bài dài có thể có mục lục nội bộ bằng liên kết fragment. Không cần thêm mục lục chỉ để tăng số thành phần nếu bài rất ngắn. Luôn kiểm tra ID của từng heading khi tạo liên kết.
Kiểm tra luồng đi của người đọc
Từ trang chủ, mở bài; từ menu bài viết, quay về trang chủ và mở liên hệ. Nếu chưa có lien-he.html, tạo tạm trang với heading và một đoạn giải thích để tránh liên kết hỏng; bài 10 sẽ thêm form. Menu ở các trang phải dẫn tới cùng những địa chỉ phù hợp.
Hãy nhấn Tab để đi qua các liên kết. Trình duyệt có đánh dấu focus; không xóa đường viền focus chỉ vì thấy không đẹp. Một người không dùng chuột vẫn phải biết mình đang ở đâu.
Đánh giá đúng kết quả ở giai đoạn HTML
Bạn đã có trang với dàn ý, đường dẫn và vai trò nội dung rõ ràng. Trình duyệt sẽ dùng kiểu mặc định nên trang trông mộc. Khoảng cách, màu và bố cục là bước CSS tiếp theo, không phải lý do để thêm thẻ br hàng loạt hoặc dùng bảng làm khung trang.
Sau khi thử mã, hãy viết lại bằng nội dung khác của chính bạn. Nếu vẫn chọn được phần tử mà không nhìn đáp án, bạn đang học cách tổ chức trang, thay vì chỉ nhớ vị trí của những dòng mã.
Ví dụ để tự chạy
Tạo một tệp HTML để thử đoạn mã sau. Nếu đây là đoạn trích trong body, hãy đặt nó vào bộ khung tài liệu đã học ở bài 3. Bộ mã tải về có sẵn ví dụ đầy đủ của bài này.
<header><p>Góc học web</p><nav aria-label="Điều hướng chính"><a href="index.html">Trang chủ</a> · <a href="bai-viet.html">Bài viết</a> · <a href="lien-he.html">Liên hệ</a></nav></header>
<main>
<h1>Học web từng bước</h1><p>Bắt đầu với HTML, sau đó học CSS và JavaScript.</p>
<section><h2>Bài học mới</h2>
<article><h3><a href="bai-viet.html">HTML là nền tảng của trang web</a></h3>
<p>Học cách tổ chức nội dung trước khi thêm màu sắc.</p></article>
</section>
<p><a href="lien-he.html">Gửi câu hỏi về lộ trình</a></p>
</main>
<footer><p>Góc học web — Ví dụ học HTML của Học Viết Code.</p></footer>Kết quả hiển thị
Ví dụ mở ra trang chủ có menu và một mục bài viết. Các tệp liên quan trong cùng thư mục giúp bạn đi qua lại giữa hai trang; mở riêng hoặc tải bộ mã để kiểm tra đầy đủ.
Mở ví dụ bài 08 trong tab riêng · Tải bộ ví dụ 16 bài và website hoàn chỉnh
Lỗi thường gặp và cách sửa
- Mọi trang đều có title Trang chủ: đặt title riêng cho trang bài và liên hệ.
- Lồng toàn bộ bài vào p: dùng article và các đoạn, heading bên trong.
- Thêm CSS phức tạp rồi không hiểu cấu trúc: kiểm tra bản HTML chưa tạo kiểu trước.
Tự kiểm tra
- Thêm một mục giới thiệu bài thứ hai trên trang chủ mà không lồng liên kết.
- Đọc riêng danh sách heading của mỗi trang và kiểm tra dàn ý.
Tra cứu khi cần
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
