Cách chuyển link thành html

Trong hướng dẫn này, bạn sẽ học cách tạo link liên kết trong HTML để liên kết các trang HTML khác lại với nhau. Bài viết nằm trong series học html cơ bản.

Tạo Link trong HTML

Nội dung bài viết

Link hoặc hyperlink (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 tục từ trang này sang trang khác, trên bất kỳ máy chủ nào ở bất kỳ đâu trên thế giới.

Link thường có 2 phần, hay gọi là anchors (mỏ neo). Phần liên kết sẽ bắt đầu với neo nguồn (source anchor), và trỏ đến điểm neo đích (destination anchor), 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 phần tử trong chính tài liệu đó, v.v.

Theo mặc định, các links 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 được truy cập (gọi unvisited link) được gạch dưới và màu xanh lam.
• Một liên kết đã truy cập (gọi là visited link) được gạch chân và có màu tím.
• Một liên kết đang hoạt động (gọi là active link) được gạch chân và có màu đỏ.

Tuy nhiên, bạn có thể ghi đè điều này bằng cách sử dụng CSS.

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

Các liên kết được chỉ định trong HTML bằng cách sử dụng  thẻ.

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.

 Văn bản liên kết 

Bất kỳ thứ gì giữa  thẻ mở và thẻ đóng đều trở thành một phần của liên kết mà 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:

Google Search
Thế Giới PHP

    

Các thuộc tính href  xác định mục tiêu của liên kết. 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.demo.com/form.php. Trong khi các liên kết URL tương đối là những đường dẫn trang, và không bao giờ gồm tiền tố: http:// hoặc https://. Ví dụ: lien-he.html, image/logo.png

Đặt Link Target trong HTML

Thuộc tính target giúp trình duyệt biết được cách để mở 1 đường link. Có 3 loại target được xác định và mỗi loại được bằng đầu bằng ký tự gạch dưới _ :

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

Ví dụ dưới đây giúp bạn dễ hiểu hơn về Link Target:

Liên Hệ
Google

    

Note: 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 mục tiêu trong toàn bộ cửa sổ trình duyệt.

Tạo điểm neo để đánh dấu trang web

Thông thường trong 1 trang mục lục, khi bạn muốn nhấn vào mục thứ 100. Bạn sẽ làm như thế nào?  Lăn chuột xuống cho tới  khi thấy mục thứ 100?

Không! Không! để TheGioiPHP chỉ cho bạn các tạo dấu trang hữu ích này. Nó thật sự tiện lợi nếu trang web của bạn có nội dung dài.

Cách tạo điểm neo:

Tạo dấu trang là một quy trình gồm hai bước: trước tiên hãy thêm thuộc tính id  vào phần tử mà bạn muốn chuyển đến. Sau đó sử dụng giá trị thuộc tính id đó đặt sau dấu thăng (#) làm giá trị thuộc tính href của thẻ , như được hiển thị trong ví dụ sau :

Đi tới mục 100
Mục 100
nội dung mục thứ 100

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

Bạn cũng có thể tạo liên kết tải xuống tệp giống hệt như cách đặ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, tôi đã tạo các liên kết tải xuống cho các tệp ZIP, PDF và JPG.

Download Zip file
Download PDF file
Download Image file

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, file sẽ không được tải trực tiếp xuống ổ cứng của bạn. Nó sẽ chỉ mở tệp trong trình duyệt web của bạn thôi.

Trên đây là bài viết hướng dẫn tạo Link liên kết trong HTML. Đây là 1 bài đơn giản dễ hiểu, các bạn sẽ gặp link liên kết hằng ngày, mọi lúc mọi nơi trên internet.