ویدئو آموزشی چیدمان صفحات با استفاده از تگ div

 
چیدمان یک صفحه چیست؟

چیدمان یک صفحه چیست؟

چیدمان یا لایوت یک صفحه سایت :

برای درک چیدمان ساخت یک خانه رو در نظر بگیرید.

قبل از ساخت یک خانه به نقشه نیاز داریم که در اون اطاق بندی ها مشخص شده اند.

این نقشه همان چیدمان یا لایوت هست که با اون شکل ظاهری سایت رو مشخص میکنیم.

چیدمان سایت با چه تگی انجام میشود؟

چیدمان سایت با چه تگی انجام میشود؟

برای چیدمان سایت ار تَگ <div> استفاده میکنیم.

این تَگ به صورت باز و بسته قرار میگیرد و درون آن تگ های دیگر نوشته میشود.

طریقه نوشتن تَگ <div>

    <div>

           محل قرار گیری تَگ های دیگر

    </div>

 

 

چگونه برای تگ div استایل مینویسیم؟

چگونه برای تگ div استایل مینویسیم؟

همچنان که  برای اطاقهای خانه طول و عرض مختلف قرار میدهیم برای <div> ها هم طول وعرض مشخص میکنیم.

همانند سایر تَگ ها برای تنظیم طول و عرض یک <div> نیز باید استایل نویسی کنیم .

خصوصیت height برای ارتفاع و width برای عرض استفاده میشود.

 طریقه استایل نویسی تَگ div:

<div style="width:300px;height:300px" >

</div>

برای این div طول و عرض 300 پیکسل در نظر گرفته شده است.

چگونه تَگ div به نمایش در می آید؟

چگونه تَگ div به نمایش در می آید؟

به طور کلی تَگ <div> چیزی را نمایش نمیدهد بلکه فقط یک محفظه خالی است.

برای نمایش تگ div میتوانیم برای آن رنگ پس زمینه در نظر بگیریم که با استایل نویسی انجام میگردد.

خصوصیت background-color رنگ پس زمینه را مشخص میکند.

طریقه استایل نویسی رنگ پس زمینه یک div:

<div style="width:300px;height:300px;background-color:red" >   

</div>

برای این div طول و عرض 300 پیکسل با رنگ پس زمینه قرمزدر نظر گرفته شده است.  

اجرا و تست تَگ div

اجرا و تست تَگ div

برای تست تَگ <div> آنرا در بدنه body در html قرار میدهیم.

دقیقا همانند تَگ های دیگر...

به کَد زیر توجه کنید و خروجی آن را مشاهده کنید.

<html>

    <head>

    </head>

    <body>  

         <div style="width:300px;height:300px;background-color:red">

         </div>

    </body>

</html>

قرار دان چند div در یک صفحه

قرار دان چند div در یک صفحه

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

به کد زیر دقت فرمایید و خروجی را ببینید:

<html>

    <head>

    </head>

    <body>  

         <div style="width:200px;height:200px;background-color:red">

         </div>

         <div style="width:300px;height:300px;background-color:blue">

         </div>

         <div style="width:100px;height:100px;background-color:green">

         </div>

    </body>

</html>

قرار دادن تَگ های دیگر در div

قرار دادن تَگ های دیگر در div

اصل کاربرد div ها برای طرح چیدمان و لایوت صفحه است.

بنابراین ما تَگ های دیگر را درون تَگ <div> مینویسیم تا طرح های مختلفی ایجاد کنیم.

در کد قسمت قبل ما درون هر تَگ div یک تَگ p قرار داده ایم.

کُد زیر را ببینید و خروجی را مشاهده کنید:

<html>

    <head>

    </head>

    <body>  

         <div style="width:200px;height:200px;background-color:red">

            <p> آکادمی برنامه نویسی آلپان </p> 

         </div>

         <div style="width:300px;height:300px;background-color:blue">

           <p> آموزش طراحی سایت </p>

         </div>

         <div style="width:100px;height:100px;background-color:green">

           <p>www.Alpan.ir </p>  

         </div>

    </body>

</html>

 

برای چیدمان یا لایوت بندی صفحه از چه تَگی استفاده میشود؟




خصوصیت عرض در استایل div چیست؟




خصوصیت ارتفاع در استایل div چیست؟




خصوصیت رنگ پس زمینه در استایل div چیست؟




پایان درس

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

دوستان عزیز این درس مهمترین درس تا به اینجا بوده است.

یادگیری تَگ div بسیار مهم است چون از این به بعد این تَگ بیشترین کاربرد را در طراحی سایت دارد.

لطفا با دقت و بارها تکرار کنید.

متشکرم

مهدی علی پناه

 

آفرین بر شما که با پشت کار و علاقه تا اینجا پیش آمدین

خوشحالیم بتوانیم آینده متفاوتی برای شما خلق کنیم.

 

مرور سریع درس چیدمان صفحات با استفاده از تگ div

  • چیدمان یک صفحه چیست؟

    چیدمان یا لایوت یک صفحه سایت :

    برای درک چیدمان ساخت یک خانه رو در نظر بگیرید.

    قبل از ساخت یک خانه به نقشه نیاز داریم که در اون اطاق بندی ها مشخص شده اند.

    این نقشه همان چیدمان یا لایوت هست که با اون شکل ظاهری سایت رو مشخص میکنیم.

  • چیدمان سایت با چه تگی انجام میشود؟

    برای چیدمان سایت ار تَگ <div> استفاده میکنیم.

    این تَگ به صورت باز و بسته قرار میگیرد و درون آن تگ های دیگر نوشته میشود.

    طریقه نوشتن تَگ <div>

        <div>

               محل قرار گیری تَگ های دیگر

        </div>

     

     

  • چگونه برای تگ div استایل مینویسیم؟

    همچنان که  برای اطاقهای خانه طول و عرض مختلف قرار میدهیم برای <div> ها هم طول وعرض مشخص میکنیم.

    همانند سایر تَگ ها برای تنظیم طول و عرض یک <div> نیز باید استایل نویسی کنیم .

    خصوصیت height برای ارتفاع و width برای عرض استفاده میشود.

     طریقه استایل نویسی تَگ div:

    <div style="width:300px;height:300px" >

    </div>

    برای این div طول و عرض 300 پیکسل در نظر گرفته شده است.

  • چگونه تَگ div به نمایش در می آید؟

    به طور کلی تَگ <div> چیزی را نمایش نمیدهد بلکه فقط یک محفظه خالی است.

    برای نمایش تگ div میتوانیم برای آن رنگ پس زمینه در نظر بگیریم که با استایل نویسی انجام میگردد.

    خصوصیت background-color رنگ پس زمینه را مشخص میکند.

    طریقه استایل نویسی رنگ پس زمینه یک div:

    <div style="width:300px;height:300px;background-color:red" >   

    </div>

    برای این div طول و عرض 300 پیکسل با رنگ پس زمینه قرمزدر نظر گرفته شده است.  

  • اجرا و تست تَگ div

    برای تست تَگ <div> آنرا در بدنه body در html قرار میدهیم.

    دقیقا همانند تَگ های دیگر...

    به کَد زیر توجه کنید و خروجی آن را مشاهده کنید.

    <html>

        <head>

        </head>

        <body>  

             <div style="width:300px;height:300px;background-color:red">

             </div>

        </body>

    </html>

  • قرار دان چند div در یک صفحه

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

    به کد زیر دقت فرمایید و خروجی را ببینید:

    <html>

        <head>

        </head>

        <body>  

             <div style="width:200px;height:200px;background-color:red">

             </div>

             <div style="width:300px;height:300px;background-color:blue">

             </div>

             <div style="width:100px;height:100px;background-color:green">

             </div>

        </body>

    </html>

  • قرار دادن تَگ های دیگر در div

    اصل کاربرد div ها برای طرح چیدمان و لایوت صفحه است.

    بنابراین ما تَگ های دیگر را درون تَگ <div> مینویسیم تا طرح های مختلفی ایجاد کنیم.

    در کد قسمت قبل ما درون هر تَگ div یک تَگ p قرار داده ایم.

    کُد زیر را ببینید و خروجی را مشاهده کنید:

    <html>

        <head>

        </head>

        <body>  

             <div style="width:200px;height:200px;background-color:red">

                <p> آکادمی برنامه نویسی آلپان </p> 

             </div>

             <div style="width:300px;height:300px;background-color:blue">

               <p> آموزش طراحی سایت </p>

             </div>

             <div style="width:100px;height:100px;background-color:green">

               <p>www.Alpan.ir </p>  

             </div>

        </body>

    </html>