Başlık için yapıyı nasıl organize edersiniz?

CSS

/* Başlık kapsayıcısı için stil */
header {
  display: flex; /* Öğeleri hizalamak için flexbox kullanımı */
  justify-content: space-between; /* Öğeler arasındaki alanın dağılımı */
  align-items: center; /* Öğelerin dikey hizalanması */
  padding: 10px 20px; /* İç boşluk */
  background-color: #f0f0f0; /* Arka plan rengi */
}

/* Logo için stil */
.logo {
  flex-shrink: 0; /* Logonun sıkışmasını engeller */
}

.logo img {
  height: 40px; /* Logo resminin yüksekliği */
}

/* Navigasyon için stil */
nav ul {
  list-style: none; /* Liste işaretlerini kaldırır */
  margin: 0;
  padding: 0;
  display: flex; /* Yatay düzenleme için flexbox kullanımı */
}

nav li {
  margin-left: 20px; /* Menü öğeleri arasındaki boşluk */
}

nav a {
  text-decoration: none; /* Bağlantı alt çizgisini kaldırır */
  color: #333; /* Bağlantı metin rengi */
}

/* Düğmeler veya diğer kontrol öğeleri için stil */
.controls {
  display: flex; /* Flexbox kullanımı */
  align-items: center; /* Dikey hizalama */
}

.controls button {
  margin-left: 10px; /* Düğmeler arasındaki boşluk */
}

HTML

<header>
  <div class="logo">
    <img src="logo.png" alt="Şirket Logosu">
  </div>
  <nav>
    <ul>
      <li><a href="/">Ana Sayfa</a></li>
      <li><a href="/about">Hakkımızda</a></li>
      <li><a href="/services">Hizmetler</a></li>
      <li><a href="/contact">İletişim</a></li>
    </ul>
  </nav>
  <div class="controls">
    <button>Giriş Yap</button>
    <button>Kayıt Ol</button>
  </div>
</header>

Temel ilkeler:

• Semantik: <header> etiketi kullanmak.
• Esnek tasarım: Flexbox veya Grid kullanarak hizalama ve uyum sağlar.
• Bileşenlerin ayrımı: Logo, gezinme ve düğmeleri ayrı bloklar halinde ayırmak.
• Erişilebilirlik: Semantik etiketler (<nav>, <ul>, <li>, <a>) ve alt öznitelikleri kullanmak.
• Modülerlik: Stilleri kolay bakım için bloklara (.logo, nav, .controls) uygulamak.
• Duyarlı tasarım: Farklı ekran boyutlarına uyum sağlamak için medya sorguları eklemek.

Yapı, başlığın karmaşıklığı ve içeriğine bağlı olarak değişebilir (örneğin, arama çubuğu, açılır menüler ekleme gibi).