HTML5 مقدماتی

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

آموزش HTML5
آموزش HTML5

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

تصاویر در html با استفاده از تگ <img> تعریف می شوند. تگ <img> یک تگ خالی می باشد همانطور که در فصل های گذشته گفته شد تگ های خالی نیازی به تگ پایان ندارند.
تگ تصویر به صورت زیر در html تعریف می شود.

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

تگ <img> دارای چند صفت می باشد .صفت src و alt .

صفت src در html
صفت src از کلمه source گرفته شده . این صفت آدرس عکس مورد نظر .
به تصویر زیر دقت کنید در صفت src آدرس تصویر مورد نظر وارد شده است img نام پوشه ای است که تصاویر در آنها ذخیره شده اند و logo.png نام عکس مورد نظر می باشد .

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

اگر عکس مورد نظر در یک فولدر قبل از فولدر اصلی است با استفاده از

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

به فولدر قبلی دسترسی پیدا می کنید.

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

مرورگرها هر جا که تگ <img> نوشته شده باشد عکسی که در قسمت src وارد کرده اید را نمایش می دهند ، حالا اگر این تگ بین تگ های دیگر مانند تگ پاراگراف باشد ، اول پاراگراف به نمایش در میاید و سپس عکس مورد نظر و در آخر پاراگراف آخر به نمایش در می آید.
صفت Alt در HTML
صفت Alt برای نوشتن یک متن و یا اطلاعات برای تصویر مورد نظر می باشد .این متن در زمان بروز مشکل (اشکال در اینترنت ، اشتباه تایپی در آدرس عکس ) به نمایش در می آید.
صفتهای ارتفاع و عرض (Height and Width)تصاویر در HTML
صفت های ارتفاع و عرض برای تعریف ارتفاع و عرض خاص برای تصاویر استفاده می شود . مقدار این صفت ها باید به صورت پیکسل (px) وارد شود .بهتر است که ارتفاع و عرض عکس مورد نظر خود را وارد کنید .مرورگرها اندازه واقعی تصویر را نمی توانند تا زمان لود شدن کامل متوجه شوند، این کار باعث می شود که تصاویر زود تر و همچنین در جای درست خود قرار بگیرند.

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

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

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

پیروز باشید، طراح باشی


پیروز باشید!
طراح باشی

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

طراح‌باشی

نوشتن دیدگاه

برای نوشتن دیدگاه کلیک کنید

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

پربازدیدها