HTML5 مقدماتی

آموزش HTML – آشنایی با DIV در HTML

آموزش HTML5
آموزش HTML5

آموزش HTML – آشنایی با DIV در HTML

Div یکی از مهمترین بخش های html می باشد این تگ برای ساختن و نظم دادن به قسمت های مختلف صفحه به کار می رود. شما می توانید هر چند div که می خواهید تعریف کنید و هر قسمتی از سایت را که مایل هستید در div مورد نظر وارد نمایید. شما می توانید با استفاده از css تمام سبک div ها را تغییر دهید و به هر div سبک خاصی بدهید .


به تصویر تیکه کد زیر توجه کنید. چند div تعریف کرده ایم و با استفاده از سبک داخلی ، سبک هر div را تغییر داده ایم .

 با استفاده از کد های بالا div ها را  از نظر ظاهری ویرایش کردیم . نتیجه ی  کد بالا به صورت زیر شده است.

آموزش HTML – آشنایی با DIV در HTML
آموزش HTML – آشنایی با DIV در HTML

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

آموزش HTML – آشنایی با DIV در HTML
آموزش HTML – آشنایی با DIV در HTML

نکته: در برخی از موارد طراحان صفحه خود را با استفاده از جدول ها طراحی می کنند و عناصر صفحه را داخل جدول های مورد نظر قرار می دهند. لازم به ذکر است جدول ها یرای نمایش یک سری اطلاعات استفاده می شود و برای طراحی صفحه باید از div  استفاده کنید و تمام div های تعریف شده را با استفاده از سبک های خاص هر کدام مرتبط کنید.

آموزش HTML – آشنایی با DIV در HTML
آموزش HTML – آشنایی با DIV در HTML

به عنوان مثال در تصویر بالا ما یک div  با شناسه ی  loginContainer  داریم که با استفاده از کد های سبک (css) زیر ، سبک سازی شده است .

آموزش HTML – آشنایی با DIV در HTML
آموزش HTML – آشنایی با DIV در HTML

توجه داشته باشید که سبک های تمام div ها را باید در css  بنویسید این کار باعث می شود که خیلی راحت تر تغییرات و اصلاحات سبک ها را انجام دهید.

این مطلب فقط جنبه ی آشنایی دارد و در قسمت آموزش css به طور کامل با layout  و div آشنا خواهید شد.

پیروز باشید، طراح باشی


پیروز باشید!
طراح باشی

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

طراح‌باشی

نوشتن دیدگاه

برای نوشتن دیدگاه کلیک کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

پربازدیدها