آموزش تگ div در HTML

رتبه: 0 ار 0 رای sssss
تگ div
نویسنده: میلاد حیدری زمان مطالعه 2 دقیقه
Banner Image

تگ <div> برای گروه بندی تعداد زیادی از عناصر HTML استفاده می شود.

می دانیم که هر تگ دارای یک هدف خاص است، به عنوان مثال از تگ p برای مشخص کردن پاراگراف استفاده می شود، از تگ های <h1> تا <h6> برای تعریف سرتیترها استفاده می شود اما تگ <div> دقیقاً مانند یک نگهدارنده است که برای گروه بندی سایر عناصر صفحه استفاده می شود و سند را بخش بندی می کند.

به طور کلی، توسعه دهندگان وب از تگ div برای گروه بندی عناصر استفاده کرده و سبک های CSS را به طور هم زمان به عناصر بسیاری اعمال می کنند.

به عنوان مثال: اگر مجموعه ای از عناصر پاراگراف را درون یک عنصر div قرار دهید، می توانید از مزایای سبک های CSS استفاده کرده و به جای کدگذاری یک سبک برای هر عنصر پاراگراف، همان سبک را به طور هم زمان به همه پاراگراف ها اعمال کنید.

مثال

<div style=”border:1px solid pink;padding:20px;font-size:20px”>

<p>Welcome to Javatpoint.com, Here you get tutorials on latest technologies.</p>

<p>This is second paragraph</p>

</div>

خروجی

تفاوت بین تگ های div و span

تگ div تگ span
یک عنصر بلوکی است. یک عنصر خطی است
برای دسته بندی تعداد زیادی از عناصر استفاده می شود. برای دسته بندی بخش کوچکی از متن، تصویر و … استفاده می شود.

مثال از تگ div: فرم ورود

در این مثال، با استفاده از تگ div، یک کادر ایجاد می کنیم و یک فرم ورود به سیستم درون کادر قرار می دهیم. در ادامه کد CSS و HTML را می بینیم.

کد CSS

.loginform{

    padding:10px;

    border:1px solid pink;

    border-radius:10px;

    float:right;

    margin-top:10px;

}

.formheading{

    background-color:red;

    color:white;

    padding:4px;

    text-align:center;

}

.sub{

background-color:blue;

padding: ۷px ۴۰px ۷px ۴۰px;

color:white;

font-weight:bold;

margin-left:70px;

border-radius:5px;

}

کد HTML:

<div class=”loginform”>

<h3 class=”formheading”>Please Login</h3>

<form action=”LoginServlet” method=”post”>

<table>

<tr><td>Email:</td><td><input type=”email” name=”email”/></td></tr>

<tr><td>Password:</td><td><input type=”password” name=”password”/></td></tr>

<tr><td colspan=”2″ style=”text-align:center”><input class=”sub” type=”submit” value=”login”/></td></tr>

</table>

</form>

</div>

خروجی

خروجی کد HTML

مرورگرهای پشتیبان

نام عنصر chrome browser Chrome ie browser IE firefox browser Firefox opera browser Opera safari browser Safari
<div> بله بله بله بله بله

 

profile name
میلاد حیدری

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

مطالب پیشنهادی برای شما

محصولات مرتبط

مشاهده همه

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

1 2 3 4 5

0 نظر درباره «آموزش تگ div در HTML»

    هنوز نظری برای این بخش ثبت نشده است
مشاهده همه نظرات
سبد خرید
سبد خرید شما خالی است
× جهت نصب روی دکمه زیر در گوشی کلیک نمائید
آی او اس
سپس در مرحله بعد برروی دکمه "Add To Home Screen" کلیک نمائید