لینک ها و مسیرهای نسبی و مطلق در HTML | درس 8

درس 8 از دوره 60 قسمتی آموزش HTML و CSS ارومیا دیزاین

لینک ها در HTML صفحه های جداگانه را به یک سایت قابل استفاده تبدیل می کنند. در این درس، با تگ a و ویژگی href لینک می سازید، تفاوت مسیر نسبی و مطلق را یاد می گیرید و یک پروژه دوصفحه ای را اجرا می کنید. همچنین لینک به بخش مشخصی از صفحه، ایمیل و شماره تلفن را تمرین خواهید کرد.

در درس 7: قالب بندی معنایی متن نقش عناصر داخل متن را شناختیم. اکنون همان متن ها می توانند نقطه شروع حرکت کاربر به صفحه دیگری باشند. برای دنبال کردن مثال ها، کافی است فایل های تمرین را در ویرایشگر باز کنید؛ روش آماده سازی آن را در درس 2: نصب ویرایشگر کد توضیح داده ایم.

در پایان این درس چه کاری انجام می دهید؟

• لینک قابل کلیک با مقصد و متن مشخص می سازید.
• مسیر فایل را از محل صفحه فعلی محاسبه می کنید.
• بین آدرس کامل، مسیر نسبی و مسیر از ریشه سایت تفاوت می گذارید.
• دو صفحه را به یکدیگر متصل می کنید.
• لینک خراب را با بررسی آدرس، نام فایل و پوشه پیدا می کنید.

ساخت اولین لینک در HTML با تگ a

عنصر a همراه با href یک پیوند می سازد. مقدار href مقصد را تعیین می کند و متن بین تگ باز و بسته، متن قابل کلیک است. نام ویژگی و مقدار آن را مانند مثال داخل تگ آغازین بنویسید.

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

این مثال به فایل about.html در پوشه فعلی اشاره می کند. وجود لینک به تنهایی فایل مقصد را ایجاد نمی کند؛ فایل باید واقعا در همان مسیر وجود داشته باشد. اگر ساختار ویژگی ها را فراموش کرده اید، درس 5: تگ ها و ویژگی ها را مرور کنید.

متن لینک باید مقصد را روشن کند. عبارت «مشاهده شرایط ثبت نام» از «اینجا کلیک کنید» دقیق تر است. کاربری که با صفحه کلید یا صفحه خوان حرکت می کند نیز باید بتواند هدف لینک را از متن و زمینه آن بفهمد.

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

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

<a href="https://urmiadesign.ir/contact-us/">تماس با ارومیا دیزاین</a>

در این مثال، https:// پروتکل، urmiadesign.ir دامنه و /contact-us/ مسیر صفحه است. مرورگر برای این آدرس به محل فایل فعلی وابسته نیست. مفهوم مرورگر و دریافت صفحه را در درس 1: وب چگونه کار می کند؟ بررسی کردیم.

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

مسیر نسبی مقصد را نسبت به آدرس پایه سند مشخص می کند. در مثال های این درس عنصر base نداریم، بنابراین مبنا همان آدرس صفحه فعلی است. برای فایل هم پوشه نام فایل را می نویسیم؛ برای ورود به پوشه، نام پوشه را اضافه می کنیم و برای بالا رفتن یک سطح از ../ استفاده می کنیم.

فرض کنید پروژه شما فایل index.html در پوشه اصلی و فایل about.html در پوشه pages دارد. از صفحه اصلی، لینک درباره ما چنین است:

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

اما از داخل فایل pages/about.html، برای بازگشت به صفحه اصلی باید یک سطح بالا بروید:

<a href="../index.html">بازگشت به صفحه اصلی</a>

این تفاوت کوچک، علت بسیاری از لینک های خراب است. مسیر را همیشه از محل فایلی حساب کنید که لینک در آن نوشته شده است. برای مرور پوشه بندی پروژه، درس 3: ساختار پوشه ها و اولین پروژه وب را ببینید.

مقایسه مسیرها با یک مثال مشخص

در جدول زیر فرض می کنیم صفحه فعلی https://example.com/course/lesson8.html است و عنصر base وجود ندارد.

نکته مهم: مسیر شروع شده با / را با آدرس کامل اشتباه نگیرید. این مسیر در وب از ریشه همان سایت محاسبه می شود. اگر فایل را مستقیم با file:// باز کرده باشید، رفتار آن به ریشه فایل سیستم مربوط می شود؛ برای پروژه محلی این درس از مسیرهای نسبی استفاده کنید.

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

گاهی مقصد یک صفحه دیگر نیست؛ می خواهیم کاربر به قسمت پرسش های متداول همین صفحه برود. ابتدا روی عنصر مقصد یک id یکتا بگذارید. سپس در href، علامت # و همان شناسه را بنویسید.

<a href="#questions">رفتن به پرسش های متداول</a>

<h2 id="questions">پرسش های متداول</h2>
<p>پاسخ سوال های شما در این بخش قرار دارد.</p>

شناسه باید در همان صفحه یکتا باشد. مقدار questions را در هر دو محل یکسان بنویسید. عنوان مقصد همچنان یک عنوان معمولی HTML است؛ اگر به مرور سلسله مراتب عنوان ها نیاز دارید، به درس 6: عنوان ها و پاراگراف ها مراجعه کنید.

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

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

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

لینک معمولی در همان زمینه مرور فعلی باز می شود. اگر دلیل مشخصی برای باز شدن مقصد در زبانه جدید دارید، از target="_blank" استفاده کنید. مرورگر یا تنظیم کاربر ممکن است آن را در پنجره جدید باز کند. بهتر است این رفتار را در متن لینک به کاربر اطلاع دهید.

<a href="https://urmiadesign.ir/" target="_blank" rel="noopener">
  ارومیا دیزاین (در زبانه جدید)
</a>

noopener دسترسی صفحه مقصد به پنجره مبدا از طریق window.opener را قطع می کند. مرورگرهای مدرن برای target با مقدار _blank معمولا همین رفتار را به صورت ضمنی دارند؛ نوشتن صریح آن قصد شما را روشن می کند. ویژگی noreferrer علاوه بر این، اطلاعات ارجاع دهنده را هم ارسال نمی کند و برای هر لینک خارجی الزامی نیست.

لینک ایمیل و تماس تلفنی

لینک ایمیل معمولا برنامه ایمیل تنظیم شده روی دستگاه را باز می کند و لینک تلفن از برنامه تماس کمک می گیرد. این لینک ها خودشان ایمیل ارسال نمی کنند و نتیجه به برنامه های نصب شده و تنظیمات دستگاه وابسته است.

<a href="mailto:info@example.com">ارسال ایمیل</a>
<a href="tel:+982112345678">تماس تلفنی</a>

آدرس و شماره بالا نمونه آموزشی هستند؛ در سایت واقعی آنها را با اطلاعات صحیح خودتان جایگزین کنید.

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

یک پوشه بسازید و دو فایل index.html و about.html را مستقیما داخل آن ذخیره کنید. ساختار سند مطابق درس 4: عناصر head و body است. در این تمرین به CSS، افزونه یا اتصال اینترنت نیاز ندارید.

کد فایل index.html

<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>صفحه اصلی پروژه من</title>
</head>
<body>
  <h1>به سایت من خوش آمدید</h1>
  <p>این پروژه تمرین ساخت لینک در HTML است.</p>
  <p><a href="about.html">آشنایی با من</a></p>
  <p><a href="about.html#skills">مشاهده مهارت های من</a></p>
</body>
</html>

کد فایل about.html

<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>درباره من</title>
</head>
<body>
  <h1>درباره من</h1>
  <p>من یادگیری طراحی وب را شروع کرده ام.</p>
  <h2 id="skills">مهارت های من</h2>
  <p>می توانم عنوان، پاراگراف و لینک بسازم.</p>
  <p><a href="index.html">بازگشت به صفحه اصلی</a></p>
</body>
</html>

فایل index.html را باز کنید. لینک اول باید صفحه درباره من را نمایش دهد. لینک دوم همان صفحه را با شناسه #skills باز می کند. در صفحه کوتاه ممکن است جابه جایی عمودی محسوسی نبینید؛ وجود شناسه در آدرس و رسیدن به عنصر مقصد معیار درست تری است. در پایان، لینک بازگشت را هم امتحان کنید.

اشتباه های رایج هنگام ساخت لینک

• نوشتن نام دامنه بدون پروتکل: مقدار urmiadesign.ir به تنهایی مسیر نسبی محسوب می شود؛ برای آدرس کامل از https استفاده کنید.
• اشتباه در نام فایل: نام about.html و About.html روی بسیاری از سرورها یکسان نیست.
• استفاده از بک اسلش: در مسیر وب از / استفاده کنید، نه جداکننده ویندوز.
• جابجایی فایل بدون اصلاح لینک: با انتقال صفحه به پوشه جدید، مسیرهای نسبی را دوباره بررسی کنید.
• پسوند پنهان: مطمئن شوید فایل شما به اشتباه about.html.txt نام نگرفته است.
• قرار دادن لینک داخل لینک: یک عنصر a را داخل عنصر a دیگر ننویسید.
• استفاده از لینک برای هر عمل: رفتن به مقصد با لینک انجام می شود؛ اجرای عملی مانند باز کردن منو معمولا به دکمه نیاز دارد.

تمرین درس 8 همراه پاسخ

در پروژه دوصفحه ای، فایل about.html را به پوشه جدیدی به نام pages منتقل کنید. سپس لینک های صفحه اصلی، لینک مستقیم به مهارت ها و لینک بازگشت را اصلاح کنید. پیش از دیدن پاسخ، مسیرها را از محل فایل مبدا حساب کنید.

<a href="pages/about.html">آشنایی با من</a>
<a href="pages/about.html#skills">مهارت های من</a>

<a href="../index.html">بازگشت به صفحه اصلی</a>

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

چرا لینک من باز نمی شود؟

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

آیا لینک نسبی برای سایت واقعی مناسب است؟

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

آیا هر لینک خارجی باید در زبانه جدید باز شود؟

خیر. تصمیم به نیاز کاربر بستگی دارد. باز شدن ناگهانی زبانه های متعدد می تواند تجربه استفاده از سایت را دشوار کند.

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

• هر دو صفحه پروژه باز می شوند و لینک بازگشت کار می کند.
• تفاوت آدرس کامل، مسیر نسبی و مسیر از ریشه را می دانم.
• شناسه مقصد در لینک درون صفحه دقیق و یکتا است.
• متن لینک، مقصد را توضیح می دهد.
• پس از تغییر پوشه، همه لینک های وابسته را آزمایش کرده ام.

درس قبلی: قالب بندی معنایی متن | درس 7

درس بعدی: تصاویر در HTML؛ تگ img و متن جایگزین | درس 9