تگ Div در HTML

طراحی سایت

..تگ Div در HTML..
طراحی سایت

تگ Div در HTML

منظور از بلوک‌ها چیست؟ تگ div چیست؟ آیا تگ <div> یک تگ block level است یا یک تگ inline level؟ در این مقاله با ذکر نمونه‌های کاربردی به آموزش تگ <div> می‌پردازیم. خب به ادامه آموزش جامع HTML میزفا میپردازیم.

سرفصل‌های پست

بلوک‌ها در HTML

هر تگ HTML بسته به نوع تگ یک مقدار پیش فرض برای نمایش دارد. اکثر تگ های موجود در HTML یا به صورت بلوک (block level) هستند یا برخط(inline level). تفاوت بلوک و برخط در استفاده از خط جدید در بلوک است. در حالی که در برخط، خط جدیدی برای تگ های داخلی در نظر گرفته نمی شود. هر بلوک HTML یک بلوک استاندارد برای اضافه کردن متن، تصویر و دیدیو و ویجت است.

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

تگ div

تگ <div> یک تگ block level است که محتوای داخل این تگ در خط جدیدی نمایش داده می شوند.

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

مثال از تگ div

در نمونه زیر یک تگ div به همراه یک خاصیت عمومی id با نام contentinfo قرار گرفته است. استایل contentinfo در فایل style2.css که بعد از نمونه گفته شده است قرار دارد.

<!DOCTYPE html> <html>  <head> <title>Mizfa Div Tag</title> <link rel = "stylesheet" href = "style2.css"> </head>  <body> <div id = "contentinfo"> <p>Welcome to our website. We provide tutorials on various subjects.</p> </div> </body>  </html>

"نمونه

فایل استایل style2.css

#contentinfo p {  line-height: 20px; margin: 30px; padding-bottom: 20px;  text-align: justify; width: 140px; color: red;  }

"نمونه

خواص:

تگ <div> تمامی خواص و رویداد های عمومی مربوط به تگ های HTML را قبول می کند.

خاصیت مقدار توضیح
Autofocus True or false دریافت focus به صورت خودکار در هنگام بارگیری صفحه
align left
right
center
justify
در HTML5 پشتیبانی نمی‌شود.

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

تفاوت تگ div‌ با تگ span

گاهی طراحان وب این اشتباه را می‌کنند که تگ div‌ را با تگ span اشتباه می‌گیرند و به‌جای استفاده درست از تگ div از تگ span‌ استفاده می‌کنند.

تفاوت اصلی و آشکار تگ <div> و تگ span در ماهیت این دو تگ است. تگ div یک تگ block-level هست و با استفاده از این تگ یک بلوک در صفحه وب می‌سازیم ولی تگ‌ span ماهیت inline-level دارد و بهتر است که درون بلوک‌ها مورد استفاده قرار گیرد. برای نمونه، در مثال زیر من از تگ span درون بلوک <div> استفاده کردم.

<div id="scissors"> <p>This is <span class="paper">crazy</span></p> </div>

نتیجه‌گیری

در این مقاله در رابطه با تگ بلوکی div صحبت کردیم و با آن آشنا شدیم.

  • این تگ از سری تگ‌های پر استفاده و کاربردی HTML می‌باشد.
  • این تگ تفاوت‌های بسیاری با تگ span دارد.
  • این تگ دارای خاصیت‌های align و autofocus است که البته تگ align از HTML5 به بعد در این تگ پشتیبانی نمی‌شود.

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

121
17 شهریور 1398
..نظرات..
..مقالات پربازدید..
طراحی سایت

آموزش قرعه کشی در اینستاگرام

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

9599
24 فروردین 1398
برنامه نویسی

آموزش کار با افزونه دکان (چند فروشندگی)

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

798
04 دی 1397
برنامه نویسی

ویژگی های جدید لاراول 5.8

تغییرات لاراول 5.8 LARAVEL ورژن بعدی فریم ورک لاراول با نسخه ۵.۸ در ماه فوریه سال ۲۰۱۹ منتشر میشه. در حال حاظر تنها مواردی که قطعی شده پشتیبانی لاراول ۵.۸ از کتابخانه carbon نسخه ۲ می باشد. و قابلیت امکان سوییچ بین هر دو نسخه یک و دو carbon مورد دیگر استفاده laravel 5.8 از vlucas/phpdotenv ورژن 3 برای فایل .env میباشد که اجازه استف...

736
08 اسفند 1397