HTML & CSS Mini Örnekleri — Hemen Denenecek Basit Şablonlar

Giriş

Bu rehber, HTML & CSS ile hızlıca deneyebileceğiniz mini şablonlar sunar. Aşağıdaki örnekler öğrenme amaçlı, sade ve yeni başlayanların adım adım denemesi için uygundur. Hazır kaynaklara bakmak isterseniz Macloo, CSS Bud ve TemplateMo gibi siteler ücretsiz şablonlar ve ilham sağlar.

Hemen Denenecek 5 Basit Şablon

Aşağıda her şablon için kısa açıklama, temel HTML yapısı ve bazı CSS örnekleri yer almaktadır. Kod satırları öğretim amaçlı basitleştirilmiştir; doğrudan kopyalayıp deneyebilirsiniz.

1) Minimal Landing Page (Tek Sayfa)

Açıklama: Basit bir hero alanı, kısa açıklama ve çağrı düğmesi içeren şablon. Hızlı prototipler için idealdir.

index.html
<!doctype html>
<html lang='tr'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width,initial-scale=1'>
  <title>Basit Landing</title>
  <link rel='stylesheet' href='styles.css'>
</head>
<body>
  <header class='hero'>
    <h1>Hoş geldiniz</h1>
    <p>Kısa açıklama burada yer alır.</p>
    <a class='btn' href='#'>Başlayın</a>
  </header>
  <footer>© Firma Adı</footer>
</body>
</html>

styles.css
:root { --bg: #f6f8fb; --accent: #0066ff; --text: #111827; }
body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial; margin:0; color:var(--text); background:var(--bg); }
.hero { min-height:70vh; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:4rem 1rem; }
.btn { display:inline-block; background:var(--accent); color:#fff; padding:0.6rem 1rem; border-radius:6px; text-decoration:none; }

2) Kart Izgarası (Card Grid)

Açıklama: Ürün listesi veya portfolyo için kullanılabilecek basit kart düzeni. Grid ile kolayca sütun sayısını değiştirebilirsiniz.

index.html
<div class='cards'>
  <div class='card'><h3>Başlık 1</h3><p>Kısa açıklama.</p></div>
  <div class='card'><h3>Başlık 2</h3><p>Kısa açıklama.</p></div>
  
</div>

styles.css (kart kısmı)
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:1rem; padding:1rem; }
.card { background:#fff; padding:1rem; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,0.06); }

3) Basit Responsive Navigasyon (CSS-only)

Açıklama: Küçük projeler için JavaScript gerektirmeyen, CSS checkbox tekniğiyle yapılmış basit bir açılır menü örneği.

index.html
<nav class='nav'>
  <input type='checkbox' id='menu-toggle'>
  <label for='menu-toggle' class='hamburger'>☰</label>
  <ul class='menu'>
    <li><a href='#'>Anasayfa</a></li>
    <li><a href='#'>Hakkında</a></li>
    <li><a href='#'>İletişim</a></li>
  </ul>
</nav>

styles.css (nav)
.nav { position:relative; padding:0.5rem 1rem; }
.hamburger { display:none; font-size:1.6rem; cursor:pointer; }
.menu { display:flex; gap:1rem; list-style:none; margin:0; padding:0; }
@media (max-width:600px) { .hamburger { display:inline-block; } .menu { display:none; flex-direction:column; } #menu-toggle:checked + .hamburger + .menu { display:flex; } }

4) Hero + CTA (Harekete Geçirici Alan)

Açıklama: Görsel ağırlıklı bir üst alan ve net bir çağrı butonu. Tipik ürün tanıtımı veya tanıtım sayfaları için uygundur.

index.html
<header class='hero-cta'>
  <div class='hero-inner'>
    <h1>Ürününüzü Tanıtın</h1>
    <p>Kısa ve etkili bir açıklama.</p>
    <a class='btn' href='#'>Ücretsiz Deneyin</a>
  </div>
</header>

styles.css (hero-cta)
.hero-cta { background:linear-gradient(135deg,#eaf0ff,#f6f8ff); padding:6rem 1rem; text-align:center; }
.hero-inner { max-width:900px; margin:0 auto; }

5) Minimal Footer + İletişim Notu

Açıklama: Sayfanın altında yer alabilecek basit bir footer. Form örneği, arka uç (backend) olmadan sadece yapının gösterimi içindir.

index.html (footer)
<footer class='site-footer'>
<p>Bize ulaşın: <a href='mailto:[email protected]'>[email protected]</a></p>
<p>© Firma Adı</p>
</footer>

Not: Form gönderimi için gerçek bir servis veya sunucu yapılandırması gerekir; örnekler statik yapıyı gösterir.

Nasıl Hızla Denersiniz?

Yeni bir klasör oluşturun ve index.html ile styles.css dosyalarını ekleyin.
Tarayıcıda dosyayı çift tıklayarak açın veya geliştirme ortamında VS Code kullanıyorsanız Live Server eklentisi gibi araçlarla yerel sunucu üzerinden test edin.
Değişiklik yaptıkça sayfayı yenileyin; CSS değişiklikleri hızlıca görünür.

Özelleştirme İpuçları (Hızlı Çözümler)

Kullanım kolaylığı için CSS değişkenleri (root) kullanın: renk, boşluk ve font boyutlarını tek yerden yönetin.
Google Fonts ile özel bir yazı ailesi ekleyin: <link href='https://fonts.googleapis.com' rel='stylesheet'> (örnek kullanım için Google Fonts yönergelerine bakın).
Yapıyı düzenlemek için Flexbox ve Grid kullanın; kartlar için grid, yatay merkezleme için flex tercih edilebilir.
Duyarlı (responsive) tasarım için en azından 2–3 medya sorgusu ekleyin: mobil, tablet, masaüstü.

Erişilebilirlik (A11Y) ve SEO İçin Pratik Notlar

Görsellerde alt özniteliği kullanın ve bağlantılar için açıklayıcı metin tercih edin.
Başlıklar hiyerarşisini koruyun (h1 yalnızca bir kere) ve sıralı yapıyı bozmamaya çalışın.
Meta başlık ve açıklama gibi temel SEO etiketlerini <head> içinde doldurun; örnek: <meta name='description' content='Kısa açıklama'>.
Performans için küçük görseller kullanın, gerektiğinde resimleri sıkıştırın ve mümkünse modern format (webp) tercih edin.

Kaynaklar ve Daha Fazla Şablon

Hazır ve ücretsiz şablonlar / bileşenler arıyorsanız bu kaynaklar faydalıdır: Macloo, CSS Bud, Basic8 Template ve TemplateMo. Bu sitelerden ilham alarak veya hazır parçaları kullanarak projelerinizi hızla başlatabilirsiniz.

Hızlı Kontrol Listesi (Yayın Öncesi)

HTML dosyası ve CSS bağlaması çalışıyor mu?
Mobil görünüm kontrol edildi mi (küçük ekranlarda menü, kart düzeni)?
Görsellere alt metin eklendi mi?
Başlık ve meta description girildi mi?
Performans için resimler optimize edildi mi?

Sonuç

Bu mini örnekler, HTML ve CSS öğrenirken hızlıca pratik yapmanızı sağlar. Şablonları adım adım özelleştirin, erişilebilirlik ve performans kontrollerini ihmal etmeyin. Daha kapsamlı ücretsiz şablonlar ve hazır bileşenler için yukarıdaki kaynaklara göz atabilirsiniz.

HTML & CSS Mini Örnekleri: Hemen Denenecek Basit Şablonlar