آموزش زبان برنامه نویسی 14html

آموزش زبان برنامه نویسی html درس 14 در com01.ir

14html

در این درس قصد داریم تا با تگ img در ساختار html  آشنا شویم

با com01همراه باشید …

14html

 ‎آشنایی با تگ img و کاربرد آن در زبان برنامه نویسی html :

به جرات می توان گفت که در بین تگ های html یکی از پرکاربردترین آنها  تگ نمایش تصاویر یا img است !

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

علاوه بر   تگ img به عنوان یک تگ کلیدی ، می توان از عناصر دیگری مانند :  alt، title، map، area، border و…استفاده کرد که قابلیت های بیشتری در نحوه نمایش داده شدن تصاویر و کنترل  کردن رفتارهای رویدادی (مانند مشخص کردن محل کلیک کاربر) در اختیارمان می گذارند .

تگ img در HTML در زبان برنامه نویسی html :

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

ویژگی title در تگ img در زبان برنامه نویسی html :

از ویژگی title می توان برای هنگامی که کاربر ماوس را روی تصویر می برد، برای نمایان شدن یک پیام به صورت توصیف (tooltip) استفاده کرد .

 ویژگی alt در تگ img در زبان برنامه نویسی html :

جهت درست نمایش داده شدن تصاویر باید در کنار تگ img از خاصیت های جانبی آن بهره مند شویم ،

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

ویژگی height و width در تگ img در زبان برنامه نویسی html :

با این ویژگی می توانید ارتفاع و عرض تصویر خود را تعیین کنید . برای اینکار از دو ویژگی width و height استفاده می کنیم ، این مورد مخصوصا برای سئو و موتورهای جستجو از اهمیت ویژه ای برخوردار است .

ویژگی usemap در تگ img در زبان برنامه نویسی html :

ویژگی هایی را که تا به اینجا بیان کردیم جهت تصاویر معمولی در صفحات وب کفایت می کنند، ولی برای موارد پیشرفته تر از خاصیت usemap و area برای مشخص کردن نقطه های قابل کلیک در یک تصویر استفاده می کنیم ( گاهی نیاز است که بیشتر از چند لینک را در یک تصویر قرار دهیم یا بخش خاصی از آن را قابل کلیک شدن نمائیم ، این دسته از تنظیمات با ویژگی usemap و area در تگ img بر روی تصاویر امکان پذیر است ) .

نکات با اهمیت در ویژگی usemap در تگ img در زبان برنامه نویسی html :

باید از شکل اشیایی که انتخاب می کنیم درست استفاده کنیم، سه مقدار circle ،poly و rect برای قسمت shape در area کاربردی هستند . rect به معنی rectangle یا مربع مستطیل poly یک شیء چند ضلعی circle برای ترسیم محیط قابل کلیک شدن به شکل دایره …

نحوه تنظیم مقادیر area در map در زبان برنامه نویسی html :

برای تعریف نمودن صحیح نقاط قابل کلیک باید با نحوه مقدار دهی درست برای شکل های متفاوت، مهارت داشته باشید. جهت مربع مستطیلی ، از چهار عدد به عنوان گوشه چپ – بالا و راست – پائین استفاده می کنیم ( در واقع شما میزان فاصله سمت چپ و بالای تصویر و همچنین سمت راست و پائین تصویر را برای قابل کلیک خوردن تعیین می کنید ) .

جهت اشیاء چندگانه  باید از 6 مقدار استفاده کنید، این مقادیر موقعیت محل قابل کلیک شدن را نشان می دهند .

جهت اشیاء دایره ای شکل یا circle لازم است تا دو مقدار را تعیین کنید، البته برای تعیین انحراف از مرکز دایره، مقدار سومی نیز می توان تنظیم کرد که به فرض دایره را به شکل بیضی تبدیل کند !

اینفوگرافیک آموزش زبان برنامه نویسی html درس 14 از com01

  open image open image open image

مطالب مرتبط :

برنامه نویسی html ،آموزش تصویری
     

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.