شما اینجا هستید

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

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

نحوه ایجاد لینک

در HTML، لینکها با تگ <a> تعریف میشوند:

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

مثال زیر را برای آشنایی بیشتر با ایجاد پیوند امتحان کنید :

<html>

<body>


<p><a href="http://learn.puyapardaz.ir/content/learn/learning-topics/48">Visit our HTML tutorial</a></p>


</body>

</html>

 

ویژگی href مسیر مقصد را مشخص میکند (http://learn.puyapardaz.ir/content/learn/learning-topics/48)

 

متن بین تگ <a> قسمتی است که بازدیدکنندگان وب سایت میبینند. (Visit our HTML tutorial)

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

متن پیوند حتماً نباید متن باشد و ممکن است یک تصویر یا هر عنصر دیگه ای باشه.

پیوندهای محلی

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

یک لینک محلی (لینک به همان سایت) با یک URL نسبی است (بدون http://www).

<html>

<body>


<p><a href="content/learn/learning-topics/48">HTML Images</a> is a link to a page on this website.</p>


<p><a href="http://www.w3.org/">W3C</a> is a link to a website on the World Wide Web.</p>


</body>

</html>

 

رنگ لینکها

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

  • نشانه گر موس شبیه یک دست کوچک میشود
  • رنگ لینک تغییر میکند

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

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

با استایل دادن میتوانید رنگهای پیش فرض را تغییر دهید :

<html>

<head>

<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>

</head>

<body>


<p>You can change the default colors of links</p>


<a href="content/learn/learning-topics/48" target="_blank">HTML learns</a>


</body>

</html>

 

ویژگی target

 

خصوصیت target مشخص میکنه که صفحه ای که لینک شده کجا باز شود. مثال پایین لینک را در یک زبانه جدید باز میکند:

<html>

<body>


<a href="http://learn.puyapardaz.ir/content/learn/learning-topics/48" target="_blank">Visit our HTML tutorial!</a>


<p>If you set the target attribute to "_blank", the link will open in a new browser window or tab.</p>


</body>

</html>

 

مقادیری که به خصوصیت target میتوانیم بدهیم به شرح زیر است:

 

  • _blank : صفحه ای که لینک شده است را در یک پنجره یا تب جدید باز میکند.
  • _self : صفحه ای که لینک شده است را در همان پنجره باز میکند (به صورت پیش فرض لینکها به این صورت عمل میکنند)

لینک دار کردن تصاویر

همانطور که گفتم تصاویر را هم مانند نوشته ها میتوان لینک دار کرد و اینکه لینک دار کردن تصاویر خیلی رایج هست:

<html>

<body>


<p>The image is a link. You can click on it.</p>


<a href=" content/learn/learning-topics/48">

  <img src="puyapardaz.jpg" alt="HTML tutorial" style="width:42px;height:42px;border:0">

</a>


<p>We have added "border:0" to prevent IE9 (and earlier) from displaying a border around the image.</p>


</body>

</html>

 

به دلیل اینکه از انداختن حاشیه در دور تصاویر در مرورگرهای IE9 و قدیمی تر جلوگیری کنیم border:0 را قرار دادیم.

 

ایجاد بوکمارک

بوکمارکها برای پریدن از قسمتی به قسمت دیگر در یک صفحه وب مورد استفاده قرار میگیرند.

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

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

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

<h2 id="tips">Useful Tips Section</h2>

سپس به بوکمارکی که ایجاد کرده ایم در همان صفحه یک پیوند میدهیم:

<a href="#tips">Visit the Useful Tips Section</a>

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

<a href="html_tips.htm#tips">Visit the Useful Tips Section</a>

حالا این مثالی را که در زیر نوشتم را خودتان امتحان کنید:

<html>

<body>


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


<h2>Chapter 1</h2>

<p>This chapter explains how to create website</p>


<h2>Chapter 2</h2>

<p> This chapter explains how to create website </p>


<h2>Chapter 3</h2>

<p> This chapter explains how to create website </p>


<h2 id="C4">Chapter 4</h2>

<p> This chapter explains how to create website </p>


<h2>Chapter 5</h2>

<p> This chapter explains how to create website </p>


<h2>Chapter 6</h2>

<p> This chapter explains how to create website </p>


<h2>Chapter 7</h2>

<p> This chapter explains how to create website </p>


<h2>Chapter 8</h2>

<p> This chapter explains how to create website </p>


<h2>Chapter 9</h2>

<p> This chapter explains how to create website </p>


<h2>Chapter 10</h2>

<p> This chapter explains how to create website </p>


<h2>Chapter 11</h2>

<p> This chapter explains how to create website </p>


<h2>Chapter 12</h2>

<p> This chapter explains how to create website </p>


<h2>Chapter 13</h2>

<p> This chapter explains how to create website </p>


<h2>Chapter 14</h2>

<p> This chapter explains how to create website </p>


<h2>Chapter 15</h2>

<p> This chapter explains how to create website </p>


<h2>Chapter 16</h2>

<p> This chapter explains how to create website </p>


<h2>Chapter 17</h2>

<p> This chapter explains how to create website </p>


</body>

</html>

 

دیدگاه‌ها

افزودن دیدگاه جدید

دیدگاه

  • تگ‌های HTML مجاز: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.

Plain text

  • تگ‌های HTML مجاز نیستند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
كد امنيتي
این پرسش برای جلوگیری از ارسال اسپمهای اتوماتیک است.