نحوه نمایش تصویر در HTML
Your browser doesn't support video.
Please download the file: video/mp4
با عرض سلام خدمت شما همراهان و علاقه مندان به آموزش برنامه نویسی و آموزش طراحی وب.علیرضا حاتمی نیا هستم با قسمت پنجم از آموزش طراحی وب در خدمت شما عزیزان هستم .
در جلسه پیش با مهمترین تگ هایی که روی متون تاثیرگذار بودند آشنا شدیم. دراین جلسه قصد داریم نحوه نمایش تصویر در وب را یاد بگیریم.
آشنایی با فرمت های تصاویر
قبل از معرفی برچسب نمایش تصویر در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 src="logo.jpg" alt="this is logo">
اگر کنار سند html پوشه ای به نام images ایجاد کنیم و تصویر را داخل آن قرار دهیم، نحوه آدرس دهی در src به این شکل می شود.
<img src="images/logo.jpg" alt="this is logo">
اگر اختلالی در نمایش تصویر برای مرورگر رخ دهد مثلا اگر آدرس عکس را اشتباه وارد کنیم و مرورگر نتواند تصویر مورد نظر را پیدا کند، متنی که به عنوان مقدار برای alt در نظر گرفته ایم نمایش داده میشود.
خب در اینجا با 2 مشخصه اجباری alt و source آشنا شدیم. یکی دیگه از مشخصه هایی که به عنوان مشخصه اختیاری در تگ <img> مورد استفاده قرار می گیرد title است.
title: مقداری که برای مشخصه title در <img> در نظر گرفته می شود به عنوان توضیحی درباره عکس لحاظ می شود. اگر کاربر موس خود را روی تصویر قرار دهد متنی که به عنوان مقدار برای title در نظر گرفته اید به کاربر نمایش داده می شود.
<img src="logo.jpg" alt="html logo" title="this image is HTML logo">
خب مشخصه های دیگری برای تگ img وجود دارد که روی ظاهر و محل قرار گیری تصویر تاثیر گذار هستند. با ورود css این مشخصه ها منسوخ شده و دیگر استفاده نمی شوند. در آموزش Css حتما این مشخصه ها آموزش داده می شود.
نظرات کاربران
3 سال پیش
زهرا سجادی
عالی
3 سال پیش
محمد امین زارع
یاد نگرفتم