Trong trang web liên kết 2 siêu liên kết là gì

Đọc 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 đó.

URL thường được sử dụng để tham chiếu tới các trang web (giao thức HTTP), tuy nhiên nó cũng được sử dụng trong truyền tập tin (giao thức FTP), email (mailto), truy cập cơ sở dữ liệu (JDBC) và trong nhiều ứng dụng khác.

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. Ví dụ một số scheme: 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. Hệ thống sẽ đổi tên miền này thành địa chỉ IP để máy client 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ể,

Mặc dù URL là tập con của URI, và cộng đồng đang có xu hướng chuyển qua sử dụng URI thay cho URL vì URI chính xác và tổng quát hơn. Tuy nhiên, đôi khi người ta vẫn thích sử dụng khái niệm URL hơn. Trong thực tế, URL và URI có thể sử dụng thay thế cho nhau.

1.1.2 Siêu liên kết

Như đã biết, URL là địa chỉ của một tài nguyên trên hệ thống web, thực hiện liên kết giữa các URL này sẽ tạo ra một không gian thông tin. Để liên kết giữa các URL hay các tài nguyên cần đến 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 (hay tài nguyên web), người dùng có thể bấm vào liên kết để đến được phần nội dung tương ứng. Một liên kết có thể trỏ đến tài liệu khác hoặc một phần cụ thể bên trong tài liệu hiện hành.

Bạn có thể sử dụng siêu liên kết để kết nối các tài liệu với nhau. 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 (văn bản, các đối tượng đồ họa), chỗ nào con trỏ chuột chuyển từ kiểu mũi tên sang kiểu bàn tay thì đó (có thể) chính là một siêu liên kết, có thể bấm vào để nhảy tới phần nội dung tương ứng.

1.1.3 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 các tham chiếu (liên kết) tới các văn bản khác mà 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ự, người đọc sẽ đọc tuần tự; trong khi với siêu văn bản, phần nội dung sẽ được gắn thêm các siêu liên kết, giúp người đọc có thể duyệt theo các siêu liên kết để đọc các nội dung không theo tuần 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 được tạo ra bằng ngôn ngữ đánh dấu để tạo ra siêu văn bản (HyperText Markup Language - HTML). Siêu văn bản giúp dễ dàng xuất bản thông tin lên Internet.

1.1.4 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.5 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 sang đị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.

Bấm đúp vào tập tin index.html để mở tập tin 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: giao thức được trình duyệt sử dụng để trao đổi thông tin (lấy nội dung tập tin index.html) với server (server giả, thực tế là máy cục bộ) là file. Do máy server là 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 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.6 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

Đáp án: 1(D), 2(C), 3(C), 4(B), 5(A), 6(B)

---------

Video

Slide

---------