Liên kết, đường dẫn tuyệt đối, đường dẫn tương đối trong HTML

Liên kết là gì?

Liên kết được dùng để chuyển sang một trang web khác (hoặc một nguồn tài nguyên khác như: hình ảnh, video, file nhạc,....)

Liên kết có thể được đại diện bởi:

• Một cụm từ: Click vào đây
• Hoặc một hình ảnh:

Cách tạo một liên kết

Để tạo một liên kết, ta sử dụng cú pháp dưới đây:

<a href="URL" target="kiểu mở liên kết">Nội dung đại diện cho liên kết</a>

Trong đó:

• URL là địa chỉ của trang web mà bạn muốn chuyển đến khi người dùng bấm vào liên kết.
• Kiểu mở liên kết có thể là:
• _blank: Mở liên kết trên một tab mới
• _self: Mở liên kết ở ngay tab hiện tại (Mặc định là liên kết sẽ được mở ở ngay tab hiện tại)

<a href="http://code24h.com">Liên kết 1</a>
<a href="http://code24h.com" target="_self">Liên kết 2</a>
<a href="http://code24h.com" target="_blank">Liên kết 3</a>

Đường dẫn tuyệt đối, đường dẫn tương đối

Một liên kết được xác định bởi một đường dẫn (đường dẫn hay còn được biết đến như một địa chỉ trang web).

Đường dẫn được chia làm hai loại:

• Đường dẫn tuyệt đối (là một chuỗi đầy đủ bao gổm http://, tên miền của trang web, đường dẫn đến tập tin)
• Đường dẫn tương đối (là một phần nhỏ của đường dẫn tuyệt đối, thông thường đường dẫn tương đối là phần đường dẫn đến tập tin)

Ví dụ:

<a href="http://code24h.com/html/default.html">Đường dẫn tuyệt đối</a>
<a href="default.html">Đường dẫn tương đối</a>

Cách xác định đường dẫn tương đối

Tôi có một bài thực hành để giúp bạn hiểu được cách xác định đường dẫn tương đối.

Vào ổ đĩa D tạo một thư mục có tên là laptrinhweb. Vào thư mục laptrinhweb, lần lượt tạo các thư mục và tập tin như sau:

Ví dụ 1: Giả sử bạn đang ở trang1.html muốn đến trang2.html thì đường đi sẽ là:

1. Đi vào folder1
2. Đi vào trang2.html

<a href="folder1/trang2.html">Liên kết đến trang 2</a>

Ví dụ 2: Giả sử bạn đang ở trang1.html muốn đến trang6.html thì đường đi sẽ là:

1. Đi vào folder1
2. Đi vào folder3
3. Đi vào folder8
4. Đi vào trang6.html

<a href="folder1/folder3/folder8/trang6.html">Liên kết đến trang 6</a>;

Ví dụ 3: Giả sử bạn đang ở trang4.html muốn đến trang2.html thì đường đi sẽ là:

1. Đi ngược về thư mục cha (Để đi ngược về thư cha, ta dùng dấu hai chấm .. )
2. Đi vào trang2.html

<a href="../trang2.html">Liên kết đến trang 2</a>

Ví dụ 4: Giả sử bạn đang ở trang4.html muốn đến trang8.html thì đường đi sẽ là:

1. Đi ngược về thư mục cha
2. Đi ngược về thư mục cha
3. Đi vào folder2
4. Đi vào folder5
5. Đi vào folder9
6. Đi vào trang8.html

<a href="../../folder2/folder5/folder9/trang8.html">Liên kết đến trang 8</a>

Ví dụ 5: Giả sử bạn đang ở trang5.html muốn đến trang6.html thì đường đi sẽ là:

1. Đi ngược về thư mục cha
2. Đi vào folder8
3. Đi vào trang6.html

<a href="../folder8/trang6.html">Liên kết đến trang 6</a>

Ví dụ 6: Giả sử bạn đang ở trang3.html muốn đến trang4.html thì đường đi sẽ là:

1. Đi ngược về thư mục cha
2. Đi vào folder1
3. Đi vào folder3
4. Đi vào trang4.html

<a href="../folder1/folder3/trang4.html">Liên kết đến trang 4</a>

Ví dụ 7: Giả sử bạn đang ở trang1.html muốn đến trang8.html thì đường đi sẽ là:

1. Đi vào folder2
2. Đi vào folder5
3. Đi vào folder9
4. Đi vào trang8.html

<a href="folder2/folder5/folder9/trang8.html">Liên kết đến trang 8</a>

Ưu điểm và nhược điểm của hai loại đường dẫn

Với những ưu điểm và nhược điểm như trên, chúng tôi khuyến khích bạn tập thói quen sử dụng đường dẫn tương đối

Liên kết trong

Liên kết trong là liên kết đến vị trí của một phần tử nào đó nằm trong trang web.

Để xác định vị trí cho một phần tử ta phải thêm thuộc tính id vào thẻ mở của phần tử đó.

<h2 id="chuong1">CHƯƠNG SỐ 1</h2>

Để liên kết đến vị trí của một phần tử, ta sử dụng cú pháp <a href="#tên id của phần tử">Đại diện cho liên kết</a>

<a href="#chuong1">Xem chương 1</a>
<h2 id="chuong1">CHƯƠNG SỐ 1</h2>

Để liên kết đến vị trí của một phần tử nào đó trong một trang web khác, ta sử dụng cú pháp:

<a href="đường dẫn đến trang web#tên id của phần tử">Đại diện cho liên kết</a>

<a href="http://code24h.com/html/cach-tao-mot-trang-web-html.html#cachchaytrangweb">ABC</a>

Dùng hình ảnh làm đại diện cho liên kết

Để dùng hình ảnh làm đại diện cho một liên kết, ta sử dụng cú pháp sau:

<a href="URL" target="kiểu mở liên kết"><img src="URL2" awidth="chiều rộng của hình" height="chiều cao của hình"></a>

Trong đó, URL2 là đường dẫn đến tập tin hình ảnh dùng làm đại diện cho liên kết. Tương tự như URL, URL2 có thể được xác định bằng đường dẫn tuyệt đối hoặc đường dẫn tương đối.

Ví dụ

Khi thực thi đoạn mã:

<a href="http://code24h.com" target="_blank"><img src="/pictures/picfullsizes/2018/08/18/hwd1534563200.png"></a>
<br>
<a href="http://code24h.com" target="_blank"><img src="/pictures/picfullsizes/2018/08/18/hwd1534563200.png" awidth="200px" height="100px"></a>

Màn hình trình duyệt sẽ hiển thị là

Xem ví dụ