• ۱۳۹۱/۱۱/۲۸, ۱۶:۳۳
  • در همه مقالات
  • توسط admin
  • بازدید: 1004
  • اخرین ویرایش: ۱۳۹۷/۰۲/۰۱, ۲۳:۰۹
  • چاپ نوشته هاچاپ پی دی اف

آموزش HTML بخش چهارم

Hyper Link , Anchors , Link ( لینکها و یا پیوندها )

 

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

 

  • لینکهای خارجی
  • لینکهای داخلی
  • و نشانه ها

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

 

به طور مثال :

<a href=” http://www.topdesign.ir”> topdesign.ir </a>

این لینک از اجزاء مختلفی تشکیل شده که توضیح خواهم داد.

  • این تگ دارای خصوصیتی به نام href است که مقدار آن آدرس لینک مورد نظر برای اتصال و پیوند است .
  • نوشته داخل این تگ برای بازدید کنندگان نمایش داده می شود که با کلیک بر روی آن وارد آدرس جدید می شوند.

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

topdesign.ir

لینکهای داخلی
لینکهای داخلی نیز صفحه ما را به صفحات دیگر پیوند می دهد ولی اینبار این صفحات همگی جزئی از یک وب سایت هستند واز این لینکها برای پیوند دادن صفحات داخلی یک وب سایت استفاده می شود.
در ظاهر کدهای لینکهای داخلی و خارجی تفاوتی با یکدیگر ندارند ولی تفاوت آنها در نحوه آدرس دهی آنها می باشد که تفاوت آین لینکها را مورد بررسی قرار میدهیم.
به طور مثال :
فرض کنید که ما وب سایتی داریم که از دو صفحه Index.html و AboutUs.html تشکیل شده است.
ما می خواهیم لینکی از صفحه اصلی ( Index.html ) به صفحه درباره ما (AboutUs.html ) که هر دوی آنها از صفحات یک وب سایت هستند ایجاد کنیم .برای انجام این کار از کدهای زیر استفاده میکنیم.
ملاحضه می کنید که در مقدار href که همان ادرس صفحه می باشد خبری ازhttp://wwwنیست و فقط اسم صفحه وب مورد نظر نوشته شده است.
برای توضیح این مطلب ابتدا به نکات زیر توجه کنید:

 

  • آدرس دهی به دو صورت Relative و Static انجام می پذیرد.
  • در مثال بالا از آدرس دهی به روش Relative استفاده شده است.
  • منظور از آدرس دهی به روش Relative ( وابسته ) این است که مقدار آدرس ما به نحوه قرار گرفتن این دو صفحه نسبت به یکدیگر بستگی دارد

برای توضیح بیشتر برای ساختن یک وب سایت ابتدا یک Folder به نام آن وب سایت بسازید(نام Folder اختیاری است).

محل این Folder اهمیت چندانی ندارد. حال صفحات وبی را که ساخته اید داخل این Folder قرار دهید.
در حال حاضر این دو صفحه وب (Index.html , AboutUs.html ) دارای موقعیت یکسان هستند یعنی هر دو داخل یک Folder قرار دارند.
این موضوع بسیار مهم است که این دو صفحه وب هر دو داخل یک Folder و یا پوشه قرار داشته باشند در غیر این صورت نحوه آدرس دهی متفاوت خواهد بود.
حال برای آدرس دهی می توان از کدهایی که در مثال بالا اشاره شد استفاده کرد.
در قسمت های آینده توضیحات بیشتری در این مورد ارائه خواهیم داد.

 

نشانه ها

این نوع لینکها و پیوندها داخل یک صفحه وب استفاده می شوند.
به طور مثال دیده اید که در بعضی از صفحات وب که به علت حجم زیاد مطالب ارتفاع زیادی دارند از گزینه های ، Top و یا بالا برای راهنمایی کاربران به بالای صفحه استفاده می شود.
نحوه آدرس دهی در این نوع لینکها کمی متفاوت تر از دو حالت قبلی می باشد.
در این نوع آدرس دهی از یکی دیگر از خصوصیات تگهای <a> استفاده می شود به نام " name "
این خصوصیت قابلیت نامیدن هر یک از تگهای html و یا در اینجا <a> را با نامهای دلخواه در اختیار ما قرار میدهد.
یکی از موارد استفاده این خصوصیت در این مثال مورد بررسی قرار می گیرد.

 

<a name=”label”>Any content</a>

در قسمت "Label” می توانید نام مورد نظر خود را قرار دهید.

<a href=”#label”>Any content</a>

و در اینجا لینک مورد نظر را مشاهده می کنید.

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

 

<a name=”Top”>Top of page </a>

و سپس در انتهای صفحه لینک زیر را قرار می دهیم (به مقدار خصوصیت href دقت کنید).

<a name=”#Top”>Top of page</a>

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

 


اشتراک

دیدگاه دیگران (بدون دیدگاه)...

Leave a reply

نام:: فیلد اجباری.
آدرس رایانامه: فیلد اجباری. غیر فعال
وبسایت::
کد امنیتی:: فیلد اجباری.
دیدگاه: فیلد اجباری.

هم اکنون گام نخست را برای داشتن یک وبسایت حرفه ای و جذاب بردارید

متخصصان و مشاوران ما آماده‌اند تا شما را در تمامی مراحل داشتن یک وب سایت راهنمایی کنند
ثبت درخواست