لینک‌های داخلی، خارجی و ایمیل (mailto:)
لینک‌های داخلی، خارجی و ایمیل (mailto:) – ارتباطات هدفمند! 🎯
سلام دوستان! توی فصل‌های قبلی با تگ <a> و خصوصیت href آشنا شدیم. حالا می‌خوایم روی سه نوع مهم از لینک‌ها که با href ایجاد می‌کنیم، بیشتر تمرکز کنیم: لینک‌های داخلی، خارجی و لینک‌های ایمیل.
نوع لینکی که انتخاب می‌کنیم، روی تجربه کاربری و نحوه تعامل بازدیدکنندگان با سایت ما تاثیر زیادی داره.
۱. لینک‌های داخلی (Internal Links): گشت و گذار در خانه 🏡
لینک‌های داخلی، شما رو بین صفحات مختلف همون وب‌سایت هدایت می‌کنن. این لینک‌ها برای ناوبری (Navigation) و کمک به کاربران برای پیدا کردن اطلاعات در سایت شما ضروری هستن.
چطور ایجاد می‌شن؟
مقدار href برای لینک‌های داخلی، مسیر نسبی (Relative Path) یا آدرس مطلق (Absolute Path) صفحه مقصد در همون دامنه شماست.
- مسیر نسبی: بر اساس موقعیت فایل فعلی شما.
<!-- اگر صفحه 'contact.html' در همان پوشه باشد -->
<a href="contact.html">با ما تماس بگیرید</a>
<!-- اگر صفحه 'about.html' در پوشه 'pages' باشد -->
<a href="pages/about.html">درباره ما</a>
<!-- اگر بخواهیم به صفحه اصلی از یک پوشه داخلی برویم -->
<a href="../index.html">بازگشت به صفحه اصلی</a>
<!-- فرض کنید دامنه شما example.com است -->
<a href="https://example.com/products/shoes.html">کفش‌ها</a>
نکته مهم: برای لینک‌های داخلی، معمولاً بهتره که لینک در همون پنجره یا تب مرورگر باز بشه (یعنی از `target=”_blank”` استفاده نکنیم) تا کاربر در سایت شما باقی بمونه.
۲. لینک‌های خارجی (External Links): سفر به دنیای بیرون! 🚀
لینک‌های خارجی، کاربران رو به صفحات یا وب‌سایت‌های دیگه هدایت می‌کنن. این لینک‌ها برای ارجاع به منابع خارجی، وب‌سایت‌های همکار، یا صفحات اطلاعاتی مفید استفاده می‌شن.
چطور ایجاد می‌شن؟
مقدار href برای لینک‌های خارجی، آدرس کامل (Absolute URL) وب‌سایت یا صفحه‌ای هست که می‌خواید بهش لینک بدید، شامل پروتکل (مثل `https://`).
<a href="https://www.google.com">جستجو در گوگل</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a" target="_blank">مستندات MDN درباره تگ a</a>
نکته مهم: معمولاً توصیه می‌شه که لینک‌های خارجی رو در یک پنجره یا تب جدید باز کنید (`target=”_blank”`) تا کاربر بتونه به راحتی به سایت شما برگرده.
۳. لینک‌های ایمیل (mailto:): ارتباط مستقیم! 📧
لینک‌های mailto: ابزار فوق‌العاده‌ای برای فراهم کردن امکان تماس آسان با شما یا بخش پشتیبانی هستن. وقتی کاربر روی این لینک کلیک می‌کنه، مرورگر به طور خودکار برنامه ایمیل پیش‌فرض سیستم رو باز می‌کنه و آدرس ایمیل مورد نظر و حتی موضوع دلخواه رو هم در اون تنظیم می‌کنه.
چطور ایجاد می‌شن؟
مقدار href با `mailto:` شروع می‌شه و بعدش آدرس ایمیل قرار می‌گیره.
<!-- لینک ساده به ایمیل -->
<a href="mailto:info@example.com">ارسال پیام به پشتیبانی</a>
<!-- با موضوع از پیش تعیین شده -->
<a href="mailto:support@example.com?subject=سوال درباره محصول">پشتیبانی فنی</a>
<!-- با موضوع و بدنه ایمیل اولیه -->
<a href="mailto:sales@example.com?subject=استعلام قیمت&body=سلام،%20لطفاً%20قیمت%20محصول%20X%20را%20بفرمایید.">درخواست قیمت</a>
نکته: در قسمت `body` و `subject`، کاراکترهای خاص مثل فاصله باید با `%20` کدگذاری بشن.
انتخاب درست نوع لینک (داخلی، خارجی، ایمیل) تجربه کاربری روان و هدفمندی را برای بازدیدکنندگان سایت شما فراهم می‌کند.
با تسلط بر این سه نوع لینک، می‌تونید ساختار ارتباطی قوی و کاربرپسندی رو برای وب‌سایت خودتون طراحی کنید. موفق باشید! 🌟