div class = "note">
Loạt bài hướng dẫn này sẽ hướng dẫn bạn cách tạo và tùy chỉnh thêm trang web này bằng HTML, ngôn ngữ đánh dấu tiêu chuẩn được sử dụng để hiển thị tài liệu trong trình duyệt web. Không cần trải nghiệm viết mã trước nhưng ta khuyên bạn nên bắt đầu từ đầu loạt bài nếu bạn muốn tạo lại trang web trình diễn.
Ở phần cuối của loạt bài này, bạn sẽ có một trang web sẵn sàng để triển khai lên cloud và làm quen cơ bản với HTML. Biết cách viết HTML sẽ cung cấp nền tảng vững chắc để học các kỹ năng phát triển web front-end bổ sung, chẳng hạn như CSS và JavaScript.
Để 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
