Xem này: mọi website đều có các phần giống nhau
Nhìn bất kỳ website lớn nào: phía trên là header với tên và menu, giữa là nội dung, phía dưới là footer với thông tin nhỏ. HTML có thẻ riêng cho các phần này:
<body>
<header>
<h1>Website Name</h1>
<nav>
<a href="index.html">Home</a>
<a href="second-page.html">Second Page</a>
</nav>
</header>
<main>
<h2>Here's the main content</h2>
<p>Everything the page is about.</p>
</main>
<footer>
<p>Made by Jake, 2026</p>
</footer>
</body><header>– phần đầu: tên website và menu. Giống nhau trên mọi trang.<nav>– điều hướng, tức menu với các liên kết.<main>– nội dung chính, khác nhau trên mỗi trang.<footer>– chân trang: ai làm site, liên hệ, năm.
Về mặt hình ảnh, hiện chưa thay đổi nhiều – các thẻ này không hiện ra. Vậy tại sao viết chúng? Vì chúng mang lại trật tự cho code: trình duyệt, công cụ tìm kiếm và trình đọc màn hình dùng chúng để biết đâu là menu, đâu là nội dung. Và hay nhất – ở các bài sau chúng ta sẽ tô màu chúng, menu sẽ trông như menu thật.
Lượt của bạn 💪
-
Trên
index.html, bọc nội dung hiện có trong các phần:<header>phía trên với<h1>và<nav>(liên kết đến cả hai trang),<main>giữa với phần còn lại, và<footer>phía dưới. -
Làm tương tự trên trang thứ hai. Header và footer phải giống hệt trên cả hai trang – chỉ cần sao chép.
-
Lưu, làm mới, bấm quanh lại: menu có hoạt động từ cả hai trang không?
🏫 Website trường – giải pháp (index.html)
<!doctype html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Riverside Elementary</title>
</head>
<body>
<header>
<h1>Riverside Elementary School</h1>
<nav>
<a href="index.html">Home</a>
<a href="lunch-menu.html">Lunch Menu</a>
</nav>
</header>
<main>
<img src="images/school.jpg" alt="Our school building">
<h2>About Our School</h2>
<p>Our school has stood in Riverside for 120 years.</p>
<h2>Clubs</h2>
<ul>
<li>floorball</li>
<li>ceramics</li>
<li>coding</li>
</ul>
</main>
<footer>
<p>Made by the 4th grade class, 2026</p>
</footer>
</body>
</html>🙋 Website cá nhân – giải pháp (index.html)
<!doctype html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Jake Miller</title>
</head>
<body>
<header>
<h1>Jake Miller</h1>
<nav>
<a href="index.html">Home</a>
<a href="about-me.html">More About Me</a>
</nav>
</header>
<main>
<img src="images/me.jpg" alt="Me with a soccer ball">
<h2>What I Like</h2>
<p>Soccer, Minecraft, and building websites.</p>
</main>
<footer>
<p>Made by Jake, 2026</p>
</footer>
</body>
</html>🌍 Nhật ký du lịch – giải pháp (index.html)
<!doctype html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Where We've Been</title>
</head>
<body>
<header>
<h1>Where We've Been 🌍</h1>
<nav>
<a href="index.html">Home</a>
<a href="trips.html">All Trips</a>
</nav>
</header>
<main>
<h2>Last Trip: The Mountains</h2>
<img src="images/mountains.jpg" alt="View from the summit">
<p>Three days of walking, one wrong turn, and a hundred wild berries.</p>
</main>
<footer>
<p>Journal kept by the Miller family, 2026</p>
</footer>
</body>
</html>⚽ Website câu lạc bộ – giải pháp (index.html)
<!doctype html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Riverside Eagles FC</title>
</head>
<body>
<header>
<h1>Riverside Eagles FC</h1>
<nav>
<a href="index.html">Home</a>
<a href="roster.html">Roster</a>
</nav>
</header>
<main>
<img src="images/team.jpg" alt="Team photo">
<h2>Recent Results</h2>
<ol>
<li>Eagles – Hawks 3 : 1</li>
<li>Falcons – Eagles 2 : 2</li>
</ol>
</main>
<footer>
<p>Riverside Eagles FC · training Tue & Thu at 5:00 PM</p>
</footer>
</body>
</html>Tự kiểm tra: Cả hai trang có cùng tên và menu phía trên, footer phía dưới, và menu chuyển giữa các trang. Cấu trúc xong – giờ ta có thể đi sâu vào giao diện!
Điều cần nhớ từ bài này
- Trang có các phần:
<header>(đầu trang có menu),<main>(nội dung),<footer>(chân trang). - Menu là
<nav>với liên kết, giống nhau trên mọi trang. - Thứ tự trong code = nền tảng để xây giao diện lên trên.
© 2026 Ing. Martin Polak / AlgoRhino · Điều khoản sử dụng nội dung