ساخت لینک لنگر (anchor)، در HTML

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

یعنی مثلا کاربر بر روی لینکی در ابتدای صفحه کلیک می کند و سپس با اسکرول به پایین صفحه، به انتهای صفحه می رویم و بخش خاصی از صفحه در برابر ما قرار می گیرد. برای این منظور، باید یک لینک لنگر (anchor) بسازیم. ساخت لینک لنگر (anchor) مشابه ساخت همان لینک معمولی است و با استفاده از تگ a و تعیین مقداری برای مشخصه href از این تگ، تعریف می شود و فقط نیاز به رعایت نکاتی دارد که آنها را در ادامه شرح خواهیم داد. برای این منظور، دو روش ذکر خواهد شد.

روش اول : تعیین id برای تگ مورد نظر

فرض کنید می خواهیم یک لینک لنگر (anchor) بسازیم که هنگام کلیک بر روی آن، به قسمت زیر از صفحه برویم (قسمتی از صفحه که حاصل نمایش کد HTML زیر از کدهای HTML صفحه می باشد) :

همان طور که مشاهده می کنید، کد بالا از تگ h1 ساخته شده است. نوع تگ اهمیتی ندارد و تنها مهم این است که برای تگ مورد نظر، یک id تعیین کنیم (در کد بالا، id برای تگ h1 برابر kelidestan_5 تعیین شده است). یعنی عنصر را بر اساس id منحصربفرد آن شناسایی می کنیم.

اکنون باید با تگ a ، لینک لنگر (anchor) مورد نظرمان را بسازیم. برای این منظور، کدهای زیر را می نویسیم :

کد بالا باعث ساخت یک لینک می شود که دارای عنوان go to header 5 می باشد و اگر بر روی آن کلیک کنیم، به محل نمایش تگ h1 مورد نظر، منتقل خواهیم شد. همان طور که مشاهده می کنید، مشخصه href از تگ a برابر عبارت زیر تعیین شده است :

یعنی ابتدا علامت # را نوشته ایم و سپس id تگ h1 ، یعنی عبارت kelidestan_5 ، نوشته شده است.

نکته

اگر بخواهیم لینک لنگر (anchor) در یک صفحه دیگر ساخته شود (نه در صفحه ای که تگ h1 که باید نمایش داده شود، وجود دارد)، بنابراین باید قبل از عبارت مورد نظر، آدرس URL (مطلق یا نسبی) صفحه شامل تگ h1 را نیز بنویسیم. یعنی مثلا با فرض اینکه آدرس URL صفحه شامل تگ h1 (صفحه اول) به صورت زیر باشد :

آنگاه لینک لنگر (anchor) با کد زیر ساخته می شود :

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

به مثال زیر توجه کنید :

مثال

کدهای یک صفحه HTML :

<a href="#kelidestan_1">go to header 1</a>
<br/>
<a href="#kelidestan_2">go to header 2</a>
<br/>
<a href="#kelidestan_3">go to header 3</a>
<br/>
<a href="#kelidestan_4">go to header 4</a>
<br/>
<a href="#kelidestan_5">go to header 5</a>
<br/>
<a href="#kelidestan_6">go to header 6</a>
<br/>
<a href="#kelidestan_7">go to header 7</a>
<br/>
<a href="#kelidestan_8">go to header 8</a>
<br/>

<h1 id="kelidestan_1">header 1</h1>
<p>This is a paragraph.</p>
<br/><br/>

<h1 id="kelidestan_2">header 2</h1>
<p>This is a paragraph.</p>
<br/><br/>

<h1 id="kelidestan_3">header 3</h1>
<p>This is a paragraph.</p>
<br/><br/>

<h1 id="kelidestan_4">header 4</h1>
<p>This is a paragraph.</p>
<br/><br/>

<h1 id="kelidestan_5">header 5</h1>
<p>This is a paragraph.</p>
<br/><br/>

<h1 id="kelidestan_6">header 6</h1>
<p>This is a paragraph.</p>
<br/><br/>

<h1 id="kelidestan_7">header 7</h1>
<p>This is a paragraph.</p>
<br/><br/>

<h1 id="kelidestan_8">header 8</h1>
<p>This is a paragraph.</p>
<br/><br/>

</body>
</html>

نتیجه :

روش دوم : استفاده از تگ a بدون عنوان و تعیین name برای آن

این روش، مشابه روش اول می باشد و تنها تفاوت این است که به جای تعیین id برای تگ مورد نظر (در مثال قبل، تگ h1)، قبل از آن، یک تگ a بدون عنوان می نویسیم و یک مشخصه name دلخواه را برای آن تعیین می کنیم که ارجاع بر اساس آن مشخصه name خواهد بود (همانند id در روش اول). یعنی مشابه کد زیر :

به مثال زیر توجه کنید :

مثال

<a name="kelidestan_1"></a>
<h1>header 1</h1>
<p>This is a paragraph.</p>
<br/><br/>

<a name="kelidestan_2"></a>
<h1>header 2</h1>
<p>This is a paragraph.</p>
<br/><br/>

<a name="kelidestan_3"></a>
<h1>header 3</h1>
<p>This is a paragraph.</p>
<br/><br/>

<a name="kelidestan_4"></a>
<h1>header 4</h1>
<p>This is a paragraph.</p>
<br/><br/>

<a name="kelidestan_5"></a>
<h1>header 5</h1>
<p>This is a paragraph.</p>
<br/><br/>

<a name="kelidestan_6"></a>
<h1>header 6</h1>
<p>This is a paragraph.</p>
<br/><br/>

<a name="kelidestan_7"></a>
<h1>header 7</h1>
<p>This is a paragraph.</p>
<br/><br/>

<a name="kelidestan_8"></a>
<h1>header 8</h1>
<p>This is a paragraph.</p>
<br/><br/>

</body>
</html>

نتیجه :

دسته بندی لینک ها (Link)، در HTML

نویسنده علیرضا گلمکانی

شماره کلید 20654

گزینه ها

به اشتراک گذاری (Share) در شبکه های اجتماعی

FaceBook Twitter Digg Reddit LinkedIn Pinterest StumbleUpon

نظرات 6 5 1

samira

۱۳۹۷/۰۸/۲۶

۱۰:۱۳

بسیار مطالبتون مفید و واضح بود جواب سوالم رو کامل پیدا کردم. ممنون

mehdi

۱۳۹۸/۰۴/۱۰

۲۲:۳۷

ممنون از سایت خوبتون

Ali

۱۳۹۹/۰۵/۱۲

۱۴:۲۶

خیلی عالی بود ممنون از شما واقعا خیلی خوب و واضح بود.

عرفان

۱۳۹۹/۰۹/۲۰

۲۳:۴۵

ممنون از شما

محمد

۱۴۰۱/۱۱/۰۵

۰۵:۳۸

سالها گزینه لنگر در ویرایشگرهای جوملا رو دیده بودم و نمیدونستم کارش چیه. مطلبتون خیلی مفید بود.

ارسال نظر جدید (بدون نیاز به عضو بودن در وب سایت)