60% تخفیف ویژه دوره تخصصی وردپرس به مدت محدود مشاهده دوره

آموزش تگ img در html با مثال + فیلم آموزشی

آموزش تگ img در html : اگر قصد نمایش تصویر در html را دارید، نیاز است که این تگ را به خوبی بشناسید و تنظیمات اصولی آن را فرا بگیرید. در این آموزش سعی می کنیم با آموزش تگ img در html به همراه مثالهای گوناگون این موضع را به صورت کامل برای شما شفاف کنیم پس حتما فیلم آموزشی بالا را ببینید، (ویدیو بالا بخشی از دوره  رایگان آموزش html است.)

 

آموزش تگ img در html

در آموزش تگ img در html که در این صفحه ارائه می دهیم تلاش شده تا تمام نکات مربوط به این تگ خدمت شما ارائه شود، تا بتوانبد به صورت اصولی و صحیح از آن استفاده نمایید. همچنین اگر هنگام نمایش تصویر در html با مشکلی مواجه شدید بتوانید به راحتی آن را برطرف نمایید.

این پست رو حتما ببین : تگ های html

 

نمایش تصویر در html

برای نمایش تصویر در html شما باید از تگ img به صورت زیر استفاده نمایید.

<img src=”url”>

 

 

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

  • تگ img یک تگ تهی است و تگ بسته ندارد.
  • این تگ همیشه با خصوصیت src (برای مشخص کردن آدرس عکس) همراه است.

همین کد کوتاه می تواند عکس شما را نمایش دهد. در خصوص آدرس دهی، در زیر راهنمایی لازم را خدمت شما ارائه می دهیم.

 

صفت src (برای آدرس دادن عکس در html)

برای اینکه به صورت کامل متوجه آدرس دهی شوید، همین الان دست به کار شوید و به صورت عملی مثالهای زیر را انجام دهید.

مثال

  1. همین الان روی دیستاپ خود یک پوشه جدید (New folder) ایجاد کنید.
  2. داخل این پوشه نیز یک فایل html با نام دلخواه ایجاد کنید (مثلا test.html)
  3. و یک عکس نیز با نام دلخواه (pic.jpg) در این پوشه قرار دهید.

حالا برای فراخوانی عکس کافی است فایل test.html را با ویرایشگر خود باز کرده و کد زیر را داخل آن بنویسید:

<img src=”pic.jpg“>

 

یک مثال حرفه ای تر برای استفاده از src:

در مثال قبل، فایل عکس در کنار فایل html بود. از این رو برای آدرس دهی کافی بود نام عکس را در جلو src بنویسیم.

  1. حالا در کنار فایل test.html خود، یک پوشه جدید با نام img بسازید
  2. و عکس خود را داخل آن قرار دهید.

برای آدرس دهی این بار باید ابتدا نام پوشه و سپس نام عکس را بنویسیم. به صورت زیر:

<img src=”img/pic.jpg“>

 

نکته: اگر پوشه های بیشتری نیز وجود داشته باشد، به ترتیب نام پوشه ها را می نویسیم تا به عکس مورد نظر برسیم.

 

صفت alt (توضیح کوتاه درباره عکس)

صفت alt را نیز می توانیم در تگ img استفاده نماییم تا در برخی مواقع که عکس برای کاربر لود نمی شود این متن را ببیند. همچنین برای سئو نیز نوشتن تگ alt برای تصویر بسیار اهمیت دارد. موتورهای جستجو با استفاده از این تگ متوجه می شوند تصویر درباره چیست. استفاده از این تگ به صورت زیر است:

<img src=”img/pic.jpg” alt=”آموزش طراحی سایت”>

نکته: در وردپرس هنگامی که می خواهیم یک عکس را در صفحه قرار دهیم می توانیم برای آن توضیحات و alt هم تعیین نماییم و به صورت اتوماتیک این ویژگی به تگ img اضافه می شود. بنابراین ضرورتی برای نوشتن این صفت در کدها نمی باشد.

 

تنظیمات عکس در html

تا به حال یاد گرفتیم که عکس در هر کجا باشد را به راحتی فراخوانی کنیم، ولی برای اینکه اندازه تصویر، جایی از صفحه که می خواهیم عکس ما در آن قرار گیرد و … را مطابق با سلیقه خود تنظیم کنیم، باید با استایل دهی در css این کار را انجام دهیم.

البته در html و جلوی تگ مورد نظر هم می توانیم استایل دهی کنیم. ولی اگر می خواهیم که کدنویسی اصولی تری داشته باشیم باید یک فایل css نیز در پوشه خود به وجود آورده و استایل ها را در آن اعمال کنیم.

در زیر ایجاد برخی از ویژگی ها را که با استایل دهی می توانیم ایجاد کنیم بررسی می کنیم.

 

تنظیم عرض و ارتفاع تصویر

با نوشتن width و  height به راحتی می توانید عرض و ارتفاع را تنظیم کنید.

<img src=”images/girls-1.jpg” width=”۳۰۰″ height=”۱۹۴″>

 

چند نکته در خصوص تنظیم عرض و ارتفاع:

  • بهتر است در فایل css تنظیمات خود را اعمال کنیم.
  • در صورت نیاز به تنظیم عرض و ارتفاع آن را به صورت درصد بیان کنیم، تا در دستگاه های متفاوت درست نمایش داده شود. (مثلا بنویسیم width:80% تا در موبایل، تبلت و … به صورت اتوماتیک به اندازه ۸۰ درصد آن دستگاه تنظیم شود.)
  • می توانیم از ویژگی max-width و max-height برای تنظیم بیشترین عرض و بیشترین ارتفاع استفاده کنیم. (مثلا زمانی که max-width:100% قرار می گیرد یعنی عکس ما بیشتر از ۱۰۰ درصد کادر را احاطه نکند و از آن خارج نشود)

 

قرار دادن عکس در وسط صفحه در html

برای اینکه عکس در وسط صفحه قرار گیرد می توانید از استایل زیر استفاده کنید.

 

۱٫ در ابتدا یک عکس را فراخوانی کنید و یک استایل دلخواه (مثلا center) برای آن در نظر بگیرید:

<img src=”pic.jpg” style=”center”>

۲٫ حالا داخل فایل css خود استایل زیر را برای آن بنویسید:

.center {

display: block;

width: 50%;

margin: auto;

}

به اینصورت ۵۰ درصد از صفحه ما را اشغال می کند و margin: auto  باعث می شود از چپ و راست به یک اندازه فاصله بگیرد و به همین سادگی عکس در وسط صفحه قرار می گیرد.

 

لینک دار کردن عکس ها

برای لینک دار کردن عکس کافی است تگ img را داخل تگ a بنویسیم. به صورت زیر:

<a href=”https://MY-LINK“>

<img src=”pic.jpg”>

</a>

به جای MY-LINK آدرس صفحه ای که می خواهید به آن لینک دهید نوشته شود.

 

مشکل عدم نمایش عکس در html

در این مطلب به صورت کامل با فراخوانی عکس آشنا شدید و همیشه می توانید به همین ترتیب عکس های خود را فراخوانی کنید.

حالا اگر در جایی با مشکلی جهت نمایش مواجه شدید بدانید که ممکن است خطایی در کدنویسی شما رخ داده است.

 

برخی از خطاها برای فراخوانی تصویر:

  • عکسی در پوشه شما وجود ندارد.
  • نام تصویر را اشتباه نوشته اید.
  • پسوند تصویر را وارد نکرده اید.
  • هنگام فراخوانی پوشه ای که تصویر در آن قرار دارد اشتباهی رخ داده است.

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

امیدوارم آموزش تگ img در html مورد استفاده شما قرار گرفته باشید. هر گونه سوالی در این رابطه داشتید، خوشحال می شوم در کامنت ها مطرح نمایید…

منبع : https://www.w3schools.com/tags/tag_img.asp

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

نشانی ایمیل شما منتشر نخواهد شد.