🔗4-Tạo các liên kết trong HTML
Ví dụ về liên kết
Trong trang web, liên kết là những nội dung (thường được đại diện bởi văn bản hoặc hình ảnh) mà khi chúng ta nhấp vào nó thì chúng ta sẽ được chuyển đến một tài liệu hoặc một website khác.
Ví dụ: Khi click vào bài viết “Thư chúc mừng năm mới của Đảng ủy, Hội đồng Học viện, Ban Giám đốc” sẽ hiển thị nội dung chi tiết bài viết.
Nội dung của bài viết khi click vào link xem:
Các loại liên kết
Chúng ta thường gặp các loại liên kết sau:
Liên kết từ trang web này đến trang web khác.
Liên kết từ trang này sang trang khác trên cùng một trang web.
Liên kết đến một vị trí cụ thể trên cùng một trang web.
Liên kết để gửi email khi click vào đường link.
Liên kết để download tài liệu.
Chúng ta sẽ lần lượt tìm hiểu ngay sau đây.
Cách tạo ra một liên kết trên website
Chúng ta sử dụng thẻ a để tạo 1 liên kết với thuộc tính href chỉ đích đến của liên kết.
<a href="URL">Nội dung hiển thị</a> Trong đó:
URL: là đường dẫn mà ta muốn chuyển đến sau khi click vào link.
Nội dung hiển thị: đại diện cho liên kết, có thể thay thế bằng hình ảnh qua thẻ img
Ví dụ:
Đường dẫn (URL) có thể là đường dẫn đến file hoặc các trang web con nằm trong cùng dự án hoặc đường dẫn đến một website khác, một bài viết trên website khác.
Một số thuộc tính khác của thẻ a
Thuộc tính title
Thuộc tính title dùng để mô tả ý nghĩa của đường liên kết. Khi chúng ta hover chuột vào link thì sẽ xuất hiện một dòng chữ, đó chính là nội dung mà ta đã đặt vào thuộc tính title.
Thuộc tính target
Khi chúng ta click vào link thì trình duyệt sẽ chuyển hướng đến trang đích ngay lập tức và ngay trên tab hiện tại. Nếu bạn muốn chuyển đến một tab khác thì có thể sử dụng thuộc tính target.
<a href="URL" target="Nơi mở liên kết">Text hiển thị</a>Thuộc tính target nhận các giá trị sau:
_blank: tài liệu sẽ được mở bên trong một tab mới.
_self: tài liệu sẽ được mở bên trong khung hiện tại (mặc định)
_parent: tài liệu sẽ được mở bên trong khung cha của khung hiện tại (nếu không có khung cha thì nó sẽ mở bên trong Tab hiện tại)
_top: tài liệu sẽ được mở bên trong tab hiện tại.
Ví dụ:
Thuộc tính download
Nếu chúng ta muốn khi click vào đường link, thay vì truy cập vào link đó thì trình duyệt sẽ tải nội dung của đường link đó về thì hãy khai báo thuộc tính download.
<a href="../file/hello.txt" download>Click here</a>Thuộc tính rel
Thuộc tính này ít được quan tâm nhưng nếu chúng ta làm về SEO thì sẽ phải rất chú ý đến thuộc tính này. Thuộc tính rel dùng để khai báo cho các công cụ search engine biết là có dò đường link này hay không. Nó có hai giá trị như sau:
rel=”follow” khai báo cho các bot search sẽ dò và đọc các nội dung trong link.
rel=”nofollow” khai báo cho các bot search không dò và đọc nội dung trong link.
Gửi email khi click vào thẻ a
Khi chúng ta muốn người dùng click vào link sẽ hiển thị ra hộp thư để gửi email kèm địa chỉ email có trong link. Ta có thể dùng cách cho thêm mailto: vào trước địa chỉ email và đặt trong thuộc tính href của thẻ a.
Liên kết đến một vị trí cụ thể trên cùng một trang web
Nếu đã sử dụng word, chúng ta đều biết đến việc tạo mục lục tự động cho một văn bản dài. Vậy, trên trang web chúng ta cũng có thể liên kết đến vị trí cụ thể trên cùng một trang bằng việc sử dụng thẻ <a> tương tự như tạo mục lục bằng cách:
Bước 1: Tạo các bookmark tại vị trí muốn đến bằng cú pháp id="bookmark_name"
Bước 2: Tạo liên kết thẻ a với thuộc tính href="#bookmark_name"
Ví dụ:
Sử dụng hình ảnh thay thế nội dung để tạo liên kết
Chúng ta có thể sử dụng hình ảnh thay thế nội dung dạng chữ để khi người dùng click vào ảnh cũng có thể mở ra liên kết.
Các trạng thái của thẻ a trong HTML
Thẻ a gồm 4 trạng thái chính đó là:
link: Chưa có hành động nào trên link
visited: Đã click vào link và chuyển đến trang đích
hover: Di chuyển qua link
active: Link đã được active
Thông thường chúng ta sẽ kết hợp với CSS để tạo hiệu ứng cho 4 trạng thái này. Phần CSS sẽ được học trong các nội dung tiếp theo. Chúng ta có thể xem 1 ví dụ để hình dung được ý nghĩa của các trạng thái của thẻ a.
Tóm tắt nội dung bài học:
Last updated