Các liên kết trong HTML giúp trang web liên kết đến các trang khác có liên quan. Có thể sử dụng văn bản hoặc hình ảnh để liên kết đến các trang web khác hoặc một địa chỉ email.
Nếu bạn chưa quen với việc xây dựng một Website và không chắc chắn về cách các liên kết hoạt động trong trang HTML, thì bài viết này là dành cho bạn!
Liên kết trong HTML là gì?
Liên kết là một đoạn văn bản hoặc một hình ảnh trong một trang Web mà khi click vào, bạn sẽ được đưa đến một trang Web khác hoặc nội dung khác. Các liên kết, theo mặc định, được gạch dưới và màu xanh lam, hoặc nhà thiết kế Web có thể thay đổi các giá trị mặc định này.
Bằng cách liên kết các trang của bạn với nhau như thế này, bạn có thể xây dựng toàn bộ trang web. Bạn cũng có thể liên kết đến các trang khác trên Web bằng kỹ thuật tương tự.
Từ ‘link‘ là viết tắt của ‘hyperlink‘, một thuật ngữ dùng để mô tả việc liên kết các tài liệu với nhau.
Tạo liên kết văn bản
Thẻ HTML mà bạn sử dụng để tạo liên kết được gọi là <a> . (‘A’ là viết tắt của ‘Anchor’.) Đây là một số HTML để tạo liên kết đến trang chủ của trang web này:
<a href="http://www.tm-web.comvn/">Visit T-web</a>
Đây là cách mã HTML ở trên trông như thế nào trong trang. Hãy thử nhấp vào nó! (Sử dụng nút “Quay lại” của trình duyệt của bạn để quay lại trang này.)
Lưu ý rằng có một số thành phần tạo nên liên kết này. Bây giờ chúng ta hãy xem xét các phần này.
<a href="https://www.t-web.com.vn/">Thẻ a HTML cho biết rằng chúng tôi muốn bắt đầu một liên kết tại điểm này trong trang và chúng tôi muốn liên kết trỏ đến https://www.t-web.com.vn/. Văn bản giữa các dấu ngoặc kép (https://www.t-web.com.vn/) được gọi là URL.
Mẹo: Bạn có thể lấy URL của trang mà bạn muốn liên kết đến bằng cách đến trang đó trong trình duyệt Web của bạn, sau đó sao chép và dán URL từ thanh địa chỉ ở đầu cửa sổ trình duyệt.
Tiếp theo, chúng tôi có: Visit T-marketing
Đây là văn bản mà chúng tôi muốn chuyển thành một liên kết.
Cuối cùng, chúng tôi có:
</a>Để đóng liên kết. Điều quan trọng là phải nhớ đặt </a> ở cuối liên kết của bạn, nếu không phần còn lại trong trang Web của bạn sẽ trở thành một liên kết dài!
Tạo liên kết hình ảnh
Ví dụ trên đã sử dụng một đoạn văn bản cho một liên kết. Trên thực tế, bạn có thể đặt bất kỳ thứ gì bạn thích giữa các thẻ <a href=”…”> và </a> . Thông thường, hình ảnh HTML được sử dụng để tạo liên kết.
Dưới đây là một ví dụ sử dụng hình ảnh nút động cho liên kết:
<a href="http://www.elated.com/">
<img src="click_here.gif" style="border: none;" alt="Click Here"/>
</a>Đây là cách hiển thị trong trang:
Sử dụng mailto: links
Bạn cũng có thể tạo một loại liên kết HTML đặc biệt liên kết đến một địa chỉ email. Khi được click vào, liên kết sẽ mở chương trình email của khách truy cập để họ có thể gửi email đến địa chỉ đó. Đây thường được gọi là liên kết mailto. Ví dụ:
<a href="mailto:[email protected]">Email Joe Bloggs</a>Bạn cũng có thể thiết lập liên kết để sử dụng chủ đề email mặc định, như sau:
<a href="mailto:[email protected]?subject=Email from
a Visitor">Email Joe Bloggs</a>Thêm liên kết vào cùng một trang HTML
Bạn có thể liên kết đến một điểm khác trên cùng một trang. Việc này sẽ rất hữu ích nếu bạn có một trang dài và bạn muốn mọi người có thể điều hướng xung quanh.
Ví dụ: bạn có thể có trang Câu hỏi thường gặp với danh sách các liên kết ở đầu trang chuyển đến các câu hỏi có liên quan.
Vậy phải hoàn thành nó như thế nào? Trước tiên, hãy thêm id vào phần tử bạn muốn liên kết đến:
<p id="fruit-bats">Here's a bit of info on fruit bats</p>Sau đó, bạn có thể liên kết đến phần tử này từ nơi khác trong trang bằng cách đặt dấu # trước ID của phần tử, như sau:
<a href="#fruit-bats">Find out about fruit bats</a>Click vào liên kết này sẽ đưa bạn đến đoạn “fruit-bats” .
Bạn cũng có thể liên kết đến một phần tử trong một trang khác. Ví dụ: HTML sau liên kết đến một phần tử trong trang Câu hỏi thường gặp trên example.com:
<a href="http://www.example.com/faq/#howbuy">How do I buy a WonderWidget?</a>
Mở liên kết trong cửa sổ mới
Bạn có thể mở liên kết trong cửa sổ trình duyệt mới bằng cách sử dụng thuộc tính target = “_blank” , như sau:
<a href="https://www.t-web.com.vn/" target="_blank">Visit T-web</a>Nhấp vào liên kết bên dưới để xem nó hoạt động:
Cần lưu ý rằng việc mở mọi thứ trong cửa sổ trình duyệt mới có thể gây khó chịu cho khách truy cập vào trang web của bạn, vì vậy hãy sử dụng tính năng này một cách thích hợp! Ngoài ra, hãy lưu ý rằng target không được phép dùng trong XHTML 1.0 (mặc dù nó vẫn được phép trong HTML 4).
Thuộc tính target cũng được sử dụng để liên kết giữa các khung HTML.
Lời kết
Bây giờ bạn đã biết cách sử dụng các liên kết HTML để liên kết các trang Web và địa chỉ email, liên kết trong cùng một trang và liên kết đến các trang trong một cửa sổ mới. Hãy thử thêm một số liên kết vào trang Web của riêng bạn nhé!
Nguồn bài viết: elated.com
