آموزش تگ a در HTML
آموزش تگ a در HTML
دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با آموزش تگ a در HTML به صورت کامل آشنا بشید.
تگ a در HTML
تگ a که از کلمه انگلیسی ( Anchor ) گرفته شده است، تگی است که ما با بکار بردن آن میتوانیم یک لینک را در یک صفحه ی وبسایت ایجاد کنیم. و این لینک این امکان را به کاربر میدهد تا از یک صفحه به صفحه ای دیگر در یک وبسایت یا در کل فضای اینترنت منتقل شود.
بصورت از پیش تعیین شد یک لینک دارای سه حالت کلی زیر است:
- لینکی که هنوز روش کلیک انجام نشد _ ( زیر آن یک خط کشید شد و رنگش آبی است )
- لینکی که روش کلیک انجام شد – ( زیر آن یک خط کشید شد و رنگش بنفش است )
- لحظه ی کلیک روی لینک – ( زیر آن یک خط کشید شد و رنگش قرمز است )
زمانی که ماوس بروی یک لینک قرار میگیرد معمولا علامت کرسر آن به شکل یک دست تبدیل می شود، اما باز به سیستم عامل و تِم سیستم تون بستگی داره و ممکنه شکل اون کمی متغیر باشه.
راستی اگر دنبال آموزش html css پروژه محور هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید.
مثال از تگ a در HTML
در ادامه ی آموزش html و css میتوانید یک مثال از این تگ را مشاهده کنید.
اولین مثال : ایجاد یک لینک به سایت وردپرس پوش
<body> <a href="https://wppush.ir/">برو به سایت وردپرس پوش</a> </body>
دومین مثال : ایجاد تصویر لینک دار ( تصویری که بتوان بروی آن عملیات کلیک را انجام داد )
<body> <p>بروی تصویر زیر کلیک کنید</p> <a href="https://https:/wppush.ir/"> <img src="images/logo-1.png"> </a> </body>
سومین مثال : لینک به ایمیل
<body> <a href="mailto:info@wppush.ir?subject=test&body=test" target="_top"> ارسال ایمیل </a> </body>
چهارمین مثال : لینک به شماره تماس ( تلفن )
<body> <a href="tel:09338776735">تماس تلفنی با ما</a> </body>
پنجمین مثال : لینک داخل صفحه ای برای انتقال کاربر از آخر صفحه به اول صفحه
<!DOCTYPE html> <html id="Top"> <body> <a href="#Top">برو بالای صفحه</a> </body> </html>
شیشمین مثال : نحوه ایجاد کردن یک لینک نوفالو ( nofollow ) – زمانی که ربات های جستجوگر ببینن یک لینک نوفالو است، دیگه به دنبالش نمیرن و در نتیجه هیچ رابطه ای از نظر اون ربات بین سایت شما و اون لینک [ سایت ] موجود نخواهد بود. بیشتر کاربرد سئو داره.
<body> <a href="https://wppush.ir/" rel="nofollow">wppush.ir</a> </body>
هفتمین مثال : ساخت لینک جذاب و زیبا – وقتی ماوس برروی لینک قرار بگره یه خط از وسط به دو طرفش کشید میشه
<div style="text-align:center;"> <a href="https://wppush.ir/">سایت وردپرس پوش</a> <a href="https://wppush.ir/">سایت وردپرس پوش</a> <a href="https://wppush.ir/">سایت وردپرس پوش</a> </div>
هشتمین مثال : باز شدن لینک در حالت های نمایشی مختلف
<body> <a href="https://wppush.ir/" target="_self">Self</a> <br> <a href="https://wppush.ir/" target="_blank">Blank</a> <br> <a href="https://wppush.ir/" target="_parent">Parent</a> <br> <a href="https://wppush.ir/" target="_top">Top</a> </body>
پشتیبانی مرورگرها
در جدولی که در پایین مشاهده می کنید به این نتیجه می رسید که آیا مرورگرهای اینترنتی از تگ a در HTML پشتیبانی میکنند یا خیر.
جدول صفات تگ a در HTML
در جدول زیر میتوانید مشاهده کنید که چه صفات و چه مقادیری را میتوان در این تگ استفاده کرد.
پشتیبانی از صفات و رویدادهای عمومی
تگ a قابلیت پشتیبانی از تمام صفات عمومی و رویدادهای عمومی را در HTML دارد.
نکات و توضیحات
- صفات download, hreflang, media, rel, target و type تنها در صورتی کار خواهند کرد که در تگ
aصفت href موجود باشد. - یک لینک بشکل از پیش تعیین شده زمانی که بروی آن کلیک شود در همان صفحه ی جاری صفحه را باز میکند. ولی ما با بکاربردن صفت Target میتوانیم این حالت را به دلخواه و سلیقه ی خود تغییر بدهیم. ( همانند مثال شماره هشت )
دستورات CSS پیش فرض
غالبا مرورگرها تگ a را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
a:link, a:visited {
color: (internal value);
text-decoration: underline;
cursor: auto;
}
a:link:active, a:visited:active {
color: (internal value);
}
توصیه ما به شما دوست عزیزم این است که با شرکت در دوره ی آموزشی html css در این موارد بسیار مهارت پیدا کنید تا بتوانید علاوه بر طراحی سایت برای خودتان و حتی دیگران و درآمد زایی برای خود درک بهتر و بیشتری راجع به این مطالب پیدا کنید.
ما سعی کردیم در این دوره از مثال های کوچک و کاربردی استفاده شود تا مطالب به صورت کامل برای شما عزیزان قابل فهم باشه این دوره درواقع سطح پیشرفته تر و کامل تر برای دوره html & css میباشد.
در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید
دیدگاهتان را بنویسید