آموزش زبان HTML | تگ عکس img

تگ عکس img در HTML

یکی از مهمترین و پر استفاده ترین تگ ها در HTML  تگ عکس یا img  می باشد. با استفاده از این تگ شما میتوانید عکس دلخواهی را در صفحه ی HTML قرار داده و آنرا با اندازه و شکل دلخواهی نمایش دهید.

نکته : این تگ بصورت یکه بکار می رود :

<img    Propertys=”values”   …  />

اعضای شبکه مشاوران در حوزه «برنامه‌نویسی، وب و امنیت سایبری»

All Locations ایران— تهران— آذربایجان غربی— مازندران— اصفهان— آذربایجان شرقی— کردستان— گیلان— البرز— خراسان شمالی— کرمانشاه— لرستان— فارس— قزوین— سمنان— همدان— خراسان رضویترکیه— استانبول— آنکاراامارات— ابوظبی— دبیآلمان— راینلاند فالتس— برلین— بایرنآمریکا— تگزاس

مهمترین خصوصیات <img> بصورت زیر است:

خصوصیت Src : در این خصوصیت که اصلی ترین خصوصیت تگ <img> می باشد ، آدرس تصویر آپلود شده در فضای اینترنت قرار میگیرد.

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

ساده ترین مثال از استفاده ی تگ img :

<img   src=”http://AliGhavami.com/administrator/files/UploadFile/1.jpg”   />

خصوصیت Alt : خصوصیت Alt یا Alternate Image ، خصوصیتی مهم می باشد که برای متن جایگزین تصویر به کار می رود.

در حالت پیش فرض در صورت اشتباه بودن آدرس و لود نشدن تصویر در مرورگر اکسپلورر علامت ضربدر را برای عکس نمایش میدهد (در مرورگرهایی مثل اپرا علامت ضربدر نیز نمایش داده نمی شود).

حال با استفاده از خصوصیت alt برای تگ img میتوان در صورتی که آدرس عکس اشتباه و یا عکس نتواند لود شود ، متنی را به کاربر نشان دهیم.

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

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

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

<img   src=”administrator/files/UploadFile/1.jpg1″   alt=”عکس مربوط به چشم”   />

خصوصیات width , height , border : بصورت پیش فرض تگ img نمایش عکس ها را به اندازه ی اصلی عکس و بدون خط حاشیه نمایش میدهد. در صورتی که بخواهید تصویر را در سایز دلخواه و با خط حاشیه نمایش دهید از این خصوصیات استفاده نمایید. بطور مثال :

<img   src=”administrator/files/UploadFile/1.jpg”   alt=”عکس مربوط به چشم”  width=”100″    height=”100″   border=”2″   />

 نکته ی مهم دیگر که در بخش Seo به طور مفصل تری به آن پرداخته میشود این است ، با وجود اینکه خود HTML در صورت قرار ندادن سایز عکس با استفاده از height و widht ، اندازه ی تصویر ار به اندازه ی خود تصویر تبدیل میکند اما برای این پردازش اضافه توسط مرورگر ها و در نتیجه سرعت بالاتر لود صفحه سایز تصویر را وارد نمایید.

خصوصیت Usemap : این خصوصیت برای استفاده از عکس محدوده ای با استفاده از تگ های map و area می باشد. در بخش عکس محدوده ای map , area میتوانید نحوه ی کاربرد آنرا مشاهده نمایید .