پیوند: چیزی که وب را وب کرد — ترم ۱ آیرو

در این فصل چه می‌سازی#

تا اینجا صفحه‌ات یک جزیره است: باز می‌شود، خوانده می‌شود، تمام. آخر این فصل صفحه‌ات کلماتی دارد که می‌شود رویشان کلیک کرد، و هر کلیک تو را جایی می‌برد — به یک سایت دیگر، یا به نقطه‌ای دیگر از همین صفحه. همین قابلیتِ کلیک‌کردن بود که هزاران صفحهٔ جدا را به هم دوخت و اسمش شد «وب». وب یعنی همین: صفحه‌هایی که با نخِ لینک به هم بسته‌اند.

صفحه‌ای ساده در مرورگر که چند کلمهٔ آن لینک است و یکی‌شان به بخش دیگری از صفحه می‌پرد

آخر این فصل می‌توانی:

یک لینک بسازی که به یک سایت دیگر برود
فرق مسیر نسبی و مطلق را بگویی و بدانی هرکدام کجا به‌کار می‌آید
با #id از یک نقطهٔ صفحه به نقطهٔ دیگرِ همان صفحه بپری
یک لینک را در tab جدید باز کنی و بگویی چرا کنارش rel="noopener" لازم است
متن لینکی بنویسی که بیرون از جمله هم معلوم باشد کجا می‌رود — و بدانی چرا «اینجا کلیک کن» بد است

قبل از شروع#

از فصل ۱: اسکلت کامل صفحه (<!DOCTYPE html>، <head>، <title>، <body>).
از فصل ۲: تیتر <h1> و <h2>، پاراگراف <p>، و اینکه فضای خالی در HTML جمع می‌شود — به این آخری در همین فصل تکیه می‌کنیم.
یک مرورگر. همین.

۱. اولین لینک#

یک لینک دو چیز دارد: متنی که می‌بینی و رویش کلیک می‌کنی، و یک آدرس مقصد که پشتِ آن متن پنهان است. element ای که این دو را کنار هم می‌گذارد <a> است (کوتاه‌شدهٔ anchor)، و آدرس مقصد داخل یک attribute به‌اسم href می‌رود.

در آزمایشگاه، داخل <body> این را بنویس:

<p>
  هر چیزی که یاد می‌گیرم را از
  <a href="https://developer.mozilla.org/">مستندات MDN</a>
  می‌خوانم.
</p>

سه تکه را ببین: <a href="..."> که مقصد را نگه می‌دارد، بعد متنی که کاربر می‌بیند (مستندات MDN)، بعد </a> که لینک را می‌بندد. یادت هست فصل ۲ گفتیم فضای خالی در HTML جمع می‌شود؟ برای همین توانستیم لینک را برای خوانایی به خط بعد ببریم؛ مرورگر همه را یک جمله می‌بیند.

✅ چک کن: باید یک تکه‌متنِ رنگی و زیرخط‌دار ببینی. رویش کلیک کن — مرورگر باید صفحهٔ MDN را باز کند. رنگ و زیرخط را ما نگفتیم؛ مثل فصل‌های قبل، پیش‌فرضِ خودِ مرورگر برای «این یک لینک است».

💡 نکته: یک <a> بدون href هم نوشته می‌شود، ولی لینک واقعی نیست — نه رنگ لینک می‌گیرد، نه کلیک می‌شود، نه با صفحه‌کلید می‌شود به آن رسید. قلبِ لینک href است؛ هیچ‌وقت جا نینداز.

۲. مسیر: مطلق و نسبی#

آدرسی که نوشتیم با https:// شروع می‌شد و کل نشانیِ یک سایت را داشت. به این می‌گویند مسیر مطلق: از هر کجای اینترنت که بازش کنی، دقیقاً به همان‌جا می‌رسی. مسیر مطلق برای رفتن به سایت‌های دیگر است.

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

<a href="about.html">دربارهٔ من</a>          <!-- hamin poushe -->
<a href="pages/contact.html">تماس</a>          <!-- yek poushe paayin-tar -->
<a href="../index.html">صفحهٔ اول</a>          <!-- .. yani yek pele baalaa -->

about.html یعنی «فایلی به این اسم، کنارِ همین فایل». pages/contact.html یعنی «برو داخل پوشهٔ pages، آنجا این فایل هست». و .. یعنی «یک پله برو بالا». چرا نسبی؟ چون اگر روزی کل سایتت را جابه‌جا کنی، لینک‌های نسبی هنوز درست کار می‌کنند؛ فقط برای سایت‌های دیگر مطلق می‌نویسی.

⚠️ مواظب باش: مسیر نسبی فقط وقتی کار می‌کند که فایلِ مقصد واقعاً همان‌جا باشد. اگر آدرس را اشتباه بنویسی یا فایل هنوز ساخته نشده باشد، مرورگر صفحه را پیدا نمی‌کند و پیام «صفحه پیدا نشد» می‌دهد. مسیر یک نشانی است، نه یک آرزو.

۳. پرش داخل همین صفحه با `#id`#

گاهی نمی‌خواهی از صفحه بیرون بروی — می‌خواهی داخل همین صفحهٔ بلند، از بالا مستقیم بپری به یک بخش پایین‌تر. این کار دو قدم دارد.

یک لینک در بالای صفحه با یک فلش خمیده که مستقیم به بخشی در پایینِ همان صفحه می‌پرد

قدم اول: به عنصری که می‌خواهی مقصدِ پرش باشد یک id بده. id یک attribute است که به آن element یک اسمِ یکتا می‌دهد — مثل یک برچسبِ نشانی روی آن نقطهٔ صفحه:

<h2 id="projects">کارهایی که ساخته‌ام</h2>

قدم دوم: یک لینک بساز که href اش با # شروع شود و بعدش همان اسم بیاید. آن # به مرورگر می‌گوید «از صفحه بیرون نرو؛ داخل همین صفحه بپر به عنصری که id اش این است»:

<a href="#projects">کارهایی که ساخته‌ام</a>

حالا کل ساختار را بساز. یک پاراگرافِ «پرش سریع» بالای صفحه، دو تیترِ idدار، و یک لینکِ «بازگشت به بالا». برای لینکِ بازگشت، به‌جای ساختن یک عنصر جدید، به خودِ <body> یک id می‌دهیم:

<body id="top">
  <p>
    از این دو لینک به هر بخش بپر:
    <a href="#projects">کارهایی که ساخته‌ام</a> و
    <a href="#about">دربارهٔ من</a>.
  </p>

  <h2 id="projects">کارهایی که ساخته‌ام</h2>
  <p>اینجا از کارهایم می‌نویسم.</p>

  <h2 id="about">دربارهٔ من</h2>
  <p>و اینجا از خودم.</p>

  <p><a href="#top">بازگشت به بالای صفحه</a></p>
</body>

✅ چک کن: روی «کارهایی که ساخته‌ام» کلیک کن؛ صفحه باید بپرد پایین سرِ همان تیتر. بعد «بازگشت به بالا» را بزن؛ باید برگردی سرِ صفحه.

حالا عمداً خرابش کنیم تا ببینی چقدر این پیوند شکننده است. در همان لینکِ اول، اسم را غلط بنویس — یک حرف جابه‌جا:

<a href="#projcets">کارهایی که ساخته‌ام</a>

رویش کلیک کن. هیچ اتفاقی نمی‌افتد. صفحه تکان نمی‌خورد، نه خطایی، نه پرشی — انگار اصلاً لینک نیست. چون مرورگر دنبال عنصری با id="projcets" می‌گردد و چنین چیزی وجود ندارد (تیترِ تو projects است، نه projcets). لینکِ داخل صفحه دقیقاً به همان اسم گره خورده؛ یک حرفِ اشتباه، و پرش به ناکجا می‌رود.

حالا درستش کن: #projcets را برگردان به #projects و دوباره کلیک کن. باید سرِ جایش بپرد.

🔧 اگر کار نکرد: پرش انجام نشد؟ متنِ داخل href="#..." و متنِ داخل id="..." را کنار هم بگذار و حرف‌به‌حرف مقایسه کن. این‌ها به بزرگی و کوچکی حروف هم حساس‌اند: #About با id="about" یکی نیست.

چالش: این دو لینک چه فرقی دارند؟

اول خودت فکر کن یا امتحان کن — بعد اینجا را باز کن.

۴. باز کردن در tab جدید: `target="_blank"` و `rel="noopener"`#

به‌طور پیش‌فرض وقتی روی لینک کلیک می‌کنی، مقصد در همان tab باز می‌شود و صفحهٔ تو کنار می‌رود. برای لینک‌های داخل سایتِ خودت این درست است. ولی گاهی به یک سایتِ بیرونی لینک می‌دهی و نمی‌خواهی خواننده صفحهٔ تو را از دست بدهد. آنجا می‌گویی در tab جدید باز شود، با attribute ای به‌اسم target:

<a href="https://developer.mozilla.org/" target="_blank" rel="noopener">مستندات MDN دربارهٔ وب</a>

target="_blank" یعنی «این را در یک tab تازه باز کن». ولی کنارش یک چیز دیگر هم هست: rel="noopener". چرا؟

وقتی یک صفحه را با _blank باز می‌کنی، آن صفحهٔ تازه یک دستگیرهٔ کوچک به صفحهٔ تو پیدا می‌کند. یک سایتِ بدخواه می‌تواند از همین دستگیره استفاده کند و tab اصلیِ تو را — همان که فکر می‌کردی امن است — بی‌آنکه بفهمی به یک صفحهٔ جعلی هدایت کند. rel="noopener" آن دستگیره را قطع می‌کند: صفحهٔ تازه دیگر هیچ راهی به صفحهٔ تو ندارد.

مرورگرهای امروزی این محافظت را خودشان هم برای _blank اضافه می‌کنند، ولی تو خودت هم می‌نویسی‌اش — هم تا روی هر مرورگری امن باشی، هم تا کدت گویا باشد و بگوید «می‌دانم دارم چه‌کار می‌کنم».

✅ چک کن: روی این لینک کلیک کن. باید در یک tab جدید باز شود و صفحهٔ خودت سرِ جایش بماند. حالا target="_blank" را بردار و دوباره کلیک کن؛ این بار در همان tab باز می‌شود و صفحه‌ات کنار می‌رود. فرق را با چشم ببین، بعد target="_blank" را برگردان.

⚠️ مواظب باش: target="_blank" را روی هر لینکی نگذار. برای پرش‌های # داخل صفحه و برای لینک‌های سایتِ خودت، باز شدن در tab جدید فقط آزاردهنده است و tab های کاربر را پر می‌کند. tab جدید را برای لینک‌های بیرونی نگه دار.

۵. متن لینک باید معنا بدهد#

بدترین متن لینکِ دنیا این است: «اینجا کلیک کن». نه چون زشت است — چون بی‌فایده است. سه دلیل:

خیلی‌ها با صفحه‌کلید یا با screen reader صفحه را می‌گردند و ابزارشان فهرستِ همهٔ لینک‌های صفحه را جدا نشانشان می‌دهد، بیرون از جمله. اگر ده لینک همه بگویند «اینجا کلیک کن»، این فهرست یعنی هیچ.
کسی که با چشم می‌خواند هم صفحه را اسکن می‌کند؛ چشمش روی متنِ رنگیِ لینک‌ها می‌پرد، نه جملهٔ دور و برشان. لینک باید خودش بگوید ته‌اش کجاست.
موتورهای جست‌وجو از متنِ لینک می‌فهمند مقصد دربارهٔ چیست. «اینجا» چیزی به آن‌ها نمی‌گوید.

قانون ساده است: متنِ لینک باید مقصد را توصیف کند و بیرون از جمله هم معنا بدهد.

<!-- bad -->
<p>برای دیدن مستندات <a href="https://developer.mozilla.org/">اینجا کلیک کن</a>.</p>

<!-- good -->
<p><a href="https://developer.mozilla.org/">مستندات MDN دربارهٔ وب</a> را ببین.</p>

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

🤖 با AI: متنِ لینک‌هایت را — فقط خودِ متن‌ها را، بدون جمله‌های دورشان — کنار هم بگذار و از دستیار AI ات بپرس: «اگر این‌ها را بیرون از متن ببینی، معلوم است هرکدام کجا می‌رود؟» جوابش نقطهٔ شروع خوبی است، ولی داورِ نهایی خودت هستی: با چیزی که می‌بینی چک کن — فهرست لینک‌های خودت را بلند بخوان؛ اگر جمله‌ای مثل «اینجا کلیک کن» بیرون از متن گنگ بود، همان را عوض کن. یادت باشد AI هم اشتباه می‌کند؛ گاهی متنی را «واضح» می‌گوید که برای خوانندهٔ واقعی گنگ است.

حالا همه‌چیز را کنار هم بگذار. کد کاملِ این فصل این است:

<!-- index.html -->
<!DOCTYPE html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <title>صفحهٔ شروع من</title>
  </head>
  <body id="top">
    <h1>سلام! این صفحهٔ من است</h1>
    <p>
      تازه ساختن صفحهٔ وب را شروع کرده‌ام. این صفحه دو بخش دارد؛
      از این دو لینک می‌توانی مستقیم به هرکدام بپری:
      <a href="#projects">کارهایی که ساخته‌ام</a> و
      <a href="#about">دربارهٔ من</a>.
    </p>

    <h2 id="projects">کارهایی که ساخته‌ام</h2>
    <p>
      اولین صفحه‌ام را فقط با HTML نوشتم، بدون هیچ ابزار آماده‌ای. هر چیزی
      که یاد می‌گیرم را از
      <a href="https://developer.mozilla.org/" target="_blank" rel="noopener">مستندات MDN دربارهٔ وب</a>
      می‌خوانم.
    </p>

    <h2 id="about">دربارهٔ من</h2>
    <p>
      دوست دارم چیزهایی بسازم که آدم‌ها واقعاً از آن‌ها استفاده کنند. کم‌کم
      این صفحه را کامل‌تر می‌کنم.
    </p>

    <p><a href="#top">بازگشت به بالای صفحه</a></p>
  </body>
</html>

✅ چک کن: دو لینکِ بالای صفحه باید به دو بخش بپرند، لینکِ MDN باید در tab جدید باز شود، و «بازگشت به بالا» باید تو را برگرداند سرِ صفحه. هر چهار لینک، هر کدام یک کار.

واژه‌های تازهٔ این فصل#

کلمه	تلفظ به حروف فارسی	یعنی چه
link	لینک	متنی که کلیک می‌شود و تو را جای دیگری می‌برد
`<a>`	اِی (anchor)	element ای که یک لینک می‌سازد
`href`	اِچ‌رِف	attribute ای که آدرس مقصدِ لینک را نگه می‌دارد
absolute path	اَبسولوت پَث	آدرس کاملِ یک سایت، از هر کجا یکسان (`https://...`)
relative path	رِلِتیو پَث	آدرسی نسبت به جای فایلِ فعلی، برای صفحه‌های سایتِ خودت
`id`	آی‌دی	نامی یکتا روی یک element تا بشود با `#` به آن پرید

تمرین‌ها