HTML Dosya Yolları

Başlıklar, paragraflar ve yorumlarla sayfa yazabiliyorsunuz. Gerçek siteler nadiren tek bir dosyada yaşar. Görseller, diğer sayfalar, stil sayfaları ve betikler HTML’in yanındaki klasörlerde durur — ve HTML’in onlara doğru işaret etmesi gerekir. Bu işaretler dosya yollarıdır. Yol yanlışsa dosya diskte varken tarayıcı yine de kırık bir görsel veya ölü bir bağlantı gösterebilir. Yolları kavramak erken HTML’in en pratik becerilerinden biridir: onlar olmadan “doğru” görünen işaretleme nedensiz çalışmıyor gibi durur.

Dosya yolu nedir?

Dosya yolu, tarayıcının başka bir dosyayı istemek için kullandığı adrestir. Genellikle src (görseller, betikler, medya) ve href (bağlantılar, stil sayfaları ve birçok ilgili kaynak) gibi özniteliklerde yazılır. Yol süs değildir. Bir yönergedir: “buraya bak.” Yönerge yanlışsa, işaretleme etiketleri kusursuz görünse bile istek başarısız olur. Yolu bir harita gibi düşünün: tarayıcıya hangi klasörlerden geçeceğini ve rotanın sonunda hangi dosya adını açacağını söyler.

Doğrudan yanıt

Hedef dosya proje klasörleriyle birlikte taşındığında göreli yol kullanın — örneğin aynı üst klasördeki bir sayfadan images/logo.png, veya bir klasör daha derin bir sayfadan ../images/logo.png. Site barındırıldığında ve her sayfa site kökünden aynı kararlı yolu paylaşmalıysa / ile başlayan kök-mutlak yol uygundur. Dosya başka bir sunucuda veya CDN’de olduğunda tam URL (https://…) kullanın. Yeni başlayanlar önce göreli yolları ustalaştırsın; çünkü yerel alıştırma klasörleri bunlara bağlıdır. Klasör ağacı netleştikten sonra kök ve URL kafa karıştırıcı kısayollar değil, bilinçli tercihler olur.

Göreli ile mutlak bir bakışta

Küçük bir proje haritası

project adlı bir klasör hayal edin. İçinde şunlar var:

• index.html (ana sayfa)
• about.html (ana sayfayla aynı klasör)
• içinde logo.png olan bir images klasörü
• içinde contact.html olan bir pages klasörü
  Önemli alışkanlık şudur: src veya href yazmadan önce her zaman hangi HTML dosyasını düzenlediğinizi sorun. Aynı görsel, farklı sayfalardan farklı göreli yollar ister. Önce index.html’i, sonra contact.html’i düzenleyip başlangıç noktasını yeniden düşünmezseniz, başka yerde çalışan bir yolu kopyalayıp görseli kolayca kırarsınız. Her zaman ağaçtaki geçerli dosyanın konumundan hareket edin.

Proje klasöründen göreli yollar

index.html veya about.html dosyalarından images ve pages alt klasörlerdir. Onlara ulaşmak için ../ gerekmez. Tarayıcı geçerli HTML’in klasöründen başlar ve yazdığınız adlara segment segment girer.

Bu değerler neden çalışır

• images/logo.png demektir: “bu HTML dosyasının yanındaki images klasörüne gir, sonra logo.png’yi aç”
• pages/contact.html demektir: “pages’e gir, sonra contact.html’i aç”
• about.html demektir: “geçerli sayfayla aynı klasördeki başka bir dosya”
• alt metni bir yol değildir; görsel gösterilemediğinde kullanılan erişilebilir metindir
  Logo tarayıcıda yoksa yazımı, gerçek klasör adını ve HTML’i düşündüğünüz klasöre kaydedip kaydetmediğinizi kontrol edin. Fazladan bir boşluk, farklı büyük/küçük harf veya gerçek projenin yanındaki bir “kopya” klasöre kaydedilmiş dosya sık görülen nedenlerdir. Görsel dosyasının uzantısının öznitelikte yazdığınızla birebir uyduğunu da doğrulayın.

Alt klasörden göreli yollar

contact.html, pages/ içinde yaşar. Oradan images/, pages/’in çocuğu değildir. project/ altında pages/’in yanında durur. ../ ile bir seviye çıkıp sonra images/’e girmeniz gerekir. Bu çıkış adımı olmadan tarayıcı pages içinde bir images klasörü arar; bu haritada o klasör yoktur.

../ nasıl okunur

• ../ demektir: “üst klasöre çık”
• ../images/logo.png demektir: “project/’e çık, sonra images/logo.png’ye gir”
• ../index.html demektir: “project/’e çık, sonra index.html’i aç”
• contact.html’den images/logo.png yazmak pages/images/logo.png arar; bu haritada yoktur
  Tek bir hata — alt klasörden ../ unutmak — yeni başlayan projelerindeki “kırık görsel” raporlarının büyük kısmını oluşturur. İki seviye çıkmak için ../../ yazabilirsiniz, ama yalnızca klasör ağacı gerçekten bunu gerektiriyorsa. Her ekstra ../ hedefi değiştirir; gereğinden fazla ../ de yolu bozar.

Kök-mutlak yollar ve tam URL’ler

Kök-mutlak yol / ile başlar ve gerçek bir web sunucusunda site kökünden çözülür; geçerli klasörden değil. Tam URL protokolü ve alan adını içerir. Tam URL’ler üçüncü taraf dosyalar için yaygındır. Kök-mutlak yollar, barındırılan sitelerde birçok sayfanın her sayfanın klasör derinliğinden bağımsız olarak kararlı bir yolu paylaşması gerektiğinde yararlıdır.

Yerel dosyalar ile barındırılan kökler

HTML’i doğrudan diskten açtığınızda (file://…) çoğu zaman gerçek bir web sitesi kökü yoktur. /images/logo.png gibi bir yol, sunucuda olacağı gibi bilgisayarınızdaki klasörle eşleşmeyebilir. Yeni başlayanların yerel alıştırması için gerçek klasörlerinize uyan göreli yolları tercih edin. Site barındırıldıktan sonra kök-mutlak yollar sayfalar arasında daha güvenilir olur. Özetle: diskteki alıştırma klasörleri için göreli; barındırma modeli bunu gerektiriyorsa kök veya URL.

Alıştırma: klasör haritasından yollar

shop klasörü şunları içerir:

• home.html
• içinde hero.jpg olan bir assets klasörü
• içinde faq.html olan bir help klasörü
  Düzenleyicide şunları yapın:

1. home.html içinde hero.jpg’yi göreli yolla yükleyen bir img ekleyin.
2. help/faq.html içinde aynı dosyayı ../ kullanarak yükleyen bir img ekleyin.
3. faq.html’den home.html’e göreli bir bağlantı ekleyin.
4. Her iki sayfayı tarayıcıda açıp görselin ve bağlantının çalıştığını doğrulayın.
5. Bilerek bir yolu bozun, yenileyin, hatayı görün, sonra düzeltin — bu geri bildirim yalnız okumaktan daha hızlı gözünüzü eğitir.
   Bu harita için beklenen göreli yanıtlar: home.html’den assets/hero.jpg; faq.html’den ../assets/hero.jpg ve ../home.html. Görsel bir sayfada görünüp diğerinde yoksa sorun neredeyse kesin olarak göreli başlangıç noktasıdır, hero.jpg dosyasının kendisi değil.

Sayfaları bozan yol hataları

• Doğru yol ../images/logo.png gerektirirken alt klasörden images/logo.png yazmak
• Dosya veya klasör adını yanlış yazmak ya da Logo.PNG ile logo.png’yi farklı dosya sayan sunucularda büyük/küçük harfi karıştırmak
• Web yollarında Windows \ kullanmak — HTML özniteliklerinde / tercih edin
• Normal bir web sayfasında src veya href içine C:\site\img.png gibi disk yolu koymak
• Yalnızca yerel dosya olarak açılan bir projeye /images/... kök yolunu kopyalayıp barındırılan site gibi davranmasını beklemek
• Dosya aslında pages/contact.html’deyken contact.html’e bağlanmak
• Explorer/Finder’da klasörleri taşıyıp eski düzene işaret eden tüm yolları güncellemeyi unutmak
  Bu hataların her biri aynı dış belirtiyi üretir: istek başarısız olur. Düzeltme her zaman düzenlediğiniz HTML dosyasını bulup yolu o klasörden yeniden saymakla başlar.

Özet

• Dosya yolları, tarayıcıya src, href ve benzer öznitelikler için bağlı dosyaların nerede olduğunu söyler
• Göreli yollar geçerli HTML dosyasının klasöründen çözülür
• ../ göreli yolda bir klasör yukarı çıkar; hedef geçerli dosyanın üstündeyse kullanın
• Kök-mutlak yollar / ile başlar; tam URL’ler protokol ve alan adını içerir
• Yol stilini düzeninizle eşleştirin: yerel proje alıştırması için göreli, barındırma modeli gerektiğinde kök/URL
• Kırık yollar, görsellerin ve bağlantıların “gizemli” şekilde bozulmasının en yaygın nedenlerinden biridir
• Yolu her zaman düzenlediğiniz dosyadan karar verin; başka bir sayfanın belleğinden değil