HTML'de Dosya Yolları
Bu konu aslında önemsiz gibi gözüksede HTML derslerine yeni başlamış kişiler genelde resim falan göstermek istediklerinde şöyle bir yol veriyorlar;
<img src="C:\Users\test\Desktop\a.png">Bu mantıkta sunucuya attıklarında çalışacaklarını düşünüyorlar ancak yanılıyorlar. Dosya yollarını verirken şu şekilde verebiliriz;
| Dosya Yolu | Açıklaması |
|---|---|
<img src="resim.jpg">
|
Mevcut klasör ile aynı yerde bulunan resim.jpg dosyasını çağırır.
|
<img src="img/resim.jpg">
|
Mevcut klasörün altında bulunan img klasörü içerisindeki resim.jpg dosyasını çağırır.
|
<img src="/img/resim.jpg">
|
Ana klasörün altındaki img klasörü içerisindeki resim.jpg dosyasını çağırır. Bir üsttekinden farkı eğer başına / geliyorsa bu ana dizini temsil ediyordur. Örneğin bu sitenin ana dizini https://prototurk.com'dur yani /img/test.jpg dersem aslında şu demek oluyor https://prototurk.com/img/test.jpg
|
<img src="../resim.jpg">
|
Mevcut klasörün bir üst klasöründe bulunan resim.jpg dosyasını çağırır.
|
<img src="https://prototurk.com/resim.jpg">
|
Bu ise verilecek en net yoldur ancak gereksiz uzundur bunun aslında birebir aynısı /resim.jpg buna eşittir.
|
HTML'de dosya yollarını genelde şunlar için belirleme ihtiyacı duyuyoruz;
- HTML sayfaları
- Görseller
- CSS Dosyaları
- JavaScript Dosyaları
- vb.
HTML'de Varsayılan Yolu Belirlemek
HTML'de varsayılan yolu belirlemek için <base> etiketi kullanılır. Ve kodlarımızda <head> etiketi içerisine yazılır. Örnek vermek gerekirse;
<head>
..
<base href="https://prototurk.com">
..
</head>
Bunu yaptıktan sonra artık ben <img src="upload/img/resim.jpg"> şeklinde kullanırsam aslında şu şekilde yorumlanacak bu; <img src="https://prototurk.com/upload/img/resim.jpg">
Yani kesinlik vermek adına bu etiketi sayfalarımızda kullanabiliriz. Şu an kendi bilgisayarınızda çalışıyor olabilirsiniz ancak ilerleyen süreçte kendinize bir hosting ya da sunucu almanız gerekecek ki yaptığınız web sayfalarını yayınlayabilin. İşte o gibi durumlarda bu etiket işinize yarayacaktır. Şu an bu sitenin kaynak kodlarına bakarsanız aynı kodu görürsünüz. Kaynağı görüntülemek için Windows'ta CTRL + U, macOs'ta command + option + u kombinasyonunu kullanabilirsiniz.
