آموزش 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> را معرفی می‌کنیم.

خاصیت ها مقدار‌ها توضیحات
خاصیت 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 برای تعیین عرض عکس استفاده می‌شود.

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

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

  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>

پایانترم

سوال:

کد یک تصویر لینک شده با مشخصات زیر را برایمان ارسال کنید.

آدرس تصویر : https://mizfa.com/blog/wp-content/uploads/2018/10/logo-blog-main.png

آدرس لینک : https://mizfa.com/blog/

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه‌گیری :

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

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

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

علی اسماعیلی

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

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

‫42 دیدگاه ها

    1. سلام علی اکبر، بسیار عالی. ممنون درست نوشتی. البته alt رو متوجه نشدم دقیقا به چه چیزی اشاره میکنه ولی جواب درسته.

    1. سلام محمد، درست نوشتی. به زودی جایزت رو دریافت می‌کنی.

  1. سلام خسته نباشید
    من وقتی میخوام عکسی که داخل سایت میخوام ازش استفاده کنم رو درگ کنم نمیشه موس به حالتی درمیاد که نمیتونم جای عکسای دیگه توی نرم افزار درگ کنم
    چیکار کنم؟
    چون جای عکس قرار گرفته ولی چون توی نرم افزار درگ نشده عکس دیده نمیشه

    1. سلام، متوجه منظورت نشدم، میشه لطفا نمونه کد هات رو ارسال کنی؟

  2. سلام وقتتون بخیر میشه در اندروید هم با note pad++ کد نوشت و وب ساخت؟
    یک سوال دیگه چطوری وبسایتم رو منتشر کنم با کد میاد در خونه ایران هم نیست من یک ناکجا آباد توی آمریکا زدم دیگه نفهمیدم
    یک سوال دیگه من وقتی کد رو میزنم عکس نمیاره یک عکس خم شده ی بسیار بسیار ریز میاد جلوش نوشته smaly face فکر کنم
    ممنون
    منو این همه خوشبختی محاله😬

    1. سلام سبحان. دو بار نظر ارسال کردی. همون اولی اومده بود لازم بود دوباره تایپ کنی.
      ۱ – بهترین نرم افزار برای گوشی اپلیکیشن Dcoder هست و میتونی به کمک اون کدنویسی کنی.
      ۲ و ۳ – سوال دو و سه رو متاسفانه نفهمیدم چی گفتی. برای اینکه سایتت رو همه بتونن ببینن باید هاست بخری و کدهات رو توی هاست آپلود کنی و برای نمایش دادن عکس ها هم باید از تگ img استفاده کنی و نمونه استفاده درست از این تگ رو هم در مقاله گفتیم.

      بله محاله 🙂

  3. خسته نباشی مهندس جان یه سوال هم داشتم
    تو این قطعه کدی که نوشتم و فرستادم دو تا سوال وجود داره
    1. اینکه من مثلا گفتم برو به این پاراگراف یعنی از طریق آیدی لینک دادم بهش, وقتی جامپ میکنه مشخص نمیشه. دیدین تو بعضی سایت ها وقتی رو یه نوشته ای جامپ میکنن پشت نوشته یه رنگ هایلایتی به وجود میاد بعد دوباره محو میشه !!! کاملا پریدنش مشخص میشه. کد اونو واسم مینویسید!!!!
    2. و درمورد ترازبندی لینک هاش لطفا. چون اینجا لینک ها به صورت وسط چین و ستونی هستند از بالا به پایین من میخواهم کنار هم باشن مثلا سه تا سه تا کنار هم

  4. سلام خسته نباشید
    مرسی از سایت خوبتون ولی دوتا سوال داشتم ازتون
    1. اینکه بخایم تصویر رو از یک درایو و درون یک پوشه بخونه و نمایش بده رو چجوری باید بنویسیم من هرطوری نوشتم ارور داد
    2. اینکه بخایم border اطراف عکس رنگش رو عوض کنیم باید چه کدی بنویسیم
    خوشحال میشم اگه جوابمو بدید :))))

    1. سلام رعنا، تصاویر رو باید داخل پوشه پروژه قرار بدی و از این طریق بارگذاری کنید. مقاله آشنایی با آدرس دهی فایل ها را بخون.

      برای تغییر رنگ بردر هم از کد CSS مربوط به بورد ها استفاده کنی که نوید یه مقاله خیلی کامل در این رابطه نوشته.
      آشنایی با Border ها در CSS

      امیدوارم به نتیجه خوبی برسی. موفق باشی.

  5. سلام من میخوام عکس رو تو صحفه وب سایت قرار بدم سمت راست کدش چیه؟؟

  6. سلام
    من یک عکسی در کامپیوترم دارم
    میخواستم بدونم راهی هست که این عکسو برای تست کردن به عنوان تصویر زمینه تو htmlبزارم؟

    1. سلام. کافیه داخل پوشه پروژتون قرارش بدید و بعدش داخل داخل url اینطور وارد کنید : src=”image.jpg” مشکلی نداره.

  7. سلام. من این alt رو مینویسم ولی نه وقتی ماوس روشه و نه در کنارش و نه هیچ جاش اون متنی که نوشتم رو نمیاره فقط خود عکس رو نشون میده. مشکل از چیه؟ممنون

    1. سلام سینا.
      کلا کار alt همین هست و نمایش داده نمیشه. alt جنبه سئویی داره و برای سئو عکس مفید هست.
      ربات های گوگل alt رو بررسی میکنن و همینطور زمانی که عکس ها لود نمیشه alt نمایش داده میشه

  8. سلام من تگ img رو دقیقا مثل شما وارد میکنم ادرس عکسم هم مشکلی نداره ولی عکس در صفحه نشون داده نمیشه ..؟میشه راهنمایی کنین ممکنه کجا مشکل داشته باشه

    1. سلام انیتا.
      باید کدها رو دید نمیشه حدس زد.
      ممکنه تشخیص شما از اینکه میگید ادرس عکسم درسته یا کدهام درسته وجود داشته باشه.
      یا ممکنه کدهای مربوط به CSS باعث عدم نمایش عکس ها باشه.

  9. سلام خسته نباشید آموزش عالیییه . من سوال نیمارو خوندم ولی دقیقا نفهمیدم باید چی رو کجا بزارم که بتونم تصویرم رو دقیقا سمت وسط صفحه بیارم. ممکنه که توی کد من دقیقا اون دستوری رو که باعث میشه تصویر وسط بیاد روبنویسید.

  10. سلام ببخشید چطوری بفهمم آدرس عکس چیه که بزارم توی اچ تی ام ال

    1. سلام ، بستگی به این داره که توی کدام دایرکتوری قرار دادید دیگه.

      برای مثال اگر داخل root قرار داده باشید آدرس عکس میشه آدرس سایتتون به همراه نام عکس و پسوندش مثل آدرس زیر :

      https://address.com/myimage.jpg

      حالا اگر داخل پوشه خاصی مثل Images قرار داده باشید آدرس به شکل زیر میشه:

      https://address.com/Images/myimage.jpg

    2. آخه من شنیده بودم یه سایتهایی هستن که عکتو بهشون میدی اونا یه لینکی بهت میدن اون لینکرو باید بزاری

      1. درسته همچین چیزی هم هست. بهشون میگن آپلودسنتر.
        فکر میکنم پیکوفایل گزینه مناسبی باشه برای آپلود تصاویرتون.

  11. سلام
    ببخشید
    منم دقیقا از همون دستور ها اسفاده کردم ولی عکسی نیومد
    یه بارم دستور خودتونو کپی کردم و اجراش کردم و فقط نوشته smiley face اومد
    مال خودم رو هم عوض smiley face گذاشتم 1
    مرورگرم هم firefox است

    1. سلام ایلیا ، برای اینکه تصویر نمایش داده بشه ، باید لینک یک تصویر رو که در اینترنت وجود داره داخلش قرار بدی یا مثلا یه تصویر رو توی یک آپلود سنتر آپلود بکنی و لینکش رو قرار بدی.

    2. آقا من ی قابلیت جدید دیدم ولی نمیدونم چجوریه ب راهنمایی نیاز دارم ک باید عکس بفرستم میش کمکم کنید!؟
      خدایی اگ در حد حرفه ای هستین جواب بدید

      1. سلام. سوالتون غیرحرفه ای و غیرشفاف هست.
        هر زمان سوال دقیق و با جزئیات پرسیدید در خدمت هستیم.

  12. سلام. ممنونم بابت آموزش کاملتون.
    فقط ی سوال
    میخواستم عکس را در وسط صفحه قرار بدم.
    از align استفاده کردم نشد.
    حالا اینا هیچی توی متنم فقط یک تگ دارم و این رو نوشتم تا شاید عکس بره تو وسط صفه
    } p
    ;text-align: center
    {
    ولی بازم نشد
    چ کنم؟
    البته ی چیزم بگم مطمعن نیسم ک از تگ align درست استفاده کرده باشم. ممنون میشدم راهنمایی کنید. و لازم میدونم ی تشککککککککککککررررررررررررررررررررررر واقعی هم بکنم از ته دل برای اینکه واقعا زود جواب سوالات همه رو میدین واقعاااااااااااا ممنوووووون.

    1. سلام نیمای عزیز.
      در این مواقع نمیتونی دیگه از text-align استفاده کنی. یکی از راه های خوب برای وسط چین کردن اینه که display:block کنی و بعدش margin-left و margin-right رو روی auto قرار بدی.
      موفق باشی.

        1. این کد هایی که گفتم جزء کد های CSS هستش. شما برای معرفی تصویرت از تگ img استفاده کردی دیگه بهش یه کلاس مثلا class=”myimage” بده ، بعدش داخل به کلاسی که ساختی دستورات CSS که گفتم رو بده.

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

          2. سلام ایلیا ، خیلی راحت هست.

            اون تصاویری که مد نظرت بود مثلا :‌

            <img src="url1">
            <img src="url2">
            <img src="url3">
            

            بعد برای جا به جایی عکس ها هم میتونی از float :right و float:left فعلا استفاده کنی تا به صورت کامل با css آشنا بشی.

            همچنین سر فصل ها سمت چپ صفحه بروز شدش هستش.

دیدگاهتان را بنویسید

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

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

همچنین ببینید
بستن
دکمه بازگشت به بالا
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

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