لینک ها

پیوندها در HTML 

لینک‌ها در تقریباً تمام صفحات وب وجود دارند.

لینک‌ها این امکان را به کاربران می‌دهند که با کلیک کردن، از یک صفحه به صفحه‌ی دیگر بروند.

🔹 لینک‌های HTML – ابرپیوندها (Hyperlinks)

لینک‌های HTML همان ابرپیوندها هستند.

با کلیک روی یک لینک می‌توانید به سندی دیگر منتقل شوید.

وقتی نشانگر ماوس را روی لینک می‌برید، فلش ماوس به شکل یک دست کوچک تغییر می‌کند.

📌 نکته: یک لینک لزوماً نباید فقط متن باشد. لینک می‌تواند یک تصویر یا هر عنصر HTML دیگر نیز باشد!

🔹 نحوه نوشتن لینک در HTML – سینتکس

تگ <a> در HTML برای تعریف یک ابرپیوند (لینک) استفاده می‌شود. ساختار آن به شکل زیر است:

<a href="url">متن لینک</a>

مهم‌ترین ویژگی عنصر <a>، ویژگی href است که آدرس مقصد لینک را مشخص می‌کند.

متن لینک همان بخشی است که برای کاربر قابل مشاهده است.

📌 وقتی روی متن لینک کلیک شود، کاربر به آدرس URL مشخص‌شده هدایت می‌شود.

🔸 مثال

مثالی برای ایجاد لینک به سایتcodoloper:

<a href="https://www.codoloper.com/">Visit codoloper.com!</a>

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

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

• لینک بازنشده (unvisited): آبی و زیرخط‌دار

• لینک بازدیدشده (visited): بنفش و زیرخط‌دار

• لینک فعال (active): قرمز و زیرخط‌دار

📌 نکته: ظاهر لینک‌ها را می‌توان با استفاده از CSS تغییر داد!

🔹 ویژگی target در لینک‌های HTML

به‌طور پیش‌فرض، صفحه لینک‌شده در همان پنجره یا تب مرورگر فعلی باز می‌شود.
برای تغییر این رفتار، باید ویژگی target را مشخص کنید.

ویژگی target تعیین می‌کند که سند لینک‌شده کجا باز شود.

مقدارهای ممکن برای target:

🔸 مثال استفاده از target="_blank"

<a href="https://www.codoloper.com/" target="_blank">Visit codoloper!</a>

🔷 آدرس مطلق (Absolute URL) در برابر آدرس نسبی (Relative URL)

در مثال‌های بالا از آدرس مطلق (full web address) برای href استفاده شده است.

یک لینک محلی (مثلاً به صفحه‌ای دیگر از همان سایت) با آدرس نسبی مشخص می‌شود (بدون بخش https://www).

🔸 مثال:

<h2>Absolute URLs</h2>
<p><a href="https://www.codoloper.org/">codoloper</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>

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

برای استفاده از یک تصویر به عنوان لینک، کافی‌ست تگ <img> را داخل تگ <a> قرار دهید:

🔸 مثال:

<a href="default.asp">
    <img src="smiley.gif" alt="HTML tutorial" style="width: 42px; height: 42px;">
</a>

🔹 لینک به آدرس ایمیل

برای ایجاد لینکی که برنامه ایمیل کاربر را باز کند، از mailto: در ویژگی href استفاده کنید:

🔸 مثال:

<a href="mailto:someone@example.com">Send email</a>

🔹 استفاده از دکمه به عنوان لینک

برای استفاده از دکمه HTML به‌عنوان لینک، باید از کمی کد JavaScript استفاده کنید.

JavaScript این امکان را می‌دهد که مشخص کنید با کلیک روی دکمه چه اتفاقی بیفتد:

🔸 مثال:

<button onclick="document.location='default.asp'">HTML Tutorial</button>

📌 نکته: برای یادگیری بیشتر درباره JavaScript، آموزش JavaScript را بخوانید.

🔹 عنوان لینک‌ها (title)

ویژگی title اطلاعات بیشتری در مورد عنصر ارائه می‌دهد. این اطلاعات معمولاً به‌صورت تول‌تیپ (پنجره راهنما) زمانی که ماوس روی عنصر می‌رود نمایش داده می‌شود.

🔸 مثال:

<a href="https://wwwcodoloper.com/html/" title="Go to codoloperHTML section">
    Visit our HTML Tutorial
</a>

🔷 آدرس‌های مطلق و نسبی – بیشتر بدانید

🔸 مثال با آدرس کامل:

<a href="https://www.codoloper.com/html/default.asp">HTML tutorial</a>

🔸 مثال با فایل داخل پوشه html سایت:

<a href="/html/default.asp">HTML tutorial</a>

🔸 مثال با فایل داخل همان پوشه‌ای که صفحه فعلی هست:

<a href="/html/default.asp">HTML tutorial</a>

📘 می‌توانید در فصل «مسیر فایل‌ها در HTML» بیشتر درباره مسیرها (file paths) بخوانید.

✅ خلاصه فصل

• از تگ <a> برای تعریف لینک استفاده کنید.

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

• از ویژگی target برای مشخص کردن مکان باز شدن سند استفاده کنید.

• از تگ <img> درون <a> برای تبدیل تصویر به لینک استفاده کنید.

• از mailto: در ویژگی href برای ایجاد لینک ایمیل استفاده کنید.

🔷 تگ‌های مربوط به لینک‌ها در HTML