لینک ها

از آنجایی که وب طراحی شد تا یک شبکه داده ای بین اسناد به هم مرتبط شده باشد، لینک ها جز اساسی وب و HTML هستند.

قسمت HyperText از HTML به ما نشان می دهد از چه نوع لینکی استفاده می کنیم. از لینک های ابرمتن که به آنها ابرپیوند (Hyperlink) نیز گفته می شود. ابرپیوند به پیوندی از درون یک سند به سندی دیگر گفته می شود.

در HTML لینک ها عناصر خطی هستند که توسط تگ <a> تعیین می شوند.

در عنصر <a> با استفاده از ویژگی href تعیین می کنیم هدف لینک چه آدرسی می باشد. (href = hypertext reference)

یعنی با استفاده از این ویژگی می توان تعیین کرد زمانی که بر روی یک لینک کلیک می کنیم به چه صفحه یا وب سایتی سفر می کنیم.

<p>
  To search for something, visit <a href="http://www.google.com">Google</a>.
</p>

خروجی:

To search for something, visit Google.

همانطور که گفته شد لینک ها وسیله ای برای هدف قرار دادن سندهای دیگر در یک سایت یا سایت های دیگر می باشند.

سه روش آدرس دهی برای لینک ها وجود دارد:

• anchor: هدف در صفحه ای که در آن هستیم می باشد.
• relative: معمولا هدف صفحات دیگر از وب سایتی که در آن هستیم می باشد.
• absolute: معمولا هدف سایت های دیگر و یا سندهای درون آنها می باشند.

Anchor

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

در این روش با استفاده از # می توان هدف را یک عنصر HTML با یک id خاص قرار داد.

به عنوان نمونه در یک صفحه با کلیک بر روی لینک <a href="#footer"> به سمت عنصر <div id="footer"> در همان سند حرکت می کنیم.

مثال زیر را بررسی کنید:

 

See the Pen anchor tag by Mojtaba Seyedi (@seyedi) on CodePen.

 

Relative

زمانی که هدف لینک در همان سایتی هست که لینک در آن وجود دارد می توانیم از آدرس های Relative یا همان نسبی استفاده کنیم.

اما نسبت به چی؟ نسب به صفحه فعلی

فرض کنید یک فولدر داریم که در آن دو فایل HTML قرار دارند:

 

 

می خواهیم در فایل home.html لینکی به فایل contact.html داشته باشیم. چون هر دو در یک فولدر مشابه قرار دارند کافی است بصورت زیر عمل کنیم:

<p>
  Go to the <a href="contact.html">contact page</a>.
</p>

حال اگر این مثال در مورد یک سایت واقعی بود باز هم به همین صورت عمل می کردیم.

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

حال فرض کنید می خواهیم از صفحه home.html تصویری که در زیر فولدر images با نام pic.png قرار دارد را به صورت نسبی هدف قرار دهیم. در این صورت آدرس به صورت زیر خواهد بود:

<p>
  Go to the <a href="images/pic.png">contact page</a>.
</p>

Absolute

در مثال بالا فرض کنید که آدرس وب سایت css-tricks.ir بود. حال اگر بخواهیم از یک سایت دیگر به صفحه contact.html در سایت css-tricks.ir پیوند داشته باشیم نمی توانیم فقط بنویسیم contact.html چرا که آدرس های نسبی فقط برای صفحاتی کار می کند که بر روی یک دامنه قرار دارند.

برای این کار از آدرس های مطلق یا همان Absolute استفاده می کنیم:

<p>
  <a href="http://css-tricks.ir/contact.html">contact page</a>.
</p>