آموزش HTML - چیدمان‌ها

چیدمان‌های HTML نحوه قرارگیری اجزای مختلف در یک صفحه وب HTML را مشخص می‌کنند. داشتن ساختاری مناسب برای چیدمان صفحه وب، برای ایجاد تجربه‌ای کاربرپسند در وب‌سایت ما اهمیت دارد. طراحی چیدمان یک وب‌سایت با ظاهری زیبا و تجربه کاربری مطلوب، زمان قابل‌توجهی می‌طلبد.

عناصر چیدمان HTML

عناصر زیر برای ایجاد ساختار چیدمان HTML استفاده می‌شوند:

برای آشنایی با عناصر مختلفی که برای ایجاد چیدمان‌های HTML استفاده می‌شوند، همراه با مثال‌های آن‌ها، به این فصل مراجعه کنید: عناصر چیدمان HTML

مثال‌هایی از چیدمان‌های HTML

در ادامه، چند مثال برای نمایش طرح‌های مختلف چیدمان HTML آورده شده است. برای طراحی چیدمان از CSS و چارچوب‌های CSS استفاده می‌شود. عناصر معرفی‌شده در بالا برای ایجاد ساختار چیدمان به کار می‌روند.

تعریف یک چیدمان HTML

می‌توانیم با استفاده از تگ‌هایی مانند <header>, <footer>, و <nav> به‌سادگی یک چیدمان HTML ایجاد کنیم. کد زیر نحوه ایجاد یک چیدمان HTML را نشان می‌دهد:

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .header {
         background-color: #b3e0f2;
         text-align: center;
         padding: 20px;
         font-size: 2em;
         font-weight: bold;
      }
      .container {
         display: flex;
      }
      .sidebar {
         width: 20%;
         background-color: #f4f4f4;
         padding: 20px;
      }
      .content {
         width: 80%;
         background-color: #f9f9f9;
         padding: 20px;
      }
      .footer {
         background-color: #b3e0f2;
         text-align: center;
         padding: 10px;
         position: fixed;
         width: 100%;
         bottom: 0;
      }
   </style>
</head>
<body>
      <div class="header">
         Title
      </div>
      <div class="container">
         <div class="sidebar">
            <a href="#">Home</a>
            <a href="#">Learn HTML</a>
            <a href="#">About Us</a>
         </div>
         <div class="content">
            <h1>Home</h1>
            <p>This is a home page.</p>
         </div>
      </div>
      <div class="footer">
         Footer
      </div>
</body>
</html>

تعریف یک چیدمان HTML با استفاده از بوت‌استرپ

می‌توان از کتابخانه CSS بوت‌استرپ برای ایجاد چیدمان در HTML استفاده کرد. کد زیر نحوه انجام این کار را نشان می‌دهد:

<!DOCTYPE html>
<html lang="en">
<head>
      <!--  Bootstrap CDN Link -->
      <link href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" 
            rel="stylesheet">
</head>

<body>
   <!-- Header -->
   <header class="bg-info text-white text-center py-4">
      <h1>Title</h1>
   </header>

   <!-- Main Container -->
   <div class="container-fluid">
      <div class="row">
         <!-- Sidebar -->
         <nav class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
               <div class="sidebar-sticky">
                  <ul class="nav flex-column">
                     <li class="nav-item">
                        <a class="nav-link active" href="#">
                           Home
                        </a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="#">
                           Learn HTML
                        </a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="#">
                           About Us
                        </a>
                     </li>
                  </ul>
               </div>
         </nav>

         <!-- Content -->
         <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
            <h2>Home</h2>
            <p>This is a home page.</p>
         </main>
      </div>
   </div>

   <!-- Footer -->
   <footer class="bg-info text-white text-center py-3">
      Footer
   </footer>
</body>
</html>

روش‌های مختلف ایجاد چیدمان‌های HTML

چهار روش مختلف برای ایجاد و طراحی چیدمان‌های HTML وجود دارد. با استفاده از این روش‌ها می‌توانید چیدمان‌های ساده و چندستونه ایجاد کنید:

• ویژگی Float در CSS: روشی کلاسیک برای کنترل موقعیت و نحوه قالب‌بندی عناصر در یک صفحه وب است.
• ویژگی Flexbox در CSS: برای ایجاد چیدمان‌های پویا و تنظیم موقعیت عناصر در اندازه‌های مختلف صفحه نمایش استفاده می‌شود.
• ویژگی Grid در CSS: برای ایجاد چیدمان‌های پیچیده به شکل شبکه استفاده می‌شود.
• چارچوب‌های CSS: چارچوب‌هایی مانند بوت‌استرپ امکان ایجاد چیدمان‌های پویای HTML را فراهم می‌کنند.

برای یادگیری نحوه استفاده از CSS جهت ایجاد چیدمان‌های HTML، به فصل چیدمان‌ها با استفاده از CSS مراجعه کنید.