آموزش جامع لینک کردن عکس در HTML

یکی از چالش‌هایی که ممکن است برای طراحان سایت مبتدی پیش آید، مربوط به نحوه لینک کردن عکس در کد HTML است. آیا این امکان در زبان HTML وجود دارد یا خیر؟ اگر این سوال به ذهن شما خطور کرده است، نگران نباشید. زیرا در این مقاله از مرکز آموزش طراحی سایت وم پاور، آموزش لینک دار کردن عکس در HTML را ارائه خواهیم داد. پس از مطالعه این مقاله، شما قادر خواهید بود به آسانی ساخت لینک برای عکس را انجام دهید.

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

لینک کردن در html

برای لینک کردن در html، در سایت خود باید از تگ باز و بسته‌ی <a> استفاده کنید و لینک مورد نظر خود را داخل آن قرار دهید. به عنوان مثال:

<a href="https://google.com">
wampower
</a>

در کد بالا مشاهده می‌کنید که تگ باز <a href="..."> شروعی برای ایجاد لینک در سایت ماست. سپس با تگ </a> آن را می‌بندیم. نکته‌ای که باید به آن توجه کنید این است که هر متنی را بین تگ باز و بسته بنویسیم، متن لینک شده‌ی ما است.

اضافه کردن عکس در html

برای اضافه کردن عکس در html، از تگ <img> استفاده می‌شود، که تنها با گنجاندن مسیر (URL) تصویر درون آن، تصویر را به صفحه اضافه می‌کند. مثال زیر نحوه استفاده از تگ <img> را نشان می‌دهد:

<img src="/favicon-32x32.png" alt="Favicon">

در این مثال، مسیر “/favicon-32×32.png” نشان‌دهنده مکان تصویر است. توجه داشته باشید که این مسیر باید به درستی به تصویر مورد نظر اشاره کند و بر اساس ساختار و محتوای وبسایت شما تنظیم شود.

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

نحوه ی لینک کردن عکس در html

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

حالا برای لینک دادن به تصویر قبلی که قرار داده‌ایم و آن را به لینکی خاص مانند گوگل متصل کنیم، از کد زیر استفاده می‌کنیم:


<a href="https://google.com">
<img src="/favicon-32x32.png">
</a>


در اینجا href مشخص می‌کند که لینک به کجا خواهد بود و src نشانگر مسیر تصویر است. همچنین alt توضیح مختصری را برای تصویر ارائه می‌دهد.

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

اما شاید شما دوست داشته باشید که هم متن و هم عکس خود را داخل تگ a بنویسید و جفت آنها لینکدار شوند، برای این کار باید چه کنیم؟

آموزش لینک کردن عکس و متن در HTML

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

خب در این مورد می توانید از کد زیر استفاده کنیم:


<a href="https://google.com">
<img src="/favicon-32x32.png" alt="wampower">
wampower
</a>


در مثال بالا، ابتدا تگ a خود را ساختیم و لینک صفحه ی مقصد را داخل آن قرار دادیم، سپس تگ img را باز کردیم و آدرس عکسی خود را داخل آن قرار دادیم. حالا بعد از آن متن خود را بعد از تگ img و قبل از تگ بسته ی </a> قرار دادیم. و بعد از اجرای آن، یک متن کنار عکس ما قرار میگیرد که آن متن wampower است و هم عکس و هم متن ما به google لینک داده شده اند.

ویژگی alt در ایجاد لینک روی عکس چیست؟

تصاویر موجود در اینترنت باید دارای یک ویژگی “alt” باشند که توضیح متنی از تصویر را ارائه دهد. صفحه‌خوان‌ها از متن جایگزین برای کمک به کاربران کم‌بینا استفاده می‌کنند. وقتی صفحه‌خوان‌ها با یک تصویر مواجه می‌شوند، توضیحات متنی را می‌خوانند. برای اجرای این کار، یک ویژگی “alt” را به تگ “img” اضافه می‌کنیم. به مثال زیر توجه کنید:


<a href="https://google.com">
<img alt="wampower" src="/favicon-32x32.png">
</a>


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

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

توجه به جزئیات تصویر و توضیح دقیق از آن، کاربران را قادر می‌سازد تا حتی بدون دیدن تصویر، مفهوم و محتوای آن را درک کنند. این گام مهم در افزایش دسترسی‌پذیری وب‌سایت به صورت قابل تحلیل توسط موتورهای جستجو مؤثر است.

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

نکته پایانی

در پایان، آموزش لینک دار کردن عکس‌ها در HTML به شما این امکان را می‌دهد که به سادگی و به صورت موثر، محتوا و تجربیات بصری خود را به اشتراک بگذارید. با استفاده از تگ <a> برای ایجاد لینک و تگ <img> برای نمایش عکس، می‌توانید ارتباط میان عناصر مختلف وب‌سایت‌تان را بهبود بخشید و تجربه کاربری بهتری فراهم کنید. این مهارت نه تنها به زیبایی و جذابیت صفحات شما کمک می‌کند، بلکه می‌تواند به بهینه‌سازی سئو و افزایش ترافیک وب‌سایت‌تان نیز منجر شود. با تمرین و استفاده مداوم از این تکنیک‌ها، می‌توانید وب‌سایت خود را به فضایی جذاب و کاربردی تبدیل کنید.