در جلسات قبلی توضیح دادیم که لینک دهی چجوری هستش . حالا میخوایم کمی بیشتر در مورد مبحث لینک دهی در HTML توضیح بدیم . تگ لینک یا همون تگ a یکی از پرکاربردترین تگ ها در HTML هستش . این تگ به کاربر اجازه میده تا بتونه به صفحه ای هدایت بشه . ( نا گفته نمونه که حتی میتونه داخل همون صفحه هم هدایت بشه وخیلی کارهای دیگه هم کرد با این لینک !)
وقتی از تگ a یا همون تگ لینک دهی استفاده میکنیم کاربر رو داریم به جایی هدایت میکنیم . وقتی هم که با موس روی تگ لینک یا همون تگ a میریم موس حالت اصطلاح لینک یا همون دست به خودش میگیره.
نکته ای که نباید فراموش کنیم این هست که لینک ها فقط متن نیستند! تمام المان های HTML میتونند لینک داشته باشن. چجوری ؟! کافیه المان مورد نظرمون رو داخل تگ a تعریف کنیم . حالا میتونه متن باشه میتونه عکس باشه یا هر چیز دیگه ای !
نحوه کدنویسی تگ لینک یا همون تگ a
زیاد توضیح ندیم ! قبلا نحوه نوشتن تگ های رو توضیح دادیم بهتون و تا اینجای کار یاد گرفتین که چجوری تگ بنویسید ! فقط ویژگی لینک رو رعایت کنید که با href معلوم میشه و لینکی که میخوایم کاربر رو بهش هدایت کنیم داخل این ویژگی نوشته میشه . بین تگ باز شونده و تگ بسته شونده هم که متن یا هر المانی که بخوایم رو مینویسیم .
<a href="https://bs-design.ir">link text</a>
الان توی مثال بالا متن link text برای کاربر قابل مشاهده هستش و اگر کاربر روی اون کلیک کنه به آدرسی که بهش دادیم که توی این مثال سایت بی اس دیزاین هست هدایت میشه . به همین راحتی !
ویژگی تارگت در تگ لینک یا همون تگ a
یه ویژگی دیگه میتونیم استفاده کنیم توی تگ لینک یا همون تگ a. اون هم این هستش که آیا کاربر در همین تب مرورگر که باز هست صفحه جدید که لینک دادیم براش باز بشه یا تب جدید بره یا اصلا پنجره جدیدی براش باز بشه ! ویژگی target بهمون این اجازه رو میده که از این قوانین استفاده کنیم . حالا مقدارهای مختلفی میتونیم به این ویژگی بدیم که بصورت پیش فرض وقتی توی همون صفحه باز میشه مقدار ویژگی روی self تنظیم شده .
اگر هم که بخوایم کاربر به تب جدید بره از مقدار ویژگی blank استفاده میکنیم .
<a href="https://www.bs-design.ir/" target="_blank">Visit Bs Design!</a>
لینک های مطلق و لینک های وابسته
خب یکم مبحث رو پیچیده تر کنیم . لینک ها دو حالت میتونن داشته باشن. یا وابسته هستند و یا مطلق ! فارسی گفتن یکم سخته. دو حالت absolute و relative دارن. برای توضیح دادن اینکه این دو تا چه فرقی دارن مثال های بالا همه لینک های absolute استفاده شده. یعنی لینک دادیم که با http شروع شده و لینک ثابت هست کاری نداره که کاربر توی چه صفحه ای هستش و لینک هم بطور کامل درج شده .
لینک relative هم فکر کنم متوجه شده باشین. لینکی هست که ما توی همون صفحه ای که هستیم مسیر دهی میکنیم بهش . مثلا شما داخل فولدر اومدین دارید روی فایل index.html کدهای HTML رو میزنین . بعد داخل اون فولدر یه فولدر دیگه دارین که اسمش test هست . حالا میتونین از لینک وابسته یا همون لینک relative استفاده کنین و به اون فولدر هدایت کنین کاربر رو . دیگه نیازی نیست لینک کامل رو درج کنید و میزنین test داخل ویژگی href و هیچ http درج نمیکنید . اینجوری دارین به مرورگر میگید یه فولدری هست توی این مسیر که الان هستیم و اسمش test هست برو داخل اون فولدر . ولی توی لینک absolute میایم میگیم کاری نداریم کدوم فولدر هستیم از اول شروع کن برو به این آدرسی که میگم.
مثال های زیر رو توجه کنین کاملا واضح میشه براتون :
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/" target="_blank" rel="noopener">W3C</a></p>
<p><a href="https://www.google.com/" target="_blank" rel="noopener">Google</a></p>
<h2>Relative URLs</h2>
<p><a href="html_images.html">HTML Images</a></p>
<p><a href="/css/default.css">CSS Tutorial</a></p>
استفاده از عکس در تگ لینک
برای اینکه بتونین به یه عکس لینک بدین فقط کافیه که کد عکس رو داخل کد تگ لینک قرار بدین . ساده هستش . به مثال زیر توجه کنین :
<a href="index.html">
<img decoding="async" src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
لینک به آدرس ایمیل
برای اینکه بخوایم به یه آدرس ایمیل لینک بدیم فقط کافیه از این فرمت استفاده کنیم که اول مقدار ویژگی href مینویسیم mailto و بعد هم آدرس ایمیلی که میخوایم بهش ایمیل بره.
<a href="mailto:info@example.com">Send email</a>
لینک های بوک مارک Bookmark
این قضیه شاید خیلی راحت بیاد ولی دنیای جالبی وجود داره و کاربردهای جالبی هست داخلش. میتونیم بیایم به یک المان یک ویژگی بدیم به اسم id . (ویژگی id در اصل مثل اسم اون المان میشه که با اون میشه صداش زد) . حالا میخوایم وقتی روی یه لینک کلیک شد داخل همون صفحه بره به اون المانی که ما بهش اون ویژگی id رو دادیم . برای این کار کافیه داخل href اول یه علامت # بذاریم و بعدش هم اسم اون المان رو پشت سرش بیاریم. مثال زیر رو توجه کنین :
<a href="#C4">Jump to Chapter 4</a>
...
<h2 id="C4">Chapter 4</h2>
از لینک دهی بوک مارک Bookmark link میتونیم برای یه صفحه دیگه هم استفاده کنیم . مثلا از صفحه اصلی هدایت کنیم به صفحه درباره ما و المان خاصی که قبلا توی اون صفحه بهش اسم دادیم. خیلی ساده میشه بعد لینک که میدیم به href بیایم یه علامت # بذاریم و اسم اون المان رو داخلش بیارم. در اصل ترکیبی از این دو تا روش میشه. مثال زیر کامل این روش توضیح داده شده :
<a href="learn.html#C4">Jump to Chapter 4</a>
