فقط واتساپ ۰۹۱۵۷۲۳۲۳۹۸

تگ a در HTML + ویدیو آموزشی

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

⭐ (پیشنهاد می کنم برای یادگیری بهتر، ابتدا ویدیو بالا که قسمتی از دوره رایگان آموزش HTML CSS به زبان ساده است را ببینید سپس ادامه متن را مطالعه نمایید.)⭐

 

کاربرد تگ a در html

همانطور که اشاره شد کاربرد تگ a در html برای زمانی است که می خواهیم یک لینک ایجاد کنیم. آیا برای لینک دار کردن دکمه و عکس هم از تگ a استفاده می شود؟ بله، برای ایجاد لینک در هر موردی از این تگ استفاده می کنیم. در ادامه شیوه استفاده از تگ a در html را به صورت کامل شرح خواهیم داد.

 

تگ لینک در html

 

آموزش تگ a در html

قبل از آموزش تگ a در html چند مثال از کاربردهای متفاوت این تگ ذکر می کنیم و بعد از آن مواردی که به ممکن است برای شما ابهام داشته باشد را بررسی می کنیم.

 

مثال 1: یک پیوند به سایت وبسافت 3 ایجاد کنید.

نتیجه: وبسافت3

 

مثال 2: باز کردن پیوند در یک تب جدید

 

مثال 3: ایجاد لینک نوفالو (نوفالو یعنی اینکه موتورهای جستجو آن را دنبال نکنند)

 

مثال 4: ایجاد تصویر لینک دار

 

مثال 5: پیوند دادن به ایمیل

 

مثال 6: پیوند دادن به تلفن

 

مثال 7: پیوند دادن به بخشی از صفحه

 

 

مثال 8: دانلود یک فایل

 

ویژگی href در html

اگر به مثالها دقت کرده باشید متوجه می شوید که ویژگی href در هر کجا که تگ <a> باشد همراه با آن می آید. برای این ویژگی آدرس صفحه مقصد (صفحه ای که می خواهیم به آن لینک بدهیم) را ست می کنیم.

 

target در تگ a

ویژگی target در تگ html برای زمانی استفاده می شود که بخواهیم صفحه هدف ما در یک تب جدید باز شود. در این صورت ویژگی target را به صورت زیر تعریف می کنیم. (مثال 2)

 

سایر ویژگی های تگ a در html

download: زمانی که کاربر بر روی لینک کلیک می کند هدفی که برای او قرار می دهید برایش دانلود می شود.

hreflang: زبان لینک پیوند شده را مشخص می کند.

media: مشخص می کند که لینک برای چه صفحه ای بهینه شود.

ping: لیستی از نشانه های اینترنتی را نشان می دهد که با فاصله جدا شده است و کلیک بر روی هر کدام به مرورگر پینگ ارسال می کند. (برای ردیابی استفاده می شود.)

rel: رابطه بین صفحه فعلی و صفحه پیوند شده را مشخص می کند. (این ویژگی می تواند مقادیر lternate، author، bookmark، external، help، license، next، nofollow،  noreferrer،  noopener، prev، search، tag را دریافت کند)

target: محل باز شدن صفحه پیوند را نشان می دهد. این ویژگی می تواند مقادیر زیر را دریافت کند:

_blank

_parent

_self

_top

 

type: نوع رسانه پیوند شده را مشخص می کند.

 

لینک دادن به قسمتی از صفحه

برای لینک دادن به قسمتی از صفحه در html نیز از تگ a استفاده می کنیم. زمانی که می خواهیم به بخشی از صفحه فعلی که در آن هستیم لینک بدهیم، مثلا می خواهیم از پایین صفحه به ابتدای آن لینک دهیم (مثال 8) به صورت زیر عمل می کنیم:

  • به قسمتی از صفحه که می خواهیم کاربر به آن هدایت شود یک id می دهیم. (مثلا id=”top”)
  • در تگ a به ویژگی href مقدار آن id را می دهیم. (href=”#top)

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

 

تگ a در css

حالا که استفاده از تگ a در html را فرا گرفتید و با لینک دهی در شرایط متفاوت آشنا شدید، نیاز است که تگ a در css را بشناسید تا بتوانید به لینک های خود ظاهر دلخواه بدهید. در زیر استایلهای دلخواه و کاربرد آنها را ذکر می کنیم تا بتوانید یک لینک با ظاهری زیبا ایجاد کنید.

a:link, a:visited {
color: #ddd دادن رنگ دلخواه به لینک
text-decoration: none;حذف خطی که با ایجاد لینک به صورت خودکار زیر متن کشیده می شود
cursor: pointer;وقتی روی لینک هاور شدیم، ماوس به شکل 👆 درمی آید 
}

اگر بخواهید بعد از کلیک ماوس بر روی لینک رنگ آن تغییر کند می توانید از استایل زیر استفاده کنید:

a:link:active, a:visited:active {
color: (internal value);
}

به پایان مقاله آموزش تگ a در html رسیدیم امیدوارم برای شما مفید باشد. همانطور که متوجه شدید از تگ a برای لینک دار کردن یک عبارت استفاده میکنیم اما تگ دیگری تحت عنوان تگ لینک <link> نیز در html وجود دارد که کاربردی متفاوتی دارد بنابراین این دو را باهم اشتباه نگیرید. در صورتی که سوالی در این زمینه دارید حتما در بخش نظرات مطرح نمایید با افتخار پاسخگوی شما عزیزان هستیم.

 

منبع: https://www.w3schools.com/tags/tag_a.asp

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

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

ورود | ثبت نام
شماره موبایل یا ایمیل خود را وارد کنید
برگشت
کد تایید را وارد کنید
کد تایید برای شماره موبایل شما ارسال گردید
ارسال مجدد کد تا دیگر
برگشت
رمز عبور را وارد کنید
رمز عبور حساب کاربری خود را وارد کنید
برگشت
رمز عبور را وارد کنید
رمز عبور حساب کاربری خود را وارد کنید
برگشت
درخواست بازیابی رمز عبور
لطفاً پست الکترونیک یا موبایل خود را وارد نمایید
برگشت
کد تایید را وارد کنید
کد تایید برای شماره موبایل شما ارسال گردید
ارسال مجدد کد تا دیگر
ایمیل بازیابی ارسال شد!
لطفاً به صندوق الکترونیکی خود مراجعه کرده و بر روی لینک ارسال شده کلیک نمایید.
تغییر رمز عبور
یک رمز عبور برای اکانت خود تنظیم کنید
تغییر رمز با موفقیت انجام شد