HTML Cơ Bản đến Nâng Cao - Xây Dựng Trang Web Đầu Tiên của Bạn
Jason Nguyen
Giảng viên
Xem trước khóa học
Khóa học này giúp bạn làm chủ HTML từ những kiến thức cơ bản đến nâng cao, từng bước xây dựng nền tảng vững chắc để tạo ra các trang web chuyên nghiệp. Bạn sẽ học cách viết mã HTML chuẩn, sử dụng các thẻ HTML5 mới nhất, tạo bố cục website, nhúng hình ảnh, video, biểu mẫu, và kết hợp với CSS cơ bản để thiết kế trang web đầu tiên của bạn.
Mô tả khóa học
Khóa học này giúp bạn làm chủ HTML từ những kiến thức cơ bản đến nâng cao, từng bước xây dựng nền tảng vững chắc để tạo ra các trang web chuyên nghiệp. Bạn sẽ học cách viết mã HTML chuẩn, sử dụng các thẻ HTML5 mới nhất, tạo bố cục website, nhúng hình ảnh, video, biểu mẫu, và kết hợp với CSS cơ bản để thiết kế trang web đầu tiên của bạn.
Bạn sẽ học được gì?
- Hiểu rõ vai trò của HTML trong việc xây dựng và cấu trúc trang web
- Làm quen với các thẻ cơ bản: html, head, body, title, meta,...
- Nắm vững các thẻ nội dung: heading, paragraph, span, div
- Tạo danh sách, bảng và liên kết (link, anchor) trong HTML
- Làm việc với hình ảnh, video, audio và iframe để thêm nội dung đa phương tiện
- Hiểu và sử dụng form, input, textarea, button để thu thập dữ liệu người dùng
- Tìm hiểu về thuộc tính (attribute) và cách áp dụng hợp lý
- Làm quen với semantic HTML: header, footer, section, article, nav,...
- Hiểu tầm quan trọng của cấu trúc semantic trong SEO và khả năng truy cập (Accessibility)
- Tổ chức bố cục trang web hợp lý, dễ mở rộng và bảo trì
- Kết hợp CSS và JavaScript vào HTML để tạo trang web tương tác
- Tối ưu cấu trúc mã HTML cho hiệu suất và khả năng đọc
- Sử dụng comment, indentation để viết mã rõ ràng và chuyên nghiệp
- Làm quen với các thẻ meta và tối ưu SEO cơ bản cho trang web
- Tìm hiểu về favicon, link external, và file asset trong dự án
- Thực hành tạo trang web cá nhân, portfolio hoặc landing page cơ bản
- Hiểu cách kiểm tra và debug HTML bằng DevTools trên trình duyệt
- Tìm hiểu quy trình triển khai website tĩnh lên Internet (GitHub Pages, Vercel, Netlify,...)
- Nắm vững nền tảng vững chắc để học tiếp CSS và JavaScript
- Tự tin xây dựng và xuất bản trang web đầu tiên của riêng bạn
Nội dung khóa học
5 chương • 43 bài học • 7 giờ - 22 phút
Mục tiêu: Hiểu vai trò của HTML, cấu trúc tài liệu và cách hiển thị nội dung cơ bản. Nội dung chính: HTML là gì, vai trò vs CSS/JS Cấu trúc tài liệu HTML5 (<!doctype>, <html>, <head>, <body>) Các thẻ cơ bản: heading, paragraph, link (<a>), image (<img>), list (<ul>, <ol>, <li>) Attributes, đường dẫn tương đối vs tuyệt đối Bài thực hành: Tạo trang "Giới thiệu bản thân" gồm ảnh, đoạn văn và liên kết. Thời lượng gợi ý: 1.5–2 giờ
HTML là gì và vai trò trong Web — Phân biệt HTML, CSS, JS, giới thiệu HTML5.
Giới thiệu khái niệm HTML, lịch sử phát triển, sự khác biệt giữa HTML, CSS và JavaScript, và cách HTML đóng vai trò là "xương sống" của mọi trang web. • 11 phút
Cấu trúc tài liệu HTML5
Tìm hiểu các phần tử cơ bản trong cấu trúc trang HTML5 như <!DOCTYPE html>, <html>, <head>, <body> và vai trò của từng phần. • 14 phút
Heading & Paragraph
Hướng dẫn cách sử dụng các thẻ tiêu đề <h1>–<h6> và thẻ đoạn văn <p>, cách sắp xếp nội dung logic và tối ưu cho SEO. • 13 phút
Liên kết (Link)
Tạo liên kết nội bộ và liên kết ngoài bằng thẻ <a>, sử dụng các thuộc tính như href, target="_blank", và các tips để điều hướng người dùng hiệu quả. • 7 phút
Chèn hình ảnh
Thêm hình ảnh vào trang web bằng thẻ <img>, sử dụng alt để hỗ trợ SEO và người khiếm thị, và phân biệt đường dẫn tương đối/tuyệt đối. • 5 phút
Danh sách
Tạo danh sách gạch đầu dòng (<ul>), danh sách số thứ tự (<ol>), và danh sách lồng nhau để hiển thị nội dung có cấu trúc. • 9 phút
Thuộc tính cơ bản
Giới thiệu các thuộc tính quan trọng của HTML như id, class, title, style, và ứng dụng của chúng trong định dạng và điều hướng. • 11 phút
Mục tiêu: Xây dựng nội dung trang web có cấu trúc, chèn media và bảng biểu. Nội dung chính: Semantic HTML cơ bản: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer> Hình ảnh nâng cao: srcset, alt, tối ưu ảnh Nhúng media: audio, video, iframe Bảng (<table>), biểu mẫu đơn giản (<form>, <input>, <textarea>, <select>) Accessibility (alt text, labels) Bài thực hành: Tạo trang blog nhỏ có header/nav, 2 bài viết, 1 video nhúng và 1 form liên hệ. Thời lượng gợi ý: 2–3 giờ
Semantic HTML
Giải thích ý nghĩa của các thẻ HTML mang tính ngữ nghĩa (<header>, <nav>, <main>, <section>, <article>, <footer>) và lợi ích của chúng. • 9 phút
Thẻ nhóm nội dung
So sánh <div> và các thẻ semantic, khi nào nên dùng <section> hoặc <article> để tăng khả năng đọc và SEO. • 5 phút
Chèn video và audio
Hướng dẫn sử dụng <video> và <audio>, các thuộc tính như controls, autoplay, loop, và tối ưu kích thước file. • 12 phút
Nhúng nội dung ngoài
Dùng <iframe> để nhúng video YouTube, bản đồ Google Maps, hoặc nội dung từ website khác. • 6 phút
Bảng biểu cơ bản
Tạo bảng đơn giản với <table>, <tr>, <th>, <td> để hiển thị dữ liệu dạng lưới. • 9 phút
Bảng nâng cao
Sử dụng colspan, rowspan, <caption>, <thead>, <tbody> để trình bày bảng chuyên nghiệp và dễ đọc. • 15 phút
Form cơ bản
Tạo biểu mẫu đơn giản với <form>, <input>, <textarea>, <select>, <button> để thu thập thông tin từ người dùng. • 11 phút
Nhãn và mô tả form
Dùng <label> để gắn nhãn cho input, thuộc tính placeholder, name, value để mô tả dữ liệu. • 11 phút
Accessibility cơ bản
Nguyên tắc truy cập cho tất cả người dùng: alt text, label form, heading hợp lý, contrast màu. • 13 phút
Mục tiêu: Nắm các thẻ nâng cao, microdata và xử lý nội dung phức tạp. Nội dung chính: Các thẻ nâng cao: <figure>, <figcaption>, <details>, <summary>, <progress>, <meter> Form nâng cao: validation (thuộc tính HTML5: required, pattern, type=email), input types mới SEO cơ bản: meta tags, title, description, heading hierarchy Structured data / Schema basics (JSON-LD ý tưởng) Bài thực hành: Tối ưu một trang sản phẩm đơn giản (SEO + form mua hàng giả lập). Thời lượng gợi ý: 2 giờ
Thẻ nâng cao
Sử dụng <figure>, <figcaption> để hiển thị ảnh có chú thích, tăng tính chuyên nghiệp. • 5 phút
Nội dung ẩn/hiện
Dùng <details> và <summary> để tạo nội dung có thể mở rộng/thu gọn mà không cần JavaScript. • 7 phút
Progress & Meter
Hiển thị tiến trình (<progress>) và chỉ số đo (<meter>) cho các thông tin động. • 12 phút
Form nâng cao
Các input type mới trong HTML5 (email, date, number, range) và cách chúng giúp kiểm tra dữ liệu đầu vào. • 11 phút
Validation HTML5
Sử dụng thuộc tính required, pattern, min, max, maxlength để kiểm tra dữ liệu mà không cần JS. • 10 phút
Meta tags
Giới thiệu thẻ <meta> để cấu hình charset, viewport, description, keywords cho SEO và mobile. • 6 phút
Cấu trúc heading cho SEO
Cách tổ chức heading để Google hiểu nội dung chính/phụ và cải thiện thứ hạng tìm kiếm. • 8 phút
Giới thiệu Structured Data
Khái niệm schema.org và JSON-LD để đánh dấu dữ liệu có cấu trúc, hỗ trợ SEO nâng cao. • 13 phút
Mục tiêu: Hiểu cách HTML + CSS phối hợp, tạo layout cơ bản và responsive. Nội dung chính: Giới thiệu CSS (inline, internal, external) Selectors cơ bản, box model, margin/padding/border Display (block/inline/inline-block), float (khái quát) và modern layout: Flexbox, Grid (cơ bản) Media queries để responsive Tối ưu cho mobile-first Bài thực hành: Dựng layout trang portfolio gồm header, grid dự án, sidebar và footer; responsive cho mobile. Thời lượng gợi ý: 3–4 giờ
Giới thiệu CSS
Cách thêm CSS vào HTML (inline, internal, external) và khi nào nên dùng. • 12 phút
Selectors cơ bản
Chọn phần tử theo thẻ, class, id, nhóm selector và ý nghĩa độ ưu tiên (specificity). • 8 phút
Box model
Hiểu cấu trúc hộp của mỗi phần tử: content, padding, border, margin và ảnh hưởng đến layout. • 13 phút
Màu sắc & nền
Thiết lập màu bằng HEX, RGB, HSL; thêm background image và gradient. • 11 phút
Typography cơ bản
Cài font, chỉnh cỡ chữ, độ đậm, khoảng cách dòng để tăng tính thẩm mỹ. • 14 phút
Display
Phân biệt block, inline, inline-block và ứng dụng. • 10 phút
Flexbox cơ bản
Tạo layout linh hoạt với justify-content, align-items, flex-wrap. • 9 phút
Grid cơ bản
Chia layout thành hàng/cột dễ dàng với CSS Grid. • 9 phút
Media queries
Responsive design cho nhiều kích thước màn hình (mobile-first). • 15 phút
Best practices HTML+CSS
Best practices HTML+CSS • 13 phút
Mục tiêu: Ứng dụng toàn bộ kiến thức để triển khai một website hoàn chỉnh và biết cách deploy. Nội dung chính: Lên ý tưởng & wireframe nhanh Tổ chức file/folder dự án (best practices) Thực thi HTML + CSS (từ chương trước) — header/nav, hero, nội dung, form, footer, responsive Kiểm tra accessibility & SEO checklist Giới thiệu deploy tĩnh (GitHub Pages / Vercel) và cách kiểm tra console / lỗi cơ bản Bài thực hành: Hoàn thiện và deploy "Trang web cá nhân/Portfolio" — có domain tạm, nút liên hệ hoạt động (form gửi mail giả hoặc link mailto). Thời lượng gợi ý: 4–6 giờ
Xác định mục tiêu website
Chọn loại website: portfolio, blog, landing page, và xác định đối tượng người dùng. • 8 phút
Phác thảo layout (Wireframe)
Tạo bố cục nhanh bằng giấy hoặc Figma để định hướng thiết kế. • 13 phút
Tạo file & cấu trúc thư mục
Sắp xếp assets, css, images, pages gọn gàng để dễ bảo trì. • 5 phút
Xây dựng header & navigation
Tạo logo, menu điều hướng, link anchor đến các phần trong trang. • 10 phút
Hero section
Thiết kế phần giới thiệu đầu trang ấn tượng với hình nền, tiêu đề và nút call-to-action. • 6 phút
Nội dung chính
Thêm phần giới thiệu, dự án/sản phẩm, hình ảnh minh họa. • 13 phút
Form liên hệ
Tạo form responsive để người dùng gửi thông tin liên hệ. • 14 phút
Kiểm tra & tối ưu
Test SEO cơ bản, responsive, lỗi HTML/CSS trước khi đưa lên mạng. • 14 phút
Deploy website
Đưa trang web lên GitHub Pages, Netlify hoặc Vercel và chia sẻ link. • 12 phút
Xem trước khóa học
Khóa học này giúp bạn làm chủ HTML từ những kiến thức cơ bản đến nâng cao, từng bước xây dựng nền tảng vững chắc để tạo ra các trang web chuyên nghiệp. Bạn sẽ học cách viết mã HTML chuẩn, sử dụng các thẻ HTML5 mới nhất, tạo bố cục website, nhúng hình ảnh, video, biểu mẫu, và kết hợp với CSS cơ bản để thiết kế trang web đầu tiên của bạn.