پنل کاربری
021 4421 4598
info@portalsaz.com
صفحه 1 از 1 < 1 >

Feed
1390/08/20 00:00

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

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

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

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

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

به طور مثال :

<a href=” http://www.portalsaz.com”>Portal Saz</a>

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

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

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

Portal Saz

لینکهای داخلی
لینکهای داخلی نیز صفحه ما را به صفحات دیگر پیوند می دهد ولی اینبار این صفحات همگی جزئی از یک وب سایت هستند واز این لینکها برای پیوند دادن صفحات داخلی یک وب سایت استفاده می شود.
در ظاهر کدهای لینکهای داخلی و خارجی تفاوتی با یکدیگر ندارند ولی تفاوت آنها در نحوه آدرس دهی آنها می باشد که تفاوت آین لینکها را مورد بررسی قرار میدهیم.
به طور مثال :
فرض کنید که ما وب سایتی داریم که از دو صفحه 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 و تمامی مثال ها به صورت صفحات وب در یک فایل در اختیار شما قرار میگیرد.
به امید موفقیت.


نظرات

نظر شما
نام :
پست الکترونیکی :
وب سایت :
متن :

تصویر :

برچسب ها :