Dosyalarla ilgilenme

Bir web sitesi birçok dosyadan oluşur: metin içeriği, kod, stil tabloları, medya içeriği vb. Bir web sitesi oluştururken, bu dosyaları yerel bilgisayarınızda mantıklı bir yapıya monte etmeniz, birbirleriyle konuşabildiğinden emin olmanız ve sonunda bir sunucuya yüklemeden önce tüm içeriğinizin doğru görünmesini sağlamanız gerekir. Dosyalarla ilgilenmek, web siteniz için mantıklı bir dosya yapısı kurabilmeniz için dikkat edilmesi gereken bazı sorunları ele alır.

Web siteniz bilgisayarınızda nerede yaşamalı?

Bilgisayarınızda yerel olarak bir web sitesi üzerinde çalışırken, ilgili tüm dosyaları, yayımlanan web sitesinin sunucudaki dosya yapısını yansıtan tek bir klasörde tutmalısınız. Bu klasör istediğiniz yerde yaşayabilir, masaüstünüzde, Giriş klasörünüzde veya sabit sürücünüzün herhangi bir yerinde. Sadece kolayca bulabileceğiniz bir yerde olmasına özen gösterin.

1. Web sitesi projelerinizi depolamak için bir yer seçin. Seçtiğiniz yerin içinde web-projects (veya benzeri) adlı yeni bir klasör oluşturun. Burası tüm web sitesi projelerinizin yaşayacağı yerdir.
2. Bu ilk klasörün içinde, ilk web sitenizi depolamak için başka bir klasör oluşturun. Buna test-site (veya daha yaratıcı bir şey) deyin.

İsimlendirme ve boşluklar

Bu makale boyunca, klasörleri ve dosyaları boşluksuz olarak tamamen küçük harfle adlandırmanızı istediğimizi fark edeceksiniz. Bunun nedeni:

1. Birçok bilgisayar, özellikle web sunucuları büyük/küçük harf duyarlıdır. Örneğin, web sitenize bir resim koyarsanız (test-site/MyImage.jpg) ve sonra farklı bir dosyada görüntüyü test-site/myimage.jpg olarak çağırmaya çalışırsanız, çalışmayabilir.
2. Tarayıcılar, web sunucuları ve programlama dilleri boşlukları tutarlı bir şekilde işlemez. Örneğin, dosya adınızdaki boşlukları kullanırsanız, bazı sistemler dosya adını iki dosya adı olarak değerlendirebilir. Bazı sunucular dosya adlarınızdaki alanları “%20” (URI’lardaki boşlukların karakter kodu) ile değiştirir ve tüm bağlantılarınızın bozulmasına neden olur. Alt çizgiler yerine sözcükleri tirelerle ayırmak daha iyidir: my-file.html vs. my_file.html

Kısa yanıt, dosya adlarınız için kısa çizgi kullanmanız gerektiğidir. Google arama motoru kısa çizgiyi bir sözcük ayırıcı olarak değerlendirir, ancak bir alt çizgiyi bu şekilde kabul etmez. Bu nedenlerden dolayı, en azından ne yaptığınızı öğrenene kadar klasörünüzü ve dosya adlarınızı boşluksuz ve tirelerle ayrılmış sözcüklerle küçük harfle yazma alışkanlığına girmek en iyisidir. Bu şekilde ilerleyen zamanlarda daha az sorunla karşılaşırsınız.

Web siteniz hangi yapıya sahip olmalıdır?

Ardından, test sitemizin hangi yapıya sahip olması gerektiğine bakalım. Oluşturduğumuz herhangi bir web sitesi projesinde sahip olacağımız en yaygın şeyler, görüntüleri, stil dosyalarını ve komut dosyalarını içeren bir dizin HTML dosyası ve klasörleridir. Bunları şimdi oluşturalım:

1. index.html: Bu dosya genellikle ana sayfa içeriğinizi, yani insanların sitenize ilk gittiklerinde gördükleri metin ve görüntüleri içerir. Metin düzenleyicinizi kullanarak, index.html adlı yeni bir dosya oluşturun ve test-site klasörünüzün hemen içine kaydedin.
2. goruntuler klasörü: Bu klasör, sitenizde kullandığınız tüm görüntüleri içerir. test-site klasörünüzün içinde, images adlı bir klasör oluşturun.
3. stiller klasörü: Bu klasör, içeriğinizi stillendirmek için kullanılan CSS kodunu (örneğin, metin ve arka plan renklerini ayarlamak) içerir. Klasörünüzün içinde styles adlı bir klasör oluşturun.
4. komut dosyaları klasörü: Bu klasör, sitenize etkileşimli işlevsellik eklemek için kullanılan tüm JavaScript kodunu (örneğin, tıklatıldığında veri yükleyen düğmeler) içerir. Klasörünüzün içinde scripts adlı bir klasör oluşturun.

Not: Windows bilgisayarlarda, windows varsayılan olarak açık bilinen dosya türleri için uzantıları gizle adlı bir seçeneğe sahip olduğundan, dosya adlarını görmekte sorun yaşayabilirsiniz. Genellikle, Windows Gezgini’ne giderek, Klasör seçenekleri… seçeneğini belirleyerek, Bilinen dosya türleri için uzantıları gizle onay kutusunun işaretini kaldırarak ve ardından Tamam‘ı tıklatarak bunu kapatabilirsiniz. Windows sürümünüzü kapsayan daha ayrıntılı bilgi için web’de arama yapabilirsiniz.

Dosya yolları

Dosyaların birbirleriyle konuşmasını sağlamak için, aralarında bir dosya yolu sağlamanız gerekir – böylece bir dosya diğerinin nerede olduğunu bilir. Bunu göstermek için, index.html dosyamıza biraz HTML ekleyeceğiz ve “Web siteniz nasıl görünecek?” makalesinde seçtiğiniz resmi görüntülemesini sağlayacağız. Alternatif olarak, elinizde, bilgisayarınızda veya Web’den varolan bir görüntüyü seçebilir ve aşağıdaki adımlarda kullanabilirsiniz:

1. Daha önce seçtiğiniz resmi images klasörünüze kopyalayın.
2. index.html dosyanızı açın ve aşağıdaki kodu tam olarak gösterildiği gibi dosyaya ekleyin. Şimdilik bunların ne anlama geldiği konusunda endişelenmeyin – serinin ilerleyen bölümlerinde yapılara daha ayrıntılı olarak bakacağız. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="" alt="My test image">
  </body>
</html>

3. <img src="" alt="My test image"> satırı, sayfaya resim ekleyen HTML kodudur. HTML’ye görüntünün nerede olduğunu söylemeliyiz. Resim, ile aynı dizinde bulunan görüntüler dizininin içindedir. Dosya yapısını görüntümüze doğru yürümek için ihtiyacımız olan dosya yolu images/dosya-adi.
4. Dosya yolunu HTML kodunuza src kodunun çift tırnak işaretleri arasına ekleyin: src=""
5. HTML dosyanızı kaydedin, sonra web tarayıcınıza yükleyin (dosyayı çift tıklatın). Yeni web sayfanızın resminizi görüntülediğini görmelisiniz!

Dosya yolları için bazı genel kurallar:

• Çağıran HTML dosyasıyla aynı dizindeki bir hedef dosyaya bağlanmak için, dosya adını kullanmanız yeterlidir, örneğin. my-image.jpg
• Bir alt dizindeki bir dosyaya başvurmak için, yolun önüne dizin adını ve bir eğik çizgi yazın. alt-klasor/my-image.jpg
• Çağıran HTML dosyasının üstündeki dizindeki bir hedef dosyaya bağlanmak için iki nokta yazın. Örneğin, ../my-image.jpg
• Bunları istediğiniz kadar birleştirebilirsiniz, örneğin .../subdirectory/another-subdirectory/my-image.jpg

Şimdilik bilmeniz gereken tek şey bu.

Not: Windows dosya sistemi, eğik çizgiler değil, ters eğik çizgiler kullanma eğilimindedir, örneğin C:\windows. Bu HTML’de önemli değildir — web sitenizi Windows’ta geliştiriyor olsanız bile, kodunuzda eğik çizgi kullanmanız gerekir.

Başka ne yapılmalı?

Şimdilik bu kadar. Klasör yapınız şöyle görünmelidir: