Bài 14 · Nâng cao · 32 phút
Dự án: trang giới thiệu khoá học
Biên soạn bởi Nguyễn Anh Tuấn
Dự án cuối khoá: trang giới thiệu một khoá học ghép mọi thứ đã học - header/nav, article mô tả, section lộ trình (ol), form đăng ký, footer.
Tới bài cuối rồi! Dự án tốt nghiệp gói gọn mọi thứ mèo con đã học: dựng một trang giới thiệu một khoá học (cứ lấy chính khoá HTML này làm ví dụ). Trang này tự nhiên cần đủ mọi mảnh: đầu trang, mô tả khoá, lộ trình các bài, form đăng ký, chân trang. Không có thẻ nào mới ngoài đời - chỉ là ghép cho khéo những gì đã biết, rồi tự kiểm cho chuẩn.
- ▸Capstone: ghép toàn bộ kỹ năng vào một trang giới thiệu khoá học.
- ▸Cần đủ: header/nav, article mô tả, section lộ trình, form đăng ký, footer.
- ▸Kỹ năng mới của bài: tự kiểm trang bằng HTML validator.
Bắt đầu từ khung quen thuộc, lấp đầy bằng các landmark. Phần chính là một <article> mô tả khoá (có header riêng), rồi tới các phần khác trong main:
trang-khoa-hoc.html · khung đầy đủ (mở .html bằng trình duyệt)
<!doctype html>
<html lang="vi">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Khoá HTML cho người mới - Mèo Ham Học</title>
<meta name="description" content="Học HTML từ đầu: thẻ, semantic, dự án thật." />
</head>
<body>
<header>
<h1>Khoá HTML cho người mới</h1>
<nav>Trang chủ · Khoá học · Đăng ký</nav>
</header>
<main>
<article>
<header><h2>Khoá học này dạy gì?</h2></header>
<p>Đánh dấu nội dung đúng nghĩa, dựng trang semantic chuẩn.</p>
</article>
<section>
<h2>Lộ trình học</h2>
<!-- danh sách bài, có thứ tự -->
</section>
<form>
<!-- đăng ký học -->
</form>
</main>
<footer>© Mèo Ham Học</footer>
</body>
</html>- ▸article mô tả khoá có header riêng (như bài trang tin tức).
- ▸main gom article + section lộ trình + form đăng ký.
- ▸Một h1 cho cả trang; các khu lớn dùng h2.
Lộ trình các bài là chỗ đáng suy nghĩ một giây: nên dùng ul hay ol? Các bài học đi theo trình tự (bài 1 rồi mới bài 2), nên thứ tự MANG NGHĨA - dùng ol, đúng như đã học ở bài Văn bản, tiêu đề & danh sách.
lo-trinh.html · ol vì các bài có thứ tự
<section>
<h2>Lộ trình học</h2>
<ol>
<li>HTML là gì</li>
<li>Văn bản, tiêu đề & danh sách</li>
<li>Liên kết, ảnh & đa phương tiện</li>
<li>… và các bài tiếp theo</li>
</ol>
</section>Chọn đúng theo nghĩa
Một trang khoá học rất đáng được tìm thấy và chia sẻ, nên phần head cần đủ: title và meta description cho Google, viewport cho điện thoại, và Open Graph cho preview khi dán link - tất cả gom lại từ bài HTML cho SEO & metadata.
head-day-du.html · gói meta tổng kết từ bài SEO
<meta property="og:title" content="Khoá HTML cho người mới" />
<meta property="og:description" content="Học HTML từ đầu, dễ cho người mới." />
<meta property="og:image" content="https://meohamhoc.vn/og/html.png" />- ▸title + meta description: bộ mặt trên kết quả Google.
- ▸viewport: hiển thị tử tế trên điện thoại.
- ▸og:image nên là PNG/JPG để mạng xã hội dựng preview.
Đây là điều mới của bài. Làm sao biết HTML mình viết có hợp lệ không - thẻ đóng đủ chưa, lồng có đúng không? Có công cụ kiểm miễn phí: HTML validator chính thức ở validator.w3.org. Dán đoạn HTML (hoặc tải file) lên, nó liệt kê lỗi và cảnh báo. Không cần cài gì.
Trung thực
Giờ là lúc "nghiệm thu". Chạy checklist tốt nghiệp - bản gộp mọi thứ đã học cả khoá - cho trang khoá học của mèo con:
- ▸Khung: có <!doctype html> và <html lang="vi">.
- ▸Heading: đúng MỘT h1; h2/h3 theo thứ bậc, không nhảy cóc.
- ▸Landmark: header/nav/main/footer (và article/section/aside) đúng vai trò.
- ▸Ảnh: mọi img có alt; ảnh lớn cân nhắc srcset/loading.
- ▸Form: mọi input có label gắn for/id; ô bắt buộc có required.
- ▸Lộ trình: dùng ol (có thứ tự); meta head đủ title + description.
- ▸Validator: chạy validator.w3.org, không còn lỗi cú pháp.
Chúc mừng tốt nghiệp HTML!
Chặng tiếp theo? Bộ xương đã vững, giờ là lúc khoác da thịt và cho nó cử động: CSS để trang đẹp lên, và JavaScript để trang tương tác. Đó là những khoá riêng ở Mèo Ham Học. Ai có nền HTML semantic vững như mèo con bây giờ sẽ học hai thứ đó nhẹ nhàng hơn nhiều. Hẹn gặp lại ở chặng sau!
Câu hỏi thường gặp
ol (danh sách có thứ tự). Các bài học đi theo trình tự - bài 1 rồi mới tới bài 2 - nên thứ tự MANG NGHĨA, đúng tinh thần ol đã học ở bài Văn bản & danh sách. Nếu chỉ là danh sách "quyền lợi" không phân thứ tự thì mới dùng ul.
Là công cụ kiểm tra HTML của bạn có HỢP LỆ về cú pháp không: thẻ có đóng đủ, lồng có đúng, thuộc tính có hợp lệ. Bản chính thức ở validator.w3.org - dán đoạn HTML hoặc tải file lên, nó liệt kê lỗi và cảnh báo. Không cần cài gì.
Chưa chắc. Validator chỉ bắt lỗi CÚ PHÁP. Một trang toàn div (div soup) vẫn có thể "hợp lệ" 100% mà semantic lại tệ. Validator không biết bạn nên dùng article hay div - đó là việc của MẮT NGƯỜI và checklist semantic. Hợp lệ là điều kiện cần, không phải đủ.
Tick những điều em tự tin làm được. Càng lên cao, em càng hiểu sâu.
Trả lời vài câu để chắc rằng em đã nắm bài.
Lộ trình các bài học (đi theo trình tự) nên đánh dấu bằng thẻ nào?
- 1
Khung trang khoá học
Dựng khung trang "về một khoá học": header (có nav), main, footer; trong main có một article mô tả khoá.
✅ Hoàn thành khi: doctype/html lang="vi"/head/body; body có header+nav, main chứa article (header bài + đoạn mô tả), footer.
- 2
Lộ trình bằng ol
Thêm một section "Lộ trình học" liệt kê các bài theo đúng thứ tự.
✅ Hoàn thành khi: section có h2 "Lộ trình học" và một <ol> các <li> bài học theo trình tự.
- 3
Form đăng ký học
Thêm form đăng ký học có ô Tên, ô Email (bắt buộc, đúng định dạng) và nút "Đăng ký học".
✅ Hoàn thành khi: form có 2 cặp label+input (for/id), Email type="email" required, một button.
- 4
head đầy đủ
Viết phần head: charset, viewport, title, meta description, và ba thẻ Open Graph.
✅ Hoàn thành khi: head có meta charset + viewport, title, meta description, og:title/og:description/og:image.
- 5
Chạy validator
Mở validator.w3.org, dán toàn bộ HTML trang khoá học vào, sửa hết lỗi cú pháp nó báo.
✅ Hoàn thành khi: Validator báo không còn lỗi (error); cảnh báo (warning) đã đọc và hiểu.
- 6
Checklist tốt nghiệp
Rà trang theo checklist tốt nghiệp trong bài và xác nhận từng mục.
✅ Hoàn thành khi: Mọi mục đạt: doctype/lang, một h1 + outline, landmarks, alt, label, ol lộ trình, meta đủ, validator sạch.