امروزه با همه گیر شدن شبکه های اجتماعی و وب سایت ها اکثر مردم با لینک ها آشنا می باشند، لینک یا پیوند، به متن یا عنصری گفته می شود که می توان روی آن کلیک کرده و به مکانی دیگر در فضای مجازی منتقل شد. امروزه در صفحات وب تعداد بی شماری از این لینک ها وجود دارد که باعث راحتی کاربر هنگام استفاده و بازدید از صفحات وب سایت می شود.
همچنین شما می توانید با مراجعه به مقالات مربوط به آموزش CSS در سایت آتریا یاد بگیرید که چطور لینک های ساده HTML را استایل دهی کرده و به شکل های دلخواه خود دربیاورید:
لینک های HTML
شما می توانید روی یک لینک کلیک کنید و به یک مطلب دیگر بروید. دقت داشته باشید که وقتی نمایشگر موس را روی آن می برید نمایشگر موس تبدیل به یک علامت دست می شود که این به این معنا می باشد که روی یک لینک قرار گرفته اید.
لینک های HTML – قاعده نوشتاری
تگ <a> در HTML یک hyperlink را تعریف می کند که قاعده نوشتاری زیر را دارد:
مهم ترین ویژگی عنصر <a> ویژگی href می باشد که مقصد لینک را نشان می دهد. کلیک کردن روی لینک، خواننده را به آدرس URL مشخص شده می برد. در حقیقت با کلیک بر روی آن لینک، شما به آدرس مشخص شده در href هدایت می شوید.
با کلیک بر روی لینک تعریف شده در صفحه بالا، به صفحه اصلی سایت w3schools هدایت می شوید. کد بالا را بنویسید و آن را تست کنید.
بصورت پیشفرض، لینک ها به صورت موارد زیر در مرورگرها پدیدار می شوند:
- یک لینک جدید که کاربر وارد آن نشده زیرش خط کشیده شده و به رنگ آبی می باشد.
- لینکی که قبلا استفاده شده است زیرش خط کشیده شده و به رنگ بنفش است.
لینک های HTML – ویژگی target
ویژگی target مشخص می کند که صفحه ی لینک شده کجا باز شود. ویژگی target می تواند یکی از مقادیر زیر را داشته باشد:
_self صفحه را در صفحه مشابه با جایی که لینک کلیک شد باز می کند (در همان صفحه)
_blank صفحه را در یک صفحه جدید باز می کند.
_parent صفحه را در صفحه والدش باز می کند.
در مثال بالا، اگر روی لینک کلیک شود، کاربر به صفحه جدیدی در مرورگر منتقل می شود و صفحه اصلی سایت w3schools در آن باز می شود.
URL های Absolute و URL های Relative
هر دو مثال بالا در ویژگی href از یک absolute URL (آدرس کامل وب) استفاده می کنند.
یک لینک داخلی (لینک به یک صفحه در همان وب سایت) با یک relative URL ( بدون "https://www") مشخص می شود.
لینک های HTML – استفاده از یک تصویر بعنوان لینک
برای استفاده از تصویر بعنوان یک لینک، تگ <img> را در داخل تگ <a> قرار دهید:
حال اگر روی تصویر کلیک شود، به صفحه default.asp منتقل خواهید شد.
لینک به یک ایمیل
از mailto: درون ویژگی href استفاده کنید تا یک لینک که برنامه ایمیل شخص را باز می کند بسازید.
استفاده از دکمه بعنوان لینک
برای استفاده از یک دکمه بعنوان لینک، باید یک سری از کدهای جاوا اسکریپت را اضافه کنید. جاوا اسکریپت به شما اجازه می دهد تا مشخص کنید که در یکسری event های به خصوص چه اتفاقی رخ دهد، مانند کلیک کردن روی یک دکمه:
در کد بالا، هرگاه روی دکمه کلیک شود، تابع onclick اجرا می شود. در این مثال هرگاه روی دکمه کلیک شود، با استفاده از دستور document.location کاربر به default.asp منتقل می شود.
عناوین لینک ها
ویژگی title اطلاعات اضافی درباره یک عنصر را ارائه می دهد.
در مثال بالا، اگر با اشاره گر موس روی تگ a قرار بگیریم، متن نوشته شده درون title نمایش داده خواهد شد. این متن با اطلاعاتی که به کاربر ارائه می دهد، به مشخص شدن هرچه بیشتر وظایف این تگ کمک می کند.
لینک های HTML – ساخت بوکمارک
لینک های HTML می توانند برای ساخت بوکمارک استفاده شوند، که کاربران مورد نظر بتوانند به بخش های به خصوصی از وب سایت بروند.
ساخت بوکمارک در HTML
بوکمارک ها می توانند برای وقت هایی که صفحه ی وب سایت خیلی طولانی می باشد استفاده شوند. برای ساخت بوکمارک، ابتدا بوکمارک را ساخته و سپس لینک را به آن اضافه کنید. وقتی لینک کلیک شود، صفحه به سمت پایین و یا بالا و به بخشی که بوکمارک شده است هدایت می شود. با استفاده از بوکمارک به راحتی می توانید صفحه خود را بخش بندی کرده و از طریق تگ a کاربر را به هریک از این بخش ها هدایت کنید.
مثال
ابتدا، از ویژگی id برای ساخت بوکمارک استفاده کرده :
سپس، یک لینک به بوکمارک اضافه کنید (از درون صفحه ی فعلی):
همچنین می توانید یک لینک به یک بوکمارک در صفحه ای دیگر اضافه کنید:
