ساده ترین تعریفی که می توان برای تگ a گفت این است که کاربر با کلیک کردن روی هر چیزی که بین تگ a است، به صفحه یا جایی که شما لینک آن را مشخص کرده اید، منتقل می شود. اما ممکن است سوالات بزرگتری مانند تفاوت تگ a با تگ link برای شما ایجاد شود. یا حتی شاید می خواهید کاربرد کامل تری از تگ a در html را بدانید. در ادامه مطلب هر آنچه که در ذهن شما سوال شده و باید درباره تگ a بدانید، قرار داده شده است.
تگ a در html
یا توجه به تعریف بالا متوجه شده اید که تگ a چیست. اما اگر بخواهیم این تگ را کامل بشناسیم، ابتدا باید بدانیم که این تگ کجا استفاده می شود. تگ a در زبان نشانه گذاری html استفاده می شود که اگر مطابق بخش اچ تی ام ال زیر، بین آن یک متن، عکس، ایمیل یا هرچیز دیگری قرار دهیم و یک لینک دلخواه برای آن بگذاریم، کاربر با کلیک کردن بر روی آن، به آن لینک هدایت می شود. این لینک می تواند برای هر بخشی از اینترنت باشد، یعنی لازم نیست که حتما برای وب باشد و شما می توانید حتی از لینک های برنامه ها هم استفاده کنید.
<body>
<a href="linke morede nazar manande #">text or photo</a>
</body>
یکی از ویژگی های تگ a، خاصیت سئویی آن می باشد. جالب است بدانید که لینک هایی که در تگ a استفاده می شوند، توسط ربات های گوگل دنبال می شوند که می تواند کمک بسزایی در سئوی داخلی و خارجی شما داشته باشد.
برای مشاهده آموزش تگ body در html، می توانید از صفحه مربوطه دیدن فرمایید.
تگ a در برنامه نویسی
تا اینجای مطلب امیدواریم که آموزش تگ a در html را متوجه شده باشید. اما یکی از اشتباهاتی که خیلی از افراد درباره html می کنند، اشتباه گرفتن html با یک زبان برنامه نویسی است. اما واقعیت این است که html زبان برنامه نویسی نیست، بنابراین از این تگ نمی توان در برنامه نویسی استفاده کرد، چرا که در زبان های برنامه نویسی ناشناخته می باشد.
البته در برخی از برنامه نویسی هایی که با زبان جاوا اسکریپت انجام می شود، می توانید از یک بخش html که تگ a نیز در آن قرار دارد استفاده کنید، اما به طور کلی نمی توان از تگ a و یا تگ های html در برنامه نویسی استفاده کرد.
تفاوت تگ a و link
ساده ترین و کلی ترین تفاوت بین تگ a و link، این است که تگ a کاربر را به لینکی که در آن عکس، فیلم و یا هرچیزی قرار دارد هدایت می کند، اما تگ link، آنچه را که کاربر می خواهد را از مقصد برای کاربر می آورد. البته کاربرد های این دو تگ بسیار متفاوت می باشند.
همانطور که در قسمت قبل توضیح داده شده، تگ a کاربر را به صفحه مورد نظر هدایت می کند، اما از تگ لینک برای استفاده از فایل های css، فاو آیکون سایت و دیگر موارد شبیه به آن استفاده می شود. همچنین تگ link بر خلاف تگ a، خاصیت سئویی ندارد و ربات های گوگل لینک های آن را دنبال نمی کنند.
بهتر است بدانید تگ های a بیشتر در تگ nav یا تگ section استفاده می شوند، اما تگ لینک در ۹۰ درصد مواقع در تگ head قرار می گیرد.
چگونه خط زیر تگ a را برداریم
برداشتن خط زیر تگ a روش های زیادی دارد اما به طور استاندارد از سی اس اس برای برداشتن آن استفاده می شود. در ادامه همه روش های حذف خط زیر تگ a را قرار داده ایم.
برداشتن خط تگ a با css
در اولین روش شما باید مطابق صفحه html زیر، در تگ head یک تگ استایل باز کرده و با فراخوانی تگ a مورد نظر، با استفاده از سی اس اس (text-decoration :none;) ، خط زیر تگ a را بردارید.
<pre class="language-markup"><code>
<head>
<style>
.tag-a{
text-decoration:none;
}
</style>
</head>
<body>
<a href="#" class="tag-a"></a>
</body>
</code></pre>
برداشتن خط تگ a با style
در این روش شما با قرار دادن اتریبیوت style در تگ a، و با استفاده از text-decoration : none مطابق بخش اچ تی ام ال زیر، خط تگ a را بردارید. البته پیشنهاد می شود از این روش استفاده نکنید.
<p><a href="#" style="text-decoration: none">chasboon</a></p>
اتریبیوت های تگ a
اگر بخواهیم به تگ a معنای دقیق تری بدهیم و یا خاصیت سئویی آن را افزایش دهیم، باید از انواع اتریبیوت های این تگ استفاده کنید که در ادامه انواع و روش استفاده از آن را برای شما قرار داده ایم:
href در تگ a
اولین و مهم ترین اتریبیوت که لینک و آدرس مقصد کاربر را در خودش جا می دهد، href می باشد. شما با استفاده از این ویژگی می توانید کاربر را به هر چیزی مانند شبکه های اجتماعی، شماره تماس، صفحات وب، ایمیل و… هدایت کنید.
توصیه می شود برای مشاهده آموزش ساخت سایت رایگان روی لینک مربوطه کلیک کنید.
<body>
<a href="https://aryatehran.com" target="_parent">text</a>
</body>
Target در تگ a
یکی از اتریبیوت های مورد استفاده در تگ a که معمولا در آزمون html زیاد پرسیده می شود، target است. شما با استفاده از این تگ می توانید تعیین کنید لینکی که کاربر روی آن کلیک می کند، چگونه باز شود. برای مشخص کردن تارگت، باید از تارگت های بخش اچ تی ام ال زیر که در ادامه کاربرد های آنها را نیز برای شما قرار داده ایم، استفاده کنید:
<body>
<p href="#" target="_blank">text</p>
<p href="#" target="_self">text</p>
<p href="#" target="_top">text</p>
<p href="#" target="_parent">text</p>
</body>
- تارگت blank_ : از این تارگت برای باز کردن لینک در یک تب یا پنجره جدید استفاده می شود.
- تارگت self_ : این تارگت که به صورت پیش فرض روی تگ a است، لینک را در همان تبی که روی آن کلیک شده، باز می کند.
- تارگت top_ : اگر لینک شما در یک iframe باشد، لینک کلیک شده، در iframe باز نمی شود بلکه مروگر صفحه را در تب باز می کند.
- تارگت parent_ : این تارگت لینک کلیک شده را در تب والد خود باز می کند.
dowmload در تگ a
این ویژگی برای مرورگر تعیین می کند که به جای هدایت کاربر به لینک مقصد، فایل را دانلود کند. در بخش زیر می توانید شکل صحیح استفاده از آن را مشاهده کنید. توجه کنید که مقدار آن را هرچیزی می توانید بگذارید اما بهتر است با نام فایل برابر باشد.
<body>
<a href="#" download="دانلود آهنگ">
<img src="#">
</a>
</body>
rel در تگ a
اتریبیوت rel ارتباط موضوع را با لینک داده شده مشخص می کند، برای مثال تعیین می کند که لینک قرار داده شده follow یا nofollow باشد. توجه داشته باشید که این ویژگی بدون href معنایی ندارد و همیشه با href استفاده می شود. در ادامه فهرست انواع rel را برای شما قرا داده ایم:
- prefetch
- prev
- search
- tag
- help
- license
- next
- nofollow
- alternate
- author
- bookmark
- noreferrer
اگر علاقه مند به کسب اطلاعات بیشتر در زمینه اتریبیوت ها و اچ تی ام ال سی اس اس هستید، پیشنهاد می کنیم از صفحه آموزش html css دیدن فرمایید.
استایل های تگ a
یکی از خصوصیات html، این است که با استفاده از سی اس اس استایل می گیرد. در ادامه لیست استایل های تگ a به همراه کاربرد آن ها را برای شما قرار داده ایم:
- text-decoration: این سی اس اس که در ابتدای مقاله نیز گفته شد برای برداشتن خط زیر تگ a استفاده می شود.
- font-family: برای تعیین خانواده فونت استفاده می شود.
- font-size: اندازه فونت را با استفاده از font-size، تعیین می کنند.
- color: برای رنگ نوشته لینک استفاده می شود.
- background-color: اگر بخواهید تگ خود را به شکل یک دکمه در بی آورید و یا به پس زمینه آن یک رنگ بدهید، باید از این سی اس اس استفاده کنید.
- border-radius: در صورت داشتن رنگ در پس زمینه لینک، می توانید به آن انحنای مرز دهید.
اگر قصد ساخت یک سایت را دارید، توصیه می کنیم در صفحه تگ div، تمامی ویژگی ها و خصوصیات این تگ را یاد بگیرید چرا که شناخت کامل و استفاده درست از این تگ، به سئو و نظم سایت شما کمک بسزایی می کند.
سوالات متداول
تگ a در html به معنای لینک دهی می باشد. داخل مقاله به صورت جامع در رابطه با آموزش تگ a در html صحبت کرده ایم.
مهمترین ویژگی تگ a عنصر ویژگی href است که مقصد پیوند را نشان می دهد.
اگر تگ فاقد ویژگی href باشد، تنها یک مکان نگهدار برای یک لینک است. داخل مقاله در رابطه با ویژگی تگ a در html به صورت جامع صحبت کرده ایم.
هیچ دیدگاهی برای این محصول نوشته نشده است.