آموزش طراحی سایتآموزش HTML

تگ img در HTML

تگ 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> را معرفی می‌کنیم.

خاصیت هامقدار‌هاتوضیحات
خاصیت aligntop

bottom

middle

left

right

این خاصیت معمولا برای تعیین نحوه رفتار سایر بخش های صفحه وب نسبت به موقعیت تصویر است. خاصیت align از html نسخه 5 به بالا حذف شده است که وبسایت‌های جدید باید از کد‌های css برای کنترل این خاصیت استفاده کنند.
خاصیت altمتناین خاصیت یک توضیح از تصویر ارائه می‌دهد که تصویر معین شده را توصیف می‌کند.
خاصیت borderpixelsاین خاصیت در HTML5 پشتیبانی نمی شود.

پهنای حاشیه عکس را برحسب پیکسل تعیین می کند.

خاصیت crossoriginanonymous

use-credentials

به وبسایت‌های ثالث اجازه می‌دهد تا به صورت منشا متقابل به همراه canvas استفاده شوند.
خاصیت heightpixelsبرای تعریف ارتفاع عکس استفاده می‌شود.
خاصیت hspacepixelsاین خاصیت برروی HTML5 پشتیبانی نمی شود.

فاصله خالی از چپ و راست تصویر را تعیین می کند.

خاصیت ismapismapمشخص می کند تصویر مورد نظر یک تصویر از سمت سرور به صورت مپ است یا خیر
خاصیت longdescURLلینک صفحه ای که در آن توضیحات کامل عکس وجود دارد یا مشخص می کند.
خاصیت sizesاندازه تصویر را برای طرح بندی های متفاوت تعیین می کند.
خاصیت srcURLاین خاصیت به مرورگر اعلام می‌کند که آدرس فایل تصویر در کجا قرار دارد. معمولا برای آدرس دهی به صفحات داخل وبسایت از آدرس‌دهی وابسته استفاده می‌شود.
خاصیت srcsetURLلینک تصویر را برای استفاده در موقعیت های متفاوت تعیین می کند.
خاصیت titleمتنخاصیت عنوان برای افزودن اطلاعات بیشتر به تصویر استفاده می‌شود. اکثر مرورگر‌های وب متن این خاصیت را در یک tooltip قرار می‌دهند که با قرار گرفتن پوینتر موس بر روی تصویر به نمایش در می‌آید.
خاصیت usemap#mapnameتصویر را به عنوان یک مپ از سمت کلاینت تعیین می کند.
خاصیت vspacepixelsاین خاصیت در نسخه HTML5 پشتیبانی نمی شود.

فاصله بالا و پایین تصویر را معین می کند.

خاصیت widthpixelsبرای تعیین عرض عکس استفاده می‌شود.

تصاویر را در کجا قرار دهیم؟

محل قرارگیری تگ تصویر در کد ها بر نحوه نمایش تصویر تاثیر دارد در اینجا به عنوان نمونه سه محل را در نظر می گیریم:

  1. قبل از پاراگراف: پاراگراف در خط جدید بعد از تصویر به نمایش در می‌آید.
  1. در شروع پاراگراف: پاراگراف دقیقا در همان خط بعد از تصویر نمایش داده می‌شود.
  1. در وسط پاراگراف: تصویر در بین پاراگراف قرار می‌گیرد.

در زیر ۳ نمونه بالا را به صورت کامل مشاهده می‌کنید. همچنین شما می‌توانید با استفاده از استایل‌دهی‌های 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>

نتیجه‌گیری :

در این آموزش با نحوه قرار دادن تصاویر در سند اچ تی ام ال با استفاده از تگ <img> آشنا شدیم و خاصیت‌های آن را شناختیم.

امیدوارم که این آموزش براتون مفید بوده باشه و از آن نهایت استفاده را برده باشید.

آموزش‌های دیگر HTML میزفا را دنبال کنید و همچنین می‌توانید از طریق برچسب‌ها مقالات مربوط به تگ‌های مربوط به تصاویر را دنبال کنید.

برچسب ها

علی اسمعیلی

درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم...

نوشته های مشابه

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

همچنین ببینید

بستن
دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر