لینک های HTML

لینک ها تقریبا در تمام صفحات وب یافت می شوند. لینک ها به کاربران اجازه می دهند که از یک صفحه به صفحه دیگر بروند.

 

لینک های HTML - هایپرلینک ها

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

وقتی موس شما روی لینک حرکت کند، شکل آن به دست کوچک تبدیل می شود.

 

توجه: یک لینک حتما نباید متن باشد، بلکه می تواند یک تصویر یا هر عنصر دیگر HTML باشد.

 

نحو لینک HTML

تگ <a> در HTML یک لینک را تعریف می کند و نحو زیر را دارد.

<a href="url">link text</a>

 

مهم ترین ویژگی عنصر <a> ویژگی href  است که نشان دهنده مقصد پیوند می باشد.

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

<a href="https://maxdev.ir/">مشاهده سایت ما</a>
امتحان کنید



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

  1. یک لینک بازدید نشده به رنگ آبی همراه زیر خط
  2. یک لینک بازدید شده به رنگ بنفش با زیر خط
  3. یک لینک فعال به رنگ قرمز با زیر خط

البته شما می توانید با CSS مدل های دیگری به لینک خود دهید.

 

ویژگی های مورد نظر در لینک های HTML

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

ویژگی target مشخص می کند که در کجا باید سند پیوند شده را باز کند و می توان یکی از مقادیر زیر را داشته باشد:

<a href="https://maxdev.ir/" target="_blank">مشاهده سایت ما</a>
امتحان کنید

 

لینک های URL مطلق در برابر لینک های URL نسبی

هر دو مدل آن ها از یک URL مطلق ( یک آدرس وب سایت کامل ) در ویژگی href استفاده می کند.

یک لینک محلی ( یک لینک که به صفحه ای در همان سایت برود ) با یک URL نسبی ( بدون بخش https://www ) مشخص شده است.

 
<h2>لینک های URL مطلق</h2>

<p><a href="https:/www.maxdev.ir/">MaxDev</a></p>

<p><a href="https:/www.maxdev.ir/">Google</a></p>
امتحان کنید

 

<h2>لینک های URL نسبی</h2>

<p><a href="html_images.asp">HTML Images</a></p>

<p><a href="/css/default.asp">CSS Tutorial</a></p>
امتحان کنید

 

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

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

<a href="https://maxdev.ir">

<img src="https://maxdev.ir/admin/uploads/maxdev.JPG" alt="HTML tutorial" style="width:1351px;height:88px;">

</a>
امتحان کنید

 

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

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

<a href="mailto:support@maxdev.ir">ارسال ایمیل</a>
امتحان کنید

 

دکمه به عنوان یک لینک

برای استفاده از یک دکمه HTML به عنوان لینک، باید برخی کد های جاوا اسکریپت را اضافه کنید.

جاوا اسکریپت اجازه می دهد آنچه را که در رویداد های خاص مانند کلیک یک دکمه اتفاق می افتد مشخص کنید:

<button onclick="document.location='/'">MaxDev</button>
امتحان کنید

 

عنوان های پیوند

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

<a href="https://maxdev.ir/category/html_tutorial/" title="رفتن به بخش">آموزش html</a>
امتحان کنید