Bài trước: Web front-end (2) - Trình duyệt web là gì?
-----
1.1
URL, siêu liên kết và siêu văn bản
Web là không gian thông tin toàn cầu. Không gian thông tin
này được tạo bởi một mạng lưới gồm nhiều tài nguyên kết nối với nhau. Mỗi một
tài nguyên được định vị bằng một địa chỉ duy nhất, gọi là URL. Để đi tới các
tài nguyên này, người dùng chỉ việc bấm chuột vào các siêu liên kết (hyperlink,
gọi tắt là link - liên kết) trong các trang web. Trang web chính là các siêu
văn bản. Như vậy, lập trình viên sẽ là người tạo ra các siêu văn bản, trong đó
có chứa các siêu liên kết để kết nối các tài nguyên với nhau.
1.1.1
URL là gì?
URL là viết tắt của Uniform Resource Locator, dịch sát nghĩa
là “bộ định vị tài nguyên thống nhất”, hiểu nôm na là “địa chỉ của một tài
nguyên web”, hay địa chỉ web (web address).
URL là một tham chiếu tới tài nguyên web, cho biết một tài
nguyên web nằm ở đâu trên hệ thống mạng và dùng giao thức (hay phương thức) gì để lấy (hay truy cập) được tài
nguyên đó.
Một số giao thức có sử dụng URL như HTTP để truy cập web, FTP
để truyền tập tin, mailto để gửi email, JDBC để truy cập cơ sở dữ liệu.
Trong các trình duyệt, URL của một trang web được hiển thị
trên thanh địa chỉ của trình duyệt (address bar).
URL cũng xuất hiện trong các thẻ của HTML, như các thẻ:
<a href=URL>, <img src=URL>, <script src=URL>, <link
href=URL>.
URL có định dạng như sau:
Ý nghĩa các thành phần trong một URL,
– Scheme là giao thức được sử dụng để trao đổi thông tin giữa
client và server. Một số scheme phổ biến: http, https, ftp, file, mailto, data,
irc. Scheme được ngăn cách với các thành phần phía sau bằng dấu “://”.
– Domain (hay domain name) là tên miền của máy server, cũng
được gọi là hostname, ví dụ: en.wikipedia.org, daotao.congty.vn. Máy tính của người dùng sẽ đổi
tên miền này thành địa chỉ IP để nó có thể tìm thấy và giao tiếp với
máy server. Cũng có thể phân chia tên miền thành các thành phần nhỏ hơn như:
tên miền con (sub domain), tên miền riêng, tên miền cấp 2 hoặc cấp 1 (top level
domain); ví dụ trong daotao.congty.vn, thì daotao là tên miền con, congty là
tên miền riêng, và vn là tên miền cấp 2.
– Port là cổng, được sử dụng để giao tiếp giữa client và server.
Trong giao thức HTTP nếu không chỉ định rõ, thì giá trị của port sẽ được ngầm
hiểu là 80, giao thức HTTPS là 443.
– Path là đường dẫn (đường dẫn thư mục, đường dẫn tuyệt đối)
của tài nguyên web trên máy server. Đường dẫn luôn bắt đầu bằng dấu xuyệt
(slash) (/), có nghĩa là thư mục gốc, mỗi thư mục ngăn cách nhau bằng một dấu “/”.
Ví dụ: /wiki/Uniform_Resource_Locator; /e-learning/ViewCourses.php; hay /C:/Users/Win%208.1/Downloads/openemr/trangweb.html.
– Ngoài ra, URL cũng có thể chứa chuỗi truy vấn hoặc một định
danh. Chuỗi truy vấn (query string) là chuỗi chứa các cặp key=value, nằm ngay
sau dấu ?, ví dụ: code=3151. Định danh vùng nội dung (fragment_id) là một vị
trí trên một trang web, được đánh dấu bằng một cái tên cụ thể, ví dụ một vùng
trên trang web có tên là #noi-dung.
Xem hình minh họa một URL cụ thể,
URL là tập con của URI, cộng đồng đang có xu hướng chuyển
qua sử dụng URI thay cho URL. URI chính xác và tổng quát hơn URL. Tuy nhiên,
nhiều người vẫn thích sử dụng khái niệm URL hơn. Bạn có thể sử dụng URL và
URI thay thế cho nhau.
1.1.2 Giao thức File
Nếu chú ý, khi dùng trình duyệt để mở trang web, địa chỉ của
trang web (URL) trên thanh địa chỉ (address bar) sẽ không bắt đầu bằng
“http://” hoặc “https://” như khi duyệt web thông thường, mà sẽ bắt đầu là
“file://”, ví dụ:
file:///C:/Users/Maxsys/Desktop/index.html
Tại sao vậy?
Vì URL là một tham chiếu tới tài nguyên web, trong
trường hợp này là tham chiếu tới một trang web. URL cho biết vị trí của trang
web trên hệ thống mạng và để lấy được trang web đó thì cần sử dụng giao thức
gì. Vậy ở đây, trình duyệt đã không dùng giao thức HTTP, hoặc HTTPS để lấy nội
dung trang web mà dùng giao thức File.
Giao thức File có tên đầy đủ là giao thức File URI, được đặc
tả trong RFC 1630 và RFC 1738, sử dụng để truy cập và lấy về nội dung của thư mục
hoặc tập tin bất kì. URI (Uniform Resource Identifier) – tạm dịch là “chuỗi định
danh tài nguyên thống nhất” hay “chuỗi nhận dạng tài nguyên thống nhất”, là một
chuỗi ký tự, được sử dụng để xác định, nhận dạng một tên hoặc một tài nguyên.
Ví dụ, trên máy tính đang chạy Windows, gõ dòng lệnh
file:///C:/ vào cửa sổ Run và trình duyệt để xem kết quả.
Ví dụ khác, giả sử đã có tập tin index.html trong ổ đĩa C,
gõ lệnh file:///C:/index.html vào cửa sổ Run và trình duyệt để xem kết quả.
Cú pháp của giao thức File có dạng:
file://host/path
Trong đó,
– host là tên của máy tính dạng FQDN (tên miền dạng đầy đủ)
– path là đường dẫn thư mục
Nếu tham số host không được cung cấp, giao thức File sẽ ngầm
hiểu là truy cập tại máy tính cục bộ (“localhost”), khi đó, cú pháp
file://host/path sẽ bị lược bớt đi chữ host trở thành file:///path
Như vậy, khi mở một trang web bằng cách nhập vào đường dẫn
kiểu như thế này: file:///C:/index.html, nghĩa là trình duyệt đã dùng giao thức File để truy cập và lấy về tập tin mã nguồn (index.html), sau đó sẽ biên dịch
mã HTML và hiển thị nội dung của trang web.
1.1.3 Siêu liên kết
Như đã biết, URL là địa chỉ của một tài nguyên trên Internet,
liên kết các URL này sẽ tạo ra hệ thống web. Để liên kết giữa các URL chúng ta
cần tới các siêu liên kết.
Siêu liên kết (hyperlink) hay liên kết (links) là một tham
chiếu đến tài liệu, hoặc tài nguyên web, người dùng có thể bấm vào các liên kết
này để mở nội dung được liên kết. Một liên kết có thể trỏ đến tài liệu khác hoặc
một vị trí cụ thể bên trong tài liệu.
Xem hình minh họa,
Để quan sát một siêu liên kết, bạn hãy mở một trang web bất
kì, rê chuột trên giao diện của trang web, chỗ nào con trỏ chuột chuyển từ hình
mũi tên sang hình bàn tay, thì đó có thể là một siêu liên kết, bạn có thể bấm
vào nó để “nhảy” tới phần nội dung được liên kết.
1.1.4 Siêu văn bản
Siêu văn bản (hypertext) là văn bản, được hiển thị trên màn
hình máy tính hoặc các thiết bị điện tử khác, có chứa tham chiếu (liên kết)
tới các văn bản khác, người dùng có thể truy cập trực tiếp bằng cách bấm chuột
(hoặc chạm) vào các liên kết.
Ngoài kiểu dữ liệu văn bản, khái niệm siêu văn bản cũng được
sử dụng để chỉ các bảng biểu, hình ảnh, video và các kiểu dữ liệu khác có tích
hợp siêu liên kết.
Với văn bản thông thường, nội dung của văn bản được tổ chức
theo kiểu tuần tự, nghĩa là bạn cần đọc theo thứ tự từ trước đến sau. Tuy
nhiên, với siêu văn bản, nhờ các siêu liên kết bạn có thể đọc các nội dung không
theo trình tự. Xem hình minh họa,
Siêu văn bản là một trong những khái niệm quan trọng trong
lĩnh vực web, các trang web chính là các siêu văn bản. HTML (HyperText Markup
Language) là công cụ để tạo ra các siêu văn bản. Bạn sẽ dùng siêu văn bản để xuất
bản thông tin lên Internet.
1.1.5 Xem và đọc thêm
URL là gì (đọc): https://vi.wikipedia.org/wiki/URL
What is URL (read) : https://en.wikipedia.org/wiki/URL
Parts of the URL (view): https://www.youtube.com/watch?v=3ytQJvqzKu8
Siêu liên kết là gì (đọc): https://vi.wikipedia.org/wiki/Si%C3%AAu_li%C3%AAn_k%E1%BA%BFt
Hyperlink: https://en.wikipedia.org/wiki/Hyperlink
What is hyperlink (view): https://www.youtube.com/watch?v=-GPxDeH7tp0
Siêu văn bản (đọc): https://vi.wikipedia.org/wiki/Si%C3%AAu_v%C4%83n_b%E1%BA%A3n
Hypertext (read): https://en.wikipedia.org/wiki/Hypertext
Các từ khóa (sử dụng các từ khóa này để tìm kiếm trên Google
hoặc Youtube để đọc và xem thêm): URL là gì, what is URL, parts of the URL, siêu
liên kết, hyperlink, siêu văn bản, hypertext.
1.1.6 Bài tập và thực hành
Bài tập 1: Quan sát một số URL trên mạng
– Mở trình duyệt, nhập vào thanh địa chỉ một URL
bất kỳ, ví dụ: https://en.wikipedia.org/
– Trình duyệt sẽ đổi tên miền en.wikipedia.org thành địa chỉ IP, kết nối tới máy server dựa trên IP và lấy về trang web. Bạn
vào cửa sổ cmd, gõ lệnh: ping en.wikipedia.org, ghi lại địa chỉ IP máy server của
wikipedia.
– Server sẽ gửi trang mặc định về cho trình duyệt,
ví dụ https://en.wikipedia.org/wiki/Main_Page
– Di chuyển chuột vào các liên kết (ít nhất 5
liên kết) có trên trang web, quan sát trên thanh trạng thái (status bar) của
trình duyệt (thanh ngang phía dưới của cửa sổ trình duyệt), ghi lại các URL mà
bạn quan sát được.
– Thêm thông tin cổng và URL để quan sát kết quả,
ví dụ nếu giao thức là https thì thêm cổng 443, giao thức http thì thêm cổng
80, ví dụ: https://en.wikipedia.org:443/wiki/Main_Page.
Bạn sẽ thấy trang web vẫn hiển thị bình thường (không bị lỗi).
– Kiểm tra xem trang wikipedia có hỗ trợ giao thức
HTTP hay không, bằng cách nhập vào URL sau: http://en.wikipedia.org:80/wiki/Main_Page
– Vào trang Tiki.vn, sử dụng trang web, quan sát
và ghi lại giá trị của chuỗi truy vấn “query_string”. Ví dụ: https://tiki.vn/search?q=loa%20m%C3%A1y%20t%C3%ADnh
Bài tập 2: Quan sát URL trên máy cục bộ
– Trên máy cục bộ, sử dụng phầm mềm Notepad tạo một
tập tin HTML có nội dung bất kỳ, ví dụ: D:\index.html với nội dung là dòng chữ
“Xin chao”.
– Mở tập tin index.html bằng
trình duyệt, sẽ thấy dòng chữ “Xin chao” xuất hiện trên màn hình.
– Quan sát đường dẫn sẽ thấy URL có nội dung sau:
file:///D:/index.html
Từ URL trên, có một vài nhận xét: trình
duyệt đã sử dụng giao thức File để lấy nội dung tập tin index.html. Do server chính
là máy cục bộ nên có tên là localhost, và đã bị lược bỏ. Bạn có thể thêm
localhost vào URL để truy cập tập tin index.html như bình thường (file://localhost/D:/index.html).
Từ file://localhost/D:/index.html
lược bỏ đi localhost sẽ thành file:///D:/index.html,
đó là lý do tại sao có 3 cái dấu xuyệt (///) liền nhau.
– Tạo thư mục mới có tên là mywebsite, chuyển tập
tin index.html vào trong thư mục vừa tạo, quan sát URL để hiểu thêm về đường dẫn
thư mục. Ví dụ: file:///D:/mywebsite/index.html
Bài tập 3. Tạo ra một siêu văn bản, có chứa 5 siêu
liên kết, để kết nối tới 5 trang web mà bạn yêu thích.
[Gợi ý]
– Mở phần mềm Notepad, tạo tập tin mới có phần mở
rộng là html, ví dụ: baiTap3.html
– Sử dụng cú pháp sau để tạo ra các siêu liên kết:
<a href=URL của trang web>Nội dung sẽ được hiển thị</a>. Ví dụ:
<a href= "https://www.w3schools.com/">Trang
w3school</a>
<a href= "https://tuoitre.vn/">Trang
báo Tuổi trẻ</a>
– Mở tập tin baiTap3.html bằng trình duyệt, bấm
chuột vào các dòng chữ để mở các trang web tương ứng.
1.1.7 Câu hỏi ôn tập
Câu hỏi 1. A Uniform Resource Locator (URL) is a reference
to a web resource that specifies its location on a computer network and a _______
for retrieving it.
A. address
B. channel
C. format
D. mechanism
Câu hỏi 2. Các thành phần thường có trong một URL gồm?
A. schema, fragment_id, query_string, path, port, domain
B. scheme, fragment_id, query_string, path, socket, domain
C. scheme, fragment_id, query_string, path, port, domain
D. scheme, fragment_id, query_language, path, port, domain
Câu hỏi 3. Khi mở tập tin C:\index.html bằng trình duyệt, giao
thức trình duyệt đã sử dụng trong URL là?
A. http
B. https
C. file
D. ftp
Câu hỏi 4. Khi mở tập tin C:\index.html bằng trình duyệt, tại
sao lại có ba dấu xuyệt (///) liền nhau?
A. Là cú pháp để truy cập tập tin trên máy cục bộ
B. Do lược bỏ tên của máy tính (localhost)
C. Là chuẩn của giao thức FTP
D. Là chuẩn của giao tiếp SSL
Câu hỏi 5. In computing, a hyperlink, or simply a link, is a
___________ to data that the user can follow by clicking or tapping. A
hyperlink points to a whole document or to a specific element within a
document.
A. reference
B. format
C. following
D. calling
Câu hỏi 6. Hypertext is _______displayed on a computer
display or other electronic devices with references (hyperlinks) to other text
that the reader can immediately access. Hypertext documents are interconnected
by hyperlinks, which are typically activated by a mouse click, keypress set, or
screen touch. Apart from text, the term "hypertext" is also sometimes
used to describe tables, images, and other presentational content formats with
integrated hyperlinks.
A. link
B. text
C. format
D. web
---------
---------
-----