Cách sử dụng link trong html
|
Trong bài viết trước bạn đọc đã cùng Taimienphi.vn tìm hiểu về thuộc tính color trong HTML. Bài viết tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về link (liên kết) trong HTML. Chúng ta có thể học HTML và tìm thấy các link (liên kết) trên hầu hết tất cả các trang web. Bằng cách click vào link để chuyển hướng sang trang web khác. Tham khảo tiếp bài viết dưới đây của Taimienphi.vn để tìm hiểu chi tiết link (liên kết) trong HTML. Link (liên kết) trong HTML 1. Link (liên kết) trong HTMLLink (liên kết) trong HTML là siêu liên kết (hyperlink). Bằng cách click vào link để chuyển hướng sang trang web, tài liệu khác. Khi chúng ta di chuột qua một link, mũi tên chuột sẽ biến thành biểu tượng khác. Lưu ý: link không phải là văn bản, nó có thể là hình ảnh hoặc phần tử HTML bất kỳ. 1.1 Cú pháp link trong HTML Siêu liên kết (hyperlink) được xác định bằng thẻ a trong HTML: Trong đó: Lưu ý: Không có dấu gạch chéo ở cuối địa chỉ thư mục con, ngoài ra bạn có thể tạo 2 yêu cầu đến máy chủ. Nhiều máy chủ sẽ tự động thêm dấu gạch chéo vào cuối địa chỉ và sau đó tạo một yêu cầu mới. Ví dụ: dưới đây là ví dụ minh họa cách sử dụng cú pháp link trong HTML: Kết quả trả về có dạng như dưới đây: 1.2 Local Link trong HTML Trong ví dụ trên chúng ta sử dụng URL tuyệt đối (địa chỉ trang web đầy đủ). Local Link (liên kết đến cùng một trang web) được chỉ định bằng URL tương đối (không có https: // www ...). Ví dụ: dưới đây là ví dụ về local link trong HTML. Kết quả trả về khi áp dụng local link có dạng như dưới đây: 1.3 Thiết lập màu cho link trong HTML Mặc định link (liên kết) sẽ hiển thị trên tất cả các trình duyệt như dưới đây: Tuy nhiên nếu muốn bạn có thể thay đổi màu sắc mặc định cho link trong HTML bằng cách sử dụng CSS: Kết quả trả về khi thay đổi màu sắc cho link có dạng như dưới đây: 1.4 Thuộc tính target trong HTML Thuộc tính target được sử dụng để chỉ định vị trí mở tài liệu được liên kết. Thuộc tính target có thể bao gồm một trong số các giá trị dưới đây: Ví dụ 1: Trong ví dụ dưới đây mở tài liệu được liên kết trong cửa sổ / tab mới: Kết quả trả về có dạng như dưới đây: Mẹo: Nếu trang web bị khóa trong một frame, bạn có thể sử dụng target="_top" để mở frame đó. Ví dụ 2: Ví dụ dưới đây minh họa cách sử dụng target="_top": Kết quả trả về có dạng như dưới đây: 1.5 Image Link trong HTML Chúng ta có thể sử dụng hình ảnh dưới dạng link trong HTML. Ví dụ: dưới đây là ví dụ về image link trong HTML: Kết quả trả về có dạng như dưới đây: Lưu ý: trong ví dụ trên chúng chúng ta thêm border:0 để ngăn IE9 và các phiên bản trình duyệt trước đó hiển thị đường viền xung quanh hình ảnh trong trường hợp hình ảnh là link. 1.6 Link Title trong HTML Thuộc tính title chỉ định thêm thông tin về phần tử. Thông tin thường được hiển thị dưới dạng văn bản trong tooltip khi người dùng di chuột qua phần tử. Ví dụ: Dưới đây là ví dụ minh họa cách sử dụng thuộc tính title để chỉ định thêm thông tin về phần tử trong HTML: Kết quả trả về có dạng như dưới đây: 1.7 Tạo Bookmark trong HTML Bookmark trong HTML được sử dụng để cho phép người dùng chuyển đến các phần cụ thể trên trang web. Để tạo bookmark trong HTML, trước hết chúng ta phải tạo một bookmark sau đó thêm liên kết đến bookmark đó. Khi người dùng click vào link, trang sẽ cuộn đến vị trí được bookmark. Ví dụ: Dưới đây là ví dụ tạo bookmark trong HTML: Đầu tiên chúng ta sử dụng thuộc tính id để tạo bookmark: Bước tiếp theo thêm liên kết vào bookmark (trong ví dụ này là "Jump to Chapter 4") trong cùng một trang: Hoặc thêm một liên kết vào dấu trang ("Jump to Chapter 4") từ một trang khác: Kết quả trả về có dạng như dưới đây: 1.8 Đường dẫn ngoài trong HTML Các trang bên ngoài có thể được tham chiếu bởi URL đầy đủ hoặc đường dẫn liên quan đến trang web hiện tại. |
