لینک (پیوند): قلب تپندهٔ جهان وب
لینک چیست و چگونه کار میکند؟
لینک که در زبان فارسی به آن «پیوند» یا «ارتباط» نیز گفته میشود1، یکی از بنیادیترین مفاهیم در دنیای وب است. تصور کنید وب جهانی مانند یک کتابخانهٔ عظیم با میلیاردها صفحه است. اگر هیچ راهی برای رفتن از یک صفحه به صفحهٔ دیگر نداشتیم، باید نشانی دقیق هر صفحه را تایپ میکردیم. لینک همان پل ارتباطی بین صفحات است که با یک کلیک روی آن، مرورگر شما را به مقصد مشخص شده هدایت میکند.
به بیان سادهتر، لینک یک متن یا تصویر قابل کلیک در یک صفحهٔ وب است. وقتی روی آن کلیک میکنید، مرورگر دستوری را اجرا میکند که میگوید: «به این آدرس جدید برو». از نظر فنی، لینک با استفاده از تگ a در زبان اچتیامال2 ساخته میشود. برای مثال، کد <a href="https://example.com">متن لینک</a> یک لینک با متن «متن لینک» میسازد که با کلیک روی آن به آدرس نمونه میرود.
انواع لینک از نظر مسیر و هدف
لینکها بر اساس مقصد و نوع محتوایی که روی آن قرار میگیرند، به دستههای مختلفی تقسیم میشوند. درک این دستهبندی برای هر کاربر وب ضروری است.
| نوع لینک | توضیح | مثال روزمره |
|---|---|---|
| لینک داخلی | به صفحهٔ دیگری در همان وبسایت اشاره دارد. | کلیک روی «دربارهٔ ما» در یک وبسایت خبری |
| لینک خارجی | به صفحهای در وبسایتی دیگر اشاره دارد. | کلیک روی لینک یک مقاله در ویکیپدیا که به منبع دیگری ارجاع میدهد |
| لینک تصویری | یک تصویر به جای متن، نقش پیوند را بازی میکند. | کلیک روی لوگوی یک وبسایت برای بازگشت به صفحهٔ اصلی |
| لینک لنگر (کمانی) | به بخش خاصی از همان صفحه هدایت میکند. | کلیک روی «رفتن به بالا» در انتهای یک صفحهٔ بلند |
یک مثال عینی: فرض کنید در حال مطالعهٔ مقالهای در یک وبسایت علمی هستید. نام نویسنده به صورت یک لینک آبی رنگ ظاهر شده است. با کلیک روی آن، به صفحهٔ شخصی نویسنده در همان وبسایت میروید (لینک داخلی). در همان صفحه، ارجاعی به یک پژوهش دیگر دیده میشود که با کلیک روی آن، وبسایت دیگری را باز میکند (لینک خارجی). همچنین یک نمودار تعاملی وجود دارد که خود یک لینک تصویری به ویدئوی توضیحی است.
رنگ و سبک لینکها: چرا بعضی لینکها آبی هستند؟
از زمان پیدایش وب، لینکها اغلب به رنگ آبی و زیرخطدار نمایش داده میشوند تا برای کاربر قابل تشخیص باشند. این قراردادِ طراحی3 به مرور زمان تبدیل به یک استاندارد نانوشته شده است. اما امروزه طراحان وب میتوانند هر رنگی را برای لینکها انتخاب کنند. مهم این است که لینک از متن معمولی قابل تشخیص باشد. معمولاً لینکها در حالت عادی یک رنگ، در زمان قرار گرفتن ماوس روی آنها (هاور) رنگی دیگر و پس از کلیک (بازدید شده) رنگی متفاوت پیدا میکنند.
به عنوان مثال، در این مقاله رنگ تأکید برای لینکها طلایی در نظر گرفته شده است، اما شما میتوانید در هر صفحهای با نگاه کردن به رنگ و زیرخط، لینکها را شناسایی کنید. حتی گاهی لینکها به صورت دکمه طراحی میشوند که نمونهٔ آن دکمهٔ «بیشتر بدانید» در بسیاری از وبسایتهاست.
کاربرد عملی: چگونه از لینک در نوشتههای خود استفاده کنیم؟
فرض کنید یک دانشآموز دبیرستانی هستید و میخواهید یک تحقیق آنلاین دربارهٔ «گرانش» بنویسید. شما میتوانید برای ارجاع به منابع معتبر، از لینکهای خارجی استفاده کنید. همچنین میتوانید در فهرست ابتدای تحقیق خود، لینکهای لنگر بسازید که خواننده را مستقیماً به بخشهای مختلف (مقدمه، فرمولها، آزمایشها) ببرد. این کار باعث میشود نوشتهٔ شما حرفهایتر و کاربردیتر به نظر برسد.
یک مثال دیگر را در نظر بگیرید: معادلهٔ قانون جهانی گرانش نیوتون به صورت $ F = G \frac{m_1 m_2}{r^2} $ است. اگر در مقالهٔ وبلاگ خود این فرمول را نوشتهاید، میتوانید نام هر متغیر (مثلاً G) را به صفحهای که توضیح میدهد ثابت جهانی گرانش چیست، لینک کنید. این کار باعث افزایش اعتبار و عمق محتوای شما میشود.
چالشهای مفهومی پیرامون لینک
پاسخ: خیر. ممکن است یک متن با جاوااسکریپت کلیکپذیر شده باشد اما خاصیت اصلی لینک (که مرورگر را به آدرس جدیدی هدایت کند) را نداشته باشد. لینک حتماً باید حاوی آدرس مقصد (از طریق ویژگی href) باشد.
پاسخ: لینک مطلق4 شامل آدرس کامل (از https:// تا انتها) است. لینک نسبی5 فقط مسیر فایل را نسبت به صفحهٔ فعلی مشخص میکند. مثلاً /contact.html یک لینک نسبی است.
پاسخ: مرورگرها لینکهایی را که قبلاً کلیک کردهاید (بازدید شده) معمولاً به رنگ بنفش نشان میدهند تا شما را از بازدید قبلی آگاه کنند. این رفتار را میتوان با استفاده از سیاساس تغییر داد.
پاورقیها
1 معادل انگلیسی: Link یا Hyperlink. به معنای ارتباط بین دو منبع دیجیتال.
2 معادل انگلیسی: HTML (HyperText Markup Language) زبان نشانهگذاری ابرمتن، زبان استاندارد برای ساخت صفحات وب.
3 قرارداد طراحی (Design Convention): روشی پذیرفته شده و معمول در طراحی رابط کاربری که کاربران به آن عادت کردهاند.
4 لینک مطلق (Absolute Link): لینکی که آدرس کامل و مطلق یک منبع را شامل پروتکل (http/https) و نام دامنه مشخص میکند.
5 لینک نسبی (Relative Link): لینکی که مسیر را نسبت به موقعیت فایل فعلی مشخص میکند و کوتاهتر است.