در مقاله‌های قبلی با ساختار صفحات HTML و نحوه قرار دادن و سازمان‌دهی محتوای متنی در یک صفحه وب آشنا شدیم. اما صفحات یک وب‌سایت معمولاً به صورت جداگانه و بدون ارتباط با یکدیگر ساخته نمی‌شوند؛ بلکه با استفاده از لینک‌ها به هم متصل می‌شوند و کاربر می‌تواند از یک صفحه به صفحه دیگر، یک سایت به سایت دیگر یا حتی به بخش مشخصی از همان صفحه منتقل شود. برای ایجاد این ارتباط‌ها در HTML از تگ <a> و Attribute مهم href استفاده می‌کنیم و برای مشخص کردن مقصد لینک نیز باید با مفهوم مسیرها و ساختار پوشه‌ها آشنا باشیم. در این مقاله ابتدا با نحوه ایجاد لینک و کاربرد href آشنا می‌شویم و سپس مسیرهای نسبی و مطلق، لینک‌دهی بین صفحات یک سایت، باز کردن لینک در تب جدید، ایجاد لینک به بخش‌های مختلف یک صفحه و همچنین لینک‌های ایمیل و تماس تلفنی را با مثال‌های ساده بررسی می‌کنیم تا بتوانیم صفحات مختلف یک وب‌سایت را به شکل صحیح و اصولی به یکدیگر متصل کنیم.

در این مقاله یاد می‌گیریم:

• لینک چیست؟

• چگونه در HTML لینک ایجاد کنیم؟

• تگ a چیست؟

• Attribute به نام href چه کاربردی دارد؟

• چگونه به یک سایت دیگر لینک بدهیم؟

• چگونه بین صفحات سایت خودمان لینک ایجاد کنیم؟

• مسیر نسبی و مسیر مطلق چیست؟

• چگونه لینک را در تب جدید باز کنیم؟

• مسیر فایل‌ها در HTML چگونه نوشته می‌شود؟

لینک چیست؟

لینک (Link) یا پیوند، راهی برای ارتباط دادن یک صفحه یا منبع به صفحه یا منبع دیگر است.

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

صفحه اصلی
دوره‌ها
مقالات
درباره ما
تماس با ما

وقتی روی «مقالات» کلیک می‌کنید، به صفحه مقالات منتقل می‌شوید.

در واقع یک لینک می‌تواند کاربر را به مقصد دیگری هدایت کند.

این مقصد می‌تواند:

• یک صفحه دیگر از همان سایت باشد.

• یک سایت دیگر باشد.

• یک فایل باشد.

• بخشی از همان صفحه باشد.

• یک آدرس ایمیل باشد.

در ادامه با مهم‌ترین حالت‌ها آشنا خواهیم شد.

ساخت لینک در HTML

برای ایجاد لینک در HTML از تگ <a> استفاده می‌کنیم.

برای مثال:

<a href="https://example.com">مشاهده سایت</a>

در این کد:

<a>

تگی برای ایجاد لینک است.

و:

href="https://example.com"

مشخص می‌کند لینک باید به چه مقصدی برود.

متن:

مشاهده سایت

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

Attribute به نام href

در مقاله سوم با Attribute آشنا شدیم.

در تگ لینک، یکی از مهم‌ترین Attributeها href است. href مشخص می‌کند مقصد لینک کجاست.

برای مثال:

<a href="https://www.google.com">Google</a>

وقتی کاربر روی Google کلیک کند، مرورگر به آدرسی که داخل href قرار گرفته می‌رود.

بنابراین می‌توانیم ساختار یک لینک را این‌گونه ببینیم:

تگ لینک
   ↓
<a href="آدرس مقصد">
        ↓
   متن قابل کلیک
        ↓
</a>

اولین لینک خودمان

یک فایل HTML ایجاد کنید و کد زیر را داخل آن قرار دهید:

<!DOCTYPE html>
<html>

<head>
    <title>لینک‌ها</title>
</head>

<body>

    <h1>لینک‌های من</h1>

    <a href="https://benoservice.ir">
        ورود به سایت
    </a>

</body>

</html>

فایل را ذخیره کرده و در مرورگر باز کنید.

متن:

ورود به سایت

به صورت یک لینک نمایش داده می‌شود.

با کلیک روی آن، مرورگر تلاش می‌کند آدرس موجود در href را باز کند.

لینک به یک سایت دیگر

اگر بخواهیم کاربر را به یک سایت دیگر منتقل کنیم، می‌توانیم آدرس کامل آن سایت را در href قرار دهیم.

مثلاً:

<a href="https://www.wikipedia.org">
    ویکی‌پدیا
</a>

یا:

<a href="https://www.google.com">
    Google
</a>

در این حالت از یک آدرس کامل استفاده کرده‌ایم.

به چنین آدرسی معمولاً URL کامل یا آدرس مطلق گفته می‌شود.

مسیر یا Path چیست؟

برای درک لینک‌های داخلی، باید با مفهوم مسیر (Path) آشنا شویم.

فرض کنید پروژه ما ساختار زیر را دارد:

website
│
├── index.html
├── about.html
└── contact.html

در این پروژه سه فایل HTML داریم.

اگر بخواهیم از index.html به about.html لینک بدهیم، می‌توانیم بنویسیم:

<a href="about.html">
    درباره ما
</a>

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

مرورگر متوجه می‌شود که فایل about.html در مسیر موردنظر قرار دارد.

لینک بین دو صفحه سایت

فرض کنید فایل‌های زیر را داریم:

website
│
├── index.html
├── about.html
└── contact.html

داخل index.html می‌توانیم بنویسیم:

<h1>صفحه اصلی</h1>

<a href="about.html">
    درباره ما
</a>

<a href="contact.html">
    تماس با ما
</a>

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

ساختار سایت ما به شکل ساده:

index.html
   │
   ├── about.html
   │
   └── contact.html

است.

لینک برگشت به صفحه اصلی

اگر داخل about.html باشیم و بخواهیم یک لینک برای برگشت به صفحه اصلی ایجاد کنیم:

<a href="index.html">
    صفحه اصلی
</a>

به همین سادگی.

بنابراین لینک‌ها می‌توانند صفحات مختلف یک سایت را به یکدیگر متصل کنند.

مسیر نسبی چیست؟

وقتی مقصد را نسبت به فایل فعلی مشخص می‌کنیم، از یک مسیر نسبی (Relative Path) استفاده کرده‌ایم.

مثلاً:

<a href="about.html">
    درباره ما
</a>

در اینجا مرورگر به دنبال about.html در مسیر مرتبط با فایل فعلی می‌گردد.

مسیرهای نسبی برای فایل‌ها و صفحات داخل پروژه بسیار پرکاربرد هستند.

یک پوشه جدید ایجاد کنیم

حالا فرض کنید ساختار پروژه ما کمی بزرگ‌تر شده است:

website
│
├── index.html
│
├── pages
│   ├── about.html
│   └── contact.html
│
└── images
    └── logo.png

حالا about.html داخل پوشه pages قرار دارد.

اگر بخواهیم از index.html به about.html لینک بدهیم، باید مسیر پوشه را نیز مشخص کنیم:

<a href="pages/about.html">
    درباره ما
</a>

یعنی:

index.html
   ↓
pages
   ↓
about.html

برگشت به پوشه قبلی با ..

حالا برعکس این حالت را در نظر بگیرید.

ما داخل:

pages/about.html

هستیم و می‌خواهیم به:

index.html

برگردیم.

برای رفتن به پوشه بالاتر از:

..

استفاده می‌کنیم.

پس می‌نویسیم:

<a href="../index.html">
    صفحه اصلی
</a>

.. یعنی یک سطح به پوشه بالاتر برو.

ساختار را این‌گونه تصور کنید:

website
│
├── index.html
│
└── pages
    └── about.html

از about.html:

../

ما را به پوشه website برمی‌گرداند.

سپس:

../index.html

به فایل index.html اشاره می‌کند.

چند سطح برگشت

اگر چند پوشه تو در تو داشته باشیم، می‌توانیم چند بار از .. استفاده کنیم.

مثلاً:

website
│
├── index.html
│
└── pages
    └── articles
        └── html
            └── article.html

اگر از article.html بخواهیم به index.html برویم، باید چند سطح به عقب برگردیم:

<a href="../../../index.html">
    صفحه اصلی
</a>

هر .. یک سطح به عقب می‌رود.

البته در پروژه‌های واقعی بهتر است ساختار پوشه‌ها را از ابتدا منظم طراحی کنیم تا مسیرها بیش از حد پیچیده نشوند.

مسیر مطلق چیست؟

گاهی به جای مسیر نسبی، آدرس کامل مقصد را می‌نویسیم.

مثلاً:

<a href="https://example.com/about">
    درباره ما
</a>

این یک آدرس کامل است.

تفاوت ساده این دو:

مسیر نسبی
about.html

آدرس کامل
https://example.com/about

مسیر نسبی معمولاً برای فایل‌ها و صفحات داخل پروژه خودمان کاربرد دارد.

آدرس کامل معمولاً برای لینک دادن به سایت‌ها یا منابع دیگر استفاده می‌شود.

تفاوت URL و Path

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

URL آدرس یک منبع در وب است.

مثلاً:

https://example.com/about

اما Path معمولاً به مسیر یک فایل یا منبع نسبت به یک موقعیت اشاره می‌کند.

مثلاً:

pages/about.html

در این مرحله لازم نیست وارد جزئیات فنی URLها شوید.

فقط این تفاوت ساده را به خاطر بسپارید:

URL
→ آدرس کامل

Path
→ مسیر دسترسی به فایل یا منبع

باز کردن لینک در تب جدید

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

اما گاهی می‌خواهیم لینک در یک تب جدید باز شود.

برای این کار می‌توانیم از Attribute زیر استفاده کنیم:

target="_blank"

مثلاً:

<a href="https://example.com" target="_blank">
    باز کردن سایت
</a>

در این حالت مرورگر معمولاً مقصد را در یک تب جدید باز می‌کند.

یک نکته مهم درباره target

وقتی از:

target="_blank"

استفاده می‌کنیم، بهتر است برای لینک‌های خارجی از ویژگی‌های امنیتی مناسب نیز استفاده شود.

در HTML مدرن معمولاً می‌توان نوشت:

<a
    href="https://example.com"
    target="_blank"
    rel="noopener noreferrer">
    باز کردن سایت
</a>

در این مرحله لازم نیست جزئیات rel را حفظ کنید.

فقط بدانید که هنگام باز کردن لینک خارجی در تب جدید، استفاده از این الگو انتخاب مناسبی است.

لینک به یک بخش از همان صفحه

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

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

برای این کار از id استفاده می‌کنیم.

مثلاً:

<h2 id="contact">
    تماس با ما
</h2>

حالا می‌توانیم یک لینک ایجاد کنیم:

<a href="#contact">
    رفتن به بخش تماس با ما
</a>

وقتی کاربر روی لینک کلیک کند، مرورگر به عنصری که id آن برابر با contact است می‌رود.

ساختار ساده آن:

لینک
  ↓
#contact
  ↓
عنصر دارای id="contact"

چرا # استفاده می‌کنیم؟

در این کد:

<a href="#contact">
    تماس با ما
</a>

علامت:

#

مشخص می‌کند که می‌خواهیم به یک بخش مشخص از همان صفحه برویم.

و:

contact

نام id مقصد است.

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

<h2 id="contact">
    تماس با ما
</h2>

بنابراین این دو باید با یکدیگر هماهنگ باشند.

لینک به ایمیل

HTML امکان ایجاد لینک برای ارسال ایمیل را نیز فراهم می‌کند.

برای این کار می‌توانیم از:

<a href="mailto:example@example.com">
    ارسال ایمیل
</a>

استفاده کنیم.

وقتی کاربر روی آن کلیک کند، سیستم می‌تواند برنامه ایمیل پیش‌فرض را باز کند.

ساختار:

mailto:
   +
آدرس ایمیل

است.

در پروژه‌های واقعی ممکن است روش‌های دیگری نیز برای ارتباط با کاربران استفاده شود، اما این روش برای آشنایی با قابلیت HTML کافی است.

لینک برای تماس تلفنی

می‌توان از لینک برای شماره تلفن نیز استفاده کرد.

مثلاً:

<a href="tel:+989033613644">
    تماس با ما
</a>

در دستگاه‌هایی که قابلیت تماس دارند، این لینک می‌تواند برنامه تماس را باز کند.

برای وب‌سایت‌های موبایل این قابلیت بسیار کاربردی است.

متن لینک باید مناسب باشد

وقتی لینک ایجاد می‌کنیم، بهتر است متن لینک برای کاربر واضح باشد.

مثلاً:

<a href="about.html">
    اینجا کلیک کنید
</a>

کار می‌کند، اما اطلاعات زیادی درباره مقصد به کاربر نمی‌دهد.

بهتر است بنویسیم:

<a href="about.html">
    درباره ما
</a>

یا:

<a href="about.html">
    آشنایی با تیم ما
</a>

یعنی کاربر قبل از کلیک کردن متوجه شود لینک به کجا می‌رود.

یک منوی ساده

حالا می‌توانیم چیزهایی را که یاد گرفتیم کنار هم قرار دهیم.

فرض کنید ساختار پروژه این است:

website
│
├── index.html
├── about.html
└── contact.html

در index.html می‌توانیم بنویسیم:

<h1>وب‌سایت من</h1>

<a href="index.html">
    صفحه اصلی
</a>

<a href="about.html">
    درباره ما
</a>

<a href="contact.html">
    تماس با ما
</a>

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

در مقالات آینده یاد می‌گیریم چگونه چنین لینک‌هایی را با CSS به یک منوی زیبا و حرفه‌ای تبدیل کنیم.

اشتباهات رایج در لینک‌ها

هنگام ایجاد لینک مراقب باشید مرتکب اشتباهات زیر نشوید:

اشتباه اول: فراموش کردن href

مثلاً:

<a>درباره ما</a>

اینجا مقصد لینک مشخص نشده است.

باید مثلاً بنویسیم:

<a href="about.html">
    درباره ما
</a>

اشتباه دوم: اشتباه نوشتن مسیر

فرض کنید فایل ما این ساختار را دارد:

website
│
├── index.html
└── pages
    └── about.html

اگر در index.html بنویسیم:

<a href="about.html">
    درباره ما
</a>

مرورگر در مسیر فعلی به دنبال about.html می‌گردد.

اما فایل داخل پوشه pages است.

پس مسیر صحیح:

<a href="pages/about.html">
    درباره ما
</a>

است.

اشتباه سوم: استفاده از / به جای مسیر صحیح

مسیرها باید متناسب با ساختار پروژه نوشته شوند.

اگر فایل مقصد داخل یک پوشه باشد:

<a href="pages/about.html">
    درباره ما
</a>

اگر یک سطح بالاتر باشد:

<a href="../index.html">
    صفحه اصلی
</a>

درک ساختار پوشه‌ها یکی از مهارت‌های مهم در کار با فایل‌های وب است.

تمرین عملی اول

یک پروژه با ساختار زیر ایجاد کنید:

my-website
│
├── index.html
├── about.html
└── contact.html

داخل index.html یک عنوان و سه لینک قرار دهید:

صفحه اصلی
درباره ما
تماس با ما

سپس در about.html یک لینک برای برگشت به صفحه اصلی ایجاد کنید.

در contact.html نیز یک لینک برای برگشت به صفحه اصلی قرار دهید.

در نهایت باید بتوانید بین هر سه صفحه جابه‌جا شوید.

تمرین عملی دوم

حالا ساختار پروژه را کمی تغییر دهید:

my-website
│
├── index.html
│
└── pages
    ├── about.html
    └── contact.html

حالا لینک‌های index.html را اصلاح کنید تا به فایل‌های داخل پوشه pages اشاره کنند.

سپس در about.html و contact.html لینک برگشت به index.html ایجاد کنید.

برای این کار باید از:

..

استفاده کنید.

تمرین چالشی

یک صفحه طولانی ایجاد کنید که شامل این بخش‌ها باشد:

معرفی سایت

درباره ما

خدمات ما

محصولات

تماس با ما

هر بخش را با یک عنوان مشخص کنید و برای آن id قرار دهید.

مثلاً:

<h2 id="about">درباره ما</h2>

در ابتدای صفحه یک فهرست لینک ایجاد کنید:

<a href="#about">درباره ما</a>
<a href="#services">خدمات ما</a>
<a href="#products">محصولات</a>
<a href="#contact">تماس با ما</a>

حالا با کلیک روی هر لینک، باید به بخش مربوطه منتقل شوید.

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

جمع‌بندی

در این مقاله با یکی از مهم‌ترین قابلیت‌های HTML یعنی لینک‌ها آشنا شدیم.

یاد گرفتیم:

• لینک چیست.

• چگونه با تگ a لینک ایجاد کنیم.

• href چه کاربردی دارد.

• چگونه به سایت‌های دیگر لینک بدهیم.

• چگونه بین صفحات سایت خودمان ارتباط ایجاد کنیم.

• مسیر نسبی چیست.

• مسیر مطلق چیست.

• چگونه با .. به پوشه قبلی برگردیم.

• چگونه لینک را در تب جدید باز کنیم.

• target="_blank" چه کاربردی دارد.

• چگونه به یک بخش مشخص از همان صفحه لینک بدهیم.

• چگونه با mailto: لینک ایمیل ایجاد کنیم.

• چگونه با tel: لینک تماس تلفنی ایجاد کنیم.

• چرا متن لینک باید واضح و قابل فهم باشد.

مهم‌ترین ساختاری که امروز یاد گرفتیم این است:

<a href="آدرس مقصد">
    متن لینک
</a>

و برای لینک به یک فایل دیگر در پروژه:

<a href="pages/about.html">
    درباره ما
</a>

و برای رفتن به یک بخش از همان صفحه:

<a href="#contact">
    تماس با ما
</a>

حالا می‌توانیم صفحات مختلف یک سایت را به یکدیگر متصل کنیم.

در مقاله بعدی سراغ تصاویر و محتوای چندرسانه‌ای در HTML می‌رویم و یاد می‌گیریم چگونه تصویر، صوت و ویدئو را در صفحات وب قرار دهیم.