لینک به صفحات دیگر

پیوند به صفحات دیگر(آموزش طراحی سایت)

در کدهای Html ، برقراری پیوند توسط تگ <a> ایجاد می شود . این تگ دارای صفات و ویژگی هایی می باشد .

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

به محل قرار گرفتن علائم > و < دقت نمائید همچنین به موقعیت قرار گرفتن ویژگی href  و محتوای بعد از آن توجه نمائید که توسط یک علامت  مساوی = و علامت  " آدرس صفحه پیوند دنبال شده است . دقت نمائید که آدرس صفحه پیوند به حروف کوچک و بزرگ حساس می باشد . به این معنا که آدرس  www.goole.com نسبت به آدرس www.gOOgle.com متفاوت است . بعد از بسته شدن تگ ابتدایی توسط علامت < ، متنی که توسط کاربران قابل مشاهده است درج می شود . این متن همان عبارتی است که کاربران روی آن کلیک میکنند . در انتها نیز تگ انتهایی </a> قرار داده میشود.

حال بیایید کمی تمرین عملی انجام دهیم :

فایل تمرین خود را باز کرده و از طریق منوی File>Save as در محیط ویرایشگر ، به محل پوشه html رفته و صفحه جدیدی در خارج از پوشه Pages ایجاد نمایید . نام فایل جدید را index.html وارد نمایید و اطمینان حاصل کنید که گزینه Save Az Type بر روی All File تنظیم شده باشد .

 
 

 

 

بعد از زدن دکمه Save ، پوشه html شما میبایست به صورت زیر باشد

کاری که قرار است انجام دهیم ، ایجاد یک پیوند در صفحه index می باشد . زمانی که روی پیوند کلیک می شود ، به مرورگر می گوییم که صفحه ای با نام about .html را بارگذاری نماید .

حال از همان فایل تمرین خود برای ایجاد صفحه ای جدید استفاده نمایید . در هنگام ذخیره ی جدید فایل به پوشه Pages رفته و فایل را به نام جدید about.html در این پوشه ذخیره نمایید .

 

بنابراین اکنون ما یک صفحه در پوشه  html و صفحه دیگری در پوشه pages ایجاد کرده ایم و می خواهیم بین آن ها پیوند برقرار نماییم .

فایل index.html را در محیط ویرایشگر باز نمایید . تگ زیر را ما بین تگ body قرار دهید :

<A href="pages/about.html">About this site</A>

نتیجه کدها به صورت زیر می باشد : (تگ عنوان نیز اضافه کرده ایم)

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

و این یک پیوند می باشد ! دقت نمایید که تنها چیزی که در صفحه قایل مشاهده است ، متن  “About This Site” است . کدهایی که نوشته شده متن فوق را از حالت یک متن معمولی به یک پیوند تبدیل می کند :

<A href="pages/about.html">About this site</A>

وقتی که روی پیوند کلیک می کنید ، می بایست صفحه ای خالی روی مرورگر بارگذاری شود . حال چنانچه به آدرس مرورگر توجه نمایید ، می بایست آدرس صفحه  about.html مشاهده شود . بنابراین شما با موفقیت به صفحه جدیدی منتقل شده اید 

برای بازگشت به صفحه index ، پیوند دیگری مورد نیاز است .

فایل about.html را در محیط ویرایشگر باز کنید ، در این صفحه آدرس href صحیح نیاز داریم .

نمی توانیم آدرس زیر را بکار ببریم :

<A href="pages/index.html">Go to the Home Page</A>

آدرس فوق به صفحه index  در داخل پوشه pages اشاره می کند ، در صورتیکه فایل index ، داخل این پوشه قرار ندارد و داخل پوشه html موجود است که یک سطح بالاتر از پوشه pages می باشد . دقیقا مشابه به عملیاتی که برای تصاویر انجام دادیم ، اینجاهم می توانیم از دو نقطه و یک علامت / برای انتقال به یک سطح بالاتر استفاده نماییم :

                  <"A HREF="https://www.homeandlearn.co.uk/index.html>

بنابراین کد زیر را داخل صفحه ی about.html قرار دهید:

<A HREF="https://www.homeandlearn.co.uk/index.html">Go to the Home Page</A>

عملیات را ذخیره و مرورگر را مجدداً بار گزاری نمایید. بر روی پیوند در صفحه ی abou .html کلیک کنید.

مشاهده می کنید که صفحه ی index بارگزاری خواهد شد. به همین ترتیب اگر روی پیوند در صفحه ی index  کلیک کنید به صفحه ی about هدایت می شوید.

تمرین یک صفحه ی سوم ایجاد نمایید و آن را در پوشه pages  با نام contac .html  ذخیره نمایید.

در صفحه ی index یک پیوند به صفحه ی جدید ایجاد نمایید و در صفحه ی contact نیز یک پیوند به صفحه index  ایجاد کنید.

بعد از انجام تمرین فوق ، در صفحه ی index  در پیوند خواهیم داشت :

حال می توانید از تکنیک های html که تا کنون یادگرفته اید برای بهتر شدن ظاهر صفحه استفاده نمایید.

بعنوان مثال ممکن است بخواهید پیوند ها را به صورت عمودی در صفحه قرار بگیرند که در این حالت می توانید تگهای پیوند را داخل تگ  <p>  قرار دهید:

نتیجه به شکل زیر خواهد شد:

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

تمرین:

در هر کدام از سه صفحه  ای که ایجاد کرده اید ، دو پیوند ایجاد کنید.صفحه about.html  می بایست پیوند هایی به صفحات index و  about داشته باشد.

نکته قابل ملاحظه در تمرین فوق، استفاده از آدرسهای صحیح برای قسمت href می باشد.

به خاطر داشته باشید که زمانیکه  صفحات html  در یک  پوشه هستند، فقط کا فیست  نام صفحه را درج نمائیم:

HREF="page_name_here.html"به جای   

HREF="../page_name_here.html "         

یا

"HREF="pages/page_name_here.html

قوانین فوق همانهایی هستند که در قسمت تصاویر آموزش دیده اید.

ویژگی target

مثل تگ تصاویر ، تگ پیوند نیز می تواند چندین ویژگی داشته باشد. یکی از این ویژگی ها target  نام دارد.

این تگ به مرورگر می گوید که صفحه پیوند را کجا باز کند. بعنوان مثال می توانید به مرورگر بگوئید  که صفحه پیوند را در یک پنجره جدید باز کند . مقادیر مختلفی برای این ویژگی وجود دارد که می توانید از بین آنها انتخاب نمایید

                                                                -top    -blank     -parent    -self 

اگر چه تنها مقدار مفید در html 5 ، مقدار blank می باشد. مقدار پیش فرض برای این ویژگی، self  است،به همین دلیل در اکثر مواقع نیازی به تنظیم این ویژگی نمی باشد. اگر بخواهیم صفحه پیوند در پنجره جدید باز شود.

به صورت زیر عمل می کنیم:

<A HREF="pages/about.html" TARGET="_blank">About this site</A>

به علامت زیر خط _ قبل از کلمه ی blank   توجه کنید، جا افتادن این علا مت باعث می شود ویژگی target  درست عمل نکند.

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

فریم ها اکنون منسوخ شده اند و در html 5   استفاده از آنها توصیه نمی شود.

رنگ ها در پیوند

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

تگ a سه ویژگی دارد که به شما کمک می کند بر تنظیمات مرورگر غلبه کنید:

Link : رنگ پیوند قبل از اینکه کلیک شود.

Alink : رنگ پیوند زمانیکه روی آن کلیک می شود.

Vlink : رنگ پیوند بعد از اینکه کلیک شده است.

حروف  a و v برگرفته از کلمات active و visited  می باشند استفاده از ویژگی های فوق به صورت زیر می باشد:

<A HREF="pages/about.html" LINK="red">About this site</A>

بنابراین ابتدا نام ویژگی و سپس رنگ دلخواه درج می شود  که می تواند به صورت hexadecimal یا مقادیر rgb باشد.

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

در ذهنتان داشته باشید که معمولاً کاربران از یک پیوند انتظار دارند که به رنگ آبی و به صورت زیر خط دار باشد- این ویژگیها یک سرنخ برای شناسایی پیوند ها در صفحه می باشد.

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

در درس بعدی، با انواع دیگر پیوند آشنا خواهیم شد.

آموزش طراحی وب سایت از پایه