طراح جوان

tarrah-javan page backgroung

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


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

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

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

1399/7/23


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

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

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

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

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

مثال شماره ۲

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

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

مثال شماره ۳

لینک به ایمیل

<body>
 <a href="mailto:[email protected]?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