آموزش کار با تصاویر یا 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

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

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

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

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

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

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

امتحان کنید

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

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

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

امتحان کنید

Free-Learn

صفت Width و Height در تگ img

در ادامه ی آموزش کار با تصاویر یا Images در HTML میخوایم با دو صفت پرکاربرد در HTML آشنا شویم ، همونطور که مشخصه ما با استفاده از دو صفت 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

خب دوستان دیگه تقریبا به پایان آموزش کار با تصاویر یا Images در HTML رسیدیم ، که در ادامه میخوایم با نقشه های تصویری آشنا شویم، اینکه چه هستند و چجوری ایجاد میشن.

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

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

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

 

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

تگ Area سه تا صفت به نام های ( rect , poly , circle ) داره که ما با استفاده از این صفات میتونیم نقات یا بطور کلی مختصات قابل کلیک بروی تصویر را مشخص نماییم.

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

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

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

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

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

صفت coords در حالت poly از طریق فرمول زیر ایجاد می شود :

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

Free-Learn

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

امتحان کنید

Free-Learn

ابزار آنلاین تولید نقشه تصویری

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

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

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

Free-Learn

دریافت PDF یا پرینت این مطلب