افزودن تگ عکس به 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” | اجباری؛ یک متن جایگزین برای تصویر مشخص می کند. |
| crossorigin | anonymous, use-credentials | مشخص می کند که کدام وب سایت های شخص ثالث می توانند با یک اسکریپت به تصویر مربوطه دسترسی داشته باشند. |
| decoding | auto, sync, async | نحوه و اینکه آیا یک تصویر را می توان رمزگشایی کرد یا خیر، تعریف می کند. |
| height | Pixel or percent | ارتفاع تصویر را در وب سایت تنظیم می کند. |
| ismap | true, false | دسترسی تصویر به نقشه تصویر سمت سرور را کنترل می کند. |
| loading | car, eager, lazy | تعیین می کند که یک تصویر چه زمانی باید بارگذاری شود. |
| referrerpolicy | no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url | بیان می کند که آیا تصویر از منبع ناامن گرفته شده است یا خیر. |
| sizes | sizes | اندازه های تصویر را برای طرح بندی صفحات مختلف تعریف می کند. |
| src | URL | اجباری؛ آدرس URI تصویر را مشخص می کند. |
| srcset | URL lists | لیستی از تصاویر را برای اهداف مختلف ذخیره می کند، به عنوان مثال. دستگاه ها و اندازه های مختلف |
| usemap | #mapname | عنصر را به یک نقشه تصویر خاص پیوند می دهد. |
| width | Pixel or percent | عرض تصویر را مشخص می کند. |
در حالی که ویژگی‌های بالا معمولاً در تگ img استفاده می‌شوند، ویژگی‌های دیگری نیز وجود دارند که از HTML5 و HTML 5.1 منسوخ شده‌اند، مانند align، border، hspace، longdesk و vspace.
افزودن تگ عکس به HTML
ترجمه شده توسط سایت دریای شرق از سایت
کپی بدون ذکر نام و لینک سایت دریای شرق ممنوع است !
