Bạn sẽ rà lại website ba trang, nối một tệp CSS tối thiểu và xác định bước học tiếp. Kết thúc lộ trình, mục tiêu là tự tổ chức nội dung HTML có nghĩa, biết kiểm tra và biết tra cứu khi gặp phần tử mớ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.

Bộ mã hoàn chỉnh có gì?

website-hoan-chinh/
├── index.html
├── bai-viet.html
├── lien-he.html
├── result.html
├── styles.css
└── images/
    └── goc-hoc-web.png

Trang chủ giới thiệu bài, trang bài viết có các mục nội dung, trang liên hệ có form minh họa. result.html giải thích giới hạn của ví dụ tĩnh. Mỗi trang có title riêng, cùng ngôn ngữ và menu nhất quán. Đây là ví dụ học tập, không phải một hệ thống nhận liên hệ đã triển khai backend.

Kết nối CSS mà không làm rối HTML

Đặt link rel=”stylesheet” href=”styles.css” trong head. Những quy tắc tạo kiểu chuyển sang tệp CSS thay vì rải thuộc tính style lên từng phần tử. Không phải mọi inline style đều là cú pháp sai, nhưng tách riêng giúp dễ so sánh cấu trúc và giao diện trong bài học.

CSS tối thiểu của bộ ví dụ chỉ chọn kiểu chữ dễ đọc, chiều rộng nội dung, khoảng cách và cách co ảnh. Chúng ta không dùng bảng để dàn trang hoặc thêm hàng loạt div chỉ để sao chép một giao diện mẫu.

Checklist trước khi chia sẻ website

• Mọi trang có title, h1 và nội dung riêng có nghĩa.
• Menu và các liên kết hoạt động; không còn đường dẫn C:\… của máy cá nhân.
• Ảnh tải được, có alt phù hợp và không tràn vùng nội dung.
• Bảng dùng đúng dữ liệu, không dùng để chia bố cục.
• Form có nhãn, name, kiểu điều khiển và giới hạn rõ; người xem biết đây chỉ là demo.
• Dùng bàn phím và xem ở cửa sổ hẹp để kiểm tra các thao tác cơ bản.

Mở bộ tải về và đi lại giữa ba trang. Khi kiểm tra qua file:/// và qua máy chủ cục bộ, một số chính sách tài nguyên có thể khác. Nếu đã dùng Python, có thể chạy python -m http.server 8000 trong thư mục website rồi mở http://localhost:8000. Bạn không cần học Python để đọc lộ trình HTML; một máy chủ tĩnh khác cũng phù hợp.

Bạn nên biết gì sau 16 bài?

Bạn không cần nhớ 100 tên thẻ. Bạn cần xác định loại nội dung, chọn phần tử phù hợp, đọc cấu trúc lồng nhau, giải thích đường dẫn và tạo form có nhãn. Khi gặp một nhu cầu mới như biểu diễn tiến độ, hãy tra cứu progress trong đúng tình huống thay vì đoán theo tên.

Thư viện bài cũ giữ lại để hỗ trợ tra cứu. Một số bài mang cú pháp lịch sử hoặc chủ đề mở rộng; đối chiếu HTML Standard và MDN khi cần. Các phần Canvas và tạo kiểu nền, đường viền không phải điều kiện để hoàn thành nền tảng HTML.

Lộ trình tiếp theo có mục tiêu rõ

Với CSS, học selector, cascade, box model, khoảng cách, typography rồi layout Flexbox/Grid và responsive. Với JavaScript, học dữ liệu, điều kiện, hàm, DOM và sự kiện. Với backend, học cách thật sự nhận, kiểm tra và lưu dữ liệu biểu mẫu.

Bạn có thể tiếp tục chính website này khi học CSS và JavaScript, không phải dựng một dự án cuối khóa lớn mới được công nhận đã học HTML. Một bước tự kiểm tra phù hợp là thay nội dung và bổ sung một trang mới bằng quyết định của mình, không chép nguyên mẫu.

Ví dụ để tự chạy

Bài này dùng hai loại tệp: đặt dòng link trong head của mỗi trang HTML, còn các quy tắc tạo kiểu viết trong tệp styles.css riêng. Không dán CSS trực tiếp thành văn bản trong body. Bộ tải về có sẵn các tệp hoàn chỉnh.

Trong head của mỗi tệp HTML

<link rel="stylesheet" href="styles.css">

Trong tệp styles.css riêng

body {
  font-family: Arial, sans-serif;
  line-height: 1.7;
  max-width: 900px;
  margin: 24px auto;
  padding: 0 18px;
}
img { max-width: 100%; height: auto; }

Kết quả hiển thị

Bạn thấy cùng cấu trúc trang chủ đã học, nhưng được tạo kiểu tối thiểu để dễ đọc. Tắt CSS thì nội dung vẫn giữ thứ tự và ngữ nghĩa; đó là điểm cần đạt của môn HTML.

Mở ví dụ bài 16 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

• Nghĩ đã học HTML thì form tĩnh phải gửi email được: cần backend hoặc dịch vụ nhận phù hợp.
• Xóa outline để trang đẹp hơn: giữ dấu focus có thể nhìn thấy.
• Học mọi thẻ trước khi viết trang: tập trung nhu cầu và tra cứu đúng lúc.

Tự kiểm tra

• Tắt styles.css và kiểm tra website còn đọc được, điều hướng được không.
• Tự thêm một trang tài liệu với title, h1 và menu đúng, không nhìn mẫu từng dòng.

Tra cứu khi cần

• Thuộc tính style trong HTML
• Thẻ style trong HTML
• HTML5 Canvas là gì?

Tài liệu gốc về chủ đề này trên MDN / HTML Standard

Mục lục lộ trình HTML 16 bài · Thư viện bài HTML tra cứu