Tự học lập trình web - Các thuật ngữ cơ bản

ngày 25-09-2018

HTML là gì? HTTP là gì? Khác biệt giữ HTTP và HTTPS? Lập trình front-end là gì? Lập trình back-end, full-stack là gì? Có khá nhiều câu hỏi, khái niệm khi bạn mới bắt đầu học lập trình web. Bài viết này sẽ giúp bạn làm quen với một số khái niệm lập trình web cơ bản, khởi đầu cho quá trình tự học lập trình web của bạn sau này được dễ dàng hơn.
 
WWW – World Wide Web
 
World Wide Web (WWW, thường được gọi tắt là Web) là một trong những dịch vụ được dùng rất phổ biến trên Internet. Được xây dựng chủ yếu trên nền văn bản, đồ họa và các hiệu ứng tương tác, Web ngày càng được sử dụng phổ biến và giờ đây đã là một phần quen thuộc của cuộc sống. Tuy nhiên, để tạo được các trang web “động”, có tương tác với người dùng, có hiệu ứng chuyển động bắt mắt, có thông tin được cập nhật thường xuyên chứ không phải dữ liệu "tĩnh", có kiểm tra dữ liệu người dùng nhập vào và hiện thông báo nhắc nhở, …. Để có được website "động", bạn phải biết cách lập trình web. Khi đó bạn sẽ chủ động “điều khiển” các thành phần trên trang web, chủ động các tương tác của người dùng trên website theo ý mình và chắc chắn website của bạn sẽ  cuốn hút người dùng hơn, tạo ấn tượng với người xem hơn. 
 

HTTP - HyperText Transfer Protocol

 
HTTP, giao thức chuyển giao siêu văn bản trên Web, được xem như là một ngôn ngữ “nói chuyện” giữa Web clients và Web servers. Giao thức này là tập hợp các qui định dùng để trao đổi các tài liệu (văn bản, hình ảnh, âm thanh, video, các tập tin đa truyền thông,…) giữa Web server và trình duyệt Web. Khi bạn gõ vào trình duyệt 1 địa chỉ trang web nào đó, trình duyệt Web sẽ gửi 1 yêu cầu qua giao thức Http đến Web server. Web server và sẽ nhận yêu cầu này, thực hiện xử lý (nếu có) và trả lại kết quả là trang web cho trình duyệt. Người ta gọi giao thức HTTP là giao thức phi trạng thái (stateless) bởi mỗi lệnh đều được thực thi một cách độc lập, lệnh sau không biết gì về lệnh trước đó.
 
Trước đây đa số các website đều sử dụng giao thức HTTP để truyền tải dữ liệu giữa trình duyệt và Web servers. Tuy nhiên do giao thức HTTP không bảo mật nên thông tin sẽ rất dễ bị đánh cắp, nên đặc biệt trên các website thương mại điện tử, thanh toán online, các tổ chức ngân hàng, tài chính thường phải đăng ký sử dụng giao thức HTTPS trong truyền nhận dữ liệu. HTTPS là chữ viết tắt của cụm từ Hypertext Transfer Protocol Secure, là sự kết hợp của HTTP và giao thức bảo mật TLS hoặc SSL, giúp việc trao đổi thông tin trên Internet được an toàn và bảo mật hơn. Bạn có thể đăng ký mua chứng chỉ SSL tại các công ty dịch vụ và chọn  mức độ bảo mật SSL phù hợp với loại hình kinh doanh trên website của bạn. 
 
HTTP - HyperText Transfer Protocol
Thông tin truyền tải qua HTTPS được an toàn và bảo mật hơn HTTP
 

URL - Uniform Resource Locator

 
Khái niệm này ra đời cùng lúc với Internet, vấn đề đặt ra lúc đó là cách thức qui định đặt tên địa chỉ như thế nào nhằm mục đích để giúp cho người dùng dễ dàng truy cập đến nguồn tài nguyên trên Web. 
Vậy URL là gì?, đó chính là một địa chỉ trên Internet, cú pháp đầy đủ của URL có dạng :
scheme://<host> [:port] [<path> [?<querystring>]]
Trong đó:  
  • scheme: lọai dịch vụ Internet, với dịch vụ thông dụng nhất là http, https dùng để truy cập tài nguyên tại các Web server;
  • host: địa chỉ máy chủ chứa tài nguyên (ví dụ w3schools.com, vnexpress.net, csc.edu.vn, …);
  • port: cổng dịch vụ trên máy chủ, giá trị này có thể bỏ trống và có giá trị là 80 nếu lọai dịch vụ là http;
  • path: đường dẫn và tên của tập tin tài nguyên trên máy chủ;
  • querystring: các tham số được gửi kèm theo http để cung cấp thêm thông tin, phục vụ cho xử lý nào đó tại Web server.
Đối với website tĩnh, các trang web nội dung thường ít được cập nhật sửa đổi, bạn sẽ không thấy tham số querystring trong địa chỉ URL, ví dụ như:   https://www.lifebuoy.vn/products/sua-tam/thien-nhien.html
 
Nhưng nếu bạn đọc thông tin trên website "động", có thể bạn sẽ thấy tham số querystring này, ví dụ như http://science-technology.vn/?p=5950. Tuy nhiên, hiện nay khi lập trình xử lý trên các website "động" các lập trình viên cũng đã cải tiến, nâng cấp đường link "động" thành dạng đườing link thân thiện người dùng hơn và cũng tốt hơn cho SEO, nên bạn cũng sẽ không thấy tham số querystring mà thay vào đó là tên viết không dấu của chính nội dung bài viết và mã số, ví dụ như : https://thanhnien.vn/giao-duc/niem-vui-den-truong-999825.html
 

HTML - HyperText Markup Language

 
HTML (HyperText Markup Language – Ngôn ngữ đánh dấu siêu văn bản) là ngôn ngữ dùng để tạo trang web.
  • HTML sử dụng tập hợp các thẻ để mô tả cấu trúc của trang Web
  • Các elemet trong HTML quy ước các khu vực nội dung đặc trưng trong trang HTML, ví dụ: <head>, <title>,<body>,...
  • HTML quy ước sẵn một số thẻ cho các nội dung riêng trong trang web như "heading", "paragraph", "table", ...
  • Trình duyệt không hiển thị các thẻ HTML, nhưng sử dụng chúng để hiển thị nội dung của trang
 HTML là gì
Ví dụ mã lệnh HTML cho trang web đơn giản
 
HTML cũng có nhiều phiên bản, phiên bản đầu tiên ra đời năm 1989 và đến nay là phiên bản HTML 5.2 ra đời năm 2017. Thời gian đầu chức năng của HTML khá giới hạn, nên để cho trang web trở nên sinh động hơn người ta phải sử dụng thêm các kỹ thuật chèn plugin như Flash, video player, các applet nhúng vào web....Và một vấn đề nữa khi lập trình web là cùng trang web nhưng kết quả hiển thị trên nhiều trình duyệt khác nhau sẽ có hơi khác nhau, do đó các lập trình viên web thường phải thực hiện một số sửa chữa khác nhau trên các trình duyệt khác nhau và như vậy sẽ làm cho trang web trở nên cồng kềnh hơn.
 
Sự khác nhau giữa HTML4 và HTML5
 
Là một nhà phát triển ứng dụng web, HTML5 sẽ giúp bạn làm cho mọi thứ đơn giản và dễ dàng hơn. HTML5 đã bổ sung thêm rất nhiều các thẻ đánh dấu (markup) mới như: <header> và <footer>, <article>, <nav>, <section>, <audio>, <video>, <canvas>, <embed>... HTML cũng giúp các trang web có tốc độ tải nhanh hơn và bạn không cần phải để ý đến việc cập nhật của addons và plugins trên trình duyệt để đảm bảo hoạt động cho trang web nữa. Có thể nói HTML5 là tương lai của lập trình web và bạn nên cập nhật nó.
 

CSS - Cascading Style Sheets

 

Style Sheet là gì?

 
Là một tập hợp các qui định về cú pháp khai báo dùng để định dạng trang web, chính xác hơn là nơi dùng để định nghĩa các style.
Giả sử, trong một trang web, bạn muốn tất cả các tag <h1> có chữ màu đỏ, thông thường bạn sẽ sử dụng thuộc tính style và khai báo cho từng tag <h1>. Nhưng đối với Style Sheet thì bạn sẽ khai báo một lần và áp dụng cho toàn bộ trang web hoặc cho cả website.
Nói đơn giản hơn, Style Sheet giống như là một quy tắc dùng để “trang trí” trang web.
 
CSS
 

Cascading Style Sheets

 
CSS là một chuẩn của Internet do W3C định nghĩa và chính thức giới thiệu vào tháng 12/1996. Sở dĩ gọi nó là Cascading (xếp tầng) là vì hiệu ứng của style có thể được kế thừa từ các tag khác, nếu style được định nghĩa trong một tag cha thì các tag con (nằm trong tag cha) sẽ kế thừa style đó.
Ví dụ: 3 dòng văn bản sau đều có màu đỏ, vì kế thừa style của tag <p>
 
<p style="color:red">
<b>Trung Tâm Tin Học</b> <br>
Đại Học Khoa Học Tự Nhiên TP.HCM<br>
<font size="+4"><i>Thông báo chiêu sinh khóa 155</i></font>
 

Ngôn ngữ lập trình JavaScript

 
Tự học lập trình web - Các thuật ngữ cơ bảnJavaScript là ngôn ngữ kịch bản (scripting language) dùng để tương tác với các trang HTML dựa trên đối tượng (object-based scripting language ). Các chương trình JavaScript thường được nhúng (embedded) trực tiếp vào tập tin HTML bằng tag <script> hoặc tích hợp (integrated) vào trang web thông qua một tập tin được khai báo trong tag <link>.
 
JavaScript có một số đặc điểm sau:
 
  • Là một ngôn ngữ thông dịch(interpreted language), nghĩa là các script thi hành không cần biên dịch trước (precompile). Trình duyệt dịch script, phân tích và thi hành ngay tức thời. 
  • Lập trình theo cấu trúc (Structured progarming)
  • Giống như C và Java, có phân biệt chữ HOA và thường
Hiện nay đa số các trình duyệt đều hỗ trợ JavaScript nên các trang web có Javascript có thể chạy trên bất kỳ trình duyệt nào.
Để học JavaScript một cách hiệu quả, bạn nên áp dụng phương pháp “học qua ví dụ” (Learning By Example), đương nhiên là bạn phải có nền tảng căn bản trước đó. Hiện nay trên internet bạn có thể tìm thấy vô số các đoạn JavaScript từ đơn giản đến phức tạp, bạn có thể lấy về dùng mà không cần phải tìm hiểu chi tiết tường tận, chỉ cần biết cách khai báo sử dụng trong trang HTML của mình là có thể quan sát để hiểu ý nghĩa của đoạn code đó.
 

Lập trình front-end

 
Lập trình viên Front – End là người xây dựng các chức năng giao tiếp, tương tác trực tiếp với người dùng. Khi bạn duyệt các trang web, từ font chữ, màu sắc cho tới các menu chọn và các thanh trượt, các hình ảnh chuyển động quảng cáo, các hiệu ứng chuyển màu hay di chuyển văn bản, hình ành… đều là tác phẩm của Lập trình viên Front – End.
Các Lập trình viên Front-end sẽ chịu trách nhiệm thể hiện giao diện của trang web theo đúng yêu cầu thiết kế , những tương tác, chuyển động theo đúng ý tưởng sáng tạo sao cho mang lại cho người dùng những trải nghiệm giao diện ấn tượng, bắt mắt và phong cách nhất.  
 
  • Front-end cơ bản

Lập trình front-end ở mức cơ bản chỉ cần thông thạo HTML, CSS, và JavaScript để làm chủ giao diện người dùng với font chữ, màu sắc, thanh trượt, thực đơn, hình ảnh, hiệu ứng tương tác,…
 
Tự học lập trình web - Các thuật ngữ cơ bản
 
  • Front-end nâng cao

Ngoài các kiến thức cơ bản, các lập trình viên front-end cần phải làm quen với các framework như Bootstrap  để đảm bảo nội dung có thể hiển thị tốt trên mọi thiết bị khác nhau, các trình duyệt khác nhau và AngularJS để cải thiện tốc độ tương tác cũng như bổ sung các hiệu ứng chuyển động đẹp mắt, ấn tượng vào ứng dụng web một cách nhanh chóng hơn. 
 
 
Tự học lập trình web - Các thuật ngữ cơ bản
 

Lập trình back-end

Lập trình web không chỉ có những cần giao diện ở front-end mà cần những dữ liệu, xử lý ở mức server. Hay nói cách khác, để có được những gì thể hiện trên website ở front-end phải có các dữ liệu, thông tin từ các chức năng do lập trình web back-end cung cấp. Từ “hậu trường”, lập trình viên back-end sẽ xây dựng và thực hiện các giải thuật để tính toán, truy cập và xử lý dữ liệu để cung cấp chính xác, nhanh chóng theo các yêu cầu nhận được. 
 
Tự học lập trình web - Các thuật ngữ cơ bản
 
Có rất nhiều ngôn ngữ để lập trình back end như: PHP, ASP.NET, Java, Python,… cho phép bạn viết các đọan mã lệnh (source code) mà sẽ được biên dịch và thi hành tại Web server, sau đó trả kết quả về client dưới dạng HTML, CSS và JavaScript.
Với lập trình back-end, bạn có thể lập trình, xây dựng các trang web động, có tương tác với cơ sở dữ liệu và kết nối với các dịch vụ Web Service phục phục vụ đa dạng yêu cầu của người dùng trong thực tế. 
 
Tự học lập trình web - Các thuật ngữ cơ bản
 
Hiện nay, các thông tin tuyển dụng Lập trình viên back-end khá cao và thường yêu cầu ứng viên có thêm kiến thức, kinh nghiệm liên quan đến các framework MVC, có kiến thức về web server và các phần mềm quản lý phiên bản như Git/SVN.
 

Lập trình Full-stack

Nhưng để có được ứng dụng hoàn chỉnh, nếu chỉ có lập trình viết mã lệnh không thì chưa đủ. Bạn sẽ cần có cơ sở dữ liệu để lưu thông tin của ứng dụng, bạn cần có web server, hệ điều hành để có thể deploy ứng dụng mà từ đó người dùng có thể khai thác được. Tập hợp tất cả các phần mềm, công nghệ này tạo thành solution stack, hệ thống nền tảng để ứng dụng có thể hoạt động được.
 
Một số solution stack thông dụng 
 
Tự học lập trình web - Các thuật ngữ cơ bản
Mô hình LAMP -Stack
 
LAMP-Stack, được dùng khá phổ biến, hầu hết các website đều sử dụng stack này và các hosting cho PHP cũng đang dùng stack này.   
 
Tự học lập trình web - Các thuật ngữ cơ bản
Mô hình WAMP -Stack
 
WAMP-Stack tương tự như LAMP Stack nhưng khác ở hệ điều hành Windows. WAMP Stack được dùng trong học tập, nghiên cứu nhiều hơn do đã quá quen thuộc với hệ điều hành Windows.   
 
Tự học lập trình web - Các thuật ngữ cơ bản
Mô hình WINS -Stack
 
WINS - Stack này bao gồm các công nghệ của Microsoft. Trong đó Windows là hệ điều hành, web server là Internet Information Services c, .NET là môi trường phát triển ứng dụng khá phổ biến với ngôn ngữ lập trình hướng đối tượng C# và SQL Server là hệ quản trị cơ sở dữ liệu quan hệ. Đây là lựa chọn cho các giải pháp mang tính thống nhất vì việc phối hợp giữa các thành phần sẽ dễ dàng hơn và mang tính bảo mật khá ổn định hơn. 
Nếu bạn chọn mình trở thành Lập trình viên Full-stack, ngoài kiến thức lập trình back-end, bạn cần có kiến thức IT tổng quát  và khả năng tìm hiểu sâu khi cần thiết bất kỳ vấn đề gì về hệ điều hành, Web Server, cơ sở dữ liệu, web framework.
Bạn có thể tham khảo các giải pháp hiện nay đang áp dụng tại các doanh nghiệp tại Việt Nam để chọn cho mình hướng đi phù hợp.
 
Tự học lập trình web - Các thuật ngữ cơ bản
Mô hình ứng dụng công nghệ web của khách sạn New World
Tự học lập trình web - Các thuật ngữ cơ bản
Mô hình ứng dụng công nghệ web của Trung Tâm ngoại ngữ ILA
 
Tự học lập trình web - Các thuật ngữ cơ bản
Mô hình ứng dụng công nghệ web của Công ty du lịch VietTranvel
 
Tự học lập trình web - Các thuật ngữ cơ bản
Mô hình ứng dụng công nghệ web của Zing.vn
 
Tự học lập trình web - Các thuật ngữ cơ bản
Mô hình ứng dụng công nghệ web của Đại học Kinh Tế
 
 
Chúc bạn thành công!
 
Trung tâm Tin học Khoa học Tự nhiên

Khóa học Lập trình web HTLM5, CSS3, jQuery, Bootstrap

CHƯƠNG TRÌNH ĐÀO TẠO