گروه آموزش طراحی سایت ۲۹ شهریور ۱۳۹۰ بدون نظر 1171 بازدید

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

به طور کلی عناصر را می توان به دو دسته ی عمده تقسیم کرد:

  1. عناصر خطی – inline elements
  2. عناصر بلوکی – block elements

عناصر خطی در html

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

تعدادی از عناصر خطی در اچ تی ام ال عبارتند از:

<a>, <span>, <img />, …

برای درک بهتر عناصر خطی، به مثال زیر توجه کنید:

<span>this is an inline element</span>
<a href="https://onliner.ir">web design tutorials">onliner link</a>
<strong>this is another inline element</strong>

کد بالا را ذخیره کنید و با مرورگری باز کنید؛ مشاهده خواهید کرد که تمام عناصر html به کار رفته در کد بالا، کنار یکدیگر قرار میگیرند. چرا که تمامی آن ها عناصر خطی (inline elements) هستند.

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

دسته ی دیگر از عناصر اچ تی ام ال، گونه از عناصر است که وقتی ایجاد می شوند، عناصر قبلی و بعدی در کنار آن ها قرار نگرفته و در فضای کنار آن ها، هیچ عنصر دیگری قرار نمی گیرد.

تعدادی از عناصر بلوکی در اج تی ام ال عبارتند از:

<p>, <div>, <ul>, …

برای درک بهتر عناصر بلوکی، به مثال زیر توجه کنید:

<span>this is an inline element</span>
<p>a sample paragraph</p>
<a href="https://onliner.ir">web design tutorials">Onliner link</a>
<strong>this is another inline element</strong>

کد بالا را ذخیره کرده و بوسیله ی مرورگری باز کنید. مشاهده خواهید کرد عنصر بلوکی <p> در مثال فوق، طوری قرار میگیرد که هیچ عنصر دیگری در کنار آن نیست. در حقیقت اطراف آن را یک فضای خالی تشکیل خواهد داد.

قواعد بکارگیری عناصر بلوکی و خطی به صورت تو در تو

  • عناصر بلوکی را به هیچ وجه نمی توان درون عناصر خطی به کار گرفت.
  • عناصر خطی را می توان درون عناصر بلوکی به کار گرفت.
  • عناصر خطی را می توان درون سایر عناصر خطی به کار گرفت.
  • تنها برخی از عناصر بلوکی را می توان درون سایر عناصر بلوکی به کار گرفت. مثلا می توان عنصر <p> را درون <div> به کار گرفت اما نمی توان عنصر <ul> را درون عنصر <p> به کار گرفت.

نظرات کاربران (۰)