بستن منو
۷۷
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با HTML
مباحث اولیه برای آشنایی با HTML
24
نمایش متن، در HTML
نمایش متن، در HTML
5
نمایش عکس، در HTML
نمایش عکس، در HTML
6
لینک ها (Link)، در HTML
لینک ها (Link)، در HTML
1
لیست ها (List)، در HTML
لیست ها (List)، در HTML
1
جدول ها (Table)، در HTML
جدول ها (Table)، در HTML
2
فرم ها (Form)، در HTML
فرم ها (Form)، در HTML
17
تعیین مشخصات کلی صفحه، در HTML
تعیین مشخصات کلی صفحه، در HTML
5
عناصر گرافیکی، در HTML
عناصر گرافیکی، در HTML
1
دکمه ها (Button)، در HTML
دکمه ها (Button)، در HTML
2
پخش صدا (Audio)، در HTML
پخش صدا (Audio)، در HTML
1
کار با کیبورد (Keyboard)، در HTML
کار با کیبورد (Keyboard)، در HTML
2
مباحث عمومی، در HTML
مباحث عمومی، در HTML
10
×

دانلود فروشگاه اندروید کلیدستان

20654

نویسنده

علیرضا گلمکانی ( admin )

شماره کلید
دسته کلید - دسته بندی

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

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

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

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

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


<h1 id="kelidestan_5">header 5</h1>

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

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


<a href="#kelidestan_5">go to header 5</a>

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


#kelidestan_5

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

نکته

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


http://www.kelidestan.com/example.php

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


<a href="http://www.kelidestan.com/example.php#kelidestan_5">go to header 5</a>

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

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

مثال

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


<html>
<head>
</head>
 
<body>

<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="kelnameestan_5"></a>
<h1>header 5</h1>

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

مثال

<html>
<head>
</head>
 
<body>

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



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

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید

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

خوانده شد
جستجو در عنوان کلیدها :
جستجو توسط گوگل :
پرسیدن سوال :
ارسال نظر :
نظرات 2 1 1
samira
۱۳۹۷/۰۸/۲۶
۱۰:۱۳

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

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

دسترسی سریع

×

شماره کلید


کلید
×

شماره دسته کلید


دسته کلید
×

جستجو


جستجو

راهنمای تگ های HTML

راهنمای تگ های HTML بر اساس حرف اول تگ :

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

بستن منو
۱۹۷
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مجموعه ویدئوهای آموزشی HTML5 - مجموعه HTML5 Tutorial - از thenewboston.com
مجموعه ویدئوهای آموزشی HTML5 - مجموعه HTML5 Tutorial - از thenewboston.com
53
مجموعه ویدئوهای آموزشی XHTML و CSS - مجموعه XHTML and CSS Tutorials - از thenewboston.com
مجموعه ویدئوهای آموزشی XHTML و CSS - مجموعه XHTML and CSS Tutorials - از thenewboston.com
46
مجموعه ویدئوهای آموزشی HTML - مجموعه HTML Tutorials
مجموعه ویدئوهای آموزشی HTML - مجموعه HTML Tutorials
28
مجموعه ویدئوهای آموزشی HTML و CSS - مجموعه Learn HTML/CSS
مجموعه ویدئوهای آموزشی HTML و CSS - مجموعه Learn HTML/CSS
19
مجموعه ویدئوهای آموزشی HTML5 و CSS3 برای مبتدیان - مجموعه HTML5 and CSS3 beginners tutorials
مجموعه ویدئوهای آموزشی HTML5 و CSS3 برای مبتدیان - مجموعه HTML5 and CSS3 beginners tutorials
51
بستن منو
۵۸
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با CSS
مباحث اولیه برای آشنایی با CSS
7
نمایش متن، در CSS
نمایش متن، در CSS
13
ساخت حاشیه (border)، در CSS
ساخت حاشیه (border)، در CSS
4
عکس ها، در CSS
عکس ها، در CSS
5
تعیین اندازه و موقعیت عنصرها، در CSS
تعیین اندازه و موقعیت عنصرها، در CSS
4
تغییر شکل عنصرها، در CSS
تغییر شکل عنصرها، در CSS
3
ساخت انیمیشن، در CSS
ساخت انیمیشن، در CSS
6
لینک ها (links)، در CSS
لینک ها (links)، در CSS
5
رنگ ها، در CSS
رنگ ها، در CSS
1
دکمه ها (Button)، در CSS
دکمه ها (Button)، در CSS
2
مباحث عمومی، در CSS
مباحث عمومی، در CSS
8
بستن منو
۱۹
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مفاهیم اولیه در طراحی وب سایت
مفاهیم اولیه در طراحی وب سایت
2
توسعه وب سایت (ساخت بخش ها و امکانات جدید برای وب سایت)
توسعه وب سایت (ساخت بخش ها و امکانات جدید برای وب سایت)
4
کار با کنترل پنل وب سایت
کار با کنترل پنل وب سایت
1
معرفی سایت های مفید در زمینه طراحی وب سایت
معرفی سایت های مفید در زمینه طراحی وب سایت
1
یافتن کد رنگ ها برای طراحی وب سایت
یافتن کد رنگ ها برای طراحی وب سایت
2
نرم افزار FileZilla
نرم افزار FileZilla
1
فایل htaccess ، در طراحی وب سایت
فایل htaccess ، در طراحی وب سایت
3
ارسال ایمیل، در طراحی وب سایت
ارسال ایمیل، در طراحی وب سایت
1
مباحث عمومی، در طراحی وب سایت
مباحث عمومی، در طراحی وب سایت
4