🚀 HTML Dosya Yolları: Proje Mimarisi ve Varlık Yönetimi

Göreceli ve mutlak yolların mantığı, dizinler arası geçiş ve projelerde kırık linkleri önleme stratejileri.

Selamlar, bugün projelerimizde resimlerin neden görünmediğini veya stil dosyalarının neden yüklenmediğini anlamanın anahtarı olan 'Dosya Yolları' (File Paths) konusuna bakacağız. Bir developer için dosya yollarını yönetmek, bir haritayı okumak gibidir.

1. Mutlak Yollar (Absolute Paths)

Bir dosyanın tam adresidir. Genellikle internetteki bir kaynağa veya sunucunun kök dizinine işaret eder.

  • Örnek: https://ovidgame.com/assets/logo.png veya /assets/style.css (kök dizinden başlar).
  • Dezavantaj: Projenizi başka bir klasöre veya domain'e taşıdığınızda bu bağlantılar kolayca kopabilir.

2. Göreceli Yollar (Relative Paths)

Dosyanın, o an üzerinde çalıştığınız HTML dosyasına göre nerede olduğunu belirtir. Modern web geliştirmede en güvenli ve esnek yöntem budur.

  • ./file.png: Aynı klasördeki dosya.
  • assets/img.png: Bulunduğun klasörün içindeki 'assets' klasörüne gir.
  • ../style.css: Bir üst klasöre çık ve oradaki dosyayı bul.

Ovid Notu: Tamamen JS ile kurguladığımız OvidEscaper projesinde yüzlerce sprite sheet (oyun grafiği) ve ses dosyası kullanıyoruz. Eğer mutlak yollar kullansaydık, projeyi yerelden sunucuya taşıdığımızda her şeyi baştan düzenlememiz gerekirdi. Göreceli yollar sayesinde projemiz her ortamda 'tak-çalıştır' mantığıyla kusursuz işliyor.

🚀 Sanal Kodlama Alanı Yükleniyor...

Hiyerarşiyi Okumak İçin İpuçları

  1. Dizin Derinliği: Eğer dosyanız bir alt klasördeyse (örn: images/logo.png), HTML'den klasör ismini yazarak girersiniz. Eğer HTML dosyanız bir klasörün içindeyse ve ana dizindeki bir dosyaya ulaşmak istiyorsa ../ ile dışarı çıkmalıdır.
  2. Slash (/) Kullanımı: Yolun başına koyulan / işareti (örn: /style.css), tarayıcıya "en üst kök dizine git ve oradan aramaya başla" der. Bu, web sunucularında çalışırken çok kullanışlıdır ama yerel bilgisayarınızda (localhost dışında) dosyayı açtığınızda hata verebilir.
  3. Hata Ayıklama: Eğer bir resim yüklenmiyorsa, tarayıcıda sağ tıklayıp 'İncele' (Inspect) diyerek Konsol (Console) sekmesine bakın. Orada 404 Not Found hatasını ve tarayıcının dosyayı tam olarak nerede aradığını göreceksiniz.

Temiz bir dosya yapısı, projenizin ölçeklenebilirliği için her şeyden daha önemlidir. Bir sonraki adımda bu yapıları nasıl otomatize edeceğimizi göreceğiz.

Ovid Game Studio | Teknik Notlar ovidgame.com