Sayfa içeriği
Yol kavramı
"Path" kelimesi, belirli bir dosyanın bulunduğu konum anlamına gelir.
Sayfaya resim, video, şarkı, program, zip dosyası veya başka bir dosya için bağlantı eklerken, içindeki yol doğru ve hatasız olarak belirtilmelidir çünkü bir harfte hata varsa çalışmayacak.
Genel olarak, dosya yollarının genel konsepti, konumuna bağlı olarak dosyanın yolunu belirtmektir.
Mesela, ens adında bir dosyam var ve onu bir koda eklemek için dosya yoluyu çıkartması gerekir. Bu dosya D diskinde ve k-kudo adlı bir klasörde bulunduğunu diyelim, tarayıcıya ens dosyasını bulması için D diskine ve ardından k-kudo klasörüne girdikten sonra dosyayı bulacaktır.
Genel olarak, dosyanın konumunu belirlerken kullanabileceğin iki yöntem vardır ve bunlar:
- Relative Path veya göreli yol, dosya yolunun, dosyanın ekleneceği sayfanın konumuna göre yerleştirildiği anlamına gelir.
- Absolute Path veya Tam yol, dosya yolunun bilgisayar için olduğu gibi ayarlandığı anlamına gelir.
bilgi: Bu derste öğreneceğin şey her tür dosya için geçerlidir, bu nedenle yolun nasıl belirleneceğini bilmek gelecekte, özellikle .css dosyaları ve .js dosyaları eklemeye çok yardımcı olur ve, bu dersteki ilgiler biraz zor olabilir ama bu ders HTML dilinde çok önemli derslerden biri olduğu için senden dersi anlamaya çalışmanı istiyorum.
Göreli yolları ayarlamanın kapsamlı örnekleri
Aşağıdaki örneklerde sayfaya bir resim eklemek istediğimizi varsayacağım, ve her seferinde göreli yol stilinde nasıl her zaman bulabileceğini öğrenmek için her resmin yolu sayfa göre farklı bir yol aldığı varsayacağım.
Bir resmi görüntülemek için <img src=" "> etiketini ve src özelliğinin değeri olarak resim yolunu kullanıyoruz.
Bir sonraki derste, resimlere veya fotoğrafları eklenebilecek tüm özellikleri öğreneceksin, ancak şimdilik yalnızca yolları belirleme yöntemine odaklanmanı istiyorum.
İlk örnek
Aşağıdaki örnekte, aşağıdaki gibi göstereceğimiz sayfanın yanında yer alan logo.PNG adlı sayfada bir görüntüyü göstermek istediğimizi varsayacağız.
VSCode'da dosyalar, görüntü yolunu belirlerken Relative Path kullandığımızı gösterecek şekilde şöyle görünecektir.
Örneği indir
İkinci örnek
Daha önce olduğu gibi aynı yolu başına ./ ekleyerek ./logo.png haline getirebilirsin, böylece tarayıcı görüntünün aynı yerde olduğunu bilecektir.
Yani ./ koysan da koymasan da bu herhangi bir fark yaratmaz ve bu yöntem de Relative Path olarak kabul edilir.
VSCode'da dosyalar böyle görünecektir.
Örneği indir
Üçüncü örnek
Aşağıdaki örnekte, aşağıdaki gibi görüntünün images adı verilen bir klasörün içinde olduğunu varsayacağız.
VSCode'da, görüntü yolunu belirtirken Relative Path yöntemini kullandım olduğunu dikkat ederek dosyalar aşağıdaki gibi görünecektir.
Örneği indir
Dördüncü örnek
Aşağıdaki örnekte, sayfanın pages adlı bir klasör içinde olduğunu ve bu klasörün yanında göstereceği görselin aşağıdaki gibi olduğunu varsayacağım.
VSCode'da dosyalar, görüntü yolunu belirlerken Göreli Yolu yöntemi göre gösterecek şekilde şöyle görünecektir.
Not: Yolun başına ../ yerleştirmek çok önemlidir çünkü tarayıcıya görüntüyü bulmak için bir adım geri gitmesi gerektiğini bildirir.
Örneği indir
Beşinci örnek
Aşağıdaki örnekte, sayfanın pages adlı bir klasör içinde olduğunu ve onu görüntüleyeceği görüntünün aşağıdaki gibi images adlı bir klasörde olduğunu varsayacağız.
VSCode'da Dosyalar, görüntü yolunu belirtirken Relative Path yöntemini göre gösterecek şekil aşağıdali gibi şekilde görünecektir.
Yani sayfadan görsele ulaşmak için bir adım geriye gitmemiz gerekiyor, bu yüzden yolun başına ../ koyuyoruz, ardından aynen yaptığımız gibi images klasörüne girmeliyiz.
Örneği indir
Tam yolları belirlemenin kapsamlı örnekleri
Tam yol koymak, bilgisayara veya dosyanın bulunduğu konuma giden tüm yolu koymak anlamına gelir.
İlk örnek
Aşağıdaki örnekte, Absolute Path yöntemini kullanarak üzerinde çalıştığımız bilgisayarda D://k-kudo/html/images/ yolunda bulunan logo.png adlı sayfada bir resim görüntülemek istediğimizi varsayacağız.
- <img src="D://k-kudo/html/images/logo.png">
Burada tarayıcıya diyoruz ki, logo.png dosyayı bulmak için D diskine gir, ardından k-kudo klasörüne gir ve ardından images klasörüne gir ondan sonra logo.png bulacaksın.
İkinci örnek
Aşağıdaki örnekte, Absolute Path yöntemini kullanarak https://src.k-html.com/html.jpg adresindeki html.jpg adlı sayfada aşağıdaki gibi bir resim görüntülemek istediğimizi varsayacağız.
- <img src="https://src.k-html.com/html.jpg">
Aynı yolu tamamen ve göreceli olarak eklemek
Dosyaların bilgisayarında veya web sitende tam olarak nerede olduğunu bildiğin sürece yolu her zaman istediğin gibi ayarlayabilirsin.
Aşağıdaki örnekte, ilk kez tüm yolunu belirlediğimde ve ikinci kez web düzenleyicisine giden yolu görüntüleyerek sitemizde bir resmi iki kez görüntüledim.
- <!-- Burada sitemizdeki tam görüntü yolunu belirledim-->
- <img src="https://code.k-html.com/kodlar/html.png">
- <!-- Burada editör için ilgili resim yolunu sitemize yerleştirdim.-->
- <img src="../kodlar/html.png">
Tam yolu mu yoksa göreli yolu mu kullanmalıyım?
Mümkün olduğu sürece dosya yollarını göreli yol olarak belirtmeni senin için her zaman daha iyidir çünkü bunun çeşitli faydaları vardır, örneğin bilgisayarda yaptığın tasarımını çevrimiçi olduğu gibi yükleyebilir veya bilgisayarındaki konumunu değiştirebilirsin.
bilgisayar ve sayfalarda kullanılan dosya yollarında herhangi bir değişiklik yapmaya gerek kalmadan çalışacaktır.
Sayfada göreli yollar ayarlarken, seni indirme bağlantıları verdiğim önceki örneklerde yaptığım gibi, bunlarla ilişkili tüm dosya ve klasörleri taşımanı gerektiğini asla unutma.
Bu dersin biraz karmaşık olduğunu biliyorum ama senden anlayana kadar tekrar etmeye çalışmanı istiyorum.