Đường dẫn trong HTML - HTML Links

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    6 thg 10, 2022

  • Số lượt xem

    374 lượt xem


HTML Links được tìm thấy ở mọi trang web, các HTML Links giúp người dùng có thể điều hướng tới các trang trong cũng như ngoài trang hiện tại.

HTML Links - Hyperlinks

Các HTML Links chính là một Hyperlinks.

Bạn có thể click vào một link để dẫn đến một trang khác.

Khi bạn di chuyển con trỏ chuột trên một đường dẫn nó sẽ chuyển sang hình bàn tay.

Lưu ý: Một liên kết không nhất thiết phải là văn bản. Một liên kết có thể là một hình ảnh hoặc bất kỳ HTML element nào khác!

 

Cú pháp

Thẻ <a> được sử dụng để định nghĩa một hyperlink. Nó có cú pháp như sau:

<a href="url">Mô tả link</a>

Thuộc tính quan trọng nhất của phần tử <a> là thuộc tính href, chỉ ra đích của liên kết.

Văn bản liên kết là phần sẽ hiển thị cho người đọc.

Nhấp vào văn bản liên kết, sẽ gửi người đọc đến địa chỉ URL được chỉ định.

Ví dụ

<a href="https://truonghoclaptrinh.com/">Đi đến truonghoclaptrinh.com!</a>

Mặc định, các link sẽ xuất hiện như sau trong tất cả các trình duyệt:

  • Một liên kết chưa từng truy cập có gạch chân và màu xanh. 
  • Một liên kết đã từng truy cập có gạch chân và màu tím.
  • Một liên đang hoạt đọng có gạch chân và màu đỏ.
Mẹo: Links cũng có thể được style với CSS để nó có thể trông khác hơn!

 

Target Attribute

Mặc định các liên kết khi truy cập sẽ được hiển thị ở cửa sổ trình duyệt hiện tại. Để thay đổi điều đó bạn có thể sử dụng attribute target.

Attribute target sẽ quyết định nơi hiển thị sau khi truy cập liên kết:

  • _self - Mặc định. Hiển thị ở cửa sổ trình duyệt hiện tại khi truy cập liên kết.
  • _blank - Hiển thị ở cửa sổ trình duyệt mới khi truy cập liên kết.
  • _parent - Hiển thị ở cửa sổ trình duyệt cha.
  • _top - Hiển thị ở phần thân của cửa sổ trình duyệt.

Ví dụ

<a href="https://truonghoclaptrinh.com/" target="_blank">Đến truonghoclaptrinh.com!</a>

 

Absolute URLs và Relative URLs

Cả hai ví dụ bên trên đều đang sử dụng Absolute URLs (địa chỉ web đầy đủ) trong thuộc tính href.

Relative URLs (liên kết đến một trang trong cùng một trang web) được chỉ định bằng một URL tương đối (không có phần "https: // www"):

<h2>Absolute URLs</h2>  <p><a href="https://truonghoclaptrinh.com/">truonghoclaptrinh</a></p>  <p><a href="https://www.google.com/">Google</a></p>    <h2>Relative URLs</h2>  <p><a href="html_images.asp">HTML Images</a></p>  <p><a href="/css/default.asp">CSS Tutorial</a></p>

 

Sử dụng một Image làm HTML Links

Để sử dụng hình ảnh làm liên kết, chỉ cần đặt thẻ <img> bên trong thẻ <a>:

<a href="default.asp">  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">  </a>

 

Địa chỉ Email

Sử dụng thuộc tính mailto: bên trong thuộc tính href để tạo liên kết mở chương trình email của người dùng (để cho phép họ gửi email mới):

Ví dụ

<a href="mailto:[email protected]">Gửi email</a>

 

Sử dụng một Button làm HTML Links

Để sử dụng nút HTML làm liên kết, bạn phải thêm một số mã JavaScript.

JavaScript cho phép bạn chỉ định những gì xảy ra tại một số sự kiện nhất định, chẳng hạn như một lần nhấp vào nút:

Ví dụ

<button onclick="document.location='default.asp'">HTML Tutorial</button>

 

Link Titles

Attrribute title chỉ định thông tin bổ sung về một element. Thông tin thường được hiển thị dưới dạng văn bản chú giải công cụ khi chuột di chuyển qua element.

<a href="https://truonghoclaptrinh.com/html.html" title="Học HTML tại truonghoclaptrinh.com">Đến các hướng dẫn về HTML</a>

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về HTML

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.