Kết nối

[HTML/HTML5] Phần 22: Đường dẫn tập tin

4.073 lượt xem 
 Cập nhật lần cuối: 07/09/2017 lúc 19:28:05
Thể loại: HTML/HTML5, Thiết kế Web 

Bài viết này chỉ cho bạn cách trỏ đến tập tin (hình ảnh/văn bản) trong HTML thông qua các dạng đường dẫn (URL). Sau đây là vài ví dụ hiển thị 1 hình có tên là dammio.gif với thuộc tính src chứa giá trị các đường dẫn khác nhau.

  • <img src=”dammio.gif”>: hình dammio.gif ở cùng 1 thư mục với trang HTML hiện tại.
  • <img src=”images/dammio.gif”>: hình dammio.gif nằm trong ở thư mục images, là thư mục con dưới 1 cấp so với trang hiện tại.
  • <img src=”/images/dammio.gif”>: hình dammio.gif nằm ở thư mục images, tính từ gốc của website hiện tại.
  • <img src=”../dammio.gif”>: hình dammio.gif trên trên 1 cấp thư mục so với trang hiện tại. Nếu hình này nằm trên 1 cấp so với website hiện tại, đây là 1 kỹ thuật bảo mật, bạn có thể tìm hiểu thêm trên mạng.

Đường dẫn tập tin
Đường dẫn tập tin mô tả nơi chứa 1 tập tin trong cấu trúc thư mục website. Các đường dẫn tập tin được sử dụng khi liên kết với các tập tin bên ngoài HTML như:

  • Các trang Web
  • Hình ảnh
  • Phong cách
  • Javascript

Đường dẫn tập tin tuyệt đối (đường dẫn tuyệt đối)
Một đường dẫn tuyệt đối là đường dẫn chứa đầy đủ URL liên kết đến 1 tập tin nào đó. Ưu điểm của đường dẫn tuyệt đối là trỏ chính xác đến đường dẫn tập tin đó, giúp bạn truy vết rõ một tập tin bất kỳ nằm ở đâu trong cấu trúc website của bạn. Nhược điểm của đường dẫn tuyệt đối là, nếu cấu trúc thư mục website thay đổi thì bạn phải thay đổi đường dẫn tập tin theo.

<img src="https://www.dammio.com/wp-content/uploads/2017/08/cropped-logo_dammio.png" alt="Logo">

Ví dụ trên nhúng 1 hình ảnh logo với thuộc tính src chứa giá trị đường dẫn tuyệt đối, bao gồm domain, các thư mục và tên hình ảnh.

Liên quan:  [PHP] Phần 1: Giới thiệu PHP

Đường dẫn tương đối
Một đường dẫn tương đối trỏ đến 1 tập tin tương đối so với trang web hiện tại. Tức là dựa vào vị trí của trang web hiện tại, chúng ta so sánh đường dẫn của 1 tập tin nào đó với trang hiện tại để tạo ra đường dẫn tương đối. Ưu điểm đường dẫn tương đối là khi bảo trì, thay đổi cấu trúc thư mục thì giảm bớt “việc thay đổi bằng tay” các đường dẫn.

Ví dụ, chúng ta có website dammio.com chứa trang web Index.html với cấu trúc đường dẫn https://www.dammio.com/Index.html. Trong trang Index.html chúng ta chứa đoạn mã sau.

<img src="/images/dammio.gif" alt="Logo">

Trong ví dụ trên, hình dammio.gif chứa trong thư mục images tính từ thư mục gốc của website hiện tại và là đường dẫn tương đối so với trang Index.html, vì vậy đường dẫn thực sự của hình là: https://www.dammio.com/images/dammio.gif.

Ví dụ tiếp theo, chúng ta nhúng hình dammio.gif ở trang Home.html như sau:

<img src="images/dammio.gif" alt="Mountain">

Vì không mô tả trang Home.html nằm ở đâu trong hệ thống website, chúng ta chỉ biết được rằng hình dammio.gif nằm trong thư mục images, dưới 1 cấp so với thư mục chứa trang Home.html.

Cuối cùng, chúng ta xem ví dụ hình ảnh dammio.gif được nhúng trên 1 cấp so với thư mục chứa trang web About.html, nơi chứa đoạn mã sau.

<img src="../images/dammio.gif" alt="Mountain">

Kết luận: Việc nắm vững và hiểu rõ đường dẫn tập tin giúp bạn trỏ chính xác tập tin bên ngoài HTML chính xác và giảm bớt thời gian “mò mẫm” trong thiết kế Web.

Trích dẫn bài viết
  • APA:
    Dammio. (2017). [HTML/HTML5] Phần 22: Đường dẫn tập tin. https://www.dammio.com/2017/09/04/htmlhtml5-phan-22-duong-dan-tap-tin.
  • BibTeX:
    @misc{dammio,
    author = {Dammio},
    title = {[HTML/HTML5] Phần 22: Đường dẫn tập tin},
    year = {2017},
    url = {https://www.dammio.com/2017/09/04/htmlhtml5-phan-22-duong-dan-tap-tin},
    urldate = {2025-02-08}
    }
Theo dõi
Thông báo của
guest
1 Bình luận
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
1
0
Rất thích suy nghĩ của bạn, hãy bình luận.x