مهندس طراحی سایت - سابقه 10 سال تدریس در جهاددانشگاهی مشهد - مدرس نرم افزارها و برنامه های کامپیوتری - عضو تیم برنامه نویسی جی وب
لینکها یا پیوندها در HTML کاربرد زیادی دارد. لینکها در حال حاضر یکی از ملزومات صفحات وب هستند ، و در هر صفحه وب حداقل یک لینک یافت می‌شود و کمتر صفحه وبی یافت می‌شود که فاقد لینک باشد. از طریق لینک می‌توان از صفحه‌ای به صفحه دیگر رجوع کرد. به پیوندهای HTML عنوان hyperlinks را می‌دهند. مشخصه بارز یک لینک در صفحه HTML تغییر شکل ظاهری فلش ماوس به صورت یک دست کوچک
روی آن می‌باشد.
نکته: لینک لازم نیست حتماً متن باشد بلکه می تواند یک تصویر یا هر تگ HTML دیگر باشد.
برای ایجاد لینک در صفحات HTML از تگ <a> با ساختار زیر استفاده می‌شود.
<a href=”url“>link text</a>
مثال ۱ :
|
1 |
<a href="https://www.google.com/">Google</a> |
نتیجه اجرای دستور فوق به صورت زیر می‌باشد : لطفاً اشاره‌گر ماوس را روی آن ببرید و کلیک کنید تا نتیجه را مشاهده کنید.
همانطور که می‌بینید سایت Google باز می‌شود، و این مفهوم اصلی لینک است.
توضیح اجزای ساختار تگ <a>:
ویژگی href آدرس مقصد(/ https://www.google.com) لینک را مشخص می کند.
متن پیوند قسمت قابل مشاهده در صفحه وب است (Google).
با کلیک بر روی متن ، لینک شما را به آدرس مشخص شده ارسال می کند.
نکته: بدون یک اسلش در جلو در انتهای آدرس subfolder، شما ممکن است دو درخواست را به سرور ایجاد کنید. بسیاری از سرورها به طور خودکار یک اسلش رو به انتهای آدرس اضافه می کنند و سپس یک درخواست جدید ایجاد می کنند.
مثال فوق یک URL مطلق (یک آدرس وب کامل) را استفاده می کند. پیوند محلی (لینک به وب سایت جاری) با یک URL مربوطه (بدون…http://www ) مشخص شده است. یعنی کافی است فقط نام فایل یا صفحه مقصد بدون مسیر ذکر شود.
مثال ۲ :
|
1 |
<a href="http://learnspace.ir/link/">picture</a> |
نتیجه مثال فوق به صورت زیر است:
به طور پیش‌فرض یک پیوند به این شکل (در همه مرورگرها) ظاهر می شود:
یک پیوند غیرمجاز به صورت زیر بنایی و آبی رنگ است
یک لینک بازدید شده زیر خط دار و بنفش است
یک لینک فعال زیر خط دار و قرمز است
شما می توانید رنگ های پیش فرض را با استفاده از 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 خروجی آن را و تفاوت آن را با مثال ۱ ببینید . این با یک پنجره مرورگر جدید باز می‌شود.
نکته : اگر صفحه وب شما در یک قاب قفل شده باشد، می توانید از” target = “_ top برای شکستن فریم استفاده کنید.
مثال :
|
1 2 3 |
<a href="HTML.html"> <img src="pictuers" alt="HTML tutorial"> </a> |
نتیجه مثال فوق به صورت زیر می‌باشد:
ویژگی عنوان اطلاعات اضافی در مورد یک لینک را مشخص می کند. این اطلاعات اغلب به عنوان یک متن راهنمایی هنگامی که ماوس روی لینک مورد نظرحرکت می کند، نشان داده می شود.
مثال :
|
1 |
<a href="https://www.google.com/"title="Go To Google Site">Google</a> |
نتیجه مثال فوق به صورت زیر می‌باشد:
از تگ <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> این کار رو انجام بدین.