HTML'de Dosya Yolları

File path, türkçesi Dosya yolu bir dosyanın bir web sitesinin klasör yapısındaki konumunu açıklar. Basit bir konu gibi görünse de HTML'e yeni başlayan kişilerin dosya yolu yapısını öğrenmesi gerekmektedir. Genellile HTML'e yeni başlayanlar dosya yolu hakkında bilgili olmadıkları için pek çok hata ile karşılaşıyorlar. Peki bu dosya yollarını nerede kullanıyoruz ?

<img> etiketi ile sitemize resim eklediğimiz de, src="" parametresine bir resim yolu veririz ki <img> etiketi hangi resmi göstermek istediğini bilsin. Dosya yolu burada işimize yaramaktadır. Dosya yolları sayfalar, resimler, javascript dosyaları, css dosyaları gibi harici dosyalara bağlanırken kullanılır.

 <img src="resim.jpg" />  resim.jpg, ekli olduğu HTML belgesi ile aynı klasörde
 <img src="resimler/resim.jpg">  resim.jpg adlı dosya, ekli olduğu HTML belgesinin bulunduğu klasörün içinde resimler adlı klasörün içinde
 <img src="/resim.jpg">  resim.jpg sitenin ana klasöründe
 <img src="../resim.jpg">  resim.jpg ekli olduğu HTML belgesinin bir üst klasöründe

Mutlak Dosya Yolları (Absolute File Paths)

Genelde ingilizce ismi ile kullanılan bu yöntem, bir dosyanın tam URL adresini barındırmaktadır.
Absolute Path Örneği :

<img src="https://eminylmz.dev/panel/uploads/settings_v/toggkox4.jpg" alt="logo">

Örnekte gördüğünüz üzere, <img> etiketine logonun tam URL adresi verilmiştir. Bu tür dosya yollarına Absolute File Paths denmektedir.

Göreceli Dosya Yolu (Relative File Paths)

Göreceli bir dosya yolu, geçerli sayfaya göre bir dosyayı gösterir.
Bu örnekte, dosya yolu, geçerli web sitesinni köd dizininde bulunan resimler/ klasöründeki bir dosyayı işaret eder:

<img src="/resimler/logo.jpg" alt="Logo">

Örnekte göreceğiniz üzere, src="" parametresine tam url adresi verilmemiştir. Relative path kullanmanın avantajı ise, yarın öbür gün sitenin url'si değiştiğinde, sitede ki tüm url'leri tek tek değiştirmek ile uğraşmamak içindir.

Bu örnekte, dosya yolu, geçerli klasörde bulunan resimler/ klasöründeki bir dosyayı işaret eder:

<img src="resimler/logo.jpg" alt="logo">

Bu örnekte, dosya yolu, geçerli klasörden bir düzey yukarıda bulunan klasörde bulunan görüntüler klasöründeki bir dosyayı gösterir:

<img src="../resimler/logo.jpg" alt="Logo">

Relative File Path (Göreceli Dosya Yolu) yöntemini kullanmak her zaman daha iyidir. Mümkün oldukça relative path kullanmaya özen gösterin.

Sorular (0)