HTML ile Dosya Yolları ve Dizinleri

HAZIRLAYAN: HAN DEMIR

TANIM:

HTML dosya yolları, bir HTML belgesinde kullanılan kaynak dosyalarına (resimler, stil dosyaları, JavaScript dosyaları vb.) erişmek için
kullanılan yolları ifade eder. HTML'de dosya yolunu belirtmek için src veya href öznitelikleri kullanılır.

DOSYA YOLLARININ ÖNEMİ:

• Kaynak dosyalarının doğru bir şekilde bulunması: Bir HTML sayfası, diğer kaynak dosyalarını (CSS dosyaları, JavaScript dosyaları, resimler vb.) kullanabilir. Bu kaynak dosyaları, doğru bir şekilde belirtilen dosya yolları aracılığıyla bulunur.

• Taşınabilirlik: HTML sayfaları, farklı cihazlarda ve sunucularda çalışabilir. Dosya yolları, sayfaların doğru bir şekilde yüklenmesini sağlar, bu da sayfaların taşınabilirliğini artırır.

• Sayfaların hızlı yüklenmesi: Doğru dosya yolları kullanmak, sayfaların hızlı bir şekilde yüklenmesini sağlar. Yanlış dosya yolları kullanmak, sayfaların yavaş yüklenmesine ve hatta sayfaların yüklenememesine neden olabilir.

• Dosya yönetimi: HTML sayfaları, genellikle birden fazla kaynak dosyasına ihtiyaç duyar. Dosya yolları, kaynak dosyalarının doğru bir şekilde yönetilmesini sağlar.

• Arama motoru optimizasyonu(SEO): Doğru dosya yolları kullanmak, arama motorları tarafından sayfanın daha iyi indekslenmesini ve daha kolay bulunmasını sağlar. Bu nedenle, sayfaların SEO dostu olması için doğru dosya yolları kullanılması önemlidir. Daha fazla SEO hakkında bilgisi için tıklayın.

ABSOLUTE PATH(MUTLAK YOL):

Absolute Path veya Mutlak Yolu, bir dosyanın tam konumunu, kök dizinden başlayarak belirtir. Yani, dosyanın tam yolunu verir ve dosyanın nerede olduğunu açıkça belirtir. Mutlak dosya yolu kullanmak, dosyanın yerini net bir şekilde belirttiği için daha güvenlidir, ancak bazen taşınabilirlik açısından dezavantajlı olabilir, özellikle farklı işletim sistemleri arasında taşındığında.

ÖRNEK:

<img src="C:\Users\kullanici\images\resim.png" alt="Resim"> <!--Windows--> 

<img src="/home/kullanici/images/resim.png" alt="Resim"> <!--Unix/Linux-->

<img src="https://www.w3schools.com/images/resim.png" alt="Resim">

RELATIVE PATH(GÖRECELİ YOL):

Relative Path veya Göreceli Yol, dosyanın konumunu, HTML belgesinin bulunduğu klasöre göre belirler. Göreceli dosya yolu, mutlak dosya yolu kullanımına göre daha esnek bir yaklaşımdır.

"../" sembolü, bir üst klasöre gitmek için kullanılır. Örneğin, bir HTML belgesi ile aynı klasörde "images" adında bir klasörümüz varsa ve bu klasörün içinde "resim.jpg" adında bir dosya varsa, bu dosyaya erişmek için aşağıdaki kodu kullanabiliriz.

ÖRNEK:

<img src="../images/resim.jpg" alt="Resim">

"./" sembolü, mevcut klasörde kalabilmek için kullanılır. Örneğin, bir HTML belgesi ile aynı klasörde "style.css" adında bir dosyamız varsa, bu dosyaya erişmek için aşağıdaki kodu kullanabiliriz

ÖRNEK:

<link rel="stylesheet" href="./style.css">

ABSOLUTE PATH vs RELATIVE PATH

ABSOLUTE PATH(MUTLAK YOL):

•     Konumu, dosyanın diskteki tam konumu olarak belirler.

•     Dosyanın kesin konumunu belirlediği için, dosya konumları değişse bile aynı kalır.

•     HTML belgesi ve kaynak dosyalarının farklı klasörlerde olduğu durumlarda kullanılabilir.

•     Kodun okunabilirliğini azaltabilir, çünkü daha fazla karakter içerir.

RELATIVE PATH(GÖRECELİ YOL):

•     Konumu, HTML belgesinin bulunduğu klasöre göre belirler.

•     Daha esnek bir yaklaşım sunar.

•     Dosya konumlarının değişmesi durumunda, yolun değiştirilmesi yeterlidir.

•     HTML belgesi ve kaynak dosyalarının aynı klasörde olduğu durumlarda kullanılabilir.

•     Daha az karakter içerdiğinden, kodun okunabilirliğini artırabilir.

Özetle, göreceli yollar dosya konumlarının değişmesi durumunda daha esnek bir yaklaşım sunarken, mutlak yollar dosyanın tam konumunu
belirlediği için daha sabit bir yapıya sahiptir. 

GENEL SORUNLAR ve CEVAPLARI

"Sayfada resimler gözükmüyor/yüklenmiyor" Sorunu

• Yanlış dosya yolu: Dosya yolunun yanlış yazılması, dosya yollarının büyük/küçük harf duyarlı olduğunu unutmayın. Ayrıca, dosya yolu başlangıcında veya sonunda boşluk olmamasına dikkat edilmelidir. 

• Yanlış dosya türü: HTML, belirtilen dosya yoluna erişebilse bile, dosya türünün HTML için uygun olmadığını veya web sayfasında kullanılmak için uygun olmadığını belirleyebilir. Örneğin JPEG yerine pdf kullanırsanız sorunla karşılaşırsınız.

• Erişim izinleri: Web sunucusu, belirtilen dosya yoluna erişim izni vermeyebilir.

• Farklı platformlar: Dosya yolları, farklı işletim sistemleri ve sunucular arasında farklı olabilir. Bu nedenle, web sitesi tasarlarken, farklı platformlarda çalışabilen, taşınabilir dosya yolu yapıları kullanılmalıdır. Örneğin, Unix/Linux sistemlerinde dosya yolları, ters eğik çizgi "/" ile ayrılırken, Windows sistemlerinde ters eğik çizgi "\" kullanılır.

"Dosya yolu doğru ama resim gözükmüyor/yüklenmiyor" Sorunu

• Resmin bozuk veya eksik olması: Resim dosyası bozuk veya eksik olabilir. Bu durumda, resmi açıp kontrol edin ve varsa bozuk parçaları onarın veya eksik parçaları tamamlayın.

• Tarayıcı uyumluluğu: Bazı tarayıcılar bazı resim formatlarını desteklemeyebilir. Doğru formatta kaydedildiğinden emin olun. 

• Cache sorunu: Tarayıcı, sayfaları ve resimleri önbelleğe alır ve daha hızlı yüklemek için kullanır. Ancak, zaman zaman, önbellekteki bilgiler eski kalabilir ve sayfa veya resim yüklenmeyebilir. Tarayıcının önbellek dosyalarını temizlemesi çözüm olabilir.

• Resmin bozuk veya eksik olması: Resim dosyası bozuk veya eksik olabilir. Bu durumda, resmi açıp kontrol edin ve varsa bozuk parçaları onarın veya eksik parçaları tamamlayın. 

"Dosya yolu doğru ama CSS dosyası çalışmıyor" Sorunu

• Yanlış MIME tipi: MIME (Multimedia Internet Mail Extensions), bir dosyanın türünü belirlemek için kullanılan bir protokoldür. Yanlış MIME tipi, tarayıcının CSS dosyasını doğru bir şekilde yükleyememesine neden olabilir. Bu nedenle, CSS dosyasının doğru MIME tipi ile sunulduğundan emin olunmalıdır. 

• Ad Blocker veya diğer eklentiler: Ad Blocker veya bazı diğer eklentiler, CSS dosyalarını bloke edebilir. Bu durumda, eklentilerin devre dışı bırakılması veya tarayıcı ayarlarının kontrol edilmesi gerekebilir.

• Sunucu sorunları: Bazı durumlarda, sunucu sorunları CSS dosyasının yüklenememesine neden olabilir. Bu durumda, sunucu yöneticisi ile iletişime geçmek veya sunucu sorunlarını kontrol etmek gerekebilir.

"Dosya yolu doğru ama JavaScript dosyası çalışmıyor" Sorunu

• Yanlış MIME tipi: MIME (Multimedia Internet Mail Extensions), bir dosyanın türünü belirlemek için kullanılan bir protokoldür. Yanlış MIME tipi, tarayıcının JavaScript dosyasını doğru bir şekilde yükleyememesine neden olabilir. Bu nedenle, JavaScript dosyasının doğru MIME tipi ile sunulduğundan emin olunmalıdır. 

• Ad Blocker veya diğer eklentiler: Ad Blocker veya bazı diğer eklentiler, JavaScript dosyalarını bloke edebilir. Bu durumda, eklentilerin devre dışı bırakılması veya tarayıcı ayarlarının kontrol edilmesi gerekebilir. 

• Sunucu sorunları: Bazı durumlarda, sunucu sorunları JavaScript dosyasının yüklenememesine neden olabilir. Bu durumda, sunucu yöneticisi ile iletişime geçmek veya sunucu sorunlarını kontrol etmek gerekebilir. 

• Güvenlik duvarları veya anti-virüs yazılımları: Bazı güvenlik duvarları veya anti-virüs yazılımları JavaScript dosyalarını bloke edebilir. Bu durumda, güvenlik duvarı veya anti-virüs yazılımı ayarlarının kontrol edilmesi gerekebilir.