Cách tạo một cái liên kết (Link) trong HTML


1) Liên kết là gì !?

- Trong trang web, liên kết là những nội dung (thường được đại diện bởi văn bản hoặc hình ảnh) mà khi chúng ta nhấp vào nó thì chúng ta sẽ được chuyển đến một tài liệu khác.

- Ví dụ:

- Dòng chữ Click here chính là một cái liên kết, khi nhấp vào nó thì chúng ta sẽ được chuyển đến một tài liệu khác (một tấm hình)

Click here

- Tấm hình bên phải chính là một cái liên kết, khi nhấp vào nó thì chúng ta sẽ được chuyển đến một tài liệu khác (trang fanpage của webcoban.vn)

2) Cách tạo một cái liên kết

- Để tạo một cái liên kết thì chúng ta dùng cú pháp như sau:

<a href="URL">nội dung đại diện cho cái liên kết</a>

- Trong đó:

  • URL là đường dẫn đến tài liệu mà các bạn muốn người dùng sẽ được chuyển đến.
  • Nội dung đại diện cho cái liên kết có thể là văn bản hoặc hình ảnh.
Ví dụ:

<!DOCTYPE html>
<html>
	<head>
		<title>Cách tạo liên kết trong html</title>
		<meta charset="utf-8">
	</head>
	<body>
		<a href="http://webcoban.vn/image/hugo.jpg">Click here</a>
		<br><br>
		<a href="https://www.facebook.com"><img src="http://webcoban.vn/image/sumo.jpg"></a>
	</body>
</html>
Xem ví dụ

- Lưu ý: Khi tạo một cái liên kết, nếu chúng ta bỏ trống URL thì mặc định URL sẽ là đường dẫn của trang web chứa liên kết (ví dụ, bạn đang ở trang http://webcoban.vn/css/default.html, bên trong trang đó có một cái liên kết được tạo ra từ cú pháp <a href="">Click here</a> thì khi đó URL của cái liên kết chính là http://webcoban.vn/css/default.html)

3) Phân loại đường dẫn đến tài liệu

- Thông thường thì "đường dẫn đến tài liệu" được chia ra làm hai loại chính:

Đường dẫn tuyệt đối

- Đường dẫn tuyệt đối là loại đường dẫn mà bên trong nó sẽ có chứa đầy đủ các thành phần như:

  • (1) Giao thức, ví dụ: http: https:
  • (2) Máy chủ, ví dụ: webcoban.vn google.com facebook.com
  • (3) Đường dẫn, ví dụ: javascript/default.html default.html

- Lưu ý: Giao thức & máy chủ là hai thành phần bắt buộc phải có.

Đường dẫn tương đối

- Đường dẫn tương đối là loại đường dẫn mà bên trong nó chỉ có chứa duy nhất một thành phần:

  • (3) Đường dẫn, ví dụ: javascript/default.html default.html

- Bên dưới là một số ví dụ về đường dẫn tuyệt đối & đường dẫn tương đối.

Đường dẫn tuyệt đối

http://webcoban.vn

http://webcoban.vn/css/default.html

http://webcoban.vn/css/nhung-kien-thuc-co-ban-trong-viec-viet-ma-css.html

Đường dẫn tương đối

default.html

php/cach-su-dung-lenh-switch-case.html

css/mau-sac-colors-trong-css.html

Ví dụ:

- Cả hai cái liên kết bên dưới đều chuyển đến trang tài liệu học HTML.

- Tuy nhiên:

  • Liên kết thứ nhất thì sử dụng đường dẫn tuyệt đối.
  • Liên kết thứ hai thì sử dụng đường dẫn tương đối.

<!DOCTYPE html>
<html>
	<head>
		<title>Xem ví dụ</title>
		<meta charset="utf-8">
	</head>
	<body>
		<a href="http://webcoban.vn/html/default.html">Đường dẫn tuyệt đối</a>
		<a href="default.html">Đường dẫn tương đối</a>
	</body>
</html>
Xem ví dụ

4) Cách xác định đường dẫn tương đối

- Giữa đường dẫn tương đối & đường dẫn tuyệt đối thì việc xác định đường dẫn tuyệt đối khá là đơn giản, chúng ta chỉ cần sao chép địa chỉ nằm trên thanh địa chỉ của trình duyệt. Còn về việc xác định đường dẫn tương đối thì phức tạp hơn rất nhiều, các bạn vui lòng tham khảo một số ví dụ bên dưới để tìm hiểu cách xác định đường dẫn tương đối.

- Trước tiên, vào ổ đĩa D:/ tạo một cây thư mục với các tập tin như sau:

Developer

index.html

AngularJS

filters.html

validation.html

Document

databinding.html

Example1

objects.html

Example2

expressions.html

JavaScript

comments.html

Tutorial

performance.html

Functions

constructor.html

- Câu hỏi: Nếu đang nằm ở trang index.html, tôi muốn tạo một cái liên kết để chuyển đến trang filters.html thì đường dẫn tương đối trong trường hợp này sẽ được xác định như thế nào !?

- Trả lời: Đường dẫn tương đối sẽ được xác định bởi hướng đi như sau:

  • Đi vào thư mục AngularJS
  • Đi vào trang filters.html

- Kết luận: Bên dưới là đường dẫn tương đối mà tôi cần.

AngularJS/filters.html

- Câu hỏi: Nếu đang nằm ở trang index.html, tôi muốn tạo một cái liên kết để chuyển đến trang expressions.html thì đường dẫn tương đối trong trường hợp này sẽ được xác định như thế nào !?

- Trả lời: Đường dẫn tương đối sẽ được xác định bởi hướng đi như sau:

  • Đi vào thư mục AngularJS
  • Đi vào thư mục Document
  • Đi vào thư mục Example2
  • Đi vào trang expressions.html

- Kết luận: Bên dưới là đường dẫn tương đối mà tôi cần.

AngularJS/Document/Example2/expressions.html

- Câu hỏi: Nếu đang nằm ở trang databinding.html, tôi muốn tạo một cái liên kết để chuyển đến trang validation.html thì đường dẫn tương đối trong trường hợp này sẽ được xác định như thế nào !?

- Trả lời: Đường dẫn tương đối sẽ được xác định bởi hướng đi như sau:

  • Đi ra khỏi thư mục cha ..
  • Đi vào trang validation.html

- Kết luận: Bên dưới là đường dẫn tương đối mà tôi cần.

../validation.html

- Câu hỏi: Nếu đang nằm ở trang databinding.html, tôi muốn tạo một cái liên kết để chuyển đến trang constructor.html thì đường dẫn tương đối trong trường hợp này sẽ được xác định như thế nào !?

- Trả lời: Đường dẫn tương đối sẽ được xác định bởi hướng đi như sau:

  • Đi ra khỏi thư mục cha ..
  • Đi ra khỏi thư mục cha ..
  • Đi vào thư mục JavaScript
  • Đi vào thư mục Tutorial
  • Đi vào thư mục Functions
  • Đi vào trang constructor.html

- Kết luận: Bên dưới là đường dẫn tương đối mà tôi cần.

../../JavaScript/Tutorial/Functions/constructor.html

- Câu hỏi: Nếu đang nằm ở trang objects.html, tôi muốn tạo một cái liên kết để chuyển đến trang expressions.html thì đường dẫn tương đối trong trường hợp này sẽ được xác định như thế nào !?

- Trả lời: Đường dẫn tương đối sẽ được xác định bởi hướng đi như sau:

  • Đi ra khỏi thư mục cha ..
  • Đi vào thư mục Example2
  • Đi vào trang expressions.html

- Kết luận: Bên dưới là đường dẫn tương đối mà tôi cần.

../Example2/expressions.html

- Câu hỏi: Nếu đang nằm ở trang comments.html, tôi muốn tạo một cái liên kết để chuyển đến trang databinding.html thì đường dẫn tương đối trong trường hợp này sẽ được xác định như thế nào !?

- Trả lời: Đường dẫn tương đối sẽ được xác định bởi hướng đi như sau:

  • Đi ra khỏi thư mục cha ..
  • Đi vào thư mục AngularJS
  • Đi vào thư mục Document
  • Đi vào trang databinding.html

- Kết luận: Bên dưới là đường dẫn tương đối mà tôi cần.

../AngularJS/Document/databinding.html

- Câu hỏi: Nếu đang nằm ở trang index.html, tôi muốn tạo một cái liên kết để chuyển đến trang constructor.html thì đường dẫn tương đối trong trường hợp này sẽ được xác định như thế nào !?

- Trả lời: Đường dẫn tương đối sẽ được xác định bởi hướng đi như sau:

  • Đi vào thư mục JavaScript
  • Đi vào thư mục Tutorial
  • Đi vào thư mục Functions
  • Đi vào trang constructor.html

- Kết luận: Bên dưới là đường dẫn tương đối mà tôi cần.

JavaScript/Tutorial/Functions/constructor.html

- Câu hỏi: Nếu đang nằm ở trang filters.html, tôi muốn tạo một cái liên kết để chuyển đến trang validation.html thì đường dẫn tương đối trong trường hợp này sẽ được xác định như thế nào !?

- Trả lời: Đường dẫn tương đối sẽ được xác định bởi hướng đi như sau:

  • Đi vào trang validation.html

- Kết luận: Bên dưới là đường dẫn tương đối mà tôi cần.

validation.html
Ví dụ 1
Ví dụ 2
Ví dụ 3
Ví dụ 4
Ví dụ 5
Ví dụ 6
Ví dụ 7
Ví dụ 8

5) Ưu điểm & nhược điểm của hai loại đường dẫn

Đường dẫn tuyệt đối

- Ưu điểm: Cách xác định đường dẫn rất đơn giản.

- Nhược điểm: Mã nguồn chỉ có thể sử dụng trên một máy chủ, nếu chúng ta sử dụng mã nguồn trên các máy chủ khác nhau thì sẽ tốn nhiều công sức cho việc cập nhật lại các đường dẫn.

VÍ DỤ:

- Hiện tại tôi đang lưu hàng trăm bài viết trên máy chủ webcoban.vn, bên trong mỗi bài viết có rất nhiều liên kết được xác định bởi đường dẫn tuyệt đối dưới dạng http://webcoban.vn/đường-dẫn

- Nếu sau này vì một lý do gì đó mà tôi phải chuyển toàn bộ bài viết lên một máy chủ khác (chẳng hạn như webcoban.com) thì khi đó tôi phải cập nhật lại toàn bộ đường dẫn của tất cả các liên kết bên trong các bài viết từ dạng http://webcoban.vn/đường-dẫn thành http://webcoban.com/đường-dẫn

Đường dẫn tương đối

- Ưu điểm: Mã nguồn có thể sử dụng trên nhiều máy chủ khác nhau.

- Nhược điểm: Cách xác định đường dẫn rất phức tạp.

- Lưu ý: Với những ưu điểm & nhược điểm được nêu ở phía trên thì chúng tôi khuyến khích các bạn nên tập thói quen sử dụng đường dẫn tương đối. Lúc đầu còn mới nên sẽ rất khó khăn, tuy nhiên khi đã thành thạo rồi thì nó sẽ đem lại cho các bạn nhiều tiện nghi hơn.

6) Tùy chỉnh nơi mở tài liệu

- Mặc định thì nơi mở tài liệu của một cái liên kết là bên trong khung hiện tại. Các bạn vui lòng nhấp vào hình tờ giấy bên phải để tìm hiểu khái niệm "khung là gì !?"

- Tuy nhiên, chúng ta có thể thêm thuộc tính target vào bên trong thẻ <a> để tùy chỉnh lại nơi mở tài liệu của cái liên kết, cú pháp như sau:

<a href="URL" target="nơi mở tài liệu">nội dung đại diện cho cái liên kết</a>

- Trong đó, nơi mở tài liệu có thể được xác định dựa theo một trong bốn giá trị:

_self

- Tài liệu sẽ được mở bên trong khung hiện tại (mặc định)

Xem ví dụ
_top

- Tài liệu sẽ được mở bên trong tab hiện tại.

_blank

- Tài liệu sẽ được mở bên trong một tab mới.

_parent

- Tài liệu sẽ được mở bên trong khung cha của khung hiện tại (nếu không có khung cha thì nó sẽ mở bên trong Tab hiện tại)

7) Download tài liệu khi người dùng nhấp vào liên kết

- Nếu các bạn muốn thiết lập việc tài liệu sẽ được tải xuống khi người dùng nhấp vào liên kết thì các bạn thêm thuộc tính download vào bên trong thẻ <a>.

Ví dụ:

<!DOCTYPE html>
<html>
	<head>
		<title>Tải tập tin</title>
	</head>
	<body>
		<a href="../file/hello.txt" download>Click here</a>
	</body>
</html>
Xem ví dụ

- Khung là nơi dùng để mở & thao tác với trang web.

- Khung được chia ra làm hai loại:

  • Khung chính (Tab trên trình duyệt)
  • Khung phụ (khung được nhúng vào bên trong trang web, nó được tạo ra từ thẻ iframe)

- Lưu ý: Thông thường thì người ta không gọi khung chính & khung phụ, mà người ta sẽ gọi là:

  • Khung chính = tab
  • Khung phụ = khung

- Ví dụ: Bên dưới là một cái khung.

- Lưu ý: Các bạn sẽ được tìm hiểu chi tiết cách tạo một cái khung trong các bài hướng dẫn tiếp theo.