HTML – Link văn bản

117
HTML – Link văn bản

Textlink là các đường dẫn liên kết trỏ đến các trang web, tài liệu, hình ảnh, video trên website của bạn từ một website khác bất kỳ.

Liên kết các tài liệu

Một liên kết được xác định bằng cách sử dụng thẻ <a>. Người sử dụng có thể nhấn chuột vào phần đó để tới với tài liệu được gán liên kết. Dưới đây là cú pháp sử dụng thẻ <a>.

&amp;lt;a href=“url“&amp;gt;link text&amp;lt;/a&amp;gt;

Ví dụ:
Ví dụ sau liên kết với trang http://tuihoclaptrinh.com trong trang của bạn.

&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html&amp;gt;
&amp;lt;head&amp;gt;
&amp;lt;title&amp;gt;Hyperlink Example&amp;lt;/title&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;
&amp;lt;p&amp;gt;Click following link&amp;lt;/p&amp;gt;
&amp;lt;a href="http://www.tuihoclaptrinh.com" target="_self"&amp;gt;Tui học Lập trình&amp;lt;/a&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;

Kết quả là khi bạn nhấn vào Tui học Lập trình, bạn sẽ tới trang chủ của nó.

HTML - Link văn bản - 01

Thuộc tính target

Thuộc tính này được sử dụng để xác định vị trí nơi đường link được mở. Dưới đây là các tùy chọn:

Tùy chọnMiêu tả
_blankMở trang liên kết bằng cửa sổ mới hoặc tab mới
_selfMở trang liên kết ở chính cửa sổ hiện tại
_parentMở trang liên kết trong khung nguồn chứa đường link
_topMở trang liên kết trong cửa sổ toàn màn hình
targetframeMở tài liệu được liên kết trong targetframe đã đặt tên

Ví dụ:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Hyperlink Example&lt;/title&gt;
&lt;base href="../html/"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;Click any of the following links&lt;/p&gt;
&lt;a href="http://tuihoclaptrinh.com" target="_blank"&gt;Opens in New&lt;/a&gt; |
&lt;a href="http://tuihoclaptrinh.com" target="_self"&gt;Opens in Self&lt;/a&gt; |
&lt;a href="http://tuihoclaptrinh.com" target="_parent"&gt;Opens in Parent&lt;/a&gt; |
&lt;a href="http://tuihoclaptrinh.com" target="_top"&gt;Opens in Body&lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;

Kết quả:

HTML - Link văn bản - 02

Bạn hãy chạy trên trình duyệt của mình và trải nghiệm trên từng cú click nhé.

Sử dụng Base Path

Khi bạn liên kết tài liệu HTML với cùng một trang web, nó không yêu cầu một địa chỉ URL đầy đủ cho tất cả mọi link. Bạn có thể từ bỏ nó nếu bạn sử dụng thẻ <base> trong phần tiêu đề tài liệu. Thẻ này được sử dụng để cung cấp một đường link cơ sở cho tất cả các link. Vì thế, trình duyệt sẽ xâu chuỗi các đường link liên quan với đường link cơ sở và sẽ làm cho nó thành một đường link đầy đủ.

Ví dụ:
Bạn hãy xem url của page mà bạn đang hiện hành:

HTML - Link văn bản - 03

Ví dụ này ta khai base path là

<base href="http://tuihoclaptrinh.com">

Như vậy phần còn lại ta khai báo trong thẻ <a>:

href="/threads/13-html-link-văn-bản.28/"

Kiểm tra lại xem nhé:

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href="http://tuihoclaptrinh.com">
</head>
<body>
<p>Click following link</p>
<a href="/threads/13-html-link-văn-bản.28/" target="_blank">HTML Tutorial</a>
</body>
</html>

Kết quả:

HTML - Link văn bản - 04

Liên kết tới một khu vực trang

Bạn có thể tạo ra một link tới khu vực cụ thể trong trang web bằng cách sử dụng thuộc tính name. Thực hiện qua 2 bước:

Bước 1, đánh dấu khu vực trong trang mà bạn muốn tới bằng cách đặt tên nó trong thẻ <a…> như ở dưới đây:

<h1>HTML Text Links <a name="top"></a></h1>

Bước 2, tạo ra một siêu liên kết để kết nối tài liệu và xác định vị trí mà bạn muốn tới.

<a href="test.html#top">Go to the Top</a>

Nội dung trang web nhiều một tí, bạn sẽ thấy rõ tác dụng của nó.

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<h1>HTML Text Links <a name="top"></a></h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<p>Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<a href="test.html#top">Go to the Top</a>
</body>
</html>

Khi người sử dụng click vào Go to the Top

HTML - Link văn bản - 05

Kết quả sẽ về phần đầu của trang:

HTML - Link văn bản - 06

Thiết lập màu cho các liên kết

Bạn có thể thiết lập màu cho link, link hoạt động (active links) và link ghé thăm (visited links) bằng cách sử dụng các thuộc tính link, alink and vlink của thẻ <body>.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body alink="#54A250" link="#040404" vlink="#F40633">
<p>Click following link</p>
<a href="http://tuihoclaptrinh.com" target="_blank">Tui học Lập trình</a>
</body>
</html>

Kết quả:

HTML - Link văn bản - 07

Link tải về (Download Link)

Bạn có thể tạo các link văn bản để tải các tài liệu PDF, DOC, hoặc ZIP về máy khi người sử dụng nhấn vào link đó. Để thực hiện, bạn chỉ cần cung cấp tên URL đầy đủ của file đó.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<p>Click following link to download file</p>
<a href="uploadfiles/test.txt">Download File</a>
</body>
</html>

Kết quả:

HTML - Link văn bản - 08