[Học HTML] Bài 07: Chèn link, liên kết trong HTML

Trong bài này chúng ta sẽ cùng tìm hiểu cách chèn link (liên kết) trong HTML. Cái này sẽ ứng dụng nhiều để chèn liên kết trong bài viết, bình luận, menu,…

Chèn link trong HTML

Để 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://tinhnguyenblog.blogspot.com " > Tịnh Nguyễn Blog </a>

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://tinhnguyenblog.blogspot.com "target="_blank"> Tịnh Nguyễn Blog </a>

Thêm liên kết đến một dòng văn bản xác định

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

Mời bạn oánh giá 😇

Nếu bạn thấy bài viết này hữu ích thì có thể chia sẻ nó qua:

Bài viết bạn đang xem được viết bởi Tịnh Nguyễn, một thanh niên đẹp ZAI, dễ thương VL 😂

avatar
3 Comment threads
15 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
4 Comment authors
Nguyễn PhươngLuaHocban.vnTrường Đẹpzai Recent comment authors
Nguyễn Phương <span class="wpdiscuz-comment-count">1 bình luận </span>

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 <span class="wpdiscuz-comment-count">2 bình luận </span>

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

Trường Đẹpzai <span class="wpdiscuz-comment-count">76 bình luận </span>

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

Trường Đẹpzai <span class="wpdiscuz-comment-count">76 bình luận </span>

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

Trường Đẹpzai <span class="wpdiscuz-comment-count">76 bình luận </span>

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

Trường Đẹpzai <span class="wpdiscuz-comment-count">76 bình luận </span>

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

Trường Đẹpzai <span class="wpdiscuz-comment-count">76 bình luận </span>

Ok anh!

Trường Đẹpzai <span class="wpdiscuz-comment-count">76 bình luận </span>

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 <span class="wpdiscuz-comment-count">76 bình luận </span>

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

Trường Đẹpzai <span class="wpdiscuz-comment-count">76 bình luận </span>

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 😆