026-32601

لینک دادن به دیگر صفحات اچ تی ام ال (html)

1 1 1 1 1 (10 Votes)

همانطور که قبلاً توضیح داده شد HTML مخفف واژگان Hypertext Markup language است. گفتیم که منظور از Hypertext این است که Text یا متن در این زبان کاری فرای نمایش تعدادی کاراکتر روی صفحه نمایش انجام خواهد داد. در واقع Text دارای وظایف بسیار بیشتری است که از آن جمله می توان به لینک دادن از طریق Text یا متن به دیگر بخش های سایت یا سایت های دیگر استفاده نمود. برای روشن شدن این مسئله قصد داریم تا یک فایل دیگر اچ تی ام ال در فولدر مربوط به سایت خود ایجاد کرده و به آن لینک دهیم.
پیش از توضیح بیشتر پیرامون لینک های اچ تی ام ال (html) نیاز است تا با مفهوم url آشنا شویم. عبارت url مخفف واژگان Uniform Resource Locator است. به طور کلی هر چیزی که در اینترنت قرار دارد از صفحات اچ تی ام ال (html) گرفته تا تصاویر، ویدیوها و ... دارای آدرسی است که آن آدرس تحت عنوان url شناخته می شود. برای روشن شدن این مطلب یک url را به عنوان مثال مورد بررسی قرار می دهیم:
http://www.netshahr.com/80
همانطور که در مثال فوق می بینیم ابتدا http:// آمده است که در دنیای وب اصطلاحاً Scheme نامیده می شود. به عبارت دیگر http:// پروتوکلی است که مابین مرورگر و وب سرور ارتباط برقرار می سازد (http مخفف واژگان Hypertext Transfer Protocol به معنی "پروتوکل انتقال داده فرامتنی" است.)
سپس نام دامین www.netshahr.com آمده است (لازم به ذکر است که گاهی اوقات آدرس آی پی به جای نام دامین مورد استفاده قرار می گیرد). پس از قرار گرفتن یک علامت / عدد 80 آمده است که اصطلاحاً Port نامیده می شود. به طور خلاصه بایستی گفت که راه های ورود به شبکه های کامپیوتری پورت نامیده می شوند و هر پروتوکلی دارای عدد پورت مخصوص به خود است. به طول مثال عدد پورت پیش فرض برای پروتوکلی http عدد 80 است. نکته جالب توجه در مورد این پورت این است که نوشتن و ننوشتن آن در url هیچ فرقی نمی کند. به عبارت دیگر آدرس http://www.netshahr.com/80 با آدرس http://www.netshahr.com یکی است.
اگر در حین گشت زنی در سایتی به آدرس url توجه کنیم می بینیم که گاهی اوقات این آدرس تغییر می کند. به طور مثال در مورد سایت نت شهر برای آنکه به تصاویر این سایت دسترسی پیدا کنیم می بایست آدرس http://www.netshahr.com/80/images را وارد مرورگر خود می کنیم. images اصطلاحاً path یا "مسیر" نامیده می شود.
اکنون که با مفهوم url در دنیای اینترنت آشنا شدیم، قصد داریم تا با تگ های مرتبط با لینک در زبان اچ تی ام ال (html) آشنا شویم.
به طور کلی به منظور ساخت یک لینک می بایست از تگ های <a></a> استفاده کرد. با استفاده از این تگ می توان یک عکس، کلمه، متن و ... را تبدیل به لینک کرد. در واقع زمانیکه نشانگر موس خود روی یک لینک نگه داریم، نشانگر موس تبدیل به یک علامت دست می شود.
برای این منظور همان روشی را که برای تصاویر پیش گرفتیم برای فایل های اچ تی ام ال هم پیش خواهیم گرفت. به عبارت دیگر در فولدر اصلی سایت یک فولدر دیگر تحت عنوان pages ایجاد کرده و دیگر فایل های اچ تی ام ال (html) سایت را در آن قرار می دهیم (به خاطر داشته باشیم که فایل index.html می بایست در فولدر اصلی سایت باشد):

آشنایی با لینک ها در زبان اچ تی ام ال html

همانطور که می بینیم فولدری تحت عنوان pages به معنی "صفحه ها" در فولدر اصلی سایت ساخته ایم اما این در حالی است که این فولدر خالی است. برای ادامه کار یک فایل جدید حاوی کد زیر تحت عنوان second-page.html ساخته و آن را داخل فولدر pages ذخیره می سازیم:

<!DOCTYPE html>
<html>
  
   <head>
       <title>Second Page</title>
   </head>
  
   <body>
       <h1>This is the second page</h1>
   </body>
</html>

همانطور که در کد فوق می بینیم، عنوان صفحه به Second Page به معنی "صفحه دوم" تغییر یافته است سپس عبارت This is the second page را داخل تگ <h1> قرار داده ایم. حال اگر این صفحه را در مرورگر به نمایش در آوریم با تصویر زیر مواجه خواهیم شد:

صفحه دوم در پروژه طراحی سایت

می بینیم که عنوان صفحه و همچنین عبارتی که داخل تگ <h1> نوشتیم به نمایش در آمده اند. اکنون می خواهیم از داخل فایل index.html به این صفحه لینک دهیم که با کلیک کردن روی متنی به این صفحه ارجاع داده شویم. برای این منظور فایل index.html را به صورت زیر تکمیل می کنیم:

<!DOCTYPE html>
<html>
  
   <head>
       <title>Netshahr</title>
   </head>
  
   <body>
       <p>
           <a href="pages/second-page.html">Go to the second page</a>
       </p>
   </body>
</html>

به طور خلاصه کاری که در کد فوق انجام داده ایم این است که می خواهیم با کلیک کردن روی عبارت Go to the second page به فایل second-page.html ارجاع داده شویم. برای این منظور از تگی تحت عنوان <a> استفاده می کنیم. همانطور که در کد فوق ملاحظه می شود تگ آغازین و پایانی <a> و </a> را دو طرف متنی قرار می دهیم که می خواهیم تبدیل به یک لینک شود (حرف a مخفف کلمه anchor به معنی "لنگر" است). در تگ آغازین <a> از کلید واژه ای تحت عنوان href استفاده کرده ایم. این کلید واژ مخفف واژگان [H]ypertext [Ref]erence است. سپس یک علامت مساوی قرار داده و پس از آن علامت های "   " را نوشته و سپس آدرس صفحه مد نظر را می نویسیم. در واقع از آنجا که فایل مد نظر ما در فولدر pages قرار دارد ابتدا نام این فولدر را نوشته سپس یک علامت / قرار داده و در نهایت نام کامل فایل مد نظر را می نویسیم. تا اینجای کار توانسته ایم تگ آغازین را تکمیل کنیم. حال بایستی تگ پایانی را هم بنویسیم تا لینک تکمیل گردد. برای این منظور می بایست تگ پایانی را پیش از تگ پایانی </p> بنویسیم. پس از ذخیره کردن فایل مرورگر را به روز رسانی می کنیم:

اضافه کردن لینک به صفحه اصلی اچ تی ام ال

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

second-page

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

   <body>
       <h1>This is the second page</h1>
       <p>
           <a href="../index.html">Go to home</a>
       </p>
   </body>

حال پس از ذخیره کردن فایل، مرورگر را به روز رسانی می کنیم:

go home

می بینیم پاراگرافی که حاوای عبارت Go to home ایجاد کرده ایم در صفحه دوم به نمایش در آمده است. اما اگر خوب به کد فوق توجه کنیم می بینیم که آدرسی که در href وارد کرده ایم با آدرسی که در href در صفحه اصلی وارد کرده بودیم متفاوت است. در واقع دستور ../ این امکان را در آدرس دهی به ما می دهد تا از مکانی که فایل در آن ذخیره شده است یک فولدر خارج شویم. به عبارت دیگر از آنجا که فایل اچ تی ام ال فوق در فولدر pages قرار دارد و فایل index.html که می خواهیم به آن لینک دهیم در فولدر اصلی سایت قرار دارد پس بایستی ابتدا از فولدر pages خارج شویم. برای این منظور ../ را نوشته که با این کار از فولدر pages خارج خواهیم شد و به فولدر اصلی سایت خواهیم رسید. اکنون که در فولدر اصلی سایت قرار داریم به سادگی می توانیم نام فایل index.html را در ادامه آدرس خود بنویسیم.
حال فرض کنیم که داخل فولدر pages یک فولدر دیگر تحت عنوان documents داریم که فایلی داخل آن قرار دارد که از داخل آن فایل می خواهیم به فایل index.html لینک دهیم. از آنجا که از فایل index.html دو فولدر دور هستیم پس دو بار علامت ../ را وارد می کنیم. به عبارت دیگر ../../index.html را می بایست وارد نماییم.
اکنون پس از توضیحات فوق می توانیم روی متن Home کلیک کرده و به صفحه اصلی باز خواهیم گشت:

اضافه کردن لینک به صفحه اصلی اچ تی ام ال

 



Submit to FacebookSubmit to Google PlusSubmit to Twitter

نوشتن دیدگاه

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


تصویر امنیتی
تصویر امنیتی جدید

آخرین مطالب