Bài 04: 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. ...
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 :)
