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

علیرضا حاتمی نیا 14323

 

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

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

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

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

فرمت GIF

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

فرمت JPG یا JPEG

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

فرمت PNG

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

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

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

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

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

فرض کنید تصویری را با فرمت 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"> 

استقاده از خصوصیت title در تگ img

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

کلمات کلیدی

لینک های مرتبط

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