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ụ: