درس چهاردهم: لینک‌دهی داخلی و ساخت منوی ساده در HTML

اموزش رایگان HTML

مقدمه

لینک‌دهی (یا همون لینک‌سازی) یکی از مهم‌ترین کارهای HTML هست. فقط با چند خط می‌تونی بین صفحات مختلف سایتت جابجا بشی یا حتی بخش‌های مختلف یک صفحه رو به هم مرتبط کنی!
در این درس با دو چیز آشنا می‌شی:

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

۱. ساخت لینک داخلی بین صفحات سایت

برای این کار فقط کافیست از تگ <a> (Anchor) استفاده کنی و آدرس صفحه مورد نظر رو توی ویژگی href بنویسی.

مثال:

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

کاربر با کلیک روی این نوشته می‌ره به صفحه about.html
اینطوری برای همه صفحات می‌سازی:

<a href="index.html">خانه</a> |
<a href="about.html">درباره ما</a> |
<a href="contact.html">تماس با ما</a>

بین هر لینک هم می‌تونی یک خط عمودی (|) بذاری تا شبیه منو بشه.

۲. لینک به بخش‌های داخل یک صفحه (لنگر یا anchor)

اگر صفحه‌ات طولانیه، می‌تونی برای هر بخش یک شناسه (id) بزاری و با لینک، کاربر رو مستقیماً به اونجا ببری.

مثال کاربردی:

<ul>
  <li><a href="#section1">بخش اول</a></li>
  <li><a href="#section2">بخش دوم</a></li>
</ul>

<h2 id="section1">بخش اول</h2>
<p>متن بخش اول...</p>

<h2 id="section2">بخش دوم</h2>
<p>متن بخش دوم...</p>

اگه کاربر روی “بخش دوم” کلیک کنه، مستقیماً می‌ره سراغ h2 با id=section2.

۳. ساخت یک منوی ساده (Navigation Menu)

یک منوی ابتدایی معمولاً همین لینک‌های داخلی هستن که کنار هم چیده می‌شن. برای مرتب بودن منو، بهتره داخل تگ <nav> و به صورت یک لیست بنویسی:

<nav>
  <ul>
    <li><a href="index.html">خانه</a></li>
    <li><a href="about.html">درباره ما</a></li>
    <li><a href="contact.html">تماس با ما</a></li>
  </ul>
</nav>

می‌تونی با CSS هم خوشگل‌ترش کنی (در درس‌های بعدی با CSS بیشتر کار می‌کنیم).

مثال کامل یک منوی ساده با لینک داخلی و لینک به بخش‌های صفحه

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <title>منوی ساده سایت من</title>
</head>
<body>
  <!-- منو با لینک به صفحات دیگر و بخش داخلی همین صفحه -->
  <nav>
    <a href="index.html">خانه</a> |
    <a href="about.html">درباره ما</a> |
    <a href="#faqs">سوالات متداول</a>
  </nav>

  <h1>خانه</h1>
  <p>خوش آمدید به سایت ما</p>

  <h2 id="faqs">سوالات متداول</h2>
  <p>در این بخش به سوالات رایج پاسخ داده می‌شود.</p>
</body>
</html>

نکته سریع

  • لینک خارجی (به سایت دیگه) با آدرس اینترنتی (https://...) ساخته می‌شه.
  • برای باز شدن لینک در برگه جدید، از target="_blank" استفاده کن:
  <a href="https://google.com" target="_blank">گوگل</a>

تمرین برای شما

یک صفحه بساز (مثلاً about.html) و یک منوی ناوبری ساده با سه لینک داخلی و یک لینک به یک بخش پایین‌تر همین صفحه درست کن.

محمد وب‌سایت
مطالب مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *