تگ انکر (a) و خصوصیت href
تگ انکر () و خصوصیت href: کلید اتصال صفحات وب! 🔑
سلام به دوستان خلاق! توی فصل قبل با کلیت لینک‌ها و آدرس‌دهی توی وب آشنا شدیم. حالا می‌خوایم عمیق‌تر بشیم و روی مهم‌ترین تگ مربوط به لینک‌ها، یعنی تگ <a> و خصوصیت حیاتی اون، یعنی href، تمرکز کنیم.
تگ <a> قلب تپنده ناوبری در وب هست و خصوصیت href مقصد این سفر رو مشخص می‌کنه.
تگ : ایجاد لینک قابل کلیک! ✨
همونطور که گفتیم، تگ <a> برای ایجاد یک هایپرلینک (Hyperlink) استفاده می‌شه. متنی که بین تگ بازکننده <a> و تگ پایان‌دهنده </a> قرار می‌گیره، همون چیزیه که کاربر می‌بینه و روش کلیک می‌کنه. این متن می‌تونه یه کلمه، یه عبارت، یا حتی یه تصویر باشه.
ساختار اصلی:
<a> ... محتوای قابل کلیک ... </a>
خصوصیت href: مقصد کجاست؟ 📍
مهم‌ترین خصوصیت (Attribute) تگ <a>، خصوصیت href هست. مقدار (Value) این خصوصیت، آدرس URL یا مسیری رو مشخص می‌کنه که کاربر بعد از کلیک روی لینک به اونجا هدایت می‌شه. بدون href، تگ <a> فقط یه متن معمولی نمایش می‌ده و قابل کلیک نیست.
ساختار با href:
<a href="مقدار_href_اینجا_قرار_میگیرد">محتوای قابل کلیک</a>
انواع مقادیر برای href:
۱. لینک به صفحات دیگر (Relative & Absolute URLs):
این رایج‌ترین کاربرد href هست که برای رفتن به صفحات دیگه در همون سایت یا سایت‌های دیگه استفاده می‌شه.
- لینک داخلی (Relative):
<a href="/about.html">درباره ما</a> <!-- از ریشه سایت -->
<a href="contact.html">تماس با ما</a> <!-- در همان پوشه -->
<a href="../index.html">صفحه اصلی</a> <!-- یک پوشه بالاتر -->
<a href="https://www.wikipedia.org">ویکی‌پدیا</a>
۲. لینک به آدرس ایمیل (mailto):
با این کار، وقتی کاربر کلیک می‌کنه، برنامه ایمیلش باز می‌شه.
<a href="mailto:support@example.com?subject=سوال مشتری">پشتیبانی آنلاین</a>
در این مثال، “subject” به عنوان موضوع پیش‌فرض ایمیل قرار می‌گیره.
۳. لینک به بخش خاصی از صفحه (Fragment Identifier):
با استفاده از `#`، می‌تونیم کاربر رو به قسمتی خاص از همون صفحه که یه ID داره، هدایت کنیم.
<a href="#section-two">رفتن به بخش دوم</a>
...
<p id="section-two">این بخش دوم است.</p>
۴. لینک برای دانلود فایل:
می‌تونید با دادن آدرس فایل (مثل PDF یا ZIP) به href، لینکی برای دانلود ایجاد کنید.
<a href="/files/document.pdf" download>دانلود فایل PDF</a>
خصوصیت download به مرورگر می‌گه که فایل رو دانلود کنه (و نه فقط باز کنه).
خصوصیت href مهم‌ترین بخش تگ <a> است و مقصد لینک را تعیین می‌کند.
مثال جامع:
<h1>صفحه اصلی وبلاگ من</h1>
<nav>
<a href="index.html">خانه</a> |
<a href="/blog/posts.html">مطالب</a> |
<a href="#about-me">درباره من</a> |
<a href="mailto:me@myblog.com?subject=از وبلاگ">تماس</a>
</nav>
<p>
به وبلاگ من خوش آمدید! در اینجا درباره موضوعات مختلف صحبت می‌کنم.
برای اطلاعات بیشتر، می‌توانید به <a href="https://example.com/more-info" target="_blank">وب‌سایت مرجع</a> مراجعه کنید.
</p>
<h2 id="about-me">درباره من</h2>
<p>من یک توسعه‌دهنده وب علاقه‌مند هستم...</p>
همونطور که می‌بینید، تگ <a> با خصوصیت href، پایه‌های اصلی ارتباط در دنیای وب رو می‌سازه. با یادگیری انواع مقادیر href، می‌تونید صفحات وب خودتون رو به دنیایی از اطلاعات و منابع دیگه متصل کنید! 🔗