1.Liên kết trong HTML
Các liên kết trong HTML là các siêu liên kết
Bạn có thể nhấp vào một liên kết và chuyển đến một tài liệu khác
Khi bạn di chuyển chuột qua một liên kết, mũi tên chuột sẽ biến thành một bàn tay nhỏ
Chú ý: Một liên kết không nhất thiết phải là văn bản. Một liên kết có thể là một hình ảnh hoặc bất kỳ phần tử HTML nào khác
2.Cú pháp liên kết trong HTML
Thẻ <a> xác định một siêu liên kết. Nó có cú pháp như sau:
<a href=”url”>tên liên kết<a>
Thuộc tính quan trọng nhất của thẻ <a> là heref vì nó chỉ ra điểm đến của liên kết
Tên liên kết là phần mà sẽ được hiển thị cho người đọc
Nhấp vào tên liên kết, sẽ đưa người đọc đến địa chỉ URL được chỉ định
Ví dụ:
<a href="laptrinhtudau.com">lâp trình từ đầu</a>
Ở đây, tôi tạo một liên kết dấn đến laptrinhtudau.com
Lưu ý: Theo mặc định, các liên kết sẽ xuất hiện như sau trong tất cả các trình duyệt :
- Liên kết không truy cập được gạch chân và có màu xanh lam
- Liên kết đã truy cập được gạch chân và có màu tím
- Liên kết đang hoạt động được gạch chân và có màu đỏ
Bạn có thể sử dụng thuộc tính CSS để tạo kiểu cho các liên kết, để có một cái nhìn khác mới lạ hơn
3.Thuộc tính mục tiêu trong HTML
Theo mặc định, trang được liên kết sẽ được hiển thị trong cửa sổ trình duyệt hiện tại. Để thay đổi điều này, bạn phải chỉ định một mục tiêu khác cho liên kết
Do đó ta sử dụng thuộc tính target chỉ định nơi mở tài liệu được liên kết.
Thuộc tính target có thể có một trong các giá trị sau:
_self – Mặc định. Mở tài liệu trong cùng một cửa sổ / tab khi nó được nhấp vào _blank – Mở tài liệu trong cửa sổ hoặc tab mới
_parent – Mở tài liệu trong khung chính
_top – Mở tài liệu trong toàn bộ phần nội dung của cửa sổ
Ví dụ:
<a href="laptrinhtudau.com" target="_blank">lâp trình từ đầu</a>
Ở đây, tôi mở tài liệu liên kết trong cửa sổ hoặc tab mới
4.URL tuyệt đối với URL tương đối
URL tuyệt đối trong href có đầy đủ “https: // www”
URL tương đối là liên kết cục bộ (liên kết đến một trang trong cùng một trang web) không có phần “https: // www”
Ví dụ:
<!-- URL tuyệt đối --> <a href="https://www.laptrinhtudau.com" target="_blank">lâp trình từ đầu</a> <!-- URl tương đối --> <a href="laptrinhtudau.com" target="_blank">lâp trình từ đầu</a>
5.Sử dụng hình ảnh làm liên kết
Để sử dụng hình ảnh làm liên kết ta cần để thẻ <img> bên trong thẻ <a>
<a href="laptrinhtudau.com" target="_blank"><img src="happy.img"></a>
Ở đây, tôi đã sử dụng một hình ảnh để là liên kết
6.Liên kết địa chỉ email
Để liên kết địa chỉ email ta sử dụng thuộc tính mailto: bên trong herf
Ví dụ:
<a href="mailto:laptrinhtudau@gmail.com" target="_blank">email</a>
Ở đây, tôi đã tạo một liên kết dẫn đên email laptrinhtudau@gmail.com
7.Tiêu đề liên kết
Để thêm tiêu đề cho liên kết ta sử dụng thuộc tính title xác định thuộc tính thông tin thêm về một phần tử
Thông tin thêm này sẽ được hiển thị dưới dạng văn bản chú giải công cụ khi ta di chuột tới phần tử
Ví dụ:
<a href="laptrinhtudau.com" title="học lập trình">lâp trình từ đầu</a>
Ở đây, tôi xác định tiêu đề cho liên kết ở thẻ <a> là “học lập trình”
8. CSS siêu liên kết và tạo dấu trang trong HTML
8.1 CSS siêu liên kết
Màu của liên kết sẽ xuất hiện trong tất cả các trình duyệt với màu sắc mặc định với 3 trạng thái khác nhau . Bạn có thể thay đổi màu sắc trạng thái liên kết bằng các sử dụng CSS
Ví dụ:
8.2 Tạo liên kết trong trang HTML
Liên kết trong trang HTML là dạng bổ xung của liên kết thông thường, nó cho phép chúng ta chỉ định một vị trí cụ thể bên trong trang web mà người dùng sẽ chuyển đến khi họ nhấp vào liên kết
Ví dụ: