Cách tạo liên kết đến một vị trí bên trong trang web

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

- Liên kết trong có thể tạm hiểu là dạng bổ sung 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ẽ được chuyển đến khi họ nhấp vào liên kết.

- Ví dụ: Khi các bạn click here thì các bạn sẽ được chuyển đến phần TÀI LIỆU HỌC JAVASCRIPT nằm bên trong trang http://webcoban.vn/file/tai-lieu-hoc-lap-trinh-web.html

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

- Để tạo một cái liên kết trong thì chúng ta thực hiện hai bước như sau.

Bước 1: Tạo các bookmark trên trang web mà người dùng sẽ được chuyển đến.
Bước 2: Tạo liên kết trong.

2.1) Tạo các bookmark

- Trong HTML, bookmark có ý nghĩa giống như là một điểm đánh dấu vị trí trên trang web.

- Để tạo một cái bookmark thì chúng ta thêm thuộc tính id vào bên trong thẻ mở của phần tử mà mình muốn đánh dấu, với cú pháp là id="tên bookmark"

Ví dụ:

- Bên trong trang http://webcoban.vn/file/example01.html có năm cái bookmark.

<!DOCTYPE html>
<html>
<head>
	<title>example01.html</title>
	<meta charset="utf-8">
</head>
<body>
	<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="js">3) TÀI LIỆU HỌC JAVASCRIPT</h1>

	. . . .

	<h1 id="mysql">4) TÀI LIỆU HỌC MYSQL</h1>

	. . . .

	<h1 id="php">5) TÀI LIỆU HỌC PHP</h1>

	. . . .

</body>
</html>

2.2) Tạo liên kết trong

- Cú pháp tạo một cái liên kết trong cũng giống với cú pháp tạo một cái liên kết thông thường. Tuy nhiên, nằm phía sau đường dẫn đến tài liệu thì nó có thêm #tên bookmark để chỉ định một vị trí trên trang web mà chúng ta muốn người dùng sẽ được chuyển đến khi họ nhấp vào liên kết.

Ví dụ:

- Bên trong trang http://webcoban.vn/file/example02.html có ba cái liên kết trong.

<!DOCTYPE html>
<html>
<head>
	<title>example02.html</title>
	<meta charset="utf-8">
</head>
<body>
	<a href="http://webcoban.vn/file/example01.html#css">CSS</a>
	<a href="http://webcoban.vn/file/example01.html#mysql">MYSQL</a>
	<a href="http://webcoban.vn/file/example01.html#php">PHP</a>
</body>
</html>

Xem ví dụ

- Lưu ý: Nếu muốn tạo một cái liên kết trong để chuyển đến một vị trí được chỉ định bên trong trang web hiện tại thì chúng ta bỏ trống phần đường dẫn đến tài liệu.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
	<title>example03.html</title>
	<meta charset="utf-8">
</head>
<body>
	<a href="#css">CSS</a>
	<a href="#mysql">MYSQL</a>
	<a href="#php">PHP</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="js">3) TÀI LIỆU HỌC JAVASCRIPT</h1>

	. . . .

	<h1 id="mysql">4) TÀI LIỆU HỌC MYSQL</h1>

	. . . .

	<h1 id="php">5) TÀI LIỆU HỌC PHP</h1>

	. . . .

</body>
</html>

Xem ví dụ