تگ عکس Img

9 / 10 از 17 کاربر

 

تگ عکس img

یکی از مهمترین و پر استفاده ترین تگ ها در HTML تگ img یا عکس می باشد.

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

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

<img    Propertys="values"   ...  />

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

 

 خصوصیت  مقادیر و توضیح مختصر
 src آدرس عکس در فضای وب 
alt متن جایگزین متن
width عرض تصویر به پیکسل
height ارتفاع تصویر به پیکسل
border مقدار پیکسل حاشیه (پیش فرض صفر)
usemap نام شناسه ی نقشه ی تصویر متصل به عکس

 

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

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

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

<img   src="http://pars-soft.ir/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 میتوانید نحوه ی کاربرد آنرا مشاهده نمایید .

mona :
12 8
خوب بود
hazrati :
10 6
اطلاعاتتون خیلی خوب بود. ممنون
zahra :
10 5
عالی!
علی : تشکر
2 4
ممنونم از زحماتتون امیدوارم استفاده بیشتری بکنم از سایتتون موفق باشید
: تشکر فراوان
2 4
مرسی از کد های خوبتون اکه میشه لطفا کد های php را هم بذارید.
نیما : نیما
11 5
ببخشید من میخام عکسی ک در کامپتر خودم دارم بزارم تو سایت میشه کمکم کنید ممنون میشم
roya : رویا
4 0
خوب بود بکارم اوومد ممنون ازتون
عنوان نظر :
نام شما :
ایمیل :
تلفن تماس :
*