Bài 6: Liên kết trong HTML – Tìm hiểu về thẻ HTML Links

Bài 6: Liên kết trong HTML

Trong bài này, chúng ta sẽ cùng tìm hiểu về thẻ liên kết trong HTML. Thẻ này sẽ giúp bạn tạo ra những liên kết trong website của chính bạn và liên kết với website khác. Bài này chúng ta sẽ tự học HTML và cũng là yếu tố quan trọng trong Seo mà các bạn sẽ học sau này.

Nhưng trước đó, hãy chắc chắn bạn đã học bài 5: Đoạn Văn HTML, vì bạn cần phải biết về thẻ p trước khi sử dụng thẻ liên kết.

Bài 6: Liên kết trong HTML - Tìm hiểu về thẻ HTML Links
Bài 6: Liên kết trong HTML – Tìm hiểu về thẻ HTML Links

Tạo liên kết trong HTML

Liên kết hoặc siêu liên kết là một kết nối từ tài nguyên web này sang tài nguyên web khác. Liên kết cho phép người dùng di chuyển liền mạch từ trang này sang trang khác. Liên kết có thể áp dụng trên bất kỳ website, máy chủ ở bất kỳ đâu trên thế giới.

Một liên kết trong HTML có hai đầu, được gọi là neo (anchors). Liên kết bắt đầu tại neo nguồn và trỏ đến neo đích, có thể là bất kỳ tài nguyên web nào. Ví dụ: hình ảnh, âm thanh hoặc video clip, tệp PDF, tài liệu HTML hoặc một thành phần trong chính tài liệu, v.v. trên.

Theo mặc định, các liên kết sẽ xuất hiện như sau trong hầu hết các trình duyệt:

  • Một liên kết không mong muốn được gạch chân và màu xanh.
  • Một liên kết truy cập được gạch chân và màu tím.
  • Một liên kết hoạt động được gạch chân và màu đỏ.

Tuy nhiên, bạn có thể ghi đè lên điều này bằng CSS. Chúng ta sẽ được học CSS sau nhé.

Cú pháp liên kết trong HTML

Liên kết được chỉ định trong HTML bằng cách sử dụng thẻ <a>. Một liên kết hoặc siêu liên kết có thể là một từ, nhóm từ hoặc hình ảnh.

Bất cứ điều gì giữa thẻ <a>mở và thẻ đóng </a> đều trở thành một phần của liên kết. Liên kết này người dùng nhìn thấy và nhấp vào trong trình duyệt. Dưới đây là một số ví dụ về các liên kết:

Các thuộc tính href xác định mục tiêu của liên kết trong html. Giá trị của nó có thể là một URL tuyệt đối hoặc tương đối.

Một URL tuyệt đối là URL mà bao gồm tất cả các phần của định dạng URL. Chẳng hạn như giao thức, tên máy chủ, và đường dẫn của tài liệu.

Ví dụ https://www.google.com/https://www.example.com/form.php 

Trong khi, các liên kết URL là đường dẫn trang-tương đối, ví dụ contact.htmlimages/smiley.png, vv trên.

Một URL tương đối không bao giờ bao gồm các tiền tố http:// hoặc https://

Đặt mục tiêu cho các liên kết trong HTML

Các thuộc tính target cho trình duyệt biết nơi để mở tài liệu được liên kết. Có bốn mục tiêu được xác định và mỗi tên mục tiêu bắt đầu bằng ký tự gạch dưới _

  • _blank – Mở tài liệu được liên kết trong một cửa sổ hoặc tab mới.
  • _parent – Mở tài liệu được liên kết trong cửa sổ cha.
  • _self– Mở tài liệu được liên kết trong cùng một cửa sổ hoặc tab với tài liệu nguồn. Đây là mặc định, do đó không cần thiết phải xác định rõ giá trị này.
  • _top – Mở tài liệu được liên kết trong cửa sổ trình duyệt đầy đủ.

Hãy thử ví dụ sau để hiểu cách hoạt động của mục tiêu của liên kết trong html:

Mẹo: Nếu trang web của bạn được đặt bên trong iframe, bạn có thể sử dụng target="_top"liên kết trên để thoát ra khỏi iframe và hiển thị trang đích trong cửa sổ trình duyệt đầy đủ.

Tạo Neo trong liên kết

Bạn cũng có thể tạo các neo (đánh dấu) để cho phép người dùng chuyển đến một phần cụ thể của trang web. Neo đặc biệt hữu ích nếu bạn có một trang web rất dài.

Tạo Neo là một quá trình gồm hai bước: trước tiên hãy thêm idthuộc tính vào phần tử mà bạn muốn nhảy. Sau đó sử dụng idgiá trị thuộc tính đó đứng trước dấu thawgn ( #) làm giá trị của thuộc tính href trong thẻ<a>, như trong ví dụ sau :

Mẹo: Bạn thậm chí có thể chuyển đến một phần của trang web khác bằng cách chỉ định URL của trang đó cùng với ký tự (ví dụ #elementId) trong thuộc tính href

ví dụ : <a href="mypage.html#topicA">Go to TopicA</a>.

Tạo liên kết tải xuống trong HTML

Bạn cũng có thể tạo liên kết tải xuống theo cách chính xác giống như đặt liên kết văn bản. Chỉ cần trỏ URL đích đến tệp bạn muốn có sẵn để tải xuống.

Trong ví dụ sau, chúng tôi đã tạo các liên kết tải xuống cho các tệp ZIP, PDF và JPG.

Lưu ý: Khi bạn nhấp vào liên kết trỏ đến tệp PDF hoặc tệp hình ảnh. Tệp không được tải trực tiếp vào ổ cứng của bạn. Nó sẽ chỉ mở tệp trong trình duyệt web của bạn. Hơn nữa bạn có thể lưu hoặc tải nó vào ổ cứng của bạn trên cơ sở vĩnh viễn.

Chúc các bạn học tốt với bài liên kết trong html này.

Có thể bạn chưa xem

Leave a Reply

avatar
  Subscribe  
Notify of