مقدمه

لینک یا Hyperlink یکی از مهم‌ترین عناصر صفحات وب است که به کاربران اجازه می‌دهد با کلیک روی متن یا تصویر، به صفحه‌ای دیگر، یک فایل، یا وب‌سایت دیگری منتقل شوند.

در HTML، لینک‌ها با استفاده از تگ <a> (Anchor) ایجاد می‌شوند. در این آموزش یاد می‌گیرید چگونه به متن و تصاویر لینک اضافه کنید.

افزودن لینک به متن در HTML

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

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

ساختار کلی به شکل زیر است:

<a href="https://example.com">
متنی که کاربر روی آن کلیک می‌کند
</a>

مثال عملی

کد زیر را در فایل index.html خود قرار دهید:

<a href="https://digitalocean.com/community">
آموزش‌های برنامه‌نویسی
</a>

فایل را ذخیره کرده و در مرورگر باز کنید.

اکنون متن «آموزش‌های برنامه‌نویسی» به یک لینک قابل کلیک تبدیل می‌شود و با کلیک روی آن، کاربر به صفحه موردنظر هدایت خواهد شد.

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

در HTML می‌توانید تصاویر را نیز قابل کلیک کنید.

برای این کار کافی است تگ <img> را داخل تگ <a> قرار دهید.

نمونه:

<a href="https://digitalocean.com/community">
    <img src="https://html.sammy-codes.com/images/small-profile.jpeg" alt="نمونه تصویر">
</a>

در این مثال، با کلیک روی تصویر، کاربر وارد وب‌سایت مقصد می‌شود.

لینک همزمان روی متن و تصویر

همچنین می‌توانید متن و تصویر را به‌صورت همزمان داخل یک لینک قرار دهید.

<a href="https://digitalocean.com/community">

آموزش برنامه‌نویسی

<img src="https://html.sammy-codes.com/images/small-profile.jpeg" alt="تصویر">

</a>

در این حالت، هم متن و هم تصویر قابل کلیک خواهند بود.

ویژگی href چیست؟

ویژگی href مخفف Hypertext Reference است و آدرس مقصد لینک را مشخص می‌کند.

نمونه:

<a href="https://example.com">مشاهده سایت</a>

نکات مهم هنگام ایجاد لینک

• همیشه از آدرس کامل (https://) برای لینک‌های خارجی استفاده کنید.
• برای تصاویر از ویژگی alt استفاده کنید تا سئو و دسترس‌پذیری صفحه بهبود پیدا کند.
• متن لینک باید واضح و مرتبط با مقصد باشد تا کاربران و موتورهای جستجو بهتر آن را درک کنند.

سوالات متداول

چگونه در HTML لینک ایجاد کنیم؟

با استفاده از تگ <a> و ویژگی href:

<a href="https://example.com">
مشاهده سایت
</a>

چگونه تصویر را لینک‌دار کنیم؟

کافی است تصویر را داخل تگ <a> قرار دهید.

<a href="https://example.com">
<img src="image.jpg" alt="نمونه تصویر">
</a>

آیا می‌توان متن و تصویر را همزمان لینک کرد؟

بله، هر دو را داخل تگ <a> قرار دهید.

<a href="https://example.com">

متن لینک

<img src="image.jpg" alt="تصویر">

</a>

جمع‌بندی

در این آموزش یاد گرفتید چگونه:

• با تگ <a> لینک ایجاد کنید.
• از ویژگی href برای تعیین مقصد لینک استفاده کنید.
• متن را به لینک تبدیل کنید.
• تصاویر را قابل کلیک کنید.
• متن و تصویر را به‌صورت همزمان داخل یک لینک قرار دهید.

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

از همراهی شما با پارمین کلود سپاسگزاریم.