لینک ها در HTML

سپتامبر 25, 2017adminskآموزش html1

در HTML تکست ، عکس و هر المان دیگری را می توان به لینک تبدیل نمود.

در html لینک ها به کمک تگ a ایجاد می شوند :

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

ادرس url را به طور کامل وارد نمایید:

<!DOCTYPE html>
<html>
<body>
<p><a href="http://www.tehrancode.com/">طراحی سایت تهران کد</a></p>
</body>
</html>

حتما در انتهای url اسلش بگذارید در غیر این صورت امکان دارد ۲ درخواست به سرور وارد شود و باعث بالاتر رفتن درخواست ها و کندی وب سایت شما شود.

استایل رنگ در لینک های HTML

به صورت پیش فرض لینکهای html به رنگ آبی و زیر خط دار هستند
لینک های دیده شده به رنگ بنفش می‌باشند
لینک های فعال به رنگ قرمز هستند (منظور از لینک فعال لینکی است که ادرس موجود در صفحه فعلی را در خود قرار دارد.)

در قطعه کد زیر با استفاده از css مقادیر پیش فرض استایل لینک ها را تغییر داده ایم:

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
 color: green;
 text-decoration: none;
}
a:visited {
 color: pink;
 text-decoration: none;
}
a:hover {
 color: red;
 text-decoration: underline;
}
a:active {
 color: yellow;
 text-decoration: underline;
}
</style>
</head>
<body>
<p>شما با سی اس اس می توانید رنگ های پیش فرض لینک ها را تغییر دهید</p>
<a href="http://www.tehrancode.com/">لینک با استایل دلخواه</a> 
</body>
</html>

ایجاد لینک هایی که در یک تب جدید در مرورگر باز می‌شوند:

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

<!DOCTYPE html>
<html>
<body>
<a href="http://www.tehrancode.com/" target="_blank">مشاهده تهران کد در تب جدید</a>
<p>به کمک اتریبیوت تارگت می توان لینک را در تب جدید باز نمود</p>
</body>
</html>

چگونه عکس یا هر عنصر دیگری را به حالت لینک درآوریم:

هر عنصری را که می خواهیم تبدیل به لینک کنیم کافیست تگ ها آن عنصر را بین تگ های باز و بسته a قرار دهیم به کد زیر که یک عکس را به لینک تبدیل مینماید توجه نمایید:

<!DOCTYPE html>
<html>
<body>
<a href="http://www.tehrancode.com/">
 <img src="http://blog.tehrancode.com/wp-content/uploads/طراحی-سایت-تهرانکد-Copy.jpg" alt="HTML tutorial" style="width:120px;height:120px;border:0">
</a>
</body>
</html>

ایجاد نشانه گذاری در یک صفحه به کمک لینک

به سادگی با نشانه کذاری با یک کلیک به محتوای دلخواه در همان صفحه اسکرول شوید قطعه کد زیر نشان می دهد که چگونه با استفاده از علامت # در تگ a و اجاد id در هر تگی لینکی ایجاد نمایم که با کلیک روی آن به محتوای موجود در همان صفحه اسکرول شویم:

<!DOCTYPE html>
<html>
<body>

<p><a href="#C4">Jump to Chapter 4</a></p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>

1 دیدگاه. ثبت دیدگاه

دوستی

مارس 17, 2018 11:03 ق.ظ

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

ما به همراه یک گروه از متخصصین حوزه وب گروه تلگرامی جامعه وبمستران ایران را لانچ
کردیم.
با توجه به اینکه شما هم در
این زمینه فعال هستید خوشحال می شیم به ما بپیوندید تا تعاملات مفیدی باهم داشته
باشیم
لینک گروه خدمتتون
https://t.me/joinchat/DBhKUBJE3gUMxzABig66Ig

پاسخ