Video 1: Tổng quan về Web Development
Xem video bài giảng trên Udemy
Nội dung bài học (Learning Plan)
- Cơ chế Web: Trình duyệt (Client) gửi Request, Máy chủ (Server) trả về Response (chứa file HTML, CSS, JS).
- Phân biệt Front-end (hiển thị, UI) và Back-end (xử lý logic, database).
- Phân biệt Static Web (trang tĩnh, file có sẵn) vs Dynamic Web (trang động, server sinh ra mỗi lần truy cập).
- Vai trò cốt lõi: HTML (Danh từ - Cấu trúc), CSS (Tính từ - Trang trí), JS (Động từ - Tương tác).
Bẫy kiến thức (Cognitive Traps)
- 🚨 Hiểu sai về "Web động": Người mới thường nghĩ web có hiệu ứng bay lượn (animation) là web động. Thực chất, tính "động" (Dynamic) ở đây nói về kiến trúc Server (dữ liệu lấy từ Database) chứ không phải hiệu ứng hình ảnh (dùng CSS/JS ở Front-end).
- 🚨 Ảo tưởng sức mạnh Front-end: Nghĩ rằng chỉ cần học HTML/CSS là có thể xây dựng được các hệ thống lớn như Udemy, Shopee (thiếu back-end/database).
Suy ngược UbD (Backward Design Mapping)
Mục tiêu (CLO):
WEB101x_o1: Hiểu được tổng quan về lập trình Web (Cấu trúc Client/Server, Static/Dynamic).
Skill Taxonomy:
Web Architecture Client-Server Communication
Task Đánh Giá:
- Bài tập tình huống: Khách hàng muốn làm một trang Portfolio cá nhân, bạn tư vấn làm Web tĩnh hay Web động? Tại sao?
- Bài tập phân loại: Kéo thả các công nghệ (HTML, Python, CSS, Node.js, JS) vào 2 nhóm Front-end và Back-end.
Nội dung cần nắm vững sau Video 1
Để hoàn thành tốt Video 1, bạn bắt buộc phải hiểu rõ và phân biệt được 4 nhóm khái niệm cốt lõi sau đây. (Không cần nhớ cú pháp code, chỉ cần nắm vững tư duy kiến trúc).
-
1. Luồng giao tiếp Client - Server:
Khi bạn gõ địa chỉ website, Trình duyệt (Client) sẽ gửi mộtRequest(Yêu cầu) lên Máy chủ (Server). Sau đó, Máy chủ sẽ đóng gói các tệp tin (HTML, CSS, JS) và trả về thông qua mộtResponse(Phản hồi). -
2. Front-end vs Back-end:
- Front-end: Phần "bề nổi" hiển thị trên trình duyệt mà người dùng tương tác trực tiếp. Do HTML, CSS, JS đảm nhận.
- Back-end: Phần "tảng băng chìm" chạy ngầm trên Server (như Database, xử lý thanh toán, lưu trữ tài khoản). Cần các ngôn ngữ như Node.js, Python, PHP. -
3. Web Tĩnh (Static) vs Web Động (Dynamic):
- Web tĩnh: File HTML đã được làm sẵn 100% nằm chờ trên Server, ai truy cập cũng xem cùng một nội dung giống hệt nhau.
- Web động: File HTML không có sẵn nguyên bản. Khi có người truy cập, Server mới lôi dữ liệu từ Database ra "lắp ráp" thành file HTML rồi gửi về. Nội dung thay đổi liên tục tùy người dùng (VD: Facebook, Udemy, Shopee). -
4. Vai trò của bộ ba (Loại suy Ngữ pháp):
- HTML (Danh từ): Chịu trách nhiệm bộ khung, nội dung (Văn bản, hình ảnh).
- CSS (Tính từ): Chịu trách nhiệm trang điểm, màu sắc, bố cục.
- JavaScript (Động từ): Chịu trách nhiệm tạo tương tác, hiệu ứng, tính toán logic.
Bài Tập Đánh Giá (Interactive Quiz)
Hãy chọn đáp án đúng cho các câu hỏi sau để nhận feedback ngay lập tức.
Câu 1: Khi bạn nhập một URL (ví dụ: facebook.com) vào trình duyệt và nhấn Enter, hành động đầu tiên xảy ra là gì?
Câu 2: Đâu là điểm khác biệt cốt lõi nhất giữa một Trang web Tĩnh (Static) và Trang web Động (Dynamic)?
Câu 3: Theo phép loại suy trong bài học, nếu một trang web là một ngôi nhà, thì lớp sơn tường màu xanh và những khung cửa sổ được sắp xếp ngay ngắn tương ứng với công nghệ nào?
Câu 4 (Tình huống): Một doanh nghiệp muốn xây dựng sàn thương mại điện tử khổng lồ quản lý hàng chục ngàn sản phẩm, giỏ hàng, và tính toán điểm tích lũy cho người dùng. Đội ngũ Front-end Development (chỉ giỏi HTML, CSS, JavaScript) cam kết có thể làm toàn bộ hệ thống này mà không cần ai khác. Lời cam kết đó đúng hay sai? Tại sao?
(0:00) Giới thiệu
(0:45) Quá trình mở 1 website trên trình duyệt
(1:35) Giới thiệu về web server (máy chủ)
- Mọi trang web đều được lưu trữ tại Web server (máy tính kết nối internet, trả kết quả khi nhận yêu cầu).
- Trình duyệt truy cập web -> gửi Request. Web server nhận yêu cầu -> trả về toàn bộ tập tin (Response).
(2:20) 3 thành phần chính – HTML, CSS và JavaScript
- Trình duyệt phân tích mã HTML, CSS và JS để hiển thị cho người dùng.
(3:25) Khái niệm Front-end Web Development
(3:55) Khái niệm web tĩnh (static website)
(4:50) Khái niệm Back-end
(6:30) Ngôn ngữ Back-end: Node JS, PHP, Python
(7:05) Khái niệm web động (dynamic website)
(7:45) So sánh web tĩnh và web động
(8:50) Vai trò của HTML, CSS và JavaScript
- HTML: Nội dung (văn bản, hình ảnh).
- CSS: Trình bày (màu sắc, vị trí).
- Javascript: Hiệu ứng, tương tác người dùng.
(0:45) Quá trình mở 1 website trên trình duyệt
(1:35) Giới thiệu về web server (máy chủ)
- Mọi trang web đều được lưu trữ tại Web server (máy tính kết nối internet, trả kết quả khi nhận yêu cầu).
- Trình duyệt truy cập web -> gửi Request. Web server nhận yêu cầu -> trả về toàn bộ tập tin (Response).
(2:20) 3 thành phần chính – HTML, CSS và JavaScript
- Trình duyệt phân tích mã HTML, CSS và JS để hiển thị cho người dùng.
(3:25) Khái niệm Front-end Web Development
(3:55) Khái niệm web tĩnh (static website)
(4:50) Khái niệm Back-end
(6:30) Ngôn ngữ Back-end: Node JS, PHP, Python
(7:05) Khái niệm web động (dynamic website)
(7:45) So sánh web tĩnh và web động
(8:50) Vai trò của HTML, CSS và JavaScript
- HTML: Nội dung (văn bản, hình ảnh).
- CSS: Trình bày (màu sắc, vị trí).
- Javascript: Hiệu ứng, tương tác người dùng.
[EN] Welcome to the first actual lecture of this course. Now, there is a good chance that this course is gonna be your very first contact with any web development. And so before we start writing HTML and CSS code, I think it might be a good idea to actually begin this course with a very high-level overview of this field of web development. So we're gonna talk about things like clients and servers, front-end and back-end development, static and dynamic websites, and of course about the core languages and core technologies of web development. And I'm going to explain all this around the process that happens when we open up a webpage in a browser. Just keep in mind again that this is just a high-level overview and so I'm gonna leave out a lot of details here. This is really just so you get familiar with some of these concepts and terms that all web developers know before you start your own journey.
[VI] Giới thiệu chung
Chào mừng bạn đến với bài giảng thực sự đầu tiên của khóa học này. Rất có khả năng đây sẽ là lần đầu tiên bạn tiếp xúc với lập trình web. Và vì vậy, trước khi chúng ta bắt đầu viết mã HTML và CSS, tôi nghĩ sẽ là một ý tưởng hay nếu bắt đầu khóa học này bằng một cái nhìn tổng quan ở mức độ cao về lĩnh vực lập trình web này. Vì vậy, chúng ta sẽ nói về những thứ như máy khách (clients) và máy chủ (servers), phát triển front-end và back-end, các trang web tĩnh và động, và tất nhiên là về các ngôn ngữ cốt lõi và các công nghệ cốt lõi của lập trình web. Và tôi sẽ giải thích tất cả điều này xoay quanh quá trình xảy ra khi chúng ta mở một trang web trong trình duyệt. Chỉ cần nhớ lại rằng đây chỉ là một cái nhìn tổng quan ở mức độ cao và vì vậy tôi sẽ bỏ qua rất nhiều chi tiết ở đây. Điều này thực sự chỉ để bạn làm quen với một số khái niệm và thuật ngữ mà tất cả các nhà phát triển web đều biết trước khi bạn bắt đầu hành trình của riêng mình.
Chào mừng bạn đến với bài giảng thực sự đầu tiên của khóa học này. Rất có khả năng đây sẽ là lần đầu tiên bạn tiếp xúc với lập trình web. Và vì vậy, trước khi chúng ta bắt đầu viết mã HTML và CSS, tôi nghĩ sẽ là một ý tưởng hay nếu bắt đầu khóa học này bằng một cái nhìn tổng quan ở mức độ cao về lĩnh vực lập trình web này. Vì vậy, chúng ta sẽ nói về những thứ như máy khách (clients) và máy chủ (servers), phát triển front-end và back-end, các trang web tĩnh và động, và tất nhiên là về các ngôn ngữ cốt lõi và các công nghệ cốt lõi của lập trình web. Và tôi sẽ giải thích tất cả điều này xoay quanh quá trình xảy ra khi chúng ta mở một trang web trong trình duyệt. Chỉ cần nhớ lại rằng đây chỉ là một cái nhìn tổng quan ở mức độ cao và vì vậy tôi sẽ bỏ qua rất nhiều chi tiết ở đây. Điều này thực sự chỉ để bạn làm quen với một số khái niệm và thuật ngữ mà tất cả các nhà phát triển web đều biết trước khi bạn bắt đầu hành trình của riêng mình.
[EN] But anyway, let's say that we're trying to access a webpage in our browser at omnifood.dev. And by the way, this is actually the website that we're gonna develop throughout this course. Now, what happens as we try to access this page is that our browser will send a request to the server where this page is hosted on the internet.
[VI] Ví dụ truy cập Web
Nhưng dù sao thì, giả sử rằng chúng ta đang cố gắng truy cập một trang web trong trình duyệt của mình tại địa chỉ omnifood.dev. Và nhân tiện, đây thực sự là trang web mà chúng ta sẽ phát triển trong suốt khóa học này. Bây giờ, điều xảy ra khi chúng ta cố gắng truy cập trang này là trình duyệt của chúng ta sẽ gửi một yêu cầu (request) đến máy chủ nơi trang này được lưu trữ trên internet.
Nhưng dù sao thì, giả sử rằng chúng ta đang cố gắng truy cập một trang web trong trình duyệt của mình tại địa chỉ omnifood.dev. Và nhân tiện, đây thực sự là trang web mà chúng ta sẽ phát triển trong suốt khóa học này. Bây giờ, điều xảy ra khi chúng ta cố gắng truy cập trang này là trình duyệt của chúng ta sẽ gửi một yêu cầu (request) đến máy chủ nơi trang này được lưu trữ trên internet.
[EN] So each and every website is stored on something called a server, which is basically a computer that is connected to the internet and is able to receive requests like this one. So again, when we browse to a certain website our web browser will send a request to the server where the website is stored, so where it is hosted. Then when the server receives the request, it will take all the files that make up the website and send them back to the browser. And so we say that the server sends a response to the browser, which essentially contains all of these files that the website is made of.
[VI] Máy chủ (Server) là gì?
Vì vậy, mỗi một trang web đều được lưu trữ trên một thứ gọi là máy chủ (server), về cơ bản là một máy tính được kết nối với internet và có khả năng nhận các yêu cầu như thế này. Một lần nữa, khi chúng ta duyệt đến một trang web nhất định, trình duyệt web của chúng ta sẽ gửi một yêu cầu đến máy chủ nơi trang web được lưu trữ, tức là nơi nó được host. Sau đó, khi máy chủ nhận được yêu cầu, nó sẽ lấy tất cả các tệp cấu thành nên trang web và gửi chúng trở lại trình duyệt. Và vì vậy, chúng ta nói rằng máy chủ gửi một phản hồi (response) đến trình duyệt, về cơ bản chứa tất cả các tệp mà trang web được tạo thành.
Vì vậy, mỗi một trang web đều được lưu trữ trên một thứ gọi là máy chủ (server), về cơ bản là một máy tính được kết nối với internet và có khả năng nhận các yêu cầu như thế này. Một lần nữa, khi chúng ta duyệt đến một trang web nhất định, trình duyệt web của chúng ta sẽ gửi một yêu cầu đến máy chủ nơi trang web được lưu trữ, tức là nơi nó được host. Sau đó, khi máy chủ nhận được yêu cầu, nó sẽ lấy tất cả các tệp cấu thành nên trang web và gửi chúng trở lại trình duyệt. Và vì vậy, chúng ta nói rằng máy chủ gửi một phản hồi (response) đến trình duyệt, về cơ bản chứa tất cả các tệp mà trang web được tạo thành.
[EN] Now, as you can see from these file extensions we have some HTML, CSS, and also JavaScript code here. And these are precisely the three languages that browsers can understand. So what this means is that all of the code that makes up a website needs to always be written in HTML, CSS, and JavaScript because again, these are essentially the three core technologies that any browser can understand. All right, now, once the browser receives these HTML, CSS, and JavaScript files from the service response, it will take the code and render the website that we were trying to access. So based on that code, okay? And with this you already have a good understanding of what actually happens when we browse to a website and also about the technologies that we use to build any website.
[VI] Bộ 3 ngôn ngữ cốt lõi
Bây giờ, như bạn có thể thấy từ các phần mở rộng tệp này, chúng ta có một số mã HTML, CSS và cả JavaScript ở đây. Và đây chính xác là ba ngôn ngữ mà các trình duyệt có thể hiểu được. Vì vậy, điều này có nghĩa là tất cả mã cấu thành nên một trang web luôn cần phải được viết bằng HTML, CSS và JavaScript bởi vì một lần nữa, đây về cơ bản là ba công nghệ cốt lõi mà bất kỳ trình duyệt nào cũng có thể hiểu. Được rồi, bây giờ, một khi trình duyệt nhận được các tệp HTML, CSS và JavaScript này từ phản hồi của máy chủ, nó sẽ lấy mã và hiển thị (render) trang web mà chúng ta đang cố gắng truy cập. Dựa trên mã đó, được chứ? Và với điều này, bạn đã hiểu rõ về những gì thực sự xảy ra khi chúng ta duyệt đến một trang web và cả về các công nghệ mà chúng ta sử dụng để xây dựng bất kỳ trang web nào.
Bây giờ, như bạn có thể thấy từ các phần mở rộng tệp này, chúng ta có một số mã HTML, CSS và cả JavaScript ở đây. Và đây chính xác là ba ngôn ngữ mà các trình duyệt có thể hiểu được. Vì vậy, điều này có nghĩa là tất cả mã cấu thành nên một trang web luôn cần phải được viết bằng HTML, CSS và JavaScript bởi vì một lần nữa, đây về cơ bản là ba công nghệ cốt lõi mà bất kỳ trình duyệt nào cũng có thể hiểu. Được rồi, bây giờ, một khi trình duyệt nhận được các tệp HTML, CSS và JavaScript này từ phản hồi của máy chủ, nó sẽ lấy mã và hiển thị (render) trang web mà chúng ta đang cố gắng truy cập. Dựa trên mã đó, được chứ? Và với điều này, bạn đã hiểu rõ về những gì thực sự xảy ra khi chúng ta duyệt đến một trang web và cả về các công nghệ mà chúng ta sử dụng để xây dựng bất kỳ trang web nào.
[EN] And that process of writing HTML, CSS and JavaScript code that the browser can understand is the process that we call front-end web development. So whenever you hear someone talking about front-end development, what they mean is developers writing the code that is displayed in a browser, which is basically the front-end of a website. And in fact, this is essentially what we're gonna learn in this course, or at least the very, very fundamentals of front-end development, which is learning HTML and CSS.
[VI] Front-end Development
Và quá trình viết mã HTML, CSS và JavaScript mà trình duyệt có thể hiểu được đó là quá trình mà chúng ta gọi là phát triển web front-end. Vì vậy, bất cứ khi nào bạn nghe ai đó nói về phát triển front-end, ý của họ là các nhà phát triển đang viết mã được hiển thị trong trình duyệt, về cơ bản là mặt tiền (front-end) của một trang web. Và trên thực tế, đây về cơ bản là những gì chúng ta sẽ học trong khóa học này, hoặc ít nhất là những điều rất, rất cơ bản của phát triển front-end, đó là học HTML và CSS.
Và quá trình viết mã HTML, CSS và JavaScript mà trình duyệt có thể hiểu được đó là quá trình mà chúng ta gọi là phát triển web front-end. Vì vậy, bất cứ khi nào bạn nghe ai đó nói về phát triển front-end, ý của họ là các nhà phát triển đang viết mã được hiển thị trong trình duyệt, về cơ bản là mặt tiền (front-end) của một trang web. Và trên thực tế, đây về cơ bản là những gì chúng ta sẽ học trong khóa học này, hoặc ít nhất là những điều rất, rất cơ bản của phát triển front-end, đó là học HTML và CSS.
[EN] Now, just as a side note here, whenever the files that make up the website are simply stored on the web server and are then sent to the browser as they are, we say that we have a static website, okay? And this will make a little bit more sense in a minute when we talk about what a dynamic website is. But for now, just keep in mind that a static website is basically a website where the files are simply sent from the server to the browser as they are, so without any transformations, all right?
[VI] Website tĩnh (Static Website)
Bây giờ, như một lưu ý phụ ở đây, bất cứ khi nào các tệp tạo nên trang web chỉ đơn giản được lưu trữ trên máy chủ web và sau đó được gửi đến trình duyệt y như nguyên trạng của chúng, chúng ta nói rằng chúng ta có một trang web tĩnh, được chứ? Và điều này sẽ có ý nghĩa hơn một chút trong giây lát khi chúng ta nói về một trang web động là gì. Nhưng hiện tại, hãy nhớ rằng một trang web tĩnh về cơ bản là một trang web nơi các tệp chỉ đơn giản được gửi từ máy chủ đến trình duyệt như trạng thái vốn có của chúng, tức là không có bất kỳ sự biến đổi nào, được chứ?
Bây giờ, như một lưu ý phụ ở đây, bất cứ khi nào các tệp tạo nên trang web chỉ đơn giản được lưu trữ trên máy chủ web và sau đó được gửi đến trình duyệt y như nguyên trạng của chúng, chúng ta nói rằng chúng ta có một trang web tĩnh, được chứ? Và điều này sẽ có ý nghĩa hơn một chút trong giây lát khi chúng ta nói về một trang web động là gì. Nhưng hiện tại, hãy nhớ rằng một trang web tĩnh về cơ bản là một trang web nơi các tệp chỉ đơn giản được gửi từ máy chủ đến trình duyệt như trạng thái vốn có của chúng, tức là không có bất kỳ sự biến đổi nào, được chứ?
[EN] So I hope that from this you learned what front-end development is, and also about the three core technologies that make up any website. And so now let's take it one step further and talk about something called back-end development. So let's try another example here, and this time let's try to understand what would happen when we try to access a website like udemy.com. So once again, the first step is that a request is sent to the web server where udemy.com is hosted. Now, why is a website like udemy so different from something like the static omnifood website that I showed you earlier? Well, a complex site like udemy.com is really completely different from a static site because there is a lot of content that is always changing all the time. Like on Udemy, there are always new courses and new reviews being added to the site. New ratings, and new course length are calculated for example, and really a bunch of other things like that are always happening. And so in order to make a system like this work udemy.com needs a whole application running on the server and they also need a big database, which basically contains all the courses, and all the reviews, all the users, and really all the content that is being displayed on their website. Now, to do all this front-end technologies like HTML and CSS are simply not enough. So basically, with what you're gonna learn in this course, you are not going to be able to build something like udemy.com, all right?
[VI] Back-end Development
Vì vậy, tôi hy vọng rằng qua đây bạn đã biết phát triển front-end là gì và cả về ba công nghệ cốt lõi tạo nên bất kỳ trang web nào. Và bây giờ, hãy tiến thêm một bước nữa và nói về một thứ gọi là phát triển back-end. Hãy thử một ví dụ khác ở đây, và lần này hãy thử hiểu điều gì sẽ xảy ra khi chúng ta truy cập một trang web như udemy.com. Tại sao một trang web như udemy lại khác biệt quá nhiều so với trang tĩnh omnifood trước đó? Chà, một trang phức tạp như udemy.com thực sự hoàn toàn khác với web tĩnh bởi vì có rất nhiều nội dung luôn thay đổi liên tục. Giống như trên Udemy, luôn có các khóa học mới và các bài đánh giá mới được thêm vào. Các xếp hạng mới và độ dài khóa học mới được tính toán, và thực sự có một loạt những thứ khác tương tự luôn xảy ra. Và vì vậy, để hệ thống này hoạt động, udemy.com cần một toàn bộ ứng dụng chạy trên máy chủ và họ cũng cần một cơ sở dữ liệu lớn, chứa tất cả khóa học, đánh giá, người dùng và toàn bộ nội dung được hiển thị. Để làm điều này, các công nghệ front-end đơn giản là không đủ. Nên về cơ bản, với những gì sắp học trong khóa này, bạn sẽ không thể tự xây dựng được một thứ giống như udemy.com đâu, được chứ?
Vì vậy, tôi hy vọng rằng qua đây bạn đã biết phát triển front-end là gì và cả về ba công nghệ cốt lõi tạo nên bất kỳ trang web nào. Và bây giờ, hãy tiến thêm một bước nữa và nói về một thứ gọi là phát triển back-end. Hãy thử một ví dụ khác ở đây, và lần này hãy thử hiểu điều gì sẽ xảy ra khi chúng ta truy cập một trang web như udemy.com. Tại sao một trang web như udemy lại khác biệt quá nhiều so với trang tĩnh omnifood trước đó? Chà, một trang phức tạp như udemy.com thực sự hoàn toàn khác với web tĩnh bởi vì có rất nhiều nội dung luôn thay đổi liên tục. Giống như trên Udemy, luôn có các khóa học mới và các bài đánh giá mới được thêm vào. Các xếp hạng mới và độ dài khóa học mới được tính toán, và thực sự có một loạt những thứ khác tương tự luôn xảy ra. Và vì vậy, để hệ thống này hoạt động, udemy.com cần một toàn bộ ứng dụng chạy trên máy chủ và họ cũng cần một cơ sở dữ liệu lớn, chứa tất cả khóa học, đánh giá, người dùng và toàn bộ nội dung được hiển thị. Để làm điều này, các công nghệ front-end đơn giản là không đủ. Nên về cơ bản, với những gì sắp học trong khóa này, bạn sẽ không thể tự xây dựng được một thứ giống như udemy.com đâu, được chứ?
[EN] So to write applications that are actually executed on web servers, developers use some kind of back-end language like Node.js, PHP, or Python. So what these languages do is to take data out of a database and basically assemble that data into the final files that will then be sent to the browser as the response. And this whole process is called back-end development because this is basically the invisible part of a website and so it's the website's back-end.
[VI] Các ngôn ngữ Back-end
Vì vậy, để viết các ứng dụng thực sự được thực thi trên máy chủ web, các nhà phát triển sử dụng một loại ngôn ngữ back-end nào đó như Node.js, PHP hoặc Python. Chức năng của những ngôn ngữ này là lấy dữ liệu ra khỏi cơ sở dữ liệu và về cơ bản là lắp ráp dữ liệu đó thành các tệp cuối cùng để gửi đến trình duyệt dưới dạng phản hồi. Và toàn bộ quá trình này được gọi là phát triển back-end bởi vì đây về cơ bản là phần vô hình của một trang web và vì vậy nó là back-end của trang web.
Vì vậy, để viết các ứng dụng thực sự được thực thi trên máy chủ web, các nhà phát triển sử dụng một loại ngôn ngữ back-end nào đó như Node.js, PHP hoặc Python. Chức năng của những ngôn ngữ này là lấy dữ liệu ra khỏi cơ sở dữ liệu và về cơ bản là lắp ráp dữ liệu đó thành các tệp cuối cùng để gửi đến trình duyệt dưới dạng phản hồi. Và toàn bộ quá trình này được gọi là phát triển back-end bởi vì đây về cơ bản là phần vô hình của một trang web và vì vậy nó là back-end của trang web.
[EN] Now, in this situation, we say that we have a dynamic website because the website is dynamically assembled from different pieces on the server and that happens each time that someone visits the website. So returning to the example of udemy.com, in fact each time that you visit udemy, a new version of the website is gonna be generated from their database and sent to your browser.
[VI] Website động (Dynamic Website)
Bây giờ, trong tình huống này, chúng ta nói rằng chúng ta có một trang web động (dynamic website) bởi vì trang web được lắp ráp một cách tự động từ nhiều phần khác nhau trên máy chủ và điều đó xảy ra mỗi khi có người truy cập trang web. Trở lại với ví dụ về udemy.com, thực tế mỗi khi bạn truy cập, một phiên bản mới của trang web sẽ được tạo ra từ cơ sở dữ liệu của họ và được gửi đến trình duyệt của bạn.
Bây giờ, trong tình huống này, chúng ta nói rằng chúng ta có một trang web động (dynamic website) bởi vì trang web được lắp ráp một cách tự động từ nhiều phần khác nhau trên máy chủ và điều đó xảy ra mỗi khi có người truy cập trang web. Trở lại với ví dụ về udemy.com, thực tế mỗi khi bạn truy cập, một phiên bản mới của trang web sẽ được tạo ra từ cơ sở dữ liệu của họ và được gửi đến trình duyệt của bạn.
[EN] Now, on the other hand, if udemy was a static website, then the website files would already be sitting on the server just waiting for someone to access them, okay? So that's the big difference between static and dynamic. In static, the files are already done and in dynamic, they first need to be generated by an application that is running on the server. All right, but now the rest of the process is actually the same as before. So these files are now ready to be sent to the browser as a response, which will then be converted to the final website like this one we see here of udemy.com. Great. Now, of course, there is no need for you to memorize all these names that I mentioned here, and also no need to deeply understand this process. All I want here is to give you an overview of what front-end and back-end actually are, what the browser and the server are, and also what static and dynamic websites are. Because I really think that this is gonna be extremely helpful as you start your developer journey.
[VI] Phân biệt web tĩnh và động
Mặt khác, nếu udemy là một trang web tĩnh, thì các tệp trang web đã nằm sẵn trên máy chủ chỉ chờ ai đó truy cập chúng. Đó là sự khác biệt lớn giữa tĩnh và động. Trong tĩnh, các tệp đã hoàn tất; trong động, chúng cần phải được tạo ra trước bởi một ứng dụng đang chạy trên máy chủ. Nhưng sau đó phần còn lại của quá trình thực sự giống hệt như trước đây. Tất nhiên, bạn không cần phải ghi nhớ tất cả những thuật ngữ mà tôi đã đề cập, và cũng không cần phải hiểu quá sâu. Tất cả những gì tôi muốn ở đây là cung cấp cho bạn một cái nhìn tổng quan. Bởi vì tôi thực sự nghĩ rằng điều này sẽ cực kỳ hữu ích khi bạn bắt đầu hành trình của mình.
Mặt khác, nếu udemy là một trang web tĩnh, thì các tệp trang web đã nằm sẵn trên máy chủ chỉ chờ ai đó truy cập chúng. Đó là sự khác biệt lớn giữa tĩnh và động. Trong tĩnh, các tệp đã hoàn tất; trong động, chúng cần phải được tạo ra trước bởi một ứng dụng đang chạy trên máy chủ. Nhưng sau đó phần còn lại của quá trình thực sự giống hệt như trước đây. Tất nhiên, bạn không cần phải ghi nhớ tất cả những thuật ngữ mà tôi đã đề cập, và cũng không cần phải hiểu quá sâu. Tất cả những gì tôi muốn ở đây là cung cấp cho bạn một cái nhìn tổng quan. Bởi vì tôi thực sự nghĩ rằng điều này sẽ cực kỳ hữu ích khi bạn bắt đầu hành trình của mình.
[EN] But now just to finish, let's take a closer look at the three languages of the front-end, so HTML, CSS, and JavaScript. And starting with HTML, HTML is responsible for the content of the page. So that's the text, the images, the buttons, and really all the content that you see on a webpage is always written inside an HTML file. Then the CSS, is responsible for the presentation of that content, so basically for styling and for laying out the elements on the webpage. Now finally, JavaScript is the actual programming language of the front-end. So it allows us to add dynamic and interactive effects to webpages. We can also use it to manipulate the content or the CSS to load data from web servers and even to build entire front-end applications, which we then call web applications. Now, we can also use the analogy of nouns, adjectives, and verbs to make the separation of rolls here a little bit easier to understand. So in this analogy, HTML represents the nouns, for example, saying that the p element is a paragraph. So paragraph is the noun here. The CSS then is the adjective because it basically describes the noun, for example, like this piece of CSS saying that the paragraph text is red. And so red is the adjective describing the noun, all right? Finally, JavaScript is of course the verb, like saying, hide the paragraph. So we're actually doing something here and so we have a verb, okay? Does that make sense? All right, and with this we finish our introduction to web development, and so we're now ready to start working with HTML and CSS code in this course.
[VI] Vai trò của HTML, CSS và JavaScript
Nhưng bây giờ để kết thúc, hãy xem xét kỹ hơn về ba ngôn ngữ của front-end: HTML, CSS và JavaScript. Bắt đầu với HTML, HTML chịu trách nhiệm cho nội dung của trang (văn bản, hình ảnh, các nút). Tiếp theo là CSS, chịu trách nhiệm về cách trình bày nội dung đó, tức là định kiểu và dàn trang. Cuối cùng, JavaScript là ngôn ngữ lập trình thực sự của front-end. Nó cho phép thêm các hiệu ứng động và tương tác.
Chúng ta có thể sử dụng phép loại suy về Danh từ, Tính từ và Động từ để làm cho việc phân chia vai trò dễ hiểu hơn. Trong phép loại suy này, HTML đại diện cho Danh từ (ví dụ: đây là một đoạn văn). CSS là Tính từ vì nó mô tả cơ bản về danh từ (ví dụ: đoạn văn có màu đỏ). Cuối cùng, JavaScript tất nhiên là Động từ (ví dụ: hãy ẩn đoạn văn đi - chúng ta đang làm một hành động gì đó).
Bạn hiểu ý chứ? Được rồi, và với điều này chúng ta kết thúc phần giới thiệu về phát triển web, chúng ta đã sẵn sàng bắt đầu làm việc với mã HTML và CSS trong khóa học này.
Nhưng bây giờ để kết thúc, hãy xem xét kỹ hơn về ba ngôn ngữ của front-end: HTML, CSS và JavaScript. Bắt đầu với HTML, HTML chịu trách nhiệm cho nội dung của trang (văn bản, hình ảnh, các nút). Tiếp theo là CSS, chịu trách nhiệm về cách trình bày nội dung đó, tức là định kiểu và dàn trang. Cuối cùng, JavaScript là ngôn ngữ lập trình thực sự của front-end. Nó cho phép thêm các hiệu ứng động và tương tác.
Chúng ta có thể sử dụng phép loại suy về Danh từ, Tính từ và Động từ để làm cho việc phân chia vai trò dễ hiểu hơn. Trong phép loại suy này, HTML đại diện cho Danh từ (ví dụ: đây là một đoạn văn). CSS là Tính từ vì nó mô tả cơ bản về danh từ (ví dụ: đoạn văn có màu đỏ). Cuối cùng, JavaScript tất nhiên là Động từ (ví dụ: hãy ẩn đoạn văn đi - chúng ta đang làm một hành động gì đó).
Bạn hiểu ý chứ? Được rồi, và với điều này chúng ta kết thúc phần giới thiệu về phát triển web, chúng ta đã sẵn sàng bắt đầu làm việc với mã HTML và CSS trong khóa học này.
