Bất cứ ai cũng có thể học viết code, cũng giống như bất cứ ai cũng có thể học một loại ngôn ngữ mới. Trên thực tế, học lập trình có thể được so sánh giống như khi bạn học một loại ngoại ngữ. Mỗi loại ngôn ngữ sẽ có những nguyên tắc và đặc điểm riêng mà các Dev cần phải học. Những quy tắc đó là cách để nói với máy tính của bạn phải làm gì. Cụ thể hơn, trong lập trình web, chúng là những cách để nói cho trình duyệt của bạn biết phải làm gì.
Trong bài viết này, mình sẽ chia sẻ cho các bạn mới bắt đầu làm quen với việc lập trình và thiết kế web những điều cơ bản về HTML, CSS và JavaScript nhé.
Tổng quan:
- HTML cung cấp cấu trúc cơ bản của các trang web, được cải tiến và sửa đổi bởi các công nghệ khác như CSS và JavaScript.
- CSS được sử dụng để điều chỉnh kiểu cách, định dạng và bố cục của trang web.
- JavaScript được sử dụng để kiểm soát hành vi của các yếu tố khác nhau.
1. HTML
1.1. HTML là gì?
HTML là chữ viết tắt của HyperText Markup Language. HTML chính là cốt lõi của mọi trang web, bất kể sự phức tạp của trang web hoặc các công nghệ liên quan. Đó là một kỹ năng thiết yếu cho bất kỳ ai muốn lập trình web. HTML sẽ là điểm khởi đầu dành cho các Dev đang muốn học cách tạo nội dung cho website. Và may mắn thay, không khó để các bạn có thể thành thạo HTML.
1.2. HTML hoạt động như thế nào?
Do HTML là “Markup Language” nên thay vì sử dụng ngôn ngữ lập trình để thực hiện những tính năng của web thì HTML sẽ sử dụng tags để nhận diện từng loại content của web và mục đích của những loại content đó trên trang web là gì.
Để cho các bạn dễ hình dung hơn, mình sẽ minh họa chức năng của HTML qua ví dụ dưới đây.
Nếu bạn được hỏi hãy phân loại content qua bài báo này, chắc hẳn bạn sẽ làm khá tốt: Phần mở đầu sẽ là Header, tiếp theo sẽ là Subheader, Headings, Body và một số hình ảnh bên dưới phần text.
Markup Language cũng hoạt động như khi bạn phân loại và nhận biết content như trên, ngoại trừ việc bạn sẽ dùng code để làm điều đó. Cụ thể thì bạn sẽ dùng các thẻ HTML như: Header tags, paragraph tags, image tags,…
Mỗi trang web đều được tạo thành từ một loạt các thẻ HTML và biểu thị từng loại nội dung trên trang. Mỗi loại nội dung trên trang được “bao bọc” bởi các thẻ HTML.
Ví dụ, những từ bạn đang đọc ngay bây giờ là một phần của đoạn văn. Nếu mình đã mã hóa trang web này từ đầu (thay vì sử dụng CMS), mình sẽ bắt đầu đoạn này bằng thẻ mở đầu: <p>. Phần này được biểu thị bằng dấu ngoặc mở và chữ “p” để cho trình duyệt biết mình đang mở một đoạn văn thay vì một loại nội dung khác.
Khi một thẻ đã được mở, tất cả nội dung theo sau được coi là một phần của thẻ đó cho đến khi bạn “đóng” thẻ. Khi đoạn văn bản kết thúc, mình sẽ đặt thẻ kết thúc: </ p>. Lưu ý rằng các thẻ đóng trông giống hệt như các thẻ mở, ngoại trừ có một dấu gạch chéo về phía trước sau dấu ngoặc góc bên phải. Đây là một ví dụ:
<p> This is a paragraph. </ p>
Bằng cách sử dụng HTML, bạn có thể thêm tiêu đề, định dạng đoạn văn, ngắt dòng, tạo danh sách, nhấn mạnh văn bản, tạo ký tự đặc biệt, chèn hình ảnh, tạo liên kết, xây dựng bảng, điều khiển một số kiểu dáng, và nhiều hơn nữa.
Mặc dù có tất cả các loại nội dung nhưng nhìn hình thức không đẹp lắm đúng không? Đó là lý do vì sao mà bạn cần phải thêm CSS.
2. CSS
2.1. CSS là gì?
CSS là viết tắt của Cascading Style Sheets. Ngôn ngữ lập trình này quy định cách các thành phần HTML của trang web sẽ xuất hiện như thế nào trên giao diện của trang. Nếu HTML là một bức tường, CSS sẽ là sơn tường.
Trong khi HTML là cấu trúc cơ bản của trang web của bạn, CSS là thứ mang lại cho toàn bộ trang web của bạn phong cách. Những màu sắc bóng bẩy, phông chữ thú vị, và hình ảnh nền? Tất cả là nhờ CSS. Ngôn ngữ này ảnh hưởng đến toàn bộ tâm trạng và giai điệu của một trang web, khiến nó trở thành một công cụ vô cùng mạnh mẽ – và là một kỹ năng quan trọng để các Website Developers học hỏi. CSS cũng cho phép các trang web thích ứng với các kích thước màn hình và loại thiết bị khác nhau.
2.2. CSS hoạt động như thế nào?
Để cho bạn thấy CSS có thể làm gì với một trang web, cũng là ví dụ trên nhưng có thêm CSS:
Nó đẹp hơn nhiều đúng không?
Nói một cách đơn giản, CSS là một danh sách các quy tắc có thể gán các thuộc tính khác nhau cho các thẻ HTML, được chỉ định cho các thẻ đơn, nhiều thẻ, toàn bộ tài liệu hoặc nhiều tài liệu. Nó tồn tại bởi vì, khi các yếu tố thiết kế như phông chữ và màu sắc được phát triển, các nhà lập trình hay thiết kế web đã gặp nhiều khó khăn khi thích ứng HTML với các tính năng mới này.
Bạn thấy, HTML, được phát triển vào năm 1990, không thực sự hiển thị bất kỳ thông tin định dạng vật lý nào. Ban đầu nó chỉ có nghĩa là để xác định nội dung cấu trúc của tài liệu, như tiêu đề so với đoạn văn. CSS đã được phát minh và phát hành vào năm 1996: Tất cả các định dạng có thể được xóa khỏi các tài liệu HTML và được lưu trữ trong các tệp CSS (.css) riêng biệt.
Bao giờ các trình duyệt web cũng có một kiểu hiển thị mặc định, vì vậy mọi trang web ban đầu đều theo 1 kiểu mặc định đó. Ví dụ: kiểu phông chữ mặc định của một trình duyệt là Times New Roman, cỡ 12, vì vậy nếu mình truy cập trang web mà không áp dụng thiết kế của riêng họ, mình sẽ thấy trang web hiển thị Times New Roman, cỡ 12. Rõ ràng, phần lớn các trang web bạn truy cập đều không sử dụng Times New Roman, cỡ 12 – đó là vì các nhà lập trình web đằng sau các trang đó đã thay đổi kiểu dáng cho trang web với code CSS tùy chỉnh.
3. JavaScript
3.1. JavaScript là gì?
JavaScript là ngôn ngữ lập trình dựa trên logic, có thể được sử dụng để sửa đổi nội dung trang web và khiến nó hoạt động theo nhiều cách khác nhau để đáp ứng hành động của người dùng. Các cách sử dụng phổ biến cho JavaScript bao gồm các hộp xác nhận, kêu gọi hành động và thêm các danh tính mới vào thông tin hiện có.
Nói tóm lại, JavaScript là ngôn ngữ lập trình cho phép các nhà lập trình web thiết kế các trang web để người dùng có thể tương tác. Hầu hết các hành vi mà bạn sẽ thấy trên một trang web là nhờ JavaScript. HTML, CSS và JS kết hợp với nhau tạo nên giao diện (UI) và trải nghiệm người dùng (UX) cho website.
3.2. JavaScript hoạt động như thế nào?
JavaScript thường được nhúng trực tiếp vào một trang web hoặc được tham chiếu qua file .js riêng. Nó là ngôn ngữ phía client, tức là script được tải về máy của khách truy cập và được xử lý tại đó thay vì phía server là xử lý trên server rồi mới đưa kết quả tới khách truy cập.
Để thêm chuỗi code JavaScript code vào trang web, bạn sẽ cần gắn tag <script>. Ví dụ như sau:
Với quy tắc cơ bản, bạn nên gắn JavaScript trong tag <header> cho website của bạn trừ khi bạn muốn nó thực thi tại một thời điểm nhất định hoặc một yếu tố nhất định của trang web. Bạn cũng có thể lưu code JavaScript dưới file riêng và gọi nó lên mỗi khi cần trên website.
Một ví dụ điển hình về JavaScript là slide-in call-to-action (CTA). Bạn sẽ thường xuyên thấy tính năng này trên các trang website / blog. Chúng xuất hiện ở phía dưới bên phải màn hình của bạn khi bạn cuộn qua phần cuối của màn hình thanh bên như sau:
JavaScript đặc biệt hữu ích để gán các danh tính mới cho các thành phần trang web hiện có, theo các quyết định mà người dùng đưa ra khi truy cập trang. Ví dụ: giả sử bạn đang xây dựng một trang đích với một hình thức bạn muốn tạo khách hàng tiềm năng bằng cách nắm bắt thông tin về khách truy cập trang web. Bạn có thể có một “chuỗi” JavaScript dành riêng cho tên của người dùng. Chuỗi đó có thể trông giống như thế này:
function updateFirstname() {
let Firstname = prompt(‘First Name’);
}
Sau đó, sau khi khách hàng truy cập trang web đã nhập tên của họ – và bất kỳ thông tin nào khác bạn yêu cầu trên trang đích – và gửi biểu mẫu, hành động này sẽ cập nhật danh tính của phần tử “Tên gọi” ban đầu không xác định trong mã của bạn. Đây là cách bạn có thể cảm ơn khách truy cập trang web của mình bằng tên trong JavaScript:
para.textContent = ‘Thanks, ‘ + Firstname + “! You can now download your ebook.”
Trong chuỗi JavaScript ở trên, phần tử “Firstname” đã được gán first name của khách truy cập trang web và do đó sẽ tạo tên thật của anh ấy hoặc cô ấy trên giao diện của trang web. Đối với người dùng tên Taylor, câu sẽ hiển thị như sau:
Thanks, Taylor! You can now download your ebook.
Thông qua bài viết này, mình đã chia sẻ với các bạn những kiến thức cơ bản về HTML, CSS và JavaScript cũng như cách hoạt động của chúng trong việc xây dựng website. Mong rằng các bạn sẽ có cái nhìn tổng quát hơn về ngành lập trình này.