آموزش HTML – قسمت چهارم

شنبه, ۳ام مرداد , ۱۳۸۸ | ۱۳ دیدگاه

آموزش 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 و تمامی مثال ها به صورت صفحات وب در یک فایل در اختیار شما قرار میگیرد.
به امید موفقیت.

Be Sociable, Share!


۱۳ دیدگاه


  1. علریرضا
    ۳ مرداد ۱۳۸۸

    ممنون
    خسته نباشید




  2. علی فلاح
    ۵ مرداد ۱۳۸۸

    جالب بود
    ممنون




  3. Murderer
    ۶ شهریور ۱۳۸۸

    خلاصه دمت خیلی گرم
    راستی من دارم coffee cup دانلود میکنم.اصلا به دردم میخوره




  4. Murderer
    ۷ شهریور ۱۳۸۸

    ببخشید کامنت قبلی کامل نبود
    سلام.
    این نشانه برام مفهوم نبود
    من فهرستی دارم که اول صفحه مینویسمش حالا می خوام با یه کلیک برم رو سرفصلش.مشکل این هستش که جای labe چی بنویسم. حالا باید چه کار کنم.یه کتاب میشه معرفی کنید تا این همه مزاحمتون نشم.

    نظر شما پیش از انتشار باید تایید شود.




  5. سحر
    ۱۸ مهر ۱۳۸۸

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




  6. Heidi
    ۱۹ آبان ۱۳۸۸

    bazam mamnoon khili ali bood faghat mishe lotf konid hala ke shoma in hame zahmat mikeshin ye meghdar tozihat ro bishtar konid albateh midoonam eshkal az mane ke etelaatam dar in zamineh dar hade sefre




  7. کامران
    ۱۹ آبان ۱۳۸۸

    خوب ما که تا جاییکه شده ساده توضیح دادیم.شما مشکلت تو کدوم قسمت هست؟




  8. موني
    ۸ اسفند ۱۳۸۸

    سلام
    خیلی مطالب کامل و خوب هستن.فقط من نمیتونم فایلشو دانلود کنم




  9. حسین
    ۳۰ مرداد ۱۳۸۹

    ممنون
    آخرین کدت رو اصلاح کن ، Top of page به Top of page
    😉




  10. حسین
    ۳۰ مرداد ۱۳۸۹

    منظورم تغیر Attribute ها بود ! از name به href .




  11. تازه کار
    ۲۰ بهمن ۱۳۹۰

    با سلام
    ضمن تشکر از زحمات بیدریغ شما
    بخشی از متن صفحه شما را در با کپی، پیست به یک فایل انتقال دادم.
    پس از نمایش کاراکترها به هم ریخت . کدپیج را به یوتی اف ۸ تغییر دادم اما تغییری نکرد تا از منو به ۱۲۵۶ عربی تغییر دادم و متن قابل خواندن شد. با فایرباگ صفحه شما را هم دیدم اما هیچ جا صحبتی از عربی ۱۲۵۶ نبود.کمی قاطی کردم میشه در مورد فونت فارسی و نحوه فعال کردنش توضیح بدین.




  12. علیرضا
    ۲۶ بهمن ۱۳۹۰

    ممنون.
    ادامه دهید




  13. masih
    ۴ فروردین ۱۳۹۱

    من بسیار کتاب خواندم . اما روش شما عالی است



دیدگاه خود را بنویسید