آموزش طراحی سایتآموزش HTML

عناصر inline level و block level در HTML

عناصر inline و block به چه عناصری در html گفته می شود ؟ چه تفاوتی بین عناصر درون خطی و بلاکی وجود دارد؟ اگر به دنبال یافتن پاسخ این سوالات هستید این مقاله آموزشی را از دست ندهید.

عناصر inline و block در HTML

در جلسه گذشته به معرفی  تگ del و تگ s و تگ strike در HTML پرداختیم در این جلسه از آموزش HTML قصد داریم شما را با عناصر inline level و block level در HTML آشنا نماییم.

عناصر در HTML با توجه به نوعشان به صورت پیش فرض به دو صورت نمایش داده می‌شوند یا به صورت block level (بلاکی) و یا به صورت inline level (درون خطی).
حال می خواهیم به معرفی این دو دسته در HTML بپردازیم .

  • عناصر inline block (درون خطی)

    این دسته از عناصر تنها به اندازه‌ی محتوای درون خود فضا اشغال می‌کنند تگ span ، تگ img ، تگ em ، تگ a و … از جمله عناصر inline level (درون خطی) به شمار می‌روند.

    عناصر درون خطی را می‌توان در یک سطر کنار هم قرار داد برای درک بهتر به مثال زیر توجه نمایید .در این مثال از تگ span و تگ em که از جمله عناصر درون خطی هستند استفاده شده است.

    <em>
        آموزش طراحی سایت 
    </em>
    <span> 
        در سایت میزفا 
    </span>
    نتیجه کد - inline level
    نتیجه کد بالا
  • عناصر block level (بلاکی)

    این دسته از عناصر یک سطر را اشغال می‌کنند تگ p ، تگ div ، تگ form و تگ li و … از جمله عناصر block level (بلاکی) به شمار می‌روند.
    برای درک بهتر عناصر block level به مثال زیر توجه کنید :

    <p>  
       آموزش طراحی سایت 
    </p>

    کدهای مثال بالا را درون notepad کپی کرده و سپس فایل را با پسوند htm یا html ذخیره نمایید سپس بر روی فایل کلیک راست کرده و اشاره گر موس خود را بر روی گزینه open with ببرید و مرورگر مورد نظر خود را برای نمایش کد html انتخاب کنید. حال شما در صفحه مرورگر خود نتیجه‌‌ي کد وارد شده را مشاهده خواهید کرد پس از مشاهده عبارت ” آموزش طراحی سایت ” روی صفحه مرورگر ، همانند تصویر زیر بر روی صفحه مرورگر راست کلیک کرده و گزینه‌ی Inspect Element را انتخاب کنید.

     

    نتیجه کد - Inspect Element
    Inspect Element

 

همانند تصویر زیر صفحه‌‌‌‌‌‌‌‌‌‌ي Inspect Element در پایین و یا کنار صفحه مرورگر برای شما باز می شود و شما می توانید در این قسمت کدهای خود را مشاهده نمایید بر روی آموزش طراحی سایت که درون تگ p قرار گرفته است کلیک نمایید حال به صفحه مرورگر خود نگاه کنید تمامی فضایی که با رنگ آبی مشخص شده است به تگ p که یک عنصر بلاکی است اختصاص داده شده است و هیچ عنصر دیگری نمی تواند در این فضا قرار بگیرد .

 

 

نتیجه کد - block level
نتیجه کد – عناصر block level

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

منبع : میزفا

برچسب ها

علی اسمعیلی

درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم...

نوشته های مشابه

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر