როგორ დავგეგმოთ ჰედერის სტრუქტურა?

CSS

/* ჰედერის კონტეინერის სტილები */
header {
  display: flex; /* Flexbox-ის გამოყენება ელემენტების განლაგებისთვის */
  justify-content: space-between; /* სივრცის განაწილება ელემენტებს შორის */
  align-items: center; /* ელემენტების ვერტიკალური განლაგება */
  padding: 10px 20px; /* შიდა შუალედები */
  background-color: #f0f0f0; /* ფონური ფერი */
}

/* ლოგოს სტილები */
.logo {
  flex-shrink: 0; /* ლოგოს შეკუმშვის თავიდან აცილება */
}

.logo img {
  height: 40px; /* ლოგოს სურათის სიმაღლე */
}

/* ნავიგაციის სტილები */
nav ul {
  list-style: none; /* სია ნიშნების ამოღება */
  margin: 0;
  padding: 0;
  display: flex; /* ჰორიზონტალური განლაგებისთვის flex გამოყენება */
}

nav li {
  margin-left: 20px; /* მენიუს ელემენტებს შორის დაშორება */
}

nav a {
  text-decoration: none; /* ბმულების ქვეშტექსტის ამოღება */
  color: #333; /* ტექსტის ფერი */
}

/* ღილაკებისა და სხვა მართვის ელემენტებისთვის სტილები */
.controls {
  display: flex; /* flexbox გამოყენება */
  align-items: center; /* ვერტიკალური განლაგება */
}

.controls button {
  margin-left: 10px; /* ღილაკებს შორის დაშორება */
}

HTML

<header>
  <div class="logo">
    <img src="logo.png" alt="კომპანიის ლოგო">
  </div>
  <nav>
    <ul>
      <li><a href="/">მთავარი</a></li>
      <li><a href="/about">ჩვენ შესახებ</a></li>
      <li><a href="/services">სერვისები</a></li>
      <li><a href="/contact">კონტაქტი</a></li>
    </ul>
  </nav>
  <div class="controls">
    <button>შესვლა</button>
    <button>რეგისტრაცია</button>
  </div>
</header>

ძირითადი პრინციპები:

• სემანტიკა: <header> ტეგის გამოყენება.
• მოწესრიგი დიზაინი: Flexbox ან Grid გამოყენება ადაპტაციის და რეზპონსივობისთვის.
• კომპონენტების გამიჯვნა: ლოგო, ნავიგაცია, ღილაკები განლაგება სხვადასხვა ბლოკებად.
• მოწვდომლობა: სემანტიკური ტეგების (<nav>, <ul>, <li>, <a>) და alt ატრიბუტების გამოყენება სურათებისთვის.
• მოდულურობა: თითოეული ბლოკის სტილიზაცია (.logo, nav, .controls) მარტივი შენარჩუნებისთვის.
• რეზპონსივ დიზაინი: მედია კითხულობების დამატება სხვადასხვა ეკრანის ზომებისთვის.

სტრუქტურა შეიძლება განსხვავდებოდეს ჰედერის სირთულესა და შინაარსის მიხედვით (მაგალითად, ძიების ხაზი, ჩამოსაშლელი მენიუები და ა.შ.).