نحوه استفاده از تصاویر در صفحات HTML

یکی از مهمترین عناصر هرسایت اینترنتی تصویر می باشد که استفاده صحیح از آن می تواند جلوه بصری سایت را افزایش داده و سایت شما را جذاب تر و شکیل تر کند. استفاده از تصاویر در صفحات وب تیغ دو لبه می باشد، از یک طرف عدم استفاده از آن باعث می شود وبسایت شما فاقد زیبایی و جذابیت باشد و از طرفی دیگر استفاده نادرست و بیش از حد باعث عدم لود سایت در مدت زمان مناسب می شود که همین موضوع ممکن است باعث شود کاربر قید مشاهده صفحه فوق را بزند. بنابراین در استفاده از تصاویر باید دقت لازم را به خرج داد.

نحوه استفاده

در صفحات html برای درج تصویر از تگ <img /> استفاده می شود که این تگ از نوع تکی بوده و مهمترین attribute های آن به شرح زیر می باشند.

  • src: آدرس تصویر
  • title: عنوان تصویر
  • alt: متن جایگزین در صورت لود نشدن تصویر
<img src="https://benoacademy.com/image/wallpaper.jpg" alt="تصویر زیبا" title="بهترین تصویر"/>

برای آدرس دهی تصویر هم می توانید لینک یک تصویر موجود در اینترنت را اختصاص دهید (همانند مثال فوق) یا یکی از تصاویر موجود در پروژه خود را. در صورتیکه قصد داشته باشید از تصویر دلخواه خود در صفحات وب استفاده نمایید. بهتر است یک پوشه مخصوص آن در مجاورت صفحه وب خود، با نام image ایجاد کرده و تصویر (یا تصاویر) مورد نظر را درون آن قرار دهید. آدرس دهی تصاویری که به این روش به پروژه خود اضافه می کنید به شکل زیر خواهد بود.

<img src=" image/wallpaper.jpg" alt="تصویر زیبا" title="بهترین تصویر"/>

بنابراین نحوه کدهای کامل یک صفحه html که حاوی تصویر می باشد به شکل زیر خواهد بود.

<!DOCTYPE html>
<html>
    <head>
        <title>آکادمی بنو</title>
    </head>
    <body>
        <img src=" image/wallpaper.jpg" alt="تصویر زیبا" title="بهترین تصویر"/>
    </body>
</html>