Text Link trong HTML

Một trang web có thể chứa các đường link khác nhau để liên kết trực tiếp với các trang khác hay trong một phần của một trang. Những liên kết này được gọi là Hyperlinks (siêu liên kết).

Hyperlinks cho phép khách truy cập vào các trang web khác nhau bằng cách nhấn chuột vào từ, cụm từ, và hình ảnh. Vì vậy, bạn có thể tạo các đường Hyperlinks sử dụng văn bản hoặc hình ảnh có trên trang web của bạn.

Ghi chú: Bạn nên truy cập vào trang Tìm hiểu về URL

Thẻ a trong HTML

Một liên kết được xác định bằng cách sử dụng thẻ <a>. Thẻ này gọi là thẻ neo (anchor tag), và bất kỳ ở giữa thẻ mở <a> và thẻ đóng </a> trở thành một phần của đường liên kết và khi 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>.

<a href="đường dẫn url tới trang HTML" ... danh-sách-thuộc-tính>Link Text</a>

Ví dụ text link trong HTML

Hãy cùng xem ví dụ sau mà liên kết với trang https://vietjack.com trong trang của bạn.

<!DOCTYPE html>
<html>
<head>
<title>Vi du text link trong HTML</title>
</head>
<body>
<p>Click chuot vao duong link sau:</p>
<a href="https://vietjack.com" target="_self">Vietjack Homepage</a>
</body>
</html>

Kết quả là khi bạn nhấn vào Vietjack Homepage, bạn sẽ tới trang chủ của nó.

Click chuot vao duong link sau:

Vietjack Homepage

Quảng cáo

Thuộc tính target trong HTML

Chúng ta đã sử dụng thuộc tính target trong ví dụ trước. 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ọn	Miêu tả
_blank	Mở trang liên kết trong cửa sổ mới
_self	Mở trang liên kết trong cùng một khung giống với khung chứa liên kết
_parent	Mở trang liên kết trong khung nguồn chứa đường link
_top	Mở trang liên kết trong cửa sổ toàn màn hình
targetframe	Mở tài liệu được liên kết trong targetframe đã đặt tên

Ví dụ

Dưới đây là ví dụ để hiểu rõ sự khác nhau cơ bản trong các tùy chọn ở trên:

<!DOCTYPE html>
<html>
<head>
<title>Vi du text link trong HTML</title>
<base href="../html/">
</head>
<body>
<p>Click chuot vao mot trong cac link sau:</p>
<a href="../html/text_link_trong_html.jsp" target="_blank">Vi du gia tri _blank</a> |
<a href="../html/text_link_trong_html.jsp" target="_self">Vi du gia tri _self</a> |
<a href="../html/text_link_trong_html.jsp" target="_parent">Vi du gia tri _parent</a> |
<a href="../html/text_link_trong_html.jsp" target="_top">Vi du gia tri _top</a>
</body>
</html>

Nó sẽ hiển thị kết quả sau, bạn nhấn chuột vào các đường link khác nhau để hiểu sự khác nhau giữa các tùy chọn trên của thuộc tính target.

Click chuot vao mot trong cac link sau:

Vi du gia tri _blank | Vi du gia tri _self | Vi du gia tri _parent | Vi du gia tri _top

Sử dụng Base Link trong HTML

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ụ

Dưới đây là ví dụ về sử dụng thẻ <base> để xác định đường link cơ sở URL và sau đó chúng ta có thể sử dụng các đường liên quan cho tất cả các đường link mà không cần cung cấp đường liên kết đầy đủ cho các link.

<!DOCTYPE html>
<html>
<head>
<title>Vi du text link trong HTML</title>
<base href="../html/">
</head>
<body>
<p>Click chuot vao duong link sau:</p>
<a href="../html/text_link_trong_html.jsp" target="_blank">Bai huong dan HTML</a>
</body>
</html>

Kết quả là khi bạn nhấn vào đường link: Bai huong dan HTML.

Bây giờ thì URL đã cho <a href="../html/text_link_trong_html.jsp" được xem như là <a href="https://vietjack.com/html/text_link_trong_html.jsp".

Click chuot vao duong link sau:

Bai huong dan HTML

Quảng cáo

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

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. Bạn thực hiện qua 2 bước:

Đầu tiên tạo một liên kết tới khu vực trong trang mà bạn muốn tới và đặt tên nó sử dụng thẻ <a...> như ở dưới đây:

<h1>Vi du text link trong HTML <a name="top"></a></h1>

Bước 2, bạn 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="../html/text_link_trong_html.jsp#top">Ve dau trang</a>

Nó sẽ tạo ra đường link sau, từ đó bạn nhấn chuột vào Ve dau trang để về phần đầu của trang.

Ve dau trang

Thiết lập màu cho các link trong HTML

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

Ví dụ

Dưới đây là một ví dụ. Bạn lưu code trong test.htm và mở nó bằng bất cứ trình duyệt nào để hiểu cách các thuộc tính link, alink và vlink này làm việc.

<!DOCTYPE html>
<html>
<head>
<title>Vi du text link trong HTML</title>
<base href="../html/">
</head>
<body alink="#54A250" link="#040404" vlink="#F40633">
<p>Click chuot vao duong link sau:</p>
<a href="../html/text_link_trong_html.jsp" target="_blank" >Bai huong dan HTML</a>
</body>
</html>

Nó sẽ tạo ra kết quả sau:

Click chuot vao duong link sau:

Bai huong dan HTML

Tạo Download Link trong HTML

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

<!DOCTYPE html>
<html>
<head>
<title>Vi du text link trong HTML</title>
</head>
<a href="../html/test.pdf">Download PDF File</a>
</body>
</html>

Nó sẽ tạo kết quả sau:

Download PDF File

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học HTML phổ biến khác tại vietjack.com: