Web Tasarım’da Dosyalarla İlgilenmek

653 3 dakika okuma süresi

Bir Önceki Ders : Web siteniz nasıl görünecek?

Bir web sitesi birçok dosyadan oluşur: metin içeriği, kod, stil sayfaları, medya içeriği, vb. Bir web sitesi oluştururken, bu dosyaları yerel bilgisayarınızdaki makul bir yapıda bir araya getirmeniz, birbirleriyle konuşabileceklerinden emin olmanız ve sonunda bir sunucuya yüklemeden hemen önce tüm içeriğinizin görünmesini sağlamanız gerekir . Dosyalarla uğraşmak , web siteniz için mantıklı bir dosya yapısı oluşturabilmeniz için bilmeniz gereken bazı sorunları tartışır.

Web siteniz bilgisayarınızda nerede olmalı?

Bilgisayarınızda yerel olarak bir web sitesinde çalışırken, ilgili tüm dosyaları, yayınlanmış web sitesinin sunucudaki dosya yapısını yansıtan tek bir klasörde tutmalısınız. Bu klasör istediğiniz herhangi bir yerde yaşayabilir, ancak kolayca Masaüstünüzde, Ana klasörünüzde veya sabit sürücünüzün kökünde kolayca bulabileceğiniz bir yere koymalısınız.

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

Gövde ve aralıkta bir kenara

Bu makalede, klasörleri ve dosyaları tamamen boşluk olmadan küçük harfle adlandırmanızı istediğini göreceksiniz. Bunun nedeni ise:

Birçok bilgisayar, özellikle web sunucuları büyük / küçük harfe duyarlıdır. Örneğin, web sitenize bir resim koyarsanız test-site/MyImage.jpgve ardından farklı bir dosyaya resmi olarak çağırmaya çalışırsanız test-site/myimage.jpg, çalışmayabilir.
Tarayıcılar, web sunucuları ve programlama dilleri boşlukları tutarlı bir şekilde işlemez. Örneğin, dosya adınızda boşluk kullanırsanız, bazı sistemler dosya adını iki dosya adı olarak kabul edebilir. Bazı sunucular dosya adlarınızdaki alanları “% 20” (URI’lerdeki boşlukların karakter kodu) ile değiştirerek tüm bağlantılarınızın kopmasına neden olur. : O ayrı tire ile kelime yerine alt çizgi daha iyidir my-file.htmlvs. my_file.html.

Kısa yanıt, dosya adlarınız için bir tire işareti kullanmanızdır. Google arama motoru, kısa çizgiyi kelime ayırıcı olarak görür, ancak alt çizgiyi bu şekilde dikkate almaz. Bu nedenlerle, en azından ne yaptığınızı bilinceye kadar, klasörünüzü ve dosya adlarınızı boşluk olmadan ve tire işaretleri ile ayrılmış kelimelerle küçük harf yazma alışkanlığına girmek en iyisidir. Bu şekilde, daha sonra yolda daha az sorunla karşılaşırsınız.

Web siteniz hangi yapıya sahip olmalı?

Şimdi, 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 şey, bir dizin HTML dosyası ve resim, stil dosyası ve komut dosyası içeren klasörlerdir. Şimdi bunları yaratalım:

index.html: Bu dosya genellikle ana sayfa içeriğinizi, yani kullanıcıların sitenize ilk gittiklerinde gördükleri metin ve resimleri içerir. Metin düzenleyicinizi kullanarak yeni bir dosya oluşturun ve dosyayı klasörünüzün index.htmliçine kaydedin test-site.
imagesklasör : Bu klasör sitenizde kullandığınız tüm resimleri içerir. Klasörünüzün imagesiçinde adlı bir klasör oluşturun test-site.
stylesklasör : Bu klasör içeriğinizi biçimlendirmek için kullanılan CSS kodunu içerir (örneğin, metin ve arka plan renklerini ayarlama). Klasörünüzün stylesiçinde adlı bir klasör oluşturun test-site.
scriptsklasör : Bu klasör sitenize etkileşimli işlevsellik eklemek için kullanılan tüm JavaScript kodunu içerir (örneğin, tıklandığında veri yükleyen düğmeler). Klasörünüzün scriptsiçinde adlı bir klasör oluşturun test-site.

Not : Windows bilgisayarlarda, varsayılan olarak açık olarak 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 . Genel olarak, Windows Gezgini’ne gidip 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 spesifik bilgiler 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 – temelde bir rota, böylece bir dosya diğerinin nerede olduğunu bilir. Bunu göstermek için, index.htmldosyamıza biraz HTML ekleyeceğiz ve “Web siteniz neye benzeyecek?” Makalesinde seçtiğiniz resmi gösterecek.

Daha önce seçtiğiniz görüntüyü imagesklasörünüze kopyalayın.
index.htmlDosyanızı açın ve aşağıdaki kodu tam olarak gösterildiği gibi dosyaya ekleyin. Şimdilik ne anlama geldiğinden endişe etmeyin – yapıların ilerleyen bölümlerinde daha ayrıntılı olarak ele alacağız.

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

Çizgi <img src="" alt="My test image">, sayfaya resim ekleyen HTML kodudur. HTML’ye resmin nerede olduğunu söylememiz gerekir. Görüntü, aynı dizinde bulunan resim dizininin içindedir index.html. Dosya yapısından index.htmlgörüntümüze inmek için ihtiyacımız olan dosya yolu images/your-image-filename. Örneğin, resmimiz çağrılır firefox-icon.png, dolayısıyla dosya yolu denir images/firefox-icon.png.
Dosya yolunu, kodun çift tırnak işaretleri arasına HTML kodunuza ekleyin src="".
HTML dosyanızı kaydedin, ardından web tarayıcınıza yükleyin (dosyayı çift tıklayın). Resminizi gösteren yeni web sayfanızı görmelisiniz!

Temel web sitemizin sadece firefox logosunu gösteren bir ekran görüntüsü - dünyayı saran alevli bir tilki

Dosya yolları için bazı genel kurallar:

Çağıran HTML dosyasıyla aynı dizindeki bir hedef dosyaya bağlanmak için dosya adını kullanın, örn my-image.jpg.
Bir alt dizindeki bir dosyaya başvurmak için, yolun önüne dizin adını ve eğik çizgiyi (ör subdirectory/my-image.jpg.
Çağıran HTML dosyasının üzerindeki dizindeki bir hedef dosyaya bağlanmak için iki nokta yazın. Yani örneğin, index.htmlbir alt klasör içinde olduğunu test-siteve my-image.jpgiçinde oldu test-site, başvurabileceğiniz olabilir my-image.jpggelen index.htmlkullanarak ../my-image.jpg.
Örneğin bunları istediğiniz kadar birleştirebilirsiniz ../subdirectory/another-subdirectory/my-image.jpg.

Şimdilik, bilmeniz gereken her şey bu.

Not : Windows dosya sistemi eğik çizgileri değil, ters eğik çizgileri kullanma eğilimindedir, örn C:\windows. Bu HTML’de önemli değil – web sitenizi Windows üzerinde geliştiriyor olsanız bile, yine de kodunuzda eğik çizgi kullanmalısınız.