Hướng Dẫn Cách Chèn Link – Liên Kết Trong HTML Dễ Hiểu

Trong bài này mình sẽ hướng dẫn bạn cách chèn link – liên kết trong HTML. Cái này được ứng dụng nhiều để chèn, tạo liên kết trong tổng thể website hoặc trong bài viết, bình luận, menu,…

Hướng dẫn cách chèn link trong HTML

Việc chèn link trong HTML nhiều anh em chưa quen cũng thường gọi nó là code chèn liên kết” hoặc “code chèn link”, “cách tạo link liên kết trong web”,… không sao nó cũng không sai gì về ngữ nghĩa đâu mà.

#ĐỀ XUẤT:

• Nếu bạn thích hoặc có nhu cầu tùy chỉnh nhiều hơn về Link, HTML CSS thì có thể tham khảo khóa Tự Học HTML CSS từ cơ bản đến nâng cao cho người mới. Qua đó bạn có nền tảng tốt hơn để phục vụ cho nhu cầu công việc hiện tại và tương lai.
• Có thể bạn cũng quan tâm đến việc Chèn link vào button (nút nhấn) cho đẹp với html css.

Để chèn link trong HTML các bạn chèn nội dung bao gồm link và mô tả vào trong cặp thẻ <a …. </a> như ví dụ sau:

<a href= ” https://hocban.vn/huong-dan-cach-chen-link-lien-ket-trong-html ” > Cách chèn link trong HTML </a>

#Gợi ý: Bạn có thể xem demo chèn link bằng công cụ CodePen.

Nếu bạn muốn mở liên kết trong một tab mới thì thêm đoạn target=”_blank” vào là được. Các bạn thêm như sau:

<a href= ” https://hocban.vn/huong-dan-cach-chen-link-lien-ket-trong-html “target=”_blank”> Cách chèn link trong HTML </a>

Tạo liên kết đến một dòng văn bản xác định trong trang web

Cái này người ta gọi là liên kết NEO hay Anchor Link gì đấy. Cái này dùng khi các bạn click vào link thì nó chuyển đến ngay dòng có chứa đoạn văn bản giống mà bạn đã đặt sẵn trước đó. Tham khảo ví dụ sau nhé:

<a href=”#phan-hai”>Phần hai</a> <a href=”#phan-ba”>Phần ba</a> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam mattis maximus. Phasellus facilisis felis massa, at bibendum lorem fringilla ut. Sed ipsum sapien, elementum id felis ut, iaculis pulvinar elit.</p> <p>Etiam efficitur felis ac dui tincidunt egestas. Vestibulum auctor justo tellus, ut posuere eros sagittis id. Etiam dignissim blandit porta. Nunc eu suscipit ipsum, vehicula mollis nisi. Nam non iaculis leo. Duis euismod pharetra vestibulum. Praesent cursus ut purus egestas cursus. Nulla eget volutpat neque. Aliquam erat volutpat. Sed at metus convallis, ultrices diam ut, iaculis neque. Nullam purus lacus, ullamcorper a libero sed, facilisis blandit turpis. Nam ac massa ut elit mollis luctus at eu dui. Nullam eu turpis quis eros iaculis convallis in non neque.</p> <p>Etiam efficitur felis ac dui tincidunt egestas. Vestibulum auctor justo tellus, ut posuere eros sagittis id. Etiam dignissim blandit porta. Nunc eu suscipit ipsum, vehicula mollis nisi. Nam non iaculis leo. Duis euismod pharetra vestibulum. Praesent cursus ut purus egestas cursus. Nulla eget volutpat neque. Aliquam erat volutpat. Sed at metus convallis, ultrices diam ut, iaculis neque. Nullam purus lacus, ullamcorper a libero sed, facilisis blandit turpis. Nam ac massa ut elit mollis luctus at eu dui. Nullam eu turpis quis eros iaculis convallis in non neque.</p> <p id=”phan-hai”><strong>Phần hai</strong></p> <p>Etiam efficitur felis ac dui tincidunt egestas. Vestibulum auctor justo tellus, ut posuere eros sagittis id. Etiam dignissim blandit porta. Nunc eu suscipit ipsum, vehicula mollis nisi. Nam non iaculis leo. Duis euismod pharetra vestibulum. Praesent cursus ut purus egestas cursus. Nulla eget volutpat neque. Aliquam erat volutpat. Sed at metus convallis, ultrices diam ut, iaculis neque. Nullam purus lacus, ullamcorper a libero sed, facilisis blandit turpis. Nam ac massa ut elit mollis luctus at eu dui. Nullam eu turpis quis eros iaculis convallis in non neque.</p> <p>Etiam efficitur felis ac dui tincidunt egestas. Vestibulum auctor justo tellus, ut posuere eros sagittis id. Etiam dignissim blandit porta. Nunc eu suscipit ipsum, vehicula mollis nisi. Nam non iaculis leo. Duis euismod pharetra vestibulum. Praesent cursus ut purus egestas cursus. Nulla eget volutpat neque. Aliquam erat volutpat. Sed at metus convallis, ultrices diam ut, iaculis neque. Nullam purus lacus, ullamcorper a libero sed, facilisis blandit turpis. Nam ac massa ut elit mollis luctus at eu dui. Nullam eu turpis quis eros iaculis convallis in non neque.</p> <p>Etiam efficitur felis ac dui tincidunt egestas. Vestibulum auctor justo tellus, ut posuere eros sagittis id. Etiam dignissim blandit porta. Nunc eu suscipit ipsum, vehicula mollis nisi. Nam non iaculis leo. Duis euismod pharetra vestibulum. Praesent cursus ut purus egestas cursus. Nulla eget volutpat neque. Aliquam erat volutpat. Sed at metus convallis, ultrices diam ut, iaculis neque. Nullam purus lacus, ullamcorper a libero sed, facilisis blandit turpis. Nam ac massa ut elit mollis luctus at eu dui. Nullam eu turpis quis eros iaculis convallis in non neque.</p> <p>Etiam efficitur felis ac dui tincidunt egestas. Vestibulum auctor justo tellus, ut posuere eros sagittis id. Etiam dignissim blandit porta. Nunc eu suscipit ipsum, vehicula mollis nisi. Nam non iaculis leo. Duis euismod pharetra vestibulum. Praesent cursus ut purus egestas cursus. Nulla eget volutpat neque. Aliquam erat volutpat. Sed at metus convallis, ultrices diam ut, iaculis neque. Nullam purus lacus, ullamcorper a libero sed, facilisis blandit turpis. Nam ac massa ut elit mollis luctus at eu dui. Nullam eu turpis quis eros iaculis convallis in non neque.</p> <p>Curabitur blandit elementum ex porta dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et eros mollis, laoreet enim nec, aliquam est. Suspendisse cursus justo eu erat viverra, ut scelerisque lectus ultricies. Donec aliquet sodales justo vitae pulvinar. Nulla sagittis tincidunt leo viverra sollicitudin. Donec sit amet tortor ligula. Nullam euismod, nibh non placerat consectetur, eros nibh interdum ligula, et scelerisque mauris nunc sed enim. Pellentesque accumsan varius dolor. Etiam eu pulvinar odio, id rutrum tortor.</p> <p id=”phan-ba”><strong>Phần ba</strong></p> <p>Aenean eros magna, dapibus ac porta in, facilisis ut tellus. Fusce eleifend nunc vitae aliquet congue. Sed eget tincidunt nisl. Sed finibus viverra dolor, ut suscipit dolor tincidunt et. Etiam dui lacus, convallis convallis tincidunt id, posuere a ligula. Integer dapibus faucibus libero ut porta. Nam vel eleifend odio.</p> <p>Curabitur blandit elementum ex porta dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et eros mollis, laoreet enim nec, aliquam est. Suspendisse cursus justo eu erat viverra, ut scelerisque lectus ultricies. Donec aliquet sodales justo vitae pulvinar. Nulla sagittis tincidunt leo viverra sollicitudin. Donec sit amet tortor ligula. Nullam euismod, nibh non placerat consectetur, eros nibh interdum ligula, et scelerisque mauris nunc sed enim. Pellentesque accumsan varius dolor. Etiam eu pulvinar odio, id rutrum tortor.</p> <p>Aenean eros magna, dapibus ac porta in, facilisis ut tellus. Fusce eleifend nunc vitae aliquet congue. Sed eget tincidunt nisl. Sed finibus viverra dolor, ut suscipit dolor tincidunt et. Etiam dui lacus, convallis convallis tincidunt id, posuere a ligula. Integer dapibus faucibus libero ut porta. Nam vel eleifend odio.</p>

Các bạn để ý cách làm như sau:

• Đầu tiên cứ copy ở đâu đó một trang văn bản với nhiều đoạn, copy cái đoạn HTML mình đã ví dụ cho nhanh.
• Tạo ngay ở phần đầu trang các Link tương ứng như <a href=”#phan-hai”>Phần hai</a>
• Chọn một vị trí bất kỳ trong văn bản, ví dụ mình chọn ở đầu một đoạn văn bất kỳ như ví dụ trên và tạo một id tương ứng: <p id=”phan-hai”><strong>Phần hai</strong></p> >> như vậy là khi người dùng click vào link Phần hai ở đầu trang văn bản thì nó sẽ chuyển đến vị trí có chứa id là “phan-hai” và đặt bên cạnh nó đoạn văn bản in đậm nữa là ok.

Đấy, bài này cũng chỉ vậy thôi, các bạn làm theo các ví dụ minh họa, từ đó làm đi làm lại nhiều lần với nhiều mẫu khác nhau để hình dung thêm.

Bài này cũng đã tạm khép lại Serie Học HTML Cơ Bản tại Hocban.vn rồi đó các bạn. Có thể nói những nội dung mình đưa ra ở đây còn rất ít, chỉ có thể đáp ứng được nhu cầu làm quen với HTML, còn nhiều nội dung lắm các bạn phải tự tìm hiểu thêm trên w3c hoặc các tài liệu hướng dẫn khác trên Internet.

Trong phần tìm hiểu về CSS chúng ta sẽ tìm hiểu nhiều hơn nữa về HTML vì hai món này nó thường đi kèm với nhau mà. Oke, cảm ơn các bạn đã quan tâm và hẹn gặp lại !

Bài học trước đó và tiếp theo

• Bài 06: Tạo danh sách trong HTML
• Bài 08: Chưa có bài tiếp theo
• Chèn link Anchor text vào bình luận trên Hocban.vn