آشنایی با عنصر img و کاربرد آن در HTML
همانطور که در پست های قبل به شما کاربران عزیز قول داده بودیم که سایر تگ های HTML را به شما آموزش دهیم ، در این پست می خواهیم به آموزش عنصر img و کاربرد آن در HTML برای شما دوستان عزیز بپردازیم . امیدواریم مقاله آشنایی با عنصر img و کاربرد آن در HTML مورد توجه شما قرار بگیرد و برای شما مفید و کاربردی باشد. با ما همراه باشید.
عنصر img و کاربرد آن در HTML
تگ img نشانگر یک تصویر در مدرک می باشد و به دو خصوصیت SRC و ALT نیاز دارد. عکس های به شیوه فنی در صفحه HTML قرار نمیگیرند بلکه به صفحات HTML لینک میشوند. تگ فضایی برای قرار گرفتن تصویر ارجاع داده شده به وجود خواهـد آورد .
مثال ۱ : قرار دادن تصویر در مدرک html
1 | <img src=“http://compiler.ir/wp-content/uploads/2014/11/56.jpg” alt=“compiler” /> |
عنصر img و کاربرد آن در HTML
عنصر img و کاربرد آن در HTML
مثال ۲ : لینک کردن تصاویر
1 | <a href=“http://compiler.ir/”><img src=“http://compiler.ir/wp-content/uploads/2014/11/56.jpg” alt=“compiler” /> </a> |
فرمت های تصویری حمایت شده
استاندارد HTML لیستی از فرمت عکسهایی که می بایست حمایت گـردد را عرضه نکرده است، پس هر عاملِ کاربر گروه مختـلفی از فرمت ها را حمایت می کند . Gecko از فرمت های پایین حمایت می کند :
- JPEG
- GIF، از جمله GIF های متحرک
- PNG
- APNG
- SVG
- BMP
- BMP ICO
- PNG ICO
عنصر img و کاربرد آن در HTML
تفاوت میـان HTML4.01 و HTML5
ویژگی های align ، border ، hspace ، longdesc ، vspace در HTML5 حمایت نمی شوند.
تفاوت میـان HTML و XHTML
در HTML تگ برچسب پایانی ندارد درحالیکه در XHTML برچسب قطعا باید بسته شود.
عنصر img و کاربرد آن در HTML
ویژگی ها:
تگ HTML خواهـد توانست حاوی یک یا چند خصوصیت باشد که چگونگی عرضه در مرورگر را مشـخص میکنند. خصوصیت ها حاوی یک نام و یک مقدار می باشند که با علامت (=) از هم جدا شده اند. مقدار خصوصیت با علامت نقل قول احاطه می شود .
۳ نوع خصوصیت وجود دارد که شما خواهید توانست به تگ های HTML خود اضافه نمایید :
ویژگی خاص عنصر
ویژگی عمومی
ویژگی رویداد
ویژگی خاص عنصر
| خاصیت | مقدار | شرح |
| align | top bottom middle left right | در HTML5 حمایت نمی شود چیدمان یک تصویر را با دقت به عناصر اطراف آن معیـن می کند |
| alt | text | یک متن برای تصویر معیـن می کند |
| border | pixels | در HTML5 حمایت نمی شود پهنای کادر یک تصویر را معیـن می کند |
| crossorigin جدید | anonymous use-credentials | اجازه خواهـد داد عکس های از سایت های دیگر در مدرک html قرار بگیرد. |
| height | pixels | ارتفاع یک تصویر را مشـخص می کند . |
| hspace | pixels | در HTML5 حمایت نمی شود در سمت چپ و راست تصویر فضای خالی مشـخص می کند |
| ismap | ismap | یک تصویر را به عنوان نقشه تصویری سمت سرور معیـن می کند |
| longdesc | URL | در HTML5 حمایت نمی شود یک URL برای مدرک ی که حاوی توضیحاتی از یک تصویر می باشد مشخص می کند |
| src | URL | URL یک تصویر را معیـن می کند |
| usemap | #mapname | یک تصویر را به عنوان نقشه تصویری سمت سرویس گیرنده معیـن می کند |
| vspace | pixels | در HTML5 حمایت نمی شود در بالا و زیـر تصویر فضای خالی مشـخص می کند |
| width | pixels | عرض یک تصویر را مشـخص می کند |
ویژگی های عمومی
تگ img از خصوصیت های عمومی HTML حمایت می کند
| accesskey | hidden | itemtype |
| class | id | lang |
| contenteditable | inert | spellcheck |
| contextmenu | itemid | style |
| dir | itemprop | tabindex |
| draggable | itemref | title |
| dropzone | itemscope | translate |
ویژگی های رویداد
تگ img از خصوصیت های رویداد در HTML هم حمایت می کند .
| onabort | onended | onmousewheel |
| oncancel | onerror | onpause |
| onblur | onfocus | onplay |
| oncanplay | onformchange | onplaying |
| oncanplaythrough | onforminput | onprogress |
| onchange | oninput | onratechange |
| onclick | oninvalid | onreadystatechange |
| oncontextmenu | onkeydown | onscroll |
| ondblclick | onkeypress | onseeked |
| ondrag | onkeyup | onseeking |
| ondragend | onload | onselect |
| ondragenter | onloadeddata | onshow |
| ondragexit | onloadedmetadata | onstalled |
| ondragleave | onloadstart | onsubmit |
| ondragover | onmousedown | onsuspend |
| ondragstart | onmousemove | ontimeبروزرسانی |
| ondrop | onmouseout | onvolumechange |
| ondurationchange | onmouseover | onwaiting |
| onemptied | onmouseup |
حمایت از مرورگر ها
تگ img در تمام مرورگرهای مهـم مثل اینترنت اکسپلورر، فایرفاکس ، اپرا ، گوگل کروم و سافاری حمایت می شود .
مرورگرها همیشه عکس های ارجاع داده شده توسـط عنصر را نمایش نمیدهند. در مرورگرهای غیر گرافیکـی و یا زمانـی که کاربر مرورگر خود را گونه ای تنظیم نماید که عکس های نمایش داده نشوند، شانس دارد متن مشـخص شده در خصوصیت ALT این عنصر، جایگزین تصویر شود.
تنظیمات پیش فرض CSS :
بیشتر مرورگر ها عنصر img را با مقادیر پیش فرض پایین مشخص میکنند:
img { display: inline-block; }
| 1 2 3 | img { display: inline-block; } |
خب دوستان به انتهای مقاله آموزشی آشنایی با عنصر img و کاربرد آن در HTML رسیدیم. از توجه و همراهی شما با این آموزش سپاسپزاریم. همچنان منتظر آموزش تگ های دیگر در HTML باشید. در صورتی که نیاز به اطلاعات بیشتر درمورد سرور مجازی و سرور اختصاصی دارید، سایر مقالات این سایت را دنبال نمایید.
