آموزش کار با تصاویر یا Images درHTML

سلام و درود میگم خدمت تمام همراهان همیشگیی وب سایت سون ریپلای ،
امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با تصاویر یا Images در HTML با من همراه باشید.

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

آموزش کار با تصاویر یا Images درHTML

همونطور که میدانید تصاویر در دنیای ما نقش بسیار مهمی رو میتونن داشته باشند، نه تنها در یک وبسایت بلکه بطور کلی در هر مکانی وجود تصاویر بسیار مهم و تاثیر گذار خواهند بود.

برای مثال یک وبسایت که تماما از متن استفاده کرده و فقط متن خالی است اصلا جالب و کاربر پسند نیست،
و در مقابل وبسایتی که از تعداد زیادی تصویر استفاده کرده نیز جالب نیست،
پس ما باید در وبسایتمون هم از تصاویر و هم از محتوای متنی بخوبی استفاده نماییم.

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

آموزش کار با تصاویر یا Images درHTML

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

پس بطور کلی تصاویر نه تنها در دنیای وب بلکه در دنیای واقعی ما و در مکان های مختلف وجودشون تاثیر بسیار زیادی میتونن داشته باشند و ما باید همیشه سعی کنیم از تصاویر با معنی و مفهوم مناسب استفاده نماییم.

آشنایی با فرمت های تصاویر در html

قبل از آموزش برچسب نمایش تصویر درhtml لازم است با چند فرمت تصویری مهم و پرکاربرد و نحوه عملکرد این فرمت ها در وب به صورت مختصر و مفید آشنا شوید.
شاید بارها و بارها این فرمت ها را دیده باشید ولی هیچ گاه از کارایی این فرمت ها اطلاعی نداشته باشید. این فرمت ها عبارتند از JPG,GIF,PNG

فرمت PNG

فرمت PNG که مخفف عبارت portable Network Graphic می باشد فرمتی ست که برای انتقال و نمایش تصویر در بستر شبکه ساخته شده است.
این فرمت مانند فرمت GIF امکان پشت نمایی تصویر را فراهم میکند. توسعه دهندگان این فرمت قصد دارند آن را جایگزین فرمت Gif نمایند. هرچند که تا به حال محبوبیت خاصی پیدا نکرده است.

فرمت GIF

فرمت GIF مخفف عبارت Graphics Interchange Format می باشد که یکی از فرمت های پرکاربرد در وب به شمار می رود.
یکی از ویژگی های این فرمت امکان تولید تصویر چند فریمی است تا زمانبندی و نمایش پشت سرهم این فریم ها حالت انیمیشن را در این تصویر فراهم می کند.
دو ویژگی مهم دیگر Interlacing و Transparency می باشد. Transparency برای بیرنگ کردن قسمتی از تصویر و Interlacing برای بارگزاری تدریجی تصویر در صفحه وب است.

فرمت JPG یا JPEG

فرمت JPG مخفف عبارت Joint Photographic Experts Group است. این فرمت یکی از رایج ترین و پرکاربردترین فرمت ها در وب و کلیه دستگاه ها است. فرمت JPG 16 میلیون رنگ را پشتیبانی می کند پس از کیفیت و حجم بالاتری نسبت به فرمت GIF برخوردار است.
هنگام تولید تصویر با فرمت JPG و با فعال کردن گزینه Progressive می توانید امکان بارگزاری تدریجی تصویر در وب را فراهم کنید.

آموزش نمایش تصاویر درHTML

• عکس ها در HTML توسط تگ <img> تعریف می شوند.
• تگ <img> در واقع یک عنصر خالی می باشد، فقط حاوی ویژگی ها است و تگ پایانی ندارد.
• از انجا که عنصر <img>یک عنصر خالی است، پس بهتر است آن را در تگ شروع به شکل <img /> ببندیم
• ویژگی src یک آدرس وبی (URL) را برای عکس مشخص می کند.

یک مثال ساده به کد زیر دقت فرمایید.

ویژگی alt در تگ img

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

مرورگرها به دلایل زیر نمی توانند عکس ها را نمایش دهند و از متن جایگزین استفاده می کنند.

• سرعت پایین اینترنت کاربر
• ایجاد شدن خطا در URL عکس
• کاربر در تنظیمات مرورگر نمایش عکس ها را غیر فعال کرده باشد.

ویژگی title در تگ img

علاوه بر ویژگی alt که متن جایگزین تصویر است، از ویژگی title می توانیم برای هنگامی که کاربر ماوس را روی تصویر می برد جهت نمایش پیام به صورت بالن (Tooltip) استفاده کنیم، مقدار این ویژگی متن برای توضیح بیشتر در مورد تصویر است.

هنگامی که کاربر نشانه گر ماوس را روی تصویر فرضی logo-7reply-com.jpg ببرد متن “نمایش تصویر در HTML” به صورت بالن ظاهر خواهد شد.

اندازه تصاویر – خاصیت های Width و Height

وصیت height و width برای مشخص کردن طول و عرض یک عکس استفاده می شود.

مقدار این خصوصیت ها به طور پیش فرض بر اساس پیکسل مشخص می شوند.

نکته: این کار خوبی است که خصوصیت عرض و طول یک عکس را مشخص کنید. اگر این خصوصیت ها تنظیم شوند، زمانی که صفحه در حال لود شدن است، مکان مورد نیاز برای عکس در بین دیگر عناصر صفحه رزرو شده است. بنابراین طرح صفحه در حال لود با طرح کاملاً لود شده ی صفحه، تفاوتی نخواهد داشت. اما اگر این خصوصیات را تنظیم نکنید، مرورگر نمی تواند اندازه عکس را تشخیص دهد و اگر تصویری در بین متن باشد. جای آن تا لود کامل تصویر خالی خواهد ماند.

ویژگی border در تگ img

از ویژگی border مخصوصا در مواقعی که به تصویر خود لینک می دهیم برای حذف حاشیه ها استفاده می شود،
در برخی مرورگرها وقتی یک تصویر به صورت لینک شده (با تگ a) باشد در حالت پیش فرض نوار معمولا آب رنگی به عنوان حاشیه تصویر در نظر گرفته می شود،
برای حذف این حالت می توانیم مقدار صفر را برای ویژگی border در نظر بگیریم،

به طور مثال:

نکته: در نسخه 5 HTML این ویژگی منسوخ شده و نباید دیگر استفاده شود، به جای ویژگی border می توانیم از معادل CSS آن استفاده کنیم:

خلاصه این آموزش کار با تصاویر یا Images درHTML

• عنصر <img> یک تصویر را تعریف می کند.
• ویژگی src یک URL برای تصویر تعریف می کند.
• ویژگی alt یک متن جایگزین برای زمانی که تصویر قابل نمایش نباشد، تعریف می کند.
• ویژگی ها width و height اندازه تصاویر را تعریف می کنند.

خب دوستان به پایان بخش کار با تصاویر یا Images در HTML رسیدیم، امیدوارم که مشکلی در این بخش نداشته باشید. واگرهم مشکلی در این بخش دارید لطفا توی قسمت نظرات برای من ارسال کنید تا پاسخ دهم.