HTML & CSS için 5 Mini Örnek: Yerleşim, Buton, Kart

HTML & CSS için 5 Mini Örnek: Yerleşim, Buton, Kart

Bu makalede başlangıç seviyesindeki geliştiriciler için hazırlanmış kolay kod örnekleri (kolay kod örnekleri) sunulmaktadır. Amaç: hızla uygulanabilecek, okunması kolay ve responsive/erişilebilir uygulamalar göstermek. Her örnek: amaç, minimal HTML, temel CSS ve kısa notlar içerir.

Nasıl kullanmalı

Her örneği ayrı bir HTML dosyası olarak kaydedip tarayıcıda açabilirsiniz veya CodePen/JSFiddle gibi çevrimiçi editörlerde deneyin. Örnekler temel şablonlardır; projeye göre sınıf ve renk isimlerini uyarlayın.

Örnek 1: Basit Flex Yerleşim (İki sütun)

Amaç: Yan yana bir kenar çubuğu (sidebar) ve esnek içerik alanı oluşturmak.

HTML
<div class="layout-container">
  <aside class="sidebar">Menü veya filtreler</aside>
  <main class="main-content">Ana içerik burada</main>
</div>

CSS
.layout-container { display: flex; gap: 16px; align-items: flex-start; }
.sidebar { flex: 0 0 250px; background: #f3f4f6; padding: 16px; border-radius: 8px; }
.main-content { flex: 1; padding: 16px; background: #ffffff; border-radius: 8px; }

Açıklama: Flexbox ile .sidebar sabit genişlikte, .main-content kalan alanı kaplar. Küçük ekranlarda kolona dönüşmesi için media query kullanın.

Responsive ipucu
@media (max-width: 720px) { .layout-container { flex-direction: column; } }

Örnek 2: Responsive Grid (3 → 1 kolon)

Amaç: Kartlı içeriklerin güçlü bir şekilde sıralanması için CSS Grid kullanmak.

HTML
<div class="grid">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>

CSS
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }

Açıklama: Grid ile sütun sayısını medya sorgularıyla azaltarak farklı cihaz boyutlarında düzen korunur. Bu, responsive mini örnekler arasında sık kullanılan bir yaklaşımdır.

Örnek 3: Birincil (Primary) Buton — Erişilebilir ve Etkileşimli

Amaç: Dikkat çekici ve kullanılabilir bir CTA butonu oluşturmak.

HTML
<button class="btn btn-primary">Devam Et</button>

CSS
.btn { display: inline-block; padding: 10px 16px; border-radius: 8px; border: none; cursor: pointer; font-weight: 600; }
.btn-primary { background: #2563eb; color: #ffffff; transition: background-color 150ms ease, transform 50ms ease; }
.btn-primary:hover { background: #1d4ed8; }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:focus { outline: 3px solid rgba(37,99,235,0.22); outline-offset: 3px; }

Açıklama: Semantic <button> kullanmak, klavye ve ekran okuyucuları için en iyi uygulamadır. Hover ve focus durumları kullanıcı deneyimini iyileştirir; buton stilleri ve etkileşimler için daha fazla örnek 1Kodum'un buton örnekleri bölümünde bulunabilir.

Örnek 4: Ghost / Outline Buton

Amaç: Daha az baskın, temiz bir ikincil buton (secondary action).

HTML
<button class="btn btn-ghost">İptal</button>

CSS
.btn-ghost { background: transparent; border: 2px solid #6b7280; color: #374151; }
.btn-ghost:hover { background: rgba(59,130,246,0.06); border-color: #2563eb; color: #2563eb; }

Açıklama: Outline butonlar ikincil eylemler için uygundur. Görsel dönüşümlere yumuşak geçişler eklemek kullanıcı algısını iyileştirir.

Örnek 5: Basit Kart (Card) Tasarımı

Amaç: İçerikleri görsel olarak gruplamak ve CTA ile sunmak.

HTML
<div class="card">
  <img src="https://via.placeholder.com/400x200?text=Resim" alt="Kısa açıklama">
  <h4>Başlık</h4>
  <p>Kısa açıklama veya özet metin.</p>
  <button class="btn btn-primary">Detayları Gör</button>

CSS
.card { background: #ffffff; border-radius: 10px; box-shadow: 0 6px 18px rgba(15,23,42,0.06); overflow: hidden; }
.card img { width: 100%; display: block; }
.card h4 { margin: 12px 16px 4px; }
.card p { margin: 0 16px 12px; color: #4b5563; }

Açıklama: Kart tasarımı içerik sunumunu düzenler ve görsel çekiciliği artırır. Kart örnekleri ve uygulama detayları için örnek kaynaklara bakabilirsiniz: Kodlamaklazım ve Dijital Ders.

Uygulama Adımları (Kısa Rehber)

• Yeni bir index.html dosyası oluşturun ve ilgili HTML parçacığını yapıştırın.
• styles.css oluşturup CSS kurallarını ekleyin; HTML içinde <link rel="stylesheet" href="styles.css"> ile bağlayın.
• Tarayıcıda dosyayı açın; responsive davranışı test etmek için pencereyi daraltın veya geliştirici araçlarını kullanın.
• Butonlar için <button> öğesini tercih edin, görseller için alt metni ekleyin ve odak stillerini kontrol edin.

Hızlı Kontrol Listesi

• Butonlar semantic olarak <button> ile tanımlandı mı?
• Görsellerde alt metin (alt) var mı?
• Odak (focus) durumları görünür ve test edildi mi?
• Medya sorgularıyla responsive davranış kontrol edildi mi?

Erişilebilirlik ve Performans Notları

Renk kontrastı ve odak görünürlüğü önemlidir. WCAG önerilerine göre normal metin için 4.5:1, büyük metin ve kullanıcı arayüzü öğeleri için 3:1 kontrast hedeflenmesi yaygın bir yaklaşımdır. Ayrıca resimleri uygun boyutta sunup sıkıştırarak sayfa yükleme süresini azaltın.

Daha kapsamlı responsive uygulamalar ve başlangıç rehberleri için kurs ve referans içeriklere göz atabilirsiniz. Responsive tasarımın temelleri ve örnek uygulamalar geniş şekilde ele alınmıştır; örneğin bir başlangıç kursu referansı: Udemy HTML5 & CSS3 Kursu.

Sınırlamalar ve Öneriler

Bu örnekler öğretici amaçlı temel şablonlardır; üretime alırken tarayıcı uyumluluğu, erişilebilirlik testleri ve performans optimizasyonu yapmayı unutmayın. Özelleştirme için renk paleti, tipografi ve responsive kırılma noktalarını projenize göre belirleyin.

Kaynaklar ve İleri Okuma

• 1Kodum — Buton Tasarımları
• Kodlamaklazım — Kart Örneği
• Dijital Ders — Kart Tasarımı
• Udemy — HTML5 & CSS3 Kursu