HTML
Server-rendered vs client
HTML şablonlama yaklaşımlarını ve HTML'in rolünü öğrenirsin.
Sunucu tarafı ve istemci tarafı
HTML'i iki yerde kurabilirsin: sunucu tarafı (server) ve istemci tarafı (client). Sunucu tarafı render'da sunucu, veriyi alır ve hazır HTML'i tarayıcıya gönderir; sayfa açılışta görünür. İstemci tarafı render'da ise tarayıcı boş bir kabuk alır, JavaScript veriyi çeker ve HTML'i orada kurar.
İkisinin de ortak hedefi HTML'dir. Yani hangi yaklaşımı seçersen seç, ürettiğin şey yine HTML etiketleridir. Şablon (template) ise her iki dünyada da karşına çıkar: tekrar eden HTML parçalarını bir kalıp halinde yazmanın yoludur.
HTML her iki yaklaşımın da hedefi
İki yaklaşımı da düşünürsen, ortak nokta şudur: sonuçta üretilen şey HTML'dir. Sunucu tarafı render HTML'i doğrudan üretir; istemci tarafı render ise JavaScript ile HTML üretir. Tarayıcı her iki durumda da aynı etiketleri yorumlar.
Bu yüzden sağlam HTML bilgisinin önemi büyüktür. Hangi tarafı seçersen seç, <header>, <main>, <article> gibi anlamsal etiketleri doğru kullanmak sayfanın erişilebilirliğini ve SEO'sunu korur. Şablonlar da bu ortak zemine yazılır.
Hangi yaklaşım ne zaman?
Her yaklaşımın güçlü tarafı farklıdır. Sunucu tarafı render ilk açılışta sayfayı hızlı gösterir, arama motorları içeriği direkt okur; dinamik siteler, bloglar ve mağazalar için uygundur. İstemci tarafı render ise sayfa içindeki geçişleri hızlı yapar; uygulama benzeri (dashboard, editör) arayüzlerde öne çıkar.
İkisini birleştiren melez (hybrid) yaklaşımlar da yaygındır. Ama nerede olursan ol, HTML'i doğru yazmak temel beceridir. Bu grupta şablon, partial ve veri köprüleriyle bu temeli sağlamlaştıracağız.
Uygulama Statik bir sunucu tarafı sayfası yaz
Body içine sunucu tarafı render'a uygun statik bir sayfa kur: bir <header> ve içinde dolu bir <h1> (metin 'Günün Yazısı'), bir <main> ve içinde bir <article>, article içine dolu bir <h2> ve dolu bir <p>, en son bir <footer> ve içinde dolu bir <p> (metin '© 2026 Köşe'). JavaScript ekleme.
Örnek çözümü göster
<body>
<header>
<h1>Günün Yazısı</h1>
</header>
<main>
<article>
<h2>Başlangıç</h2>
<p>Bugün HTML şablonlarına giriş yapıyoruz.</p>
</article>
</main>
<footer>
<p>© 2026 Köşe</p>
</footer>
</body>
Kendini test et
-
Hangi yaklaşımda HTML sunucuda kurulup tarayıcıya hazır gelir?
- Yalnızca CSS yazmak
- Sunucu tarafı render
- Sadece resim eklemek
- Yalnızca ham veri göndermek
Cevabı göster
Sunucu tarafı render — Doğru. Sunucu tarafı render'da HTML sunucuda kurulur ve tarayıcıya hazır gelir.
-
Cümleyi tamamla
<p>Sunucu tarafı render'da HTML, ____ üzerinde hazır kurulur ve tarayıcıya gönderilir.</p>
Cevabı göster
<p>Sunucu tarafı render'da HTML, sunucuda üzerinde hazır kurulur ve tarayıcıya gönderilir.</p>
-
Kavramı rolüyle eşleştir
- Sunucu tarafı render
- HTML sunucuda kurulur
- İstemci tarafı render
- HTML tarayıcıda kurulur
- Şablon (template)
- Yeniden kullanılan HTML kalıbı
- Statik HTML
- JavaScript gerektirmez
Sıradaki ders: Partial HTML
