Web Cơ Bản

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:

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)
Ví dụ:

<a href="http://webcoban.vn">Liên kết 1</a>
<a href="http://webcoban.vn" target="_self">Liên kết 2</a>
<a href="http://webcoban.vn" target="_blank">Liên kết 3</a>
Xem ví dụ

Đườ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ụ:

Đường dẫn Loại đường dẫn
http://webcoban.vn TUYỆT ĐỐI
http://webcoban.vn/html TUYỆT ĐỐI
http://webcoban.vn/html/default.html TUYỆT ĐỐI
http://webcoban.vn/html/cach-tao-mot-trang-web-html.html TUYỆT ĐỐI
html tương đối
html/default.html tương đối
default.html tương đối
html/cach-tao-mot-trang-web-html.html tương đối
cach-tao-mot-trang-web-html.html tương đối
Ví dụ:

Hai liên kết dưới đây đều được dùng để chuyển đến trang http://webcoban.vn/html/default.html
Tuy nhiên cách viết đường dẫn thì khác nhau


<a href="http://webcoban.vn/html/default.html">Đường dẫn tuyệt đối</a>
<a href="default.html">Đường dẫn tương đối</a>
Xem ví dụ

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:

  • laptrinhweb
    • trang1.html
    • folder1
      • trang2.html
      • folder3
        • trang4.html
        • folder7
          • trang5.html
        • folder8
          • trang6.html
      • folder4
    • folder2
      • trang3.html
      • folder5
        • trang7.html
        • folder9
          • trang8.html
  • 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

    Loại đường dẫn Ưu điểm Nhược điểm
    Đường dẫn tuyệt đối Dễ dàng xác định được đường dẫn đến một trang web (hoặc tài nguyên) nào đó. Không thể sử dụng cho các tên miền khác.
    Ví dụ, bạn đang xem bài hướng dẫn này ở trang webcoban.vn, tôi có một liên kết đến trang Cách tạo một trang web HTML với đường dẫn là http://webcoban.vn/html/cach-tao-mot-trang-web-html.html
    Nếu tôi up toàn bộ mã nguồn của trang web này cho tên miền webcoban.com thì khi bấm vào liên kết Cách tạo một trang web HTML nó vẫn chuyển đến trang http://webcoban.vn/html/cach-tao-mot-trang-web-html.html chứ không phải là http://webcoban.com/html/cach-tao-mot-trang-web-html.html
    Đường dẫn tương đối Có thể sử dụng trên các tên miền khác nhau Nếu chưa quen cách sử dụng đường dẫn tương đối thì việc xác định đường dẫn đến một trang web (hoặc tài nguyên) nào đó sẽ rất khó khăn và dễ bị sai

    - 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ử đó.

    Ví dụ:

    <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>

    Ví dụ:

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

    Để 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>
    Ví dụ:

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

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

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

    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" width="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://webcoban.vn" target="_blank"><img src="../public/home/img_baiviet/webcoban-logo.png"></a>
    <br>
    <a href="http://webcoban.vn" target="_blank"><img src="../public/home/img_baiviet/webcoban-logo.png" width="200px" height="100px"></a>

    Khi đó, màn hình trình duyệt sẽ hiển thị:

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