HTML Cơ Bản đến Nâng Cao - Xây Dựng Trang Web Đầu Tiên của Bạn
4.77
(
2599
lượt xem)
• 4 giờ 36 phút
Cái này test nha brooo
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.
Bạn sẽ học được gì?
- Hiểu rõ cấu trúc cơ bản của một trang HTML và cách hoạt động của web.
- Thành thạo các thẻ HTML5 phổ biến và cách áp dụng vào dự án thực tế.
- Tạo bố cục trang web với các phần header, footer, navigation, và content.
- Chèn hình ảnh, video, audio, và các loại liên kết (links) vào website.
- Xây dựng và xử lý biểu mẫu (form) HTML với input, checkbox, radio và textarea.
- Sử dụng các kỹ thuật nâng cao như <canvas>, <svg> và nhúng nội dung từ bên ngoài.
- Thực hành xây dựng trang web cá nhân hoặc landing page hoàn chỉnh.
- Nắm các nguyên tắc tối ưu SEO cơ bản và chuẩn bị kết hợp HTML với CSS & JavaScript.
Nội dung khóa học
5 chương • 43 bài học • 0 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.
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.
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.
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ả.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Progress & Meter
Hiển thị tiến trình (<progress>) và chỉ số đo (<meter>) cho các thông tin động.
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.
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.
Meta tags
Giới thiệu thẻ <meta> để cấu hình charset, viewport, description, keywords cho SEO và mobile.
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.
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.
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.
Selectors cơ bản
Chọn phần tử theo thẻ, class, id, nhóm selector và ý nghĩa độ ưu tiên (specificity).
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.
Màu sắc & nền
Thiết lập màu bằng HEX, RGB, HSL; thêm background image và gradient.
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ỹ.
Display
Phân biệt block, inline, inline-block và ứng dụng.
Flexbox cơ bản
Tạo layout linh hoạt với justify-content, align-items, flex-wrap.
Grid cơ bản
Chia layout thành hàng/cột dễ dàng với CSS Grid.
Media queries
Responsive design cho nhiều kích thước màn hình (mobile-first).
Best practices HTML+CSS
Best practices HTML+CSS
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.
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ế.
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ì.
Xây dựng header & navigation
Tạo logo, menu điều hướng, link anchor đến các phần trong trang.
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.
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.
Form liên hệ
Tạo form responsive để người dùng gửi thông tin liên hệ.
Kiểm tra & tối ưu
Test SEO cơ bản, responsive, lỗi HTML/CSS trước khi đưa lên mạng.
Deploy website
Đưa trang web lên GitHub Pages, Netlify hoặc Vercel và chia sẻ link.
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.