درست کردن لینک در اچ تی ام ال

همانطور که از نام HTML(Hyper Text Markup Language) مشخص است، لینک ها در زبان اچ تی ام ال از اهمیت بالایی برخوردار هستند. با کلیک کردن بر روی یک لینک، به منبع (آدرس) مربوط به آن لینک هدایت می شویم. در صفحه وب هنگامی که بر روی یک لینک قرار می گیریم نشانگر موس از حالت عادی به یک دست تبدیل می شود (که البته با استفاده از CSS می توان این حالت را تغییر داد).
این نکته را در نظر داشته باشید که یک لینک حتما نباید متن باشد. یک تصویر یا هر عنصر دیگر اچ تی ام ال را می توانیم تبدیل به لینک کنیم.

دستور زبان مربوط به لینک

همانطور که قبلا هم اشاره کردم، برای درست کردن یک لینک در فایل اچ تی ام ال از تگ <a> استفاده می کنیم:

<a href="url">متن مربوط به لینک</a>

با استفاده از خصیصه href مقصد (آدرس) مربوط به لینک را مشخص می کنیم؛ متنی که بین تگهای آغازین و پایانی نوشته می شود، متنی است که کاربر مشاهده می کند و با کلیک کردن بر روی آن می تواند به آدرس مربوطه برود.
برای ایجاد لینک های محلی (Local links) نیز از همین تگ <a> استفاده می کنیم. منظور از لینک محلی، لینک به آدرسی است که در مکانی مشابه مکان فایل فعلی – که کاربر در حال مشاهده آن است – قرار دارد. البته نه الزاما در همان پوشه؛ این فایل می تواند در پوشه (هایی) پایین تر یا بالاتر از فایل فعلی قرار داشته باشد، اما بر روی همان سروری است که فایل فعلی در حال اجراست. در لینک قبلی دیدیم که در قسمت آدرس از یک url استفاده کردیم، اما در مورد لینک های محلی نیازی نیست که از یک آدرس url استفاده کنیم (یعنی لازم نیست در ابتدای آدرس http:// یا https:// یا چیزی مشابه آن قرار دهیم).
در مثال زیر، لینک به صفحه ای اشاره می کند که در همان پوشه صفحه فعلی قرار دارد:

<a href="sample_page.php">آموزش پی اچ پی</a>

خصیصه target

در تگ <a> می توانیم با استفاده از خصیصه target مشخص کنیم که آدرس مشخص شده در لینک به چه صورت و در کجا باز شود. مقادیر مربوط به این خصیصه به شرح زیر هستند:

• _blank: سند لینک شده در یک پنجره یا تب جدید باز می شود.
• _self: سند لینک شده در پنجره/ یا تبی مشابه پنجره اصلی باز می شود. یعنی در همان پنجره ای که کاربر در آن قرار دارد – این مقدار، مقدار پیش فرض برای این خصیصه است
• _parent: سند لینک شده را در فریم والد پنجره باز می کند.
• _top: سند لینک شده را در حالت تمام صفحه (full body) مربوط به پنجره باز می کند.
• framename: سند لینک شده را در یک فریم که نام آن اشاره شده است باز می کند.

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

<a href="http://www.samplesite.com/" target="_blank">لینک به صفحه مورد نظر</a>

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

<a href="https://www.samplesite.com/samplecat/" target="_top">لینک مربوط به صفحه</a>

تبدیل کردن یک تصویر به یک لینک

خیلی وقتها ممکن است که بخواهیم یک تصویر را به یک لینک تبدیل کنیم. در این حالت به شکل زیر عمل می کنیم (از خصیصه href استفاده می کنیم):

<a href="home.php">
  <img src="sample.png" alt="صفحهاول">
</a>

در IE9 و نسخه های قبل تر از آن، اگر یک تصویر را به صورت لینک نمایش دهیم، مرورگر به صورت خودکار یک حاشیه در اطراف تصویر ایجاد می کند. برای اینکه این اتفاق پیش نیاید می توانیم ویژگی border را با صفر مقدار دهی کنیم (style="border:0;").

ایجاد یک bookmark یا نشانه در قسمتی از صفحه

ممکن است لازم باشد در قسمتی از صفحه لینکی را ایجاد کنیم که کاربر را به قسمتی از همان صفحه منتقل کند؛ مثلا فرض کنید در یک صفحه که شامل چند پاراگراف با موضوعات مختلف است، می خواهیم در ابتدای صفحه چیزی شبیه به فهرست مندرجات ایجاد کنیم که با استفاده از لینکهای ایجاد شده در فهرست مندرجات، کاربر را به راحتی به قسمت مورد نظرش هدایت کنیم. برای این کار باید از bookmark استفاده کنیم.
برای اینکار ابتدا باید bookmark را ایجاد کنیم و پس از آن در هر نقطه ای که تمایل داشتیم، لینکی به بوکمارک ایجاد شده برقرار می کنیم. برای ایجاد بوکمارک از خصیصه id استفاده می کنیم. مثلا یک عنوان را با یک id خاص مقدار دهی می کنیم:

<h1 id="first_title"></h1>

حالا در همان صفحه ای که عنوان بالا قرار دارد می توانیم به شکل زیر لینکی به عنوان مشخص شده ایجاد کنیم:

<a href="#first_title">عنوان اول</a>