Web Sitesi Proje Araç Kiti: Planlama Şablonu, Kod Kontrol Listesi ve Hazır Kod Kalıpları
Bu derste daha önce kalmıştın.
Bu ders bir anlatım değil, bir masa başı paketi. Aşağıdaki parçaları kopyalayıp kendi projenize yapıştırın, örnek değerleri kendi sitenize göre değiştirin. Örnek senaryo: küçük bir fotoğraf stüdyosunun tanıtım sitesi.
1. Tek sayfalık site planı şablonu
Kod yazmadan önce bu tabloyu bir kâğıda ya da not uygulamasına doldurun. Her satırı tek cümleyle yanıtlayın.
| Alan | Sorunuz | Örnek yanıt |
|---|---|---|
| Amaç | Site ziyaretçiye hangi işi yaptıracak? | Ziyaretçi stüdyoyu tanıyıp randevu talebi bıraksın. |
| Hedef ziyaretçi | Kim, hangi cihazdan, neyi arıyor? | Telefonundan hızlıca fiyat ve örnek iş arayan aileler. |
| Tek eylem | Ziyaretçiden istediğiniz tek şey nedir? | İletişim formunu doldurmak. |
| Sayfa listesi | En az kaç sayfa yeter? | Ana sayfa, Çalışmalarımız, İletişim. |
Her sayfa için içerik tablosu
| Sayfa | Ana başlık (h1) | Bölümler | Görseller | Eylem |
|---|---|---|---|---|
| index.html | Çocuğunuzun ilk yılını birlikte saklayalım | Kısa tanıtım, üç hizmet, yorum | Kapak fotoğrafı, logo | İletişim sayfasına bağlantı |
| calismalarimiz.html | Çalışmalarımız | Fotoğraf ızgarası | 6 örnek fotoğraf | Ana sayfaya dönüş |
| iletisim.html | Bize ulaşın | Form, adres, çalışma saatleri | Harita görseli | Formu gönder |
2. Yayın öncesi kontrol listesi
Siteyi paylaşmadan önce sırayla işaretleyin. Bir madde tutmuyorsa yayına çıkmayın, önce düzeltin.
| Kontrol | Nasıl bakarım? | Durum |
|---|---|---|
| Her sayfada tek bir h1 var, başlıklar sıralı (h1, h2, h3) | Dosyada h1 etiketini arayın | ☐ |
| Sayfa başlığı (title) her sayfada farklı ve anlamlı | Tarayıcı sekmesine bakın | ☐ |
| Her görselde alt metni var; süs görselinde alt boş | Dosyada img etiketlerini tek tek gözden geçirin | ☐ |
| Tüm bağlantılar çalışıyor, dosya adları birebir aynı | Her bağlantıya tıklayın | ☐ |
| Her form alanının label etiketi var | Etikete tıklayınca kutu seçiliyor mu? | ☐ |
| Telefonda düzgün görünüyor | F12, cihaz simgesi, dar ekran | ☐ |
| Konsolda kırmızı hata yok | F12, Console sekmesi | ☐ |
| Yazım hatası ve eski metin kalmadı | Sayfayı sesli okuyun | ☐ |
3. Hazır kod kalıpları
HTML iskeleti (satır satır)
| Satır | Ne işe yarar? |
|---|---|
| <!DOCTYPE html> | Tarayıcıya modern HTML kullandığınızı söyler |
| <html lang='tr'> | Sayfa dilini belirtir |
| <meta charset='UTF-8'> | Türkçe karakterlerin düzgün görünmesini sağlar |
| <meta name='viewport' content='width=device-width, initial-scale=1'> | Telefonda doğru ölçek verir |
| <title>Sayfa Adı | Site Adı</title> | Sekme başlığı |
| <link rel='stylesheet' href='css/stil.css'> | CSS dosyasını bağlar (head içinde) |
| <header>, <nav>, <main>, <footer> | Body içindeki dört ana bölge |
| <script src='js/uygulama.js' defer></script> | JavaScript dosyasını bağlar (body sonunda ya da defer ile) |
CSS renk ve boşluk değişkenleri
- Dosyanın en üstüne: :root { --renk-ana: #1d4ed8; --renk-yazi: #1f2937; --renk-zemin: #f9fafb; --bosluk-s: 8px; --bosluk-m: 16px; --bosluk-l: 32px; }
- Kullanım: body { color: var(--renk-yazi); background: var(--renk-zemin); }
- Kullanım: .dugme { background: var(--renk-ana); padding: var(--bosluk-s) var(--bosluk-m); }
- Faydası: rengi değiştirmek istediğinizde tek satırı düzeltirsiniz, siteniz tutarlı kalır.
JavaScript olay kalıpları
| Kalıp | Kod |
|---|---|
| Menü aç/kapat | document.querySelector('.menu-dugme').addEventListener('click', function () { document.querySelector('.menu').classList.toggle('acik'); }); |
| CSS tarafı | .menu { display: none; } .menu.acik { display: block; } |
| Form doğrulama mesajı | form.addEventListener('submit', function (olay) { if (!eposta.value.includes('@')) { olay.preventDefault(); mesaj.textContent = 'Lütfen geçerli bir e-posta yazın.'; } }); |
Uyarlama ipucu: sınıf adlarını (menu-dugme, menu, acik) HTML'inizdekilerle birebir eşleştirin. Çoğu hata burada çıkar.
4. Hata ayıklarken sorulacak sorular
- Dosyayı kaydettim mi, sayfayı yeniledim mi?
- Dosya adı ve yolu birebir aynı mı (büyük küçük harf, Türkçe karakter, boşluk)?
- Konsolda kırmızı bir mesaj var mı, hangi satırı gösteriyor?
- Her açılan etiketi kapattım mı, tırnaklar eşleşiyor mu?
- Sınıf adını HTML'de ve CSS'te aynı yazdım mı (nokta işaretini unutmadım mı)?
- Son çalışan hâlden sonra ne değiştirdim? Son değişikliği geri alınca düzeliyor mu?
5. Dosya adlandırma ve klasör düzeni
- Klasör adı: foto-studyo (küçük harf, boşluk yok, Türkçe karakter yok)
- foto-studyo/index.html, calismalarimiz.html, iletisim.html
- foto-studyo/css/stil.css
- foto-studyo/js/uygulama.js
- foto-studyo/gorseller/kapak.jpg, logo.png
- Kural: küçük harf, kelimeler arasında tire, anlamlı ad. Görsel için IMG_4821.jpg yerine kapak-fotografi.jpg.
Başlangıç paketiniz hazır: plan tablosu, kontrol listesi, iskelet, değişkenler, iki JavaScript kalıbı ve klasör düzeni. Bunları şimdi kendi proje klasörünüze aktarın.
Bu dersi kayıt olmadan izleyebilirsin. İlerlemeni kaydetmek, sertifika almak ve puan tablosuna girmek için ücretsiz üye ol: Kayıt Ol
İpucu: ← ve → tuşlarıyla dersler arasında geçebilirsin.