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

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

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

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

همچنین اگر به ویدیو آموزشی علاقه دارید، میتوانید ویدیو 9 دقیقه ای زیر را تماشا کنید.

 

در HTML چگونه لینک بسازیم؟

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

<a href="...">
...
</a>

در کد بالا مشاهده می کنید که تگ باز

<a href="...">

شروعی برای ایجاد لینک در سایت ماست. سپس با تگ <a/> آن را میبندیم. نکته ای که باید به آن توجه کنید این است که هر متنی را بین تگ باز و بسته بنویسیم، متن لینک شده ی ما است. به طور مثال:


<a href="...">
wampower
</a>
حال برای اینکه لینک ما به یک آدرس مشخصی لینک داده شود، باید url آن را داخل href بنویسیم. به طور مثال میخواهیم به گوگل، متن خود را لینک دهیم. از این رو از کد زیر داخل تگ a استفاده می کنیم. به مثال زیر توجه کنید:


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

نکته ی مهمی که باید حتما به آن توجه کنید این است که url وب سایت مقصد را به صورت کامل درست در جلوی href بنویسید و گرنه لینک مقصد شما مشکل دارد.

در html چگونه عکس قرار دهیم؟

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


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

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

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

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

نحوه ی لینک کردن عکس در 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 در تگ img چیست؟

ویژگی alt در لینک دار کردن تصویر

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


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

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

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

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

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

 

43%
6,900,000
3,950,000
تومان
4.00/5

2 پاسخ

  1. واقعا ممنونم ازتون عالی بود و چقدر راحت و کامل و ساده توضیح دادید. عالی هستید

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

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

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

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