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

🎯 اهداف یادگیری

• آشنایی با تگ <a> و ویژگی‌های آن
• یادگیری ایجاد لینک‌های داخلی و خارجی
• توانایی ساخت لینک‌های ایمیل و تلفن
• آشنایی با لینک‌های دکمه‌ای و تصویری

📌 تگ <a> و ویژگی‌های اصلی

۱. ساختار پایه لینک

لینک‌ها در HTML با تگ <a> ایجاد می‌شوند:

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

۲. ویژگی‌های مهم تگ <a>

• href: آدرس مقصد لینک را مشخص می‌کند (الزامی)
• target: تعیین می‌کند لینک در چه پنجره‌ای باز شود
• title: متن راهنما هنگام hover ماوس
• rel: رابطه بین صفحه فعلی و لینک مقصد

📌 انواع لینک‌ها

۱. لینک‌های خارجی (External)

به وبسایت‌های دیگر اشاره می‌کنند:

<a href="https://google.com" target="_blank" rel="noopener noreferrer">
    جستجو در گوگل (در تب جدید باز می‌شود)
</a>

۲. لینک‌های داخلی (Internal)

به صفحات دیگر در همان وبسایت اشاره می‌کنند:

<a href="/about.html">درباره ما</a>

۳. لینک به بخش‌های خاص صفحه (Anchor)

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

<a href="#section2">پرش به بخش دوم</a>
<h2 id="section2">بخش دوم</h2>

📌 لینک‌های خاص

۱. لینک ایمیل

برای ارسال ایمیل به آدرس مشخص:

<a href="mailto:info@beeacademy.ir">ارسال ایمیل به ما</a>

۲. لینک تلفن

برای تماس تلفنی (در موبایل‌ها):

<a href="tel:+989123456789">تماس با پشتیبانی</a>

۳. لینک دانلود

برای دانلود فایل‌ها:

<a href="/files/document.pdf" download>
    دانلود فایل PDF راهنما
</a>

📌 تمرین عملی

صفحه HTML زیر را با لینک‌های مناسب کامل کنید:

<h1>رزومه شخصی</h1>
<ul>
    <li>اطلاعات تماس</li>
    <li>مهارت‌ها</li>
    <li>نمونه کارها</li>
</ul>
<p>برای دریافت رزومه کامل با من تماس بگیرید</p>

راهنمای تمرین:

1. به هر بخش از رزومه لینک داخلی اضافه کنید
2. لینک تماس تلفنی و ایمیل اضافه کنید
3. لینک دانلود رزومه PDF اضافه کنید
4. لینک به شبکه‌های اجتماعی اضافه کنید

📌 نکات طلایی لینک‌دهی

• متن لینک معنادار: از "اینجا کلیک کنید" خودداری کنید
• رنگ و استایل متمایز: لینک‌ها باید قابل تشخیص باشند
• ویژگی title: برای لینک‌های پیچیده توضیح اضافه کنید
• امنیت لینک‌های خارجی: همیشه از rel="noopener noreferrer" استفاده کنید

📌 قدم بعدی

در درس بعدی با آشنا خواهیم شد!