آموزش کار با عناصر Block و Inline در HTML

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

آموزش کار با عناصر Block و Inline در HTML

Free-Learn

عناصر Block و Inline در HTML

در این بخش از آموزش های زبان HTML میخواهیم با عناصر یا تگ های بلاکی یا Block و اینلاینی یا Inline در زبان HTML آشنا شویم، لطفا در ادامه و تا پایان این بخش با من همراه باشید.

هر یک از تگ ها یا عناصر HTML بصورت پیش فرض بسته به نوع عنصر دارای یک حالت نمایش می باشند، بطور کلی حالت نمایش تگ ها یا عناصر در HTML به ۲ صورت میتونه باشه :

  • نمایش بلاکی یا Block
  • نمایش درون خطی یا Inline

که در ادامه میخواهیم با این حالت های نمایش آشنا شویم و همچنین در ادامه میتوانید لیست تمام تگ های HTML که بصورت اینلاینی یا بلاکی هستند را مشاهده نمایید.

Free-Learn

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

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

برای اینکه بتونید بطور کامل عناصر بلاک و اینلاین رو درک نمایید لطفا به دستورات زیر توجه نمایید و همچنین برای مشاهده خروجی دستورات زیر بروی دکمه (امتحان کنید) کلیک نمایید.

امتحان کنید

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

ولی در مقابل همانطور که مشاهده مینمایید، تگ <span> که یک تگ اینلاینی یا Inline می باشد به راحتی اجازه میده تگ های اینلاینی دیگر در کنارش قرار بگیرند. و بطور کلی اینکه تگ های Inline همگی در یک خط قرار میگیرند.

Free-Learn

در جدول زیر میتوانید تمام تگ های HTML که حالت نمایش بلاکی یا Block دارند را مشاهده نمایید:

article aside blockquote canvas
dl div dd address
figure figcaption fieldset dt
header h1-h6 form footer
ol ul li hr
output noscript nav main
table section pre p
video tfoot

مثال از عناصر بلاکی در HTML :

امتحان کنید

Free-Learn

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

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

همانطور که در مثال اول کمی بالاتر مشاهده نمودید ما از چندین تگ اینلاینی استفاده کرده بودیم و همه ی آنها در یک سطر در کنار همدیگر قرار گرفته بودند، و این یعنی یک تگ با حالت نمایش اینلاینی یا درون خطی یا Inline در HTML .

برای مثال لطفا به دستورات زیر توجه نمایید :

امتحان کنید

در جدول زیر میتوانید تگ هایی که در HTML دارای حالت نمایش درون خطی یا Inline هستند را مشاهده نمایید.

b acronym abbr a
button br big bdo
em dfn code cite
kbd input img i
q object map label
small select script samp
sup sub strong span
var tt time textarea

Free-Learn

مثال های بیشتر از عناصر بلاکی و اینلاینی در HTML

مثال شماره ۱ :

امتحان کنید

مثال شماره ۲ : (در این مثال با استفاده از دستورات CSS ما میتونیم به راحتی حالت نمایش یک تگ را به دلخواه تغییر دهیم)

امتحان کنید

دوستان امیدوارم که خسته نشده باشید, به پایان این بخش یعنی آموزش کار با عناصر Block و Inline در HTML رسیدیم. لطفا در بخش های بعدی همچنان با بنده همراه باشید.

Free-Learn

  • خلاصه ی این بخش
  • بطور کلی یک تگ میتونه ۲ حالت نمایش داشته باشه: یا بلاکی (Block) یا اینلاینی (Inline)
  • یک تگ بلاکی تمام عرض یک سطر رو بخودش اختصاص میده و تگی که بعد از آن قرار میگیرد رو به سطر بعد منتقل میکند.
  • یک تگ اینلاینی فقط به اندازه خودش فضارو اشغال میکنه و اجازه میده بقیه ی تگ های اینلاینی دیگر در کنارش قرار بگیرند.
  • با استفاده از CSS میتوان به راحتی حالت نمایش یک تگ را تغییر داد، یعنی میشه یک تگی که بلاکی هست رو اینلاینی کرد و برعکس.
  • یک تگ اینلاینی میتونه درون یک تگ بلاکی قرار بگیرد ولی یک تگ بلاکی نمیتونه داخل یک تگ اینلاینی قرار بگیرد.
  • دانلود PDF این آموزش
  • برای دانلود فایل PDF این آموزش کلیک نمایید