[Video] Hướng dẫn tạo ra 1 trang web đơn giản nhất - HTML/CSS

🌟 Mở bài

Trong thời đại công nghệ phát triển mạnh mẽ, việc sở hữu một trang web cá nhân hoặc doanh nghiệp không còn xa vời như trước. Nếu bạn từng nghĩ rằng để tạo ra một trang web cần phải là lập trình viên chuyên nghiệp hay tốn nhiều chi phí, thì sự thật lại hoàn toàn ngược lại.
Chỉ với một chiếc máy tính và vài phút tìm hiểu, bạn hoàn toàn có thể tự tay tạo ra một website đơn giản bằng ngôn ngữ HTML – nền tảng cơ bản và quan trọng nhất trong lập trình web.

HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản, đóng vai trò “xương sống” của mọi trang web. Nó giúp trình duyệt hiểu cấu trúc nội dung — như tiêu đề, đoạn văn, hình ảnh, và liên kết.
Dù website có giao diện phức tạp hay đẹp đến đâu, tất cả đều bắt đầu từ những dòng HTML cơ bản đầu tiên.

Bài viết này sẽ hướng dẫn bạn từng bước để tạo một trang web hoàn chỉnh bằng HTML thuần túy, không cần bất kỳ công cụ phức tạp nào. Bạn sẽ học cách xây dựng cấu trúc trang, thêm nội dung, hình ảnh, và đường dẫn.
Hãy cùng bắt đầu – chỉ cần vài bước, bạn sẽ thấy việc tạo website đầu tiên của mình thật dễ dàng và thú vị!

Để bắt đầu, bạn cần một số công cụ đơn giản mà hầu như máy tính nào cũng có sẵn.

Bạn có thể sử dụng bất kỳ trình soạn thảo nào để viết mã HTML:

Visual Studio Code (VS Code) – miễn phí, mạnh mẽ và hỗ trợ gợi ý cú pháp.
Notepad++ – nhẹ, dễ sử dụng.
Sublime Text – nhanh, phù hợp cho người mới học.

👉 Gợi ý: Nếu bạn chưa từng lập trình, hãy tải và cài Visual Studio Code để dễ thao tác và xem trước kết quả.

Sau khi viết mã HTML, bạn cần trình duyệt để mở và xem trang web của mình.
Các trình duyệt tốt nhất để kiểm tra website gồm:

Google Chrome
Mozilla Firefox
Microsoft Edge

Tạo một thư mục trên máy tính để lưu toàn bộ nội dung website, ví dụ:


my-website/
└── index.html

index.html: là tệp chính của trang web, nơi bạn viết toàn bộ mã HTML.

Trong thư mục bạn vừa tạo, mở trình soạn thảo và tạo tệp index.html.
Sau đó, nhập đoạn mã sau:


<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Trang web đầu tiên của tôi</title>
</head>
<body>
  <h1>Chào mừng đến với trang web đầu tiên của tôi!</h1>
  <p>Đây là nội dung HTML đầu tiên mà tôi tự viết.</p>
</body>
</html>

<!DOCTYPE html>: Khai báo đây là tài liệu HTML5.
<html>: Bắt đầu trang web.
<head>: Chứa các thông tin ẩn (tiêu đề, meta, SEO…).
<title>: Tiêu đề hiển thị trên tab trình duyệt.
<body>: Nơi chứa toàn bộ nội dung hiển thị.

Khi lưu tệp và mở index.html bằng trình duyệt, bạn sẽ thấy dòng chữ hiển thị:
“Chào mừng đến với trang web đầu tiên của tôi!”

🎉 Xin chúc mừng! Bạn vừa tạo được trang web đầu tiên của mình bằng HTML.

Một trang web thường bao gồm nhiều phần khác nhau như: tiêu đề, menu, nội dung, và chân trang.
Chúng ta sẽ xây dựng từng phần bằng HTML.


<header>
  <h1>Học lập trình HTML cơ bản</h1>
  <p>Website hướng dẫn lập trình web dành cho người mới bắt đầu</p>
</header>

Header giúp giới thiệu chủ đề hoặc tiêu đề chính của trang web.


<nav>
  <ul>
    <li><a href="#gioithieu">Giới thiệu</a></li>
    <li><a href="#noidung">Nội dung</a></li>
    <li><a href="#lienhe">Liên hệ</a></li>
  </ul>
</nav>

Thẻ <ul> tạo danh sách menu.
Thẻ <a> tạo liên kết đến các phần trong trang (bắt đầu bằng # để di chuyển nội bộ).


<section id="gioithieu">
  <h2>Giới thiệu</h2>
  <p>Tôi là người yêu thích công nghệ và lập trình. Trang web này là sản phẩm đầu tiên tôi xây dựng bằng HTML.</p>
</section>

<section id="noidung">
  <h2>Nội dung chính</h2>
  <p>HTML là ngôn ngữ nền tảng của mọi website. Nó giúp tạo khung cho nội dung hiển thị trên trình duyệt.</p>
  <p>Bạn có thể dùng HTML để tạo đoạn văn, danh sách, bảng, hình ảnh, và liên kết.</p>
</section>


<footer id="lienhe">
  <h3>Liên hệ</h3>
  <p>Email: contact@mywebsite.com</p>
  <p>© 2025 My Website. All rights reserved.</p>
</footer>

Phần footer thường dùng để hiển thị thông tin bản quyền, liên hệ, hoặc các liên kết phụ.

Trang web sẽ trở nên sinh động hơn khi có hình ảnh minh họa hoặc liên kết tới các trang khác.


<img src="avatar.jpg" alt="Ảnh cá nhân" width="200">

src: đường dẫn đến file hình ảnh.
alt: mô tả ảnh (rất quan trọng cho SEO).
width: điều chỉnh kích thước hiển thị.

👉 Lưu ý: File ảnh avatar.jpg cần nằm trong cùng thư mục với index.html.


<a href="https://tracnghiemviet.vn" target="_blank">Truy cập TracNghiemViet.vn</a>

href: địa chỉ liên kết.
target="_blank": mở liên kết trong tab mới.

Danh sách (List):


<ul>
  <li>HTML cơ bản</li>
  <li>HTML nâng cao</li>
  <li>SEO On-page với HTML</li>
</ul>

Bảng dữ liệu (Table):


<table border="1" cellpadding="5">
  <tr>
    <th>STT</th>
    <th>Họ tên</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Nguyễn Văn A</td>
    <td>a@gmail.com</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Trần Thị B</td>
    <td>b@gmail.com</td>
  </tr>
</table>

Bảng rất hữu ích để hiển thị dữ liệu gọn gàng, dễ đọc.

Sau khi viết xong mã HTML, bạn nên kiểm tra lại để đảm bảo mọi thứ hoạt động ổn định.

Mở index.html trong trình duyệt để xem trang web.
Nếu có lỗi, kiểm tra các thẻ có được đóng đúng (</>).

Thêm mô tả để Google hiểu nội dung trang:


<meta name="description" content="Hướng dẫn tạo trang web đơn giản nhất bằng HTML. Bài viết chi tiết dành cho người mới học lập trình web.">

Sử dụng đúng cấu trúc thẻ tiêu đề (H1, H2, H3) để tối ưu SEO:

H1: Tiêu đề chính của trang.
H2: Các phần lớn trong bài viết.
H3: Các tiểu mục bên trong H2.

Luôn đặt thuộc tính lang="vi" trong thẻ <html> để Google nhận biết website là tiếng Việt:


<html lang="vi">

Chỉ cần nhấp đúp vào file index.html, trang web của bạn sẽ mở bằng trình duyệt.
Bạn có thể xem toàn bộ nội dung mình đã viết mà không cần Internet.

Có 3 cách phổ biến:

GitHub Pages – miễn phí, dễ triển khai.
Netlify / Vercel – chỉ cần kéo thả file, hệ thống tự đăng tải.
Mua hosting + tên miền riêng – nếu bạn muốn website có thương hiệu chuyên nghiệp.

Tạo một trang web đơn giản bằng HTML không hề khó như bạn nghĩ. Chỉ với vài dòng mã, bạn đã có thể xây dựng nên một website hoàn chỉnh, hiển thị thông tin, hình ảnh và liên kết rõ ràng.

Hiểu được cách HTML hoạt động chính là bước đầu tiên để trở thành lập trình viên web chuyên nghiệp. Từ đây, bạn có thể học thêm CSS để trang trí, JavaScript để tạo tương tác, và dần phát triển các kỹ năng web nâng cao hơn.

👉 Bắt đầu ngay hôm nay: mở Visual Studio Code, tạo file index.html, viết vài dòng HTML đầu tiên và xem thành quả của bạn trên trình duyệt. Mỗi trang web nhỏ bạn tạo ra là một bước tiến đến ước mơ làm chủ công nghệ.