جزئیات تگ a چیست + کاربرد آن در برنامه نویسی HTML و CSS

تگ a چیست ؟

در پاسخ به تگ a چیست باید از html به عنوان زبان نشانه‌گذاری محتوا آغاز کنیم. در HTML تگ‌ها برای قسمت‌های مختلف صفحات وب به کار برده می‌شوند. یکی از این تگ‌ها، تگ a یا همان Anchor element است. با استفاده از این لینک می‌توان بین صفحات مختلف وب سایت، فایل‌ها، ایمیل‌ها موقعیت‌های مکانی در همان صفحه و... لینک‌سازی کرد. به بیانی دیگر محتوایی که تگ a را داشته باشد، کاربر را با کلیک کردن روی آن، به صفحه مقصد منتقل خواهدکرد.

تگ a در طراحی وب چه نقشی دارد؟

یکی از کاربردهای تگ a در طراحی وب سایت لینک سازی بین صفحات است. از این تگ می‌توان به عنوان قرار دادن لینک دانلود مستقیم فایل صوتی، تصویری، pdf و... استفاده کرد. اگر در صفحه طراحی شده پیوند یا فرمی را قرار داده باشید، با به کاربردن صفت target در html می‌توانید مشخص کنید که فرم یا پیوند در کجا باز شود.

مثلا:

<a href="https://www.farsianacademy" target="_blank">Visit farsianacademy.com!</a>

یکی از این مقادیر را می‌توان برای تگ a به کار برد:

• blank (باز شدن لینک در صفحه ای جدید)
• self (باز شدن لینک در همان صفحه)
• top (مانند self، عمل کرده با این تفاوت که صفحه را در پنجره‌ای بدون فریم باز می‌کند)
• parent (لینک را در frameset پدر تگ frame باز خواهد کرد)

تگ a در html

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

تگ a در Css چطور عمل می‌کند؟

با استفاده از تگ a در CSS می‌توان ظاهر این لینک‌ها را به دلخواه تغییر داد تا با طراحی کلی وب‌سایت هماهنگ‌تر شوند. به‌عنوان مثال، می‌توان رنگ متن لینک، حذف یا افزودن خط زیرین، تغییر رنگ هنگام قرارگیری نشانگر ماوس بر روی لینک و سایر ویژگی‌های ظاهری را تنظیم کرد.​

در ادامه، یک مثال ساده از نحوه‌ی استفاده از CSS برای تغییر ظاهر لینک‌ها آورده شده است:​

<a/>مشاهده سایت<"a href="https://example.com>

و کد CSS مربوطه:

a }
 /* رنگ آبی برای لینک */;color: #1a73e8
 /* حذف خط زیرین */;text-decoration: none
 /* ضخیم کردن متن */;font-weight: bold
{

a:hover }
 /* تغییر رنگ به قرمز هنگام قرارگیری ماوس */;color: #d93025
 /* افزودن خط زیرین هنگام قرارگیری ماوس */;text-decoration: underline
{

در مثال قبل از تصویر:​

color: #1a73e8; رنگ پیش‌فرض لینک را به آبی تغییر می‌دهد.

text-decoration: none; خط زیرین لینک را حذف می‌کند.

font-weight: bold; متن لینک را ضخیم‌تر نمایش می‌دهد.

در بخش a:hover، زمانی که نشانگر ماوس بر روی لینک قرار می‌گیرد:

color: #d93025; رنگ متن به قرمز تغییر می‌کند.

text-decoration: underline; خط زیرین به لینک افزوده می‌شود.​

استفاده از این تکنیک‌ها به طراحان وب امکان می‌دهد تا تجربه‌ی کاربری بهتری را برای بازدیدکنندگان فراهم کنند و ظاهر لینک‌ها را با طراحی کلی وب‌سایت هماهنگ سازند.​

تگ a href در html چیست؟

تگ a href در HTML یک ابزار ساده است که برای ساختن لینک استفاده می‌شود. Href یا hypertext reference از جمله کدهای html است. تگ a href یا تگ <a> همراه با ویژگی href یکی از چیزهای ساده اما مهم در طراحی سایت است. با این تگ می‌توانیم یک لینک بسازیم، یعنی کاربر روی یک کلمه یا تصویر کلیک کند و به صفحه یا سایت دیگری برود.

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

به زبان خیلی ساده، تگ a href مثل یک پل است که کاربران را از یک صفحه به صفحه‌ی دیگر هدایت می‌کند. یا به عبارت دیگر href مثل یک آدرس عمل می‌کند و به مرورگر می‌گوید وقتی روی این نوشته کلیک شد، کاربر را به کجا ببرد.

آموزش تگ a در html

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

برای اینکه بدانید چگونه با استفاده از این تگ لینک سازی انجام دهید، طبق دستور العمل زیر پیش بروید:

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

کاربرد تگ a در html برای استفاده از لینک‌ها و اکشن‌هایی است که با استفاده از تگ a می‌توان آن را در صفحات مختلف به کاربرد:

• لینک آدرس اینترنتی (که برای باز کردن آدرس اینترنتی صفحات وب بکار می‌برد)

<a href="https://farsianacademy.com" target="_blank">visit farian academy</a>

• لینک تماس تلفنی (برای لینک مستقیم کاربر با شماره‌های تماس استفاده می‌شود)

<a href="tel:+989397397991">+989397397991</a>

• لینک شبکه‌های اجتماعی (با کلیک روی عباراتی حاوی این لینک، کاربر به صفحه مجازی هدایت خواهدشد)
• لینک به قسمتی از صفحه (این لینک سازی برای کلیک بر روی عبارت یا دکمه استفاده شده تا کاربر به قسمتی از همان صفحه هدایت شود)

<a href="#section2">Go to Section 2</a>

• لینک ارسال ایمیل (ارسال ایمیل از طریق این تگ استفاده شده که قبل از ایمیل باید mailto: استفاده شود.)

<a href="mailto:someone@example.com">Send email</a>

• لینک به جاوا اسکریپت

<a href="javascript:alert('Hello World!');">Execute JavaScript</a>

نکته نهایی

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

برای اینکه یادگیری خود را امتحان کنید، یک کد با تگ a برای لینک به یک شبکه اجتماعی بنویسید و در قسمت نظرات ارسال کنید. اگر کد شما مشکلی داشته باشد، نکته آن را به شما خواهیم گفت.

اگر سوال دیگری درباره تگ a برای شما ایجاد شده است، مطرح کنید تا پاسخگوی شما باشیم. همچنین اگر به حوزه برنامه‌نویسی و طراحی سایت علاقه‌مند هستید، می‌توانید با شرکت در دوره‌های آموزش طراحی سایت CIW یا طراحی سایت با وردپرس، مسیر یادگیری و پیشرفت خود را با کسب درآمد از طراحی سایت آغاز کنید.