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 !?