بلوک HTML جلسه نهم

بلوک HTML جلسه نهم

آیا تا به حال در هنگام کدنویسی html با این مشکل مواجه شده اید که بعضی عناصر را با اینکه در خطی جداگانه نوشته اید ولی باز هم کنار دیگر الـمنت ها در مرورگر نمایش داده می شوند؟ درست است که شما با تگ </ br> می توانید عنصر را در یک خط جدا قرار دهـید ولی همیشه نمی توان از این تگ برای جدا کردن عناصر استفاده کرد. عناصر html به دو گروه inline level و block level تقسیم می شوند که این ویژگی ها، نقش تعیین کننده ای در طراحی وب سایت شما دارند.عناصر HTML می توانند بوسیله <div>و <span> با هم گروه بندی شوند.این المان ها به صورت بلوک های HTML ای یا المان های درون خطی(inline ) تعریف شده اند.

بلوک HTML جلسه نهم بلوک HTML جلسه نهم بلوک HTML جلسه نهم block level

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

مثال :

<h1>, <p>, <ul>, <table>

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

عناصر درون خطی به طور معمول بدون نیاز به شروع یک خط جدید نمایش داده می شوند.

مثال :

<b>, <td>, <a>, <img>

عنصر <div>

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

  • عنصر <div> عنصر سطح بلوک است که می تواند به عنوان یک ظرف برای گروه بندی عناصر دیگر استفاده شود.
  • عنصر <div> هیچ معنا و مفهوم خاصی ندارد. جز اینکه، به دلیل آن که یک عنصر سطح بلوک است ، مرورگر یک سطر خالی ، قبل و بعد از آن نمایش خواهد داد.
  • هنگامی که عنصر <div> همراه با CSS استفاده می شود، می تواند جهت تنظیم خواص استایل (سبک) برای بلوک های بزرگی از محتوا ، مورد استفاده قرار گیرد.
  • یکی دیگر از استفاده های معمول از عنصر <div>، استفاده جهت طرح بندی سند می باشد. این عنصر “راه قدیمی” تعریف طرح بندی را با استفاده از جداول جایگزین می کند. استفاده از جداول استفاده درست از عنصر <table> نمی باشد. هدف از عنصر <table> ، نمایش داده های جدولی است.

عنصر <span>

تگ span تگی برای المان های درون خطی است که میتواند یک متنی را درون خود جای دهد. این تگ نیز مانند تگ div معنای خاصی ندارد وهنگامی که با CSS استفاده شود میتوانید به آن استایل دهید

  • عنصر <span>، یک عنصر درون خطی است که می تواند به عنوان یک ظرف برای متن استفاده شود.
  • عنصر<span> ، هیچ معنا و مفهوم خاصی ندارد.
  • هنگامی که عنصر <span>، همراه با CSS استفاده می شود، می تواند جهت تنظیم خواص برای قسمتی از متن مورد استفاده قرار گیرد.

برچسب های گروه بندی HTML

برچسب توضیحات
<div> تعریف بخشی در یک سند(سطح بلوک)
<span> تعریف بخشی در یک سند (درون خطی)

 

نکته : با css می توان level هر عنصر را تغیر داد ( درجلسات css با آن ٱشنا خواهید شد.)

دقت کنید که برای معتبر بودن کدهایتان در html5 و xhtml باید بدانید که کدام عناصر خطی اند و کدام عناصر بلاکی. چون مثلا در xhtml نمی توان عناصر بلاکی را درون عناصر خطی نوشت ولی در html5 استثناء وجود دارد.

آموزش HTML آموزش طراحی وب

دسته بندی و برچسب

دیدگاه خود را بیان کنید