Dù bạn quan tâm đến xây dựng trang web riêng, hay theo đuổi sự nghiệp lập trình viên web, kiến thức về HTML là kỹ năng thiết yếu.
Ngôn ngữ Đánh dấu Siêu văn bản (Hypertext Markup Language), hay HTML, là một trong ba công nghệ cốt lõi cung cấp sức mạnh cho hầu như mọi trang web trên internet. HTML cho phép nhà thiết kế và lập trình viên web định nghĩa cấu trúc trang web. Sử dụng HTML, lập trình viên quyết định vị trí các phần tử như văn bản hoặc hình ảnh nên xuất hiện trên trang web.
HTML không chỉ dành cho người kỹ thuật muốn học phát triển web. Ngôn ngữ này có thể dùng trong nhiều bối cảnh khác. Ví dụ, nhiều nền tảng thiết kế web kéo-thả cho phép người dùng dùng HTML nếu muốn tự do tùy chỉnh trang hơn.
Hướng dẫn này sẽ thảo luận cách tốt nhất để học HTML trực tuyến. Chúng tôi sẽ đưa ra bộ các bước tiếp theo rõ ràng để giúp bạn bắt đầu học HTML.
HTML là gì?
HTML là ngôn ngữ lập trình dùng để định nghĩa cấu trúc trang web. Đây là cách mọi thứ như văn bản, hình ảnh, và liên kết nên xuất hiện trên trang web.
Công nghệ như CSS cho phép bạn tạo kiểu cho trang web. HTML, mặt khác, tập trung vào xây dựng bản thiết kế (blueprint) cho cách trang nên xuất hiện trên trang web.
HTML dùng thẻ (tags) để tạo cấu trúc cho trang web. Các thẻ này cho phép bạn tạo tiêu đề, video, hình ảnh, và các phần tử khác xuất hiện trên trang web. Dưới đây là vài ví dụ thẻ HTML bạn có thể gặp:
<p>cho phép tạo đoạn văn bản.<h1>cho phép tạo tiêu đề lớn.<iframe>cho phép nhúng nội dung trang web khác, như video YouTube, vào trang web.
Hầu hết thẻ có thẻ bắt đầu (như "<p>") và thẻ kết thúc (như "</p>"). Khi bạn đã làm chủ các thẻ này, không có giới hạn cho độ phức tạp cấu trúc trang web của bạn.
Tại sao nên học HTML?
HTML và CSS là khối xây dựng của internet
HTML và CSS là hai ngôn ngữ lập trình cơ bản nhất dùng trong phát triển web. Nếu không có chúng, chúng ta không có trang web.
Biết cách viết mã HTML và CSS sẽ cho bạn cái nhìn rõ ràng về cách internet hoạt động. Bạn sẽ hiểu tốt hơn về cách các trang web bạn dùng hàng ngày được xây dựng.
Bạn từng thắc mắc trang web hiển thị văn bản màu như thế nào, hoặc cách trang web nhúng video YouTube? Nếu bạn biết viết mã HTML và CSS, bạn sẽ không phải thắc mắc. Bạn sẽ biết tất cả các phần cơ bản của cách trang web được xây dựng.
HTML và CSS giúp bạn giỏi hơn công việc hiện tại
Biết chút HTML và CSS có thể giúp ích ngay cả khi bạn không muốn trở thành lập trình viên web.
Ví dụ, nếu bạn là nhà marketing, biết cách trang web được xây dựng cho phép bạn thiết kế chiến dịch marketing hiệu quả hơn. Hoặc nếu bạn là chuyên gia SEO, biết về cấu trúc trang web giúp tinh chỉnh chiến lược. HTML và CSS là kỹ năng tốt để thành thạo cho bất kỳ công việc nào liên quan đến web.
Bạn chịu trách nhiệm thành công khách hàng? Bạn có thể dùng kiến thức HTML thiết kế email hiệu quả hơn gửi cho khách. Hay bạn chịu trách nhiệm bán hàng? Bạn có thể dùng HTML thiết kế biểu mẫu tùy chỉnh đặt trên trang web công ty.
Lập trình viên web được tìm kiếm nhiều
Khi quyết định kỹ năng nào để xây dựng, câu hỏi "kỹ năng này có giúp sự nghiệp?" có thể nảy ra. Học HTML và CSS có thể giúp bạn bước vào sự nghiệp công nghệ như lập trình viên web hoặc thiết kế web.
HTML và CSS là hai kỹ năng cơ bản bắt buộc cho tất cả công việc thiết kế và phát triển web. Kết quả, các kỹ năng này có nhu cầu cao.
Theo dữ liệu từ Glassdoor, có hơn 53.000 tin tuyển dụng lập trình viên web tại Mỹ (tính đến tháng 4/2020).
Ngoài ra, Bộ Thống kê Lao động Mỹ báo cáo việc làm phát triển web sẽ tăng 13% đến năm 2028. Bộ mô tả tăng trưởng này là "nhanh hơn trung bình nhiều". Kết hợp dữ liệu Glassdoor, bức tranh rõ ràng—lập trình viên web có nhu cầu cao.
HTML dùng để làm gì?
Ngắn gọn, mã HTML định dạng văn bản, hình ảnh, và phương tiện khác cấu thành trang web. Ngôn ngữ giao tiếp với máy tính bằng chuỗi thuộc tính và phần tử bên trong thẻ mở (<>) và thẻ đóng dùng ngoặc góc và dấu gạch chéo (</>).
HTML đã phát triển và cho phép trang web chứa video, âm thanh, và hơn nữa. Tuy quan trọng lưu ý HTML không thể tạo trang web hoàn toàn chức năng chỉ bằng mình nó. Ngôn ngữ này thường dùng cùng CSS (Cascading Style Sheets) và JavaScript. Các ngôn ngữ này định nghĩa kiểu dáng và tính năng tương tác trên trang, tương ứng.
Mất bao lâu để học HTML?
Hầu hết lập trình viên mới có thể học cơ bản HTML trong hai đến ba tuần. Tuy nhiên, thực hành hàng ngày cần thiết để thành thạo ngôn ngữ và hiểu toàn bộ tiềm năng. Hầu hết lập trình viên khuyên thực hành khoảng 2-4 giờ/ngày.
HTML có nhiều tính năng và bạn không thể bao quát hết trong ba tuần. Thậm chí có framework HTML mở rộng ngôn ngữ bằng cách cung cấp thành phần mẫu cho trang web.
Bạn nên kỳ vọng mất ít nhất một năm để sẵn sàng cho công việc "chuyên nghiệp" lập trình viên web. Nhưng, việc học không bao giờ kết thúc. HTML vẫn được cập nhật hôm nay. Có hàng trăm thẻ và tiêu chuẩn bạn có thể học.
Hầu hết người học bằng cách làm, nên quan trọng là đưa kỹ năng mới vào thực hành sớm nhất có thể. Làm theo tinh thần Nike và "chỉ việc làm thôi". Định dạng trang web, thử nghiệm tính năng, hoặc làm dự án để tăng cường khả năng.
Cách học HTML nhanh
Làm thế nào để học viết mã HTML? Đây là câu hỏi mọi người mới đối mặt. Dù bạn đã biết viết mã, vẫn khó biết bắt đầu từ đâu.
Hãy khám phá vài bước bạn nên làm theo để bắt đầu hành trình học HTML hiệu quả.
Bước 1: Bắt đầu với Cơ bản
Điều tốt nhất khi bắt đầu học HTML là làm chủ các thẻ HTML cơ bản. Sau đó, khi bạn cảm thấy sẵn sàng, bạn có thể theo đuổi các khái niệm kỹ thuật phức tạp hơn với tự tin. Để giúp bạn bắt đầu đúng đắn, đây là danh sách chủ đề chính bạn nên tập trung:
Cấu trúc và Thẻ HTML
Điều đầu tiên bạn nên học về tài liệu HTML là cấu trúc trang web và cách trang web được tạo. Điều này cho bạn chỉ báo rõ ràng về cách trang web kết hợp. Đây là cái nhìn bạn cần cho mọi trang web bạn xây dựng.
Khi đã học cấu trúc trang web, bạn có thể khám phá thẻ cơ bản. Thẻ dùng để thêm tính năng vào trang web. Đây là chủ đề chính bạn nên học về cấu trúc HTML:
- Cấu trúc trang web như thế nào?
- Tiêu đề HTML (
<h1>,<h2>…<h6>) - Thẻ
<div> - Trình bày văn bản dùng
<p>và<span> - Tạo kiểu văn bản
- Danh sách có thứ tự và không thứ tự (
<ol>và<ul>) - Hình ảnh (
<img>) - Video (
<iframe>,<video>)
Bảng HTML
Thường khi thiết kế trang web, bạn muốn hiển thị bảng dữ liệu. Nếu xây dựng trang web trường học, bạn có thể muốn hiển thị lịch học. Để trình bày dữ liệu này, bạn cần dùng bảng.
HTML cung cấp nhiều thẻ tạo bảng tùy chỉnh, là phần thiết yếu của nhiều trang web hiện đại. Chủ đề chính bạn nên học:
- Tạo bảng
- Hàng bảng và tiêu đề bảng
- Dữ liệu bảng
- Viền bảng
- Kéo dài cột và hàng
- Head, body, footer của bảng
Biểu mẫu HTML
Biểu mẫu là tính năng phổ biến khác cho phép trang thu thập thông tin từ người dùng. Ví dụ, trang web có thể có biểu mẫu "liên hệ" cho phép người dùng gửi bình luận.
Biểu mẫu HTML có thể bao gồm menu thả xuống, hộp văn bản một dòng, hộp văn bản lớn, hộp kiểm, và các loại trường biểu mẫu khác. Đây là chủ đề chính bạn nên học khi bắt đầu học biểu mẫu HTML:
Thêm Kiểu dáng cho Trang HTML
Cho đến nay, chúng ta đã nói cách dùng HTML phát triển cấu trúc trang web. Nhưng nếu muốn thêm kiểu dáng tùy chỉnh, bạn cần công nghệ khác: Cascading Style Sheets, hay CSS.
CSS cho phép áp dụng kiểu dáng cho phần tử HTML trên trang web. Các kiểu này quyết định phần tử xuất hiện như thế nào trong trình duyệt. Ví dụ, bạn có thể đổi màu dòng văn bản dùng CSS, hoặc áp dụng viền cho bảng.
Dưới đây là vài chủ đề chính bạn nên học:
- CSS là gì?
- CSS nội tuyến (Inline CSS)
- CSS nội bộ vs. bên ngoài (Internal vs. external CSS)
- Cách viết quy tắc kiểu CSS
Sau đó, khi đã học các chủ đề này, bạn có thể khám phá kiểu CSS dành riêng cho phần tử, như cách tạo kiểu bảng, hoặc cách tạo kiểu tiêu đề.
Cách tốt nhất học HTML miễn phí
Trong hướng dẫn này, chúng ta đã thảo luận chủ đề cơ bản bạn cần biết để viết mã HTML. Nhưng bây giờ bạn sẽ thắc mắc "tôi học chủ đề này ở đâu?".
Mọi người có phong cách học riêng. Không có một nơi duy nhất bạn nên đi tìm hỗ trợ khi bắt đầu học lập trình.
Tuy nhiên, đối với hầu hết mọi người, khóa học hoặc hướng dẫn tương tác là lựa chọn tốt để học HTML. Bởi vì khóa học và hướng dẫn này cho bạn cái nhìn sâu sắc về lập trình HTML. Bạn không chỉ học lý thuyết, mà thực tế áp dụng kỹ năng. Cuối khóa học, bạn nên có dự án hữu hình để khoe cho người khác.
Khóa học HTML trực tuyến
Học HTML bởi Codecademy
- Chi phí: Miễn phí
- Đối tượng: Người mới bắt đầu
Hơn 3,8 triệu người đăng ký khóa học HTML của Codecademy kể từ khi khóa học bắt đầu. Trong khóa này, bạn học về thẻ thường dùng nhất trong HTML và cách dùng chúng xây dựng trang web.
Giới thiệu HTML5 bởi Đại học Michigan
- Chi phí: Miễn phí
- Đối tượng: Người mới bắt đầu
Khóa học nhằm dạy nền tảng cần thiết tạo trang web. Bạn khám phá lý thuyết sau cách trang web hoạt động và获得 kiến thức thực tế HTML qua ví dụ.
HTML5 Coding Essentials and Best Practices bởi W3C
- Chi phí: Miễn phí
- Đối tượng: Trung cấp
Khóa học do W3C cung cấp dạy tất cả cơ bản HTML5. Bạn học tất cả thẻ HTML5 mới và thấy HTML tiến hóa từ phiên bản đầu đến ngày nay. Bạn cũng học về hoạt ảnh, biểu mẫu, và đồ họa.
Sách HTML trực tuyến
HTML & CSS: Design and Build Websites bởi Jon Duckett
Cuốn sách là giới thiệu hoàn chỉnh ngôn ngữ HTML và CSS. Bạn học mọi thứ cần thiết xây dựng trang web. Sách cung cấp ví dụ chi tiết kèm đồ họa giúp hiểu thẻ HTML xuất hiện trên trang như thế nào.
A Smarter Way to Learn HTML & CSS bởi Mark Myers
Cuốn sách giúp học cơ bản HTML. Sau đó, người đọc khuyến khích làm theo ví dụ và thách thức mã để củng cố kiến thức. Cuối cuốn, bạn có hiểu vững cách xây dựng trang web.
HTML5 and CSS3 All-in-One for Dummies bởi Andy Harris
Cuốn sách trong series For Dummies tập trung viết trang web bằng HTML và CSS. Khác sách khác, cuốn này cũng chạm đến JavaScript, PHP và MySQL để bạn học kỹ năng tạo ứng dụng web full-stack.
Tài nguyên HTML trực tuyến
Learn HTML
Learn HTML là trang web tự gọi là "cách dễ nhất học HTML & CSS". Trang có nhiều hướng dẫn cơ bản và nâng cao để học HTML. Bạn cũng tìm thấy hướng dẫn CSS hữu ích.
W3Schools HTML Tutorial
W3Schools nổi tiếng hướng dẫn phát triển web. Bạn tìm thấy hướng dẫn chi tiết, ngắn gọn bao phủ từ định dạng HTML đến ngữ nghĩa.
Codecademy HTML Cheat Sheet
Bảng tóm tắt này cho cái nhìn sơ lược tất cả thẻ HTML chính bạn có thể dùng. Bạn dùng bảng này làm tài liệu tham khảo hoặc mở rộng kiến thức thẻ HTML.
Các tài nguyên từ hướng dẫn ngắn đến khóa học đầy đủ. Chúng bao phủ tất cả chủ đề thiết yếu bạn cần làm chủ để học viết mã HTML. Sau khi học cơ bản, bạn sẵn sàng bắt đầu làm dự án riêng.
Bước 2: Xây dựng Dự án
Xây dựng dự án là cách tuyệt vời củng cố kỹ năng đã học và đưa vào thực hành. Sau khi đọc tất cả cơ bản về cách trang web được xây dựng, bạn sẽ muốn bắt đầu dự án bạn quan tâm.
Bước đầu xây dựng dự án là tự hỏi: Tôi nên xây dựng gì? Không có câu trả lời sai. Hãy hỏi về vấn đề bạn gặp hàng ngày. Sau đó, suy nghĩ cách tạo giải pháp bằng mã. Bạn luôn quên thứ khi đi chợ? Bạn có thể xây dựng ứng dụng danh sách mua sắm.
Dù dự án gì, hãy chắc chắn đó là thứ bạn muốn làm.畢竟, đó là dự án của bạn!
Dưới đây vài ý tưởng giúp bạn bắt đầu suy nghĩ:
- Portfolio dự án phát triển web
- Trang chia sẻ danh sách quyên góp chiến dịch chính trị Mỹ
- Trang portfolio cho nhiếp ảnh gia
- Trang web quán cà phê hoặc bảo tàng địa phương
- Trang tra cứu trò chơi bài yêu thích
Đây chỉ là vài ý tưởng. Giới hạn duy nhất là trí tưởng tượng. Đó là đẹp của học lập trình: khi làm chủ cơ bản, bạn có thể xây dựng bất cứ gì! Quy tắc xây dựng trang đơn giản cũng dùng cho trang phức tạp.
Bước 3: Tham gia Cộng đồng Lập trình viên
Hãy nghĩ về số trang web hiện có. Điều này cho ý tưởng về số lập trình viên web tài năng trong cộng đồng.
Khi bắt đầu hành trình học mã HTML, tham gia cộng đồng lập trình web là ý tưởng hay. Cộng đồng tập hợp lập trình viên mọi trình độ—từ mới đến chuyên gia—với ai bạn có thể trò chuyện, chia sẻ ý tưởng, và cộng tác dự án.
Bạn không chắc bắt đầu đâu? Dưới đây vài cộng đồng tốt cho lập trình viên mới:
- Stack Overflow: Cộng đồng Hỏi & Đáp kỹ thuật. Trang có nhiều thảo luận HTML hữu ích.
- GitHub: Trang lưu trữ và chia sẻ mã. Nếu thiếu cảm hứng, có nhiều "danh sách dự án người mới" để tìm ý tưởng.
- Dev.to: Cộng đồng lập trình viên mọi loại. Dev.to có khu vực cộng đồng dành cho HTML và CSS tốt cho mọi trình độ.
Khi đã tham gia cộng đồng, hãy bắt đầu đóng góp sớm. Bạn biết giải pháp vấn đề ai? Viết và chia sẻ. Cần giúp đỡ? Đặt câu hỏi trên Stack Overflow.
Bước 4: Xin phản hồi và Nghiên cứu Thực hành tốt nhất
Mục tiêu đầu khi học HTML nên là làm chủ cơ bản. Khi sẵn sàng thách thức, bạn có thể bắt đầu dự án nâng cao.
Cách tuyệt vời phát triển kỹ năng HTML là nghiên cứu thực hành tốt nhất (best practices). Đây là quy ước lập trình viên khác dùng khi viết mã. Thực hành tốt được trân trọng bởi lập trình viên khác xem mã và nhà tuyển dụng tiềm năng.
Cách tốt nghiên cứu thực hành tốt là xin phản hồi. Khi xong dự án, nhờ bạn bè chấm và cho ý kiến. Nếu không biết bạn bè kỹ thuật, chia sẻ dự án trên Dev.to và xin phản hồi.
Bước 5: Thực hành tạo nên Sự hoàn hảo
Bạn có thể đã nghe này trước, nhưng đáng lặp lại—thực hành tạo nên sự hoàn hảo.
Khi học mã, dễ tìm cớ bỏ cuộc. Đôi khi dự án không theo ý, bạn nghĩ dừng lại dễ hơn tiếp tục.
Nhưng, đó là phần tự nhiên của học mã—đôi khi khó khăn. Nếu bạn cố gắng và kiên trì, bạn sẽ tinh chỉnh kỹ năng và tiến xa.
Bạn có thể thực hành bằng cách làm hướng dẫn trực tuyến, khóa học, dự án. Hoặc thử thách mã từ Codecademy và freeCodeCamp.
Nếu muốn thách thức thực, lướt Stack Overflow và thử giúp người mới giải quyết vấn đề.
Tổng kết
Học viết mã HTML là việc dùng thời gian có giá trị trong thế giới bị internet thống trị. HTML là ngôn ngữ tuyệt vời đầu tư cho lập trình viên web khao khát, hoặc bất kỳ ai quan tâm đến web.
HTML, cùng CSS và JavaScript, là một trong ba khối xây dựng cốt lõi của hầu hết trang web hiện đại. Kết quả, cộng đồng lập trình viên khổng lồ biết viết HTML. Có nhiều hướng dẫn viết sẵn trực tuyến giúp bạn làm chủ cơ bản.
Trung tâm đầu khi học HTML nên là cấu trúc, cú pháp, và dùng thẻ cơ bản như <p> và <img>. Sau đó, bạn có thể khám phá bảng, biểu mẫu, kết nối HTML và CSS, và chủ đề kỹ thuật khác.