وبلاگ

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

برای ایجاد یک پیوند، از تگ a استفاده می‌کنیم. این تگ دارای یک صفت مهم href است که تعیین می‌کند به کدام صفحه ارجاع صورت گیرد. یا به عبارتی باید به کدام آدرس وب منتقل شویم. حالت پیش‌فرض نمایش پیوندها در اکثر مرورگرها، به صورت زیرخط‌دار و رنگ فونت آبی است. مگر اینکه با دستورات CSS تغییر یابد. همچنین پیوندهایی که قبلا کاربر روی آنها کلیک کرده و بازدید شده معمولا به رنگ قلم بنفش نمایش داده می‌شود.

ساختار کلی یک تگ پیوند به شرح زیر است :

<a href="آدرس صفحه وب">
  متن یا محتوای قابل نمایش به کاربر
</a>

همانگونه که مشاهده می‌کنید بین تگ‌های آغاز و پایان a، فقط متن قرار نمی‌گیرد. شما می‌توانید هر محتوایی مثل اجزا و اشیای صفحات وب را نیز درون تگ a قرار دهید. مثلا می‌توانید یک تگ عکس (img) را آنجا قرار دهید تا کاربر با کلیک روی عکس به صفحه مورد نظر هدایت شود.

<a href="https://kelaseno.ir">
  <img src="images/logo.jpg" />
</a>

صفت href

پیوند ارجاع به صفحه وب

در صفت href باید یک URL نوشته شود. URLها همان آدرس‌های صفحات اینترنتی هستند که در قسمت نوار آدرس مرورگرها مشاهده می‌کنید.

یک آدرس URL، می‌تواند به صورت نسبی یا مطلق تعریف شود. آدرس نسبی که در واقع آدرس صفحه نسبت به صفحه جاری و پیش روی ماست. این روش آدرس‌دهی بیشتر در درون صفحات داخلی خود سایت به کار می‌رود. به مثال زیر توجه کنید :

<a href="./second.html">
 Second Page
</a>

آدرس مطلق باید تماما ساختار یک آدرس URL را داشته باشد. معمولا برای این کار در آغاز آدرس، از عبارت http یا https استفاده می‌شود :

<a href="https://kelaseno.ir/second.html">
 Second Page
</a>

ولی این صفت کاربردهای بسیار بیشتری نیز دارد. می‌توان به جای URL، از شماره تلفن، آدرس پست الکترونیک و … استفاده کرد.

پیوند شماره تلفن تماس

اگر کاربر از مرورگر موبایل استفاده نماید، با کلیک روی لینک مورد نظر، صفحه شماره‌گیری موبایل باز شده و تلفن درون صفت href در صفحه نمایش داده می‌شود. نحوه تعریف آن به حالت زیر است :

<a href="tel:09123456789">
  تماس
</a>

پیوند آدرس پست الکترونیک

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

<a href="mailto:contact@kelaseno.ir">
  پست الکترونیک
</a>

حتی این قابلیت وجود دارد که بتوانید عنوان، گیرنده و متن محتوای ایمیل را نیز وارد نمایید (هر چند از نظر امنیتی این کار توصیه نمی‌شود). به این صورت که علاوه بر دریافت‌کنندگان ایمیل، اطلاعاتی مثل موضوع و متن محتوا را به صورت پارامترهای URL در مقدار href درج می‌کنیم.

نکته : برای درک بهتر ساختار URL و پارامترهای آن این مقاله را مطالعه نمایید.

<a href="
         mailto:contact@kelaseno.ir?
         subject=my-subject&
         body=my-body-content&
         cc=another1@kelaseno.ir&
         bcc=another2@kelaseno.ir
         ">
  پست الکترونیک
</a>

در قطعه کد بالا، برای درک بهتر، قسمت‌های مختلف مقدار صفت href در چند خط مجزا تعریف شده‌اند که به شرح زیر هستند :

mailto

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

subject

موضوع ایمیل ارسالی است. یعنی گیرنده با چه عنوانی این ایمیل را در فهرست دریافت (Inbox) خود خواهد دید.

body

بدنه محتوای اصلی پیام ایمیل می‌باشد که معمولا در این حالت، فقط متن و در برخی موارد لینک‌های ساده را می‌توان ارسال کرد.

cc

به معنی کپی کاربنی (Carbon Copy) است که در واقع یک نسخه رونوشت (کپی) از ایمیل ارسالی به دریافت‌کننده اصلی را به فرد گیرنده دیگری ارسال می‌نماید.

bcc

به معنی Blind Carbon Copy است که همانند cc است با این تفاوت که در حالت cc دریافت‌کننده اصلی از ارسال رونوشت به شخص دیگر آگاه می‌شود ولی در bcc رونوشت بدون اطلاع دریافت‌کننده اصلی به فرد دیگر ارسال می‌شود.

غیر از صفت href، تگ‌های لینک چند صفت غیر اصلی نیز دارند که عبارتند از :

صفت target

این صفت نحوه باز شدن صفحه وبی که ارجاع به آن صورت می‌گیرد را تعیین می‌کند و چند مقدار ثابت دریافت می‌کند که شامل موارد زیر است :

self_

صفحه وب مورد نظر را در همان زبانه (Tab) جاری از پنجره مرورگر باز می‌کند. این مقدار پیش‌فرض بوده و در صورتی که صفت target تعریف نشود نیز صفحه مقصد را در زبانه جاری باز می‌کند.

blank_

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

top_

در مبحث فریم‌ها مانند تگ iframe که باعث ایجاد یک فریم خارجی درون صفحه وب می‌شود کاربرد دارد و باعث می‌شود صفحه وب مقصد در پنجره اصلی (فریم ریشه) باز شود.

parent_

همانند top_ است با این تفاوت که صفحه وب مقصد را در فریم بالادستی باز می‌کند.

نکته : برای شناخت بیشتر مقدارهای top_ و parent_ مبحث تگ فریم را مطالعه بفرمایید.

صفت title

این صفت که یکی از صفت‌های Global است همان کارایی همیشگی خود را دارد و بهتر است برای لینک‌ها استفاده شود. این صفت باعث نمایش یک کادر کوچک متنی (Tooltip) با بردن ماوس روی محتوای داخل لینک می‌شود.

صفت rel

برای تعیین نوع نسبت صفحه هدف با صفحه جاری ما می‌شود. این صفت از صفت‌های استاندارد HTML نیست ولی برای امور سئو در برخی موتورهای جستجو مانند گوگل در خصوص پیوندهای همسو (Cross Friends Network : XFN) کاربرد دارد. همچنین می‌توان از عبارت nofollow، noreferrer، noopener و یا sponsored نیز برای مقادیر این صفت استفاده کرد.

صفت download

این صفت تعیین می‌کند که مقصد پیوند مورد نظر، یک فایل است و باید با کلیک روی آن عمل بارگیری (Download) روی کامپیوتر کاربر صورت گیرد. این یک صفت بدون مقدار است.

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