امروز : پنج شنبه ، ۲۷ مهر ۱۳۹۶
خانه / آموزش کامل HTML / آموزش کامل HTML – قسمت ۱۳: المان div
آموزش اچ تی ام ال

آموزش کامل HTML – قسمت ۱۳: المان div

آخرین ویرایش در تاریخ ۲۰ بهمن ۱۳۹۵

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

قبل از آشنایی با این المان باید با مفاهیم بلاک و اینلاین در html آشنا می شویم.

المان های بلاک و اینلاین

المان های html به دو دسته بلاک و  اینلاین یا درون خطی تقسیم می شوند. در المان بلاک، المان مورد نظر کل فضایی را که در اختیار دارد را اشغال می کند و اجازه نمی دهد المان دیگری در کنار آن قرار بگیرد. مثلا المان پاراگراف را امتحان کنید؛ متوجه خواهید شد که نمی توانید همزمان دو المان پاراگراف را در یک خط به کار ببرید. یعنی هر المانی که بعد از تگ <p> بیاید در خط بعدی قرار می گیرد. به همین خاطر به این نوع از المان ها بلاک گفته می شود.

نوع دیگر، المان های اینلاین هستند که یک خط کامل را برای خود اشغال نمی کنند. در واقع کل فضایی را که در اختیار دارند اشغال نمی کنند. از جمله این المان ها می توان به <link> ، <img> ، <a> ، <td> و <b> اشاره کرد.

المان div

المان <div> از نوع المان های بلاک است. در عین حال این المان همان طور که در بالا گفتیم مانند یک جعبه برای تقسیم بندی عمل می کند و می توانیم در آن المان های دیگر را قرار دهیم. تصویر زیر نمونه ای از کاربرد المان <div> را نشان می دهد:

تگ div - پردیس وردپرس

برای ایجاد این المان تنها کافی است که <div></div> را بنویسیم. اما این المان به خودی خود ظاهر و شکل خاصی ندارد و باید به آن استایل و اندازه بدهیم. برای درک بهتر این موضوع تصویر فوق را در نظر بگیرید. مثلا المان هدر در تصویر فوق به صورت زیر نوشته شده است:

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

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

درباره ما admin

محمد صفری : مدیر پردیس وردپرس ، مهندس نرم افزار و طراح سایت

این موارد رو هم بررسی کنید

آموزش اچ تی ام ال

آموزش کامل HTML – قسمت یازدهم: تغییرات در جدول

در قسمت قبل با جدول ها در html آشنا شدیم. جدول هایی که در جلسه …

پاسخ دهید