تعداد بازدید: 604

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

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

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

نحوه نوشتن یک پیوند یا لینک

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

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

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

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

توجه: لازم نیست که یک پیوند متن باشد. پیوند می تواند یک تصویر یا هر عنصر HTML دیگری باشد!

<a href="https://eliagroup.ir">گروه ایلیا</a> 

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

یک پیوند بازدید نشده ، زیرخط دار و آبی است.
یک پیوند بازدید شده زیرخط دار و بنفش است.
یک پیوند فعال زیرخط دار و قرمز است.

نکته: البته پیوندها را می توان با CSS تغییر داد ، تا ظاهری دیگر پیدا کنید!

پیوندهای HTML - ویژگی target

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

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

ویژگی target می تواند یکی از مقادیر زیر را داشته باشد:

<a href="https://eliagroup.ir" target="_blank">گروه ایلیا</a>

لینک بالا در یک صفحه جدید باز خواهد شد.

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

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

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

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

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

نحوه لینک دادن به عکس

برای استفاده از یک تصویر به عنوان پیوند ، فقط برچسب <img> را درون برچسب <a> قرار دهید:

<a href="http://google.com">
<img src="google.gif">
</a> 

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

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

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

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

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

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

<button onclick="document.location='index.php'">HTML Tutorial</button> 

عناوین پیوند

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

<a href="https://eliagroup.ir/tutorials" title="گروه ایلیا - آموزش ها">
مشاهده آموزش ها
</a> 

رنگ پیوند HTML

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

یک پیوند بازدید نشده ، زیرخط دار و آبی است.
یک پیوند بازدید شده زیرخط دار و بنفش است.
یک پیوند فعال زیرخط دار و قرمز است.

با استفاده از CSS می توانید رنگ حالت پیوند را تغییر دهید:

در اینجا ، یک پیوند بازدید نشده به رنگ سبز و بدون هیچگونه زیرخط خواهد بود. یک پیوند بازدید شده صورتی خواهد بود و هیچ خطی وجود ندارد. پیوند فعال زرد و زیرخط دار خواهد بود. بعلاوه ، هنگام قرار گرفتن موس روی پیوند (a: hover) قرمز می شود و زیر آن خط می کشد:

<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style> 

دکمه های لینک دار

با استفاده از CSS می توان پیوند را به عنوان دکمه نیز مدل کرد:

<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style> 

یک اشاره گر به متن در HTML ایجاد کنید

از پیوندهای HTML می توان برای ایجاد اشاره گرها استفاده کرد ، به طوری که خوانندگان می توانند به قسمت های خاصی از یک صفحه وب پرش کنند.

اگر یک صفحه وب طولانی باشد ، اشاره گرها می توانند مفید باشند.

برای ایجاد اشاره گر- ابتدا اشاره گر را ایجاد کنید ، سپس پیوندی به آن اضافه کنید.

وقتی روی پیوند کلیک شد ، صفحه html به پایین یا بالا می رود تا به آن متن برسد.

مثال:

ابتدا از ویژگی id برای ایجاد اشاره گر استفاده کنید:

<h2 id="C1">فصل 1 آموزش طراحی سایت</h2>
<h2 id="C2">فصل 2 آموزش طراحی سایت</h2>
<h2 id="C3">فصل 3 آموزش طراحی سایت</h2>

سپس ، از همان صفحه پیوندی را به اشاره گر ("رفتن به فصل 1") اضافه کنید:

<a href="#C1">پرش به فصل 1</a> 
<a href="#C2">پرش به فصل 2</a> 
<a href="#C3">پرش به فصل 3</a> 

همچنین می توانید از یک صفحه به صفحه دیگر اشاره گر اضافه کنید:

<a href="html_demo.html#C1">پرش به فصل 1</a>

مطالب تصادفی

• رازهایی مردانه که خانمها باید بدانند
• چای با طعم نعنا و لیمو ترش
• نکاتی که قبل از خانه تکانی باید انجام دهید
• شخصیت شناسی با انتخاب میوه
• برنج مخلوط لیمویی
• راهنمایی سریع برای آب کردن شکم
• 10.  ایده های عاشقانه
• زندگی کودک هفته بیست و ششم
• عروس خانم های کم طاقت بخوانند!
• نحوه تمیز کردن گل های مصنوعی