نماد سایت دریای شرق

افزودن تگ عکس به HTML : آموزش با روش آسان

افزودن تگ عکس به HTML

تگ img به شما این امکان را می دهد که به راحتی تصاویر را به وب سایت خود اضافه کنید. از فرمت‌های متعدد پشتیبانی می‌کند و ویژگی‌های مختلف می‌تواند تگ img را در HTML حتی بیشتر تقویت کند.

تگ img برای چه کاری لازم است؟

تگ HTML “img” تصاویر و گرافیک ها را در وب سایت ها قرار می دهد. img به عنوان یک مکان نگهدار عمل می کند که به موجب آن ویژگی src ذخیره شده به محل ذخیره سازی واقعی گرافیک هنگام دسترسی به وب سایت پیوند می یابد. سپس تصویر در وب سایت جاسازی می شود. علاوه بر ویژگی src، یک ویژگی alt نیز لازم است. این یک متن جایگزین را در صورتی که تصویر نمایش داده نشود ذخیره می کند. JPEG، GIF، PNG و چندین مورد دیگر توسط تگ img در HTML پشتیبانی می شوند.

افزودن تگ عکس به HTML : سینتکس تگ img چیست؟

نحو تگ img ساده است و فقط به چند جزء نیاز دارد. ساده ترین نوع این است:

<img src="redcar.png" alt="small red car at a traffic light">

برای اطمینان از نمایش صحیح گرافیک، ایده خوبی است که هنگام استفاده از تگ img، ارتفاع و عرض تصویر را در وب سایت قرار دهید. این تنظیمات را می توان در ویژگی های HTML پهنا و ارتفاع یافت. کد باید به شکل زیر باشد:

<img src="redcar.png" width="500" height="200" alt="small red car at a traffic light">

هنگام استفاده از تگ img در HTML ویژگی بارگذاری نیز توصیه می شود. این تضمین می کند که گرافیک مربوطه تنها زمانی بارگذاری می شود که کاربران به موقعیت مربوطه پیمایش کنند. مقدار مشخصه loading را برای این ویژگی روی lazy قرار دهید. در کد باید به این صورت باشد:

<img src="redcar.png" width="500" height="200" alt="small red car at a traffic light" loading="lazy">

کدام ویژگی ها را می توان در تگ img در HTML استفاده کرد؟

علاوه بر صفات عرض، ارتفاع و بارگذاری، چندین ویژگی دیگر نیز وجود دارد که توسط تگ img در HTML پشتیبانی می‌شوند. اینها شامل تمام ویژگی‌های جهانی، رویداد و سایر ویژگی‌های خاص است. در زیر یک نمای کلی از ویژگی هایی است که می توان با تگ img استفاده کرد:

صفتمقدارشرح
old“Text”اجباری؛ یک متن جایگزین برای تصویر مشخص می کند.
crossoriginanonymous, use-credentialsمشخص می کند که کدام وب سایت های شخص ثالث می توانند با یک اسکریپت به تصویر مربوطه دسترسی داشته باشند.
decodingauto, sync, asyncنحوه و اینکه آیا یک تصویر را می توان رمزگشایی کرد یا خیر، تعریف می کند.
heightPixel or percentارتفاع تصویر را در وب سایت تنظیم می کند.
ismaptrue, falseدسترسی تصویر به نقشه تصویر سمت سرور را کنترل می کند.
loadingcar, eager, lazyتعیین می کند که یک تصویر چه زمانی باید بارگذاری شود.
referrerpolicyno-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-urlبیان می کند که آیا تصویر از منبع ناامن گرفته شده است یا خیر.
sizessizesاندازه های تصویر را برای طرح بندی صفحات مختلف تعریف می کند.
srcURLاجباری؛ آدرس URI تصویر را مشخص می کند.
srcsetURL listsلیستی از تصاویر را برای اهداف مختلف ذخیره می کند، به عنوان مثال. دستگاه ها و اندازه های مختلف
usemap#mapnameعنصر را به یک نقشه تصویر خاص پیوند می دهد.
widthPixel or percentعرض تصویر را مشخص می کند.

در حالی که ویژگی‌های بالا معمولاً در تگ img استفاده می‌شوند، ویژگی‌های دیگری نیز وجود دارند که از HTML5 و HTML 5.1 منسوخ شده‌اند، مانند align، border، hspace، longdesk و vspace.

افزودن تگ عکس به HTML

ترجمه شده توسط سایت دریای شرق از سایت
کپی بدون ذکر نام و لینک سایت دریای شرق ممنوع است !

خروج از نسخه موبایل