لینکها در HTML
کدگذاری URL توضیح داد نویسههای ویژه چگونه داخل آدرس سفر میکنند. این جلسه ابزار روزمرهٔ HTML را میسازد که از آن آدرسها استفاده میکند: عنصر anchor یعنی a با href. لینکها راه حرکت بازدیدکننده بین صفحات شما و به وب وسیعترند. مقصد واضح و متن قابلکلیک واضح بهاندازهٔ نشانهگذاری درست مهم است.
لینک چیست؟
ابرپیوند کنترلی است که با فعالشدن به جایی میرود. در HTML محتوای قابلکلیک — معمولاً متن، گاهی تصویر — را در <a>...</a> میپیچید و href را روی مقصد میگذارید. بدون href لینک ناوبری عادی ندارید. مرورگر لینکها را پیشفرض استایل میدهد (اغلب زیرخط و رنگی)، اما بخش مهم مقصد و واژهگذاری است.
پاسخ مستقیم
بنویسید <a href="URL">متن قابلکلیک</a>. href میتواند آدرس کامل وب مثل https://www.example.com (مطلق) یا مسیر فایل دیگری در سایت مثل about.html (نسبی) باشد. بازدیدکننده محتوای بین تگها را کلیک میکند. واژهای که مقصد را توصیف کند را ترجیح دهید — «دربارهٔ این سایت» — نه عبارتهای خالی مثل «اینجا کلیک کنید».
لینکهای مطلق
URL مطلق شامل طرح (https:// یا http://) و معمولاً یک host است. برای سایتهای بیرونی، یا وقتی واقعاً به آدرس کاملی که به پوشهٔ جاری وابسته نباشد نیاز دارید، به کار ببرید.
لینک مطلق
html<p>
<a href="https://www.example.com">Visit Example</a>
</p>خواندن نمونهٔ مطلق
hrefمقصد کامل را با شروعhttps://نگه میدارد- واژههای
Visit Exampleهمان چیزی است که کاربر میبیند و فعال میکند - غلط املایی در host یا طرح سفر را میشکند حتی اگر تگهای HTML معتبر باشند
- لینک مطلق همچنان از متن صادق و توصیفی سود میبرد
لینک نسبی در سایت خودتان
URL نسبی به فایلها نسبت به محل صفحهٔ جاری اشاره میکند. راه روزمره برای اتصال index.html به about.html بدون تکرار نام دامنه است. مهارت File Paths اعمال میشود: پوشهٔ غلط شکست بیصدای 404 میسازد.
لینک نسبی به صفحهٔ دیگر
html<p>
<a href="about.html">About this site</a>
</p>عادتهای نسبی مفید
- صفحات مرتبط را در ساختار پوشهٔ روشن نگه دارید
- نام فایل خطتیرهدار بدون فاصله را ترجیح دهید
- هر دو جهت را تست کنید: خانه → درباره و درباره → خانه
- به یاد داشته باشید جابهجایی فایل HTML بدون بهروز کردن لینک نسبی ناوبری را میشکند
متن لینک محتواست، نه تزئین
کاربران خوانندهٔ صفحه اغلب بدون شنیدن پاراگراف اطراف از فهرست لینکها میپرند. «اینجا کلیک کنید» و «بیشتر بخوانید» که ده بار تکرار شود بیمعنی میشود. مقصد را نام ببرید. میتوانید دوستانه بمانید — فقط مشخص باشید.
متن لینک توصیفی
html<!-- Prefer -->
<p><a href="pricing.html">View pricing plans</a></p>
<!-- Avoid as the only cue -->
<p><a href="pricing.html">Click here</a></p>مطلق در برابر نسبی — برای کار انتخاب کنید
- سایت بیرونی که کنترل نمیکنید → مطلق
https://… - صفحهٔ دیگر در پروژه → وقتی ممکن است مسیر نسبی
- لینک همسایت که مطلق نوشته شود هنوز کار میکند، اما نسبی وقتی دامنه عوض شود یا فایل را محلی باز کنید قابلحملتر میماند
جلسات بعد عنوان روی لینک، نشانک (#) و لینک ایمیل را پوشش میدهند؛ اولa+hrefرا مسلط شوید.
لینک خراب و 404
اگر href به فایل گم یا host اشتباه اشاره کند، مرورگر به صفحهٔ خطا میرود (اغلب HTTP 404). HTML دور لینک ممکن است هنوز عالی به نظر برسد. همیشه مسیرها را مثل فاویکون و stylesheet چک کنید: املا، پوشه، و اینکه فایل مقصد ذخیره شده باشد.
تمرین در ویرایشگر
- در یک پوشه
index.htmlوabout.htmlبسازید. - در صفحهٔ خانه لینک نسبی به
about.htmlبا متن توصیفی بگذارید. - در صفحهٔ درباره لینک نسبی برگشت به
index.htmlبگذارید. - یک لینک مطلق به سایت بیرونی مورد اعتماد اضافه کنید.
- هر لینک را در مرورگر دنبال کنید؛ بعد عمداً یک مسیر نسبی را خراب کنید، شکست را ببینید، و درستش کنید.
- هر متن «اینجا کلیک کنید» را به نام مقصد بازنویسی کنید.
اشتباهات رایج
- فراموش
hrefتا متن لینک واقعی نباشد - استفاده از «اینجا کلیک کنید» یا «لینک» برای هر مقصد
- مسیر نسبی خراب بعد از جابهجایی فایل بین پوشهها
- غلط املایی در
https://یا دامنه برای URL بیرونی - گذاشتن فاصله در نام فایل و بعد تعجب از شکست لینک نسبی
- تودرتو کردن بیاحتیاط محتوای تعاملی (لینک مبتدی را ساده نگه دارید: متن داخل
a)
خلاصه
- لینکها از عنصر
aبا مقصدhrefاستفاده میکنند - URL مطلق شامل طرحی مثل
https://است - URL نسبی به فایلهای دیگر سایت شما اشاره میکند
- متن لینک واضح و توصیفی برای همه بنویسید — از جمله فناوری کمکی
- مسیر خراب هنگام ناوبری شکست میخورد حتی اگر تگها معتبر به نظر برسند
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کردهاید
📝 دستورالعملها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- میتوانید آزمون را هر چند بار که میخواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده میشود