Xây dựng một trang web tĩnh đơn giản
Sau khi học xong tất cả các thẻ HTML quan trọng, giờ là lúc bạn thực hành áp dụng những kiến thức đó để tạo ra một trang web tĩnh hoàn chỉnh. Trong bài học này, bạn sẽ xây dựng một trang web cá nhân đơn giản có nhiều trang liên kết với nhau. Qua đó, bạn sẽ hiểu được cách tổ chức cấu trúc thư mục, tạo trang HTML, và liên kết các trang lại với nhau.
1. Xây dựng một trang web tĩnh cơ bản
1.1. Tạo file HTML cơ bản và cấu trúc thư mục dự án
Một dự án web cơ bản cần được tổ chức gọn gàng. Cấu trúc thư mục mẫu như sau:
/website-tinh/
│── index.html (Trang chính)
│── about.html (Trang giới thiệu)
│── contact.html (Trang liên hệ)
│── assets/ (Chứa hình ảnh, âm thanh, video, v.v.)
│── css/ (Chứa file CSS - nếu có)
│── js/ (Chứa file JavaScript - nếu có)
Bước 1: Mở trình soạn thảo code (Visual Studio Code hoặc Notepad++).
Bước 2: Tạo thư mục dự án và các file cần thiết.
1.2. Viết mã HTML cơ bản
Tạo file index.html với cấu trúc HTML chuẩn:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Trang web tĩnh đơn giản với HTML">
<title>Trang chủ</title>
</head>
<body>
<header>
<h1>Chào mừng đến với Website của tôi</h1>
<nav>
<ul>
<li><a href="index.html">Trang chủ</a></li>
<li><a href="about.html">Giới thiệu</a></li>
<li><a href="contact.html">Liên hệ</a></li>
</ul>
</nav>
</header>
<section>
<h2>Giới thiệu</h2>
<p>Đây là một trang web tĩnh được tạo bằng HTML.</p>
<img src="assets/hinh-anh.jpg" alt="Hình ảnh minh họa" width="300">
</section>
<footer>
<p>© 2025 - Website cá nhân</p>
</footer>
</body>
</html>
1.3. Thêm nội dung cho các trang khác
File about.html (Trang Giới thiệu)
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Giới thiệu</title>
</head>
<body>
<header>
<h1>Về chúng tôi</h1>
<nav>
<a href="index.html">Trang chủ</a> |
<a href="about.html">Giới thiệu</a> |
<a href="contact.html">Liên hệ</a>
</nav>
</header>
<section>
<p>Chúng tôi là một nhóm đam mê lập trình web.</p>
</section>
<footer>
<p>© 2025 - Website cá nhân</p>
</footer>
</body>
</html>
File contact.html (Trang Liên hệ)
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liên hệ</title>
</head>
<body>
<header>
<h1>Liên hệ với chúng tôi</h1>
<nav>
<a href="index.html">Trang chủ</a> |
<a href="about.html">Giới thiệu</a> |
<a href="contact.html">Liên hệ</a>
</nav>
</header>
<section>
<form>
<label for="name">Họ và tên:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="message">Nội dung:</label><br>
<textarea id="message" name="message" rows="4"></textarea><br><br>
<button type="submit">Gửi</button>
</form>
</section>
<footer>
<p>© 2025 - Website cá nhân</p>
</footer>
</body>
</html>
2. Kết luận
Tóm tắt những gì bạn đã học được:
- Cách tạo một trang web có nhiều trang liên kết với nhau.
- Sử dụng các thẻ HTML quan trọng: tiêu đề, danh sách, liên kết, hình ảnh, bảng, biểu mẫu.
- Cách tổ chức cấu trúc thư mục và file trong dự án web.
Hướng phát triển tiếp theo:
- Nâng cấp trang web với CSS để có giao diện đẹp hơn.
- Thêm JavaScript để tăng tính tương tác.
- Thực hành với các dự án thực tế như blog cá nhân hoặc portfolio.
Lưu ý: Đây là bước đầu tiên trong việc phát triển một trang web. Để trang web của bạn trở nên chuyên nghiệp hơn, hãy tiếp tục học về CSS, JavaScript và các công nghệ web khác
Với hơn 10 năm kinh nghiệm lập trình web và từng làm việc với nhiều framework, ngôn ngữ như PHP, JavaScript, React, jQuery, CSS, HTML, CakePHP, Laravel..., tôi hy vọng những kiến thức được chia sẻ tại đây sẽ hữu ích và thiết thực cho các bạn.
Xem thêm
Chào, tôi là Vũ. Đây là blog hướng dẫn lập trình của tôi.
Liên hệ công việc qua email dưới đây.
lhvuctu@gmail.com