07/09/2018, 14:49

Đường dẫn file trong HTML

Đường dẫn Mô tả <img src=”picture.jpg”> picture.jpg nằm cùng thư mục với trang hiện tại <img src=”images/picture.jpg”> picture.jpg ở thư mục images nằm trong thư mục hiện tại <img src=”/images/pictur ...

Đường dẫn Mô tả
<img src=”picture.jpg”> picture.jpg nằm cùng thư mục với trang hiện tại
<img src=”images/picture.jpg”> picture.jpg ở thư mục images nằm trong thư mục hiện tại
<img src=”/images/picture.jpg”> picture.jpg ở thư mục images nằm trong thư mục gốc của trang web hiện tại
<img src=”../picture.jpg”> picture.jpg nằm trong thư mục trên một cấp từ thư mục hiện tại

Đường dẫn file trong HTML

Một đường dẫn tập tin mô tả vị trí của tập tin đó trong cấu trúc thư mục của trang web. Đường dẫn tệp được sử dụng khi liên kết tới các tệp bên ngoài như:

  • Web pages
  • Images
  • Style sheets
  • JavaScripts

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

Đường dẫn tệp tuyệt đối là một URL đầy đủ như sau:

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

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

Một đường dẫn file tương đối trỏ đến file liên quan trang hiện tại. Trong ví dụ dưới đây đường dẫn file trỏ đến file trong thư mục images nằm ở thư mục gốc của trang web hiện tại:

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

Trong ví dụ sau đường dẫn file trỏ đến tập tin trong thư mục images nằm trong thư mục hiện tại:

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

Trong ví dụ này đường dẫn file trỏ đến một tập tin trong thư mục images nằm trong thư mục trên một cấp thư mục hiện tại:

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

Hướng dẫn cách dùng đường dẫn file

Tốt nhất là sử dụng các đường dẫn tập tin tương đối (nếu có thể).

Khi sử dụng đường dẫn tệp tương đối, các trang web của bạn sẽ không bị ràng buộc với URL hiện tại của bạn. Tất cả liên kết sẽ hoạt động trên máy chủ của bạn (localhost) cũng như trên miền bạn đang và sẽ dùng.

Tham khảo thêm 2 khóa học hữu ích do giảng viên quốc tế trường FPT Arena giảng dạy:
  • Khóa học lập trình frontend cơ bản : Bootstrap 4, Jquery, CSS3, HTML5
  • Học lập trình Frontend nâng cao qua project thực tế
0