⚜️تگ div یکی از تگ‌های مهم html هست که بهمون کمک میکنه ساختار صفحه وب و نحوه قرار گرفتن المان‌ها رو مشخص کنیم⚜️. سلام دوستان. امیدوارم خوب باشید و پر انرژی?. راستش امروز که دارم این مطلب رو می‌نویسم یه صبح جمعه پاییزیه و همه خوابن?. فقط منم که نشستم پای لپ تاپ و مشغول تولید محتوای سایت و اینستاگرامم هستم که بتونم به قولم عمل کنم و آموزش‌های جدید رو سر وقت آپلود کنم.
امروز قراره با هم درباره تگ div در html حرف بزنیم. بحث امروز ادامه دوره آموزش html هست که قبلا توی سایت قرار دادم و اگه خدا بخواد دوره html تقریبا رو به اتمامه. خبر خوب امروز من واسه شما اینه که اولا قراره بعد از اتمام دوره html آموزش دوره Css رو با هم شروع کنیم که اون هم کاملا رایگان و از سیر تا پیازه. خبر خوب دومم هم اینه که بالاخره دانشگاهم تموم شد و دفاع پایان نامه‌ام رو انجام دادم و قصد دارم علاوه بر محتوای متنی، آموزش‌های ویدیویی و پادکست هم در اختیارتون بذارم?. پس از این به بعد پر انرژی‌تر از قبل همراه من باشید.
تگ div در html:
تگ div، یکی از تگ‌های مهم html هست که کمک میکنه چیدمان صفحه رو مشخص کنیم. البته تگ‌های مشابه div هم توی html وجود دارن که در آینده اونها رو مفصل بهتون توضیح میدم. اگه خیلی ساده بخوام بهتون بگم، تا به الان هر چیزی که به صفحه‌تون اضافه می‌کردید، زیر هم قرار می‌گرفت. مثلا اگه شما یه پاراگراف (تگ p) و یه عکس (تگ img)، به صفحه‌تون اضافه می‌کردید، توی خروجی یه پاراگراف می‌دیدید که تصویر انتخابی شما زیر اون قرار گرفته.
? حالا اگه دلتون بخواد که عکس کنار پاراگراف متن قرار بگیره چی؟ اونموقع باید چکار کنید؟
? یه راه حل برای انجام این کار، که احتمالا به ذهنتون رسیده استفاده از یه جدوله. یعنی یه جدول با یه سطر و دو ستون ایجاد کنید. عکس رو داخل یکی از سلول‌ها و پاراگراف متن رو هم داخل یکی از سلول‌ها قرار بدید.
این روش قدیم‌ها استفاده میشد و جوابگو هم بود. اما از وقتی که تلفن‌های همراه هوشمند معمول و متداول شدن و مانیتورها با اندازه‌های مختلف روانه بازار شدن ما به یه مشکل جدی به اسم ریسپانسیو نبودن سایت مواجه شدیم. ریسپانسیو بودن یعنی سایتی که ما طراحی کردیم، در هر دستگاهی مثل مدل‌های مختلف موبایل، تبلت، لپ تاپ، مانیتور و… درست نمایش داده بشه. درواقع طراحی ما نباید با بزرگ و کوچیک شدن اندازه صفحه نمایش خراب بشه. از اونجایی که استفاده از جدول این نیاز رو برآورده نمیکنه، تگ div به عنوان راه حل این مشکل در نظر گرفته شد. البته این فقط یکی از بدی‌های استفاده از table برای طراحی صفحات هست.
چطور از تگ div استفاده کنیم؟
حالا که متوجه شدیم تگ div چیه و به چه دردی میخوره، میخوایم درباره نحوه استفاده از این تگ در سند html، با هم صحبت کنیم. برای استفاده از این تگ کافیه کد زیر رو به صفحه اضافه کنید.
<div>
</div>
به همین راحتی این تگ به صفحه اضافه میشه اما خروجی این کد فعلا هیچیه!!!. یعنی اگه صفحه رو Run کنید چیزی توی خروجی نمی‌بینید چون هنوز محتوایی در این تگ قرار ندادید. حالا بیاید با هم کد زیر رو بررسی کنیم.
<div>
<p> This is a test web page. </p>
</div>
خروجی این کد به شکل زیر هست.
This is a test web page.
همونطور که می‌بینید این تگ فقط و فقط به عنوان نگهدارنده‌ای برای تگ‌های دیگه است. احتمالا این سوال براتون پیش میاد که، چطور می‌تونم با استفاده از div دوتا المان عکس و متن رو در کنار هم قرار بدم؟؟؟
به عنوان جواب این سوال باید بگم، با استفاده از دستورات Css.
دوستای خوبم، توی یادگیری عجول نباشید. چیزی که در این مرحله نیاز داریم این هست که تگ div و تگ‌های مشابه اون که بعداً میگم رو درک کنید. فعلا فقط چیستی و چرایی این تگ‌ها رو بفهمید کافیه. زمانی که به آموزش‌های Css برسیم می‌بینید که مفاهیم چقدر قشنگ با هم ترکیب میشن و بهتون کمک میکنن یه صفحه وب زیبا و کاربردی بسازید.
دوستتون دارم موفق و پیروز باشید?? و هر سوالی هم دارید، این پایین ازم بپرسید.
