HTML, CSS ve JavaScript: Binayı Kur, Boya, Elektriği Bağla
Alt başlık: Sitenin iskeleti (HTML), görünümü (CSS) ve zekâ/aksiyonu (JavaScript) — neden üçü birden şart?
Özet (TL;DR)
- HTML içeriktir: sayfanın bölümleri, başlıklar, formlar, butonlar.
- CSS görünüştür: renk, tipografi, boşluk, hizalama, düzen.
- JavaScript (JS) davranıştır: tıklayınca açılan kutu, form doğrulama, sonsuz kaydırma, harita etkileşimi.
- Bir sitede “aksiyon” ve “tepki” varsa, o motoru JS çalıştırıyordur.
1) HTML: İskelet – “Kaba inşaat”
HTML, sayfanın anlamlı yapısını tanımlar.
Başlık nerededir, paragraf nerededir, form hangi alanlardan oluşur, butonlar hangi eyleme çağırır… Hepsi HTML’nin işidir.
Kural: İçerik ve anlam → HTML.
Örnek:
<button id="abone-btn">Abone Ol</button> <div id="modal" aria-hidden="true" class="modal hidden"> <p>E-postanı bırak, yeni yazıları kaçırma.</p> <input type="email" id="email" placeholder="ornek@site.com"> <button id="gonder">Gönder</button> </div>
2) CSS: Makyaj – “Boya, duvar kâğıdı”
CSS, iskeleti görsel bir arayüze dönüştürür.
Renkler, gölgeler, tipografi, responsive düzen, “kutu ortalansın” gibi tüm estetik kararlar CSS’dedir.
Kural: Stil ve düzen → CSS.
Örnek:
.modal { position: fixed; inset: 0; display: grid; place-items: center; } .hidden { display: none; } .modal p { font: 500 1rem/1.5 system-ui; margin-bottom: .5rem; }
3) JavaScript: Tesisat – “Elektrik, su, asansör, zil”
HTML iskeleti kurduk, CSS ile boyadık ama bina henüz yaşamıyor.
JS devreye girince; butona basıldığını anlar, kutuyu açar, formu denetler, içerik getirir, menüleri açıp kapatır, haritayı oynatır.
Kural: Etkileşim ve mantık → JS.
Örnek (modal aç/kapa + basit doğrulama):
<script> const modal = document.getElementById('modal'); const aboneBtn = document.getElementById('abone-btn'); const gonderBtn = document.getElementById('gonder'); const email = document.getElementById('email'); aboneBtn.addEventListener('click', () => { modal.classList.toggle('hidden'); // “Şu gizli pencereyi göster” modal.setAttribute('aria-hidden', modal.classList.contains('hidden')); }); gonderBtn.addEventListener('click', () => { const val = email.value.trim(); if (!val.includes('@')) { alert("Bu e-posta doğru görünmüyor. '@' işareti eksik olabilir."); return; } // Sunucuya gönderim burada yapılır (fetch ile) alert("Teşekkürler! Aboneliğin alındı."); modal.classList.add('hidden'); modal.setAttribute('aria-hidden', 'true'); }); </script>
“JS ne yapar?” – Sahneden gerçek örnekler
- Tıklayınca açılan menüler & modallar: Sınıf (class) ekleyip çıkararak görünür/gizli hâle getirir.
- Form doğrulama (anında): “Gönder”e basmadan önce hatayı gösterir (eksik @, kısa şifre vb.).
- Sonsuz kaydırma: En alta yaklaşınca “yükleniyor” göstergesiyle arka planda yeni içerik çeker.
- Slider & galeri: Otomatik kayan görseller, ok tuşlarıyla gezinme, dokunmatik kaydırma.
- Harita & konum: Pin ekleme, yakınlaştırma, rota çizme gibi etkileşimler.
- Bildirim & geri bildirim: Kullanıcı bir işlem yaptığında anında görsel/işitsel uyarı.
Sunucu tarafı (PHP) ile ilişki: “Mutfaktan malzeme çekmek”
JS, arka plandaki PHP (veya başka bir sunucu dili) ile fetch/XHR üzerinden konuşur:
- İstek: fetch('/api/yazilar?page=2')
- Yanıt: JSON verisi gelir → JS arayüzü günceller → kullanıcı sayfa yenilemeden yeni içerik görür.
İpucu: REST/JSON API tasarlarsanız, ön yüz (JS) ile arka yüz (PHP) temizce ayrılır, bakım kolaylaşır.
Doğru iş bölümü: Üç altın kural
- HTML = anlam (butonun kendisi, form alanı)
- CSS = görünüm (butonun rengi, formun yerleşimi)
- JS = davranış (butona basınca ne olacağı)
Bu ayrım, kodu okunur, test edilebilir ve yeniden kullanılabilir yapar.
Performans ve erişilebilirlik kısa notları
- Debounce/Throttle: Kaydırma/arama gibi sık tetiklenen olaylarda performansı koruyun.
- Lazy load: Görselleri ve ağır içerikleri gerektiğinde yükleyin.
- Aria öznitelikleri: Modallar ve dinamik bölgeler için aria-* kullanarak ekran okuyucu dostu olun.
- Hata yönetimi: try/catch ve kullanıcıya net geri bildirim.
Sık rastlanan hatalar
- “Her şeyi JS ile yapayım”: HTML’nin anlamsal gücünü ve CSS’in düzen kabiliyetini atlamak; gereksiz karmaşa.
- Stili JS ile vermek: Stil değişimini mümkünse class ekleyip çıkararak yapın; CSS’e bırakın.
- Sayfa yenilemeye bağımlılık: Her değişimde tam yenileme yerine dinamik güncelleme düşünün.
Sonuç
Sitenin iskeleti (HTML) ve görünümü (CSS) olmazsa olmaz; ancak sitede aksiyon, etkileşim ve zeka görmek istiyorsanız, o binanın tesisatını JS ile bağlarsınız.
Butona basılır, JS anlar; CSS’e “sahne” kurdurur; arka mutfaktan (PHP) veriyi çeker; kullanıcıya pürüzsüz bir deneyim sunar.
(İsteğe bağlı) Kapak görseli için kısa prompt
“Modern web geliştirme makalesi için: HTML (iskelet), CSS (boya), JavaScript (elektrik/tesisat) metaforunu görselleştiren, temiz tipografili, minimal, beyaz arka plan üzerinde üç katmanlı mimari diyagram; ince çizgiler, küçük ikonlar (buton, fırça, şimşek). 16:9, yüksek çözünürlük.”