خانه » آشنایی با بلاک بندی یا Div در HTML

آشنایی با بلاک بندی یا Div در HTML

  • تاریخ :‌
  • دسته : ---
در جلسه قبل با تغییر رنگ و تصویر پس زمینه در CSS آشنا شدیم. 
در این جلسه به آموزش بلاک بندی در یا تگ <div> در HTML می پردازیم. حال بهتر است از اینجا به بعد کمی آموزش این دوره را به صورت پروژه محور پیش ببریم که ضمن آشنایی با مباحث جدید بتوانیم یک وبسایت ساده را نیز طراحی کنیم.

ساختار کلی یک وبسایت ساده
ساختار 90% وبسایت ها از ابتدا تا کنون به این صورت بوده است.

ساختار کلی وب سایت

توضیح مختصر قسمت های بالا به شرح زیر است:
header: در قسمت header معمولا شامل نام، لوگو و تصویر سایت و توضیح مختصری از فعالیتهای سایت می باشد.
nav: در قسمت nav یا همان منوی سایت جهت هدایت به قسمت های اصلی سایت استفاده می شود.
aside: قسمت aside مجموعه ای از لینک های خارجی یا داخلی سایت
article: قسمت article محتوای اصلی صفحه
footer: قسمت footer هم معمولا آخرین بخشی است که کاربر در سایت می بیند و حاوی اطلاعاتی مانند درباره ما ، تماس با ما یا فرم های نظرسنجی می باشد.


ساختار قبلی وب سایت ها

ساختار قبلی وبسایتها
در نسخه های قبلی HTML طراحان برای طراحی و ساختار بندی وبسایت از تگ <table> و خصوصیات آن استفاده می کردند. به این صورت که کل وبسایت را یک <table> در نظر می گرفتند و قسمتهای مختلف آن مانند Header و footer  ، منوها و ... را به صورت سطرها و ستون های تودر تو مشخص می کردند.
مهمترین اشکال این نوع طراحی پیچیدگی کار، کندی سرعت پردازش مرورگرها و توسعه دشوار آن بود. تا اینکه در نسخه جدید HTML تگی با نام <div> معرفی شد که وظیفه بلاک بندی و تعیین ساختار سایت را به عهده گرفت.

برچسب <div>
هر تگ باز و بسته <div></div> یک بخش یا یک بلاک در طراحی وب را مشخص می کند. یک تگ <div> می تواند شامل یک یا چند تگ تو در تو <div>  باشد. برای تعیین ظاهر و چیدمان تگ های <div> از ویژگی های CSS استفاده می شود.

عملکرد برچسب <div>
به صورت پیش فرض هر <div> یک بلاک در محدوده خود به صورت یک سطر ایجاد می کند و <div> بعدی در سطر بعدی ایجاد می شود مگر اینکه با استفاده از CSS تغییرات لازم را ایجاد نمایید.

در مثال زیر از چند تگ تو در تو <div> برای تعیین ساختار سایت استفاده می کنیم و با استفاده از css در آینده شکل ظاهری آن ها را تعیین میکنیم.
 
<div id="main">  
 <div id="header">
  <h2 class="title"> This is Header </h2>
 </div>
 <div id="nav"> </div>
 <div id="content">
  <h1 class="title"> this is title </h1>
 </div>
 <div id="footer"></div>
</div>

در جلسه آینده تلاش می کنیم و ساختار وبسایت مورد نظر را پیاده سازی می کنیم.

مطالب مشابه

ارسال نظر

عکس خوانده نمی‌شود





2018 © تمامی حقوق این وب‌سایت برای پیشروسافت محفوظ است.
انصراف
سوالی دارید؟ پاسخگو هستیم