تخفیف نوروزی پی استور
کد تخفیف: PR1404
شامل تمامی آثار
روز
ساعت
دقیقه
ثانیه
تخفیف نوروزی پی استور
برای درج تصاویر در فایل‌های HTML، کوتاه‌ترین راه، استفاده از تگ عکس است.
می‌تونیم بگیم که تنها وظیفه این تگ، وارد کردن عکس‌ها در صفحات وب هستش.
این تگ، یک تگ خالی است، به این معنی که تگ پایانی ندارد و بسته نمی‌شود:
<!-- تگ img --> <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
این صفت، مهم‌ترین صفت تگ عکس است.
src، مسیر عکس رو مشخص می‌کنه.
تگ عکس با استفاده از این صفت، عکس مورد نظرمون رو پیدا و در فایل html درج می‌کنه.
اگه این صفت رو صحیح ننویسین، تگ عکس اصلا کار نخواهد کرد.
می‌تونیم از یه عکس در یک سایت دیگه هم استفاده کنیم:
<!-- تگ img --> <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
این صفت، درواقع یک توضیح مختصر درمورد عکسمونه. اما چرا باید درمورد عکس توضیح داد؟
اگه سرعت اینترنت پایین باشه، یا آدرس عکس رو درست ننوشته باشین شاید تصویر بالا نیاد.
اگه به هر دلیلی عکس در فایل html نشون داده نشه، این توضیح مختصر به کاربر نمایش داده می‌شه.
ضرورت استفاده از این صفت، بر می‌گرده به بحث سئو که در ادامه مطلب بهش می‌پردازیم.
این صفات ابعاد تصویر در تگ عکس html رو مشخص می‌کنه.
سعی کنین همیشه عرض و ارتفاع عکس‌تون رو با این خصوصیت‌ها تعیین کنین.
اگه ابعاد عکس رو تعریف نکنین ممکنه در طی آپلود، عکس بلرزه که کاربر پسند نیست.
این اعداد بر حسب پیکسل px اعمال خواهند شد.
برای تعیین ابعاد تصویر، هم می‌تونیم از خصوصیت‌های width و height استفاده کنیم و هم از طریق style.
در مثال زیر یک نمونه از استفاده از style برای تعیین ابعاد در تگ عکس html نمایش داده شده:
<!-- تگ img --> <img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
می‌تونیم یه عکس رو به یک آدرس لینک بدیم. برای این کار، تگ عکس رو داخل تگ a قرار می‌دن:
<!-- تگ img --> <a href="https://www.w3schools.com"> <img src="w3html.gif" alt="W3Schools.com" width="100" height="132"> </a>
کاربر به محض کلیک روی عکس html به آدرس سایت لینک شده هدایت خواهد شد. جهت اطلاعات بیشتر درمورد تگ a به مقاله زیر مراجعه کنین:
در زیر نکاتی مهم در مورد سئوی تگ عکس html آورده شده است که مطالب مهمی در آموزش HTML شمرده می‌شه:
img{ max-width: 100%; }
<img loading="lazy" src="w3html.gif" alt="W3Schools.com" width="100" height="132">
| مخفف | فرمت فایل | MIME type | File extension(s) | پشتیبانی مرورگر ها |
|---|---|---|---|---|
| APNG | Animated Portable Network Graphics | image/apng |
.apng |
Chrome, Edge, Firefox, Opera, Safari |
| BMP | Bitmap file | image/bmp |
.bmp |
Chrome, Edge, Firefox, Internet Explorer, Opera, Safari |
| GIF | Graphics Interchange Format | image/gif |
.gif |
Chrome, Edge, Firefox, Internet Explorer, Opera, Safari |
| ICO | Microsoft Icon | image/x-icon |
.ico, .cur |
Chrome, Edge, Firefox, Internet Explorer, Opera, Safari |
| JPEG | Joint Photographic Expert Group image | image/jpeg |
.jpg, .jpeg, .jfif, .pjpeg, .pjp |
Chrome, Edge, Firefox, Internet Explorer, Opera, Safari |
| PNG | Portable Network Graphics | image/png |
.png |
Chrome, Edge, Firefox, Internet Explorer, Opera, Safari |
| SVG | Scalable Vector Graphics | image/svg+xml |
.svg |
Chrome, Edge, Firefox, Internet Explorer, Opera, Safari |
| TIFF | Tagged Image File Format | image/tiff |
.tif, .tiff |
None built-in; add-ons required |
| WebP | Web Picture format | image/webp |
.webp |
Chrome, Edge, Firefox, Opera |
تگ عکس از همه خصوصیت‌های عمومی در اچ تی ام ال، پشتیبانی می‌کند. برای مشاهده صفات عمومی می‌توانید به آدرس زیر مراجعه بفرمایید:
تگ عکس از همه رویدادهای عمومی در اچ تی ام ال، پشتیبانی می‌کند. برای مشاهده رویدادهای عمومی می‌توانید به آدرس زیر مراجعه بفرمایید:
تمامی مرورگرها از تگ عکس HTML پشتیبانی کامل می‌کنند.
| نام مرورگر |  |
 |
 |
 |
 |
| پشتیبانی می کند؟ | بله | بله | بله | بله | بله |
جهت دانلود فایل ویدیویی به این لینک مراجعه بفرمایین.
