ابتدا می‌خواهم با یک سوال شروع کنم: چگونه به این مقاله یا این سایت دسترسی پیدا کرده‌اید؟
خوب، به معنای واقعی کلمه با کلیک کردن روی لینک آن، درست است؟ پس بدانید این المان چقدر ضروری است که فقط با کلیک روی آن شما را به هر قسمتی از اینترنت هدایت می‌کند.
لینک و هایپرلینک در HTML چیست؟
لینک عملا نوعی پیوند است که صفحات را هم در یک وب سایت و هم به سایر وب سایت‌ها متصل می‌کند. در واقع بدون آن هیچ وب سایتی نخواهیم داشت.
به عنوان مثال بیایید نگاهی به آدرس اینترنتی https://www.roocket.ir داشته باشیم. وقتی آن را در نوار آدرس تایپ می‌کنید، شما را به سایت رسمی راکت می‌برد.
به عبارت ساده‌تر می‌توان گفت لینک‌ها آدرس صفحات وب هستند که به شما امکان می‌دهند با سرورهای مختلف ارتباط برقرار کنید.
شاید برای شما این سوال پیش آمده باشد که هایپرلینک چه تفاوتی دارد؟ خوب، این چیزی است که به ما امکان می‌دهد داکیومنت‌ها را به منابع دیگر از طریق anchor tag پیوند دهیم. این یک مفهوم اساسی در شبکه جهانی وب است که حرکت بین صفحات وب را از طریق لینک‌ها آسان‌تر می‌کند.
لینک‌ها می‌توانند در اشکال مختلف مانند تصویر، آیکون، متن یا هر نوع عنصر قابل مشاهده ارائه شوند که با کلیک روی آنها شما را به آدرس اینترنتی مشخصی هدایت می‌کند.
به عنوان مثال اگر اینجا را کلیک کنید، لیستی از سایر مقالات من در پروفایلم را مشاهده خواهید کرد که این یک لینک است.
نحوه ایجاد لینک در HTML
استفاده از تگ <a>
می‌توانید با نوشتن یک متن (یا هر محتوای مرتبط دیگر) داخل عنصر <a> </a> و استفاده از خصوصیت href که حاوی آدرس اینترنتی است، یک لینک ایجاد کنید.
در زیر نمونه‌ای را مشاهده می‌کنید:
<a href="https://www.roocket.ir">Visit: Roocket!</a>لینک دهی به استایل‌ها
معمولا لینک‌هایی که در فایل html. درج می‌شوند، فایل اصلی را به یک فایل استایل دهی شده (CSS) پیوند می‌دهند و با پسوند css. نام گذاری می‌شوند.
در اینجا نحوه لینک دادن به یک فایل CSS آورده شده است:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>همچنین نحوه لینک دهی به یک فایل جاوااسکریپتی را نیز در زیر می‌توانید ببینید. به این صورت آنچه را که می‌خواهید لینک کنید، در تگ head یا body قرار دهید.
<!DOCTYPE html>
<html>
<head>
<script src="myScript.js"></script>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>نحوه لینک‌دهی داخلی در یک وب‌سایت
لینک‌دهی به صفحات مختلف
شما از این نوع لینک دهی برای هدایت کاربر به صفحات مختلف در یک وب سایت استفاده می‌کنید.
فرض کنید سایتی داریم که حاوی پنج صفحه است. و می‌خواهیم یک کاربر بتواند به همه صفحات از یک نقطه خاص (مثل منو) دسترسی داشته باشد.
ابتدا باید همه صفحات را ایجاد کرده و سپس آنها را لینک دهیم. در این حالت چنین چیزی خواهیم داشت:
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>مثال بالا به ترتیب قسمت‌های مختلف سایت را لینک می‌دهد. مانند "Home"، "Services"، "Pricing"، "About" و "Contact". به علاوه نوشتن فقط نام فایل کافی است، زیرا همه آنها در یک پوشه کاری مشترک هستند.
لینک‌دهی به یک بخش خاص
تصور کنید که در جایی از سایت خود، به موضوع یا صفحه خاصی اشاره کرده‌اید و دوست دارید خوانندگان یا بازدیدکنندگان شما مستقیما با یک کلیک به آن قسمت بروند.
ابتدا باید خصوصیت id را به آن بخش از صفحه اضافه کنید. ممکن است یک پاراگراف باشد، در این صورت داریم:
<p id="detailed-info"> Read more on Upcoming Events </p>سپس در لینک خود id را در href اضافه کنید:
<a href="#detailed-info"> Read more about upcoming events </a>این کد شما را مستقیما به قسمت مورد نظر می‌برد.
انواع دیگر لینک‌ها در HTML
لینک‌دهی به یک فایل قابل دانلود
وقتی می‌خواهید به منبعی لینک دهید که حاوی یک فایل قابل دانلود است به جای اینکه در مرورگر باز شود، می‌توانید از خصوصیت download استفاده کنید که نام پیش فرض فایل را نشان می‌دهد.
خصوصیت download برای PDFها، فایل‌های تصویری، کلیپ‌های ویدئویی، صوتی و سایر محتوای چندرسانه‌ای که می‌خواهید کاربران آنها را در کامپیوتر یا تلفن همراه خود ذخیره کنند بسیار عالی است.
در اینجا یک مثال با لینک دانلود وجود دارد:
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
download="firefox-latest-64bit-installer.exe">
Download Latest Firefox for Windows (64-bit) (English, US)
</a>نحوه افزودن لینک ایمیل
این به ما امکان می‌دهد آدرس پست الکترونیکی یا همان ایمیل را به یک لینک تبدیل کنیم. شما می‌توانید این لینک‌ها را با استفاده از تگ <a></a> ایجاد کنید. اما در این مورد به جای ارسال URL، آدرس ایمیل گیرنده را ارسال می‌کنیم.
همچنین از خصوصیت mailto برای تعیین آدرس ایمیل در تگ انکر خود استفاده می‌کنید.
مثال:
<a href="mailto:hillarynyk@gmail.com">Send email to Me</a>علاوه بر آدرس ایمیل، می‌توانید اطلاعات دیگری نیز اضافه کنید. در واقع هر فیلد هدر استاندارد را می‌توان به آدرس ایمیل ارسال شده اضافه کرد که متداول‌ترین آنها "subject"، "cc" و "body" هستند.
در زیر مثالی وجود دارد که شامل cc ، bcc، subject و body است:
<a href="mailto:hillarynyk@gmail.com?cc=larymak4@gmail.com&bcc=larymak8@gmail.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
Send mail with cc, bcc, subject and body
</a>خصوصیات لینک در HTML
لینک‌های HTML دارای خصوصیات مختلفی هستند که می‌توانید از آنها برای ارائه اطلاعات بیشتر استفاده کنید. در اینجا برخی از رایج‌ترین موارد آورده شده است.
1. خصوصیت href
این ویژگی آدرس URL هدف را برای لینک دهی تعریف می‌کند. به این صورت که کلمه یا عبارت مشخص شده را قابل کلیک می‌نماید. خصوصیت href یک هایپرلینک به صفحه وب دیگری ایجاد می‌کند و لینک‌های HTML عملا بدون آن کار نخواهند کرد.
2. خصوصیت target
این ویژگی محل باز شدن لینک را مشخص می‌کند. بدین صورت که وقتی روی لینکی کلیک می‌کنید، به طور خودکار در یک تب جدید یا همان تب باز می‌شود.
در اینجا همه گزینه‌های ممکن برای استفاده از خصوصیت target ذکر شده‌اند:
Blank_: لینک را در یک تب جدید باز می‌کند و اغلب برای مقابله با از دست دادن بازدیدکنندگان سایت استفاده می‌شود. در حالت پیش فرض هنگامی که یک کاربر روی لینکی کلیک می‌کند، در همان تب باز می‌شود، اما این خصوصیت آن را تغییر می‌دهد.
<a href= "https://www.roocket.ir/" target="_blank"> roocket</a>
self_: لینک را در همان تب یا پنجره‌ای که روی آن کلیک شده است باز می‌کند و معمولا به صورت پیش فرض تعریف شده است و نیازی به مشخص کردن ندارد.
<a href="https://www. roocket.ir " target="_self"> roocket </a>parent _: لینک را در فریم والد باز می‌کند و فقط با frameها استفاده می‌شود.
<a href="https://www. roocket.ir " target="_parent"> roocket </a>top_: داکیومنت لینک شده را در بدنه کامل پنجره باز می‌کند.
<a href="https://www. roocket.ir " target="_top"> roocket </a>3. خصوصیت title
این ویژگی عنوان اطلاعات اضافی در مورد تارگت لینک را مشخص می‌کند. اگر کاربر ماوس خود را روی لینک قرار دهد، یک راهنما ظاهر می‌شود که عنوان یا هرگونه اطلاعات دیگر در مورد لینک را توضیح می‌دهد:
<a href="https://www. roocket.ir " title="Link to free learning Resources">Learn to code</a>نکات دیگری در مورد لینک‌ها در HTML
در این مقاله همه چیز را در مورد لینک‌ها و هایپرلینک‌ها در HTML یاد گرفتیم. در اینجا چند نکته تکمیلی وجود دارد که به شما در کار با لینک‌ها کمک می‌کند.
وقتی از یک تصویر به عنوان لینک استفاده می‌کنید، همیشه در نظر داشته باشید که خصوصیت alt را همراه با یک متن قرار دهید. این کار متن جایگزینی را ارائه می‌دهد که در صورت بارگیری نشدن تصویر، به جای آن نمایش داده می‌شود.
همچنین می‌توانید با استفاده از خصوصیت hreflang، زبان داکیومنتی را که لینک شده، مشخص کنید.
<a href="https://www.roocket.ir" hreflang="en"> roocket </a>وب در واقع یک کتابخانه از صفحات به هم لینک شده است که در آن تگ‌های انکر به عنوان پلی بین داکیومنت‌های مرتبط عمل می‌کنند.
اکنون موارد استفاده از لینک‌ها، نحوه ایجاد آنها و دلایل اهمیتشان در توسعه وب را یاد گرفته‌اید. پس وقت آن است که تمرین کنید و مهارت جدید خود را تکمیل نمایید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید