نحوه نمایش تصویر در 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 ذخیره کردیم.(مطابق شکل)

فرمت تصاویر در html

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

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

تصاویر در html

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

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

قرار دادن تصویر در سایت

اگر اختلالی در نمایش تصویر برای مرورگر رخ دهد مثلا اگر آدرس عکس را اشتباه وارد کنیم و مرورگر نتواند تصویر مورد نظر را پیدا کند، متنی که به عنوان مقدار برای 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 حتما این مشخصه ها آموزش داده می شود.

برای درج نظر و یا طرح سوالات خود لطفا در سایت ثبت نام کنید و یا وارد سایت شوید

نظرات کاربران

4 سال پیش

3 سال پیش

محمد امین زارع

یاد نگرفتم

برای این مطلب تاکنون نظری ارسال نشده است. شما اولین نفر باشید