آموزش HTML - بخش سیزدهم: مفهوم اینلاین و بلاک و معرفی تگ Div
المان‌های div مخفف کلمه divison هستند. divison به‌معنای تقسیم کردن است و درواقع المان‌های div نیز وظیفه تقسیم‌بندی صفحات به بخش‌های مختلف را دارند. درواقع به کمک المان Div شما می‌توانید صفحاتتان را به بخش‌های مختلف ( از این به بعد بهتر است بدانید به divهای مختلف) تقسیم‌بندی می‌کنید.
برای درک بهتر مثالی می‌زنیم. فرض کنید صفحه اچ‌تی‌ام‌ال شما همانند یک انباری است و المان‌های اچ‌تی‌ام‌ال (همچون متن‌‌ها یا هدرها یا هر چیز دیگر) وسایل این انباری هستند. اگر بخواهید هر المان را به‌صورت مرتب در جای خود قرار دهید ناچارید تا آن‌ها را دسته‌بندی کنید وگرنه همه آن‌ها روی هم تل‌انبار می‌شوند. به همین خاطر هم المان div این وظیفه را بر عهده می‌گیرد. درواقع این المان همانند جعبه‌های تو خالی است که درکنار هم قرار می‌گیرند. این جعبه‌های تو خالی می‌توانند ظاهر سایت شما را مرتب نگاه دارند. این جعبه‌های تو خالی در درون خود المان‌های اچ‌تی‌ام‌ال را جای می‌دهند.
حالا که با مفهوم کلی این المان و کاربرد آن بیشتر آشنا شدید, سراغ نحوه استفاده از المان div در اچ‌تی‌ام‌ال خواهیم رفت. منتها قبل از آن, بد نیست اگر با مفهومی مهم به‌نام بلاک المان و اینلاین المان آشنا شوید.
المان‌های بلاک و المان‌های اینلاین (درون خطی)
یکی از بخش‌های مهم در اچ‌تی‌ام‌ال دانستن مفهوم بسیار ساده ولی پراهمیت بلاک و اینلاین است. المان‌های اچ‌تی‌ام‌ال به دو نوع تقسیم می‌شوند. المان‌های بلاک (block eleman) و المان‌های یک خطی (inline).
در المان‌های بلاک (block eleman), المان مدنظر کل فضایی که دراختیار دارد را اشغال می‌کند و اجازه نمی‌دهد که المان دیگری درکنار آن قرار بگیرد. درواقع این المان‌ها چندان اجتماعی نیستند و طاقت تحمل یک همسایه را هم درکنار خود ندارند.
مثلا المان پاراگراف را یکبار امتحان کنید. شما به‌صورت هم‌زمان نمی‌توانید دو المان پاراگراف را در یک خط درکنار هم جای دهید. درواقع المان‌هایی که بعد از این المان‌ها نوشته می‌شود بدون تردید از سطر بعدی شروع خواهد شد.
به مثال زیر دقت کنید:
نمونه
خط اول
خط دوم
خط سوم
نتیجه‌ای که مرورگر نمایش خواهد داد
خط اول
خط دوم
خط سوم
همان‌طور که دیدید، بعد از بستن المان پاراگراف اول، پاراگراف دوم از خط بعدی شروع شد. با وجود آنکه ما هر سه تگ پاراگراف را در هنگام نوشتن کد در یک خط نوشتیم، ولی درنتیجه نهایی هر کدام از آن‌ها یک سطر را اشغال می‌کند و سطر دوم و سوم را نیز پر می‌کنند. به همین خاطر به چنین المان‌هایی بلاک المان می‌گویند چون اجازه قرار گرفتن المان دیگری را درکنار خود نمی‌دهند و به‌طور کامل فضای اطراف خود را پر می‌کنند.
این موضوع در المان‌های دیگری همچون هدینگ‌ها یا لیست‌ها (
, , ) نیز صادق است. در طرف مقابل، المان‌های اینلاین المان‌های سازگارپذیر تر و خوش برخوردتری هستند. این المان‌ها مهمان نوازند و هیچگاه یک خط کامل را برای خودشان اشغال نمی‌کنند. آن‌ها درکنار المان‌های اینلاین دیگر بی سروصدا قرار می‌گیرند. از جمله این المان‌ها میتوان , , , اما این مقدمه‌ها را برای این گفتیم تا به المان div برسیم. با این تفاسیر اکنون شما فکر می‌کنید المان Div جزو کدام دسته از المان‌ها محسوب می‌شود؟المان Div از نوع المان‌های بلاک است و زمانی‌که مورد استفاده قرار بگیرد نمی‌گذارد المان دیگری جای آن را بگیرد. این المان درواقع برای بخش بندی صفحات اچ‌تی‌ام‌ال مورد استفاده قرار می‌گیرد. درواقع برای درک بهتر همان مثال جعبه را فرض کنید. المان‌های div همانند جعبه‌های یک انباری که هر وسیله‌ای را در درون خود جای می‌دهد و بدین ترتیب نظم و فضای قابل تقسیمی را به شما ارائه می‌دهند و کمک می‌کنند وسایل و جعبه‌ها را هر طور که دوست دارید در جای دلخواه خود قرار دهید. بدون آنکه جعبه‌ای مزاحم جعبه دیگر باشد. با این المان و کاربرد آن در صفحه بندی و لایوت صفحه به مرور و خصوصا در جلسات مربوط به CSS بیشتر آشنا خواهیم شد. درحال‌حاضر اشاره مختصری به کاربرد این المان در اچ‌تی‌ام‌ال می‌پردازیم.المان Div منو منو منوالمان Divهمان‌طور که مشاهده می‌کنید شما با بازکردن یک المان Div و قرار دادن استایل‌ها و طول و عرض دلخواه به آن می‌توانید به‌راحتی صفحه خود را به بخش‌ها و ظرف‌های مختلف تقسیم‌بندی کرده و در درون هر یک از آن‌ها محتویات دلخواه خود را قرار دهید. مثلا ما در داخل این Div خالی، از تگ P برای نوشتن متن استفاده کرده‌ایم.div فوتر برای ایجاد یک المان Div تنها کافی است تا تگ استفاده کنید. اما المان‌های Div به خودی خود ظاهری ندارند و این استایل یا المان درون آن‌ها است که بدان‌ها شکل ظاهری می‌بخشد.برای درک بهتر به مثال بالا توجه کنید. در این مثال از سه المان Div استفاده شده است. المان Division هدر با رنگ پس‌زمینه مشکی به‌عنوان اولین div نوشته شده است. پس المان هدر در قالب بالا بدین صورت نوشته می‌شود:style="background-color:black; "> style=" text-align:center">City Gallery
المان بعدی منوی کنار صفحه است که به همین ترتیب با قرار دادن یک المان Div با طول و عرض مشخص به‌عنوان ظرف در برگیرنده این المان، در خود متن‌های نوشته شده را در برگرفته است.
پس باتوجه‌به مثال متوجه شدیم که برای آنکه المان div خود را بتوانید ببنیید باید حتما از اتریبیوت استایل استفاده کنید و بدان رنگ و ابعاد بدهید یا حداقل یک المان دیگر در آن قرار دهید. به مثال‌های زیر توجه کنید:
نمونه کد
style="width:50px; height:50px; background-color:red">
style="width:50px; height:50px; background-color:blue">
style="width:50px; height:50px; background-color:green">
style="width:50px; height:50px; background-color:yellow">
نتیجه ای که در مرورگر خواهید دید
نتیجه این کد در صفحه اشکال رنگی می‌شود. این اشکال رنگی همان divهای صفحه است که می‌توانند لایه‌بندی صفحه مورد استفاده قرار گیرند.
حالا در این مرحله قصد داریم تا یکی از این المان‌های div را به سایت دلخواه لینک کنیم. مثلا المان سبز رنگ را به سایت زومیت لینک می‌کنیم:
برای این کار همانند قبل، المان div که قرار است لینک شود را بین دو تگ قرار می‌دهیم.
href="https://www.zoomit.ir> style="width:50px; height:50px; background-color:green">
href="zoomg.ir"> style="width:50px; height:50px; background-color:green">
تا به اینجای کار مفاهیم اولیه استفاده از المان div را آموخته‌ایم. این المان در ایجاد صفحات HTML نقش بسیاری دارد ولی برای استفاده بهتر از آن باید با CSS آشنا باشید. به همین خاطر نحوه استفاده از این المان را در شروع آموزش CSS بازگو خواهیم کرد.
امیدواریم که این بار هم این آموزش، موفق به جلب رضایتتان شده باشد. تجربیات، پیشنهاد‌ها و نظرات شما بدون شک در ادامه‌ی این مقالات آموزشی تأثیر بسزایی خواهد داشت. پس لطفا با ما در ارتباط باشید.
نظرات