در این قسمت از آموزش html با پردیس وردپرس به المان div می پردازیم که می توان گفت مهمترین المان در html است. از این المان برای طراحی و چینش صفحات وب استفاده می شود. در واقع وظیفه div همان طور که از نام آن پیداست تقسیم بندی صفحه است. این المان مانند یک جعبه خالی عمل می کند و از آن برای دسته بندی صفحات استفاده می شود.
قبل از آشنایی با این المان باید با مفاهیم بلاک و اینلاین در html آشنا می شویم.
المان های بلاک و اینلاین
المان های html به دو دسته بلاک و اینلاین یا درون خطی تقسیم می شوند. در المان بلاک، المان مورد نظر کل فضایی را که در اختیار دارد را اشغال می کند و اجازه نمی دهد المان دیگری در کنار آن قرار بگیرد. مثلا المان پاراگراف را امتحان کنید؛ متوجه خواهید شد که نمی توانید همزمان دو المان پاراگراف را در یک خط به کار ببرید. یعنی هر المانی که بعد از تگ <p> بیاید در خط بعدی قرار می گیرد. به همین خاطر به این نوع از المان ها بلاک گفته می شود.
نوع دیگر، المان های اینلاین هستند که یک خط کامل را برای خود اشغال نمی کنند. در واقع کل فضایی را که در اختیار دارند اشغال نمی کنند. از جمله این المان ها می توان به <link> ، <img> ، <a> ، <td> و <b> اشاره کرد.
المان div
المان <div> از نوع المان های بلاک است. در عین حال این المان همان طور که در بالا گفتیم مانند یک جعبه برای تقسیم بندی عمل می کند و می توانیم در آن المان های دیگر را قرار دهیم. تصویر زیر نمونه ای از کاربرد المان <div> را نشان می دهد:
برای ایجاد این المان تنها کافی است که <div></div> را بنویسیم. اما این المان به خودی خود ظاهر و شکل خاصی ندارد و باید به آن استایل و اندازه بدهیم. برای درک بهتر این موضوع تصویر فوق را در نظر بگیرید. مثلا المان هدر در تصویر فوق به صورت زیر نوشته شده است:
<div style="background-color:کد رنگ;">
<h1 style=" text-align:center">عنوان</h1>
</div>
در مثال فوق دیدید که از اتربیوت استایل برای شکل ظاهری المان استفاده کردیم.
تا اینجا با مفهوم کلی المان div برای تقسیم بندی صفحات وب آشنا شدیم. برای استفاده بیشتر باید با css آشنا باشید. بنابراین به آموزش کامل css در سایت مراجعه کنید.
دیدگاه خود را بنویسید