Việc căn bản đầu tiên của lập trình web đó là hiểu được html như thế nào, css là gì và javascript có nhiệm vụ như thế nào trong lập trình web. Một lập trình viên chuyên nghiệp không chỉ biết code giỏi mà còn phải nắm vững những kiến thức căn bản về html, css và javascript. Trong bài hôm nay, tôi sẽ nói sơ lược về 3 thành phần này, nó là gì và đóng vai trò như thế nào trong việc tạo ra một website.
Trong khi PHP, Java hay C# là những ngôn ngữ hoạt động ở phía server thì html, css, javascript là những thành phần hoạt động ở client, tôi chỉ nói javascript ở khía cạnh cơ bản thôi nhé, vì bây giờ javascript đã có thể lập trình phía server, cụ thể là NodeJs. Chúng ta sẽ cùng bắt đầu nào.
Nếu chúng ta xem việc tạo nên một giao diện cho website cũng như việc nấu một món ăn thì html chính là nguyên liệu để làm món ăn đó. Theo như wiki thì là "HTML (tiếng Anh, viết tắt cho HyperText Markup Language, hay là "Ngôn ngữ Đánh dấu Siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web với các mẩu thông tin được trình bày trên World Wide Web. HTML được định nghĩa như là một ứng dụng đơn giản của SGML và được sử dụng trong các tổ chức cần đến các yêu cầu xuất bản phức tạp. HTML đã trở thành một chuẩn Internet do tổ chức World Wide Web Consortium (W3C) duy trì. Phiên bản chính thức mới nhất của HTML là HTML 4.01 (1999). Sau đó, các nhà phát triển đã thay thế nó bằng XHTML. Hiện nay, HTML đang được phát triển tiếp với phiên bản HTML5 hứa hẹn mang lại diện mạo mới cho Web. Bằng cách dùng HTML động hoặc Ajax, lập trình viên có thể được tạo ra và xử lý bởi số lượng lớn các công cụ, từ một chương trình soạn thảo văn bản đơn giản – có thể gõ vào ngay từ những dòng đầu tiên – cho đến những công cụ xuất bản WYSIWYG phức tạp. HTML không phải là ngôn ngữ lập trình, nó là ngôn ngữ trình bày.
Như vậy html là chúng ta dùng tập các thẻ đã được định nghĩa bởi một chuẩn nào đó để định nghĩa ra trang web, dựa vào việc đánh dấu này, trình duyệt sẽ đọc được và hiển thị cũng theo một chuẩn nào đó. Một ví dụ đơn giản không thể bỏ qua, Hello World cho html:
<!DOCTYPE html>
<html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="style.css" type="text/css" /> <title>Life And Line - Lập trình và cuộc sống</title> </head> <body> <h1>Hello world!</h1> </body></html>
Các nhà phát triển html đã định nghĩa ra các thẻ với những chức năng đặc thù riêng của chúng, về ý nghĩa của từng thẻ tôi sẽ không nói ở đây, các bạn có thể google để biết ý nghĩa của các thẻ đó. Chúng ta có cần phải ghi nhớ không? Có lẽ bạn không cần ghi nhớ chúng ngay, nếu các bạn làm nhiều nó sẽ nhớ đến bạn thôi.
Một số thẻ mà các bạn nên tìm hiểu trước, ngoài các thẻ hiển nhiên như <html>, <head>, <meta>, <title>,... các bạn còn cần phải biết về các thẻ <script> <style>, div>, <table>, các thẻ heading h1 đến h6, thẻ <span>, <p>, thẻ danh sách <ul>, <li>, thẻ liên kết <a>, các thẻ về form như <label>, <input>, <textarea>, thẻ chọn <select>, <option>., các thẻ trình bày dữ liệu <table>, <tr>, <td>... Chỉ với những thẻ mà tôi đã liệt kê ra chúng ta đã có thể thiết kế nên được các giao diện rồi.
Nếu như html là nguyên liệu, thì javascript lại chính là hương vị của món ăn, javascript giúp tăng tính trải nghiệm của người dùng đối với trang web, đối với javascript ở client, ngoài việc giúp một phần trong thiết kế giao diện như các slide chuyển động, các hiệu ứng đẹp thì nó còn giúp chúng ta kiểm tra sự hợp lệ của dữ liệu, một yếu tố làm cho javascript trở nên quan trọng nữa đó là ajax (chúng ta sẽ tìm hiểu nó sau), với ajax, sự tương tác giữa người dùng với website trở nên linh hoạt và nhanh nhẹ hơn đi rất nhiều nhờ vào việc tải lại một phần trang web của nó.
Khi chúng ta lập trình web thì thường chúng ta không viết javascript thuần mà thường sử dụng một thư viện nào đó như jQuery chẳng hạn. Chúng ta sẽ tìm hiểu về các thư viện này sau.
Thứ còn lại không thể thiếu đó chính là hình thức của món ăn sau khi chế biến xong, với html, để nó trở nên có hình hài và đẹp đẽ, chúng ta cần tới css, css là một ngôn ngữ giúp trình bày html. Với sự có mặt của css, trang web của chúng ta trở lên lung linh hơn rất nhiều. Css có thể thay đổi các thuộc tính mặc định của các thẻ html, ví dụ:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="style.css" type="text/css" /> <style type="text/css"> h1{font-weight:normal} </style> <title>Life And Line - Lập trình và cuộc sống</title> </head> <body> <h1>Hello world!</h1> </body></html> |
Như bạn thấy thẻ h1 thường là kiểu chữ đậm, css giúp chúng ta biến nó thành kiểu thường. Các thuộc tính css, bạn có thể tìm hiểu từ trang w3schools.
Như vậy, chúng ta sẽ kết hợp ba thành phần html, css và javascript cho việc thiết kế một website hoàn chỉnh. Chúng ta đã tìm hiểu sơ qua về các thành phần client của một website, những bài viết tiếp theo chúng ta sẽ tìm hiểu cách tạo ra một giao diện bằng html và css.
Nguồn: hungtq.com
