HTML Dersleri 15 – Dosya Yolları (File Paths)


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

Absolute File Paths (Mutlak Dosya Yolu)

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.

Relative File Paths (Göreceli Dosya Yolu)

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 !

 

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim HTML Dersleri
Kategori Web Programlama
Ders Adeti 19 Ders
Dil Türkçe
Güncelleme 12/2020
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 41 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla