Cách thiết lập dự án thực hành CSS và HTML của bạn với trình chỉnh sửa mã

Hướng dẫn này là một phần của loạt bài về cách tạo và tùy chỉnh trang web này bằng CSS, một ngôn ngữ biểu định kiểu được sử dụng để kiểm soát việc trình bày các trang web. Bạn có thể theo dõi toàn bộ loạt bài này để tạo lại trang web trình diễn và làm quen với CSS hoặc sử dụng các phương pháp được mô tả ở đây cho các dự án trang web CSS khác.

---

Trong hướng dẫn này, bạn sẽ cài đặt các folder và file cần thiết để khám phá CSS và xây dựng một trang web. Sử dụng editor mã, bạn sẽ tạo một folder dự án cho trang web của ta , một folder và file cho mã CSS của ta , một file cho mã HTML của ta và một folder cho hình ảnh. Loạt bài hướng dẫn này sử dụng Visual Studio Code , một trình soạn thảo mã có sẵn miễn phí 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. Lưu ý các hướng dẫn nhất định có thể cần được sửa đổi một chút nếu bạn sử dụng editor khác.

Cách tạo file và folder HTML và CSS

Sau khi mở editor bạn muốn , hãy mở một folder dự án mới và đặt tên là css-practice . Bạn sẽ sử dụng folder này để lưu trữ tất cả các file và folder bạn 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 là css-practice :

Tiếp theo, tạo một folder mới bên trong css-practice và đặt tên là css . Bên trong folder này, hãy mở một file mới trong folder dự án của bạn và lưu nó dưới dạng styles.css — đây là file bạn sẽ sử dụng để lưu trữ các luật kiểu CSS của ta . Nếu bạn đang sử dụng Visual Studio Code, bạn có thể tạo một folder 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 css-practice Practice, chọn “Thư mục mới” và tạo folder css . Sau đó, nhấp vào Nhấp chuột Right Click (trên Windows) hoặc CTRL + Left Click (trên Mac) trên folder css mới, chọn “Tệp mới” và tạo file styles.css như minh họa trong gif bên dưới:

Lưu file và để nó mở.

Bạn cũng cần tạo một file để thêm nội dung HTML của ta — văn bản, hình ảnh và các phần tử HTML sẽ được hiển thị trong trình duyệt. Trong folder dự án css-practice , hãy mở thêm một file mới và lưu nó dưới dạng index.html giống như cách bạn đã tạo file styles.css ở trên. Đảm bảo lưu index.html này trong folder css-practice chứ không phải trong folder css .

Tiếp theo, bạn cần thêm một dòng mã trong tài liệu index.html hướng dẫn trình duyệt sử dụng file styles.css làm biểu định kiểu của ta . Để thực hiện việc này, bạn sẽ sử dụng thẻ <link> HTML và liên kết đến file styles.css . Thêm đoạn mã sau vào trang HTML của bạn:

<link rel="stylesheet" href="css/styles.css"> 

Đoạn mã này yêu cầu trình duyệt diễn giải mã HTML theo biểu định kiểu có tại css/styles.css. Đảm bảo rằng bạn không xóa dòng này trong khi thêm hoặc xóa nội dung vào index.html của bạn trong suốt loạt bài hướng dẫn này. Lưu index.html của bạn và giữ nó mở.

Cuối cùng, tạo một folder bổ sung bên trong css-practice và đặt tên cho nó là images giống như cách bạn đã tạo folder css ở trên. Thư mục này sẽ là nơi bạn lưu bất kỳ hình ảnh nào bạn sử dụng trong loạt bài hướng dẫn này.

Bây giờ, bạn sẽ có một folder dự án có tên css-practice chứa các folder và file cần thiết để khám phá CSS trong loạt bài hướng dẫn này:

• Một folder có tên css chứa file styles.css
• Một folder trống có tên là images
• Tệp có tên là index.html

Nếu bạn đang sử dụng Visual Studio Code, editor bây giờ sẽ hiển thị cây file sau và các file đang mở:

Lưu ý tên file bao gồm phần mở rộng ( .html và .css ) đề cập đến loại nội dung mà chúng chứa. Bạn sẽ thêm nội dung vào các file này trong các bài tập thực hành của ta trong phần hướng dẫn tiếp theo.

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

Độ chính xác rất quan trọng khi làm việc với HTML và CSS. 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 hoặc CSS 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 như được viết trong hướng dẫn. Mặc dù ta khuyến khích bạn viết mã theo cách thủ công cho mục đích học tập, đôi khi copy paste có thể hữu ích đảm bảo rằng mã của bạn trùng với các ví dụ.

Lỗi HTML và CSS có thể do một số nguyên nhân. Kiểm tra các luật đánh dấu và CSS của bạn để biết 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. Bạn cũng nên đảm bảo bạn không vô tình sử dụng dấu ngoặc kép “xoăn” hoặc “thông minh” như “ và " thường được sử dụng bởi các trình xử lý văn bản. Dấu ngoặc kép được thiết kế cho văn bản có thể đọc được và sẽ gây ra lỗi trong mã của bạn vì chúng không được trình duyệt công nhận là dấu ngoặc kép. Bằng lệnh trực tiếp dấu ngoặc kép vào trình soạn thảo mã, bạn có thể đảm bảo mình đang sử dụng đúng loại.

Ngoài ra, mỗi khi bạn thay đổi mã, 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ã.

Kết luận

Đến đây bạn đã sẵn sàng để tiếp tục với loạt bài hướng dẫn. Trong hướng dẫn tiếp theo, bạn 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 tạo phần tiêu đề của trang web bằng CSS (Phần 1)
2020-10-13
Cách tạo kiểu cho phần thân của trang web bằng CSS
2020-10-13
Cách tạo kiểu cho image bằng CSS
2020-10-13
Cách khai báo giá trị cho nhiều thuộc tính trong quy tắc CSS
2020-10-13
Cách thiết lập dự án thực hành CSS và HTML của bạn với trình chỉnh sửa mã
2020-10-13
Cách thiết lập dự án trang web CSS và HTML của bạn
2020-10-12
Cách thêm lịch sử và kỹ năng giáo dục của bạn vào trang web của bạn bằng CSS (Phần 5)
2020-10-12
Cách tạo ID bằng CSS
2020-10-12
Giới thiệu ngắn gọn về CSS
2020-10-12
Cách tạo lớp học bằng CSS
2020-10-12