جستجو در دورآموز

خانه / وبگاه / لینکها یا پیوندها در HTML
183 برگشت

لینکها یا پیوندها در HTML

فاطمه خوش‌گفتارماهر
فاطمه خوش‌گفتارماهر

مهندس طراحی سایت - سابقه 10 سال تدریس در جهاددانشگاهی مشهد - مدرس نرم افزارها و برنامه های کامپیوتری - عضو تیم برنامه نویسی جی وب

یکشنبه، 08 تیر 1399 ساعت 20:29:49
لینکها یا پیوندها در HTML

لینکها یا پیوندها در HTML

 

 

 

لینکها یا پیوندها در HTML

لینکها یا پیوندها در HTML  کاربرد زیادی دارد. لینکها در حال حاضر یکی از ملزومات صفحات وب هستند ، و در هر صفحه وب حداقل یک لینک یافت می‌شود و کمتر صفحه وبی یافت می‌شود که فاقد لینک باشد. از طریق لینک می‌توان از صفحه‌ای به صفحه دیگر رجوع کرد. به پیوندهای HTML عنوان hyperlinks را می‌دهند. مشخصه بارز یک لینک در صفحه HTML تغییر شکل ظاهری فلش ماوس  به صورت یک دست کوچک 

 روی آن می‌باشد.

 

نکته: لینک لازم نیست حتماً متن باشد بلکه می تواند یک تصویر یا هر تگ HTML دیگر باشد.

 

نحوه ایجاد لینک در HTML

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

<a href=”url“>link text</a>

مثال ۱ :

 

1

<a href="https://www.google.com/">Google</a>

نتیجه اجرای دستور فوق به صورت زیر می‌باشد : لطفاً اشاره‌گر ماوس را روی آن ببرید و کلیک کنید تا نتیجه را مشاهده کنید.

Google

همانطور که می‌بینید سایت Google باز می‌شود، و این مفهوم اصلی لینک است.

توضیح اجزای ساختار تگ <a>:

ویژگی href آدرس مقصد(/ https://www.google.com) لینک را مشخص می کند.

متن پیوند قسمت قابل مشاهده در صفحه وب  است (Google).

با کلیک بر روی متن ، لینک شما را به آدرس مشخص شده ارسال می کند.

نکته: بدون یک اسلش در جلو در انتهای آدرس subfolder، شما ممکن است دو درخواست را به سرور ایجاد کنید. بسیاری از  سرورها به طور خودکار یک اسلش رو به انتهای آدرس اضافه می کنند و سپس یک درخواست جدید ایجاد می کنند.

لینک های محلی

مثال فوق یک URL مطلق (یک آدرس وب کامل) را استفاده می کند. پیوند محلی (لینک به وب سایت جاری) با یک URL مربوطه (بدون…http://www ) مشخص شده است. یعنی کافی است فقط نام فایل یا صفحه مقصد بدون مسیر ذکر شود.

مثال ۲ :

 

1

<a href="http://learnspace.ir/link/">picture</a>

نتیجه مثال فوق به صورت زیر است:

picture

 

خصوصیات رنگی لینکها در HTML

به طور پیش‌فرض یک پیوند به این شکل (در همه مرورگرها) ظاهر می شود:

یک پیوند غیرمجاز به صورت زیر بنایی و آبی رنگ است

یک لینک بازدید شده زیر خط دار و بنفش است

یک لینک فعال زیر خط دار و قرمز است

شما می توانید رنگ های پیش فرض را با استفاده از CSS تغییر دهید:

مثال ۳ :

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<style>

a:link {

    color: green; 

    background-color: transparent; 

    text-decoration: none;

}

 

a:visited {

    color: pink;

    background-color: transparent;

    text-decoration: none;

}

 

a:hover {

    color: red;

    background-color: transparent;

    text-decoration: underline;

}

 

a:active {

    color: yellow;

    background-color: transparent;

    text-decoration: underline;

}

</style>

لینک های HTML – ویژگی Target (هدف)

ویژگی target برای مشخص کردن مکانی است که سند پیوند را  باید در آنجا باز کند. ویژگی target می تواند یکی از مقادیر زیر را داشته باشد:

_blank – سند پیوند را در یک پنجره یا برگه جدید باز می کند.

_self – سند پیوند شده در همان پنجره جاری (مبدا) باز می‌شود. ( این گزینه پیش‌فرض target می‌باشد. )

_parent – سند مرتبط را در کادر اصلی باز می کند.

_top – سند مرتبط را در قسمت کامل پنجره باز می کند.

framename – سند پیوند را در یک فریم نام باز می کند.

مثال ۴ : این مثال سند مرتبط را در یک پنجره مرورگر جدید می کند:

 

1

<a href="https://www.google.com/" target="_blank">Google</a>

می‌توانید با کلیک برروی لینک Google خروجی آن را و تفاوت آن را با مثال ۱ ببینید . این با یک پنجره مرورگر جدید باز می‌شود.

Google

 

نکته : اگر صفحه وب شما در یک قاب قفل شده باشد، می توانید از” target = “_ top برای شکستن فریم استفاده کنید.

مثال :

 

1

2

3

<a href="HTML.html">

  <img src="pictuers" alt="HTML tutorial">

</a>

نتیجه مثال فوق به صورت زیر می‌باشد:

 

 

 

 

ویژگی Title یا عنوان در لینکها :

ویژگی عنوان اطلاعات اضافی در مورد یک لینک را مشخص می کند. این اطلاعات اغلب به عنوان یک متن راهنمایی هنگامی که ماوس روی لینک مورد نظرحرکت می کند، نشان داده می شود.

مثال :

 

1

<a href="https://www.google.com/"title="Go To Google Site">Google</a>

نتیجه مثال فوق به صورت زیر می‌باشد:

Google

 

لینک های HTML – ایجاد یک BookMark ( ارجاع به یک بخش از صفحه )

از تگ <a> برای ارجاع به قسمت های خاص یک صفحه وب نیز استفاده می‌شود. این کار زمانی مفید است که صفحه وب شما بسیار طولانی باشد. فرض کنید می‌خواهید یا کلیک بر روی عباراتی چون ( ادامه مطلب ، برو به پایین ، برو به بالا و …) مکانما درون همان صفحه به یک بخش دیگر صفحه منتقل شود ، برای این کار به طریق زیر عمل کنید:

ابتدا باید به تگی که میخواهید مکانما بعد از کلیک به آن رجوع کند ، توسط خاصیت id آن یک نام منحصر به فرد دلخواه بدهید:

<h2 id=”C4″>Chapter 4</h2>

سپس در تگ <a>  خاصیت href را با  نام مورد نظر همراه با علامت # مقداردهی کنید:

<a href=”#C4″>Go To Up</a>

نکته : البته این مثال زمانی برایتان ملموس است که بین تگ <h2> و تگ <a> حداقل یک صفحه فاصله باشد.

مثال : هدف رجوع به  خصوصیات رنگی لینکها در HTML در بالای صفحه:

<h4 id=”link”>خصوصیات رنگی لینکها در HTML</h4>

البته این کار را بالا در تگ <h4> مربوط به تیتر (خصوصیات رنگی لینکها در HTML) انجام دهید.

<a href=”#link”>برو به بالا</a>

نتیجه مثال بالا یه صورت زیر می‌باشد:

برو به بالا

 

جهت برقراری ارتباط با نویسنده پست و یا ارسال نظر اطلاعات زیر را وارد نمایید
تصویر کپچا دورآموز
علی

سلام .میشه برای قسمتهای مختلف یک تصویر لینکهای مختلف گذاشت؟

پاسخ
سلام . بله . شما می توانید با استفاده از دو تگ <Map> و <Area> این کار رو انجام بدین.
سوالات متداول دورآموز