Bài 04: Thẻ Liên Kết Trong HTML

HTML - CSS 02/06/2015 07:00 735
Thẻ liên kết giúp người sử dụng chuyển hướng giữa các trang trong một website, từ trang này qua trang khác. Trong bài viết này tôi sẽ cùng các bạn làm quen cũng như sử dụng thẻ liên kết trong HTML

Một trang web có thể chứa các liên kết 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 người 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.

Trong HTML có ba loại thẻ liên kết.

  • Thẻ liên kết văn bản (TextLink)
  • Thẻ liên kết hình ảnh (Image Link)
  • Thẻ liên kết email (Email Link)

1. Thẻ liên kết văn bản

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>.

Cú pháp:

<a href="url" target="_blank" title="Nội dung tiêu đề">Nội dung hiển thị</a>

Trong đó:

  • href quy định địa chỉ liên kết đích sẽ được chuyển hướng tới khi người dùng click vào.
  • title sẽ hiển thị thông tin tiêu đề của liên kết khi bạn di chuột vào liên kết.
  • target thuộc tính này được sử dụng để xác định vị trí nơi đường link được mở. Mặc đinh sẽ là tab hiện tại(self).

Ví dụ:

<a href="http://www.chiasephp.net" title="Trang chủ">Click vào đây để di chuyển tới HomePage</a>

Xem kết quả

2. 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ở. Mặc đinh sẽ là tab hiện tại(self).

Target Value Description
_blank Mở trang web trong một tab mới.
_self Mở trang web trong tab hiện tại (mặc định).
_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

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>
</head>
<body>
<p>Click chuot vao mot trong cac link sau:</p>
<a href="http://www.chiasephp.net/" target="_blank">Vi du gia tri _blank</a> |
<a href="http://www.chiasephp.net/" target="_self">Vi du gia tri _self</a> |
<a href="http://www.chiasephp.net/" target="_parent">Vi du gia tri _parent</a> |
<a href="http://www.chiasephp.net/" target="_top">Vi du gia tri _top</a>
</body>
</html>

Xem kết quả

3. Thẻ liên kết hình ảnh(Image Link)

Thẻ này cũng giống như thẻ trên nhưng thay vì sử dụng văn bản thì bạn có thể sử dụng một hình ảnh(Image) bên trong cặp thẻ mở <a> và thẻ đóng </a>

Ví dụ:

<p>Click vào hình ảnh</p>
<a href="http://www.chiasephp.net/" target="_self"> 
   <img src="/isocms/skin/images/chiasephp_logo_tryit.png" alt="Click vào đây" border="0"/> 
</a>

Xem kết quả

4. Thẻ liên kết email (Email Link)

Thẻ <a> cho bạn một lựa chọn xác định một địa chỉ email để gửi email. Bạn sẽ sử dụng từ khóa mailto:<địa_chỉ_email> cùng với thuộc tính <code>href</code> nhằm thiết lập một môi trường soạn thảo cho phép bạn gửi email tới địa chỉ email được quy định.

<a href= "mailto:info@chiasephp.net">Click vào đây để gửi E-Mail</a>

Xem kết quả

5. Tổng kết

Trong bài viết này mình đã hướng dẫn các bạn làm sao có thể tạo một liên kết nhằm chuyển hướng tới một trang web khác. Hy vọng bài viết sẽ bổ ích với các bạn :)

Xem Thêm

Profile photo of adminTheHalfHeart

B.V.T

Sinh ra và lớn nên ở Bắc Giang. Hiện tại thì tôi đang là một lập trình viên tại VietISO. Tôi lập website này với mục đích là bookmark những gì tôi đã đọc qua và mong muốn chia sẻ những gì tôi biết.