آموزش تگ div در HTML سایت آموزشی فری لرن

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

تگ div مخفف کلمه ی divison به معنای تقسیم کردن است؛ در کل می‌توان با توجه به این معنی به این موضوع رسید که وظیفه‌ی تگ div تقسیم بندی صفحات و باکس‌های موجود در آن به بخش‌های مختلف است. در واقع به کمک تگ Div شما می‌توانید صفحاتتان را به بخش‌های مختلف مانند بخش header، بخش sidebar، بخش content، بخش footer و … تقسیم بندی کنید. قبل از بررسی تگ‌های div به بررسی المان‌های block و inline می‌رسیم. برای بخش بندی های کوچکتر صفحه، که قصد انتقال معنا و مفهوم خاصی به موتوهای جستجو ندارید از تگ div در html استفاده کنید. مثلا زمانی که هدف شما فقط این است که به آن قسمت استایل خاصی بدهید تگ دایو مناسب می باشد. تگ div در html یکی از تگ های کاربردی می باشد که می توانیم با آن صفحه را به بخش های مختلف تقسیم کنیم.

در این مقاله در رابطه با تگ بلوکی div صحبت کردیم و با آن آشنا شدیم. توسط این تگ شما می توانید گروه بزرگی از تگ های HTML را در کنار هم قرار دهید و  آن‌ها را به صورت جمعی یا گروهی با استفاده از کد‌های CSS استایل‌دهی کنید. المان بعدی منوی کنار صفحه است که به همین ترتیب با قرار دادن یک المان Div با طول و عرض مشخص به‌عنوان ظرف در برگیرنده این المان، در خود متن‌های نوشته شده را در برگرفته است.

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

مرورگرها بصورت پیش فرض یک سطر خالی که یک خط فاصله به اندازه یک سطر است را قبل و بعد و همچنین از بالا و پایین به این تگ اضافه می کنندکه ما میتوانیم آن را از طریق CSS دهی آن را حذف کنیم. تگ div می‌تواند دارای چندین ویژگی یا attribute باشد که استفاده از این ویژگی‌ها اختیاری است. امیدواریم مقاله آشنایی با مفهوم و کاربر Tag دایو برای شما مفید بوده باشد.

مثال از تگ div

فراموش نکنید که مطابق با قوانین جدید، حتما از تگ های مرتبط با بخش بندی مثل تگ div ،header ،section ، footer و.. چرا که استفاده بی مورد از سایر تگ ها مثل تگ table قطعا تاثیر منفی در سئوی وب سایت شما خواهد داشت. همانطور که گفته شد، تگ div برای بخش بندی، طرح بندی یا در اصطلاح قالب بندی یک صفحه وب استفاده می شود و همچنین این تگ یک تگ Block Level یا بلاکی می باشد.

تگ img در HTML

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

برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید. اگر از مطالعه این مطلب لذت بردید، می توانید آن را در شبکه های اجتماعی خود به اشتراک بگذارید تا دوستان شما نیز از آن بهره ببرند. در زیر با یک مثال شیوه استفاده از این تگ را بیان می کنیم.

خب با توجه به مسائل بالا می‌رسیم به اینکه اولا تگ Div یک نوع المان block است و در کنار خود المان‌های دیگر را نگه نمی‌دارد. البته در حال عادی این موضوع صدق می‌کند و شما می‌توانید در css تمامی المان ها را از inline به block  و بلعکس تغییر دهید. Divison به‌معنای تقسیم کردن است و درواقع المان‌های div نیز وظیفه تقسیم‌بندی صفحات به بخش‌های مختلف را دارند.

توی این مثال بخش اول و دوم سایتمون رو با استفاده از تگ div از هم جدا کردیم. ما در تلاش هستیم تا بهترین محتوا در حوزه فناوری و آموزشی را گردآوری نماییم. یکی دیگر از اهداف ما یاری رساندن به کسب و کارهای آنلاین است. در تاپ سایت 98 آموزش های مختلف کامپیوتر و برنامه نویسی وجود دارد.

آموزش تگ div در HTML

• در حالی که در برخط، خط جدیدی برای تگ های داخلی در نظر گرفته نمی شود.
• مرورگرها بصورت پیش فرض یک سطر خالی که یک خط فاصله به اندازه یک سطر است را قبل و بعد و همچنین از بالا و پایین به این تگ اضافه می کنندکه ما میتوانیم آن را از طریق CSS دهی آن را حذف کنیم.
{
• برای مثال در کد زیر یک تگ div را می بینید که در خود یک تگ p جای داده است، و بخشی از متن موجود در تگ p به کمک تگ span امکان سفارشی سازی پیدا کرده است.
|}{
• هر بلوک HTML یک بلوک استاندارد برای اضافه کردن متن، تصویر و دیدیو و ویجت است.
|}{
• در هر پروژه طراحی سایت و قالب ، از تگ div استفاده می شود.
|}
• ما در بابلز لرن تلاش می کنیم که با تولید محتوای آموزشی مفید، انتقال تجربه و دانش فنی نیرو های متخصص به رشد سایر افراد در زمینه های مختلف کمک کنیم.

اگه با مبحث parent و child آشنایی ندارید، میتونید جلسه آموزش لینک هارو مشاهده کنید. تگ div که از کلمه Division گرفته شده و به فارسی دایو یا دیو تلفظ میشه، یه تگ پر استفاده و مهمه و کارش بخش بندی سایته. تگ div برای بخش بندی و لایه بندی صفحه html و سایت بکار می رود. با شرکت در دوره طراحی سایت امکان اشتغال ۱۰۰ درصدی برای شما فراهم خواهد شد. آموزش و یادگیری سریع و حرفه ای را با بهترین آموزشگاه برنامه نویسی و طراحی سایت غرب تهران تجربه کنید. اگر هنوز html , css را به طور کامل بلد نیستید و میخواهید یک وبمستر حرفه ای بشید و به راحتی تمام امور یک سایت را مدیریت کنید میتوانید در دوره آموزش وبمستر آریا تهران شرکت کنید.

ذخیره نام، ایمیل و وبسایت من در مرورگر برای زمانی که دوباره دیدگاهی می‌نویسم. برای مثال در کد زیر یک تگ div را می بینید که در خود یک تگ p جای داده است، و بخشی از متن موجود در تگ p به کمک تگ span امکان سفارشی سازی پیدا کرده است. در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ div در HTML پشتیبانی میکنند یا خیر.

ساختار وبسایت واقعی با HTML

درواقع این المان  همانند جعبه‌های تو خالی است که درکنار هم قرار می‌گیرند. این جعبه‌های تو خالی می‌توانند ظاهر سایت شما را مرتب نگاه دارند. این جعبه‌های تو خالی در درون خود المان‌های اچ‌تی‌ام‌ال را جای می‌دهند.

آموزش تگ video در HTML

برای این کار همانند قبل، المان div که قرار است لینک شود را بین دو تگ  قرار می‌دهیم. این اشکال رنگی همان divهای صفحه است که می‌توانند لایه‌بندی صفحه مورد استفاده قرار گیرند. توی این مثال با استفاده از تگ span فقط به کلمه “HTML” کلاس custom دادیم و بقیه کلمات این کلاس رو ندارن. در مثال زیر ما یک تگ h1 ایجاد کرده ایم من قصد دارم بخش com آن را قرمز کنم برای این کار می توانیم از span استفاده کنیم. بخندید کتاب بخونید و خوب باشید تا جامعه مون به آرامش برسه.

مثال شماره ۳ : طرح بندی خیلی ساده یک قالب دارای هدر، باکس محتوای اصلی و فوتر

همچنین تگ div از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند. باید بدانید که تگ های div معمولا به تنهایی قابلیت های خاصی ندارند و در کنار ویژگی های css است که قدرت و انعطاف پذیری آنها مشخص می شود. پیشنهاد می کنیم برای یادگیری بیشتر مقاله css چیست را مطالعه کنید. سرورهای وبسایت آموزشی camelCase بر روی مرکز داده‌ی شرکت سون‌هاست قرار دارد. یکی از بخش‌های مهم در HTML دانستن مفهوم بسیار ساده ای که با نام المان‌های block و inline بررسی می‌شود است.

تگ Div یکی از مهمترین تگ های html است که از ۳ حرف ابتدایی کلمه Division گرفته شده است که به معنی بخش یا قسمت می باشد. تگ Div در HTML یکی از تگ های پرکاربرد در طراحی صفحات وب می باشد که با استفاده از آن می توان صفحات وب سایت را به بخش های مختلف تقسیم کرد. به طور کلی تگ div مانند یک ظرف (Container) می ماند که برای نگهداری دیگر تگ ها به کار می رود. تگ div از از ۳ حرف اول کلمه Division به معنی بخش یا قسمت گرفته شده، که در فارسی به تگ دایو یا دیو مشهور است. این تگ یکی از تگ های پرکاربرد در طراحی صفحات وب می باشد که با استفاده از آن می توان صفحات وب سایت را به بخش های مختلف تقسیم کرد.

یکی از بخش‌های مهم در اچ‌تی‌ام‌ال دانستن مفهوم بسیار ساده ولی پراهمیت بلاک و اینلاین است. المان‌های بلاک (block eleman) و المان‌های یک خطی (inline). در سند html به هر کدام از تگ های div یک کلاس دادیم تا در فایل css از این کلاس ها استفاده کنیم و به تگ های div استایل دهیم. تگ span یک تگ inline است یعنی متن را به خط بعد نمی برد و می توان چند تگ  span را در یک خط قرار داد.

تگ div برای ایجاد یک بخش استفاده می شود و کل بلاک خود را اشغال می کند یعنی این تگ از تگ های بلاک لول است. اگر سوال، پیشنهاد ویا انتقادی در رابطه با موضع این مقاله دارید، حتما در بخش دیدگاه‌ ها با ما به اشتراک بگذارید. باعث خوشحالی ماست که نطرات شما را در رابطه با مقالات بدانیم و اگر جایی نیازمند به اصلاح است در مقالات اعمال کنیم.

این تگ وظیفه واضح و مشخصی ندارد اما هرجایی که نیاز به ایجاد یک بخش یا باکس در صفحه داشتید می‌توانید از تگ دایو استفاده کنید. مرورگر های معتبری مانند Google Chrome و Firefox و Safari و Internet Explorer و… از این تگ کاربردی پشتیبانی می کنند، و تگ div در این مرورگر ها قابل اجرا می باشد. تگ دایو ممکن است در حالت پیش فرض استایل خاصی نداشته باشد ولی ما به راحتی با استفاده از CSS میتوانیم آن را سفارشی سازی نماییم. گاهی طراحان وب این اشتباه را می‌کنند که تگ div‌ را با تگ span اشتباه می‌گیرند و به‌جای استفاده درست از تگ div از تگ span‌ استفاده می‌کنند.

همراه با ما این کار را انجام دهید روی تک تک المان ها بروید تا بهتر متوجه شوید. لازم به ذکر است که صفت aline در در نسخه HTML4.01 پشتیبانی می شد، ولی در html5 پشتیبانی نمی شود. اما نگران نباشد، ما به راحتی با استفاده از CSS میتوانیم آن را سفارشی سازی کنیم. پیشنهاد می کنیم قبل از شروع یادگیری، برای درک مفهومی تر موضوع، از خواندن را از مقاله html چیست آغاز کنید. هدف ما ایجاد فضایی برای یادگیری با بالاترین کیفیت و کمترین هزینه است . حقوق مادی و معنوی این سایت متعلق به کیارا آکادمی می باشد.

آشنایی با کلاس ها در HTML

برای این منظور نیاز است تا ابتدا هدف صفحه خود را بدانید و آن صفحه ترسیم کنید و پس از آن کدنویسی خود را به شکل بهینه آغاز کنید. تگ div در HTML یکی از پرکاربرد ترین تگ های HTML می باشد، از این تگ برای بخش بندی یا قالب بندی صفحات وب استفاده می شود. در مقاله تگ header در html توضیح دادیم که در ورژن جدید html یعنی html5 با روی کار آمدن تگ های مثل تگ header ،nav ،main و…. کار بخش بندی وب سایت ها تخصصی تر شده است اما همچنان استفاده از تگ div باز هم بسیار زیاد است.

تگ دایو یکی از پرکاربرد ترین تگ های HTML می باشد که در کل برای لایه بندی یا بخش بندی استفاده می شود. در نمونه زیر یک تگ div به همراه یک خاصیت عمومی id با نام contentinfo قرار گرفته است. استایل contentinfo در فایل style2.css که بعد از نمونه گفته شده است قرار دارد. بلوک ها قابلیت انعطاف پذیری بالایی در همکاری با سایر بخش های محتوای صفحه در نمایش محتوایی خاص را دارند. به عنوان مثال می توانید یک بلاک مخصوص برای ساعت در نظر بگیرید و اجزای ساعت را در داخل آن نمایش دهید. در این نوشته به بررسی ساختار تگ div و برخی از خصوصیات آن‌ها می‌پردازیم.

با وجود آنکه ما  هر سه تگ پاراگراف را در هنگام نوشتن کد در یک خط نوشتیم، ولی درنتیجه نهایی هر کدام از  آن‌ها یک سطر را اشغال می‌کند و سطر دوم و سوم را نیز پر می‌کنند. به همین خاطر به چنین المان‌هایی بلاک المان می‌گویند چون اجازه قرار گرفتن المان دیگری را درکنار خود نمی‌دهند و به‌طور کامل فضای اطراف خود را پر می‌کنند. حالا که با مفهوم کلی این المان و کاربرد آن بیشتر آشنا شدید, سراغ نحوه استفاده از المان div در اچ‌تی‌ام‌ال خواهیم رفت. منتها قبل از آن, بد نیست اگر با مفهومی مهم به‌نام بلاک المان و اینلاین المان آشنا شوید. جاوا اسکریپت یک زبان برنامه نویسی همه فن حریف برای برنامه نویسی وبسایت، اپلیکیشن، هوش مصنوعی، ربات تلگرام، فیلترنویسی اینستاگرام و حتی بازی سازی استفاده میشه. وبسایت MEGAJS اولین مرجع تخصصی آموزش جاوااسکریپت، کتابخونه ها و فریمورک های JavaScript به زبان فارسی هست.

کدام مرورگر ها از تگ div پشتیبانی می کنند ؟

داتیس نتورک فعالیت حرفه ای خود را در سال 1393 با هدف دسترسی آسان فارسی زبان ها به آموزش های حوزه فناوری و شبکه آغاز کرد و اکنون با حمایت شما عزیزان جزو 500 سایت برتر ایران هستیم. کلمه div از 3 حرف اول division گرفته شده که به معنای بخش یا تقسیم می باشد. البته با css میتونیم inline-level یا block-level بودن المنت هارو خودمون تعیین کنیم.

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

قبل از اینکه html اینقدر پیشرفت کند برای بخش بندی صفحه وب از جدول استفاده میشد. امروز دیگر استفاده از جدول غیراصولی است و از نظر سئو نیز نمره منفی دارد. به همین جهت برای بخش بندی از تگ هایی مانند div, section, header, footer و همچنین برای ایجاد بخش اصلی سایت از تگ main در html استفاده می شود. تگ div یکی از پرکاربرد ترین تگ های HTML می باشد که در کل برای بخش بندی یا لایه بندی استفاده می شود. در ادامه این مقاله برای آشنایی بیشتر با مفهوم و کاربرد های تگ دایو همراه داتیس نتورک باشید. در این مطلب از آموزش html و css می خواهیم درمورد تگ Div در HTML صحبت کنیم.

نتیجه ای که در مرورگر خواهید دید

در این مثال برای اینکه بتوانید فقط کلمه قرمز را به رنگ قرمز نمایش دهید، راهی جز استفاده از تگ span ندارید. چون اگر به تگ p رنگ قرمز را اعمال کنید، کل متن درون آن قرمز می‌ شود. به اصطلاح می‌ گویند این تگ برای گزاره‌ بندی متون کاربرد دارد. همانطور که در متن مقاله اشاره کردیم در ورژن HTML5 به معناگرایی تگ ها یا همان Semantic Tag اهمیت زیادی داده شده است.

درواقع به کمک المان Div شما می‌توانید صفحاتتان را به بخش‌های مختلف ( از این به بعد بهتر است بدانید به divهای مختلف) تقسیم‌بندی می‌کنید. دانلود فیلم و آموزش ویدئویی تگ div و span همراه با مثال. در این آموزش ویدیویی با کاربرد div و span آشنا خواهید شد. همچنین می توانید با عضویت در کمپین آموزشی بی لرن، از دوره های آموزشی رایگان و کاربردی در زمینه های مختلف به صورت تخصصی و حرفه ای بهره مند شوید. در مثال بالا برای اینکه بتوانیم فقط کلمه crazy را به رنگ قرمز نمایش دهیم، راهی جز استفاده از تگ span نداشتیم.

در واقع تمام بخش های وب سایت (مانند بخش هدر،مطالب اصلی و فوتر و…) را با جدول ها مشخص می کردند. تگ های block-level بر خلاف نوع قبلی تمام عرض صفحه رو اشغال میکنن؛ یعنی قبل و بعد از باز و بسته شدن تگ، مرورگر خط جدید ایجاد میکنه و تمام فضا رو تحت اختیار اون تگ قرار میده. بخش بندی سایت در HTML، در گذشته با جدول ها انجام میشد؛ یعنی یه جدول درست میکردن و هر بخش از سایت رو توی یه سلول از اون میزاشتن. اما این روش الان دیگه غیر اصولی و منسوخ شده، چون روی موتور های جستجو و سئو تاثیر منفی و بدی داره.

Box Model در CSS

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

تگ bdo در HTML

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

درباره تاپ سایت 98

در المان‌های بلاک (block eleman), المان‌ مدنظر کل فضایی که دراختیار دارد را اشغال می‌کند و اجازه نمی‌دهد که المان دیگری درکنار آن قرار بگیرد. درواقع این المان‌ها چندان اجتماعی نیستند و طاقت تحمل یک همسایه را هم درکنار خود ندارند. ما در بابلز لرن تلاش می کنیم که با تولید محتوای آموزشی مفید، انتقال تجربه و دانش فنی نیرو های متخصص به رشد سایر افراد در زمینه های مختلف کمک کنیم.

اگرچه در نسخه HTML5 تگ section را در بسیاری مواقع جایگزین تگ div قرار می دهند، اما هنوز هم در بسیاری لایه بندی ها و ساخت گروه تگ ها از تگ کاربردی دیو یا دایو استفاده می کنند. اگر به یادگیری html و css علاقمند هستید حتما از فیلم رایگان آموزش html css پروژه محور رایگان استفاده کنید. فراموش نکنید که مطابق با قوانین جدید، حتما از تگ های مرتبط با بخش بندی مثل تگ div ,header ,section ,footer و.. چندین سال قبل طراحان وب سایت از جدول ها برای طراحی وب سایت استفاده می کردند.

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ div در HTML با من همراه باشید. وقتی با جهت نما روی هر المان می رویم محدوده آن المان را به صورت یک جعبه یا باکس نمایش می دهد. یک سری خط چین هم نمایش داده می شود که طول و عرض آن جعبه را مشخص می کند. سلام خدمت تمام کاربران عزیزدر این جلسه ابتدا با تگ پرکاربرد div در html آشنا می شویم. سپس به آموزش خصوصیت content ، margin و border و  padding در CSS که در بحث طراحی سایت بسیار پرکاربرد و مفید می باشند می پردازیم.

برای کمک به سایت ما و گسترش آموزش در بین هموطنان، در سایتها، وبلاگ ها و شبکه های اجتماعی لینک سایت ما را درج کنید. این در حالی است که تگ span معمولا برای طرح بندی متون استفاده شده و یک تگ Inline Level یا اینلاینی یا خطی است. ما در مثال بالا به کمک تگ div دو بخش، که هر کدام داری یک تگ h2 و یک تگ p هستند درست کرده و با سی اس اس دهی خطی به هر کدام از آنها یک بکگراند اختصاص دادیم.