ویدئو آموشی آشنایی با تگ br و span (درس6)

 
کد HTML چیست؟

کد HTML چیست؟

در درس های قبل گفته شد که یک سایت از کُد html ساخته می شود و کد html از مجموعه ای از تَگ ها شکل میگیرند.

نکات مهم:

نام هر تَگ بین علامت کوچکتر< و بزرگتر>  قرار میگیرد.

به طور استاندارد در درون تَگ html ، دو تگ head و body قرار دارند.

برای نوشتن پاراگراف یا متن از تَگ p استفاده میکنیم <p>

برای زیبا سازی از استایل نویسی یا css استفاده میکنیم که درون هر تَگ " "=style قرار میدهیم و خصوصیت مورد نظر را مینویسیم.

برای مثال کد زیر را ببینید و خروجی آن را مشاهده کنید:

<html>

    <head>

    </head>

    <body>

          <p style="color:blue;background-color:yellow;" >

           آکادمی برنامه نویسی آلپان    

          </p>       

          <p style="color:green;" >

           www.Alpan.ir  

          </p>       

          <p style="color:white;background-color:black;" >

           09133521388    

          </p>       

    </body>

</html>

چگونه بین تَگ ها فاصله ایجاد کنیم؟

چگونه بین تَگ ها فاصله ایجاد کنیم؟

برای فاصله گذاشتن بین خطوط و بین تَگ ها کافیست برای هر خط فاصله از تَگ <br/> استفاده کنید.

به طور مثال کد زیر را ببینید:

بین پاراگراف اول یک خط فاصله و بین پاراگراف بعدی، سه خط فاصله ایجاد شده است.

<html>

    <head>

    </head>

    <body>

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

          <br / >  

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

          <br / >

          <br / >

          <br / >

          <p>09133521388 </p>      

    </body>

</html>

 

نوشتن کلمه با تَگ span

نوشتن کلمه با تَگ span

تا کنون برای نوشتن یک متن از تَگ <p> استفاده میکردیم.

تَگ <p> یک متن ایجاد میکند و با ایجاد تَگ <p> دیگر ، متن بعدی در ابتدای سطر ایجاد میگردد.

اما اگر بخواهیم کلمه به کلمه ایجاد کنیم باید از تَگ ِ<span>  استفاده کنیم.

تفاوت در این است که هنگامی که از تَگِ <span> استفاده میکنیم، تَگِ span بعدی در دنباله آن می آید ،

اما هنگامی که از تَگِ <p> استفاده میکنیم، تَگِ p بعدی از ابتدای سطر جدید آغاز می گردد.

به قطعه کد زیر توجه کنید:

دو تَگ اول که <p> هستند در دو خط جداگانه نمایش داده می شوند

اما سه تَگ بعدی که <span> هستند، پشت سر هم نمایش داده می شوند.

<html>

    <head>

    </head>

    <body>

          <p> اولین صفحه سایت من  </p>       

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

          <span>آموزش </span>   

          <span>طراحی </span>

          <span>سایت </span>  

    </body>

</html>

چگونه رنگ هر کلمه متفاوت باشد؟

چگونه رنگ هر کلمه متفاوت باشد؟

برای اینکه رنگ هر کلمه را بتوانیم تغییر دهیم کافیست هر کلمه را در یک تَگ <span> قرار دهیم و برای هر کدام استایل style جداگانه بنویسیم.

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

<html>

    <head>

    </head>

    <body> 

          <span style="color:blue;" >آموزش </span>   

          <span style="color:green;" >طراحی </span>

          <span style="color:red;" >سایت </span>  

    </body>

</html>

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




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




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




پایان درس

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

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

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

لطفا این درس را چندین بار تکرار کنید.

مرور سریع درس آشنایی با تگ br و span

  • کد HTML چیست؟

    در درس های قبل گفته شد که یک سایت از کُد html ساخته می شود و کد html از مجموعه ای از تَگ ها شکل میگیرند.

    نکات مهم:

    نام هر تَگ بین علامت کوچکتر< و بزرگتر>  قرار میگیرد.

    به طور استاندارد در درون تَگ html ، دو تگ head و body قرار دارند.

    برای نوشتن پاراگراف یا متن از تَگ p استفاده میکنیم <p>

    برای زیبا سازی از استایل نویسی یا css استفاده میکنیم که درون هر تَگ " "=style قرار میدهیم و خصوصیت مورد نظر را مینویسیم.

    برای مثال کد زیر را ببینید و خروجی آن را مشاهده کنید:

    <html>

        <head>

        </head>

        <body>

              <p style="color:blue;background-color:yellow;" >

               آکادمی برنامه نویسی آلپان    

              </p>       

              <p style="color:green;" >

               www.Alpan.ir  

              </p>       

              <p style="color:white;background-color:black;" >

               09133521388    

              </p>       

        </body>

    </html>

  • چگونه بین تَگ ها فاصله ایجاد کنیم؟

    برای فاصله گذاشتن بین خطوط و بین تَگ ها کافیست برای هر خط فاصله از تَگ <br/> استفاده کنید.

    به طور مثال کد زیر را ببینید:

    بین پاراگراف اول یک خط فاصله و بین پاراگراف بعدی، سه خط فاصله ایجاد شده است.

    <html>

        <head>

        </head>

        <body>

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

              <br / >  

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

              <br / >

              <br / >

              <br / >

              <p>09133521388 </p>      

        </body>

    </html>

     

  • نوشتن کلمه با تَگ span

    تا کنون برای نوشتن یک متن از تَگ <p> استفاده میکردیم.

    تَگ <p> یک متن ایجاد میکند و با ایجاد تَگ <p> دیگر ، متن بعدی در ابتدای سطر ایجاد میگردد.

    اما اگر بخواهیم کلمه به کلمه ایجاد کنیم باید از تَگ ِ<span>  استفاده کنیم.

    تفاوت در این است که هنگامی که از تَگِ <span> استفاده میکنیم، تَگِ span بعدی در دنباله آن می آید ،

    اما هنگامی که از تَگِ <p> استفاده میکنیم، تَگِ p بعدی از ابتدای سطر جدید آغاز می گردد.

    به قطعه کد زیر توجه کنید:

    دو تَگ اول که <p> هستند در دو خط جداگانه نمایش داده می شوند

    اما سه تَگ بعدی که <span> هستند، پشت سر هم نمایش داده می شوند.

    <html>

        <head>

        </head>

        <body>

              <p> اولین صفحه سایت من  </p>       

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

              <span>آموزش </span>   

              <span>طراحی </span>

              <span>سایت </span>  

        </body>

    </html>

  • چگونه رنگ هر کلمه متفاوت باشد؟

    برای اینکه رنگ هر کلمه را بتوانیم تغییر دهیم کافیست هر کلمه را در یک تَگ <span> قرار دهیم و برای هر کدام استایل style جداگانه بنویسیم.

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

    <html>

        <head>

        </head>

        <body> 

              <span style="color:blue;" >آموزش </span>   

              <span style="color:green;" >طراحی </span>

              <span style="color:red;" >سایت </span>  

        </body>

    </html>