Gereksinimler ve Ön Hazırlık

Çalışmaya başlamadan önce bilgisayarınızda modern bir kod editörü (VS Code gibi) ve güncel bir web tarayıcısı (Chrome, Firefox veya Edge) yüklü olmalıdır. Projenizi düzenli tutmak için "proje-klasoru" adında bir ana dizin oluşturun ve içerisinde "css", "images" ve "pages" adında alt klasörler tanımlayın.

• HTML5: Sayfa yapısını oluşturmak için standart işaretleme dili.
• CSS3: Tasarım ve düzen (layout) işlemleri için stil dili.
• Klasör Yapısı: index.html, hakkimizda.html, iletisim.html dosyalarını kök dizinde tutacağız.

Adım 1: Temel HTML İskeletini Oluşturma

Çok sayfalı bir yapıda her sayfanın aynı başlık (header) ve alt bilgi (footer) alanına sahip olması gerekir. İlk olarak ana sayfamız olan index.html dosyasını oluşturarak başlayalım. Bu dosya, tüm sayfalarımız için bir şablon görevi görecektir.

    
    
    Ana Sayfa | Web Sitem
    


    
        
            

                
Ana Sayfa
                
Hakkımızda
                
İletişim
            
        
    
    
        
Hoş Geldiniz
        
Bu çok sayfalı sitemizin ana sayfasıdır.
    

Burada etiketi içerisinde sayfalar arası geçişi sağlayan bağlantıları tanımladık. href özniteliği, tarayıcının hangi dosyaya gideceğini belirler.

Adım 2: CSS ile Ortak Tasarım Stratejisi

Tüm sayfalarınızın aynı görünmesi için CSS dosyası merkezi bir rol oynar. css/style.css dosyasını oluşturarak temel yerleşim kurallarını tanımlayalım. Bu, kod tekrarını önler ve sitenizi daha yönetilebilir kılar.

/* css/style.css */
body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
header { background: #333; color: white; padding: 1rem; }
nav ul { list-style: none; display: flex; gap: 20px; }
nav a { color: white; text-decoration: none; }
main { padding: 20px; }
footer { background: #eee; text-align: center; padding: 10px; }

Bu CSS kodu, tüm sayfalarınızda geçerli olacak ortak bir görünüm sağlar. display: flex kullanarak navigasyon menüsünü yatay bir düzene soktuk.

Adım 3: Çok Sayfalı Yapıda Sayfa Oluşturma

Şimdi hakkimizda.html dosyasını oluşturalım. Çok sayfalı yapının sırrı, header ve footer kısımlarını her sayfada aynı tutmaktır. İçerik kısmını ise etiketi içerisinde değiştiriyoruz.

    
        

            
Ana Sayfa
            
Hakkımızda
        
    


    
Hakkımızda
    
Biz, 2026 yılında modern web standartlarına uygun projeler geliştiren bir ekibiz.

Bu yöntemle, kullanıcı bir sayfadan diğerine geçtiğinde site kimliğinin değişmediğini hisseder. Bu, kullanıcı deneyimi (UX) açısından oldukça önemlidir.

Adım 4: Navigasyon ve Link Yönetimi

Sayfalar arasında doğru geçiş sağlamak için göreceli yollar (relative paths) kullanmalısınız. Eğer dosyalarınız aynı dizindeyse, sadece dosya adını yazmanız yeterlidir. Eğer sayfalar farklı klasörlerdeyse, ../ ifadesiyle bir üst dizine çıkabilirsiniz.

Kritik Uyarı: Statik HTML dosyalarında form verilerini işleyemezsiniz. İletişim formu gibi etkileşimli alanlar için arka uç (backend) teknolojilerine ihtiyaç duyarsınız. XSS (Cross-Site Scripting) saldırılarından korunmak için kullanıcıdan gelen verileri her zaman filtreleyin.

Adım 5: İletişim Sayfası ve Form Yapısı

İletişim sayfası, kullanıcıların sizinle etkileşime girdiği yerdir. Burada basit bir form yapısı kuralım.

    Adınız:
    
    Gönder

required özniteliği, kullanıcının alanı boş bırakmasını engeller. Bu, istemci tarafında basit bir doğrulama sağlar.

Adım 6: Test Etme ve Yayına Hazırlık

Tüm sayfalarınızı tarayıcıda açarak linklerin düzgün çalışıp çalışmadığını kontrol edin. "404 Not Found" hatası alıyorsanız, dosya isimlerinin ve href yollarının eşleştiğinden emin olun. 2026 standartlarında mobil uyumluluk (responsive) için meta viewport etiketinin mutlaka içerisinde olduğundan emin olun.

Sorumluluk Reddi: Bu rehberdeki kod örnekleri temel bir iskelet oluşturmak içindir. Web sitenizin güvenliği, veri işleme süreçleri ve yasal uyumluluk (KVKK vb.) tamamen sizin sorumluluğunuzdadır. Profesyonel projelerde güvenlik uzmanlarından destek almanız önerilir.

Sıkça Sorulan Sorular

Çok sayfalı bir site için neden PHP kullanmalıyım?

PHP, include fonksiyonu sayesinde header ve footer gibi ortak alanları tek bir dosyadan yönetmenizi sağlar. Böylece bir menü değişikliğinde 50 sayfayı tek tek düzenlemek zorunda kalmazsınız.

CSS dosyası neden ayrı olmalı?

CSS'i ayrı bir dosyada tutmak, tarayıcının bu dosyayı önbelleğe (cache) almasını sağlar. Bu da sitenizin sonraki açılışlarında çok daha hızlı yüklenmesine olanak tanır.

SEO için nelere dikkat etmeliyim?

Her sayfanın kendine özgü ve etiketlerine sahip olması, arama motorlarının içeriğinizi daha iyi anlamasını sağlar.

Mobil uyumluluk nasıl sağlanır?

CSS içerisinde @media sorguları kullanarak, ekran genişliğine göre tasarımın değişmesini sağlayabilirsiniz. Bu, 2026 yılı web standartlarının olmazsa olmazıdır.

Dosya isimlerinde nelere dikkat etmeliyim?

Dosya isimlerinde Türkçe karakter kullanmayın ve boşluk bırakmayın. "hakkimizda.html" gibi küçük harfli ve tireli isimler kullanmak, sunucu taraflı hataları önler.

Web Projelerinde Performans Optimizasyonu İçin İpuçları

Çok sayfalı bir web sitesi oluştururken, kullanıcı deneyimini doğrudan etkileyen en önemli faktör sayfa yüklenme hızıdır. Statik HTML dosyalarınızın boyutunu küçültmek ve tarayıcı önbelleğini verimli kullanmak, sitenizin Google PageSpeed skorlarını doğrudan iyileştirecektir.

Gereksiz Kodlardan Arınma

CSS dosyalarınızdaki boşlukları, yorum satırlarını ve gereksiz tanımlamaları temizleyin. Ayrıca, büyük boyutlu görselleri doğrudan HTML içine gömmek yerine, modern formatlar (WebP gibi) kullanarak ve loading="lazy" niteliğini ekleyerek sayfa performansını artırabilirsiniz.

Tarayıcı Önbellekleme (Caching)

Sunucu tarafında .htaccess dosyası kullanarak tarayıcıya dosyaları ne kadar süreyle önbelleğinde tutacağını söyleyebilirsiniz. Bu, kullanıcının ikinci ziyaretinde sitenizin çok daha hızlı açılmasını sağlar.

  ExpiresActive On
  ExpiresByType image/jpg "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"

Hata Ayıklama ve Geliştirici Araçları

Geliştirme sürecinde karşılaştığınız görsel kaymalar veya çalışmayan linkler için tarayıcınızın yerleşik "Geliştirici Araçları"nı (F12) kullanmak en etkili yöntemdir. Özellikle Console sekmesi, JavaScript hatalarını veya yüklenemeyen kaynakları anında görmenizi sağlar.

CSS Düzenlerini İnceleme

Öğelerin neden yanlış hizalandığını anlamak için "Inspect Element" (Öğeyi İncele) özelliğini kullanın. Computed sekmesi, bir öğeye uygulanan tüm CSS özelliklerinin nihai değerini gösterir. Bu, spesifiklik (specificity) çakışmalarını çözmek için hayat kurtarıcıdır.

İpucu: Her zaman "Mobile First" (Önce Mobil) yaklaşımını benimseyin. Tasarımı önce en küçük ekran için yapıp, medya sorguları ile geniş ekranlara göre ölçeklendirmek, kod karmaşasını %40 oranında azaltır.

Sonuç

HTML & CSS kullanarak çok sayfalı bir web sitesi iskeleti oluşturmak, web geliştirme kariyerinizin temel taşıdır. Bu rehberde öğrendiğiniz yapı, ileride öğreneceğiniz daha karmaşık teknolojiler (PHP, React, Node.js) için sağlam bir zemin oluşturacaktır. Bir sonraki adım olarak, bu statik iskeleti dinamik hale getirmek için PHP ile "include" yapısını kullanmayı veya CSS Grid/Flexbox ile daha gelişmiş tasarımlar yapmayı deneyebilirsiniz.