heidari

تگ عکس img

1 پست در این موضوع قرار دارد

تگ عکس img

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

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

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

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

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

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

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

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

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

<img src="
/>

خروجی بصورت زیر می باشد :

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" />

خروجی بصورت زیر می باشد :

1.jpg

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

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

2

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط madish
      سلام وقت بخیر یه سوال داشتم اگر بتونین کمک کنید ممنون میشم
      ببینید من یه لیست باز شو شرطی میخام که بدون دکمه تایید یا ارسال باشه بع این صورت که کاربر وقتی لیست رو باز کرد روی هر گزینه کلیک کرد یه لینک براش باز شه
      ساده تر میتونم بگم
      لیست شرطی که بلافاصله از انتخاب (بدون دکمه تایید یا ارسال) یه لینک جدید باز شه
      مث صفحه اصلی سایت اچاره با یه تفاوت های ریز
      اینو چطور میتونم با وردپرس پیاده کنم ؟
      افزونه یا چیزی هست ؟
      ممنون میشم راهنمایی کنین
    • توسط mory_fun
      سلام دوستان
      یک دامین جدید برای سایتم ادد کردم و بقیه رو به این شکل ریدایرکت کردم درسته ؟
      RewriteEngine on RewriteCond %{HTTP_HOST} ^www.old.ir [NC,OR] RewriteCond %{HTTP_HOST} ^old.ir [NC] RewriteCond %{HTTP_HOST} ^www.new.xyz [NC] RewriteRule ^(.*)$ http://new.xyz/$1 [L,R=301,NC]  
    • توسط naderi
      سلام .. برای توسعه یک وب سایت با قالب Eduma وردپرس میخوایم یه سری قابلیت ها رو بهش اضافه کنیم .. از دوستان کسی هست که بتونه به ما کمک کنه؟
    • توسط s.m.a1383
      سلام می خواستم ببینم به جای اینکه محصولات رو توی صفحه اول سایت بگذارم میشه دسته های محصولات رو توی صفحه اول سایت گذاشت؟
      آدرس سایت من:innolabs.ir
      در ضمن از پوسته "هستیا "استفاده میکنم افزونه یا کدی هست که بتونه به جای نمایش محصولات در صفحه اول دسته های محصولات رو نمایش بده در ضمن هر کد یا افزونه ای که گفتید طریقه انجامش رو هم بگید لطفا.
      خیلی ممنون از لطفتون
    • توسط resanehwp
      دوستانی که می خوان قلاب های ووکامرس و ترتیب اجرای اونها رو یاد بگیرن
      در لینک زیر صفحه آرشیو محصولات رو می تونید بررسی کنید
      http://bit.ly/rhwp1006