نحوه نمایش تصویر در HTML

علیرضا حاتمی نیا 1395/9/24 3998

نحوه نمایش تصویر در HTML

با عرض سلام خدمت شما همراهان و علاقه مندان به آموزش برنامه نویسی و آموزش طراحی وب

علیرضا حاتمی نیا هستم با قسمت پنجم از آموزش طراحی وب در خدمت شما عزیزان هستم .

در جلسه پیش با مهمترین تگ هایی که روی متون تاثیرگذار بودند آشنا  شدیم. دراین جلسه قصد داریم نحوه نمایش تصویر در وب را یاد بگیریم.

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

  1. فرمت GIF :

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

  1. فرمت JPG یا JPEG :

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

  1. فرمت PNG :

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

نمایش تصویر در صفحه وب :

برای نمایش تصویر در صفحه وب از تگ <img> استفاده می کنیم. img مخفف عبارت image است . این تگ دارای تگ پایانی نیست ولی دارای دو مشخصه اجباری و چند مشخصه اختیاری است. مشخصه های اجباری src و alt می باشند.

src:  از کلمه source به معنی منبع گرفته شده است که مقدار آن برابر با نشانی و نام تصویر همراه با پسوند آن است.

alt : مخفف عبارت alternative می باشد و اگر مرورگر به هردلیلی نتواند تصویر را نمایش دهد به جای آن متنی که به عنوان مقدار alt در نظر گرفته شده است را نمایش می دهد. البته موتورهای جستجو اهمیت ویژه ای به این خصیصه می دهند.

شکل کلی مفاهیمی که دربالا ذکر شد به صورت زیر می باشد:

فرض کنید تصویری را با فرمت jpg و با نام logo کنار سند html ذخیره کردیم.(مطابق شکل)

نمایش تصویر در وب با تک <img>

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

<img src=”logo.jpg” alt=”this is logo”>

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

اگر کنار سند html پوشه ای به نام images ایجاد کنیم و تصویر را داخل آن قرار دهیم، نحوه آدرس دهی در src به این شکل می شود.

<img src=”images/logo.jpg” alt=”this is logo”>

نمایش مشخصه alt در تک img

اگر اختلالی در نمایش تصویر برای مرورگر رخ دهد مثلا اگر آدرس عکس را اشتباه وارد کنیم و مرورگر نتواند تصویر مورد نظر را پیدا کند ، متنی که به عنوان مقدار برای alt در نظر گرفته ایم نمایش داده میشود.

نمایش مقدار alt در تگ <img>

خب در اینجا با 2 مشخصه اجباری alt و source آشنا شدیم. یکی دیگه از مشخصه هایی که به عنوان مشخصه اختیاری در تگ <img> مورد استفاده قرار می گیرد title است.

title: مقداری که برای  مشخصه title در <img> در نظر گرفته می شود به عنوان توضیحی درباره عکس لحاظ می شود. اگر کاربر موس خود را روی تصویر قرار دهد متنی که به عنوان مقدار برای title در نظر گرفته اید به کاربر نمایش داده می شود.

<img src=”logo.jpg” alt=”html logo” title=”this image is HTML logo”> 

نمایش تصویر <img>

خب مشخصه های دیگری برای تگ img وجود دارد که روی ظاهر و محل قرار گیری تصویر تاثیر گذار هستند. با ورود css این مشخصه ها منسوخ شده و دیگر استفاده نمی شوند. در آموزش Css حتما این مشخصه ها آموزش داده می شود.

در پایان برای این مبحث فیلم آموزشی ساخته شده که می توانید از لینک زیر آن را دانلود و مشاهده کنید.

امیدوارم از این آموزش لذت برده باشید. با سپاس از همراهی شما. 

دانلود ویدیو

قسمت بعدی قسمت قبلی