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

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

لینک ها به کاربر ها این امکان را میدهند که راه خودشان را با یک کلیک به صفحه ای دیگر پیدا کنند.

لینک های اچ تی ام ال hyperlink

لینک های اچ تی ام ال hyperlink هستند.

شما میتوانید بر روی یک لینک کلیک کرده و به یک پرونده دیگر بروید.

وتی شما نشانگر ماوس را بر روی یک لینک میبرید نشانگر تبدیل به یک دست کوچک میشود.

نکته: یک لینک لزوما نباید یک نوشته باشد و میتواند یک عکس یا یک المان دیگر اچ تی ام ال باشد.

نحوه لینک کردن متن در اچ تی ام ال

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

مثال:

خاصیت href آدرس مقصد را مشخص میکند.

در مثال بالا آدرس لینک برابر است با https://netrun.ir/learn-html-step-by-step-for-beginners/

متن لینک قسمت قابل مشاهده لینک است.

مثال بالا اینگونه چاپ خواهد شد.

کلیک کردن به روی متن لینک شما را به ادرس مشخص شده میفرستد. که در این مثال آدرس شروع آموزش اچ تی ام ال گام به گام نتران است.

نکته: بدون یک فروارد اسلش / در پایان ادرس زیرپوشه شما ممکن است دو درخواست به سرور تولید کنید.

بسیاری از سرور ها به صورت اتوماتیک یک فوروارد اسلش (/) به پایان ادرس اضافه میکنند و سپس یک درخواست دیگر میسازند.

لینک های local محلی

مثال بالا از یک لینک کامل سایت (یک ادرس کامل سایت) استفاده کرد.

یک لینک محلی (لینک به خود سایت حاضر) با یک url مرتبط مشخص میشود (بدون https://www… ).

مثال، به استفاده از همان کد های بالا:

رنگ کردن لینک های اچ تی ام ال

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

• یک لینک مشاهده نشده زیر خط دار و به رنگ آبی است.
• یک لینک مشاهده شده زیر خط دار و به رنگ بنفش است.
• یک لینک فعال زیر خط دار و به رنگ قرمز است.

شما میتوانید رنگ پیشفرض را به وسیله سی اس اس تغییر دهید.

مثال:

لینک ها به وسیله سی اس اس به عنوان دکمه می توانند استفاده شوند.

این یک لینک است

مثال:

برای اطلاعات بیشتر در مورد قابلیت های سی اس اس به بخش آموزش سی اس اس نتران مراجعه کنید.

خاصیت target در لینک های اچ تی ام ال

خاصیت target مشخص میکند که صفحه لینک شده در کجا باز شود.

خاصیت target میتواند یکی از چند مقدار زیر را داشته باشد:

• _blank پرونده لینک شده را در یک پنجره یا سربرگ جدید باز میکند.
• _self پرونده لینک شده را در همان صفحه ای که بر روی لینک کلیک شده باز میکند. (این حالت پیشفرض است)
• _parent پرونده لینک شده را در آیفریم والد باز میکند.
• _top پرونده لینک شده را در بدنه کامل پنجره باز میکند. (بالاتر از آیفریم)
• Framename پرونده لینک شده را در یک آیفریم نامگذاری شده باز میکند.

این مثال پرونده لینک شده را در یک صفحه جدید یا سربرگ جدید از مرورگر باز میکند.

مثال:

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

مثال:

لینک کردن یک تصویر در HTML

این کار معمولی ای است که یک تصویر را به عنوان لینک استفاده کنید.

مثال:

نکته: border:0; اضافه شده که از نمایش دادن یک حاشیه در اطراف تصویر در مرورگر های قدیمی جلوگیری شود (وقتی تصویر یک لینک است).

عنوان title لینک

خاصیت title اطلاعات اضافه را در مورد یک المان مشخص میکند.

اطلاعات اضافه شده معمولا به عنوان یک tooltip نمایش داده میشود که وقتی نشانگر موس را برروی آن المان می برید نمایش داده میشود.

مثال:

لینک کردن به سمت یک id خاص در یک صفحه با قابلیت bookmark

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

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

برای ساختن یک بوک مارک شما اول باید بوک مارک را ساخته و سپس یک لینک را به سمت آن در صفحه قرار دهید.

وقتی بر روی لینک کلیک شد شما در صفحه حرکت داده میشوید تا به محل بوک مارک برسید.

مثال:

اول با استفاده از خاصیت id یک المان را بوک مارک کنید:

سپس ببه یک لینک hreff به سمت این بوک مارک بدهید.

اگر می خواهید این کار را از داخل همین صفحه انجام دهید از کد زیر استفاده کنید.

یا با اسفاده از کد زیر یک لینک به بوک مارک در یک صفحه دیگر قرار دهید.

مثال:

لینک کردن به سمت مسیرهای خارجی

صفحات خارجی میتوانند با یک url کامل یا یک مسیر که مرتبط به همان صفحه است به صفحه رجوع داده شوند.

این مثال از یک url کامل برای لینک شدن به یک صفحه وب استفاده میکند:

مثال:

این مثال لینک میشود به صفحه آموزش اچ تی ام ال در وب سایت فعلی (در حال حاضر نتران):

مثال:

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

مثال:

در ادامه آموزش گام به گام زبان HTML، مطلب آموزش HTML – فصل دهم: تصاویر در HTML را مطالعه کنید.