Merhaba değerli Kodlama Vakti okuyucuları , geçen dersimizde Javascript Kullanımı adlı yazımızda HTML’de Javascript kullanımını öğrenmiştik. Önceki dersimizi incelemediyseniz HTML Dersleri 14 – Javascript Kullanımı linkine tıklayarak ulaşabilirsiniz. Bu dersimizde HTML'de Dosya Yolları konusuna gözatıp, HTML sayfalarımıza resim , video , müzik vb. dosyaları nasıl dahil edeceğimizi öğreneceğiz.
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. Peki bu dosya yollarını nerede kullanıyoruz ?
İmg 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ı web siteleri ,resimler ,javascript dosyaları ,css dosyaları gibi harici dosyalara bağlanırken kullanılır:
| Yol | Açıklama |
|---|---|
| < img src="logo.jpg" /> | logo.jpg geçerli sayfayla aynı klasörde bulunur |
| < img src="resimler/logo.jpg" /> | logo.jpg geçerli klasördeki resimler klasöründe bulunur |
| < img src="/resimler/logo.jpg" /> | logo.jpg, geçerli web'in kökündeki resimler klasöründe bulunur |
| < img src="../logo.jpg" /> | logo.jpg, geçerli klasörden bir seviye yukarı olan klasörde bulunur |
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://kodlamavakti.com/img/logo.png" 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öreli bir dosya yolu, geçerli sayfaya göre bir dosyayı gösterir.
Bu örnekte, dosya yolu, geçerli web'in kökünde 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'i 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 resimle 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.
Tebrikler! Bu derste HTML’de Dosya Yolu Kullanımını, Relative Path kavramını ,Absolute Path kavramını HTML'de Dosya Yollarını belirtmeyi öğrendik.Kodlama Vakti ile kodlama hiç bu kadar kolay olmamıştı.
HTML Derslerinin onbeşinci kısmı olan dersimizde , HTML’de Dosya Yolu Kullanımı konusunu öğrendik. Ders sonunda ki testimize katılarak öğrendiklerinizi pekiştirebilirsiniz. Derslerimiz hoşunuza gittiyse eğer paylaş butonlarından sevdiklerinizle paylaşabilirsiniz !