تگ img برای قرار دادن تصاویر در وب سایت ( ساده ولی کاربردی html – قسمت 17 )

خوب این هم از اولین پست در سال 1394 خورشیدی …

امید است با همراهی شما کاربران گرامی , در سال جدید شاهد پیشرفت دوچندان سایت اسکریپت دات کام باشیم و لحظات خوبی رو در کنار هم بگذرونیم .

این پست از سریال پست های ساده ولی کاربردی html می باشد که امروز با  تگ img که تگی فوق مهم در html هست در خدمت شما هستم .

این تگ برای نمایش یک تصویر در وب سایت می باشد . وقتی صحبت از تصویر میشه , همه ی ما پسوند های مختلفی به ذهنمون خطور میکنه ولی باید بدونیم که این تگ فقط قادر به نمایش 3 پسوند می باشد .

این پسوند ها شامل gif , png و jpg می باشد .

تگ img : این تگ به صورت Empty و Inline Level می باشد و کار آن درج یک تصویر در صفحات وب سایت می باشد .

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

همان طور که قبلا گفتم , فایل عکس حتما باید یکی از سه پسوند png , gif یا jpg باشد .

خاصیت alt : این خاصیت هم باید حتما در کنار خاصیت src باشد . مقدار این خاصیت باید توضیح مختصری از عکس مورد نظر شما باشد که این کار بسیار سئویی هم می باشد .

به عنوان مثال در کد زیر , بنده عکس خودم را در وب سایت گذاشته ام . پس میتونم مقدار alt رو وحید مجیدی بزارم . ( این مقدار با هر زبانی که باشد مشکلی ندارد اما طبیعتا برای ارتقا رتبه در موتور های جستجو , فارسی مینویسیم ) .

<img src="images/vms.jpg" alt="وحید مجیدی">

این تگ دارای دو خاصیت دیگر هم می باشد .

خاصیت width : به معنای مقدار پهنا یا همان طول عکس می باشد که برحسب پیکسل یا % میباشد . بهتر است از مقدار واقعی عکس بیشتر داده نشود .

خاصیت height : به معنای مقدار ارتفاع عکس می باشد که برحسب پیکسل یا % میباشد . بهتر است از مقدار واقعی عکس بیشتر داده نشود .

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

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

مزیت دیگر اینکه به عکس ها width و height میدهیم این است که با load نشدن عکس به هر دلیلی ( از جمله سرعت پایین اینترنت ) , نوشته ی درون alt , بر روی عکس ظاهر میشود که میتواند راهنمای خوبی برای کاربر باشد .

<img src="vms.jpg" alt="وحید مجیدی" width="300" height="400">

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

نکته : خاصیت هایی دیگری وجود دارد , ولی چون در html5 این خاصیت ها منسوخ شده است از گفتن آنها صرف نظر میکنم .

 آموزش : وحید مجیدی

پخش اختصاصی