Web front-end (3) - URL, siêu liên kết và siêu văn bản

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

---------

Video

Slide

---------

Cập nhật: 24/3/2024
-----
Tải tài liệu đầy đủ: Tự học HTML căn bản