Dosya Yolları ve Çok Sayfalı Site

Ders 13/45 · 6 dakika · 3 soru · 1 egzersiz

Bu dersin sonunda bir dosyadan başka bir dosyaya giden yolu yazabilecek ve birkaç sayfalı bir site kurabileceksiniz.

İki tür adres

Tam adres: https://ornek.com/sayfa.html. Başka sitelere gitmek için kullanılır.
Göreli yol: sayfa.html. Kendi sitenizdeki dosyalara gitmek için kullanılır. Yol, içinde bulunduğunuz dosyaya göre yazılır.

Örnek klasör yapısı

sitem/
├── index.html
├── hakkimda.html
├── blog/
│   └── yazi.html
└── resimler/
    └── kedi.png

Göreli yol yazmak

Aynı klasördeki dosya. Yalnızca dosyanın adını yazın. index.html içinden:

<a href="hakkimda.html">Hakkımda</a>

Alt klasördeki dosya. Önce klasörün adını, sonra / ve dosyanın adını yazın. index.html içinden:

<a href="blog/yazi.html">Blog yazısı</a>

Üst klasördeki dosya. ../ bir klasör yukarı çıkmak demektir. blog/yazi.html içinden:

<a href="../index.html">Ana sayfa</a>

Başka bir klasördeki dosya. Önce yukarı çıkın, sonra diğer klasöre girin. blog/yazi.html içinden:

<img src="../resimler/kedi.png" alt="Uyuyan bir kedi">

Kök yolu

/ ile başlayan yollar (/resimler/kedi.png) sitenin en üst klasöründen başlar. Bu yollar, dosyaya çift tıklayarak açtığınızda çalışmaz. Yalnızca sunucuda veya Live Server ile çalışır. Başlangıçta göreli yolları kullanın.

Üç sayfalı bir site kurun

sitem adında bir klasör açın.
İçinde index.html, hakkimda.html ve iletisim.html dosyalarını oluşturun.
Her dosyaya sayfa iskeletini yazın ve aşağıdaki menüyü body içine ekleyin.
Her sayfaya farklı bir h1 yazın.
index.html dosyasını açıp bağlantılara tıklayarak sayfalar arasında gezin.

<p>
  <a href="index.html">Ana Sayfa</a>
  <a href="hakkimda.html">Hakkımda</a>
  <a href="iletisim.html">İletişim</a>
</p>

Sık yapılan hatalar

Bilgisayarınızın yolunu yazmak. C:\Users\Ali\Desktop\kedi.png yalnızca sizin bilgisayarınızda çalışır. Siteyi yayınladığınızda resim görünmez.

Ters eğik çizgi kullanmak. Web’de resimler\kedi.png değil, resimler/kedi.png yazılır.

Büyük ve küçük harf. Windows Kedi.png ile kedi.png dosyasını aynı sayar ama çoğu sunucu farklı sayar. Bu yüzden dosya adlarında yalnızca küçük harf kullanın.

Soru 1

Yukarıdaki klasör yapısında index.html içinden kedi.png dosyasının yolu nedir?

resimler/kedi.png :: Doğru.
../resimler/kedi.png :: index.html zaten en üst klasörde, yukarı çıkmaya gerek yok.
kedi.png :: Dosya aynı klasörde değil.

Soru 2

blog/yazi.html içinden hakkimda.html dosyasının yolu nedir?

hakkimda.html :: Bu yol, blog klasörünün içinde arar.
../hakkimda.html :: Doğru. Önce bir klasör yukarı çıkılır.
blog/hakkimda.html :: Dosya blog klasöründe değil.

Soru 3

../ ne anlama gelir?

Sitenin en üst klasörü :: Bu / ile başlayan yollardır.
Bulunduğumuz klasör :: Bu ./ ile gösterilir.
Bir üst klasör :: Doğru.

Menü yazın

Yukarıdaki klasör yapısına göre index.html içinde kullanılacak menüyü yazın. Bağlantılar Ana Sayfa, Hakkımda ve Blog olsun, Blog bağlantısı yazi.html dosyasına gitsin. Önizlemedeki bağlantılara tıklamanız gerekmez, dosyalar bu sitede bulunmuyor.

<p>
  <a href="index.html">Ana Sayfa</a>
  <a href="hakkimda.html">Hakkımda</a>
  <a href="blog/yazi.html">Blog</a>
</p>

Bu derste öğrendikleriniz

Göreli yol, bulunduğunuz dosyaya göre yazılır.
klasor/dosya bir klasör içeri girer, ../ bir klasör yukarı çıkar.
Yollarda / kullanılır ve dosya adları küçük harfle yazılır.

Dersi bitirdin mi?Bu dersi tamamladın.

İlerlemen bu tarayıcıda saklanır.