Hướng dẫn what is the relationship between html and css? - mối quan hệ giữa html và css là gì?

bởi Kevin Kononenko

Nếu bạn đã từng đến thăm một thành phố có thể đi bộ như New York, thì bạn có thể hiểu cách mà HTML, CSS và JavaScript hoạt động cùng nhau.and JavaScript work together.

Khi bạn bắt đầu học phát triển web, bạn thường có thể thử một loạt các thách thức cơ bản về các nguyên tắc của HTML, CSS và JavaScript. Tuy nhiên, mỗi thử thách xảy ra trong môi trường hộp cát và không kiểm tra bạn trên nhiều ngôn ngữ cùng một lúc.

Ví dụ, hướng dẫn giới thiệu của JavaScript, thường sẽ tập trung vào các nguyên tắc cơ bản như các vòng lặp và ‘nếu các câu lệnh, thay vì sử dụng JavaScript cùng với HTML.

Sau khi bạn vượt qua các bài tập sơ bộ này, bạn đạt đến điểm mà bạn cần thiết lập trang web đầy đủ đầu tiên của mình. Ngay cả khi đây là một trang cá nhân, một trang mà bạn không bao giờ có ý định phát hành, bạn vẫn phải đối mặt với một loạt các thách thức mới như:

1. Làm cách nào để kết nối ba loại tệp khác nhau?
2. Sau khi tôi kết nối họ, họ sẽ làm việc cùng nhau như thế nào?
3. Làm cách nào để kiểm tra tất cả những điều này trên máy tính của riêng tôi?

Sau khi suy nghĩ về điều này trong một thời gian, tôi nhận ra rằng những tác phẩm này hoạt động cùng nhau theo cách giống như các thành phố vẫn có thể hoạt động. Điều này áp dụng ngay cả khi các doanh nghiệp liên tục di chuyển hoặc đi ra khỏi kinh doanh, hoặc các nhà phát triển bất động sản đang làm lại một số khu phố nhất định.

Vì vậy, tôi sẽ chỉ ra cách bạn có thể thiết lập môi trường phát triển đầu tiên của bạn với ba tác phẩm này. Để hiểu hướng dẫn này, bạn chỉ cần biết các phần cơ bản của HTML, CSS và JavaScript.

Ngay cả khi bạn chưa viết bất kỳ mã nào trong cuộc sống của bạn, bạn vẫn có thể hiểu cách liên kết ba ngôn ngữ.

Sự khác biệt giữa HTML, CSS và JavaScript

Hãy để tưởng tượng rằng bạn chịu trách nhiệm lên kế hoạch bố trí của một khu phố mới trong thành phố. Khu phố này sẽ có một số tòa nhà dân cư, một số quán ăn, chi nhánh ngân hàng và trung tâm mua sắm.

Điều này có vẻ một chiều. Nói cách khác, mỗi tòa nhà chỉ là một điểm trên bản đồ, không có sắc thái. Nhưng khi bạn đào sâu hơn một chút, bạn có thể thấy rằng mỗi tòa nhà thực sự có ba phần bạn có thể thay đổi:

1. Cấu trúc của chính tòa nhà
2. Trang trí nội thất và bên ngoài của tòa nhà
3. Các chức năng thực tế mà khách truy cập có thể thực hiện trong mỗi tòa nhà

Điều này tương ứng với ba loại tệp khác nhau mà bạn có thể sử dụng trong trang web đầu tiên của mình.

Một tệp HTML chứa cấu trúc của chính trang. Nó giống như cấu trúc của tòa nhà.HTML file contains the structure of the page itself. It is kind of like the structure of the building.

Một tệp CSS chứa kiểu dáng của trang. Nó cho phép bạn thay đổi màu sắc, định vị và nhiều hơn nữa. Nó giống như thiết kế của chính tòa nhà.CSS file contains the styling of the page. It allows you to change colors, positioning and more. It is kind of like the design of the building itself.

Tệp JavaScript xác định các yếu tố động và tương tác trên trang. Nó xác định những gì xảy ra khi người dùng nhấp, di chuột hoặc nhập vào các yếu tố nhất định. Đây là loại giống như chức năng của tòa nhà.JavaScript file determines the dynamic and interactive elements on the page. It determines what happens when users click, hover, or type within certain elements. This is kind of like the functionality of the building.

Hãy để lấy ví dụ về một trong những ngôi nhà. Một ngôi nhà có hai phòng ngủ, hai phòng tắm và hai câu chuyện. Đó là HTML của tòa nhà.

Nó được làm bằng gạch và có một cửa gỗ rắn. Tương ứng với CSS của tòa nhà.

Bạn có thể làm gì trong nhà? Bạn có thể ăn, ngủ, làm bữa ăn bất cứ điều gì bạn làm ở nhà, thực sự! Đó là JavaScript của tòa nhà.

Một ví dụ về thư mục tệp cơ bản

Vì mỗi trong ba ngôn ngữ này phục vụ một mục đích khác nhau, các nhà phát triển web thường sử dụng các tệp riêng biệt cho mỗi ngôn ngữ. Ý tưởng này được gọi là tách biệt các mối quan tâm - mỗi tệp nên có một chức năng khác nhau trong toàn bộ trang web.

Mặc dù về mặt kỹ thuật, bạn có thể bao gồm tất cả các mã trong một tệp HTML, nhưng điều đó cuối cùng sẽ dẫn đến mã lặp đi lặp lại khi bạn phát triển trang web của mình.

Hãy cùng nhìn vào mã cần thiết để tạo ra một ngôi nhà hoàn chỉnh. Cả ba tệp phải nằm trong cùng một thư mục - một thư mục trên máy tính của bạn. Trong trường hợp này, hãy để Lừa gọi nhà thư mục. Trong thư mục nhà của chúng tôi, chúng tôi sẽ có một tệp của mỗi loại. Tôi sẽ gọi chỉ mục tệp HTML chính, kiểu tệp CSS chính và tập lệnh tệp JavaScript chính.directory — a folder on your computer. In this case, let’s call the folder house. In our house folder, we will have one file of each type. I will call the main HTML file index, the main CSS file styles, and the main JavaScript file scripts.

Bây giờ chúng ta có thể bao gồm cách mà các tệp được liên kết trong mã.

Tệp HTML của chúng tôi thực sự có ba phần riêng biệt:

1. ____ 0ad>, nơi bạn có thể bao gồm siêu dữ liệu và các liên kết đến các dịch vụ như Google Fonts.
2. ________ 1DY>, trong đó bạn bao gồm các phần tử HTML thực tế.
3. Các thẻ ____ 2pt>, có thể liên kết với các tệp Google Analytics và JavaScript

Ngay bây giờ, cả ba tệp được chứa trong một thư mục, vì vậy các đường dẫn tệp khá đơn giản trong tệp HTML.

Thẻ ____ 3NK> sẽ cho phép bạn tạo một bảng kiểu riêng biệt để sử dụng với tất cả các ngôi nhà gạch bằng tệp style.css.

Và thẻ ________ 2pt> cho phép bạn tạo một tập hợp các chức năng sẽ áp dụng cho bất kỳ loại nhà nào trong tệp scripts.js.

Kịch bản 1: Một chuỗi pizza mới di chuyển (thay đổi tệp CSS)

Hãy cùng nhìn vào một ví dụ trong thế giới thực. Hãy tưởng tượng rằng trong khu phố này, một trong những tòa nhà là một cửa hàng pizza có tên là khu phố Pizza (tên tuyệt vời). Nhưng, Pizza khu phố đang gặp khó khăn, và Domino, (một chuỗi pizza khổng lồ) quyết định mua bất động sản và phục vụ khu phố thay thế.

Bạn có biết điều này có nghĩa là gì về mã không?

Chà, hãy để Lôi nghĩ qua mỗi ba mảnh.

1. Cấu trúc của tòa nhà là như nhau. Nó vẫn còn cùng một nơi pizza. Đó là HTML.
2. Chức năng của tòa nhà là như nhau. Nó vẫn tồn tại để phục vụ pizza, và khi khách hàng đến, đó là điều duy nhất họ mong đợi. Đó là JavaScript.
3. Nhưng kiểu dáng và thương hiệu của tòa nhà là khác nhau! Điều đó có nghĩa là CSS là mới.

Vì vậy, bây giờ chúng tôi đã tạo một tệp CSS mới (hãy gọi cho nó là dominos.css). Chúng ta cần tạo một thư mục có tên Pizza để cho thấy chúng ta đang nói về một địa điểm pizza bây giờ và thay thế Dominos.css cho tệp Styles.css cũ.

Kịch bản 2: Một tòa nhà chung cư mới

Đây là một ví dụ khác. Hãy để nói rằng khu phố của bạn đang trải qua một số hiền lành. Điều đó có nghĩa là cư dân giàu có đang di chuyển, và nhà ở đắt tiền hơn đang được xây dựng. Một số nhà phát triển bất động sản quyết định mua rất nhiều với một ngôi nhà trên đó, phá hủy ngôi nhà và đưa vào một số căn hộ ưa thích.

Hãy cùng suy nghĩ về những gì có nghĩa là về hệ thống tệp của chúng tôi.

1. Chức năng là điều tương tự. Nó vẫn là một ngôi nhà. Điều đó có nghĩa là JavaScript là như nhau.
2. CSS phải khác vì không có cách nào mà một tòa nhà chung cư có thể được tạo kiểu theo cách tương tự như một ngôi nhà!
3. Và tệp HTML phải khác nhau, bởi vì hai tòa nhà có cấu trúc hoàn toàn khác nhau.

Hãy gọi cho căn hộ tòa nhà mới.html, và CSS mới sẽ được ưa thích.css. Vì chúng tôi có một tệp HTML hoàn toàn mới, chúng tôi không chỉ đơn giản là liên kết một tệp CSS mới. Toàn bộ trang khác nhau. Và nó cũng liên kết đến một tệp CSS mới.

Các tệp CSS và JavaScript chỉ cần sửa đổi HTML. Chúng cần được tham chiếu trong tệp HTML để được tải. Đó là lý do tại sao, trong sơ đồ trên, chính thư mục là như nhau. Nhưng tệp HTML và mã liên kết nó với các tệp khác là khác nhau.

Tạo một thư mục tệp có nhiều thư mục

Cho đến nay, chúng tôi chỉ bao phủ một loại tòa nhà cùng một lúc. Nhưng đó là loại giống như một trang web chỉ có một trang - rất bất thường. Ngay cả một trang web cá nhân cũng có thể có một trang về trang web của người Viking, một trang danh mục đầu tư trên mạng, v.v. Vậy điều gì xảy ra khi có nhiều tòa nhà? Làm thế nào bạn có thể cấu trúc thư mục tệp của mình?

Hãy để nói rằng khu phố của bạn có một ngân hàng, trung tâm mua sắm và một nơi pizza. Đó là loại giống như một trang web với ba trang. Mỗi tệp là một tệp HTML với tệp CSS và tệp JavaScript được liên kết với nó.

Nhưng, hãy chú ý làm thế nào chúng tôi đã không sử dụng ba thư mục con trong một thư mục lân cận lớn hơn! Mặc dù chúng tôi chắc chắn có thể đã làm điều đó, nhiều nhà phát triển phía trước muốn tạo một thư mục tập lệnh riêng cho tất cả các tệp JS và thư mục Styles cho tất cả các tệp CSS.

Khi trang web của bạn phát triển, bạn sẽ thấy rằng một số phần CSS và JavaScript có thể tái sử dụng và có thể được liên kết với nhiều tệp HTML. Các thư mục tập lệnh và kiểu dáng cho phép bạn tổ chức các nỗ lực của mình và giảm mã dự phòng.

Trong ví dụ của chúng tôi, bạn có thể đặt một lát pizza nhờn trong cả trung tâm thương mại và cửa hàng pizza. Vì vậy, bạn có thể mong đợi rằng cả hai sẽ chia sẻ một tệp JavaScript, nhưng cũng có chức năng duy nhất trong các tệp JavaScript riêng của họ.

Dù sao, đây là một bố cục tiềm năng của toàn bộ thư mục tệp.

Lưu ý cách các tệp và thư mục HTML có cùng mức độ sâu trong thư mục vùng lân cận lớn hơn. Để tham chiếu các tệp nằm trong các thư mục ở cùng cấp độ, bạn cần bắt đầu FilePath với tên thư mục thay vì tên tệp. Vì vậy, nếu bạn muốn tham khảo tệp Bank.css từ trong Bank.html, bạn sẽ sử dụng scripts/bank.css làm đường dẫn tệp.

Nhận các hướng dẫn mới nhất

Bạn có thích hướng dẫn này không? Cung cấp cho nó một cái vỗ tay của người Viking và cho tôi biết trong các ý kiến. Hoặc, nhận được giải thích phát triển web mới nhất của tôi bằng cách đăng ký nhận bản tin của tôi: