لینک‌ها

ساخت لینک‌های داخلی، خارجی و ویژگی‌های پیشرفته لینک

تگ لینک (Anchor Tag)

تگ <a> (Anchor) برای ایجاد لینک استفاده می‌شود. مهم‌ترین ویژگی آن href است که مقصد لینک را مشخص می‌کند.

<a href="https://example.com">متن لینک</a>

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

۱. لینک خارجی

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

<a href="https://www.google.com">گوگل</a>

۲. لینک داخلی

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

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

۳. لینک به پوشه

لینک به فایل یا پوشه:

<a href="/files/document.pdf">دانلود PDF</a>
<a href="/images/">گالری تصاویر</a>

ویژگی target

ویژگی target مشخص می‌کند که لینک کجا باز شود:

مقدارتوضیح
_blankتب یا پنجره جدید
_selfهمان تب یا پنجره (پیش‌فرض)
_parentفریم والد
_topتمام پنجره
<a href="https://example.com" target="_blank">باز در تب جدید</a>

ویژگی rel

ویژگی rel رابطه بین صفحه فعلی و صفحه مقصد را مشخص می‌کند:

مقدارتوضیح
noopenerجلوگیری از دسترسی صفحه جدید به صفحه اصلی (امنیتی)
noreferrerعدم ارسال اطلاعات مرجع (امنیتی)
nofollowبه موتورهای جستجو بگو این لینک را دنبال نکن
authorنویسنده صفحه
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  باز در تب جدید (امن)
</a>

لینک‌های ایمیل و تلفن

می‌توان لینک‌های ایمیل و تلفن ایجاد کرد:

<a href="mailto:info@example.com">ارسال ایمیل</a>
<a href="tel:+982112345678">تماس با ما</a>

ویژگی download

برای دانلود فایل به‌جای نمایش آن:

<a href="/files/document.pdf" download>دانلود PDF</a>
<a href="/files/document.pdf" download="my-file.pdf">دانلود با نام جدید</a>

رنگ‌های لینک

مرورگرها رنگ‌های پیش‌فرض برای لینک‌ها دارند:

می‌توان این رنگ‌ها را با CSS تغییر داد.

لینک‌های Bookmark (Anchor Links)

برای پرش به بخشی از همان صفحه:

<!-- ابتدا id را تعریف کنید -->
<h2 id="section1">بخش اول</h2>

<!-- سپس لینک به آن بخش -->
<a href="#section1">برو به بخش اول</a>

نکات مهم

این مبحث بخشی از دوره آموزش کامل HTML است.

ابزارهای مرتبط