HTML, CSS và JavaScript là những công cụ quan trọng nhất trong kho vũ khí của bạn cho tất cả các thiết kế web của bạn. Thay vì cạnh tranh, chúng bổ sung và tăng cường cho nhau, và sức mạnh của chúng sẽ tăng lên khi chúng kết hợp với nhau – giống như Power Rangers trên internet
JavaScript làm cho HTML trở nên sống động, CSS làm cho HTML trở nên đẹp đẽ và HTML mang lại cho JavaScript và CSS cấu trúc của chúng trên một trang web. Ở đây chúng ta sẽ điểm qua những khác biệt chính giữa HTML, CSS và JavaScript với tư cách là ngôn ngữ lập trình
Khi họ kết hợp các lực lượng, họ không thể bị ngăn cản - Power Rangers của internet
HTML, CSS và JavaScript là gì?
Đây là TL; DR được trộn lẫn với tài liệu tham khảo Frankenstein, nếu đó là điều của bạn
Hãy tưởng tượng bạn đang xây dựng phiên bản quái vật Frankenstein của riêng mình
Bạn cần xương [cấu trúc], da [tính thẩm mỹ] và bạn cần làm cho nó trở nên sống động [sự tương tác]
Đó cũng là cách bạn xây dựng một trang web
HTML tạo nên khung và cấu trúc của trang web này và hầu hết mọi trang web khác mà bạn từng truy cập. Đó là ngôn ngữ đánh dấu “đánh dấu” và tạo thành xương sống cho nội dung trực tuyến, đưa cấu trúc trang web vào vị trí để trình duyệt web hiểu được
HTML, hay Ngôn ngữ đánh dấu siêu văn bản, lần đầu tiên được đề xuất và xuất bản vào năm 1993, mặc dù nguồn gốc của nó bắt nguồn từ các đề xuất của Sir Tim Berners-Lee vào năm 1989 cho một hệ thống siêu văn bản internet. Nó được phát triển bởi WHATWG, với phiên bản mới nhất, HTML5, hiện đang được áp dụng
Trong khi HTML tạo nên cấu trúc hoặc xương của trang web, CSS bổ sung thêm lớp vỏ - tính thẩm mỹ mà bạn nhìn thấy và điều hướng. CSS trên một trang web thiết kế nó và làm cho nó trông hấp dẫn hơn đối với khách truy cập đang đọc trang
CSS, hoặc Cascading Style Sheets, định hình HTML và ảnh hưởng đến cách nó được hiển thị cho khách truy cập trang web. Các hình thức tạo kiểu này bao gồm màu phông chữ, màu nền, bán kính đường viền [các góc tròn trên hộp], vị trí của các cột, màu sắc, độ mờ và sự tách biệt. Các tính năng CSS mới thậm chí còn cho phép hoạt ảnh, khoảng trống hộp linh hoạt và thiết kế phản hồi nhanh hơn nhiều
JavaScript
JavaScript [JS] là một ngôn ngữ quan trọng khác để thiết kế trang web và chèn văn bản động vào phía máy khách HTML
Đó là ngôn ngữ kịch bản chứ không phải ngôn ngữ đánh dấu và được phát hành lần đầu tiên hai năm sau HTML vào năm 1995, được phát triển bởi Brendan Eich của Netscape, một trình duyệt web hiện không còn tồn tại. JavaScript được duy trì bởi ECMA và kể từ năm 2021, phiên bản thứ 12 của ECMA đang hoạt động
Ba ngôn ngữ chính được sử dụng trong phát triển trang web là HTML, CSS và JavaScript. Nói chung
HTML cung cấp cấu trúc, CSS cung cấp cách trình bày và định dạng, còn JavaScript làm cho các thành phần động và kiểm soát hành vi của chúng
HTML, CSS & Javascript. Họ làm gì?
HTML cung cấp cấu trúc cho các trang web bằng cách sử dụng từng thành phần khác nhau và cũng có thể ảnh hưởng đến phông chữ, màu sắc, siêu liên kết và hình ảnh. Các tệp HTML có phần mở rộng .html
hoặc .htm
khi được lưu trữ
Bạn sẽ sử dụng HTML để cho trình duyệt biết nội dung nào trên trang web của bạn là tiêu đề, đó là tiêu đề H2 và H3 của bạn và bất kỳ hình ảnh hoặc bảng nào bạn có trên trang web của mình
Ngôn ngữ đánh dấu siêu văn bản [HTML], Cascading Style Sheets [CSS] và JavaScript là những ngôn ngữ chạy web. Chúng có liên quan rất chặt chẽ với nhau, nhưng chúng cũng được thiết kế cho những nhiệm vụ rất cụ thể. Hiểu cách họ tương tác sẽ đi một chặng đường dài để trở thành nhà phát triển web. Chúng tôi sẽ mở rộng vấn đề này trong suốt hướng dẫn, nhưng ý chính của nó là
- HTML là để thêm ý nghĩa cho nội dung thô bằng cách đánh dấu nó
- CSS là để định dạng nội dung được đánh dấu
- JavaScript là để làm cho nội dung và định dạng tương tác
Hãy coi HTML là văn bản trừu tượng và hình ảnh đằng sau một trang web, CSS là trang thực sự được hiển thị và JavaScript là các hành vi có thể thao tác cả HTML và CSS
Ví dụ: bạn có thể đánh dấu một dòng văn bản cụ thể nào đó dưới dạng một đoạn văn bằng HTML này
This is a paragraph.
Sau đó, bạn có thể đặt kích thước và màu sắc của đoạn đó bằng một số CSS
p {
font-size: 20px;
color: blue;
}
Và, nếu bạn muốn trở nên thú vị, bạn có thể viết lại đoạn đó khi người dùng nhấp vào nó bằng một số JavaScript [chúng tôi sẽ lưu những thứ thú vị cho hướng dẫn trong tương lai]
var p = document.getElementById['some-paragraph'];
p.addEventListener['click', function[event] {
p.innerHTML = 'You clicked it!';
}];
Như bạn có thể thấy, HTML, CSS và JavaScript là những ngôn ngữ hoàn toàn khác nhau, nhưng chúng đều đề cập đến nhau theo một cách nào đó. Hầu hết các trang web đều dựa vào cả ba, nhưng giao diện của mọi trang web được xác định bởi HTML và CSS. Điều đó làm cho hướng dẫn này trở thành điểm khởi đầu tuyệt vời cho hành trình phát triển web của bạn