آموزش ایجاد لینک در HTML | آموزش تگ a


نویسنده:
چهارشنبه ۳ اردیبهشت ۱۳۹۹
ایجاد لینک در HTML

یکی از مهم‌ترین اجزاء صفحات وب لینک‌ها (‌links) هستند. با استفاده از لینک‌ها می‌توانید پیوندی به صفحات دیگر ایجاد کنید. به طوری که وقتی کاربر روی آن کلیک کرد به یک صفحه وب دیگری منتقل شود. تگ a وظیفه ایجاد لینک در HTML را دارد.

درون این تگ می‌تواند یک متن یا دیگر عناصر HTML قرار گیرند. پس به این نکته توجه کنید که با استفاده از تگ a نه تنها متون، بلکه هر چیز دیگری، مثل تصاویر و… را می‌توانید لینک کنید.

نحوه ایجاد لینک در HTML

Syntax یا نحوه نوشتن تگ a بصورت زیر است:

برای مثال می‌خواهیم عبارت آموزش HTML و CSS را به آدرس adminesite.com لینک کنیم:

همانطور که می‌بینید صفت href آدرس مقصد لینک را تعیین می‌کند. اگر نمی‌دانید صفت (attribute) چیست لطفا به جلسه آموزش پایه HTML بروید.

در مثال فوق بخشی که در خروجی نمایش داده می‌شود عبارت آموزش HTML و CSS است. که اگر کاربر روی این عبارت کلیک کند به آدرس https://adminesite.com/training/html-css منتقل می‌شود.

لینک‌های محلی

در مثال بالا ما از آدرس‌دهی مطلق (absolute) استفاده کردیم. یعنی آدرس لینک را بصورت کامل نوشته‌ایم.

نوعی آدرس‌دهی دیگر بنام آدرس‌دهی نسبی (relative) وجود دارد که نیازی به نوشتن آدرس بصورت کامل ندارد. یعنی می‌توان آدرس را بدون نام دامنه و پروتکل نوشت. به مثال زیر دقت کنید:

از این نوع آدرس دهی فقط می‌توان برای لینک‌های داخلی استفاده کرد. لینک داخلی یعنی یک وبسایت به صفحات دیگر خودش لینک دهد نه وبسایت‌های دیگر. اگر آدرس لینک‌ها را مانند مثال فوق بدون پروتکل و نام دامنه وارد کنید (http://your-domain.com) بصورت خودکار نام دامنه خود وبسایت در ابتدای لینک قرار می‌گیرد.

پس یادتان باشد برای لینک‌های خارجی حتما باید آدرس مقصد را بصورت کامل وارد کنید (همراه با نام پروتکل و دامنه). اما برای لینک‌های داخلی می‌توانید بصورت مطلق یا نسبی عمل کنید.

نکته: آدرس‌دهی relative دارای نکات و ریزکاری‌های زیادی است که در اینجا گفته نشده. در آینده جلسه‌ای را برای آموزش انواع آدرس‌دهی ایجاد می کنیم.


صفت target در تگ a

صفت target تعیین می‌کند که آدرس مقصد لینک در کجا باز شود. این خصیصه می‌تواند مقادیر مختلفی بگیرد، ما در اینجا ۲ مورد که بیشترین کاربرد را دارد بیان می‌کنیم:

  • blank_ (لینک را در یک tab یا پنجره جدید مرورگر باز می‌کند.)
  • self_ (لینک را در tab یا پنجره فعلی مرورگر باز می‌کند. بصورت پیشفرض این گزینه برای لینک‌ها فعال است.)

در مثال زیر آدرس مقصد لینک در یک tab جدید مرورگر باز می‌شود:


صفت title

صفت title اطلاعات متنی اضافه‌ای درباره یک عنصر تعریف می‌کند. به این اطلاعات به اصطلاح tooltip می‌گویند. متنی که درون این صفت نوشته شود، با قرار گرفتن ماوس روی عنصر نمایان می‌شود.

به مثال زیر دقت کنید:

در خروجی، هنگامی که کاربر نشانگر ماوس را روی عبارت آموزش HTML و CSS می‌برد، عبارت free learning نمایش داده می‌شود.

نکته: صفت title مخصوص تگ لینک نیست و می‌توان آن را برای اکثر تگ‌های html استفاده کرد.


ایجاد Bookmark یا لینک لنگر

Bookmark یا لینک لنگر به بازدیدکننده اجازه می‌دهد تا به بخشی از صفحه وب پرش (Jump) کند. لینک‌های لنگر برای صفحات وب طولانی بسیار مفید هستند.

حتما تا به حال فِلِش برگشت به بالای صفحه و… را در وبسایت‌های مختلف دیده‌اید، اینگونه کارها با استفاده از لینک‌های لنگر ایجاد می‌شوند.

برای ایجاد لینک لنگر ابتدا باید برای عنصر مقصد یک شناسه در نظر بگیریم. صفت id می‌تواند یک شناسه منحصر بفرد به یک عنصر نسبت دهد. در مثال زیر ما به یکی از تگ‌های h2 شناسه C4 را نسبت داده‌ایم:

بعد از ایجاد شناسه برای عنصر h2 تگ لینک لنگر را در مکان دلخواه ایجاد می‌کنیم:

همانطور که مشاهده می‌کنید، کافیست در صفت href عبارت #C4 را قرار دهیم. در خروجی وقتی کاربر روی این لینک کلیک کند به بخشی از صفحه وب که عنصر h2 موردنظر ما وجود دارد هدایت می‌شود.

دیدگاهتان را بنویسید

30 پاسخ به “آموزش ایجاد لینک در HTML | آموزش تگ a”

  1. آرمین گفت:

    سلام خسته نباشید ببخشی من یک سایت رو برنامه نویسی کردم ولی لینک نداره یعنی اون لینک فقط تو قسمت URL کار میکنه و من میخوام کاری کنم مثل سایت شما که لینک مثل www._____.com باشه چطور برا صفحه ی سایت خودم لینک بزارم ؟

  2. لینگو ترجمه گفت:

    ممنون مطلب مفیدی بود. فقط من یه مشکلی دارم. وقتی رو لینک ساخته شده کلیک می کنم قبل از آدرسی که باید بره یک سری آشغال کد نشون میده و بنابراین آدرس رو خراب می کنه. مشکل کجاست؟

  3. مرسا گفت:

    سلام میخواستم بپرسم که برای telegram , Twitter , YouTube چجوری میتونم با تگ a لینک بدم؟
    ممنونتون میشم اگه راهنماییم کنید

  4. شهریار گفت:

    سلام، ببخشید چگونه یک لینک برای باز کردن برنامه درست کنم؟
    برای مثال باز کردن مرورگر و رفتن به یک آدرس

  5. آرین گفت:

    با سلام.ترتیب خصیصه target و صفت Title مهمه یا آن چنان مهم نیست.

  6. شایان گفت:

    سلام ببخشید برای وب سایت چگونه می تونم کاری کنم که پس از کلیک بر روی دکمه فایلی دانلود شود

  7. فرزاد مهدوی گفت:

    سلام لینک ها رو باید تو کدوم تگ بنویسیم مثلا باید تو تگ head یا خودش جداگانه باشه مثل تگ body

  8. فرزاد مهدوی گفت:

    ممنون خانم جعفری یه سوال دیگه هم داشتم اینکه چه روشی هست که بشه یک سایت رو به طور کامل ه_*ک کرد و از دسترس عموم خارج کرد؟

  9. همایون گفت:

    سلام
    ممنون بابت مقاله مفیدتون .
    با این سری مقالات رایگان css html چند درصد این زبان ها رو یاد میگیریم ؟

  10. محمد معین محب گفت:

    سلام و عرض خسته نباشید
    من وب سایتی ساختم – می خواهم یک لینک برای نماد درگاهم بزنم که در یک صفحه ای دیگر از مرورگر باز بشه (مثل نماد نشان ملی ثبت) خودتان هم که تو همین سایت هست وقتی کلیک میشه روش تو یک صفحه ای دیگر باز بشه نه برگه
    از چه کدی استفاده کنم؟

  11. Wohawad Tyb گفت:

    عالی
    ممنون از تدریس خوبتون

  12. teimoor گفت:

    سلام من تازه با این سایتتون آشنا شدم. ممنون از مطالبی که میزارید خیلیا میگن از w3schools استفاده کنید ولی به نظر من سایت های فارسی هم خوب توضیح دادن به نظرتون اشتباه میکنم؟

    • سلام این سایت چون به صورت تخصصی داره رو آموزش برنامه‌نویسی کار میکنه و تمام تمرکز این سایت روی همین موضوع هستش قطعا می‌تونه منبع خوبی باشه. اما مطالعه به زبان انگلیسی برای بسیاری از عزیران دشواره به همین دلیل ما سعی کردیم آموزش‌هایی رو فارسی منتشر کنیم.

  13. Alireza گفت:

    درود، من یه لینک دانلود ساختم و توش یه فایل ویدئویی قرار دادم، دیدید که توی وبسایت های ایرانی وقتی رویه همچین لینکایی کلیک میکنیم فیلم رو دانلود میکنه و به پوشه دانلودز میره، خب منم دقیقا همون کارو کردم ولی فیلمو دانلود نمیکنه منظورم اینه که فقط قسمت picture to picture رو میاره و قسمته دانلود نداره و فقط پخشش میکنه، میدونم که فیلمو خودم دارم و نیازی به دانلود مجدد نیست ولی میخام بدونم که ایا کده من اشتباهه؟ یا اینکه کلا تویه لوکال هوسک اینجوریه و برای بقیه قسمت دانلود داره و درسته؟؟ و یه سوال دیگه من میخام با کلیک رویه لینک دانلود فیلم شروع به دانلود کنه یعنی نمیخام بره تو قسمتی شبیه پخش انلاین، همون قسمتی که بالا گفتم، اینو چجوری میشه ساخت؟

    • سلام بله کد شما اشتباهه، برای قرار دادن ویدیو با لینک دانلود از درس ۲۵ با موضوع آموزش کار با video در html کمک بگیرید در این درس نحوه صحیح درج ویدیو گفته شده که با این روش دکمه دانلود هم ظاهر میشه
      یا میتونید لینک دانلود رو کنار باکس ویدیو بذارید یه بخش دانلود طراحی کنید اونجا از تگ a استفاده کنید.

  14. Alireza گفت:

    سلام این لینکو ببنید وقتی رو عکس کلیک میکنیم دانلود میکنه، منم همینو کپی کردم و تو لوکال هوست خودم اجراش کردم البته ادرسه عکسو به عکسه خودم تغیر دادم ولی بعدش وقتی روش کلیک میکنم منو میبره تو یه قسمتی مثله پخش انلاین مانند و عکسو کامل اونجا نمایش میده، ولی من میخام مثله همون لینکه که فرستادم خود به خود در همون قسمته پایین مرورگر دانلود کنه، مرورگرم کرومه اپدیت اخرین نسخس، ایا مشکل اینه که تو لوکال هست اینجوری نشون میدش و بعدا که بره تو سرور برای بقیه درست میشه؟ یا اینکه مشکل یجا دیگس؟؟

    • سلام دوست عزیز، اگر می‌خواین تصاویر با کلیک دانلود شن باید تگ تصویر رو داخل یک تک a قرار بدید. داخل تگ a از ویژگی دانلود استفاده کنید:

      <*a download="custom-filename.jpg" href="/path/to/image" rel="nofollow ugc">
      <*img alt="ImageName" src="/path/to/image">
      <*/a*>

      علامت * رو پاک کنید.
      در href و src ادرس تصویر را بذارید

  15. امیرمحمد گفت:

    سلام چجوری یک تیکه از متن رو لینک کنیم
    مثلا تو خیلی از سایت ها نوشته برای دانلود کلید کنید بعد “کلیک کنید” رو لینک کرده

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *