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

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 website khác (hoặc một nguồn tài nguyên khác như: )

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 link

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

<α href="URL" target="kiểu mở liên kết">Bài viết đại diện cho linkvàlt;/avàgt;

Trong số đó:

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

Chẳng hạn:

<α href="http://webcoban.vn">Liên kết 1vàlt;/avàgt;
<α href="http://webcoban.vn" target="_self">Liên kết 2vàlt;/avàgt;
<α href="http://webcoban.vn" target="_blank">Liên kết 3vàlt;/avàgt;

Xem chẳng hạn

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

Một link được xác nhận bởi một đường dẫn (đường dẫn hay còn được biết tới như một ).

Đườ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 , , )
  • Đườ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 )

Chẳng hạn:

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

Chẳng hạn:

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

<α href="http://webcoban.vn/html/default.html">Đường dẫn tuyệt đối</avàgt;
<α href="default.html">Đường dẫn tương đối</avàgt;

Xem chẳng hạn

Xem Thêm  6 cách khai báo các hàm JavaScript - khai báo một hàm trong javascript

Cách xác nhận đườ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ận đường dẫn tương đối.

Vào ổ đĩa ? 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 & 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
  • Chẳng hạn 1: Giả sử bạn đang ở trang1.html mong muốn đến trang2.html thì đường đi sẽ là:

    1. Đi vào folder1
    2. Đi vào trang2.html
    <α href="folder1/trang2.html">Liên kết đến trang 2vàlt;/avàgt;

    Chẳng hạn 2: Giả sử bạn đang ở trang1.html mong 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
    <α href="folder1/folder3/folder8/trang6.html">Liên kết đến trang 6vàlt;/avàgt;;

    Chẳng hạn 3: Giả sử bạn đang ở trang4.html mong 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
    <α href="../trang2.html">Liên kết đến trang 2vàlt;/avàgt;

    Chẳng hạn 4: Giả sử bạn đang ở trang4.html mong 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
    <α href="../../folder2/folder5/folder9/trang8.html">Liên kết đến trang 8vàlt;/avàgt;

    Chẳng hạn 5: Giả sử bạn đang ở trang5.html mong 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
    <α href="../folder8/trang6.html">Liên kết đến trang 6vàlt;/avàgt;

    Chẳng hạn 6: Giả sử bạn đang ở trang3.html mong 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
    <α href="../folder1/folder3/trang4.html">Liên kết đến trang 4vàlt;/avàgt;

    Chẳng hạn 7: Giả sử bạn đang ở trang1.html mong 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
    <α href="folder2/folder5/folder9/trang8.html">Liên kết đến trang 8vàlt;/avàgt;

    Ưu thế & khuyết điểm của hai loại đường dẫn

    Loại đường dẫn
    Ưu thế
    Điểm yếu

    Xem Thêm  HTML Javascript: Tạo HTML và nhúng Javascript vào HTML - javascript để tạo html

    Đường dẫn tuyệt đối
    Đơn giản xác nhận được đường dẫn đến một website (hoặc tài nguyên) nào đó.
    Chẳng thể sử dụng cho các domain khác.
    Chẳng hạn, bạn đang xem bài hướng dẫn này ở trang webcoban.vn, tôi có một link đến trang

    Cách tạo một website 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 thể mã nguồn của website này cho domain webcoban.com thì khi nhấp vào link

    Cách tạo một website 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 domain khác nhau
    Nếu chưa quen cách dùng đường dẫn tương đối thì việc xác nhận đường dẫn đến một website (hoặc tài nguyên) nào đó sẽ rất khốn khó & dễ bị sai

    – Với những ưu thế & khuyết điểm như trên, chúng tôi động viên 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à link đến địa điểm của một phần tử nào đó nằm trong website.

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

    Chẳng hạn:

    <h2 id="chuong1">CHƯƠNG SỐ 1vàlt;/h2vàgt;

    Để link đến địa điểm của một phần tử, ta sử dụng cú pháp <α href=”#tên id của phần tử”>Đại diện cho linkvàlt;/avàgt;

    Chẳng hạn:

    <α href="#chuong1">Xem chương 1vàlt;/avàgt;
    <h2 id="chuong1">CHƯƠNG SỐ 1vàlt;/h2vàgt;

    Xem chẳng hạn

    Để link đến địa điểm của một phần tử nào đó trong một website khác, ta sử dụng cú pháp:

    <α href="đường dẫn đến trang web#tên id của phần tử">Đại diện cho linkvàlt;/avàgt;

    Chẳng hạn:

    Xem Thêm  Thuộc tính lớp Python: Hướng dẫn kỹ lưỡng - cách tạo một lớp với các thuộc tính trong python

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

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

    ABC

    Dùng hình ảnh làm đại diện cho link

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

    <α 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"></avàgt;

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

    Chẳng hạn:

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

    <α href="http://webcoban.vn" target="_blank"><img src="../public/home/img_baiviet/webcoban-logo.png"></avàgt;
    <brvàgt;
    <α href="http://webcoban.vn" target="_blank"><img src="../public/home/img_baiviet/webcoban-logo.png" width="200px" height="100px"></avàgt;

    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à


    Xem chẳng hạn

    Viết một bình luận