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"
<!DOCTYPE html>
<html>
<head>
<title>example01.html</title>
<meta charset="utf-8">
</head>
<body>
<h2 id="html">1) TÀI LIỆU HỌC HTML</h2>
. . . .
<h2 id="css">2) TÀI LIỆU HỌC CSS</h2>
. . . .
<h2 id="js">3) TÀI LIỆU HỌC JAVASCRIPT</h2>
. . . .
<h2 id="mysql">4) TÀI LIỆU HỌC MYSQL</h2>
. . . .
<h2 id="php">5) TÀI LIỆU HỌC PHP</h2>
. . . .
</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.
<!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.
<!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>
<h2 id="html">1) TÀI LIỆU HỌC HTML</h2>
. . . .
<h2 id="css">2) TÀI LIỆU HỌC CSS</h2>
. . . .
<h2 id="js">3) TÀI LIỆU HỌC JAVASCRIPT</h2>
. . . .
<h2 id="mysql">4) TÀI LIỆU HỌC MYSQL</h2>
. . . .
<h2 id="php">5) TÀI LIỆU HỌC PHP</h2>
. . . .
</body>
</html>
Xem ví dụ Các liên kết HTML có thể được dùng để tạo dấu trang, để người đọc có thể nhảy đến các phần cụ thể trên một trang web.
Dấu trang có thể hữu dụng với một trang web rất dài. Để tạo một dấu trang - đầu tiên tạo dấu trang, sau đó thêm một liên kết đến nó. Khi liên kết bị bấm, trang sẽ kéo xuống hoặc lên đến vị trí của dấu trang. ví dụDầu tiên, tạo một dấu trang với thuộc tính id : <h2 id="C4">Chapter 4</h2>
Sau đó, thêm một liên kết đên dấu trang ("Jump to Chapter 4"), từ bên trong cùng một trang:
ví dụ<a href="#C4">Jump to Chapter 4</a>
<!DOCTYPE html>
<html>
<body>
<p><a href="#C4">Jump to Chapter 4</a></p>
<p><a href="#C10">Jump to Chapter 10</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C10">Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 18</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 19</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 20</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 21</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 22</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 23</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
Bạn cũng có thể thêm đường dẫn đến một dấu trang trên một trang kjác:
<a href="html_demo.html#C4">Jump to Chapter 4</a>
Tóm tắt chương- Dùng thuộc tính
id (id="value") để định nghĩa dấu trang trên một trang - Dùng thuộc tính
href (href="#value") để liên kết đến dấu trang
Các thẻ liên kết của HTML
| Thẻ | Mô tả |
|---|
| <a>
| Định nghĩa một siêu liên kết
|
| 
