جلسه دهم : آشنایی با عنصر لینک

تا کنون آموختیم چگونه یک متن را به صفحه وب اضافه کنیم و با انواع ورود متن ها و تفاوت انها نیز آشنا شدیم در این بخش قصد داریم به بررسی عنصر دیگری از HTML بنام عنصر لینک که با کلمه a همانند عکس بالا که مخفف کلمه anchor یا لنگر می باشد بپردازیم

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

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

تگ a دارای ویژگی های است که در ادامه به توضیح ان می پردازیم .

اولین نکته ای که باید در اینجا اشاره شود این است که تگ a اگر دارای خاصیت href (Hypermedia Reference ) یا همان ابر مرجع نباشد دارای خاصیت لینک بوده اما قابلیت کلیک و یا اتصال به صفحه ی دیگری را ندارد .

مهمترین خصوصیات به صورت زیر می باشد:

1. Href : همین طور که گفتیم مهم ترین ویژگی عنصر لینک که در درون تگ نوشته می شود خاصیت href می باشد این ویژگی به تگ می گوید که به کدام صفحه یا کدام بخش صفحه ارجاع داده شود .

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

به مثال زیر توجه کنید

همان طور که در مثال مشاهده می کنید متنی که در بین دو تگ a نوشته شود این قابلیت را دارد که لینک شود ( این متن بصورت پیش فرض دارای زیر خط می باشد ، ما در بخش اموزش Cssبه شما می اموزیم که چگونه این خط را بر دارید )

به طور پیش فرض، لینک ها به صورت زیر در همه مرورگرها ظاهر خواهند شد :

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

اگر دقت کرده باشید در صورتی که بخواهیم لینک به یک صفحه یا وب سایتی خارج از وب سایت ما ارجاع داده شود حتما می بایست از عبارت Http:// برای href مورد استفاده قرار دهیم در غیر این صورت اگر عبارت http را نگذاریم صفحه ارجاع داده شده صفحه ای درون وب سایت ما است .

نوعی دگیری از لینک که اغلب برای ارجاع به منبع یک مقاله ( در درون صفحه ) مورد استفاده قرار می گیرد استقاده از خصوصیت Id برای نقطعه ارجاع و استفاده از # نام id برای لینک جهت ارجاع مورد استفاده قرار می گیرد .

 

1. Target:

خصوصیت target جهت طریقه ی باز شدن لینک در مرورگر را مشخص می کند که دارای مقادیر زیر می باشد

 

_blank

 

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

_self

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

_top :

در صورتی که Target top انتخاب شود و در صورت کلیک صفحه جدید به اندازه تمام صفحه مرورگر خواهد بود

 

_parent :

در صورت کلیک بر روی لینک ،صفحه جدید لینک شده در درون قالب پدر خود باز خواهد شد .

برای فهم بهتر تفاوت بر روی لینک زیر کلیک کنید

لینک

hreflang :

استفاده از خصوصیت hreflang تاثیر در نحوه نمایش لینک نخواهد گذاشت بیشتر برای فهم موتور جستجوگر از نوع زبان لینک مورد استفاده قرار می گیرد ( استفاده از hreflang بسیار در مفهوم Seo کاربرد دارد. به ویژه اگر وب سایت شما دارای دو زبان جداگانه باشد ) بطور مثال برای زبات فارسی از دو حرف fa و برای زبان انگلیسی از دو حرف EN می توانید استفاهد کنید ( لیست زبان ها )

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

Rel :

خصوصیت rel که مخفف کلمه relation یا ارتباط می باشد به جهت بهینه سازی موتور های جستجوگر یا SEO مورد استفاده قرار می گیرد.

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

بطور مثال با انتخاب گزینه Author شما می گوید که لینک به صفحه مورد نظر ، لینک به نویسنده صفحه فعلی ( مقاله یا خبر ) می باشد .

Nofollow :

به موتور جستجو گر این نکته رو اشاره می کنید که این لینک را پیگری نکند ( بطور مثال لینک های پرداخت )

Media :
با استفاده از خاصیت که برای مفهوم seo کاربرد دارد ، شما مشخص میکند که اسناد لینک شده برای چه رسانه ها یا دستگاه هایی بهینه سازی شده اند بطور مثال اگر صفحه ای که قرار است لینک شود برای رزولوشن تلویزیون  طراحی شده است  بهتر است از گزینه media = tv  استفاده کنید

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

این ویژگی جالب در مرورگر اینترنت اکسپلورر پیشتیانی نمی شود . جهت آشنایی با مرور گر های که این ویژگی ار پشتیبانی می کنند می توانید از لینک زیر استفاده کنید ( لینک )