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

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

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 1 liên kết khác

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://dsmart.vn/">Click here</a>
		<br><br>
		<a href="https://www.facebook.com"><img src="http://dsmart.vn/image/hugo.jpg"></a>
	</body>
</html>

– 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://dsmart.vn, 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://dsmart.vn)

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ụ: dsmart.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ó.

https://dsmart.vn
https://dsmart.vn/thiet-ke-website-gia-re
https://dsmart.vn/bang-gia

Đườ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ụ: css/style.css, js/main.js

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

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="https://dsmart.vn/lien-he">Đường dẫn tuyệt đối</a>
		<a href="css/style.css">Đường dẫn tương đối</a>
	</body>
</html>