فیلم آموزشی آشنایی با عناصر inline level و block level در html

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

ما در این فیلم آموزشی مشخصات و رفتارهای هر دو گروه از عناصر html را برای شما توضیح خواهیم داد. همچنین کاربردها و نکاتی که inline و block levelها دارند را با مثال برای شما تشریح خواهیم کرد تا به راحتی با مفهوم این ویژگی ها آشنا شوید.

در ادامه ی سلسله مباحث آموزش طراحی سایت، در قسمت فیلم آموزش کاربرد مشخصه display می توانید در مبحث css هم مطالب بیشتری در این زمینه بیاموزید.

[hdplay id=12]

برای دانلود فیلم آموزشی و اسنیپت های آموزش مربوطه از لینک های زیر استفاده کنید :

[free_vip]
[video_download cat=’html’ url=’http://dl.onliner.ir/html-videos/inline-level-vs-block-level.mp4′]دانلود فیلم آموزشی آشنایی با عناصر inline level و block level در html[/video_download]
[/free_vip]

دسترسی سریع :

متن فیلم آموزشی آشنایی با عناصر inline level و block level در html

عناصر html به دو دسته inline level  و block level تقسیم می شوند.

inline level:

این Element ها خطی اند و اگر یک تگ inline level دیگر را کنار آن ها بنویسیم کنار تگ قبلی ما قرار می گیرد و فضایی که لازم دارد را پر می کند و فضای اضافی اشغال نمی کند. در واقع فقط تا جایی که محتوا دارند را اشغال می کنند.

چند تگ inline level :

em         span           Strong           a             Img       …

مثال :

[html]</p>
<p>&lt;em&gt;hello users&lt;/em&gt;</p>
<p>&lt;strong&gt;this is just strong&lt;/strong&gt;</p>
<p>&lt;em&gt;this is just em&lt;/em&gt;</p>
<p>&lt;a href=”#”&gt;this is a&lt;/a&gt;</p>
<p>&lt;img src=&quot;https://onliner.co/web.png&quot;/&gt;</p>
<p>&lt;em&gt;this is just em&lt;/em&gt;</p>
<p>[/html]

bl1

block level:

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

چند تگ  block level:

P              Ul                     Ol               Div                   Br                      Li         form    ….

مثال :

[html]</p>
<p>&lt;em&gt;hello users&lt;/em&gt;</p>
<p>&lt;strong&gt;this is just strong&lt;/strong&gt;</p>
<p>&lt;em&gt;this is just em&lt;/em&gt;</p>
<p>&lt;p&gt;this is just paragraph&lt;/p&gt;</p>
<p>&lt;p&gt;this is just paragraph&lt;/p&gt;</p>
<p>&lt;em&gt;hello users&lt;/em&gt;</p>
<p>&lt;ul&gt;</p>
<p>&lt;li&gt;list item&lt;/li&gt;</p>
<p>&lt;li&gt;list item&lt;/li&gt;</p>
<p>&lt;li&gt;list item&lt;/li&gt;</p>
<p>&lt;li&gt;list item&lt;/li&gt;</p>
<p>&lt;/ul&gt;</p>
<p>&lt;img src=&quot;https://onliner.co/web.png&quot;/&gt;</p>
<p>&lt;strong&gt;this is just strong&lt;/strong&gt;</p>
<p>&lt;em&gt;this is just em&lt;/em&gt;</p>
<p>&lt;a href=”#”&gt;this is a&lt;/a&gt;</p>
<p>[/html]

bl2

می بینیم تگ هایی که block level هستند یک خط را کامل گرفته اند.

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

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

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

دسترسی سریع :

به این صفحه رتبه دهید

1 دیدگاه دربارهٔ «فیلم آموزشی آشنایی با عناصر inline level و block level در html»

  1. بازتاب: آموزش CSS | آموزش کاربرد مشخصه display در CSS

دیدگاه‌ها بسته شده‌اند.

مشاوره رایگان
Scroll to Top