آموزش کامل HTML و HTML5: کار با لینک ها

آموزش کامل HTML و HTML5: کار با لینک هاReviewed by محمدرضا on Jan 17Rating: 5.0

سلام دوستان عزیز در این جلسه قصد معرفی و چگونگی استفاده از لینک ها را در HTML داریم.

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

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

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

همان طور که گفتیم این تگ مسئول لینک کردن است. محتوای لینک شده می تواند یک متن ساده و یا یک عکس و یا ترکیبی از این دو باشد.

در زیر ما متن “فاب تم” را به سایت فاب تم لینک میکنیم که در خروجی اگر برو روی متن “فاب تم” کلیک کنید به سایت فاب تم خواهید رفت.

<a href="http://www.fabtheme.ir" target="_blank"> فاب  تم </a>

 صفت های تگ <a>:

href : این صفت همان صتی است که متن یا عکس را به سایت مورد نظر ارجاع می دهد. مقدار این صفت برابر لینکی است که میخواهیم به آن جا ارجاع دهیم.

<a href="http://www.fabtheme.ir" target="_blank"> فاب  تم </a>

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

<a name="fab" href="http://www.fabtheme.ir" target="_blank"> فاب  تم </a>

target : این صفت مشخص می کند که لینک در چه صفحه ای باز شودو مقادیر زیر را می تواند دریافت کند.

  • blank_ : لینک مورد نظر را در یک صفحه ی جدید و یا تب جدید باز می کند.
  • self_ : لینک مورد نظر را در همان صفحه باز می کند.
  • top_ : لینک مورد نظر را در صفحه ای بدون فریم باز میکند (اکثرا شبیه مقدار بالایی عمل می کند)
  • parent_ : لینک مورد نظر را در frameset پدر تگ frame باز می کند. (با این تگ در آینده آشنا خواهیم شد)

نکته: تگ <a> صفت های زیاد دیگری هم دارد که به بررسی آن ها نپرداختیم اما شما می توانید خودتان به دنبال آن ها رفته و آموزش های مربوطه را بخوانید چرا که در این آموزش قصد بر این است تا شما را به زبان ساده و خیلی آسان با زبان HTML آشنا کنیم بنابراین تمام سعیمان این است بعد از این آموزش شما این زبان را فرا بگیرید و در صورت نیازتان در آینده به دنبال تگ ها و یا صفت های دیگر بروید اگرچه در انتهای آموزش ها منابع مفید وکاربردی را به شما جهت یادگیری بیشتر خواهیم گفت.

آدرس مطلق و نسبی:

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

http://www.fabtheme.ir/category.php

 آدرس نسبی: در این نوع آدرس دهی ها معمولا از آوردن قسمت های اوایل یک آدرس چشم پوشی می شود مثلا در این نوع آدرس دهی  ها هر چیزی که قبل دامنه ی سایت باشد را در نظر نمیگیریم. به مثال زیر توجه کنید تا کاملا متوجه شوید:

/new/images.png
 
../../new/images.png

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

تگ <base> : برای اینکه از کد نویسی زیاد جلوگیری کنیم میتوانیم از این تگ استفاده کنیم که باعث می شود از یک لینک ثابت و پایه در سایت استفاده کنیم و از آن به بعد از آدرس دهی نسبی استفاده کنیم همچینین می توانیم نوع باز شدن آن لینک را توسط صفت target مشخص کنیم:

<base href="http://www.fabtheme.ir" target="_blank">

نکته: از این تگ باید در تگ head استفاده کنیم.

باید دقت داشته باشید لینک های نوع دیگر هماننده لینک های دانلود یا لینک های ایمیل وجود دارند که نظیر آن ها را در زیر برایتان می آوریم:

<a href="http://www.fabtheme.ir/upload/nwefile.zip"> لینک دانلود </a>

لینک بالا یک لینک دانلود است و با کلیک بر روی ” لینک دانلود ” فایل با فرمت زیپ که مشخص هست دانلود می  شود.

لینک زیر یک نوع لینک ایمیل است:

<a href="mailto:name@example.com"> به ما ایمیل بزنید </a>

بحث لینک ها نیز همین جا به پایان می رسد و از جلسات آینده با این تگ هم میتوانید به راحتی کار کنید.

همان طور که گفتیم تگ <a> صفت های دیگری نیز دارد که به آموزش آنها نپرداختیم اما همان طور که قبلا هم گفتیم میتوانید از سایت w3schools مطالب و صفات و نکات کامل در مورد هر تگ را بخوانید.

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

به عنوان مثال اگر می خواهید به صفحه ی آموزش کامل تگ <a> بروید باید به لینک زیر بروید:

http://www.w3schools.com/tags/tag_a.asp

موفق باشید…

Html Html5 آموزش طراحی رابط کاربری

درباره محمدرضا

دیدگاه خود را بیان کنید