آشنایی با تگ a در html و صفات آن

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

در آموزش زیر به سوالات زیر پاسخ می دهیم:

  • چطوری در html لینک ایجاد کنیم؟
  • چگونه با توجه به رویدادهای مختلف استایل بدهیم مثلا کلیک موس، هاور شدن و …؟
  •  id و class در html چیست و باهم چه تفاوتی دارند؟
  •  چطوری در یک صفحه بوک مارک ایجاد کنیم؟(کاربر با کلیک روی یک عبارت به جای دیگری در همان صفحه پرش کند)

با ما همراه باشین  ;-) 

ساده ترین ساختار تگ a در html

تگ <a></a>: با  استفاده از این تگ می توانیم لینک ایجاد کنیم ، لینک به کجا؟ به هر جایی ، به مکانی داخل سایت خودمون یا مکانی خارج سایت. یکی از فایده های این تگ بهبود اهداف سئو و بهتر دیده شدن در میان رقبا می باشد( پس توصیه می کنم خوب یاد بگیرید تا ازش استفاده کنید).

ساده ترین ساختار تگ <a> به شکل زیر می باشد:

<a   href=”http://#”>  نوشته ای که کاربر با کلیک روی آن به لینک داده شده هدایت می شود  </a>

مثل:

<a   href=https://dazhyarco.net  >داژیار پردازش ایساتیس  </a>

صفت href: 

این صفت آدرس مکانی که می خواهیم به آن لینک بدهیم را مشخص می کند، (تگ a در html با این صفت معنا پیدا می کند. پس در ساده ترین ساختار هم باید نوشته شود.)

توجه داشته باشید آدرس باید با پروتکل http یا https باشد.(بدون پروتکل هم تست کنید)

بین تگ <a></a>  : متنی است که کاربر با کلیک روی  آن به جایی که لینک داده ایم هدایت می شود.( مجیور نیستیم حتما متن بنویسیم بلکه می توانیم هر تگی بین تگ <a></a> بنویسیم. مثلا یک تصویر ایجاد کنیم که کاربر با کلیک روی آن به لینک مورد نظر هدایت شود(تگ تصویر را در جلسات بعد خواهیم گفت)

مثال ساده آن را در تصویر زیر می توانید ببینید:

صفات دیگر تگ a

تگ <a> علاوه بر href چند تا صفت مهم دیگر هم دارد که یکی یکی آن ها را توضیح خواهیم داد:

صفت download:

این صفت فقط برای زمان هایی استفاده می شود که می خواهیم به صورت مستقیم لینک بدهیم تا یک فایل صوتی، تصویری، pdf یا هر چیز دیگری دانلود شود. ( لینکی که به href می دهیم به .mp4 یا .mp3 یا .pdf یا…ختم می شود)

<a   href=”مسیر فایلی که می خواهید دانلود شود“    download >متنی که به کاربر نمایش می دهد </a>

صفت hreflang:

زبان مکانی که به آن لینک داده شده را نشان می دهد.

<a  href=”مسیری که لینک داده می شود“   hreflang=”fa”>متنی که به کاربر نمایش می دهد</a>

مثال:

<a  href=” https://dazhyarco.net “ hreflang=”fa”>سایت فارسی زبان داژیار</a>

صفت target:

این صفت هم اکثر مواقع استفاده می شود. با این صفت مشخص می کنیم که لینک در همین صفحه باز شود یا در صفحه جدید.

این صفت دو مقدار پرکاربرد می تواند داشته باشد:

  • self_ : یعنی عبارت لینک شده در همین پنجره باز شود(به صورت پیش فرض این صفت برابر _self می باشد پس حتی اگر صفت target را استفاده نکنیم در همین صفحه باز می شود ) مثال:

<a   href=” https://dazhyarco.net ”  target=”_self “> داژیار </a>

  • blank_: یعنی عبارت لینک شده در پنجره جدید باز  شود.

<a   href=” https://dazhyarco.net ”  target=”_blank “> داژیار </a>

البته سه مورد دیگه هم وجود داره که فقط نام می برم چون مربوط به بحث ما نمی شوند(parent، _top، framename_).

اینا رو همینجوری نخونین و رد بشینا! یکی یکی در سند html خودتون بزنید و نتیجه رو ببینین!  ;-)

صفت rel:

این صفت مقادیر مختلفی می تواند داشته باشد که از مهمترین آن ها می توانیم به دو مقدار زیر اشاره کنیم که به سئو سایت مربوط می شود:

  • Follow: با دادن این مقدار به صفت rel ، به ربات های گوگل پیغام می دهیم که من این لینک را تایید می کنم.
  • Nofollow : با دادن این مقدار به صفت rel ، به ربات های گوگل پیغام می دهیم که من این لینک را تایید نمی کنم.

نحوه استایل دهی به تگ <a>

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

فایل style.css که جلسات قبل ایجاد کرده بودیم را باز می کنیم و کدهای زیر را در آن تایپ می کنیم:

a{
                color : #ff33ff;
                text-decoration : none;
}

توضیح کد:

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

Color: قبلا هم گفتیم رنگ متن را مشخص می کند.

text-decoration  : این خصوصیت مربوط به خطی است که زیر لینک ها کشیده می شود، چهار مقدار می تواند داشته باشد:

  • none: بدون خط
  • Overline: خط بالای متن قرار بگیرد.
  • line-through: خط روی متن قرار بگیرد.
  • underline: خط زیر متن قرار بگیرد.(به صورت پیش فرض text-decoration برابر این مقدار است)

استایل هایی که در جلسات قبل هم معرفی کردیم روی آن اعمال کنید تا کاملا آشنا شوید  :-)

معرفی سلکتورهای رویدادی (اجرای استایل ها موقع رویدادها )

خب در ادامه می خواهیم چهارتا سلکتور معرفی کنیم که استایل ها را موقعی روی المان اعمال می کنند که رویدادی اتفاق بیفتد :

  • hover: وقتی با موس روی المان برویم استایل اعمال می شود.
  • Focus: وقتی که رو المانی کلیک شود استایل ها اعمال می شود و تغییرات تا زمانی که روی المان دیگری کلیک نشده باقی می مانند.
  • Visited: این سلکتور فقط روی تگ <a> کار می کند. وقتی روی لینکی کلیک شود و آن لینک باز شود ، استایل های این سلکتور اعمال می شوند.
  • Active: مشابه سلکتور Focus می باشد با این تفاوت که فقط در لحظه کلیک استایل ها اعمال می شوند و استایل ها باقی نمی مانند.

کدهای html 

خب یک مثالی میزنیم همراه با ما تایپ کنید تا مفهوم این چهار تا سلکتور را بهتر درک کنیم، اگر کدهای html را به شکل زیر در نظر بگیرم:

<!DOCTYPE html>
<html  lang=”fa” dir=”rtl”>
    <head>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
<meta charset=”utf-8″>
      <title>
          اینجا عنوان سایت است
      </title>
   </head>
    <body>
      <h1><a  class=”classa”  href=” https://dazhyarco.net “  target=”_blank”>لینک 1:داژیار پردازش ایساتیس</a><h1>
<h2><a   class=”classb” href=” https://dazhyarco.net ”  target=”_self”>لینک 2: داژیار پردازش ایساتیس</a><h2>
<h3><a   class=”classc” href=” https://dazhyarco.net “   target=”_blank”>لینک 3: داژیار پردازش ایساتیس</a><h3>
<h4><a   class=”classd” href=” https://dazhyarco.net “  target=”_self”>لینک 4: داژیار پردازش ایساتیس</a><h4>
   </body>
</html>

یه توضیح کوچیک درباره id و class بدم:

معرفی دو صفت id و class

نکته : هر المانی را  می توانیم با دو تا صفتِ id و class نامگذاری کنیم تا به راحتی در طول طراحی سایت هر جا خواستیم به آن المان اشاره کنیم، از id یا class استفاده کنیم.

تفاوت id و class:

  • صفت id برای هر المان منحصر به فرد است یعنی نباید دو المان id یکسانی داشته باشند ولی صفت class می تواند تکراری باشد.
  • المان با صفت id را با علامت # و المان با صفت class را با . فراخوانی می کنیم.

(برای استایل دهی در جلسه سوم به این دو صفت اشاره کردیم در جلسات آینده بیشتر توضیح خواهیم داد)

کدهای CSS 

و کدهای css را به شکل زیر در فایل style.css وارد می کنیم:

a{
color:#ff33ff;
text-decoration:none;
}
.classa:hover{
background: rgba(39,221,152, 0.8);
}
.classb:focus {
background-color: red;
}
.classc:visited {
background-color:yellow;
}
.classd:active {
background-color: #c40951 ;
}

نهایتا اجرا می گیریم و نتیجه را می بینیم.

نکته:در مثال بالا سه مدل مقدار دهی رنگ را استفاده کردیم در مدل (rgba(39221,152,0.8 سه عدد اول بین 0تا 255 می باشد و مقدارهای قرمز، سبز، آبی را مشخص می کند و عدد چهارم مقدار شفافیت را نشان می دهد که بین 0 تا 1 می باشد. تست کنید تا بهتر متوجه شوید.

هدایت کاربر به یک المان داخل صفحه با استفاده از تگ a (ایجاد بوک مارک)

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

به صورت کلی ساختار آن به صورت زیر است:

ایجاد بوک مارک: اول یک صفت id برای المان مورد نظری که می خواهیم کاربر به آن هدایت شود، تعریف می کنیم:

<p   id=”par”>می خواهیم کاربر به این المان هدایت شود</p>

لینک به بوک مارک: سپس در هر جایی که دوست داریم لینک زیر را می نویسیم تا کاربر با کلیک روی عبارت “برو به …” به پاراگراف p هدایت شود :

<a   href=”#par”> برو به… </a>

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

تگ
<a> برای ایجاد لینک
property در css
نام مقادیر
 توضیح
text-decoration none، Overline ،line-through، underline مشخص کردن خصوصیت خط زیر لینک
صفات تگ a
نام مقادیر
 توضیح
href آدرس url لینک مشخص کننده آدرس url لینک
download – لینک دهی مستقیم به فایل تصویری، صوتی و …
hreflang مثل fa مشخص کننده زبان مکان هدف
target blank_  و self_ لینک در همین صفحه باز شود یا در صفحه جدید
rel
 Nofollow  و  Follow لینک فالو شود یا خیر
سلکتورهای رویدادی
نام مقادیر
 توضیح
hover: وقتی با موس روی المان برویم استایل اعمال می شود
focus: وقتی که رو المانی کلیک شود استایل ها اعمال می شود و تغییرات تا زمانی که روی المان دیگری کلیک نشده باقی می مانند.
Visited: این سلکتور فقط روی تگ <a> کار می کند. وقتی روی لینکی کلیک شود و آن لینک باز شود ، استایل های این سلکتور روی لینک اعمال می شوند.
Active: مشابه سلکتور focus می باشد با این تفاوت که فقط در لحظه کلیک استایل ها اعمال می شوند و استایل ها باقی نمی مانند.

در آموزش جلسه بعد به تگ img یا تصویر در html می پرازیم.

باز هم تاکید می کنم اگر خودتون دست به کار نشین و کد نزنید، خوندن این مطالب هیچ فایده ای نداره! اگر سوال یا نظری دارین میتونید از طریق دیدگاه زیر همین پست با ما در ارتباط باشین. شاد باشید  ;-) 

به این مقاله چند تا ستاره میدی؟
[تعداد رای: 11 امتیاز: 4.3]