آموزش کار با تصاویر یا Images در HTML

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با تصاویر یا Images در HTML با من همراه باشید.

آموزش کار با تصاویر یا Images در HTML

Free-Learn

کار با تصاویر یا Images در HTML

همونطور که میدانید تصاویر در دنیای ما نقش بسیار مهمی رو میتونن داشته باشند، نه تنها در یک وبسایت بلکه بطور کلی در هر مکانی وجود تصاویر بسیار مهم و تاثیر گذار خواهند بود.

برای مثال یک وبسایت که تماما از متن استفاده کرده و فقط متن خالی است اصلا جالب و کاربر پسند نیست، و در مقابل وبسایتی که از تعداد زیادی تصویر استفاده کرده نیز جالب نیست، پس ما باید در وبسایتمون هم از تصاویر و هم از محتوای متنی بخوبی استفاده نماییم.

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

اینجوری شما به احتمال خیلی زیاد از مطالعه اون متن خودداری مینمایید، دلیل اصلی این خودداری میتونه عدم استفاده نویسنده از تصویر و همچنین پاراگراف بندی نادرست بوده و یجورایی میشه گفت این موضوع از کم سلیقگی نویسنده بوده.

پس بطور کلی تصاویر نه تنها در دنیای وب بلکه در دنیای واقعی ما و در مکان های مختلف وجودشون تاثیر بسیار زیادی میتونن داشته باشند و ما باید همیشه سعی کنیم از تصاویر با معنی و مفهوم مناسب استفاده نماییم.

Free-Learn

نحوه قرار دادن تصویر در یک صفحه وب

برای اینکه بتونیم یک تصویر یا Image را در یک صفحه وب قرار دهیم باید از تگ <img> استفاده نماییم، شکل کلی برای استفاده از این تگ در HTML بصورت زیر می باشد.

که فقط کافیست در قسمت src بجای url آدرس تصویر مورد نظرمون رو وارد نماییم.

تگ img از تگ های تنها یا خالی در HTML می باشد، یعنی تگ پایانی برای بستن ندارد.

حال لطفا به مثال های زیر توجه نمایید که بنده از ۳ تصویر با فرمت های JPG, GIF,PNG استفاده کرده ام. همچنین برای مشاهده خروجی بصورت آنلاین بروی دکمه (امتحان کنید) کلید نمایید.

مثال شماره ۱ : استفاده از پسوند gif

امتحان کنید

مثال شماره ۲ : استفاده از پسوند png

امتحان کنید

مثال شماره ۳ : استفاده از پسوند jpg

امتحان کنید

Free-Learn

صفت alt در تگ img

اگر بخش های قبلی از آموزش HTML را دنبال کرده باشید میدانید که ما در بخش کار با صفات با صفت alt و چندین صفت کاربردی دیگر در HTML آشنا شدیم حال در این قسمت نیز میخواهیم با این صفت آشنا شویم.

این صفت یکی از صفات مهمی است که میتوان در تگ <img> استفاده کرد، با استفاده از این صفت میتوان یک متن را جایگزین یک تصویر کرد تا اگر مشکلی در نمایش تصویر به وجود آید، آن متن به نمایش درآید.

شاید براتون سواله که دلیل اصلی استفاده از این صفت چیه و اینکه چرا باید از این صفت استفاده کنیم؟ بیشترین موارد استفاده از این صفت برای موتورهای جستجوگر و بعد برای استفاده کاربرانی است که نابینا هستند و یا با استفاده نرم افزارهای مخصوص صفحات وب را گوش میدهند.

گوگل تاکید زیادی بروی همین صفت در تگ <img> دارد و میگوید که حتما از این صفت درون تصاویرتان استفاده نمایید.

حال لطفا به مثال زیر توجه نمایید :

امتحان کنید

لطفا بروی دکمه (امتحان کنید) کلیک نمایید و خروجی را مشاهده نمایید، همانطور که مشاهده مینمایید از صفت alt استفاده کرده ایم و یک تصویر به ما نمایش داده می شود ولی آیا شما عملی یا چیزی از صفت alt میبینید؟

خب گفتیم که این صفت موقعی دس بکار میشه که یک تصویر حالا به هر دلیلی نمایش داده نشود و در ضمن اصل وجود این صفت برای موتورهای جستجوگر می باشد و یجورایی میشه گفت هویت یک تصویر همان صفت Alt آن تصویر می باشد.

حالا به دستورات زیر توجه نمایید. (برای اینکه صفت Alt نمایش داده شود من عمدا آدرس تصویر رو دستکاری کردم که تصویر نمایش داده نشود)

امتحان کنید

Free-Learn

صفت Width و Height در تگ img

همونطور که مشخصه ما با استفاده از دو صفت width و height میتونیم اندازه ارتفاع و عرض یک تصویر را به دلخواه تنظیم نماییم، لطفا به مثال زیر توجه نمایید.

عددی که در قسمت width و height قرار میگیرد بصورت پیش فرض با واحد پیکسل یا Px تنظیم می شود.


امتحان کنید

Free-Learn

تنظیم اندازه تصاویر با استفاده از صفت Style

ما علاوه بر حالت قبلی که با استفاده از صفات width و height در تگ img اندازه تصاویر رو تنظیم میکردیم با استفاده از صفت Style نیز میتوانیم به راحتی اینکارو انجام دهیم. لطفا به دستورات زیر توجه نمایید.

امتحان کنید

Free-Learn

نحوه ایجاد تصویر لینک دار یا Image as a Link

همانطور که میدانید ما برای ایجاد یک لینک به راحتی میتوانیم از تگ <a> استفاده نماییم و کاربر با کلیک بروی یک متن میتواند به مکانی دیگر منتقل شود، ولی خب ممکن است بخواهیم کاربر با کلیک بروی یک تصویر به مکانی دیگر منتقل شود اونوقت باید چکار کرد!؟

برای ایجاد یک تصویر لینک دار یا تصویری که بتوان با کلیک بروی آن به مکانی دیگر منتقل شویم کافیست از تگ <img> درون تگ <a> استفاده نماییم. لطفا به مثال زیر توجه نمایید.

امتحان کنید

Free-Learn

نحوه ایجاد نقشه تصویری یا Image Maps

نقشه تصویری ، یک تصویر است که دارای قسمت های مختلف با قابلیت کلیک شدن را دارد، بفرض مثال شما یک تصویر از نقشه ایران دارید و میخواهید کاربر با کلیک بروی هر یک از شهرهای ایران به یک صفحه توضیحات مربوط به آن شهر منتقل داده شود.

در این مواقع باید از تصاویر نقشه ای یا نقشه های تصویری استفاده کرد، ما در HTML با استفاده از تگ <map> میتوانیم یک نقشه تصویری را ایجاد نماییم، برای ایجاد یک نقشه تصویری لطفا مراحل زیر را انجام دهید.

  • مرحله اول : باید در تگ <img> یک صفت بنام usemap تعریف و یک نام دلخواه براش انتخاب نماییم، البته این نام رو کمی جلوتر باید به تگ <map> متصل نماییم.

 

  • مرحله دوم : تگ <map> را تعریف و سپس با استفاده از صفت name یک نام برای نقشه تصویری مون مشخص میکنیم سپس با استفاده از تگ <area> باید نقاط قابل کلیک را نیز مشخص نماییم.

همانطور که مشاهده مینمایید با استفاده از صفت shape مشخص میکنیم که ناحیه قابل کلیک به چه صورت باشد rect یعنی مستطیلی و circle یعنی دایره ای – سپس با استفاده از صفت coords ناحیه ای که باید کلیک  شود رو مشخص میکنیم.

مقدار صفت coords در حالت rect از طریق فرمول زیر محاسبه می شود :

یعنی مکان قرار گیری ناحیه قابل کلیک از سمت چپ،بالا،راست و پایین چه اندازه باید باشد که بصورت عددی باید وارد کرد.

صفت coords در حالت circle از طریق فرمول زیر ایجاد می شود : (در مثال بالا بنده از این صفت استفاده نکردم چون خواستم ناحیه های قابل کلیک بصورت مستطیلی باشه)

مقادیر x و y محل قرار گیری ناحیه قابل کلیک را مشخص میکنند و مقدار radius شعاع دایره را مشخص میکند.

حال در مثال زیر میتوانید مراحل بالا را بطور کامل مشاهده نمایید و همچنین میتوانید با کلیک بروی دکمه (امتحان کنید) خروجی را بصورت آنلاین مشاهده نمایید.

امتحان کنید

Free-Learn

خب دوستان به پایان بخش کار با تصاویر یا Images در HTML رسیدیم، امیدوارم که مشکلی در این بخش نداشته باشید. واگرهم مشکلی در این بخش دارید لطفا از اینجا سوال/مشکل تان را برای بنده ارسال نمایید تا پاسخ دهم.

دوستان لطفا توجه داشته باشید : شما میتوانید از صفات Alt و Title نیز درون تگ <area> استفاده نمایید.

Free-Learn

  • خلاصه ی این بخش
  • برای قرار دادن یک تصویر،عکس در درون یک صفحه ی وب باید از تگ <img> استفاده کرد.
  • وجود صفت src در درون تگ <img> برای مشخص کردن مسیر یا محل فایل تصویر، ضروری می باشد.
  • تگ <img> در دسته ی تگ های تنها می باشد، یعنی تگ پایانی برای بستن ندارد.
  • با استفاده از صفت alt در درون تگ <img> میتوان یک متن را جایگزین تصویر کرد تا اگر به هر دلیلی تصویر نمایش داده نشد، آن متن نمایش داده شود.
  • وجود صفت alt در درون تگ <img> ضروری نیست ولی حتما و حتما همیشه از این صفت استفاده نمایید.
  • با استفاده از صفات Width و Height در درون تگ <img> میتوان اندازه عرض و ارتفاع تصویر را مشخص کرد.
  • وجود صفات Width و Height در درون تگ <img> الزامی نیست، ولی حتما و حتما همیشه از این صفات برای مشخص بودن اندازه تصویر استفاده نمایید.
  • برای ایجاد یک تصویر لینک دار، یعنی تصویری که بتوان بروی آن کلیک کرد، باید تگ <img> را در درون تگ <a> قرار دهیم.
  • برای ایجاد یک نقشه ی تصویری باید از تگ <map> استفاده کرد.
  • با استفاده از تگ <area> باید نقاط قابل کلیک در نقشه ی تصویری را مشخص کرد.
  • با استفاده از صفت shape مشخص میکنیم که ناحیه قابل کلیک به چه صورت باشد rect یعنی مستطیلی و circle یعنی دایره ای
  • با استفاده از صفت coords موقعیت ناحیه ای که باید کلیک شود رو مشخص میکنیم، مثلا تعریف میکنیم که از سمت بالا فلان مقدار و از سمت پایین و راست و همچنین چپ فلان مقدار باشد که همین مقادیر ناحیه ی قابل کلیک را مشخص میکنند.
  • برای مشخص کردن مقادیر عددی موجود در صفت coords میتوانید از برنامه نقاشی (Paint) موجود در ویندوز استفاده نمایید.
  • دانلود PDF این آموزش
  • برای دانلود فایل PDF این آموزش کلیک نمایید