Phần 1: HTML | Bài 4: Liên kết HTML

HTML sử dụng siêu liên kết để liên kết những tài liệu khác nhau trên trang web.
Ví dụ:

Tạo đường siêu liên kết
Ví dụ này chỉ cho bạn cách tạo siêu liên kết như thế nào

Một tấm hình như là đường link
Ví dụ này hướng dẫn bạn cách dùng hình làm đường liên kết.

Thẻ Anchor và thuộc tính Href
HTML sử dụng thẻ <a> (anchor) để tạo đường liên kết đến một tài liệu khác.

Thẻ anchor có thể liên kết đến bất cứ một tài nguyên nào trên internet, chúng có thể là một trang HTML, một tấm hình, một file nhạc, một bộ phim, một video …

Cú pháp để tạo một thẻ anchor

<a href=”link url”>Đoạn văn bản muốn hiển thị</a>

Thẻ <a> được sử dụng để tạo một điểm neo và liên kết bắt đầu từ đó, thuộc tính href được sử dụng để chỉ ra tài liệu sẽ được liên kết đến, và chữ ở xuất hiện ở giữa hai tag < và > sẽ được hiển thị dưới dạng siêu liên kết.
Điểm neo sau xác định liên kết đến diễn đàn của thietkeso.vn

<a href=”http://diendan.thietkeso.vn/”>Mời bạn vào diễn đàn của TKS</a>

Dòng code ở trên sẽ xuất hiện như sau trong trình duyệt.

Mời bạn vào diễn đàn của TKS

Thuộc tính đích đến:
Với thuộc tính đích đến, bạn có thể xác định liên kết đến tài liệu khác sẽ được mở ra ở đâu. Dòng code dưới đây sẽ mở tài liệu được liên kết trong một cửa sổ trình duyệt mới.

<a href=”http://diendan.thietkeso.vn”target=”_blank”>Mời bạn vào diễn đàn của TKS</a>

Thẻ anchor và thuộc tính tên
Thuộc tính tên được sử dụng để tạo một điểm neo đã được đặt tên. Khi sử dụng điểm neo đã được đặt tên trước chúng ta có thể tạo ra những đường liên kết mà người đọc có thể nhảy trực tiếp đến một phần cụ thể nào đó trên trang web, thay vì họ phải kéo xuống dưới để tìm thông tin. Một dạng như là bookmark vậy!

Dưới đây là cú pháp của điểm neo được đặt tên trước:

<a name=”Tên”>Chữ muốn hiển thị ở đây</a>

Thuộc tính tên được sử dụng để tạo điểm neo. Tên của điểm neo có thể là bất cứ thứ gì bạn muốn.

Dòng code sau xác định điểm neo được đặt tên trước.

<a name=”Photoshop Tutorial”>Tất cả tutorial ở đây</a>

Bạn có thể nhận ra rằng thẻ anchor được đặt tên trước được hiển thị không có gì đặc biệt. Để trực tiếp liên kết phần Photoshop Tutorial, bạn chỉ phải thêm dấu # và tên của điểm neo và cuối cùng của một URL. Xem ví dụ sau

<a href=”http://thietkeso.vn/#tutorials”>Quay lại trang tutorials</a>

Một đường liên kết đến phần Quay lại trang tutorials TỪ trang “html_bai_4.htm” sẽ như sau:

<a href=”#tutorials”>Quay lại trang tutorials</a>

Mẹo giúp bạn

Điểm neo được đặt tên thường được sử dụng để tạo Mục Lục tại trang đầu tiên của một tài liệu nhiều trang. Môi chương trong tài liệu đó được cho một điểm neo, và liên kết đến mỗi một điểm neo này sẽ được đặt ở trên cùng của tài liệu.

Nếu trình duyệt không tìm được điểm neo được chỉ ra từ trước, nó sẽ quay lên phần trên cùng của tài liệu.

Một vài ví dụ

Mở liên kết ở một cửa sổ trình duyệt mới

Liên kết đến một vị trí trên cùng một trang

Break out of a frame

Tạo một liên kết dạng mailto
Ví dụ này hướng dẫn bạn cách tạo ra một đường liên kết trực tiếp đến địa chỉ email.

Tạo một liên kết dạng mailto 2
Phức tạp hơn dạng 1

FOLLOW US

Leave a Reply

Your email address will not be published. Required fields are marked *