تصاویر در html

در جلسه پنجم با ویژگی های تگ a و نحوه استایل دهی به تگ a در html آشنا شدیم.در این جلسه با تصاویر در html و ویژگی های آن آشنا میشویم.

تگ بسته ی <img> که مربوط به تصاویر در html می باشد چندین attribute مهم دارد:

 <img src="img/Learning-HTML.jpg" alt="تصاویر در html" title="آموزش html " width="250px" height="300px">

ویزگی های تگ img

• ویژگی source : این attribute مسیر تصویر را مشخص میکند.
• ویژگی alt: این attribute متن جایگزین در صورت آپلود نشدن عکس است که در بحث سئو و بهینه  سازی سایت بسیار مهم میباشد.
• ویژگی title : این attribute عنوان عکس را نمایش میدهد.
• ویژگی witdh و height : این attribute مشخص کننده عرض و طول عکس می باشد.

در خروجی کد بالا چنین تصویری را مشاهده خواهیم کرد:

تصاویر در html

حالا اگر بخواهیم تصویرمون به جایی لینک شود مطابق کد زیر تگ img را در داخل تگ a قرار میدهیم:

 <a href="https://www.sanazmkz.ir/" title="به صفحه اصلی سایت لینک می شویم" >
    
        <img src="img/Learning-HTML.jpg" alt="تصاویر در html" title="آموزش html " width="250px" height="300px">
    </a>

ایجاد چندین تصویر در html:

در html برای ایجاد چندین تصویر به تعداد دلخواه از تگ img استفاده خواهیم کرد

  <img src="img/Learning-HTML.jpg" alt="تصاویر در html" title="آموزش html " width="250px" height="300px">
    <img src="img/html-Technology.png" alt="تصاویر در html css" title="آموزش html css" width="500px" height="600px">
    <img src="img/images.png" alt="تصاویر در html-css" title=" html " width="100px" height="100px">

به خروجی کد بالا دقت کنید:

تعدادی تصاویر در html

استایل دهی به عکس ها در html

برای استایل دادن به عکس ها در html با استفاده از css مانند قطعه کد زیر تصویر مورد نظر را در سند html خود فراخوانی میکنیم:

  <img src="img/img.png" alt="تصاویر در html" title="آموزش html " width="250px" height="300px">

به خروجی کد بالا دقت کنید،تصویر فراخوانی شده هیچ استایل خاصی ندارد:

تصاویر در html -بدون استایل

برای استایل دادن به تصویر مورد نظر در سند css خود قطعه کد زیر را کپی میکنیم:

img{
   border: red dashed 20px ;
   border-radius: 50% ;
}

همانطور که در خروجی کد بالا مشاهده میکنید:

با border رنگ خط دور تصویر ، نوع خط و ضخامت خط را مشحص کردیم

و با boreder-radius تعریف کردیم که ۵۰درصد از چهار طرف عکس منحنی شود.

استایل دهی به تصاویر در html

برای درک بهتر border-radius در html به کد زیر که در فایل css قرار میگیرد توجه کنید:

img{
  
   border-radius: 20px 50px 70px 100px ;
}

این کد به صورت ساعتگرد گوشه های تصاویر را گرد می کند.

گرد کردن گوشه تصاویر در html

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

ویژگی های تگ a

جداول در وبسایت (table)

زبان css

تگ ها در html