ویدئو آموزشی آشنایی با استایل های متن و تگ hr (درس7)

6گام آشنایی با استایل های متن و تگ hr (درس7)

زبان طراحی سایت چیست؟

زبان طراحی سایت چیست؟

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

نکات مهم:

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

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

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

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

برای ایجاد کلمات از تَگ <span> استفاده میکنیم و میتوان برای کلمات جداگانه استایل نویسی کرد.
چگونه خط افقی رسم کنیم؟ (تَگ hr)

چگونه خط افقی رسم کنیم؟ (تَگ hr)

برای رسم یک خط افقی، کافیست از تَگ </hr> استفاده کنیم.

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

دقیقا مثل تَگ </br> که برای ایجاد یک فاصله در سطر نوشته می شود.

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

<html>

    <head>

    </head>

    <body>

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

          <br/>  

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

          <hr/>

          <p>09133521388 </p>      

    </body>

</html>
چگونه رنگ یک متن را تغییر دهیم؟

چگونه رنگ یک متن را تغییر دهیم؟

برای تغییر رنگ یک متن کافیست یک استایل بنویسیم و در آن رنگ را مشخص کنیم همانند زیر:

style="color:blue;"

برای مثال کُدhtml یک متن را مینویسیم و خروجی را مشاهده میکنیم:

<html>

    <head>

    </head>

    <body>

          <p style="color:blue;" >

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

          </p>       

    </body>

</html>
چگونه رنگ پس زمینه یک متن را تغییر دهیم؟

چگونه رنگ پس زمینه یک متن را تغییر دهیم؟

برای تغییر رنگ پس زمینه یک متن کافیست یک استایل بنویسیم و در آن رنگ پس زمینه را مشخص کنیم همانند زیر:

style="background-color:blue;"

برای مثال کُدhtml یک متن را مینویسیم و خروجی را مشاهده میکنیم:

<html>

    <head>

    </head>

    <body>

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

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

          </p>       

    </body>

</html>
چگونه فونت یک متن را تغییر دهیم؟

چگونه فونت یک متن را تغییر دهیم؟

برای تغییر فونت یک متن کافیست یک استایل بنویسیم و در آن فونت را مشخص کنیم همانند زیر:

style="font-family:'B Titr';"

برای مثال کُدhtml یک متن را مینویسیم و خروجی را مشاهده میکنیم:

<html>

    <head>

    </head>

    <body>

          <p style="font-family:'B Titr';" >

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

          </p>       

    </body>

</html>
چگونه یک متن را دُرشت کنیم؟

چگونه یک متن را دُرشت کنیم؟

برای درشت کردن یک متن کافیست یک استایل بنویسیم و در آن وزن فونت را bold قرار دهیم. همانند زیر:

style="font-weight:bold;"

برای مثال کُدhtml یک متن را مینویسیم و خروجی را مشاهده میکنیم:

<html>

    <head>

    </head>

    <body>

          <p style="font-weight:bold;" >

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

          </p>       

    </body>

</html>

یرای رسم یک خط افقی از چه تَگی استفاده میشود؟




خصوصیت تغییر رنگ پس زمینه چیست؟




خصوصیت تغییر فونت چیست؟




خصوصیت دُرشت کردن متن چیست؟




خصوصیت تغییر رنگ متن چیست؟




پایان درس

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

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

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

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

مرور سریع درس آشنایی با استایل های متن و تگ hr

  • زبان طراحی سایت چیست؟

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

    نکات مهم:

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

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

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

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

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

  • چگونه خط افقی رسم کنیم؟ (تَگ hr)

    برای رسم یک خط افقی، کافیست از تَگ </hr> استفاده کنیم.

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

    دقیقا مثل تَگ </br> که برای ایجاد یک فاصله در سطر نوشته می شود.

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

    <html>

        <head>

        </head>

        <body>

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

              <br/>  

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

              <hr/>

              <p>09133521388 </p>      

        </body>

    </html>

  • چگونه رنگ یک متن را تغییر دهیم؟

    برای تغییر رنگ یک متن کافیست یک استایل بنویسیم و در آن رنگ را مشخص کنیم همانند زیر:

    style="color:blue;"

    برای مثال کُدhtml یک متن را مینویسیم و خروجی را مشاهده میکنیم:

    <html>

        <head>

        </head>

        <body>

              <p style="color:blue;" >

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

              </p>       

        </body>

    </html>

  • چگونه رنگ پس زمینه یک متن را تغییر دهیم؟

    برای تغییر رنگ پس زمینه یک متن کافیست یک استایل بنویسیم و در آن رنگ پس زمینه را مشخص کنیم همانند زیر:

    style="background-color:blue;"

    برای مثال کُدhtml یک متن را مینویسیم و خروجی را مشاهده میکنیم:

    <html>

        <head>

        </head>

        <body>

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

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

              </p>       

        </body>

    </html>

  • چگونه فونت یک متن را تغییر دهیم؟

    برای تغییر فونت یک متن کافیست یک استایل بنویسیم و در آن فونت را مشخص کنیم همانند زیر:

    style="font-family:'B Titr';"

    برای مثال کُدhtml یک متن را مینویسیم و خروجی را مشاهده میکنیم:

    <html>

        <head>

        </head>

        <body>

              <p style="font-family:'B Titr';" >

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

              </p>       

        </body>

    </html>

  • چگونه یک متن را دُرشت کنیم؟

    برای درشت کردن یک متن کافیست یک استایل بنویسیم و در آن وزن فونت را bold قرار دهیم. همانند زیر:

    style="font-weight:bold;"

    برای مثال کُدhtml یک متن را مینویسیم و خروجی را مشاهده میکنیم:

    <html>

        <head>

        </head>

        <body>

              <p style="font-weight:bold;" >

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

              </p>       

        </body>

    </html>