Lesson 1. Lập trình Web, HTML
Last updated
Last updated
Tổng quan ngành lập trình
Ngành lập trình, hay còn gọi là phát triển phần mềm, là một lĩnh vực công nghệ cao liên quan đến việc tạo ra, phát triển, và duy trì phần mềm máy tính. Đây là một trong những ngành có tốc độ phát triển nhanh chóng nhất và có ảnh hưởng sâu rộng đến hầu hết các lĩnh vực trong đời sống hiện đại.
Khái niệm cơ bản:
Lập trình viên (Developer): Là người viết mã (code) để tạo ra các phần mềm hoặc ứng dụng dựa trên các yêu cầu cụ thể. Công việc này đòi hỏi sự hiểu biết về ngôn ngữ lập trình và các công cụ phát triển.
Ngôn ngữ lập trình: Là các ngôn ngữ được dùng để viết phần mềm, hoặc viết chương trình để máy tính thực hiện ví dụ như Python, Java, C++, JavaScript, Ruby, và nhiều ngôn ngữ khác.
Những công việc phổ biến với Lập trình viên như:
Phát triển web (Web Development): Bao gồm việc xây dựng và duy trì các trang web. Chia thành hai mảng chính: frontend (giao diện người dùng) và backend (hệ thống phía server).
Phát triển ứng dụng di động (Mobile Development): Liên quan đến việc phát triển các ứng dụng chạy trên các thiết bị di động như điện thoại thông minh và máy tính bảng.
Phát triển phần mềm (Software Development): Bao gồm việc tạo ra các phần mềm cho máy tính để bàn, hệ điều hành, và các ứng dụng doanh nghiệp.
Khoa học dữ liệu (Data Science): Sử dụng lập trình để xử lý và phân tích dữ liệu, giúp đưa ra các quyết định kinh doanh hoặc khám phá các mẫu tiềm ẩn.
Trí tuệ nhân tạo (Artificial Intelligence - AI) và Học máy (Machine Learning - ML): Tập trung vào việc tạo ra các hệ thống có khả năng tự học và đưa ra quyết định dựa trên dữ liệu.
... Và nhiều công việc, ngành nghề khác
Lập trình là một ngành nghề được coi là học tập suốt đời, luôn đòi hỏi sự cập nhật kiến thức không ngừng nghỉ, do tính chất mang tính công nghệ thời đại, tức luôn thay đổi và phải phù hợp với nhu cầu thị trường
Lập trình Web là một trong những ngành nghề lập trình phổ biến, liên quan tới việc phát triển và duy trì các trang web, ứng dụng web. Đây là một phần quan trọng trong công nghệ thông tin hiện đại, đóng vai trò chủ chốt trong việc cung cấp các dịch vụ trực tuyến, giao tiếp, mua sắm, và nhiều hoạt động khác trên internet.
Lý do lựa chọn:
Nhu cầu tuyển dụng: Chính xác, lập trình Web phổ biến, mức độ canh tranh cao, nhưng nhu cầu tuyển dụng nhân lực luôn có và luôn trong tình trạng thiếu thốn những nguồn nhân lực đáp ứng được như cầu công việc.
Mức độ tiếp cận: Web mang tính trực quan giao diện, dễ dàng cài đặt, sử dụng, từ đó việc học tập trở nên dễ dàng tiếp cận hơn, nhất là với những người mới và giúp xây dựng tư duy logic trong lập trình
Dễ dàng tiếp cận, không có nghĩa dễ dàng thành thạo. Học tập và phát triển là một quá trình dài, hãy không nản chí và tiếp tục tiến lên phía trước
Một ứng dụng Web sẽ có 2 thành phần:
Web Frontend: Giao diện của Web, nơi mà người dùng sử dụng, tương tác trên đó.
Ví dụ: Giống như sử dụng màn hình máy tính để tương tác.
Web Backend: Nơi lưu trữ, logic xử lý nghiệp vụ dữ liệu, khi người dùng thực hiện tương tác dữ liệu trên Frontend
Ví dụ: Giống như bộ Case máy tính, sẽ xử lí logic khi người dùng tương tác trên giao diện
Backend không những chỉ đáp ứng được cho Web, mà còn đáp ứng được cho mọi loại ứng dụng sử dụng nó.
Với 2 thành phần trên, định hướng ưu tiên, ta sẽ lựa chọn học Web Frontend trước tiên, vì nó không mang nhiều logic xử lý hệ thống, mà sẽ trực quan trên giao diện hơn Backend.
Như đã biết, Web frontend là Giao diện của ứng dụng, trang Web, nơi mà người dùng có thể nhìn thấy và tương tác. Và để tạo nên được ứng dụng Web Frontend, ta sẽ cần 3 ngôn ngữ sau:
Viết tắt của Hypertext Markup Language, là ngôn ngữ đánh dấu siêu văn bản, ngôn ngữ chính để hiển thị nên giao diện Web. Được coi giống như Xương sống của trang Web.
Viết tắt của Cascading Style Sheets, là ngôn ngữ dùng dể làm đẹp cho giao diện Web.
Viết tắt của Javascript, là ngôn ngữ lập trình sử dụng trong lập trình Web Frontend, giúp xử lý các tương tác của Trang Web, được ví như là bộ não của Trang Web.
Trong nội dung khoá học này, chúng ta sẽ được tìm hiểu các ngôn ngữ theo thứ tự HTML -> CSS -> JS
Trong xuyên suốt khoá học và tới khi đi làm, các bạn có thể vẫn sử dụng những cong cụ này, hãy thành thạo trong việc sử dụng chúng.
VSCode
VSCode là một nền tảng chỉnh sửa, soạn thảo phù hợp cho các lập trình viên, với thiết kế đơn giản, sự linh hoạt trong việc cài đặt plugin (những tiện ích hoặc công cụ cần thiết) và chiếm dụng ít bộ nhớ.
Truy cập: https://code.visualstudio.com/
Cài đặt VSCode với thiết bị của bạn (Nền tảng đã tự động gợi ý trên trang chủ)
Thực hiện cài đặt như những cách cài đặt phần mềm bình thường, và sau đó giao diện sẽ có như sau:
Thực hiện cài đặt tiện ích giúp trải nghiệm trong quá trình lập trình được tốt nhất (tương lai có thể cài thêm nhiều các tiện ích khác phù hợp với nhu câu)
Trong biểu tượng các hình vuông trên thanh công cụ này, lựa chọn và gõ Live server, sau đó thực hiện bấm nút install để cài đặt. Công cụ này sẽ giúp ích rất nhiều trong quá trình học về việc liên tục tự động cập nhật chương trình khi có sự thay đổi.
Một tiện ích khác có thể cài đặt như: Dracula Theme (Giao diện VSCode), Material Icon (Hiển thị icon cho các file, folder),...
Hoạt động: Cài đặt công cụ, extension
Trong nội dung bài học này, ta sẽ được học về HTML, với những nội dung, tính chất căn bản nhất, giúp các bạn có thể triển khai, chạy được mã nguồn HTML để tạo nên giao diện Web đơn giản.
HTML là một ngôn ngữ đánh dấu siêu văn bản
Siêu văn bản: tức có thể đọc được các file media như âm thanh, video, hình ảnh...
Đánh dấu: tức nhằm khai báo cho trình duyệt biết rằng nội dung được đánh dấu là gì, văn bản bình thường hay các định dạng khác...
Và tất cả sẽ được thể hiện bởi khái niệm thẻ trong HTML (HTML tags)
Trước khi đi sâu hơn vào các phần lý thuyết, khái niệm, cú pháp của HTML, ta sẽ cùng tạo ra một giao diện Web đơn giản.
Ta sẽ tạo một Folder với mục tiêu lưu trữ mã nguồn của chúng ta sau này.
Ta thực hiện mở Folder CodeForEveryone với VScode:
Tiếp theo, ta chỉ cần lựa chọn được tới Folder CodeForEveryone đã chọn và được hiển thị tên trên thanh Explore như phía dưới là chính xác.
Để định nghĩa một file mã nguồn HTML, ta sẽ đặt file có định dạng (format) .html ví dụ như sau:
Tạo một file có tên: index.html (Sau này, đây sẽ là 1 chuẩn đặt file, định nghĩa file index là file chính, luôn được ưu tiên chạy trước).
Ta đưa chuột vào tên folder, sau đó chọn vào biểu tượng đầu tiên là tạo mới 1 file:
Kích vào và tạo 1 file index.html:
Bấm Enter hoặc kích ra ngoài sẽ tự động tạo và kết thúc:
Theo như định nghĩa, html là để chạy trên môi trường trình duyệt, sẽ hiển ra giao diện với mã nguồn của nó, đơn giản, ta sẽ đánh một đoạn văn: Hello world! vào trong nội dung file như sau:
Lưu ý:
Biểu tượng trên tab file, có dấu chấm tròn có nghĩa rằng file này có sự thay đổi. Ta cần thực hiện lưu lại file mỗi khi mong muốn file cập nhật dữ liệu mới nhất, sử dụng tổ hợp phím Ctrl + S (Mac + S) để lưu
Lúc này sẽ mất biểu tượng này.
Để chạy được file, rất đơn giản, ta sẽ trở về folder CodeForEveryOne, lúc này ta sẽ thấy file index.html trong folder này:
Thực hiện nháy đúp vào file để mở file này với trình duyệt
Lưu ý:
Có thể máy tính yêu cầu lựa chọn trình duyệt, bạn hãy lựa chọn trình duyệt mong muốn.
Nên lựa chọn chrome hoặc cốc cốc
Có thể sử dụng Extension Live server đã cài đặt
Kết quả:
Nếu muốn thêm nội dung gì, ta chỉ cần chỉnh sửa file html, thực hiện lưu và load lại trang web.
Hoạt động: Cài đặt file HTML, chạy file HTML
Trong khái niệm về HTML, đã được nhắc tới rằng, HTML sẽ sử dụng các thẻ, để đánh dấu nội dung, từ đó, browser (trình duyệt) sẽ hiểu và hiện thị theo đúng ý nghĩa.
Chắc hẳn, các bạn đã làm điều này, hoặc xem trên nguồn internet đó là thực hiện F12 (inspect) và xem trong một cửa sổ nào đó
Đây là cửa sổ dev tool, nơi mà các lập trình viên sẽ sử dụng trong quá trình lập trình. Ở đây ta có thể thấy chữ 'Hello world' được viết trong file HTML hiển thị ở đây. Ngoài ra, có các cú pháp nào đó màu tím (hồng) đó chính là các thẻ
Mỗi thẻ trong html sẽ có ý nghĩa riêng biệt và cần phải hiểu rõ chúng. Trước tiên là hiểu về cấu trúc của thẻ.
Do HTML có rất nhiều thẻ tức sẽ có nhiều tên thẻ, để thuận tiện ta sẽ gọi là tagName và cấu trúc sẽ được rõ ràng bằng cú pháp <tagName>.
Do HTML là đánh dấu, mà thường đánh dấu ta sẽ tưởng tượng rằng có giới hạn, tức có điểm bắt đầu và điểm kết thúc. Đối với thẻ, ta sẽ gọi là thẻ mở và thẻ đóng và những gì ở giữa thẻ này, ta sẽ gọi là nội dung của thẻ
<tagName> thẻ mở
</tagName> thẻ đóng - sẽ có thêm dấu / trước tên thẻ
<tagName> Nội dung của thẻ </tagName>
Trên là tính chất thẻ phổ biến, sẽ có những thẻ có cấu tạo đặc biệt, ta cần phải được tìm hiểu thêm
Lúc này ta cùng thử phân tích với nội của sổ dev tool để cùng xem và liệt kê tính chất thẻ
Ví dụ:
Thẻ mở
Thẻ đóng
Từ đây ta cũng có thể biết được rằng, có 1 thẻ tên là thẻ html. Tương tự với các thẻ còn lại, các bạn hãy dành thời gian phân tích để hiểu rõ hơn!
Hoạt động: Phân tích cấu trúc thẻ trên devtool
Như ví dụ phía trên, ta có thể thấy rằng trong file html, ta không hề điền những thẻ html, thẻ head hay thẻ body, mà bỗng nhiên ở đây lại xuất hiện. Đây là tiện ích mặc định của trình duyệt và ý nghĩa rằng mã nguồn html cần phải có cấu trúc như thế.
Hoặc hiểu đơn giản hơn, HTML được ví như một khung xương (hình ảnh trên) và ta cần phải có sự phân chia phần.
Để đầy đủ nhất, chúng ta sẽ vào VSCode đang mở file HTML vừa tạo, xoá nội dung Hello world.
Sau đó ghi dấu ! và bấm nút TAB (hoặc Enter)
Đầu tiên, ta sẽ làm quen với thẻ tại dòng số 1, DOCTYPE
Thẻ DOCTYPE: được sử dụng để xác định dạng văn bản, phiên bản của HTML
Thẻ html
Thẻ html này, có tác dụng bao bọc toàn bộ nội dung bên trong, mang ý nghĩa khai báo rằng những thẻ bên trong đó là thẻ html và tất cả những lần viết code html, ta đều phải viết vào bên trong này
Thẻ head
Thẻ này mục tiêu để chứa các khai báo dữ liệu hỗ trợ cho trang Web
Thẻ body
Nội dung bên trong thẻ body là nơi để hiển thị nên giao diện trang Web và tương lai tất cả các đoạn code muốn hiển thị trên giao diện, ta sẽ cần đưa vào trong thẻ body này
Hãy thử dành thời gian thêm nội dung trong thẻ body, thực hiện save file và load lại trang mỗi khi mong muốn hiển thị thông tin mới.
Nếu để ý, dường như tên của các thẻ html đều có ý nghĩa và tác dụng của chúng sẽ đúng theo ý nghĩa
Hoạt động: Tạo cấu trúc mã nguồn HTML
Do html có rất nhiều thẻ và tác dụng cũng khác nhau, vậy ta sẽ tìm hiểu theo nhóm thẻ
Tất cả được liệt kê dưới đây đều ở mức độ cơ bản và phổ biến
Nhóm thẻ này, mục tiêu hiển thị văn bản ra giao diện
<h1> đến <h6>
Ý nghĩa:
Các thẻ tiêu đề được sử dụng để xác định các tiêu đề của nội dung văn bản, như Tiêu đề 1, Tiêu đề 2,... Có tính chất hiển thị từ lớn về nhỏ
<h1>: Tiêu đề chính, thường chỉ xuất hiện một lần trên mỗi trang.
<h2>: Tiêu đề phụ, thường dùng để chia các phần chính trong nội dung.
<h3> đến <h6>: Các tiêu đề cấp thấp hơn, dùng để chia nhỏ các phần nội dung
Cách sử dụng:
<p>
Ý nghĩa:
Thẻ đoạn văn được dùng để chứa và hiển thị các đoạn văn bản.
Cách sử dụng:
<span>
Ý nghĩa:
Thẻ span dùng để định nghĩa những đoạn văn bản nhỏ trong một văn bản lớn, tương lai sẽ giúp điều chỉnh các 'style' của một nội dung nhỏ
Cách sử dụng:
<a>
Ý nghĩa:
Thẻ này sử dụng để tạo ra các liên kết (hyperlinks) trong trang web, cho phép người dùng chuyển từ trang này sang trang khác hoặc từ một phần này sang phần khác trong cùng một trang.
Cách sử dụng:
href: được gọi là thuộc tính của thẻ a . Ta sẽ được tìm hiểu dần qua các bài học
Khi kích vào chữ Liên kết trên giao diện, trang web sẽ được điều hướng tới đường dẫn https://example.com
Nhóm thẻ này, mục tiêu để thay đổi một số cách, ý nghĩa hiển thị của đoạn văn bản nào đó
<b>: Làm cho văn bản đậm, nhưng không có ý nghĩa ngữ nghĩa. Chỉ dùng để nhấn mạnh.
<strong>: Làm cho văn bản đậm và có ý nghĩa ngữ nghĩa, thể hiện tầm quan trọng.
<i>: Làm cho văn bản nghiêng, nhưng không có ý nghĩa ngữ nghĩa. Thường dùng để nhấn mạnh.
<em>: Làm cho văn bản nghiêng và có ý nghĩa ngữ nghĩa, thể hiện sự nhấn mạnh trong nội dung.
<u>: Làm cho văn bản có đường gạch chân.
Nhóm thẻ danh sách được dùng để tạo danh sách có thứ tự hoặc không có thứ tự.
<ul>: Danh sách không có thứ tự (unordered list), các mục được đánh dấu bằng dấu chấm tròn hoặc biểu tượng tùy chỉnh.
<ol>: Danh sách có thứ tự (ordered list), các mục được đánh số hoặc ký tự theo thứ tự.
<li>: Mục danh sách (list item), dùng bên trong <ul> hoặc <ol> để tạo các mục trong danh sách.
Hoạt động: Thực hiện viết các thẻ
Nhóm thẻ này giúp hiển thị các định dạng khác văn bản, như hình ảnh, video, âm thanh
Đối với nhóm thẻ này, ta có thể bắt gặp những thẻ không có thẻ đóng, chỉ có thẻ mở, đây được gọi là dạng Self Closing tag
<tagName />
Thay vì thẻ đóng, dấu / ở trước tên thẻ, thì thẻ này sẽ được đặt ở sau tên thẻ
<img>
Ý nghĩa:
Sử dụng để hiển thị một hình ảnh ra giao diện khi được cung cấp đường dẫn tới hình ảnh đó.
Cách sử dụng:
src: Viết tắt của source, tức nguồn của địa chỉ hình ảnh, hay đường dẫn tới hình ảnh.
alt: Viết tắt của Alternative information, dùng để mô tả thông tin về hình ảnh, khi đường dẫn bị lỗi, không thể hiên thị được thì thông tin này sẽ được hiện ra màn hình
<video>
Ý nghĩa:
Nhúng video vào trang web. Có thể dùng thêm các thuộc tính như controls, autoplay, loop
Cách sử dụng:
Đối với thẻ video, có thể dùng thẻ mở và thẻ đóng, do mục tiêu tương lai có thể chia nhỏ được thêm các thành phần hiển thị với video
<audio>
Ý nghĩa:
Sử dụng để nhúng và phát đoạn âm thanh
Cách sử dụng:
Hoạt động: Thực hiện viết thẻ
Mục tiêu để hiển thị bảng dữ liệu ra ngoài giao diện. Đối với Bảng, trong html ta cần nhiều thẻ kết hợp với nhau làm điều này.
Để dễ nhớ nhất, ta sẽ cùng hiểu ý tưởng đơn giản như sau:
Bảng bao gồm 2 thành phần là Tiêu đề và Nội dung của bảng, các nội dung này sẽ được trình bày theo hình thái Hàng
Từ đó có Hàng Tiêu đề, Hàng dữ liệu
Để thể hiện tiêu đề, dữ liệu của tiêu đề, ta sẽ sử dụng lý thuyết về Ô (Cell).
Thứ tự của ô rất quan trọng!
Giả sử ta có tiêu đề lần lượt như sau:
Đối với bảng, mỗi dữ liệu sẽ được biểu diễn trên một hàng, các dữ liệu phải đúng thứ tự tiêu đề cột.
Ví dụ ta có một dữ liệu: Số thứ tự là 1, Họ tên là Nguyễn Văn A, Lớp là Web Fullstack, sẽ được thể hiện trên bảng như hình ảnh:
Tương tự như vậy cho các dữ liệu khác
Sau khi nắm được về lý thuyết của Bảng, việc triển khai cũng sẽ theo tư tưởng như vậy và các thẻ sẽ sử dụng để triển khai bảng trên HTML sẽ có:
<table>: Định nghĩa thành phần hiển thị bảng
<thead>: table head - Định nghĩa phần Tiêu đề bảng
<tbody>: table body - Định nghĩa phần nội dung (Các hàng dữ liệu) bảng
<tr>: table row - Định nghĩa hàng
<th>: table heading - Định nghĩa Ô tiêu đề
<td>: table data - Định nghĩa Ô dữ liệu
Triển khai bảng với ví dụ trên thông qua HTML:
Thuộc tính border định nghĩa đường viền cho bảng, hiện nay thuộc tính này đã không còn được sử dụng cho một số trình duyệt, tuy nhiên ta vẫn đưa vào để cùng xem hình thái của bảng rõ ràng
Bảng còn rất nhiều thuộc tính nâng cao khác, hãy tìm hiểu, trải nghiệm thêm để mở rộng kiến thức.
Hoạt động: Thực hiện viết thẻ
Form là một nội dung giúp cho phía khách sử dụng (client) cung cấp các thông tin lên hệ thống, server, v.v...
Ví dụ:
Trong form sẽ có 2 khái niệm:
Dữ liệu: Do người sử dụng cung cấp (nhập thông tin vào các ô nhập dữ liệu - input).
Submit: Hành động gửi dữ liệu (Theo như ví dụ form đăng nhập trên là gửi thông tin tài khoản để xác minh).
Để tạo ra các ô dữ liệu, ta sẽ sử dụng thẻ <input>; loại thẻ dữ liệu cơ bản và phổ biến nhất.
Vẫn còn 1 số loại thẻ khác ngoài input và type khác của input, hãy tìm hiểu thêm!
Dĩ nhiên, khi sử dụng các thẻ input, nó đã hiển thị ra giao diện như mong muốn, nhưng về ý nghĩa là vẫn chưa đủ, thông thường khi sử dụng các ô dữ liệu, ta cần bọc thẻ <form> bên ngoài cùng để browser có thể đọc mã nguồn có ý nghĩa chính xác hơn và làm đúng nhiệm vụ của nó.
Ví dụ code trên, ta có thêm 1 nút Submit hiển thị ra giao diện, khi bấm nút này, trang web sẽ thực hiện gửi dữ liệu các ô input và reload.
Còn rất nhiều ý nghĩa khác của việc này, hãy tìm hiểu thêm để mở rộng kiến thức của bản thân.
Hoạt động: Thực hiện viết thẻ
Trên đây là một số kiến thức cơ bản nhất của HTML, trong việc tạo dựng nên khung sườn của trang Web, hãy thành thạo chúng và cố gắng mở rộng kiến thức của mình nhiều nhất có thể!
