---------
Phần 3. Cơ bản về HTML, web page, website, web application
Vậy cái đầu tiên cần phải học là HTML. Để ý sẽ thấy các tài
liệu hướng dẫn luôn viết kèm HTML với CSS, nhưng để đỡ rối, vì là người mới
học, còn “ngu ngơ”, nên tạm tách ra để học HTML trước.
Bước đầu học HTML là học ý nghĩa, mục đích của các thẻ và cố gắng hiểu trình duyệt nó sẽ xử lý cái thẻ đó như thế nào? Rồi dùng đi dùng lại nhiều lần cho nhớ. Học kiểu “nhồi sọ”, xin lỗi “sọ”!
Mở chương trình Notepad, nhập vào nội dung sau:
<!DOCTYPE html>
<html>
<head>
<meta
charset="UTF-8">
<title>Document</title>
</head>
<body>
Xin chào!
</body>
</html>
Lưu vào thư mục bất kì (nên tạo một thư mục để chứa các bài
thực hành), với tên là trangweb.html.
Khi lưu, trong mục Save as type, nhớ chọn là All Files (*.*), để máy tính nó không thêm cái đuôi .txt vào tập tin, mục Encoding chọn UTF-8.
Chuột phải vào tập tin trangweb.html, chọn Open with, chọn
một trình duyệt bất kì, ví dụ chọn Chrome, xem kết quả.
Trên màn hình của trình duyệt
sẽ xuất hiện chữ ‘Xin chào!’
Vậy là đã tạo được một trang web, chạy được, và kết quả là
chữ “Xin chào!” xuất hiện trên trình duyệt. Tuy nhiên, địa chỉ trên thanh
Address của trình duyệt thì hơi kì cục (ví dụ: file:///D:/html/trangweb.html),
nó phải là http:// gì đó chứ, cái này sẽ tìm hiểu ở các phần sau.
Trang web, website, ứng dụng web là gì?
Xem clip sau: Phân biệt web page, website, web application https://www.youtube.com/watch?v=ylbQrYhfa18
Trang web (webpage), là các trang đơn vị để cấu thành
website. Ví dụ, trang chủ, trang tin, trang quản trị, trang đăng nhập. Mỗi
trang web thường phục vụ cho một mục đích cụ thể. Ví dụ đây là địa chỉ của một trang
web: www.congty.com/index.html.
Với người dùng, trang web là một trang thông tin được thể
hiện trên trình duyệt. Với hệ thống máy tính, trang web là một tập tin, thường
được viết bằng ngôn ngữ HTML. Để tạo ra một trang web, cần kết hợp ngôn ngữ
HTML với các thành phần khác như các ngôn ngữ kịch bản (script), các tập tin định dạng
(style sheet), hình ảnh.
Trang web thường được chia thành hai loại: trang web tĩnh và
trang web động.
Trang web tĩnh: là trang web chứa nội dung cố định, bất kì
thời điểm nào khi người dùng truy cập thì nó cũng hiển thị đúng những nội dung
như nó vốn có, người dùng không có khả năng tương tác với nó, không sử dụng cơ
sở dữ liệu. Công cụ để tạo trang web tĩnh thường là HTML. Đường dẫn của trang
web tĩnh trên thanh địa chỉ luôn kết thúc là phần mở rộng của tập tin, ví dụ .html,
.php.
Trang web động: là trang web được tạo ra bởi các ngôn ngữ kịch
bản (scripting language) và các đoạn mã cho phép người dùng tương tác (thêm, xóa,
sửa) với cơ sở dữ liệu tại server, cho phép người dùng tương tác với trang web.
Website: chưa biết từ tiếng Việt tương đương nên dùng luôn
tiếng Anh, website là một tập hợp nhiều trang web, các trang web này được liên
kết với nhau (interlinked) theo một cấu trúc cụ thể (well-structured), và nằm trong
cùng một domain (hiểu nôm na là nằm trong cùng một thư mục).
Website chứa nhiều thông tin, cung cấp nhiều chức năng khác
nhau. Ví dụ đây là địa chỉ của một website: www.congty.com.
Có nhiều loại website như: website giới thiệu, website quảng bá sản phẩm,
website thương mại điện tử, website tin tức.
Website tĩnh (static website) là website chỉ chứa các trang
web tĩnh.
Website động (dynamic website) là website có chứa các trang
web động.
Ứng dụng web: là một chương trình ứng dụng, được lưu trên
server và chạy trên nền tảng web. Người dùng có thể sử dụng ứng dụng thông qua
Internet, Intranet. Để tạo ra ứng dụng web, người ta thường sử dụng các ngôn
ngữ lập trình, kết hợp với các framework, các CMS. Ví dụ các ứng dụng web: thư
điện tử, bán hàng trực tuyến, diễn đàn, nhật kí mạng, bản đồ, quản lý nhân lực,
quản lý y tế và chăm sóc sức khỏe (ví dụ cái ứng dụng openemr đã nói ở Phần 2).
So sánh sự khác nhau giữa website động và ứng dụng web:
Website động
|
Ứng dụng web
|
- Cũng cho phép người dùng tương tác và thêm nội dung, tuy
nhiên phần lớn nội dung vẫn là do nhà phát triển tạo ra.
- Ít phức tạp và dễ phát triển hơn so với ứng dụng web.
|
- Hoạt động dựa trên sự tương tác từ người dùng
- Hầu hết nội dung và dữ liệu là do người dùng đóng góp
- Giống như một ứng dụng desktop
- Phức tạp và cần nhiều kĩ năng hơn để phát triển so với
website động
|
Vậy trang web vừa tạo ở trên (trangweb.html) là một trang
web tĩnh. Nó được tạo ra bằng ngôn ngữ HTML. À, thế là để tạo được một trang
web tĩnh, để học ngôn ngữ HTML, để xuất kết quả, chỉ cần một trình duyệt và một
chương trình soạn thảo văn bản là đủ (ví dụ, Chrome và Notepad).
Khi mới học làm web (một vài ngày đầu tiên), nên sử dụng
chương trình Notepad. Nó có cái lợi là không phải đi kiếm đâu xa, máy tính chạy
Windows nào cũng có Notepad, lập trình bằng Notepad bắt buộc phải gõ từng lệnh,
từng thẻ, từng chữ, từng câu, do vậy mau nhớ ngôn ngữ HTML. Ngoài ra nó còn tạo
ra cảm giác thú vị, khi từ một đoạn mã có vẻ luộm thuộm, xấu xí, nhưng khi xem
trên trình duyệt thì thấy nó đẹp không ngờ.
Phiên bản mới nhất của HTML hiện nay là HTML5, vì vậy sẽ học
luôn cái mới nhất cho tiện. Nhớ xem các clip và làm theo, làm theo hai, ba lần
càng tốt. Cách học này bắt chước theo cuốn “Ngũ luân thư”.
Trong các bài viết đều có tham khảo các clip, bài viết, hình
ảnh, và rất nhiều thứ khác trên mạng. Để tôn trọng vấn đề bản quyền và tôn
trọng tác giả nên sẽ ghi rõ liên kết (link) của các tài nguyên. Vừa học vừa thầm cám ơn
các tác giả. Mọi người đều có cái gì đó để mình học theo, “nhân vô thập toàn”,
làm gì có ai hoản hảo, mình thấy hay thì theo, thấy không hay thì rút kinh
nghiệm cho bản thân, quan trọng là họ đã chia sẻ để mình có cái mà học.
Đây là clip số 1: giới thiệu về trang web, do laptrinh.io
chia sẻ trên youtube.
Đây là clip số 2: giới thiệu về công cụ và môi trường.
Theo clip số 2, để lập trình web tĩnh, chỉ cần Sublime Text
và một trình duyệt là đủ. Lưu ý ở đây là vai trò của Notepad và Sublime Text là
như nhau, đều dùng để viết mã, sau đó lưu nội dung đã viết thành một tập tin,
vậy thôi. Tuy nhiên Sublime Text giúp viết mã chuyên nghiệp và nhanh hơn rất
nhiều.
Ở phần trên, đã tạo ra một trang web tĩnh (trangweb.html),
tuy nhiên, mới chỉ làm theo vậy thôi, chứ chưa hiểu nội dung từng dòng mã, xem
các clip sau để hiểu rõ hơn.
Đây là clip số 3: Tổng quan về một trang web.
Clip số 3 giới thiệu tổng quan các thành phần trong một
trang HTML, hướng dẫn cách xem mã nguồn của một trang web (View page source), ý
nghĩa của thẻ (tag) <!DOCTYPE html>, thẻ chú thích (comment), thuộc tính
của thẻ (attribute). Xem mã nguồn rất quan trọng, nó giúp mình hiểu được họ đã
viết mã như thế nào, từ đó bắt chước theo.
Đây là clip số 4: Cấu trúc cơ bản của một trang HTML, giới
thiệu các thẻ <html>, <head>, <body>, <meta>,
<title>.
Đây là clip số 5, giới thiệu về thẻ tiêu đề (heading):
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>; và thẻ
hiển thị văn bản <p>.
Đây là clip số 6, hướng dẫn định dạng nội dung văn bản, dùng
các thẻ: <strong>, <i>, <strike>, <em>, <sub>,
<sup>.
Đây là clip số 7, hướng dẫn hiển thị kí tự đặc biệt.
Đây là clip số 8, một số thẻ định dạng văn bản khác:
<blockquote>, <cite>, <address>.
Đây là clip số 9, hướng dẫn tạo một liên kết tới trang web
khác, sử dụng thẻ <a>, thuộc tính href, target.
Tới đây, thấy các thẻ có vẻ đã nhiều và khó nhớ. Tất nhiên
cứ làm nhiều lần thì sẽ nhớ, nó sẽ đi vào đầu mình khi nào không hay. Tuy
nhiên, để ý là bản thân các thẻ, hay từ khóa, tự nó đã nói lên ý nghĩa, vì vậy
nên bỏ thêm một chút thời gian để tìm hiểu về nghĩa của các thẻ hay các từ
khóa, điều này sẽ giúp việc ghi nhớ nhanh hơn và thói quen làm việc có logic,
thay vì học thuộc một cách máy móc. Ví dụ, tại sao liên kết tới trang web khác
lại dùng thẻ <a>, à là vì thẻ <a> là viết tắt của chữ “anchor” có
nghĩa là cái mỏ neo, hay cái móc. Tại sao muốn liên kết tới đâu? lại dùng thuộc
tính “href”, à vì href là viết tắt của Hypertext REFerence. Muốn biết mấy thứ
này cứ vào trang google, gõ từ khóa href
stands for là có kết quả liền.
Đây là clip số 10, hướng dẫn hiển thị hình ảnh trên trang
web, sử dụng thẻ <img>.
Đây là clip số 11, hướng dẫn liên kết bằng hình ảnh. Chỉ cần
bao hình ảnh bằng thẻ <a>.
Đây là clip số 12, hướng dẫn hiển thị danh sách, sử dụng các
thẻ <ul>, <ol>, <li>.
Đây là clip số 13, hướng dẫn tạo bảng, sử dụng các thẻ:
<table>, <tr>, <td>, <th>.
Đây là clip số 14, hướng dẫn tạo form, sử dụng các thẻ
<input>, <label>, <textarea>, <br>, <button>. Các
phương thức gửi dữ liệu của form về
server gồm: GET, POST, PUT, PATCH, DELETE.
Đây là clip số 15, hướng dẫn về các kiểu của thẻ
<input>.
Đây là clip số 16, hướng dẫn cách tạo danh sách lựa chọn, sử
dụng thẻ <select>.
Khi làm theo 16 clip vừa qua, sẽ nhận thấy chúng ta chỉ làm
việc với hai đối tượng là chương trình soạn mã (Notepad, Sublime Text hoặc VS Code) và
trình duyệt; ngôn ngữ được sử dụng ở đây là HTML. Nghĩa là chúng ta đã sử dụng
ngôn ngữ HTML để bắt trình duyệt thực thi các công việc mà chúng ta muốn.
HTML là viết tắt của HyperText Markup Language, thường được
gọi là Ngôn ngữ Đánh dấu Siêu văn bản (hiểu là: ngôn ngữ đánh dấu văn bản thô (plain
text) để tạo thành siêu văn bản, dùng các thẻ để đánh dấu). HTML không phải là ngôn ngữ lập trình,
nó là ngôn ngữ đánh dấu, hay ngôn ngữ trình bày, được sử dụng kết hợp với các
thành phần khác để tạo ra trang web. Để ý điều này để biết, muốn điều khiển
trình duyệt một cách linh hoạt cần sử dụng thêm ngôn ngữ khác, ngoài ngôn ngữ
HTML.
Trình duyệt là chương trình thực thi các chỉ dẫn trong tập
tin HTML. Như ở trên đã nói, hiện nay có các trình duyệt phổ biến là: Chrome,
Firefox, Safari, Opera, Internet explorer. Các trình duyệt có thể được cài trên
các máy tính, trên thiết bị di động, được nhúng trong các ứng dụng khác, được
nhúng trong các thiết bị dân dụng (tủ lạnh, tivi, xe hơi). Mỗi trình duyệt lại
có rất nhiều phiên bản. Người dùng có thể sử dụng bất kì trình duyệt nào, với
bất kì phiên bản nào.
[Xem và làm theo khóa học HTML của cione, giảng chi tiết hơn chút xíu]
- 1. HTML là gì?
- 2. Làm quen với HTML
- 3. Phần tử và thuộc tính
- 4. Tiêu đề và đoạn
- 5. Định dạng đoạn
- 6. Thẻ diễn giải nội dung
- 7. Danh sách
- 8. Hình ảnh
- 9. Hình ảnh (tt)
- 10. Thẻ Object, embed
- 11. Thẻ video
- 12. Nhúng trang lồng nhau (iframe)
https://www.youtube.com/watch?v=wmHU9V2CQAA&index=12&list=PL75xdq9Y-GaTpxBQSzqEsFhAQSbsF_bpP
- 13. Các thành phần của một liên kết
- 14. Tạo ra một liên kết
- 15. Thực hành tạo một liên kết
- 16. Thuộc tính target của một liên kết
- 17. Liên kết tới các fragment
- 18. Bảng
- 19. Tạo bảng có ngữ nghĩa
- 20. Form
- 21. Radio, checkbox
- 22. Nhóm các control
Hai nhiệm vụ quan trọng của HTML cần nhớ là “cấu trúc” (structure)
và “ngữ nghĩa” (meaning).
– Cấu trúc nghĩa là sử dụng HTML để tạo ra bố cục của nội
dung trang web.
– Ngữ nghĩa là sử dụng HTML để tạo ra ngữ nghĩa cho nội dung
của trang web thông qua ngữ nghĩa của các thẻ.
Khi thực thi các chỉ dẫn trong tập tin HTML, trình duyệt sẽ thực thi theo trình tự nào? Trải qua những công đoạn nào? Phần tiếp theo sẽ tìm hiểu.
-----------
-----------
Cập nhật [23/08/2020]
-----------