Bài 12: HTML và CSS từ Zero đến Hero

  

1:  Liên kết là gì ?

Liên kết (links) hay siêu liên kết (hyperlink) là một tham chiếu đến tài liệu, 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. Liên kết là một trong những yếu tố quan trọng để tạo nên hệ thống WWW.

Để xem liên kết ở trạng thái hoạt động: 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 liên kết, có thể bấm vào để “nhảy” tới phần nội dung tương ứng.

Trong HTML, sử dụng phần tử a để tạo các liên kết, a viết tắt của anchor (cái mỏ neo).

Muốn tạo liên kết cho văn bản, chỉ việc bao văn bản đó bằng phần tử a, đi kèm là thuộc tính href cho biết nơi được liên kết đến, href là viết tắt của hypertext reference – tham chiếu tới siêu văn bản. Ví dụ,

[HTML]

<a href="http://www.google.com">Trang web của Google</a>

[Kết quả]

Đoạn mã HTML trên sẽ tạo ra liên kết cho chuỗi “Trang web của Google”, khi người dùng bấm vào chuỗi này, trình duyệt sẽ mở trang web có địa chỉ là “http://www.google.com”.

Để tạo liên kết cho hình ảnh, chỉ việc bao hình ảnh đó bằng phần tử a, đi kèm là thuộc tính href cho biết nơi được liên kết đến. Mà hình ảnh được tạo ra bằng phần tử img, do vậy thực tế là đặt phần tử img vào trong phần tử a. Ví dụ,

[HTML]

<a href="http://www.google.com"><img src="logo.gif" alt="logo cong ty"></a>

[Kết quả]

Khi người dùng bấm vào hỉnh ảnh trên giao diện trang web, trình duyệt sẽ mở trang web có địa chỉ là “http://www.google.com”.

Mặc định, hầu hết các trình duyệt sẽ định dạng phần văn bản có gắn liên kết là màu xanh da trời (blue), và gạch chân; các liên kết đã được người dùng bấm chuột vào sẽ có màu tím (purple). Tất nhiên, người lập trình có thể thay đổi các định dạng mặc định này.

HTML5 cho phép đặt mọi phần tử vào trong phần tử a, trong khi HTML4.01 chỉ cho phép đặt các phần tử inline vào trong phần tử a.

2:      URI, URN và URL là gì ?

URI

URI (Uniform Resource Identifier) – tạm dịch là “định danh tài nguyên thống nhất” hay “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. Gọi nôm na là “chuỗi định danh tài nguyên thống nhất”, gọi tắt là chuỗi định danh.

URI có thể là URL, hoặc URN, hoặc kết hợp URL và URN.

URN

URN (Uniform Resource Name – tạm dịch là định danh tài nguyên bằng tên), vì tên thì rất dễ bị trùng nên phải thêm các thông tin đi kèm, ví dụ phải được đặt tên theo một hệ thống thống nhất (namespace). ISBN là một hệ thống như vậy, ví dụ: urn:isbn:0451450523. Hoặc hệ thống tên của ietf sẽ là urn:ietf:rfc:2648.

URN là chuỗi định danh tài nguyên bằng tên, nghĩa là cho biết tên của tài nguyên mà không cho biết tài nguyên này nằm ở đâu và làm sao để lấy được tài nguyên này.

URL

Như đã biết, Web hay World Wide Web hay WWW là Không gian thông tin toàn cầu. Trong không gian này, bao gồm rất nhiều loại thông tin, cũng được gọi là các tài nguyên. Các tài nguyên tồn tại ở nhiều dạng khác nhau, ví dụ, dạng tài liệu, hình ảnh, âm thanh, video. Các tài nguyên thường được chứa trong các tập tin và được lưu trữ trong một máy tính nào đó trên mạng.

Trang web chính là phương tiện để hiển thị các tài nguyên trên, đồng thời cũng cho phép liên kết các tài nguyên với nhau để tạo thành một mạng lưới thông tin đa dạng, xuyên suốt.

Vậy phải có cách nào đó để xác định, hay định vị được chính xác từng tài nguyên trên không gian thông tin, từ đó mới tạo được các liên kết tới chúng, giải pháp là sử dụng URL.

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”, gọi ngắn gọn là đị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 gì để lấy được tài nguyên đó.

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:

Scheme://domain:port/path?query_string#fragment_id

Ví dụ một số URL:

https://en.wikipedia.org/wiki/Uniform_Resource_Locator

http://daotao.congty.vn/e-learning/ViewCourses.php?cSval=3151&SjTemp=158#noi-dung

file:///C:/Users/Win%208.1/Downloads/openemr/trangweb.html

Ý nghĩa các thành phần trong một URL,

– Scheme là giao thức được sử dụng để lấy tài nguyên hay để giao tiếp giữa web client và web server. Ví dụ: http, https, ftp, file.

– Domain là tên miền của web server, nơi chứa (các) trang web. Ví dụ: en.wikipedia.org, daotao.congty.vn.

– Port là cổng được sử dụng để giao tiếp giữa web client và web server, nếu không chỉ định rõ, thì giá trị của port sẽ được ngầm hiểu là 80.

– Path là đường dẫn (thư mục) của trang web hoặc nơi chứa các tài nguyên của một website tại web server. Ví dụ: wiki/Uniform_Resource_Locator, e-learning/ViewCourses.php, C:/Users/Win%208.1/Downloads/openemr/trangweb.html.

– Ngoài ra, URL cũng có thể chứa chuỗi truy vấn (query string), ví dụ, cSval=3151&SjTemp=158; hoặc một định danh trên trang HTML (fragment_id), ví dụ #noi-dung.

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.

Xem hình minh họa một URL cụ thể,

3:   Thuộc tính href

Trình duyệt sẽ dựa vào giá trị của thuộc tính href để biết được tài liệu được liên kết đến là gì. Giá trị của thuộc tính href là URL của một trang web hoặc của một tài nguyên web bất kì, ví dụ như tập tin hình ảnh, âm thanh, video. Giá trị của URL phải được bao lại bằng dấu nháy kép.

Có hai cách để thiết lập giá trị cho URL là: URL tuyệt đối và URL tương đối.

- URL tuyệt đối

URL tuyệt đối (absolute URL): cung cấp đường dẫn đầy đủ để có thể lấy được tài nguyên, bao gồm giao thức (protocol), tên miền (domain name), đường dẫn tập tin (pathname). URL tuyệt đối thường được sử dụng khi cần liên kết đến một tài nguyên không nằm trên cùng server. Ví dụ,

href=“http://www.google.com/”

- URL tương đối

URL tương đối (relative URL): cung cấp đường dẫn tương đối để có thể lấy được tài nguyên, URL tương đối thường được sử dụng khi cần liên kết đến một tài nguyên nằm trên cùng server. Khi đó, URL sẽ không cần có giao thức và tên miền, mà chỉ cần đường dẫn tập tin (pathname). Ví dụ,

href=“images/logo.gif”

Có ba kiểu liên kết hay được sử dụng là: liên kết tới các trang trên WWW, liên kết trong một website và liên kết trong một trang web. Lưu ý: hai khái niệm site và website là tương đương, tuy nhiên, từ website được dùng nhiều hơn.

4:    Liên kết tới các trang trên WWW

Để tạo liên kết đến các trang trên WWW cần sử dụng URL tuyệt đối. Ví dụ,

[HTML]

                        <h3>Một số trang web để học làm web</h3>

                        <ul>

                                    <li><a href="https://www.w3schools.com/">W3Schools</a></li>

                                    <li><a href="https://stackoverflow.com/">Stack Overflow</a></li>

                                    <li><a href="https://github.com/">Github</a></li>

                        </ul>