آموزش HTML - بلوک ها

عناصر HTML را می توان به دو دسته اصلی طبقه بندی کرد: عناصر سطح بلوک (block-level) و عناصر درون خطی (inline) . این دسته ها نحوه رفتار عناصر HTML را در رابطه با سایر عناصر موجود در صفحه توصیف می کنند.

عناصر بلوکی در HTML

عناصر سطح بلوک آن دسته از عناصری هستند که تمام عرض موجود را در اختیار خود می گیرند و یک خط جدید بعد از عنصر ایجاد می کنند. این عناصر معمولاً بخش های بزرگی از محتوا را در یک صفحه وب ایجاد می کنند. چند نمونه از عناصر سطح بلوک عبارتند از:

<div>
<h1> تا <h6>
<p>
<ul> و <ol>
<form>
<table>

عناصر درون خطی در HTML

از طرف دیگر عناصر درون خطی آن دسته از عناصری هستند که فقط عرض لازم را برای نمایش محتوای خود می گیرند و بعد از عنصر خط جدیدی ایجاد نمی کنند. این عناصر معمولاً در یک عنصر سطح بلوک برای افزودن محتوای اضافی یا استایل دادن به متن استفاده می‌شوند. چند نمونه از عناصر درون خطی عبارتند از:

<a>
<img>
<strong> و <em>
<span>
<input>

توجه به این نکته ضروری است که برخی از عناصر، مانند <li>، بسته به نحوه استفاده از آنها می توانند به عنوان عناصر سطح بلوک و درون خطی رفتار کنند. علاوه بر این، رفتار نمایش یک عنصر را می توان با استفاده از CSS تغییر داد.

عناصر div و span در HTML

تگ های <div> و <span> دو تگ مهم هستند که اغلب برای گروه بندی تگ های HTML دیگر استفاده می شوند.

تگ <div> یک عنصر در سطح بلوک است که برای گروه بندی سایر عناصر HTML با هم و اعمال استایل ها به آنها به عنوان یک گروه استفاده می شود. هیچ ویژگی بصری ذاتی ندارد، اما اغلب برای ایجاد بخش هایی از یک صفحه وب یا گروه بندی محتوای مرتبط با یکدیگر استفاده می شود. می‌توانید یک کلاس یا یک ویژگی ID به عنصر <div> اضافه کنید تا استایل های خاصی را در گروه عناصر موجود در آن اعمال کنید. برای مثال، می‌توانید از عنصر <div> برای گروه‌بندی مجموعه‌ای از تصاویر استفاده کنید، و سپس با استفاده از CSS، یک عرض یا حاشیه خاص را برای کل گروه اعمال کنید.

در اینجا مثالی از نحوه استفاده از عنصر <div> برای گروه بندی سایر عناصر HTML آورده شده است:

<div class="container">
   <h1>وب سایت من</h1>
   <p>به وبسایت من خوش آمدید!</p>
   <img src="image.jpg">
   <img src="image.jpg">
</div>

در این مثال، ما از عنصر <div> برای گروه بندی یک عنوان، یک پاراگراف و دو تصویر با هم استفاده کرده ایم. ما همچنین یک ویژگی کلاس "container" را به عنصر <div> اضافه کرده ایم که می تواند برای اعمال استایل های خاص به این گروه از عناصر استفاده شود.

تگ <span> یک عنصر درون خطی است که برای گروه بندی قطعات کوچک محتوا با هم، معمولاً در یک عنصر سطح بلوک بزرگتر استفاده می شود. اغلب برای اعمال سبک ها در بخش خاصی از متن، مانند تغییر رنگ یا اندازه قلم یک کلمه واحد در یک جمله استفاده می شود. همچنین می‌توانید یک کلاس یا یک ویژگی ID به عنصر <span> اضافه کنید تا استایل های خاصی را در گروه عناصر موجود در آن اعمال کنید.

در اینجا مثالی از نحوه استفاده از عنصر <span> برای اعمال سبک ها در بخش خاصی از متن آورده شده است:

<p>خوش آمدی به <span class="highlight">وب سایت من</span>! </p>

در این مثال، ما از یک عنصر <span> با ویژگی کلاس "highlight" برای اعمال سبک متفاوتی برای کلمه "website" در یک عنصر پاراگراف بزرگتر استفاده کرده ایم. این به شما امکان می دهد تا به طور انتخابی به تک تک محتواها در یک عنصر سطح بلوک بزرگتر استایل دهید.

به طور کلی، تگ‌های <div> و <span> تگ‌های ضروری HTML هستند که به شما امکان می‌دهند محتوا را به روشی انعطاف‌پذیر و دقیق گروه‌بندی کنید و استایل دهید. با استفاده از این تگ ها می توانید طرح های پیچیده ای را در صفحه وب خود ایجاد کنید و استایل ها را برای گروه های خاصی از عناصر یا حتی تک تک محتواها اعمال کنید. آنها برچسب های همه کاره ای هستند که می توانند به روش های مختلف مورد استفاده قرار گیرند و آنها را به بخش مهمی از جعبه ابزار هر توسعه دهنده وب تبدیل می کند.

نکته بسیار مهم

توجه داشته باشید استفاده از یک عنصر سطح بلوک (block) در یک عنصر درون خطی (inline) در HTML امکان پذیر نیست. با توجه به مشخصات HTML، عناصر سطح بلوک برای تعریف بخش‌های بزرگ‌تری از محتوا در یک صفحه وب در نظر گرفته شده‌اند، و معمولاً به‌عنوان یک بلوک مستطیل شکل نمایش داده می‌شوند که تمام عرض ظرف والد را در بر می‌گیرد. نمونه هایی از عناصر سطح بلوک عبارتند از <div>، <p>، <h1> تا <h6>، <ul>، <ol> و بسیاری دیگر.

از سوی دیگر، عناصر درون خطی برای تعریف قطعات کوچک‌تر محتوا در یک عنصر سطح بلوک بزرگ‌تر در نظر گرفته شده‌اند، و معمولاً به صورت خطی با متن نمایش داده می‌شوند. نمونه هایی از عناصر درون خطی عبارتند از <span>، <a>، <strong>، <em>، <img>، و بسیاری دیگر.

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

بنابراین، بهتر است از استفاده از عناصر سطح بلوک در عناصر درون خطی در HTML خودداری کنید و در عوض از آنها همانطور که در نظر گرفته شده است برای ایجاد یک صفحه وب ساختار یافته استفاده کنید.

مثال چیدمان صفحه HTML با استفاده از <div> و <span>

چیدمان صفحه HTML با استفاده از تگ های <div> و <span> یک تکنیک رایج برای ایجاد یک طراحی صفحه وب انعطاف پذیر و واکنش گرا است. تگ <div> یک عنصر در سطح بلوک است که معمولاً برای ایجاد بخش های بزرگتر از محتوا در یک صفحه وب استفاده می شود، در حالی که تگ <span> یک عنصر درون خطی است که برای استایل دادن به قطعات کوچکتر محتوا در یک بلوک بزرگتر استفاده می شود.

در اینجا مراحل اساسی برای چیدمان صفحه HTML با استفاده از تگ های <div> و <span> آمده است:

ساختار کلی طرح را با استفاده از تگ های <div> تعریف کنید. از تگ <body> برای محصور کردن کل محتوای صفحه استفاده کنید و سپس از تگ های <div> برای ایجاد بخش ها یا کانتینرهای جداگانه در صفحه استفاده کنید. مثلا:

<body>
  <div id="header">
    <!-- محتوای بخش هدر اینجا قرار می گیرد -->
  </div>
  <div id="main-content">
    <!-- محتوای بخش اصلی اینجا قرار می گیرد -->
  </div>
  <div id="footer">
    <!-- محتوای بخش پاورقی اینجا قرار می گیرد -->
  </div>
</body>

در این مثال، ما سه تگ <div> برای تعریف قسمت های هدر، محتوای اصلی و پاورقی صفحه ایجاد کرده ایم.

برای کنترل ظاهر و چیدمان تگ های <div> استایل ها را اضافه کنید. شما می توانید از CSS برای اعمال سبک های مختلف برای هر تگ <div> استفاده کنید، مانند تعیین رنگ پس زمینه، عرض یا حاشیه اطراف آن. مثلا:

#header {
  background-color: #333;
  color: #fff;
  height: 100px;
  padding: 10px;
}

#main-content {
  width: 80%;
  margin: 0 auto;
}

#footer {
  background-color: #333;
  color: #fff;
  height: 50px;
  padding: 10px;
}

در این مثال، ما از CSS برای تنظیم استایل های مختلف برای هر تگ <div> استفاده کرده ایم. قسمت‌های سرصفحه و پاورقی دارای رنگ و ارتفاع پس‌زمینه مشخصی هستند، در حالی که بخش محتوای اصلی دارای عرض و حاشیه مشخصی برای مرکز آن در صفحه است.

از تگ‌های <span> برای استایل دادن به تکه‌های محتوا در تگ‌های <div> استفاده کنید. می‌توانید از تگ‌های <span> برای اعمال استایل های مختلف در بخش‌های خاصی از متن یا محتوای دیگر در تگ‌های <div> بزرگ‌تر استفاده کنید. مثلا:

<div id="header">
  <h1>وب سایت من</h1>
  <p>خوش آمدی به  <span class="highlight">وب سایت من</span>! </p>
</div>

در این مثال، ما از یک تگ <span> با ویژگی کلاس "highlight" استفاده کرده‌ایم تا یک سبک متفاوت برای کلمه "website" در تگ هدر بزرگتر <div> اعمال کنیم.

به طور کلی، با استفاده از تگ‌های <div> و <span>، می‌توانید یک طرح‌بندی انعطاف‌پذیر و واکنش گرا ، با قابلیت استایل دادن به بخش های محتوا ، برای صفحه HTML خود ایجاد کنید.

طرح بندی و استایل - درس قبلی

درس بعدی - عناصر سمانتیک