[Học HTML] Bài 07: Hướng dẫn cách chèn link – liên kết trong HTML dễ hiểu

Ứng dụng của chèn link (liên kết) trong HTML

Ứng dụng của chèn link (liên kết) trong HTML

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:

Để chèn link trong HTML các bạn chèn nội dung bao gồm link 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

5/5 - (3 votes)
guest
32 Comments
Inline Feedbacks
View all comments
Trang
Guest

Cám ơn admin nhiều nhé, mình làm theo hướng dẫn của bạn đã thành công.

Nhabep9x
Guest

Được rồi bạn ạ!Cảm ơn bạn nhiều!

LinhTDB
Guest
LinhTDB

huhu chèn tập chèn link trong codepen mà chèn mãi ko được
sao vậy ad?

Lại Văn Thuấn
Guest

cảm ơn bạn, luôn quên cái nhỏ này.

thue xe limousine
Guest

có cách nào để chèn backlink nữa hum nhỉ ,mình thủ chèn trên chữ ký trang samsung mà nó hiện dạng text đơn thuần ,hay nó chặn đặt link luôn roài nhỉ ?

baominhjsc
Guest

Sao mình đăng ở Vitalk.vn viết câu lệnh chuẩn mà cứ bị hiện link trần thế nhỉ 🙁
xuất khẩu lao đông đài loan

baominhjsc
Guest
Đã trả lời  Tịnh Nguyễn

Nhưng mà mình thấy người khác vẫn viết được mới khó chịu chứ 🙁 làm đủ mọi cách rồi

Nguyễn Phương
Guest

Quá đơn giản cho 1 bài cơ bản
Phòng kham đa khoa uy tín tại Hải Phòng

Lua
Guest
Lua

Test trực tiếp luôn: bồ kết túi lọc

Trường Đẹpzai
Guest

Khó quá huhu học mãi không thể hiểu được cái HTML này 🙁

sadasd
Guest
Đã trả lời  Tịnh Nguyễn

Sổ Tay Ghi Chép
có đc ko ta

Trường Đẹpzai
Guest
Đã trả lời  Trường Đẹpzai

Ok anh, em cũng đã có ý định sang WP chơi đấy mà tại chưa biết gì nhiều nên chưa dám mua host để chơi 😀 chắc phải quẩy trên localhost trước 😆

Trường Đẹpzai
Guest
Đã trả lời  Trường Đẹpzai

Quào 😀 để nào rảnh download về nghịch linh tinh chơi hehe

Trường Đẹpzai
Guest
Đã trả lời  Trường Đẹpzai

WP nhiều Theme đẹp pro sao anh không tìm một cái mà dùng, theme này đơn giả quá 😀

Trường Đẹpzai
Guest
Đã trả lời  Trường Đẹpzai

Ok anh!

Trường Đẹpzai
Guest
Đã trả lời  Trường Đẹpzai

Dạ, cảm ơn anh nhiều 😍😝

Trường Đẹpzai
Guest
Đã trả lời  Trường Đẹpzai

Ok anh, để hôm nào rảnh ngồi quẩy… à chỉnh lại temp 😀

Trường Đẹpzai
Guest
Đã trả lời  Trường Đẹpzai

Cập nhật cái gì nữa giờ nhỉ!? Template Blogging thì càng đơn giản càng tốt mà hehe

Sang
Guest
Đã trả lời  Trường Đẹpzai

Cập nhật cái gì nữa giờ nhỉ!? TemplateWP thì càng đơn giản càng tốt mà hehe