Kết nối

[HTML/HTML5] Phần 14: Liên kết trong HTML

28.845 lượt xem 
 
Thể loại: HTML/HTML5, Thiết kế Web 

Liên kết được tìm thấy ở hầu hết trang web. Liên kết cho phép người nhấp chuột lên để chuyển từ trang nay sang trang khác.

Liên kết HTML
Các liên kết HTML gọi là siêu liên kết (hyperlink). Khi người dùng nhấp chuột lên các liên kết, họ sẽ đi đến 1 trang web khác mà siêu liên kết đó chỉ định. Một liên kết không nhất thiết là đoạn văn bản, nó có thể là hình ảnh hay bất cứ phần tử HTML nào.

Cú pháp liên kết HTML
Trong HTML, các liên kết được định nghĩa bằng thẻ athuộc tính href để định nghĩa liên kết đến.

<a href=”url”>văn bản liên kết</a>

Ví dụ liên kết trang https://www.dammio.com với văn bản hiển thị là “Lập trình và thiết kế Web“.

<a href="https://www.dammio.com">Lập trình và thiết kế Web</a>

Thuộc tính href mô tả địa chỉ đích đến của liên kết, như trong ví dụ trên là https://www.dammio.com. Văn bản liên kết là phần hiển thị trên giao diện (“Lập trình và thiết kế Web”). Nếu bạn nhấp chuột lên văn bản này, bạn sẽ đi đến website dammio.com.

Liên kết nội bộ
Trong ví dụ trên, https://www.dammio.com là địa chỉ URL đầy đủ của 1 trang web. Nếu bạn muốn liên kết nội bộ đến 1 trang web cùng server, chẳng hạn, chúng ta có trang web index.html và about.html cùng 1 server là https://www.dammio.com. Trong nội dung trang index.html, bạn muốn liên kết đến trang about.html, bạn chỉ cần làm như ví dụ sau.

<a href="about.html">About Dammio.com</a>

Khi nhấp chuột vào liên kết trong ví dụ, trình duyệt sẽ tự động chuyển đến trang about.html ở website dammio.com có địa chỉ https://www.dammio.com/about.html.

Màu liên kết
Mặc định, một liên kết sẽ xuất hiện như sau trên tất cả trình duyệt.

  • Một liên kết chưa được nhấp chuột có gạch chân là màu xanh
  • Một liên kết đã được nhấp chuột có gạch chân và màu tím đậm (purple).
  • Một liên kết đang được kích hoạt có gạch chân và màu đỏ.

Bạn có thể thay các màu mặc định bằng cách sử dụng phong cách. Trong ví dụ sau, liên kết có màu xanh dương (color:green) và không có gạch chân (text-decoration: none), khi liên kết đã được viếng thăng thì có màu hồng (color: pink), khi rê chuột lên (hover) liên kết có màu đỏ (color: red), và khi liên kết đang được kích hoạt (active) thì có màu vàng (color: yellow).

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
    color: green;
    background-color: transparent;
    text-decoration: none;
}
a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}
a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}
a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}
</style>
</head>
<body>

<p>Bạn có thể thay đổi màu các liên kết</p>

<a href="about.html" target="_blank">Trang giới thiệu.</a> 

</body>
</html>

Thuộc tính target
Thuộc tính target dùng để mô tả nơi cần mở ra liên kết. Thuộc tính này có các giá trị sau.

  • _blank: mở liên kết ở cửa sổ hay tab mới trên trình duyệt.
  • _self : mở liên kết trên cùng 1 cửa sổ/tab, đây là tham số mặc định, tức là nếu bạn không khai báo giá trị nào cho thuộc tính target thì chính là _self.
  • _parent: mở liên kết ở frame cha.
  • _top: mở liên kết ở cửa sổ đầy đủ (maximize)
  • framename: mở liên kết trong frame theo tên.
Liên quan:  Cách tạo mã QR theo đường dẫn URL cho trang web của bạn

Ví dụ sau sẽ mở liên kết trong 1 cửa sổ/tab mới thông qua giá trị _blank.

<a href="https://www.dammio.com/" target="_blank">Visit Dammio!</a>

Ví dụ sau thì liên kết sẽ được mở ở cửa sổ màn hình phóng cực đại (maximize).

<a href="https://www.dammio.com/" target="_top">Visit Dammio!</a>

Liên kết hình ảnh
Ngoài việc sử dụng liên kết văn bản, chúng ta còn có thể dùng liên kết hình ảnh.

<a href="about.php">
  <img src="about.gif" alt="About us!" style="width:42px;height:42px;border:0;">
</a>

Thuộc tính border:0 để bỏ viền đen mặc định khi hiển thị hình ảnh.

Tạo liên kết bookmark
Các liên kết bookmark được tạo ra cho phép người dùng đi đến các phần khác nhau trên cùng 1 trang web nhanh hơn. Bookmark rất hữu ích nếu nội dung trang web nhiều và dài. Để tạo bookmark, đầu tiên bạn tạo 1 bookmark sau đó, thêm liên kết đến nó. Khi liên kết này được nhất, trang web sẽ cuộn đến vị trí bookmark.

Đầu tiên, tạo bookmark với id=”gt” như sau.

<h2 id="gt">Giới thiệu</h2>

Sau đó, thêm liên kết để đi đến phần giới thiệu trong cùng 1 trang web

<a href="#gt">Đi đến phần Giới thiệu</a>

Đoạn mã đầy đủ như sau.

<!DOCTYPE html>
<html>
<body>

<p><a href="#gt">Đi đến phần Giới thiệu</a></p>

<h2>Phần 1</h2>
<p>Phần 1</p>

<h2>Phần 2</h2>
<p>Phần 2</p>

<h2>Phần 3</h2>
<p>Phần 3</p>

<h2>Phần 4</h2>
<p>Phần 4</p>

<h2 id="gt">Giới thiệu</h2>
<p>Phần giới thiệu trang web dammio.com.</p>

<h2>Phần tiếp theo</h2>
<p>Phần tiếp theo</p>

<h2>Phần tiếp theo</h2>
<p>Phần tiếp theo</p>

<h2>Phần tiếp theo</h2>
<p>Phần tiếp theo</p>

<h2>Phần tiếp theo</h2>
<p>Phần tiếp theo</p>

<h2>Phần tiếp theo</h2>
<p>Phần tiếp theo</p>

<h2>Phần tiếp theo</h2>
<p>Phần tiếp theo</p>

<h2>Phần tiếp theo</h2>
<p>Phần tiếp theo</p>

</body>
</html>

Hoặc bạn có thể thêm liên kết đi đến phần giới thiệu ở 1 trang web khác như sau.

<a href="about.html#gt">Giới thiệu</a>

Đường dẫn bên ngoài
Các trang bên ngoài có thể được tham chiếu với đường URL đầy đủ hoặc 1 phần đường dẫn quan hệ với trang hiện tại.

Ví dụ liên kết đến trang index.html nằm trong thư mục html ở website dammio.com.

<a href="https://www.dammio.com/html/index.html">HTML cơ bản</a>

Ví dụ liên kết đến thư mục html nằm trên cùng 1 website.

<a href="/html/index.html">HTML cơ bản</a>

Ví dụ liên kết đến trang intro.html nằm trên cùng 1 thư mục của trang hiện tại ở cùng 1 website.

<a href="intro.html">HTML cơ bản</a>

Kết luận: Bài viết đã cung cấp cho các bạn kiến thức về liên kết trong HTML. Các liên kết đóng vai trò rất quan trọng trong việc liên kết, điều hướng nội dung trên 1 website cũng như các website khác. Vì vậy, bạn bắt buộc phải học và nắm vững cách áp dụng liên kết để phát triển và thiết kế website.

Trích dẫn bài viết
  • APA:
    Dammio. (2017). [HTML/HTML5] Phần 14: Liên kết trong HTML. https://www.dammio.com/2017/08/09/htmlhtml5-phan-14-lien-ket-trong-html.
  • BibTeX:
    @misc{dammio,
    author = {Dammio},
    title = {[HTML/HTML5] Phần 14: Liên kết trong HTML},
    year = {2017},
    url = {https://www.dammio.com/2017/08/09/htmlhtml5-phan-14-lien-ket-trong-html},
    urldate = {2024-03-13}
    }
Theo dõi
Thông báo của
guest
2 Góp ý
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
2
0
Rất thích suy nghĩ của bạn, hãy bình luận.x