Anasayfa
Forum
Hakkında
Ders 7: Dosya ve Klasör Düzeni
Ders 7: Dosya ve Klasör Düzeni
Neden?Dosya düzeni büyüyen projelerde hataları azaltır ve çalışmayı kolaylaştırır.
Ne öğreneceğiz?
Bu derste Klasör yapısını ve göreli dosya yollarını öğreneceğiz.
Nasıl ilerleyeceğiz?
Önce kavramın amacını düşün. Ardından aşağıdaki örneği kendin yaz. Kodu kaydet, tarayıcıda aç ve küçük bir değişiklik yaparak sonucu gözlemle.
Öğrenme kuralı: Kodu yalnızca kopyalama. Her satır için “Bu satır neden burada?” ve “Bu satırı silersem ne değişir?” sorularını sor.
Derse başlamadan önce kendini yokla
- Bu konuyu gerçek bir web sayfasında hangi ihtiyacı çözmek için kullanırım?
- Örnekteki hangi HTML elementi içeriğin anlamını taşıyor?
- Uygulamayı kendi fikrimle nasıl değiştirebilirim?
Ders sonunda kontrol
- Kodu kendim, bakmadan tekrar yazabildim mi?
- Tarayıcıda sonucu test ettim mi?
- Karşılaştığım bir hatayı neden oluştuğunu açıklayarak düzelttim mi?
Ders hedefi
Bir HTML projesini düzenli klasör yapısıyla oluşturabilecek ve göreli dosya yollarını kullanabileceksiniz.
Küçük bir projenin klasör yapısı şöyle olabilir:
Kod:
html-projesi/
├── index.html
├── hakkimda.html
├── iletisim.html
├── images/
│ ├── logo.png
│ └── profil.jpg
├── css/
│ └── style.css
└── js/
└── script.jsindex.html dosyası kök klasördeyse görsel yolu şu şekilde yazılır:
PHP Kod:
<img src="images/logo.png" alt="Site logosu">
images klasörünün içindeki bir HTML dosyasından kök klasöre çıkmak için `..` kullanılır:
PHP Kod:
<img src="../images/logo.png" alt="Site logosu">
Dosya ve klasör adlarında boşluk, Türkçe karakter ve gereksiz büyük harf kullanmamak iyi bir alışkanlıktır. hakkimda.html gibi küçük harfli ve açıklayıcı adlar tercih etmeliyiz.
Bir sayfanın ana adresini belirtmek için mutlak URL kullanılabilir. Kendi projeniz içindeki dosyalar için göreli yollar daha taşınabilirdir:
PHP Kod:
<a href="hakkimda.html">Hakkımda</a>
<a href="https://example.com/hakkimda.html">Harici sayfa</a>
