قرار دادن تصویر در صفحه اچ تی ام ال

آموزش قرار دادن عکس در سایت: (تصویر در صفحه اچ تی ام ال)

تگ img:

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

برای قرار دادن یک عکس در صفحه به شکل زیر عمل میکنیم :

Source code

1. <img src="http://w3schools-fa.ir/fanavarinovin/uploads/Untitled-1.png"> </img>

خروجی کد بالا به شکل زیر است:

جال اگر چند خصوصیت دیگر را به این تگ اضافه کنیم ، کنترل ما روی این تگ بیشتر میشود:

Source code

1. <img title="fanavari" width="400px" height="40px" src="http://w3schools-fa.ir/fanavarinovin/uploads/Untitled-1.png"> </img>

حروجی کد بالا به شکل زیر است :

در کد بالا خصوصیت title برای افزودن توضیحات به تصویر است این توضیحات هنگامی که موس را روی تصویر چند لحظه نگه داریم نمایش داده میشود.

خصوصیت width  برای تعیین عرض تصویر  و خصوصیت height برای تعیین ارتفاع تصویر استفاده میشه اما توی این خصوصت معمولا به نسبت عرض تصویر ارتفاع نیز تغییر میکند و عرض در این خصوصیتها نسبت به ارتفاع اولویت دارد. لذا با اینکه ما عرض تصویر را ۴۰۰ پیکسل و ارتفاع را ۴۰ پیکسل قرار داده ایم ولی برای اینکه نظم تصویر به هم نریزد ارتفاع نادیده گرفته میشود.

حال شاید ما نیاز داشته باشیم که این اندازه را ناموزون قرار دهیم و قصد داشته باشیم تصویر دقیقا در همان سایز ۴۰۰ در ۴۰ نمایش داده شود در این صورت بهتر ازست از کد سی اس اس استفاده کنیم برایاستفاده از کد سی اس اس در تگ اچ تی ام ال از خصوصیت style استفاده میکنیم ، این کار بسیار ساده است:

به کد زیر نگاه کنید :

Source code

1. <img title="fanavari" style="width:400px;height:40px;" src="http://w3schools-fa.ir/fanavarinovin/uploads/Untitled-1.png"> </img>

نکته : تمامی خصوصیتهای اچ تی ام ال به شکل روبرو نوشته میشود :

“مقدار”=نام خصوصیت     “مقدار”=نام خصوصیت

همانگونه که در شکل بالا میبینید در خصوصیات از = و “” استفده میشود و برای نوشتن چند خصوصیت بین آنها از فاصله استفاده میکنیم مثلا:

title=”ali” src=”http://mbesoft.ir” width=”100px”

اما در نوشتن کدهای سی اس اس به شکل زیر عمل میکنیم:

;مقدار:نام وضعیت ظاهری;مقدار:نام وضعیت ظاهری

فقط کافیست کدهای سی اس اس را در خصوصیت style بنویسیم مثل کد بالا

 خروجی کد بالا به شکل زیر است:

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

شاید تا کنون به این فکر کرده باشید که قوتی شما کلمه ای مثل گل را در گوگل جستجو میکنید ، گوگل از کجا حدس میزند که یک تصویر تصوثر گل است یا گلدان و یا انسان و …

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

به کد زیر توجه کنید:

Source code

1. <img alt="mbe mohammad bagher esmaili fard" title="fanavari" style="width:400px;height:40px;" src="http://"> </img>

در کد بالا چون آدرس تصویر اشتباه وارد شده است لذا تصویر نمایش داده نمیشود اما چون سایز تصویر مشخص شده و برای آن alt مشخص شده خروجی به شکل زیر است:

توصیه میکنیم همیشه برای تصاویر خود توضیحات با خصوصیت alt مشخص کنید وگر نه ممکن است گوگل هیچگاه تصاویر شما را در تنایج جستجوی تصاویر نمایش ندهد و همین باعث میشود تعداد بازدید از سایت شما حتی تا ۵۰ درصد کاهش یابد.فناوری نوین کازرون