خواندن ۴ دقیقه·۵ سال پیش

07 - Block & Inline Level Elements

به نام ایزد دانا

در این پست آموزشی در مورد عناصر درون خطی و بلاکی صحبت خواهیم کرد.

امیدوارم این مطلب براتون مفید باشه و یادتون نره برای ما نظرات و انتقاداتتون رو ارسال کنید.

اگر سوال یا هر حرفی دارید میتونید به ایمیل من به آدرس ARiyou.public@gmail.com و یا در شبکه های اجتماعی با شناسه (ID | User name) زیر منو پیدا کنید

Telegram, Twitter, Facebook & ... By : @ARiyou2000

با تشکر از همه شما دوستان، آریو جهان

دیگه بریم سر اصل مطلب

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

با تشکر از پیشگامان صفر و یک فرساد

تگ ها و یا عناصر Block Level

این المان ها ( elements ) تمام فضای خط را به خود اختصاص می دهند و در صورتی که یک تگ در کنار آنها قرار گیرد آنرا به خط بعد منتقل می کنند .به عناصر و یا تگ هایی که یک خط را بصورت کامل اشغال کنند عناصر Block Level می گویند . این تگ ها بدون در نظر گرفتن محتوا و فضای اشغال شده به سایر تگ ها و المان ها اجازه نمی دهند که در کنار آنها قرار بگیرند و سایر تگ ها را به زیر خود منتقل خواهند کرد . ممکن است متن و یا محتوای درون این تگ ها چند حرف و یا یک خط کامل باشد .

به عنوان مثال قطعه کد زیر را در نظر بگیرید:

<!DOCTYPE html> 
  <html>
    <head>
         <meta charst=&quotutf-8&quot/>
         <title>پیشگامان صفر و یک فرساد</title>
    </head>
    <body>
         <h1> این تگ بلاکی می باشد </h1> <p>این تگ نیز بلاکی می باشد </p>
    </body>
  </html>

شاید برداشت شما این باشد که محتوای دو تگ h1,p باید در کنار هم قرار بگیرند. اما خروجی قطعه کد بالا در مرورگر به صورت زیر خواهد بود:

تگ های inline-level

این دسته از المان ها در html ، فقط محدوده مورد نظر خودشان را در یک خط اشغال می کنند. بطوریکه تگ ها و المان های دیگر می توانند در همان block (خط) در کنار آنها قرار بگیرند.

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

به قطعه کد زیر توجه کنید که شامل چندین عنصر inline-level می باشد:

<!DOCTYPE html> 
  <html>
    <head>
         <meta charst=&quotutf-8&quot/>
         <title>پیشگامان صفر و یک فرساد</title>
    </head>
    <body>
         <span> تگ این لاین </span> <span> دومین  تگ این لاین </span> <a href=&quothttps://pzof.ir &quot> طراحی سایت  </a>
    </body>
  </html>

خروجی قطعه کد بالا در مرورگر به این شکل خواهد بود:

تگ های Inline level میتوانند درون تگ های inline level دیگر قرار گیرند.
تگ های Inline level میتوانند درون تگ های Block level قرار گیرند.
تگ های Block level نمیتوانند درون تگ های inline level قرار گیرند.
تگ های Block level میتوانند درون تگ های Block level دیگر قرار گیرند.
با css می توان level هر عنصر را تغیر داد ( درجلسات css با آن ٱشنا خواهید شد).

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

برای دیدن لیست عناصر inline level می تونید یه سر به وب سایتِ، سایت آموزی بزنید.

در ضمن یادتون باشه من از پست هایی که میزارم 10 خطش رو مجبورم و بقیش رو واسه دل خودم مینویسم. پس واقعا امیدوارم سرتون درد نیومده باشه و لذت برده باشید.

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

مثل همیشه نظراتونو می‌خونم و جواب می‌دم و اگه از نوشته‌هام خوشتون اومد او قلب تو خالیه‌ رو قرمز کنین برام و دنبالم کنید تا انگیزه داشته باشم بنویسم❤️

شب و روزگار بر شما خوش.

بدرود.

ARiyou Jahan ‏12/01‏/2019‏ 10:34 ب.ظ

html inline block

ARiyou Jahan

شاید از این پست‌ها خوشتان بیاید