آموزش HTML - بخش سیزدهم: مفهوم اینلاین و بلاک و معرفی تگ Div

آموزش HTML - بخش سیزدهم: مفهوم اینلاین و بلاک و معرفی تگ Div

این شماره به المان Division خواهیم پرداخت. Divisionها یا به صورت اختصاری Divها را می‌‍توان یکی از مهمترین المان‌های اچ‌تی‌ام‌ال دانست که در طراحی و ساخت چینش صفحه نقش بسیار مهمی ایفا می‌کنند.

المان‌های div مخفف کلمه divison هستند. divison به معنای تقسیم کردن است و در واقع المان‌های div نیز وظیفه تقسیم بندی صفحات به بخش‌های مختلف را دارند. در واقع به کمک المان Div شما می‌توانید صفحاتتان را به بخش‌های مختلف ( از این به بعد بهتر است بدانید به divهای مختلف) تقسیم بندی می‌کنید.

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

حالا که با مفهوم کلی این المان و کاربرد آن بیشتر آشنا شدید, سراغ نحوه استفاده از المان div در اچ‌تی‌ام‌ال خواهیم رفت. منتها قبل از آن, بد نیست اگر با مفهومی مهم به نام بلاک المان و اینلاین المان آشنا شوید.

 المان‌های بلاک و المان‌های اینلاین (درون خطی)

یکی از بخش‌های مهم در اچ‌تی‌ام‌ال دانستن مفهوم بسیار ساده ولی پراهمیت بلاک و اینلاین است. المان‌های اچ‌تی‌ام‌ال به دو نوع تقسیم می‌شوند. المان‌های بلاک (block eleman) و المان‌های یک خطی (inline).

در المان‌های بلاک (block eleman), المان‌ مورد نظر کل فضایی که در اختیار دارد را اشغال می‌کند و اجازه نمی‌دهد که المان دیگری در کنار آن قرار بگیرد. در واقع این المان‌ها چندان اجتماعی نیستند و طاقت تحمل یک همسایه را هم در کنار خود ندارند.

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

به مثال زیر دقت کنید:

 

<p>خط اول </p>
<p>خط دوم</p>
<p>خط سوم</p>
اموزش html 010.PNG

همانطور که دیدید، بعد از بستن المان پاراگراف اول، پاراگراف دوم از خط بعدی شروع شد. با وجود آنکه ما  هر سه تگ پاراگراف را در هنگام نوشتن کد در یک خط نوشتیم، ولی در نتیجه نهایی هر کدام از  آن‌ها یک سطر را اشغال می‌کند و سطر دوم و سوم را نیز پر می‌کنند. به همین خاطر به چنین المان‌هایی بلاک المان می‌گویند چون اجازه قرار گرفتن المان دیگری را در کنار خود نمی‌دهند و به طور کامل فضای اطراف خود را پر می‌کنند. 

این موضوع در المان‌های دیگری همچون هدینگ‌ها یا لیست‌ها  (<h1>, <p>, <ul>) نیز صادق است.  

در طرف مقابل، المان‌های اینلاین المان‌های سازگارپذیر تر و خوش برخوردتری هستند. این المان‌ها مهمان نوازند و هیچگاه یک خط کامل را برای خودشان اشغال نمی‌کنند. آن‌ها در کنار المان‌های اینلاین دیگر بی سر و صدا قرار می‌گیرند. از جمله این المان‌ها می‌توان  <link , <b>, <td>, <a>, <img اشاره نمود. شما می‌توانید این المان‌ها را در هر جایی از صفحه قرار دهید بدون آنکه باعث مزاحمتی برای المان‌های کنار دستیشان شوید.

اما این مقدمه‌ها را برای این گفتیم تا به المان div برسیم. با این تفاسیر اکنون شما فکر می‌کنید المان Div جزو کدام دسته از المان‌ها محسوب می‌شود؟

المان Div از نوع المان‌های بلاک است و زمانی که مورد استفاده قرار بگیرد نمی‌گذارد المان دیگری جای آن را بگیرد. این المان در واقع برای بخش بندی صفحات اچ‌تی‌ام‌ال مورد استفاده قرار می‌گیرد. در واقع برای درک بهتر همان مثال جعبه را فرض کنید. المان‌های div همانند جعبه‌های یک انباری که هر وسیله‌ای را در درون خود جای می‌دهد و بدین ترتیب نظم و فضای قابل تقسیمی را به شما ارائه می‌دهند و کمک می‌کنند وسایل و جعبه‌ها را هر طور که دوست دارید در جای دلخواه خود قرار دهید. بدون آنکه جعبه‌ای مزاحم جعبه دیگر باشد. با این المان و کاربرد  آن در صفحه بندی و لایوت صفحه به مرور و خصوصا در جلسات مربوط به CSS بیشتر آشنا خواهیم شد. در حال حاضر اشاره مختصری به کاربرد این المان در اچ‌تی‌ام‌ال می‌پردازیم.

اموزش html 13.PNG

 

برای ایجاد یک المان Div تنها کافی است تا تگ <div> </div> استفاده کنید. اما المان‌های Div به خودی خود ظاهری ندارند و این استایل یا المان درون آن‌هاست که بدان‌ها شکل ظاهری می‌بخشد.

برای درک بهتر به مثال بالا توجه کنید. در این مثال از سه المان Div استفاده شده است. المان Division هدر با رنگ پس زمینه مشکی به عنوان اولین div نوشته شده است. پس المان هدر در قالب بالا بدین صورت نوشته می‌شود:

 

<div style="background-color:black; ">
<h1 style=" text-align:center">City Gallery</h1>
</div>

المان بعدی منوی کنار صفحه است که به همین ترتیب با قرار دادن یک المان Div با طول و عرض مشخص به عنوان ظرف در برگیرنده این المان، در خود متن‌های نوشته شده را در برگرفته است.

پس با توجه به مثال متوجه شدیم که برای آنکه المان div خود را بتوانید ببنیید باید حتما از اتریبیوت استایل استفاده کنید و بدان رنگ و ابعاد بدهید یا حداقل یک المان دیگر در آن قرار دهید. به مثال‌های زیر توجه کنید:

 

<div style="width:50px; height:50px; background-color:red"></div>
<div style="width:50px; height:50px; background-color:blue"></div>
<div style="width:50px; height:50px; background-color:green"></div>
<div style="width:50px; height:50px; background-color:yellow"></div>
اموزش html 14.PNG

نتیجه این کد در صفحه اشکال رنگی میشود. این اشکال رنگی همان divهای صفحه است که میتوانند لایه بندی صفحه مورد استفاده قرار گیرند.

حالا در این مرحله قصد داریم تا یکی از این المان‌های div را به سایت دلخواه لینک کنیم. مثلا المان سبز رنگ را به سایت زومیت لینک می‌کنیم:

برای این کار همانند قبل، المان div که قرار است لینک شود را بین دو تگ <a href=""></a> قرار می‌دهیم. 

 

 

<a href="http://http://www.asrepayesh.com/"><div style="width:50px; height:50px; background-color:green"></div></a>
<a href="http://www.asrepayesh.com/"><div style="width:50px; height:50px; background-color:green"></div></a>

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

کد خبر: 177 | 14:15، 1395-04-15 نسخه چاپی ارسال به