Trong HTML, bạn có thể tạo liên kết đến một vị trí cụ thể bên trong trang web bằng cách sử dụng thẻ <a> kết hợp với thuộc tính id. Đây là một cách hữu ích để điều hướng nhanh đến một phần nội dung nhất định mà không cần tải lại trang. Bạn chỉ cần đặt id cho phần tử đích và sử dụng dấu # trước tên id trong thuộc tính href của thẻ <a>. Phương pháp này thường được áp dụng trong mục lục, trang tài liệu dài hoặc điều hướng trang web, giúp cải thiện trải nghiệm người dùng. Hãy cùng Y2Graphic tìm hiểu nhé!
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: https://y2graphic.com/html/example-46.html
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.
|
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ụ:
<!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>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ụ:
<!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>– 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>
