۰۴ اسفند ۱۳۹۰ ۶ 4039 بازدید

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

لینک ها در طراحی سایت

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

لینک ها در Html:

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

به عنوان مثال:

<html>
<body>
<p>
<a  href="default.asp">Html Totourial</a>
 </p>
<p>
<a href =<a href="https://www.onliner.ir/">HTML Tutorial</a>> onliner</a>
</p>
</body>
</html>

که نتیجه کدهای بالا بدین صورت است:

HTML Tutorial   که Html Tutorial به عنوان یک لینک محسوب می شود، یعنی متنی که کاربر مشاهده می کند، عبارت “HTML Tutorial” است.

 Onliner  این یک لینک به وب سایت onliner.ir است. یعنی در صورتی که کاربر روی لینک بالا کلیک کند، به وب سایت به آدرس https://onliner.ir هدایت می شود.

فراپیوندها در Html (لینک ها):

فراپیوند( hyperlink)، یک کلمه، گروهی از کلمات، و یا یک تصویراست که شما می توانید با کلیک بر روی آن به یک سند جدید یا یک بخش جدید در سند جاری پرش کنید

هنگامی که شما مکان نما را بر روی لینکی از صفحه وب حرکت می دهید، پیکان مکان نما تبدیل به یک دست کوچک می شود، البته این طراحی بصورت پیشفرض است و توسط سی اس اس قابل تغییر است.

در هنگام استفاده از کدهای سی اس اس، کاری نکنید که کاربران با سایت طراحی شده راحت نباشند؛ مثلا کاربران دوست دارند که وقتی ماوس را روی یک لینک می برند؛ آن را بصورت یک دست کوچک ببینند؛ پس اگر این حالت را تغییر بدهید، کاربران شما راحت نخواهند بود.

لینک ها در HTML با استفاده از تگ <a>مشخص می شوند.

تگ <a> را به دو روش می توان استفاده کرد:

  1. با استفاده از صفت  href ، می توان یک پیوند را به پرونده های دیگر لینک کرد.
  2. با استفاده از صفت name، می توان یک نشانه در داخل یک سند، ایجاد کرد.

گرامر استفاده از کدهای مربوط به لینک در HTML :

کد HTML برای یک لینک ساده است .و اینگونه به نظر می رسد :

<a href=”url”>Link text</a>

صفت href مشخص کننده آدرس لینک است.

مثال:

<a href="https://www.onliner.ir/">Visit onliner</a>

با کلیک کردن روی این لینک، کاربر به صفحه اصلی onliner.ir متصل می شود. مهم نیست متن لینک الزاما متن باشد، بلکه می تواند یک تصویر یا هر عنصر از عناصر HTML باشد.

اگر بجای متن، یک تگ عکس بگذارید (با استفاده از تگ img)، آنگاه مشاهده خواهید کرد که کاربران می توانند با کلیک بر روی عکس، به صفحات دیگر بروند.

صفات مرتبط با لینک های HTML:

هدف  target باز کردن پرونده های لینک داده شده است.

به عنوان مثال:

<a href="https://www.onliner.ir/" target="_blank">Visit onliner!</a>

مثال بالا پرونده های پیوند داده را در یک پنجره مرورگر جدید یا یک زبانه جدید باز می کند.

صفت name در لینک ها:

صفت name نام لنگر را مشخص می کند. از صفت name برای ایجاد یک نشانه در داخل سند HTML استفاده می شود.

توجه :  HTML5 استفاده از صفت id به جای صفت   name را برای مشخص کردن نام لنگر  پیشنهاد می کند. صفت id در   HTML 4 و در تمام مرورگرهای امروزی کار می کند.

.نشانک ها یا بوک مارک هابرای خواننده مخفی هستند  ونمایش داده نمی شوند

مثال:

<a name="tips">Useful Tips Section</a>

در مثال بالا آدرس مورد نظر، داخل سندHTML  قرار دارد.

<a href="#tips">Visit the Useful Tips Section</a>

ایجاد یک پیوند به بخش نکات مفید در داخل همان سند. بطوریکه مثلا شما یک بخش را درست می کنید و به آن id با نام tips می دهید؛ سپس با استفاده از نمونه کد بالا در همان صفحه، اینگونه طراحی می کنید که اگر کاربر روی لینک بالا کلیک کند، به آن بخش از سند که با آیدی tips مشخص شده است، هدایت شود.

<a href="https://www.onliner.ir/html_links.htm#tips">
 Visit the Useful Tips Section</a>

و یا ایجاد یک پیوند به بخش نکات مفید در صفحه دیگر؛ ببطوریکه مثلا شما یک بخش را درست می کنید و به آن id با نام tips می دهید؛ سپس با استفاده از نمونه کد بالا در صفحه ای دیگر، اینگونه طراحی می کنید که اگر کاربر روی لینک بالا کلیک کند، علاوه بر هدایت به یک صفحه ی دیگر، به آن بخش از سند که با آیدی tips مشخص شده است، هدایت شود.

نکات پایه ای — اطلاعات مفید:

همیشه یک علامت  بریده بریده  به منابع زیر پوشه ها اضافه کنید.

توجه: اگر لینک شما اینطوری است href=http://www. onliner.ir /html شما دو درخواست به سرور تولید می کنید سرور برای اولین بار علامت ممیز را به آدرس اضافه می کند ، و سپس ایجاد یک تقاضای جدید مانند این را
/href=https://www.onliner.ir /html
تولید می کند.

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

لطفا به این مطلب رای دهید
[تعداد: 0    میانگین: 0/5]

نظرات کاربران (۶)



  1. محمد رضا

    با سلام خدمت دوست عزیز من میخواهم بازدن یک دکمه وارد فایل php که ایجاد کردم بشم ادرس سایتو به این صورت می دهم soipm.gigfa.com/contactus.php اما کار نمیکنه ممنون مشم اگه مرا راهنمایی بفرمایید

    • گروه آموزش طراحی سایت

      با عرض سلام و احترام خدمت شما
      تنها کافیست در ابتدای آدرس http:// و یا www را نیز بگذارید تا آدرس کامل باشد؛ سپس هیچ مشکلی در عملکرد لینک در کدنویسی صفحه ی وب مربوطه نخواهید داشت.


  2. مرسی عالی بود.

  3. جواد

    سلام میشه آموزش ایجاد لینک چند گزینه ای مانند عکس زیر رو بدین ؟

    http://uupload.ir/files/35yn_link.jpg

    خیلی واسم مهمه سریع یاد بگیرم !

  4. sina

    سلام
    اقا چطور میشه مشخصات یه لینک رو که واسه یه سایته تغییر داد؟
    مثلا عدد عا یا نوشته های اون صفحه رو تغییر داد

  5. solmaz

    ازکمکتون ممنون تقریبا خوب بود.