Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

لطفا لحظه ای صبر کنید ...



طراح جوان

tarrah-javan page backgroung

آموزش تگ a یا تگ لینک

آموزش تگ a یا تگ لینک

1399/7/23


توضیح مختصر از تگ a

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

مثال از تگ a در HTML

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

<body> <a href="https://tarrah-javan.ir">اینجا</a> </body>

مثال شماره ۲

ایجاد تصویر لینک دار (تصویری که بتوان بروی آن کلیک کرد)

<body> <a href="https://free-learn.ir"> <img src="https://tarrah-javan.ir/Logo/Logo.png"> </a> </body>

مثال شماره ۳

لینک به ایمیل

<body> <a href="mailto:info@tarrah-javan.ir?subject=test&body=test" target="_top">ارسال ایمیل</a> </body>

مثال شماره ۴

لینک به شماره تماس (تلفن)

<body> <a href="tel:+989397410000">تماس تلفنی با ما</a> </body>

مثال شماره ۵

لینک درون صفحه ای برای انتقال کاربر از پایین صفحه به بالای صفحه

<body> <h2 id="top">Top</h2> <p>Hi,My Name Is tarrah-javan. How Are You?</p> <a href="#top">برو بالای صفحه</a> </body>

مثال شماره ۷

نحوه ایجاد یک لینک نوفالو ( nofollow ) – وقتی ربات های جستجوگر ببینن یک لینک نوفالو هست، دیگه دنبالش نمیکنن و در نتیجه هیچ رابطه ای از نظر اون ربات بین سایت شما و اون لینک [ سایت ] وجود نخواهد داشت.

<body> <a href="#" rel="nofollow">لینکی که نباید دنبال شود</a> </body>

Css برای زیباتر کردن لینک

ساخت لینک جذاب – وقتی ماوس رفت لینک یه خط از وسط به دو طرف کشیده میشه

a{ color: #000; text-transform: uppercase; text-decoration: none; display: inline-block; padding: 5px 0; position: relative; } a:after{ background: none repeat scroll 0 0 transparent; bottom: 0; content: ""; display: block; height: 2px; left: 50%; position: absolute; background: #5db616; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0; } a:hover:after{ width: 100%; left: 0; }

امیدوارم آموزش مفید واقع شده باشه

دانلود فایل ها

برای دانلود وارد اکانت خود شوید و یا از طریق ایمیل خود لینک دانلود را دریافت نمایید

دیدگاه ها

ارسال دیدگاه

نویسنده

tarrah-javan admin

محمد رحیمی

عضویت در خبرنامه

با عضویت در خبرنامه از آخرین آموزش ها مطلع شوید

کلمات کلیدی

تگ a

آموزش تگ لینک

نحوه لینک کردن متن و عکس در html

آموزش لینک کردن سایتی به سایت دیگر

لینک در html a tag html