Đường dẫn trong HTML

Đường dẫn

Mô tả

<img src=”picture.jpg”

picture.jpg đặt cùng thư mục với trang hiện tại

<img src="images/picture.jpg">

picture.jpg đặt trong thư mục images trong thư mục hiện tại

<img src="/images/picture.jpg">

picture.jpg đặt trong thư mục images ở thư mục gốc của trang web hiện tại

<img src="../picture.jpg">

picture.jpg đặt trong thư mục tăng một cấp so với thư mục hiện tại

 

Các đường dẫn

Đường dẫn mô tả vị trí của file trong cấu trúc thư mục của trang web hiện tại

Đường dẫn thường được dùng để liên kết các file mở rộng như:

  • Các trang web
  • Hình ảnh
  • File CSS
  • JavaScript

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

Đường dẫn tuyệt đối là URL đầy đủ tới tệp trên internet:

Ví dụ

<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">

 

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

Đường dẫn tương đối trỏ đến một file liên quan trong trang hiện tại.

Trong ví dụ này, đường đẫn tương đối trỏ đến một tệp trong thư mục images nằm ở thư mục gốc của trang hiện tại

Ví dụ

<img src="/images/picture.jpg" alt="Mountain">

 

Ví dụ

Đường dẫn trỏ đến file trong thư mục images trong cùng thư mục với trang web

<img src="images/picture.jpg" alt="Mountain">

 

Ví dụ

Đường dẫn trỏ đến file trong thư mục images nằm trong thư mục cao hơn một cấp so với thư mục hiện tại

<img src="../images/picture.jpg" alt="Mountain">

 

Bài này khá trừu tượng nên bạn cần thực hành nhiều, để nắm rõ đường dẫn tương đối trong HTML. Các bạn có thể xem hình dưới để dễ hình dung cách link ảnh từ “sub-page.html” tới ảnh trong các thư mục

 

 

 

 

Lên trên