لینک در html – تگ لینک یا تگ a

لینک در html با تگ لینک و تگ a جهت ساخت لینک های قدرتمند و با ارزش در سئو| پی استور

لینک در HTML با تگ لینک یا تگ a انجام میشه. تگ لینک جزو المان هایی است که شما در تمامی صفحات وب و آموزش HTML حداقل یک بار ازش استفاده خواهید نمود. به عبارتی تگ  a جزو مهمترین تگ های HTML است. این تگ برای لینک دهی به کار میره. اگه می خواین کاربر با کلیک کردن روی کلمه “خانه” به صفحه home.html بره، یا با کلیک روی کلمه آپارات، به سایت آپارات هدایت بشه، باید از این تگ استفاده کنین.

لینک در html جزو تگ های Inline Level است. این به این معنیه که تگ a یه سطر رو اشغال نمیکنه و فضایی که اشغال میکنه بستگی به محتوای داخلش داره.

تگ a، تگ پایانی دارد

تگ لینک در html ، جزو اون دسته از تگ هایی است که تگ پایانی داره. بعبارتی با تگ بسته <a/> بسته میشه.

خاصیت href در لینک در html

هنگام استفاده از این تگ a، باید آدرس مقصد لینک رو در داخل خصوصیت href قرار بدین. به فرض چنانچه بخواهیم لینکی بسازیم که کاربر با کلیک روی “پی استور” به آدرس https://programstore.ir/ منتقل بشه، باید اینگونه عمل کنیم:

چنانچه مشاهده می کنین آدرس url در داخل href تگ a نوشته شد و کلمه نمایشی مابین تگ آغازی و پایانی.

خاصیت target در تگ لینک در html

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

  • blank_ : با قرار دادن این مقدار در خصوصیت target در تگ a به مرورگر اعلام می کنید که لینک را در یک تب جدید باز کن.
  • self_ : این مقدار به مرورگر اعلام می کند که آدرس لینک را در این تب باز کن. این مقدار همان مقدار default یا دایمی تگ a هستش. چنانچه شما خصوصیت target رو برای تگ a ننویسید این مقدار به صورت پیش فرض تنظیم خواهد شد.

خاصیت rel در تگ لینک در HTML

این صفت در تگ a نشان دهنده نوع رابطه سند فعلی با صفحه لینک داده شده است:

اما value چه مقادیری رو میتونه بگیره؟ یکی از مهمترین مقادیر که توسط این صفت در تگ a گرفته میشه مقدار nofollow است.

nofollow در صفت rel لینک در HTML

در بحث لینک در html تمامی تگ های a به صورت پیش فرض دارای مقدارفالو یا dofollow درصفت rel هستند. درواقع معنی این عبارت اینه که موتورهای جستجو این لینک رو دنبال و بهش توجه کنن. اما وقتی مقدار این صفت به nofollow تنظیم شود، مرورگر می فهمد که لینک، دارای ارزشی برای ما نمی باشد و نباید دنبالش کند. در هنگام  نوشتن لینک در html خوب است که از تگ a فالو و آنفالو باهم استفاده کنین. یعنی اگه چند تگ a بصورت فالو دارین یکی دو تا هم لینک آنفالو اضافه کنین.

تگ لینک در HTML و انواع مقصد دهی

  • لینک دهی به صفحات داخلی سایت

    • اگر فایل ما و مقصد برادر باشن

لینک در html با تگ لینک و تگ a جهت ساخت لینک های قدرتمند و با ارزش در سئو - پی استور

index.html فایل ماست و همانطور که در شکل بالا سمت چپ دیده می شه این فایل فرزند دایرکتوری HTMLProject  است و ما می خواهیم در فایلمان لینکی بسازیم با نام HOME که وقتی کلیک  می شه به فایل home.html که در همان پوشه است و در واقع او هم فرزند دایرکتوری HTMLProject است، هدایت شود. به href دقت فرمایین که تنها نام فایل و پسوندش رو درج کردیم. زیرا هر دو فایل برادر هستن.

    • مقصد و فایل ما عمو و برادرزاده باشن

لینک در html با تگ لینک و تگ a جهت ساخت لینک های قدرتمند و با ارزش در سئو - پی استور

مشاهده می کنید که فایل ما همان فایل index.html  و برادر دایرکتوری views  است. اما فایل مقصد یا  home.html فرزند دایرکتوری views است. به عبارتی index عموی فایل home است. پس در آدرس دهی در فایل عمو ابتدا نام پدر فایل مقصد، سپس / و سپس نام فایل مقصد آورده می شه.

اما اگر بخواهیم از فایل برادرزاده به فایل عمو لینک بدیم باید مطابق شکل زیر عمل کنیم:

لینک در html با تگ لینک و تگ a جهت ساخت لینک های قدرتمند و با ارزش در سئو - پی استور

همانطور که مشاهده می کنین ابتدا با علامت /.. به یک مرحله قبل یا به یک دایرکتوری قبل باز میگردیم و سپس اسم فایل مقصد رو می نویسیم. به عبارتی وقتی علامت /.. را تایپ می کنیم می گوییم  از دایرکتوری views خارج شو و برو به دایرکتوری HTMLProject  و فایل index آنجاست.

حال فرض کنید  ترتیب فایل ها و دایرکتوری به صورت زیر باشه:

لینک در html با تگ لینک و تگ a جهت ساخت لینک های قدرتمند و با ارزش در سئو - پی استور

حال اگر بخواهیم داخل فایل index به فایل home  لینک بدیم باید href تگ a  را اینگونه بنویسیم. اما اگر بخواهیم در داخل فایل home به فایل  index لینک بدیم چه؟

لینک در html با تگ لینک و تگ a جهت ساخت لینک های قدرتمند و با ارزش در سئو - پی استور

به href تگ a دقت کنید. می بینید که ما از /../.. استفاده کردیم که می شود گفت دو بار از /.. استفاده کرده ایم. این به این معنیه که گفته ایم از دایرکتوری views خارج شو و برو به دایرکتوری pages و سپس از دایرکتوری pages هم خارج شو و برو به دایرکتوری HTMLProjest و آنجا فایل index را خواهی یافت.

  • لینک دهی به یک بخش از صفحه فعلی

اگر صفحه فعلی شما طولانیه و می خواهید با قرار دادن یک لینک و کلیک کردن آن، کاربر به قسمتی در میانه ها یا اواخر صفحه هدایت بشه، می تونید آیتم مبدا را با id اسم گذاری کنید و سپس در href تگ a  آدرس آن آی دی را بدهید.

فرض کنید مقاله ای داریم درمورد آموزش تگ لینک در html که بسیار طولانی است. می خواهیم در انتهای مقاله لینکی قرار دهیم که کاربر با کلیک روی آن به ابتدای مقاله برود. پس ابتدا، جایی که قرار است کاربر هدایت شود را با id نامگذاری می کنیم:

سپس باید تگ لینک را آخر صفحه بگذاریم :

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

  • لینک دهی به آدرس خارجی

اگر بخواهیم یک صفحه از صفحات یک سایت دیگر را لینک دهی کنیم، باید آدرس آن صفحه را در قسمت href لینک در html بیاوریم. به عنوان مثال می خواهیم وقتی کاربر روی کلمه “آپارات”  کلیک کرد به سایت آپارات برود :

    • شماره تلفن

می توان در قسمت href تگ a شماره تماس هم درج کرد :

    • آدرس ایمیل :

می توان در قسمت href تگ a از آدرس ایمیل هم استفاده کرد :

پشتیبانی تگ لینک در html

تگ a از همه صفات عمومی و رویداد ها پشتیبانی می کنند.

لینک در html – پشتیبانی مرورگر ها از تگ a

همه مرورگر ها از تگ a پشتیبانی کامل می کنند:

نام مرورگرلینک در html با تگ لینک و تگ a و پشتیبانی گوگل کروم| پی استور لینک در html با تگ لینک و تگ a و پشتیبانی موزیلا فایرفاکس firefox | پی استور لینک در html با تگ لینک و تگ a و پشتیبانی سافاری safari | پی استور لینک در html با تگ لینک و تگ a و پشتیبانی اپرا Opera | پی استور لینک در html با تگ لینک و تگ a و پشتیبانی Internet Explorer | پی استور
پشتیبانی می کند؟بلهبلهبلهبلهبله

سخن آخر

اگه هنوز دنبال یه پکیج نفیس، کامل و ساده برای آموزش اچ تی ام ال می گردین، فیلم آموزش html همین سایت رو دانلود کنین.

مطالب زیر را حتما بخوانید

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

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

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.