Thẻ Trong HTML | Tạo Một Liên Kết - Web Cơ Bản

Trang chủ » Cách Sử Dụng Href » Thẻ Trong HTML | Tạo Một Liên Kết - Web Cơ Bản

Có thể bạn quan tâm
Thẻ <a> trong HTML

1) Thẻ <a> trong HTML

- Thẻ <a> dùng để tạo một liên kết đến một tài liệu nào đó.

(khi người dùng bấm vào liên kết thì sẽ được chuyển đến tài liệu đó)

Ví dụ:

- Đoạn mã bên dưới có hai liên kết:

  • Một liên kết đến trang chủ
  • Một liên kết đến trang học CSS
<!DOCTYPE html> <html> <body> <a href="http://webcoban.vn">Chuyển đến trang chủ</a> <hr> <a href="http://webcoban.vn/css/default.html">Chuyển đến trang học CSS</a> </body> </html> Xem ví dụ

2) Các thuộc tính của thẻ <a>

- Thẻ <a> có ba thuộc tính cơ bản.

- Dưới đây là bảng mô tả sơ lược về ba thuộc tính đó:

href

Xác định đường dẫn đến tài liệu mà bạn muốn chuyển tới
download

Xác định việc:"khi người dùng bấm vào liên kết thì tài liệu của liên kết đó sẽ tự động được tải về"
target

Xác định nơi mà tài liệu sẽ được mở

2.1) Thuộc tính href

- Thuộc tính href dùng để xác định đường dẫn đến tài liệu mà bạn muốn chuyển tới.

(Đường dẫn ở đây có thể là đường dẫn tương đối hoặc đường dẫn tuyệt đối)

Ví dụ: <!DOCTYPE html> <html> <body> <p>- Liên kết bên dưới được xác định bởi đường dẫn tuyệt đối</p> <a href="http://webcoban.vn/css/default.html">Tài liệu học CSS</a> <p>- Liên kết bên dưới được xác định bởi đường dẫn tương đối</p> <a href="../javascript/default.html">Tài liệu học JavaScript</a> </body> </html> Xem ví dụ

- Ngoài ra, thuộc tính href cũng có thể dùng để xác định một vị trí bên trong trang web mà bạn muốn di chuyển tới (vị trí của phần tử được xác định dựa giá trị thuộc tính id của phần tử)

Ví dụ: <!DOCTYPE html> <html> <head> <style type="text/css"> h1{font-size:30px;} p{font-size:20px;} </style> </head> <body> <a href="#css">Di chuyển đến phần tử có thuộc tính id với giá trị là "css"</a> <h1 id="html">1) Tài liệu học HTML</h1> ... <h1 id="css">2) Tài liệu học CSS</h1> ... <h1 id="javascript">3) Tài liệu học JavaScript</h1> ... </body> </html> Xem ví dụ

2.2) Thuộc tính download

- Thuộc tính download xác định việc khi người dùng bấm vào liên kết thì tài liệu của liên kết đó sẽ tự động được tải về.

Ví dụ: <!DOCTYPE html> <html> <body> <a href="../image/flower.gif" download>Click here</a> </body> </html> Xem ví dụ

- Ta có thể thêm giá trị cho thuộc tính download để xác định tên của tập tin khi được lưu về máy tính.

Ví dụ: <!DOCTYPE html> <html> <body> <a href="../image/flower.gif" download="laptrinhweb">Click here</a> </body> </html> Xem ví dụ

- Lưu ý: Ta không cần phải xác định phần đuôi của tập tin vì hệ thống sẽ tự động làm việc đó.

2.3) Thuộc tính target

- Thuộc tính target dùng để xác định nơi mà tài liệu sẽ được mở.

- Thuộc tính target có bốn giá trị cơ bản:

_blank

Mở tài liệu trong một tab mới

 Xem ví dụ
_self

Mở tài liệu trong khung hiện tại

 Xem ví dụ
_parent

Mở tài liệu trong khung cha của khung hiện tại

 Xem ví dụ
_top

Mở tài liệu trong tab hiện tại

 Xem ví dụ

3) Định dạng CSS mặc định

- Hầu hết các trình duyệt sẽ hiển thị phần tử <a> với định dạng CSS như sau:

a:link, a:visited { color: (internal value); text-decoration: underline; cursor: auto; } a:link:active, a:visited:active { color: (internal value); }

Từ khóa » Cách Sử Dụng Href