آموزش HTML – تصاویر (۶)

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

تگ img

در این جلسه آموزشی قصد داریم شما را با شیوه اضافه کردن تصاویر به صفحات وب آشنا سازیم. برای استفاده از تصاویر در برگه‌های وب شما باید از تگ img در HTML استفاده کنید. به مثال زیر دقت نمایید.

با مشاهده کردن این مثال می‌توانیم متوجه شویم که img یک تگ Self Closing است،‌ به این معنا که تگی برای بسته شدن ندارد. در کد بالا شما خاصیتی تحت عنوان src را می‌توانید مشاهده کنید. این خاصیت در واقع مخفف کلمه source است و مقدار ورودی آن تعیین کننده عکسی است که می‌خواهید آن را نمایش دهید.

در این مثال ما تصویر dog.png را از آدرس جاری (آدرسی که فایل html و تصویر در کنار همدیگر در آن قرار دارند) به عنوان ورودی src قرار داده‌ایم.
اگر تصویر ما در یک پوشه دیگر قرار داشت کافی‌ست به صورت زیر عمل کنید:

و اگر تصویر روی یک سرور قرار داشت و خواستید آن را نمایش دهید، کافی‌ست URL آن را قرار دهید:

خاصیت دیگر بسیار مهمی که در تصاویر وجود دارد و باید از آن استفاده شود، خاصیت alt است. alt مخفف کلمه alternative است و منظور از پیاده‌سازی این خاصیت این بوده که در صورت نبود تصویر چه متنی وجود داشته باشد. بیایید تصور کنیم که آدرس dog.png اشتباه باشد و یا تصویر از آن آدرس حذف شده، در این صورت باید چکاری انجام داد؟ در این حالت باید یک متن جایگزین را قرار دهیم.
اما خاصیت alt دو فایده دیگر نیز دارد، ۱- سئوی وبسایت و ۲- قابلیت‌ دسترسی‌پذیری

نکته سریع: سئو چیست؟ سئو روندی است که شما در آن سعی می‌کنید وبسایت‌تان را برای موتورهای جستجوگر مانند Google بهینه‌سازی و معرفی کنید.

آشنایی با دسترسی‌پذیری در وب

به عنوان یک نکته و تکنیک در دنیای وب باید به صورت کوتاه شما را با دسترسی‌پذیری آشنا کنم. منظور از دسترسی‌پذیری این است که همه افراد جامعه با هر گونه ناتوانی (نابینایی، ناشنوایی و…) بتوانند از وبسایت شما استفاده بکنند. اما سوالی که پیش می‌آید این است که افراد نابینا چگونه می‌توانند از وبسایت شما استفاده بکنند؟ برنامه‌هایی وجود دارد که Screen Reader نام دارند. این برنامه‌ها محتوای متنی داخل صفحات را برای افراد نابینا مطالعه می‌کنند و آن‌ها را از اطلاعات موجود در صفحه آگاه می‌سازند. اما یک سوال دیگر! این نرم افزار محتوای تصاویر را چگونه به کاربر نابینا انتقال می‌دهد؟ اینجا‌ست که alt فایده دوم خود را به ما نشان می‌دهد. برنامه Screen Reader در مواجه با یک تصویر به سراغ متن alt می‌رود.
به همین دلایل باید متن alt بسیار مربوط به تصویر باشد. برای مثال اگر تصویر یک سگ را قرار می‌دهید نباید مقدار خاصیت alt چیزی برابر با cat یا image1 باشد.
به مثال زیر توجه کنید:

 

خاصیت Width و Height

برای تعیین کردن اندازه یک تصویر شما می‌توانید از CSS استفاده کنید، اما اگر به HTML دسترسی داشته باشید این کار بسیار ساده‌تر انجام می‌شود. خاصیت‌های width و height به ما این قابلیت را می‌دهند تا بتوانیم اندازه تصاویر را تغییر دهیم. به مثال زیر توجه کنید:

اگر می‌خواهید این تغییر اندازه از طریق CSS انجام شود باید به صورت زیر عمل کنید:

یک تکنیک بسیار ساده برای تعیین کردن اندازه تصاویر این است که سعی کنید بجای مقدار دادن به هر دو خاصیت width و height تنها به یک مورد از آن‌ها مقدار بدهید. اینگونه تصویر براساس یک مقیاس درست تغییر سایز می‌دهد.

استفاده از تصاویر به عنوان لینک

در جلسه قبلی راجع به اینکه لینک چیست و چگونه می‌توان آن را در HTML پیاده‌سازی کنید صحبت کردیم. اما حال می‌خواهیم یک تصویر را به یک لینک متصل کنیم. منظورمان این است که با کلیک روی تصویر، مرورگر ما را به یک صفحه ارجاع دهد. برای مثال تصور کنید ما تصویر گوگل را در اختیار داریم و می‌خواهیم با کلیک روی آن به گوگل مراجعه شود:

 

نقشه‌های تصویری

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

برای انجام چنین کاری ابتدا نیاز است که با سیستم مختصاتی آشنایی داشته باشید. یعنی بتوانید نقاطی که شئ مورد نظرتان در آن قرار دارد را به دست بیاورید. به کدهای زیر دقت کنید:

حال بیایید این کدها را به صورت شفاف‌تر مشاهده کنیم.
خط اول: در خط اول ما یک تگ img را همراه با خاصیت src و alt قرار داده‌ایم. خاصیت usemap بیانگر شناسه تصویر برای نقشه است. به این معنا که به یک نقشه می‌گوید که از کدام تصویر استفاده کند.
خط دوم: در این خط ما از تگ map استفاده کرده‌ایم. همراه با این تگ خاصیت name قرار گرفته که مشخص می‌کند از چه تصویری برای نقشه استفاده نماید.
خط سوم: تگ area به ما کمک می‌کند تا نواحی که می‌خواهیم لینک پذیر باشند را تعیین کنیم. این تگ چندین خاصیت دارد که در زیر آن‌ها را شرح می‌دهیم:
• Shape: شکل قسمتی که می‌خواهید لینک پذیر باشد را تعریف می‌کند. مقدار rect به عنوان مستطیل و مقدار circle به عنوان دایره توسط مروگر شناخته می‌شود.
• Coords: این مقدار بیانگر مختصات شئ ما در تصویر است. دو مقدار اول بیانگر بالا-چپ و دو مقدار بعدی بیانگر پایین-راست هستند.
• alt و href نیز خاصیت‌هایی هستند که با آن‌ها به خوبی آشنایی داریم.

در پایان
در این مطلب شما را با تصاویر و خاصیت‌های آن آشنا ساختیم. همچنین شما را با مقدمه‌ای بسیار ساده از سئو و دسترسی‌پذیری آشنا کردیم.