امتیاز دهید:

همانطور که قبلاً توضیح داده شد 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 کلیک کرده و به صفحه اصلی باز خواهیم گشت:

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

 


نظرات
نظرات
  • کاربر میهمان :

    با سلام
    اول اینکه آیا متن لینک با زبان فارسی در جستجوها که به زبان فارسی است تاثیر خواهد داشت. و به مرور باعث بالا آمدن رنکیک میشود و جایگاه بالاتری در سایت های جسنجوگر از جمله گوگل خواهد گرفت. (صفحه و سطر اول جسنجوگر ها)
    بطور مثال : زبان فارسی را بیاموزیم/http://www.netshahr.com/3875
    بهتر و بالاتر ایندکس میشود یا :
    لینک : http://www.netshahr.com/3875/Learn the Persian language
    دوم اینکه آیا بین کلمات به زبان فارسی خط تیره لازم است :
    مثال : زبان-فارسی-را-بیاموزیم/http://www.netshahr.com/3875
    و سوم اینکه پسوند html در پایان صفحات به این زبان را چطور از لینک حذف کنیم یعنی صفحه ای
    که با نام : (htm.زبان فارسی را بیاموزیم) ذخیره شده است را اگر پسوند html آن را حذف کنیم و
    بصورت : (زبان فارسی را بیاموزیم) ذخیره و آپلود کنیم در فراخوانی صفحه با مرورگر با این آدرس :
    زبان فارسی را بیاموزیم/http://www.yourdamin.com فایل ناشناخته و صفحه باز نمی شود.
    البته در سایت شما این نوع آدرس دهی انجام شده بطور مثال :
    طراحی-وب-سایت/http://www.netshahr.com/3875
    خواهشمند است که در این مورد راهنمایی های لازم را بفرمایید.


    1396/03/28 17:37:48
  • amir :

    سلام
    به چه سایتی برای تبلیغات در تلگرام و خرید ممبر واقعی و یا تبلیغات نوتیفیکیشن میتونم اعتماد کنم؟ لطفا راهنمایی کنید.ممنون.


    1396/01/10 16:31:13
  • lpln :

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


    1395/07/29 07:22:27
  • مجید :

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


    1395/06/19 07:48:04
  • فرزاد :

    منظورم صفحه سه چهار یعنی همون تو فولدر pages بسازیم؟


    1393/12/04 06:08:32
  • فرزاد :

    fواقعا از آموزشتون کمال تشکر را دارم فقط میخواستم بدونم واسه بقیه صفحات هم به همین صورته؟


    1393/12/03 18:03:11
  • فرزاد :

    بسیار از کمکتون ممنونم واقعا تشکر از آموزشتون فقط یه سوال بقیه صفحات هم به همین صورته؟


    1393/12/03 18:01:32
  • بهزاد مرادی :

    سلام،
    می بایست از متا تگی تحت عنوان refresh استفاده نمایید. این موضوع در آموزش "نحوه ارجاع یک کاربر به یک URL دیگر در اچ تی ام ال" توضیح داده شده است.



    با سپاس فراوان
    بهزاد مرادی
    تیم تولید محتوای نت شهر


    1393/05/19 07:47:18
  • وکیوم آسیا :

    از نظرات بسیار مفید بود . متشکرم


    1393/05/18 15:01:30
  • نت شهر :

    در پاسخ به آدم

    سلام.یه توضیحی درباره HREFبنویسید.ممن.ن از شما.

    سلام
    عبارت href مخفف کلمات hyper refrence است که از آن طریق می توان یک تگ را به یک صفحه دیگر و یا هر چیز دیگری لینک داد. بعد از آن می بایست یک علامت مساوی قرار داده و مقابل آن دو علامت "" قرار دهیم. سپس داخل دو علامت "" می بایست آدرس لینک مد نظر را وارد کنیم به طور مثال آدرس سایت http://www.netshahr.com .


    با سپاس از شما
    بهزاد مرادی


    1393/03/31 04:55:12
  • آدم :

    سلام.یه توضیحی درباره HREFبنویسید.ممن.ن از شما.


    1393/03/20 18:05:07
  • بهزاد :

    در پاسخ به فرید

    با سلام
    ممنون از اموزش هاتون می خواستم بدونم چجوری میشه وقتی کسی وارد سایت شد به محض ورود به یک سایت دیگه هدایت بشه؟
    ممنون


    سلام
    در بخش head یک متاتگ ایجاد کنید حاوی Attributeیی تحت عنوان http-equiv="refresh" سپس یک Attribute دیگر حاوی content="0" ایجاد کنید و پس از آن یک علامت ; قرار داده سپس کلید واژه url را نوشته و یک مساوی بعد از آن قرار دهید و در نهایت url یی که می خواهید را بنویسید که با این کار پس از 0 ثانیه به صفحه مد نظر ارجاع داده خواهید شد.

    با سپاس
    بهزاد مرادی


    1393/03/17 06:54:07
  • فرید :

    با سلام
    ممنون از اموزش هاتون می خواستم بدونم چجوری میشه وقتی کسی وارد سایت شد به محض ورود به یک سایت دیگه هدایت بشه؟
    ممنون


    1393/03/15 10:04:18