Tìm hiểu sự khác biệt giữa HTML, CSS và JavaScript.
Khi bạn bắt đầu học về phát triển web, cụ thể là front-end, HTML, CSS và JavaScript được coi là 3 yếu tố cơ bản nhất của ngăn xếp kỹ năng (skill stack) của bạn.
HTML, CSS và JavaScript đều thuộc cùng hệ sinh thái phát triển web và cần làm việc cùng nhau để tối đa hóa tiềm năng của web hiện đại.
Nhưng... điều gì chính xác làm cho HTML, CSS và JavaScript khác nhau?
- HTML là viết tắt của Hypertext Markup Language (Ngôn ngữ Đánh dấu Siêu văn bản).
- CSS là viết tắt của Cascading Stylesheets (Bộ định kiểu xếp chồng)
- JavaScript là viết tắt của... JavaScript (viết tắt JS)
HTML
HTML là ngôn ngữ đánh dấu chúng ta dùng để mô tả nội dung và bố cục cấu trúc cơ bản của trang web.
Đối chiếu: HTML là khung và nội dung của một ngôi nhà. Những thứ như ghế, bàn, cửa, cầu thang, những yếu tố thiết yếu cấu thành một ngôi nhà, không hơn không kém.
Nhiệm vụ của nhà phát triển HTML là cung cấp yêu cầu tối thiểu của trang web bằng cách mô tả đúng nội dung trang web để khi nhà thiết kế đến, họ biết cái nào là nút bấm, cái nào là đoạn văn.
Ví dụ:
<!-- Mô tả nội dung --> <p>Văn bản này được mô tả đúng bằng cách bọc giữa thẻ mở và đóng đoạn văn.</p> <button>Tôi là một nút bấm</button>CSS
CSS là ngôn ngữ định kiểu chúng ta dùng để hình dạng và định kiểu nội dung trang web về màu sắc, typography, khoảng cách, viền, và hơn nữa.
Đối chiếu: CSS là sơn và các cạnh bo tròn của ngôi nhà làm cho nó hấp dẫn về mặt thị giác và thoải mái để sống. Về mặt kỹ thuật, định nghĩa của ghế là thứ bạn ngồi lên, nhưng hình dạng, kích thước và đệm (thiết kế) là thứ làm ghế thoải mái (hoặc không thoải mái) để ngồi.
Nhiệm vụ của nhà phát triển CSS là đảm bảo trang web có phong cách thị giác đúng mà chủ sở hữu muốn về màu sắc, typography, khoảng cách, hình dạng và bố cục tổng thể khi xem trên các thiết bị khác nhau.
Ví dụ:
/* Định kiểu phần tử văn bản */ p { font-family: "Helvetica"; font-size: 20px; line-height: 1.5; } /* Định kiểu nút bấm */ button { font-size: 16px; font-weight: bold; padding: 16px 32px; border-radius: 8px; color: white; background-color: green; }JavaScript
JavaScript là ngôn ngữ lập trình động cho phép bạn làm cho trang web tương tác và phản hồi.
Đối chiếu: JavaScript là điện và cấp nước làm cho ngôi nhà hiện đại trở thành ngôi nhà hiện đại, và làm cho việc tắm, nấu ăn, và không bị đóng băng vào mùa đông trở nên có thể. Nhà phát triển JavaScript đảm bảo rằng khi bạn nhấp vào nút bấm nói "Menu", một menu off-canvas trượt lên sẵn sàng sử dụng. JavaScript là thứ làm cho các phần tử của trang web phản hồi lại đầu vào của người dùng.
Ví dụ:
// Làm nút bấm tương tác const button = document.querySelector("button") button.addEventListener("click", showModal) function showModal() { alert("Bạn đã nhấp vào nút bấm!") }