Cách liên kết CSS với HTML trong Atom

Trình soạn thảo văn bản, còn được gọi là trình soạn thảo mã, là ứng dụng được các nhà phát triển sử dụng để viết mã. Chúng làm nổi bật và định dạng mã của bạn để dễ đọc và dễ hiểu hơn. Nếu bạn đã sử dụng Codecademy, bạn đã quen thuộc với trình soạn thảo văn bản. Đó là khu vực bạn viết mã của mình vào

Trình soạn thảo văn bản cung cấp một số lợi thế cho các nhà phát triển web

• Đánh dấu cú pháp theo ngôn ngữ cụ thể
• Tự động thụt lề mã
• Phối màu phù hợp với sở thích của bạn và tối ưu hóa khả năng đọc mã
• Plug-in để bắt lỗi trong mã
• Chế độ xem dạng cây của các thư mục và tệp trong dự án của bạn, vì vậy bạn có thể điều hướng dự án của mình một cách thuận tiện
• Các phím tắt để phát triển nhanh hơn

1. CHỌN TRÌNH SOẠN THẢO VĂN BẢN

Có một số trình soạn thảo văn bản để lựa chọn. Atom và Sublime Text là hai trong số các trình soạn thảo văn bản phổ biến nhất được các nhà phát triển sử dụng

Sublime Text đã là trình soạn thảo văn bản được lựa chọn trong nhiều năm. Nó ổn định và đáng tin cậy

Atom được GitHub phát hành sau Sublime Text. Đó là một trình soạn thảo văn bản hoàn toàn có thể tùy chỉnh. Vì Atom được viết bằng HTML, CSS và JavaScript nên bạn có thể tự tùy chỉnh nó sau khi đã học các ngôn ngữ đó

Cả hai trình soạn thảo văn bản đều tuyệt vời để phát triển, vì vậy bạn không thể đưa ra quyết định tồi tại đây. Khi bạn tiến xa hơn trong sự nghiệp viết mã của mình, hãy thử một trình chỉnh sửa mã khác để xem những tính năng nào hoạt động tốt với quy trình làm việc của bạn

bài tập tôi. Tải xuống nguyên tử

Video này hướng dẫn chi tiết cách tải và cài đặt Atom

Trong bài tập này, chúng tôi khuyên bạn nên làm theo các bước sau để tải xuống Atom

hệ điều hành X

Atom hoạt động trên máy Mac chạy OS X 10. 8 hoặc muộn hơn. Truy cập trang chủ Atom và nhấp vào Tải xuống cho Mac. Trong giây lát, Atom sẽ xuất hiện trong thư mục Tải xuống của bạn dưới dạng. tập tin nén

Nhấp vào nguyên tử-mac. zip để giải nén ứng dụng, sau đó kéo biểu tượng mới vào thư mục Ứng dụng của bạn. Nhấp đúp vào biểu tượng ứng dụng để tải Atom và bắt đầu

các cửa sổ

Atom hỗ trợ Windows 7 trở lên. Truy cập trang web này và tải xuống các cửa sổ nguyên tử. khóa kéo. Trong giây lát, Atom sẽ xuất hiện trong thư mục Tải xuống của bạn dưới dạng. tập tin zip

Làm theo hướng dẫn trong Windows Installer để bắt đầu. Bạn có thể truy cập trang cài đặt Windows của Atom để được hướng dẫn chi tiết hơn

2. thư mục phát triển

Trước khi sử dụng trình soạn thảo văn bản của bạn, điều quan trọng là phải thiết lập một hệ thống tệp có tổ chức. Khi số lượng và quy mô dự án của bạn tăng lên, việc biết nơi lưu dự án mới và tìm dự án cũ ngày càng trở nên quan trọng.

Hầu hết các nhà phát triển lưu trữ dự án của họ trong một thư mục dễ tìm [thư mục mà bạn có thể quen gọi là thư mục]. Tại Codecademy, chúng tôi khuyên bạn nên đặt tên cho thư mục này là projects. Nó sẽ lưu trữ tất cả các dự án mã hóa của bạn. Bất cứ khi nào bạn tạo một dự án mới, dù nhỏ đến đâu, bạn phải luôn tạo một thư mục mới bên trong thư mục projects của mình. Bạn sẽ thấy rằng các dự án một tệp có thể nhanh chóng chuyển thành các dự án lớn, nhiều thư mục

bài tập II. Tạo một thư mục dev

Dưới đây là các bước bạn cần thực hiện để tạo một thư mục mới cho tất cả các dự án lập trình của mình. Bạn cũng sẽ học cách tải thư mục dự án mới vào Atom. Đối với bước 1 và 2, hãy điều hướng đến một thư mục bằng Finder [người dùng Mac] hoặc My Computer [người dùng PC]

1. Điều hướng đến một thư mục mà bạn thường xuyên truy cập và tạo một thư mục mới có tên là projects. Trên máy Mac, đây có thể là tài khoản Người dùng của bạn. Trên PC, bạn có thể muốn lưu cái này vào ổ C của mình

2. Bên trong thư mục projects, tạo một thư mục mới có tên là HelloWorld. Mọi thứ bạn thêm vào thư mục này sẽ là một phần của dự án HelloWorld của bạn

3. Mở Atom trên máy tính của bạn

4. Atom cung cấp chế độ xem dạng cây cho dự án của bạn, vì vậy bạn có thể điều hướng thuận tiện đến các thư mục và tệp khác nhau. Trong thanh menu Atom, chọn Tệp > Thêm thư mục dự án. Thao tác này sẽ khởi chạy trình quản lý tệp của bạn. Điều hướng đến thư mục HelloWorld và chọn Mở. Thư mục sẽ mở trong ngăn bên của Atom. Tại thời điểm này, không nên có bất kỳ nội dung nào trong thư mục. Chúng tôi sẽ thêm một tệp trong bài tập tiếp theo

3. Thêm một tập tin

Khi bạn mở Atom, Hướng dẫn chào mừng sẽ xuất hiện. Hiện tại, chúng ta sẽ bỏ qua việc tìm hiểu về Atom và bắt đầu viết mã

Trước khi bạn tìm hiểu cách thêm tệp vào thư mục dự án, điều quan trọng là phải hiểu mục đích của phần mở rộng tệp

Phần mở rộng tệp là hậu tố của tên tệp và mô tả loại nội dung mà tệp chứa. Phần mở rộng tệp luôn là 3 hoặc 4 ký tự cuối cùng trong tên tệp, trước dấu chấm. Ví dụ: phần mở rộng tệp HTML là .html và nó yêu cầu trình duyệt [và các ứng dụng khác] diễn giải nội dung của tệp dưới dạng một trang web

Khi Atom tải thư mục dự án, bạn có thể thêm tệp. Các bước bên dưới mô tả cách thêm tệp. Đừng lo lắng về việc làm điều này trên máy tính của riêng bạn. Chúng ta sẽ làm điều đó trong Bài tập III

1. Trong thanh trên cùng của Atom, chọn Tệp > Tệp mới. Một tệp trống, không có tiêu đề sẽ xuất hiện
2. Trong thanh trên cùng của Atom, chọn Tệp > Lưu hoặc Lưu dưới dạng. Đặt tên tệp với phần mở rộng tệp phù hợp [.html, projects0, projects1]. Điều quan trọng là bạn phải bao gồm phần mở rộng tệp chính xác, để các chương trình biết cách diễn giải nội dung của nó
3. Bắt đầu mã hóa. Lưu tệp của bạn thường xuyên. Điều này sẽ làm giảm khả năng mất công việc chưa được lưu

Bài tập III. thêm một tập tin

Trong bài tập này, bạn sẽ tạo một chỉ mục. html trong dự án Hello World của bạn

1. Trong thanh trên cùng của Atom, chọn Tệp > Tệp mới. Một tệp trống, không có tiêu đề sẽ xuất hiện
2. Trước khi bạn lưu tệp, hãy sao chép và dán mã HTML soạn sẵn sau

    
Hello World
Lưu ý. Tất cả văn bản trong tệp của bạn có cùng màu. Điều này sẽ thay đổi sau khi bạn lưu tệp dưới dạng .html
3. Trong thanh trên cùng của Atom, chọn Tệp > Lưu hoặc Lưu dưới dạng
4. Đặt tên cho chỉ mục tệp. html. Điều quan trọng là bạn phải sử dụng phần mở rộng tệp .html để trình soạn thảo văn bản và trình duyệt web biết cách diễn giải mã của bạn
4. Phần mở rộng tệp và đánh dấu cú pháp
Atom và các trình soạn thảo văn bản khác có thể diễn giải các phần mở rộng tệp và cung cấp tính năng tô sáng cú pháp theo ngôn ngữ cụ thể. Đánh dấu cú pháp là một công cụ để làm cho mã dễ đọc hơn. Hãy nhìn vào chỉ số của bạn. tệp html. Văn bản và thẻ có màu khác nhau. Đây là cách Atom làm nổi bật. cú pháp html. Với mỗi ngôn ngữ mới mà bạn học, Atom sẽ đánh dấu văn bản theo cách giúp mã của bạn dễ đọc. Điều này có thể khác với các trình soạn thảo văn bản khác và cũng khác với cách đánh dấu mã của bạn trên Codecademy
Bài tập IV. Mở tệp HTML của bạn trong trình duyệt web
Tại thời điểm này, tệp của bạn đã sẵn sàng để xem trong trình duyệt web. Các bước sau đây nên được thực hiện bên ngoài Atom
 

			
Làm cách nào để thiết lập Atom cho HTML và CSS?
			
Tải xuống Atom và cài đặt nó theo yêu cầu cho hệ điều hành của bạn. Người dùng Mac OS X cần di chuyển ứng dụng Atom vào thư mục Ứng dụng. Trên Windows, bạn cần thực thi. tập tin exe. Sau khi cài đặt xong mở Atom lên và bắt tay vào chỉnh thôi
		
			
Chúng tôi có thể sử dụng CSS trong Atom không?
			
Có, bạn có thể kết nối nhiều tệp CSS với một tệp HTML duy nhất . Hoặc Cũng có thể, nhập nhiều tệp CSS trong tệp CSS chính Có thể thực hiện bằng cách sử dụng từ khóa @import. 
		
			
Tại sao tôi không thể liên kết CSS với HTML?
			
Đảm bảo rằng bạn thêm thuộc tính rel vào thẻ liên kết 
 . Nếu bạn bỏ qua thuộc tính rel từ thẻ