تصاویر در HTML

تصاویر در HTML – آموزش برنامه نویسی وب درس 10

تصاویر در HTML

در این پست قصد دارم که کار با تصاویر در HTML را به شما تدریس کنم. تصاویر می‌توانند بهتر از هر نوشته‌ای برای شما کار کنند. آن‌ها این امکان را به ما می‌دهند که با بتوانیم پیام‌های واضح‌تری را به مخاطبین خودمان بدهیم و همچنین زیبایی بیشتری را در سایت مان ایجاد کنیم.

وارد کردن تصاویر در HTML

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

برای وارد کردن تصاویر در HTML باید از تگ <img> استفاده کنیم. این تگ اطلاعات مربوط به تصاویر را در یک فایل HTML بارگذاری می‌کند. دقت کنید که ما به صورت مستقیم (مانند نوشته‌های نرم‌افزار ورد) تصاویر را وارد یک فایل HTML نمی‌کنیم. بلکه آدرس آن را به مرورگرها می‌دهیم و آن‌ها بر حسب بقیه دستورات تصاویر را وارد صفحه‌های وب می‌کنند.

در هنگام استفاده از تگ <img> برای وارد کردن تصاویر در یک فایل HTML باید از ویژگی‌های آن استفاده کنیم که بتوانیم نحوه نمایش این تگ در سایت خودمان را کنترل کنیم.

شکل معمول استفاده از تگ <img> در فایل‌های HTML به صورت زیر است:

<img src="url" alt="some_text">

در اینجا من برای مثال چند مثال در زمینه استفاده از تگ‌های <img> را آورده‌ام:

<img src="kites.jpg" alt="Flying Kites">

<img src="sky.jpg" alt="Cloudy Sky">

<img src="balloons.jpg" alt="Balloons">

هر کدام از این تگ‌ها دارای ویژگی src و alt هستند.

ویژگی src آدرس نسبی دسترسی به تصاویر را در اختیار ما قرار می‌دهد. این آدرس باید حتما ترکیبی از مسیر، نام فایل و پسوند فایل باشد.

ویژگی alt در زمانی به کار می‌آید که فایل تصویر بارگیری نشده است. برای مثال ممکن است آدرس محل قرارگیری تصویر عوض شود و یا آنکه بارگیری تصویر مدت زمانی طول بکشد. در این زمان نوشته‌ای که در alt وارد کرده‌ایم به جای تصویر مورد نظر ما نمایش داده می‌شود.

یکی دیگر از مواردی که از ویژگی alt استفاده می‌کند، بهینه‌سازی موتورهای جستجو (SEO) است. در اینجا موتورهای جستجو با خواندن ویژگی alt به ماهیت عکس پی می‌برند. یکی از موارد مهم در زمینه سئو، بهینه نوشتن ویژگی alt است. ویژگی alt می‌تواند به هر زبانی باشد و الزاما نیازی به انگلیسی نوشتن آن نیست.

نکته: به مانند تگ <br> تگ <img> نیز یک تگ منفرد است. این تک هیچ تگ بسته‌ای ندارد. در زبان XHTML این تگ به صورت <img/> بسته می‌شود.

تنظیم ابعاد تصاویر در HTML

برای تنظیم کردن ابعاد تصاویر در یک فایل HTML می‌توانید از دو ویژگی width و height در تگ <img> استفاده کنیم. این دو ویژگی به ترتیب عرض و ارتفاع تصاویر را مشخص می‌کنند.

برای درک بهتر موضوع مثال زیر را ببینید:

<img src="kites.jpg" alt="Flying Kites" width="300" height="300">

<img src="sky.jpg" alt="Cloudy Sky" width="250" height="150">

<img src="balloons.jpg" alt="Balloons" width="200" height="200">

در اینجا مقدارهایی که به width و height نسبت داده شد است به صورت پیکسل (px) است. برای اینکه این واحد به صورت پیش فرض مورد استفاده قرار می‌گیرد ما واحد px را وارد نکرده‌ایم و به نوشتن اعداد بسنده کرده‌ایم. اگر از واحد دیگری برای مقداردهی عرض و ارتفاع تصاویر استفاده کنیم باید واحد آن را به صورت اختصاری در بعد از عدد وارد کنیم.

در واقع می‌توانیم کد بالا را به صورت زیر نیز بنویسیم:

<img src="kites.jpg" alt="Flying Kites" style="width: 300px; height: 300px;">

<img src="sky.jpg" alt="Cloudy Sky" style="width: 250px; height: 150px;">

<img src="balloons.jpg" alt="Balloons" style="width: 200px; height: 200px;">

نکته: بهتر است در زمانی که ویژگی‌های عرض و ارتفاع را وارد می‌کنید، دقیقا مقدارهایی را برای آن‌ها مشخص کنید. برخی از مرورگرها امکان تطابق دادن عرض و ارتفاع با همدیگر را ندارند. برای همین ممکن است تصاویر شما به صورت کشیده ظاهر شوند.

استفاده از عنصر Picture در HTML

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

در HTML برای این مسئله ازتگی به نام تگ <picture> استفاده شده است. این تگ به ما این اجازه را می‌دهد که بتوانیم برای نمایش تصاویر در HTML دستورات بیشتری را وارد کنیم.

برای درک کار این تگ مثال زیر را ببینید:

<picture>

    <source media="(min-width: 1000px)" srcset="logo-large.png">

    <source media="(max-width: 500px)" srcset="logo-small.png">

    <img src="logo-default.png" alt="My logo">

</picture>

تگ <picture> از زیر تگ‌های دیگری به نام <source> استفاده می‌کند. هر کدام از این زیر تگ‌ها اشاره به یک تصویر خاص دارند.  همچنین در درون این تگ ویژگی به نام media قرارگرفته است. media یک کوئری است. کوئری (query) اطلاعاتی را از یک منبع کد فراخوان می‌کنند. این کوئری اندازه مرورگر در حال نمایش را به ما می‌دهد. در این جا ما می‌توانیم از مقدار مشخصی را وارد کنیم که با رسیدن ابعاد مرورگر به آن تصویر ما نمایش داده شود.

مقدار srcset نیز آدرس تصویر را دریافت می‌کند. در مثال بالا بعد از رسیدن ابعاد مرورگر به 1000px تصویر logo-large نمایش داده می‌شود، و با رسیدن ابعاد مرورگر به مقدار 500px تصویر logo-small نمایش داده می‌شود.

نکته: در هنگامی که از تگ <picture> استفاده می‌کنیم، اگر مرورگر نتواند از اندازه‌های ارائه شده شما تصویر مناسب را انتخاب کند به سراغ تگ <img> رفته و تصویر آن را نمایش می‌دهد. پس در دادن ابعاد مناسب دقت کنید. درباره رسپانسیو کردن صفحات وب در بخش مربوط به CSS‌ها توضیحات کامل ارائه شده است.

الگو کردن تصاویر در HTML

الگو کردن تصاویر در HTML یا (image Maping) این اجازه را به ما می‌دهد که بتوانیم نقاط مشخصی در تصویر را به مانند یک لینک معرفی کنیم. در واقع با استفاده از این کار یک ناحیه حساس به کلیک ایجاد می‌کنیم.

یکی از عللی که ما این کار را انجام می‌دهیم آن است که بتوانیم ناحیه‌های حساس به کلیک را بر روی یک عکس به وجود بیاوریم که کاربر با کلیک کردن بر روی آن‌ها به بخش‌های مشخصی هدایت شود.

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

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

<img src="objects.png" usemap="#objects" alt="Objects">

<map name="objects">

    <area shape="circle" coords="137,231,71" href="clock.html" alt="Clock">

    <area shape="poly" coords="363,146,273,302,452,300" href="sign.html" alt="Sign">

    <area shape="rect" coords="520,160,641,302" href="book.html" alt="Book">

</map>

ویژگی name در تگ <map> برای مرجع قرار دادن این الگو در تگ <img> استفاده می‌شود. در واقع با وارد کردن این تگ ارتباط میان تگ <img> و <map> برقرار می‌شود.

تگ <area> ناحیه‌ای که باید بر روی آن کلیک شود را مشخص می‌کند. این ناحیه بخشی است که با کلیک کردن از آن می‌توانیم به مقصد مورد نظر برویم.

در نهایت خصوصیت href نیز مقصد را مشخص می‌کند. آدرس مقصد باید به صورت نسبی در اینجا وارد شود.

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

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

آموزش وارد کردن تصاویر در HTML در اینجا به خاتمه رسید. اگر پرسشی دارید می‌توانید در پایین همین پست وارد کنید. من، علی ذکایی، به تمامی آن‌ها پاسخ می‌دهم. همچنین اگر خواهان یادگیری بیشتری در این زمینه هستید می‌توانید به آموزش HTML/CSS/SASS من مراجعه کنید. من این مطالب را به صورت کامل در آنجا توضیح داده‌ام.

No votes yet.
Please wait...

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

منو اصلی

question