تگ img در HTML چیست؟ چطور در یک صفحه وب تصاویر را بارگزاری کنیم؟ تصاویر وارد شده با تگ img در چه مواردی قابل استفاده است؟ در این مقاله از میزفا که از سری آموزش html است با تگ img و خاصیت های مختلف آن آشنا می‌شویم.
سرفصل‌های پست
تگ img در HTML
دلایل زیادی وجود دارد که ممکن است بخواهید یک عکس به صفحه وبسایتتان اضافه کنید مانند اضافه کردن لوگو، نمودار یا دیاگرام.
یک تصویر می تواند به جای هزاران کلمه صحبت کند، همانطور که یک عکس حرفه‌ای تفاوت یک وبسایت با ظاهر متوسط و یا وبسایت با هدف‌گیری مخاطب را تعیین میکند.
اگر در حال ساخت یک وبسایت از صفر هستید، بهتر است پوشه‌های تصاویر را جدا کنید. همانطور که وبسایت رشد میکند، جدا نگه‌داشتن تصاویر در فولدر‌های جداگانه به شما کمک می کند تا سازمان‌دهی بهتر برروی وبسایت خود اعمال کنید.
اضافه کردن تصویر به سند HTML با استفاده از تگ img
برای اضافه کردن یک تصویر در سند HTML با استفاده از تگ <img> می‌بایست مانند زیر عمل کنیم:
<img src="Image Address">
در بالا به جای Image Address می‌بایست آدرس تصویر را جایگزین کنید.
نکته: تگ <img> نیازی به تگ بستن ندارد. (بنابراین نیازی به تگ <img/> نداریم.)
نمونه‌ای از قرارگیری تصویر در سند HTML را در زیر برایتان قرار داده‌ایم:
<!DOCTYPE html> <html> <body> <img src="smiley.gif" alt="Smiley face" width="42" height="42"> </body> </html>
تصویر خروجی :
خاصیت‌های تگ <img>
در جدول زیر خاصیت‌های تگ <img> را معرفی می‌کنیم.
| خاصیت ها | مقدار‌ها | توضیحات |
| خاصیت align | top
bottom middle left right |
این خاصیت معمولا برای تعیین نحوه رفتار سایر بخش های صفحه وب نسبت به موقعیت تصویر است. خاصیت align از html نسخه 5 به بالا حذف شده است که وبسایت‌های جدید باید از کد‌های css برای کنترل این خاصیت استفاده کنند. |
| خاصیت alt | متن | این خاصیت یک توضیح از تصویر ارائه میدهد که تصویر معین شده را توصیف میکند. |
| خاصیت border | pixels | این خاصیت در HTML5 پشتیبانی نمی شود.
پهنای حاشیه عکس را برحسب پیکسل تعیین می کند. |
| خاصیت crossorigin | anonymous
use-credentials |
به وبسایت‌های ثالث اجازه میدهد تا به صورت منشا متقابل به همراه canvas استفاده شوند. |
| خاصیت height | pixels | برای تعریف ارتفاع عکس استفاده می‌شود. |
| خاصیت hspace | pixels | این خاصیت برروی HTML5 پشتیبانی نمی شود.
فاصله خالی از چپ و راست تصویر را تعیین می کند. |
| خاصیت ismap | ismap | مشخص می کند تصویر مورد نظر یک تصویر از سمت سرور به صورت مپ است یا خیر |
| خاصیت longdesc | URL | لینک صفحه ای که در آن توضیحات کامل عکس وجود دارد یا مشخص می کند. |
| خاصیت sizes | اندازه تصویر را برای طرح بندی های متفاوت تعیین می کند. | |
| خاصیت src | URL | این خاصیت به مرورگر اعلام میکند که آدرس فایل تصویر در کجا قرار دارد. معمولا برای آدرس دهی به صفحات داخل وبسایت از آدرس‌دهی وابسته استفاده می‌شود. |
| خاصیت srcset | URL | لینک تصویر را برای استفاده در موقعیت های متفاوت تعیین می کند. |
| خاصیت title | متن | خاصیت عنوان برای افزودن اطلاعات بیشتر به تصویر استفاده می‌شود. اکثر مرورگر‌های وب متن این خاصیت را در یک tooltip قرار می‌دهند که با قرار گرفتن پوینتر موس بر روی تصویر به نمایش در می‌آید. |
| خاصیت usemap | #mapname | تصویر را به عنوان یک مپ از سمت کلاینت تعیین می کند. |
| خاصیت vspace | pixels | این خاصیت در نسخه HTML5 پشتیبانی نمی شود.
فاصله بالا و پایین تصویر را معین می کند. |
| خاصیت width | pixels | برای تعیین عرض عکس استفاده می‌شود. |
تصاویر را در کجا قرار دهیم؟
محل قرارگیری تگ تصویر در کد ها بر نحوه نمایش تصویر تاثیر دارد در اینجا به عنوان نمونه سه محل را در نظر می گیریم:
- قبل از پاراگراف: پاراگراف در خط جدید بعد از تصویر به نمایش در می‌آید.
- در شروع پاراگراف: پاراگراف دقیقا در همان خط بعد از تصویر نمایش داده می‌شود.
- در وسط پاراگراف: تصویر در بین پاراگراف قرار می‌گیرد.
در زیر ۳ نمونه بالا را به صورت کامل مشاهده می‌کنید. همچنین شما می‌توانید با استفاده از استایل‌دهی‌های css نمونه‌های بهتری را برای قرارگیری تصاویرتان ایجاد کنید.
لینک‌دادن به تصاویر در HTML:
برای اینکه تصویری که در سند HTML خود بارگذاری می‌کنیم را لینک‌دهی کنیم، می‌بایست ما بین تگ <img> از تگ <a> استفاده کنیم. برای درک بهتر نمونه زیر را یک‌بار در ویرایشگر کد خودتان آزمایش کنید. همچنین برای درک بهتر لینک‌دهی و لینک‌سازی مقالات ما در این خصوص را بخوانید.
<!DOCTYPE html> <html> <body> <a href="https://mizfa.com"> <img src="smiley.gif" alt="Smiley face" width="42" height="42"> </a> </body> </html>
پایانترم
[box type=”info” class=”question-from-users” width=””]سوال:
کد یک تصویر لینک شده با مشخصات زیر را برایمان ارسال کنید.
آدرس تصویر : https://mizfa.com/blog/wp-content/uploads/2018/10/logo-blog-main.png
آدرس لینک : https://mizfa.com/blog/
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه‌گیری :
در این آموزش با نحوه قرار دادن تصاویر در سند اچ تی ام ال با استفاده از تگ <img> آشنا شدیم و خاصیت‌های آن را شناختیم.
امیدوارم که این آموزش براتون مفید بوده باشه و از آن نهایت استفاده را برده باشید.
آموزش‌های دیگر HTML میزفا را دنبال کنید و همچنین می‌توانید از طریق برچسب‌ها مقالات مربوط به تگ‌های مربوط به تصاویر را دنبال کنید.
