ویدئو آموزشی آشنایی با تَگ عکس یا img (درس8)

 

4گام آشنایی با تَگ عکس یا img (درس8)

HTML و CSS در طراحی سایت چیست؟

HTML و CSS در طراحی سایت چیست؟

چکیده درس های گذشته...

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

برای زیبا سازی سایت از استایل نویسی style یا کُد CSS استفاده میکنیم.

نکات مهم:

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

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

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

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

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

برای ایجاد فاصله در هر سطر از تگ </br> استفاده میکنیم.

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

برای زیباسازی متن ازاستایل های زیر استفاده میکنیم:

  • استایل color برای تغییر رنگ متن
  • استایل background-color برای تغییر رنگ پس زمینه متن
  • استایل font-family برای تغییر فونت متن
  • استایل font-weight برای درشت کردن متن
چگونه در سایت عکس قرار میدهیم

چگونه در سایت عکس قرار میدهیم

برای قرار دادن عکس در سایت از تَگ <img> که خلاصه کلمه image هست استفاده می کنیم.

مهمترین خصوصیت تَگ img خصوصیت src میباشد که همان مسیر و نام عکس می باشد که مخفف کلمه source یا منبع میباشد.

به طور مثال کُد زیر یک عکس با نام alpan.jpg را د سایت به نمایش در می آورد.

<img src="alpan.jpg" >

 

برای مثال کُد زیر یک صفحه سایت با یک متن و یک عکس نشان میدهد.

<html>

    <head>

    </head>

    <body>

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

           <br/>

          <img src="alpan.jpg" >

    </body>

</html>
استایل نویسی عکس در سایت

استایل نویسی عکس در سایت

مهمترین خصوصیات استایل نویسی عکس طول و عرض عکس هستند.

طول را با width و عرض را با height نمایش میدهیم.

واحد اندازه گیری طول وعرض پیکسل می باشد که هر پیکسل یک نقطه از صفحه نمایش میباشد.

به طور مثال کُد زیر یک عکس با عرض 200 پیکسل را نمایش میدهد.

<img src="alpan.jpg"  style="widtht:200px;"  >

کُد قسمت قبل را با پهنای کوچکتر ببینیم

<html>

    <head>

    </head>

    <body>

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

           <br/>

          <img src="alpan.jpg" style="widtht:100px;">

    </body>

</html>
قرار دادن چند عکس در سایت

قرار دادن چند عکس در سایت

برای قرار دادن چند عکس در سایت کافیست برای هر عکس تَگ <img> جدا گانه بنویسید.

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

<html>

    <head>

    </head>

    <body>

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

           <br/>

          <img src="alpan.jpg" >

           <br/>

          <img src="academy.jpg" >

    </body>

</html>

 

برای قرار دان عکس در سایت از چه تَگی استفاده میکنیم؟




خصوصیت مسیر و نام عکس در تَگ img چیست؟




خصوصیت پهنا در استایل عکس چیست؟




خصوصیت ارتفاع در css عکس چیست؟




پایان درس

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

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

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

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

مرور سریع درس آشنایی با تَگ عکس یا img

  • HTML و CSS در طراحی سایت چیست؟

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

    برای زیبا سازی سایت از استایل نویسی style یا کُد CSS استفاده میکنیم.

    نکات مهم:

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

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

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

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

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

    برای ایجاد فاصله در هر سطر از تگ </br> استفاده میکنیم.

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

    برای زیباسازی متن ازاستایل های زیر استفاده میکنیم:

    • استایل color برای تغییر رنگ متن
    • استایل background-color برای تغییر رنگ پس زمینه متن
    • استایل font-family برای تغییر فونت متن
    • استایل font-weight برای درشت کردن متن

  • چگونه در سایت عکس قرار میدهیم

    برای قرار دادن عکس در سایت از تَگ <img> که خلاصه کلمه image هست استفاده می کنیم.

    مهمترین خصوصیت تَگ img خصوصیت src میباشد که همان مسیر و نام عکس می باشد که مخفف کلمه source یا منبع میباشد.

    به طور مثال کُد زیر یک عکس با نام alpan.jpg را د سایت به نمایش در می آورد.

    <img src="alpan.jpg" >

     

    برای مثال کُد زیر یک صفحه سایت با یک متن و یک عکس نشان میدهد.

    <html>

        <head>

        </head>

        <body>

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

               <br/>

              <img src="alpan.jpg" >

        </body>

    </html>

  • استایل نویسی عکس در سایت

    مهمترین خصوصیات استایل نویسی عکس طول و عرض عکس هستند.

    طول را با width و عرض را با height نمایش میدهیم.

    واحد اندازه گیری طول وعرض پیکسل می باشد که هر پیکسل یک نقطه از صفحه نمایش میباشد.

    به طور مثال کُد زیر یک عکس با عرض 200 پیکسل را نمایش میدهد.

    <img src="alpan.jpg"  style="widtht:200px;"  >

    کُد قسمت قبل را با پهنای کوچکتر ببینیم

    <html>

        <head>

        </head>

        <body>

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

               <br/>

              <img src="alpan.jpg" style="widtht:100px;">

        </body>

    </html>

  • قرار دادن چند عکس در سایت

    برای قرار دادن چند عکس در سایت کافیست برای هر عکس تَگ <img> جدا گانه بنویسید.

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

    <html>

        <head>

        </head>

        <body>

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

               <br/>

              <img src="alpan.jpg" >

               <br/>

              <img src="academy.jpg" >

        </body>

    </html>