Để khám phá HTML trong thực tế và bắt đầu xây dựng một trang web HTML, ta cần cài đặt một dự án mới bằng editor . Loạt hướng dẫn này sử dụng Visual Studio Code , một trình soạn thảo mã miễn phí có sẵn cho Mac, Windows hoặc Linux, nhưng bạn có thể sử dụng bất kỳ trình soạn thảo mã nào bạn thích.

Sau khi mở editor bạn muốn , hãy mở một folder dự án mới và đặt tên là html-practice . Ta sẽ sử dụng folder này để lưu trữ tất cả các file và folder ta tạo trong quá trình của loạt bài hướng dẫn này.

Để tạo một folder dự án mới trong Visual Studio Code, hãy chuyển đến mục menu “Tệp” ở menu trên cùng và chọn “Thêm folder vào không gian làm việc”. Trong cửa sổ mới, nhấp vào nút “Thư mục mới” và tạo một folder mới có tên html-practice như minh họa trong gif bên dưới:

Tiếp theo, tạo một file mới có tên là index.html bên trong folder html-practice Practice. Ta sẽ sử dụng file này thông qua loạt bài hướng dẫn để thử nghiệm với HTML. Nếu bạn đang sử dụng Visual Studio Code, bạn có thể tạo file mới bằng cách sử dụng Right Click (trên Windows) hoặc CTRL + Left Click (trên Mac) trên folder html-practice , chọn “Tệp mới” và tạo index.html file index.html như minh họa trong gif dưới đây:

Đến đây bạn có một folder và file dự án để khám phá HTML. Ta sẽ quay lại file này trong phần hướng dẫn phía trước.

Gỡ lỗi và khắc phục sự cố CSS và HTML

Trước khi bắt đầu với các bài tập HTML, hãy lưu ý độ chính xác là rất quan trọng khi viết HTML. Thậm chí một khoảng trống thừa hoặc ký tự bị gõ sai có thể khiến mã của bạn không hoạt động như mong đợi.

Nếu mã HTML của bạn không hiển thị trong trình duyệt như dự định, hãy đảm bảo bạn đã viết mã chính xác.Để khắc phục lỗi, hãy kiểm tra các khoảng trống thừa hoặc thiếu, các thẻ bị thiếu hoặc sai chính tả và dấu câu hoặc ký tự bị thiếu hoặc không chính xác. Mỗi lần bạn thay đổi mã của bạn , hãy nhớ lưu file trước khi reload trong trình duyệt để kiểm tra kết quả.

Ghi chú nhanh về các tính năng hỗ trợ HTML tự động

Một số editor mã — chẳng hạn như trình soạn thảo Mã Visual Studio mà ta đang sử dụng trong loạt bài này — cung cấp hỗ trợ tự động để viết mã HTML. Đối với Visual Studio Code, hỗ trợ đó bao gồm các đề xuất thông minh và tự động hoàn thành . Mặc dù hỗ trợ này thường hữu ích nhưng hãy lưu ý bạn có thể tạo thêm mã sẽ tạo ra lỗi nếu bạn không quen làm việc với các tính năng hỗ trợ này. Nếu bạn thấy các tính năng này gây mất tập trung, bạn có thể tắt chúng trong tùy chọn của editor mã.

Bây giờ ta đã sẵn sàng để bắt đầu học cách hoạt động của ngôn ngữ CSS. Trong hướng dẫn tiếp theo, ta sẽ bắt đầu khám phá cách các luật CSS được sử dụng để kiểm soát kiểu và bố cục của nội dung HTML trên trang web.

---

---

Các tin liên quan

Cách thêm chân trang vào trang web của bạn bằng HTML
2020-09-16
Cách sử dụng và hiểu các phần tử HTML
2020-09-16
Cách xem mã nguồn của tài liệu HTML
2020-09-16
Cách sử dụng và hiểu các phần tử HTML
2020-09-16
Cách sử dụng và hiểu các phần tử HTML
2020-09-16
Cách thêm image vào trang web của bạn bằng HTML
2020-09-15
Cách tạo phần nội dung trang chủ của bạn bằng HTML
2020-09-15
Sử dụng ExpressJS để phân phối tệp HTML
2020-09-15
Cách thêm image vào trang web của bạn bằng HTML
2020-09-15
Cách thêm hình nền vào phần trên cùng của trang web bằng HTML
2020-09-14