HTML và CSS khác nhau thế nào?

HTML (HyperText Markup Language) là 'bộ khung' — nó dựng cấu trúc và nội dung của trang: tiêu đề, đoạn văn, ảnh, danh sách. CSS (Cascading Style Sheets) là 'lớp trang trí' — nó quyết định diện mạo: màu sắc, phông chữ, khoảng cách, bố cục. Ví von: HTML là ngôi nhà thô, CSS là sơn, nội thất và cách bài trí. Cả hai phối hợp tạo nên một trang web hoàn chỉnh.

Cần cài phần mềm gì để bắt đầu học HTML/CSS?

Gần như không cần gì. Bạn chỉ cần một trình soạn thảo văn bản (Notepad trên Windows, TextEdit trên Mac, hoặc tốt hơn là VS Code miễn phí) để viết code, và một trình duyệt (Chrome, Edge, Firefox) để xem kết quả. Lưu file với đuôi .html rồi mở bằng trình duyệt là thấy trang web của bạn — không cần cài máy chủ hay công cụ phức tạp nào.

Học HTML/CSS xong thì làm được gì?

Bạn làm được các trang web tĩnh: trang giới thiệu cá nhân, portfolio, landing page, trang thông tin sản phẩm. Đây cũng là nền tảng bắt buộc trước khi học JavaScript (để thêm tương tác) hay các framework hiện đại. Nhiều người bắt đầu từ HTML/CSS rồi tiến tới làm web chuyên nghiệp hoặc thiết kế giao diện. Đây là bước đầu tiên vững chắc của nghề lập trình web.

HTML và CSS cho người mới: làm trang web đầu tiên trong 1 giờ

Làm một trang web nghe có vẻ khó, nhưng sự thật là bạn có thể dựng một trang giới thiệu bản thân hoàn chỉnh trong khoảng một giờ — mà không cần cài phần mềm phức tạp hay biết code từ trước. Bài này dạy hai thứ nền tảng nhất của web: HTML (cấu trúc) và CSS (trang trí), qua việc làm một trang thật, chạy được ngay trên máy bạn.

🎯 Bạn cần: một trình soạn thảo văn bản (Notepad/TextEdit, hoặc VS Code miễn phí) và một trình duyệt. Không cần gì thêm.

HTML là gì, CSS là gì?

HTML = bộ khung: dựng nội dung (tiêu đề, đoạn văn, ảnh, danh sách).
CSS = lớp trang trí: màu sắc, phông chữ, khoảng cách, bố cục.

Ví von: HTML là ngôi nhà thô, CSS là sơn và nội thất. Ta làm khung trước, trang trí sau.

Bước 1: Tạo file HTML

Mở trình soạn thảo, gõ đoạn dưới, rồi lưu thành index.html (nhớ đuôi .html):

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <title>Trang của tôi</title>
</head>
<body>
  <h1>Xin chào, tôi là Lan</h1>
  <p>Tôi thích viết lách, cà phê và học điều mới mỗi ngày.</p>

  <h2>Sở thích</h2>
  <ul>
    <li>Đọc sách</li>
    <li>Chụp ảnh</li>
    <li>Du lịch</li>
  </ul>
</body>
</html>

Mở file bằng trình duyệt (bấm đúp vào file) — bạn đã có trang web đầu tiên! Giải thích nhanh:

<h1>, <h2>: tiêu đề lớn, nhỏ.
<p>: đoạn văn.
<ul> + <li>: danh sách gạch đầu dòng.
Mỗi thẻ có thẻ mở <p> và thẻ đóng </p>.

Bước 2: Thêm CSS để trang đẹp hơn

Thêm phần <style> vào trong <head> (giữa <title> và </head>):

<style>
  body {
    font-family: Arial, sans-serif;
    max-width: 600px;
    margin: 40px auto;
    padding: 0 16px;
    line-height: 1.6;
    color: #333;
  }
  h1 { color: #2c7; }
  ul { background: #f4f4f4; padding: 16px 32px; border-radius: 8px; }
</style>

Lưu lại, tải lại trang trên trình duyệt (F5) — trang gọn gàng và đẹp hơn hẳn. Giải thích:

body { ... }: áp cho toàn trang — chọn phông, giới hạn bề rộng, căn giữa, giãn dòng.
h1 { color: #2c7; }: đổi màu tiêu đề (#2c7 là mã màu xanh).
ul { ... }: cho danh sách nền xám nhạt, bo góc.

Cú pháp CSS: phần-tử { thuộc-tính: giá-trị; }.

Bước 3: Thêm ảnh và liên kết

Thêm vào trong <body>:

<img src="https://picsum.photos/600/300" alt="Ảnh minh hoạ" style="max-width:100%; border-radius:8px;">
<p>Liên hệ: <a href="mailto:[email protected]">[email protected]</a></p>

<img>: chèn ảnh (src là đường dẫn ảnh, alt là mô tả).
<a href="...">: tạo liên kết. max-width:100% giúp ảnh không tràn khung.

Bạn vừa học được gì?

Chỉ trong một giờ, bạn đã biết:

Cấu trúc HTML cơ bản (<!DOCTYPE>, <head>, <body>) và các thẻ nội dung.
CSS để trang trí (màu, phông, bố cục).
Cách chèn ảnh và liên kết.

Lỗi thường gặp

Quên thẻ đóng (</p>, </ul>) → bố cục vỡ. Mỗi thẻ mở cần một thẻ đóng.
Lưu sai đuôi file (.txt thay vì .html) → trình duyệt hiện chữ thô. Lưu đúng .html.
Tiếng Việt lỗi font → thiếu <meta charset="UTF-8"> trong <head>.
CSS không áp dụng → đặt sai chỗ; <style> phải nằm trong <head>.

Bước tiếp theo

Bạn vừa đặt nền móng cho nghề làm web. Tiếp theo:

Học lập trình web sâu hơn một cách bài bản: theo series Học JavaScript từ con số 0 để trang web của bạn có tương tác.
Học JavaScript để trang có tương tác (nút bấm, hiệu ứng).
Đưa trang lên mạng miễn phí để chia sẻ.

Muốn nhìn bức tranh tổng thể của việc học lập trình, xem lộ trình tự học lập trình từ con số 0.

Tóm lại

Làm trang web đầu tiên không hề khó: HTML dựng khung, CSS trang trí, lưu file .html và mở bằng trình duyệt là xong — không cần cài gì phức tạp. Hãy gõ theo code trong bài, đổi nội dung thành của bạn, và bạn có ngay một trang giới thiệu cá nhân thật. Đây là bước đầu tiên vững chắc; từ đây con đường làm web mở ra trước mắt bạn.