امتیاز دهید:

در زبان اچ تی ام ال (HTML) زمانیکه بخواهیم گروهی از تگ ها را در کنار یکدیگر قرار دهیم می بایست از تگ <div> استفاده کنیم. به عبارت دیگر تگ <div> به عنوان ظرفی مورد استفاده قرار می گیرد که می توان دیگر تگ های اچ تی ام ال را داخل آن قرار داد.
تگ <div> از دید یک مرورگر حاوی معنی خاصی نیست اما از آنجایی که تگ <div> تگی از جنس Block Element است و گروهی از تگ های اچ تی ام ال را در خود جای می دهد، مرورگر در حین Parse کردن این تگ یک فاصله قبل و یک فاصله بعد از این تگ قرار می دهند. پیش از این گفتیم که در گذشته برای ساخت Layout یک سایت از جداول استفاده می شد که کار صحیحی نبود چرا که تگ های <table>و<table/> برای نمایش داده ها، اعداد و ارقام و ... بایستی مورد استفاده قرار گیرند. امروزه برنامه نویسان وب برای ایجاد ساختار کلی سایت های خود از تگ <div> استفاده می کنند.
چیزی که تاثیر به کارگیری تگ <div> را دوچندان می کند استفاده از CSS است. در حقیقت با به کارگیری تگ های <div> به همراه کدهای CSS می توان Layout هایی بسیار کاربردی و در عین حال جذاب ایجاد کرد.
پیش از توضیح پیرامون تگ دیگری تحت عنوان <span> می بایست با دو مفهوم Block Element و Inline Element آشنا شویم.
به طور کلی منظور از Block Element تگ هایی همانند <p>و <h1>و <table> و ... است که در مرورگر در یک خط مختص به خود به نمایش در می آیند. تگی همچون <div> هم Block Level محسوب می شود چرا که در یک خط مجزا به نمایش در می آید.
در مقابل Element هایی از جنس Block چیزی تحت عنوان Inline Element وجود دارد که به تگ هایی اطلاق می شود که با استفاده از آن ها مرورگر آن ها را در یک خط جدید به نمایش در نمی آورد که از آن جمله می توان به تگ های <a>و <img>و <strong> و ... اشاره کرد. علاوه بر مواردی که اشاره شد تگ دیگری هم به کرات در طراحی صفحات وب مورد استفاده قرار می گیرد که <span> نام دارد. این تگ هم همانند تگ <div> به عنوان یک ظرف مورد استفاده قرار می گیرد اما این در حالی است که این ظرف برای بخش های کوچک تری از اچ تی ام ال مثل یک عبارت یا جمله مورد استفاده قرار می گیرد.
حال با توضیحی مختصر پیرامون تگ های <div> و <span>، در ادامه این ماژول خواهیم دید که به چه شکل می توان آن ها را به طور عملی مورد استفاده قرار داد (برای روشن تر شدن عملکرد این دو تگ از تعدادی کد سی اس اس هم استفاده خواهیم کرد اما از آنجا که در فصل مرتبط با سی اس اس به طور کامل به توضیح کدهای سی اس اس خواهیم پرداخت از توضیحات تکمیلی در این آموزش خودداری خواهیم کرد):

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <title>Netshahr</title>
    </head>
    
    <body>
        <div style="background:#000; width:400px; height:100px; color:#fff">هدر</div>
        <div style="background:#ffde57; width:200px; height:300px">منوی سمت چپ</div>
        <div style="background:#ffdeff; width:400px; height:50px">فوتر</div>
    </body>
</html>

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

div tags in html

در واقع به همان ترتیبی که تگ های <div> را داخل تگ <body> و </body> نوشته ایم، به همان ترتیب در مرورگر به نمایش در می آیند. ابتدا تگی مرتبط با Header به رنگ سیاه سایت ایجاد کرده ایم سپس یک تگ <div> را به منوی سمت چپ اختصاص داده و رنگ آن را زرد کرده ایم و در نهایت تگی را به Footer اختصاص داده و رنگ آن را صورتی کرده ایم.
برای آشنایی بیشتر با تگ <span> ابتدا نوشته ای طولانی تر داخل Footer می نویسیم سپس بخشی از آن را با استفاده از تگ <span> تحت تاثیر قرار می دهیم:

<body>
        <div style="background:#000; width:400px; height:100px; color:#fff">هدر</div>
        <div style="background:#ffde57; width:200px; height:300px">منوی سمت چپ</div>
        <div style="background:#ffdeff; width:400px; height:50px">All
            <span style="font-weight:bold;">rights</span>reserved.</div>
    </body>

همانطور که در کد فوق می بینیم عبارت All rights reserved. به معنی "حق چاپ محفوظ است." را وارد تگ <div> مرتبط با Footer کرده ایم و با استفاده از تگ های <span> و </span> استایل خاصی را فقط برای واژه rights در نظر گرفته ایم. با اجرای کد فوق در مرورگر نتیجه را بهتر متوجه خواهیم شد:

sapn tags in html

همانطور که می بینیم با استفاده از تگ <span> فقط استایل خاصی را برای واژه rights در نظر گرفته ایم (در پروژه عملی پایان دوره به طور کاربردی از این تگ ها استفاده خواهیم کرد).


نظرات
نظرات
  • مرتضی :

    چگونه هدر و فوتر و منو را به سمت راست ببریم وداخل منو مطلبی را برای لینک دادن بنویسیم؟ لطف کنید راهنمائیم کنید


    1396/03/26 15:42:17
  • مریم :

    دستان درد نکنه....


    1395/08/14 12:24:07
  • بهزاد مرادی :

    دوست گرامی سلام،
    سعی نموده ایم تا در دوره PHP آموخته های خود را در قالب پروژه های عملی به کاربران عرض نماییم.


    با سپاس فراوان
    بهزاد مرادی
    تیم تولید محتوای نت شهر


    1393/04/29 11:22:47
  • amir :

    سلام پروژه عملی پایانی کجاست؟؟؟؟؟؟؟


    1393/04/28 09:58:35
  • amir :

    سلام . پروژه عملی پایان دوره کجاست؟؟؟؟؟؟؟


    1393/04/28 09:56:57
  • سعیده :

    سلام-خسته نباشید-مطلب بالا مفید بود اما خیلی ساده و ابتدایی بود-لطفا مثال های کاربردی بزنید-با تشکر


    1393/03/27 13:06:44
  • محسن مقیمی کندلوس :

    ممنون عالی بود


    1393/02/01 06:57:30