جلسه ی دهم : لینک ها و تگ a

لینک ها و تگ aدر این جلسه می خواهیم درباره لینک های موجود در زبان HTML و CSS و نحوه ی استفاده از آن ها صحبت نماییم همچنین در مورد تگ a توضیحات کافی را خواهیم داد.

(برای دیدن آموزش Html به زبان ساده کلیک کنید )

uRl چیست؟؟

url مخفف Uniform Resource Locator است یعنی روشی هماهنگ و یکپارچه برای مشخص نمودن محل منابع در فضای دیجیتال. (به زبان ساده تر یعنی آدرس محل قرار گرفتن فایل های اینترنتی) همه ی ماها می دانیم url چیست اما شاید آن را به اسم نشناسیم برای مثال به آدرس همین پست توجه کنید.

https://www.kamyabiha.com/links/

این ادرس یک url می باشد. به بخشی که نوشته شده https توجه کنید این بخش پروتکل امنیتی سایت می باشد. این پروتکل ها دو نوع می باشند، http:// و https:// که پروتکل https:// دارای امنیت بیشتری می باشد.

www.kamyabiha.com

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

/links

این بخش آدرس جایی می باشد که ما قصد رفتن به آن را داریم.

url چیست

چرا به ادرس دهی در سایت نیازمندیم؟

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

دلیل دیگر این است که ما نمی توانیم همه ی فایل های خود را درون کد های خود قرار دهیم و باید بعضی از آن ها را از طریق آدرسشان فرا خوانی کنیم.

 

نحوه ی آدرس دهی یک فایل در کد نویسی؟

در آدرس دهی ها ابتدا باید بدانید که در کجا هستید و به کجا کی خواهید بروید. محلی که فایل HTML شما قرار دارد مکانی می باشد که شما در آن حضور دارید و باید ادرس دهی را از آن پوشه شروع نمایید. (به نوعی خانه ی شما می باشد)

 

مرحله ی اول

ابتدا از ساده ترین شیوه شروع می کنیم، فرض می کنیم فایل مورد نظر ما دقیقا در همان پوشه می باشد یعنی فایل HTML و فایلی که به آن احتیاج داریم کنار هم می باشند، پس برای ادرس دهی کافیست نام فایل را به همراه فرمت آن فراخوانی کنیم. مانند کد زیر:

"img.PNG"

مرحله ی دوم

حال فکر کنید فایل مورد نظر شما در یک پوشه در کنار فایل HTML قرار دارد و می خواهید آن را از پوشه ی خودش فراخوانی کنید. آنگاه کافیست ابتدا یک ( / ) بگذارید سپس نامو پوشه ی مورد نظر خود را بنویسید سپس یک ( / ) دیگر و آنگاه نام فایل و نوع فرمت آن را می نویسیم. مانند کد زیر:

"/نام پوشه ی مورد نظر/img.PNG"

مرحله ی سوم

حال شاید فایل مورد نظر شما یک پوشه عقب تر از فایل HTML شما باشد و شما به آن نیاز دارید برای اینکه آن فایل را فراخوانی کنید کافیست یک پوشه به عقب برگردید برای اینکار کافیست از علامت ( ../ ) استفاده کنید با این کار شما یک پوشه به عقب بر می گردید سپس نام فایل مورد نظر خود را با فرمت آن فراخوانی کنید.

“../img.PNG”

 

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

 

نکته: برای اینکه ادرس خود را در فایل HTML بنویسیم آن را داخل دابل کوتیشن ( ” “ ) قرار می دهیم اما اگر بخواهیم همین ادرس را در فایل CSS فراخوانی کنیم کافیست آن را داخل تک کوتیشن ( ‘ ‘ ) قرار دهیم.

 

تگ a

از تگ a برای اضافه کردن لینک در وب سایت خود استفاده می کنیم حال این لینک می تواند به یک متن یا عکس یا هر چیز دیگری در وب سایت ما اضافه شده باشد. تگ a درای attribute ( ویژگی ) های بسیاری می باشد که عبارتند از:

  1. href
  2. target
  3. rel
  4. download
  5. hreflang
  6. media

 

ویژگی  href

خاصیت href که از نوع URL است که مهم ترین و پر کاربرد ترین attribute تگ a می باشد. ( بدون این ویژگی تگ a هیچ ارزشی ندارد😐  ) . همانطور که گفتیم از تگ a برای اضافه کردن لینک به وب سایت خود اضافه می کنیم اما نگفتیم که این تگ را کجا قرار می دهیم.

ادرس مقصد مورد نظر خود را کپی می نماییم و آن را مقابل ویژگی href قرار می دهیم این خاصیت شامل آدرس صفحه یا فایلی است که با کلیک بر روی آن پیوند باز خواهد شد ، برای اینکه نحوه ی استفاده از تگ a را متوجه شوید به مثال زیر توجه کنید :

<a href="https://kamyabiha.com/" > این متن دارای لینک می باشد </a>

خروجی کد :

تگ a

 

ویژگی  targe

از ویژگی Target برای نحوه ی باز شدن لینک صفحه در تگ a استفاده می شود. این ویژگی دارای چهار حالت مختلف می باشند که هر کدام کارایی های متفاوتی دارند.

 

حالت _blank: برای اینکه بخواهیم صفحه ای که کاربر در آن حضور دارد حفظ شود و لینک در صفحه ی دیگر باز شود از مقدار _blank استفاده می کنیم. از طریق این ویژگی لینک مورد نظر ما در یک Tab دیگر باز می شود. معمولا دلیل استفاده از ویژگی target برای حالت blank_ می باشد که لینک را در یک صفحه ی جدید باز می کند.

 

حالت _parent: از این حالت برای باز شدن لینک در همان صفحه ی مادر استفاده می شود.

 

حالت _self: این حالت به شما این امکان را می دهد که صفحه قبلی را حفظ کنید و بدون در نظر گرفتن آن از راه لینک به صفحه جدید پیش بروید.

 

حالت _top: از این ویژگی برای باز شدن لینک در همان پنجره ای که کلیک شده است به کار می رود.

به نمونه کد زیر توجه کنید:

<a target="_blank" href="https://kamyabiha.com/"> این متن دارای لینک می باشد  </a>

 

نکته: به طور کلی خروجی حالات _parent ، _self و _top در ظاهر مشابه یکدیگر می باشند.

 

ویژگی  rel

ویژگی rel که ارتباط بین صفحه و سند فعلی را با سند یا صفحه ی مقصد نشان می دهد. در مقابل این ویژگی مقادیر مختلفی می توان نوشت که عبارتند از :

 

Alternate: از مقدار Alternate جهت فراهم کردن یک ارتباط بین سند فعلی با نسخه ی جایگزین سند فعلی استفاده می شود.

 

Author: از مقدار author زمانی استفاده می شود که ما بخواهیم ارتباط مطلبی را با نویسنده یا نویسندگان آن مطلب فراهم کنیم. این مقدار برای نویسندگانی که از Google+ بهره می برند انتخاب خیلی خوبی است.

 

Bookmark: از مقدار Bookmark زمانی به کار می رود که ما بخواهیم مطلبی (را که اصولا در صفحه ی اول قرار دارد) به آدرس اصلی آن ارتباط دهیم. یعنی خود مطلب در صفحات عقب تر می باشد اما با این کار ما مطلب خود را در صفحه ی اول میبینیم.

 

External: از مقدار External زمانی استفده می کنیم که می خواهیم تعیین کنیم سند منبع بخشی از سایتی شبیه به سند سایت فعلی نمی باشد و کار این دو سند همانند یک دیگر نیست.

 

help: از مقدار help زمانی به کار می رود که ما می خواهیم بین سند فعلی و سند راهنما ارتباطی برقرار کنیم. البته باید گفت که این مقدار برای سایت هایی استفاده می شود که دارای سند راهنما می باشند.

 

License: از مقدار License زمانی استفاده می کنیم که ما بخواهیم بین سند فعلی و سندی که حاوی اطلاعات مربوط به قوانین کپی رایت سند است ارتباط برقرار نماییم. (همون قانونیه که تو ایران کسی بهش اعتقادی نداره :))

 

Nofollow: از مقدار Nofollow زمانی استفاده می کنیم که ما از یک لینک تایید نشده در سندمان استفاده کنیم (مانند لینک های تبلیغاتی) و می خواهیم به موتورهای جستجویی مانند گوگل بفهمانیم که آن را دنبال نکرده و به آن اهمیت ندهند. به نوعی از این طریق لینک مورد نظر خود را بی ارزش می کنیم تا رتبه ی سایت خود را از دست ندهیم.

 

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

 

Noopener: از مقدار Noopener زمانی استفاده می شود که محتوایی در سند بر اساس ارتباط با لینکی که دارای باز کننده ی مشخصی نیست و عملا غیر مفید است ، ساخته شده باشد.

 

Prev: از مقدار Prev زمانی استفاده می شود که ما بخواهیم تعیین کنیم صفحه و سند فعلی بخشی از یک مجموعه ی صفحات است و سند و صفحه ای که به عنوان منبع سند جاری می باشد ، در اصل صفحه قبلی می باشد. (سعی کنید استفاده نکنید من خودم گیجم تو این یه مورد :))

 

Search: از مقدار search زمانی استفاده که ما بخواهیم یک ارتباط با ابزار جستجوی سند فعلی برقرار نماییم.

 

Tag: از مقدار tag برای نوشتن یک برچسب یا یک کلمه کلیدی برای محتوای سند استفاده می شود.

نکته: معمولا پر کاربرد ترین ویژگی rel حالت Nofollow می باشد.

به نمونه کد زیر توجه کنید:

<a href="https://kamyabiha.com/" rel="nofollow" > این متن دارای لینک می باشد </a>

ویژگی  download

از ویژگی download برای دانلود لینک مورد نظر استفاده می شود یعنی لینک مورد نظر شما به صورت خودکار دانلود خواهد شد. معمولا بعضی ها از نرم افزار هایی مثل IDM، ADM و … برای دانلود استفاده می کنند این نرم افزار ها قابلیت خواندن لینک های دانلود را دارند. ما از این تگ را برای آن دسته از افرادی می گذاریم که از این نرم افزار ها استفاده نمی کنند. برای فهم بیشتر به نمونه کد زیر توجه کنید:

<a href="https://kamyabiha.com/" download > این متن دارای لینک می باشد  </a>

ویژگی  hreflang

از ویژگی hreflang برای تعیین زبان لینک مقصد استفاده می شود.به نومنه کد زیر توجه کنید.

<a href="https://kamyabiha.com/" hreflang="en-us" > این متن دارای لینک می باشد  </a>

ویژگی  media

با استفاده از ویژگی media می‌توانیم تعیین کنیم که فایل مورد نظر ما بر روی چه رسانه ای قابلیت اجرایی داشته باشد.

 

خلاصه مطلب:

  1. url مخفف Uniform Resource Locator است یعنی روشی هماهنگ و یکپارچه برای مشخص نمودن محل منابع در فضای دیجیتال.
  2. از تگ a برای اضافه کردن لینک در وب سایت خود استفاده می کنیم حال این لینک می تواند به یک متن یا عکس یا هر چیز دیگری در وب سایت ما اضافه شده باشد.
  3. خاصیت href که از نوع URL است که مهم ترین و پر کاربرد ترین attribute تگ a می باشد.
  4. برای اینکه بخواهیم صفحه ای که کاربر در آن حضور دارد حفظ شود و لینک در صفحه ی دیگر باز شود از مقدار _blank استفاده می کنیم.
  5. ویژگی rel که ارتباط بین صفحه و سند فعلی را با سند یا صفحه ی مقصد نشان می دهد.
  6. معمولا پر کاربرد ترین ویژگی rel حالت Nofollow می باشد.
  7. از این ویژگی برای دانلود لینک مورد نظر استفاده می شود یعنی لینک مورد نظر شما به صورت خودکار دانلود خواهد شد.
  8. از این ویژگی برای تعیین زبان لینک مقصد استفاده می شود.
  9. با استفاده از ویژگی media می‌توانیم تعیین کنیم که فایل مورد نظر ما بر روی چه رسانه ای قابلیت اجرایی داشته باشد.
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

دیدگاه ها
  • قبل از ارسال دیدگاه خود قوانین بخش دیدگاه ها را مطالعه کنید. ارسال دیدگاه به معنی پذیرش این قوانین است. قوانین بخش دیدگاه ها