Giải ngố thuật ngữ Web Dev (Phần 2): Frontend, HTML, CSS, JavaScript là gì?

Chào anh em quay trở lại với series “Giải ngố thuật ngữ Web Dev”! Ở phần trước, chúng ta đã cùng xem qua bức tranh tổng thể: Website là cái ‘nhà số’, Internet là ‘đường đi’, Trình duyệt là ‘người đưa thư’, và quan trọng nhất là màn ‘hỏi đáp’ giữa Client và Server. Hy vọng là anh em đã hình dung được cơ bản cách một trang web nó ‘hiện hình’ lên màn hình của mình rồi ha.

Nếu phần 1 giống như mình mới biết địa chỉ nhà và cách gõ cửa thôi. Phần 2 này, mình sẽ cùng nhau đi sâu vào khám phá cái mặt tiền của ngôi nhà đó – thứ mà đập vào mắt người dùng đầu tiên, quyết định xem họ có muốn ở lại chơi hay không. Dân làm web gọi cái phần bề nổi này là Frontend.

(Anh em nào bỏ lỡ phần 1 thì có thể xem lại tại đây nhé: Giải ngố thuật ngữ Web Dev (Phần 1): Website, Internet, Trình duyệt & Client-Server là gì?)

Frontend – “Kiến trúc sư” kiêm “Nhà trang trí nội thất” cho Website

Vậy Frontend bao gồm những gì? Nó là tất cả những gì bạn nhìn thấy và tương tác được trên một trang web:

• Giao diện người dùng (UI – User Interface): Bố cục các thành phần, màu sắc, font chữ, hình ảnh, nút bấm, menu… nói chung là toàn bộ phần nhìn.
• Trải nghiệm người dùng (UX – User Experience): Cách người dùng tương tác với trang web có dễ dàng, thuận tiện, mượt mà hay không. Ví dụ: bấm nút có phản hồi không, tìm kiếm thông tin có nhanh không, dùng trên điện thoại có bị vỡ giao diện không…

Nói gọn lại, lập trình viên Frontend (Frontend Developer) giống như người vừa thiết kế kiến trúc mặt tiền, vừa trang trí nội thất cho website, đảm bảo nó không chỉ đẹp mà còn dễ sử dụng.

Để làm được điều đó, họ cần bộ ba công cụ không thể thiếu: HTML, CSS, và JavaScript. Cùng mổ xẻ từng đứa một nhé!

HTML (HyperText Markup Language) – Khung xương của Website

HTML chính là bộ khung xương cơ bản của mọi trang web. Nó không quyết định màu sơn hay đồ đạc, mà nó định nghĩa ra các thành phần cấu trúc của trang.

• Vai trò: Dùng các thẻ (tags) để đánh dấu và phân loại nội dung. Ví dụ: <p> là một đoạn văn, <h1> đến <h6> là các cấp tiêu đề, <img> để chèn ảnh, <a> để tạo liên kết (link), <div> để nhóm các khu vực nội dung, <nav> cho khu vực điều hướng (menu)…
• Analogy (Phép loại suy): Nếu website là ngôi nhà, HTML chính là bản vẽ xác định đâu là nền móng, tường chịu lực, cột nhà, vị trí cửa ra vào, cửa sổ… Nó tạo ra cấu trúc thô, chưa có thẩm mỹ.

Một trang web chỉ có HTML trông sẽ rất… trần trụi và nhàm chán. Đó là lúc chúng ta cần đến CSS.

CSS (Cascading Style Sheets) – Nghệ sĩ “Makeover” cho Website

Nếu HTML là khung xương, thì CSS chính là lớp sơn tường, giấy dán tường, đồ nội thất, cách bài trí… làm cho ngôi nhà web trở nên đẹp đẽ và có phong cách riêng.

• Vai trò: CSS dùng để định nghĩa phong cách hiển thị cho các phần tử HTML. Nó quyết định màu sắc chữ, kích thước chữ, font chữ, màu nền, kích thước các khối, khoảng cách giữa các phần tử, vị trí sắp xếp… Thậm chí cả các hiệu ứng chuyển động đơn giản.
• Cách hoạt động: CSS sử dụng các bộ chọn (selectors) để nhắm vào các phần tử HTML cụ thể (ví dụ: tất cả các đoạn văn <p>, hoặc phần tử có id="header"), sau đó áp dụng các thuộc tính (properties) và giá trị (values) để tạo kiểu (ví dụ: color: blue;, font-size: 16px;).
• Analogy: CSS giống như việc bạn chọn màu sơn cho tường (HTML), chọn kiểu dáng bàn ghế (HTML), sắp xếp chúng trong phòng (HTML) sao cho hợp lý và đẹp mắt.

Với HTML và CSS, ngôi nhà web của chúng ta đã có hình hài và diện mạo. Nhưng nó vẫn còn khá “tĩnh”. Muốn nó “sống” và tương tác được, chúng ta cần đến JavaScript.

JavaScript (JS) – Thêm “sức sống” và “trí thông minh” cho Website

JavaScript là ngôn ngữ lập trình giúp thổi hồn vào trang web, biến nó từ một trang tĩnh thành một ứng dụng động, có khả năng tương tác với người dùng và thay đổi nội dung mà không cần tải lại toàn bộ trang.

• Vai trò:
  • Xử lý các sự kiện từ người dùng (nhấp chuột, gõ phím, gửi form…).
  • Thay đổi nội dung HTML và kiểu CSS một cách linh hoạt.
  • Tạo hiệu ứng động phức tạp (sliders, animations…).
  • Giao tiếp với Server (sẽ nói kỹ ở Phần 3) để lấy hoặc gửi dữ liệu mà không cần reload trang.
  • Thực hiện tính toán, kiểm tra dữ liệu người dùng nhập vào (validation)…
• Analogy: Nếu HTML là khung nhà, CSS là lớp sơn và đồ đạc, thì JavaScript giống như hệ thống điện nước và các thiết bị thông minh. Nó làm cho đèn (HTML) bật/tắt được khi bạn nhấn công tắc (sự kiện click), vòi nước (HTML) chảy được, TV (HTML) hiển thị được các kênh khác nhau (thay đổi nội dung động)… Nó làm cho ngôi nhà trở nên tiện nghi và hữu dụng.

Bộ Ba Hoàn Hảo

HTML, CSS và JavaScript giống như kiềng ba chân, phối hợp nhịp nhàng với nhau để tạo nên trải nghiệm Frontend hoàn chỉnh:

• HTML: Định nghĩa cấu trúc và nội dung cơ bản.
• CSS: Tạo kiểu dáng, làm đẹp cho cấu trúc đó.
• JavaScript: Thêm khả năng tương tác, xử lý logic và sự linh hoạt.

Responsive Design – Đẹp Trên Mọi Thiết Bị

Một khái niệm quan trọng nữa trong Frontend là Responsive Web Design. Nôm na là làm sao để trang web của bạn hiển thị đẹp và dễ dùng trên mọi kích thước màn hình, từ máy tính để bàn khổng lồ đến điện thoại di động nhỏ xíu. Nó giống như đồ nội thất trong nhà có khả năng tự co giãn, sắp xếp lại cho phù hợp với diện tích căn phòng vậy. Kỹ thuật này chủ yếu dùng HTML và CSS (đôi khi có cả JS) để điều chỉnh bố cục, kích thước chữ, ẩn/hiện các yếu tố… tùy theo kích thước màn hình.

Lời kết

Vậy là chúng ta đã cùng nhau soi khá kỹ phần Frontend của một website rồi đó. Anh em đã biết được:

• Frontend là phần giao diện và trải nghiệm người dùng nhìn thấy, tương tác được.
• HTML là bộ khung xương, định nghĩa cấu trúc.
• CSS là lớp trang điểm, tạo phong cách và làm đẹp.
• JavaScript là bộ não và hệ thống điện nước, thêm tương tác và sự sống động.

Việc thành thạo bộ ba HTML, CSS, JavaScript là nền tảng cực kỳ quan trọng cho bất kỳ ai muốn theo đuổi con đường lập trình Frontend. Đừng nản nếu thấy chúng hơi nhiều thứ nhé, cứ từ từ tìm hiểu từng phần một là sẽ ổn thôi!

Trong phần tiếp theo, chúng ta sẽ cùng tìm hiểu: Backend là gì? Server, Database, API đóng vai trò gì trong việc lưu trữ dữ liệu, xử lý logic ngầm?

Hẹn gặp lại anh em ở Phần 3! Nếu có thắc mắc gì về phần này, đừng ngại để lại bình luận bên dưới nha!

SiuCode – Vừa code vừa siuuuu🚀