Sorry, no posts matched your criteria.

این سایت در ستاد ساماندهی ثبت شده و تابع قوانین جمهوری اسلامی میباشد

آموزش HTML، آشنایی با لینک و ویژگی‌های آن

۱۰ دی ۱۳۹۶
بدون نظر

یکی از مهم‌ترین اجزای صفحات وب لینک‌ها هستند، لینک‌ها به ما کمک می‌کنند تا صفحات مختلف اینترنتی را به هم متصل کرده و راحت‌تر در وب به گشت و گذار بپردازیم، در این آموزش از پاس کن ! به بررسی تگ لینک و ویژگی‌های آن می‌پردازیم در پایان این نوشته شما خواهید توانست در صفحات اچ‌تی‌ام‌ال خود از لینک‌ها استفاده کنید یا اصطلاحا به صفحات مختلف اینترنتی لینک بدهید.

اچ تی ام ال , آموزش HTML، آشنایی با لینک و ویژگی‌های آن, پاس کن !

نحوه‌ی درج لینک در صفحات وب

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

البته باید توجه داشته باشید که با نوشتن کد بالا، لینک‌ شما کار خاصی را انجام نخواهد داد، زیرا هنوز آدرس مقصد لینک را درج نکرده‌ایم، برای نوشتن یک لینک کامل شما ابتدا باید با مفهوم مشخصه (Attribute) در اچ‌تی‌ام‌ال آشنا شوید.

مشخصه (Attribute) در اچ‌تی‌ام‌ال چیست؟

همانطور که می‌دانید اچ‌تی‌ام‌ال مجموعه‌ای از تگ‌های مختلف هست، برخی از این تگ‌ها می‌توانند دارای یک یا چند مشخصه (صفت) باشند که به آن‌ها مشخصه‌ی تگ (Tag Attribute) می‌گوییم.

نحوه‌ی درج صفت‌ها به صورت زیر هست:

در کد بالا به‌ جای attribute نام صفت و به جای value مقدار آن‌را درج می‌کنیم.

تگ لینک می‌تواند یک یا چند صفت (Attribute) بپذیرد که یکی از آن‌ها مشخصه‌ی href می‌باشد، از این صفت برای درج مقصد لینک استفاده می‌کنیم، استفاده از این ویژگی اجباریست زیرا بدون وجود آن، لینک شما به درستی عمل نخواهد کرد (شما را به جایی منتقل نخواهد کرد)

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

در کد بالا به جای URL باید آدرس اینترنتی صفحه‌ی مورد نظر خود را درج کنید (لینک باید به صورت کامل و به همراه http یا https درج شود)

نمونه‌ای از نحوه‌ی استفاده از تگ لینک را در قطعه کد زیر مشاهده می‌کنید:

خروجی این کد در مرورگر شما به شکل زیر خواهد بود:

اگر نشانگر موس را بر روی کلمه‌ی “پاس کن !” قرار دهید مشاهده‌ خواهید کرد که این عبارت به لینک تبدیل شده هست.

قطعه کد زیر را مشاهده کنید:

خروجی قطعه کد بالا به شکل زیر خواهد بود:

باز شدن لینک در صفحه‌ی جدید

اگر روی لینک‌های بالا کلیک کنید خواهید دید که لینک در همین صفحه‌ گشوده خواهد شد، اما شاید در مواردی قصد داشته باشیم لینک در صفحه‌ی تازه‌ای باز شود برای این منظور باید از مشخصه‌ی
target  (به معنای هدف) استفاده کنید و مقدار آن‌را برابر با
blank_ قرار دهید، در نتیجه لینک شما به صورت زیر خواهد بود:

خروجی این کد به صورت زیر خواهد بود:

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

مشخصه‌ی 
target مقادیر دیگری مثل:


parent_ 


self_ 


top_ 

را نیز می‌پذیرد که هر کدام ویژگی خاصی به لینک شما می‌دهند. (به عنوان تمرین آن‌ها را استفاده کرده و با کاربرد آن‌ها آشنا شوید)

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

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

قطعه کد زیر را مشاهده کنید:

خروجی کد به شکل زیر خواهد بود:

موستان را بر روی لینک برده و آنجا نگه دارید، مشاهده خواهید کرد که توضیحات مورد نظر (ورود به سایت پاس کن !) برای شما نمایش داده خواهد شد.

ویژگی‌های دیگری نیز برای اضافه کردن به تگ <a> وجود دارند که در آموزش‌های بعدی با آن‌ها آشنا خواهیم شد.

 هر چیزی که بین دو تگ
<a> و
<a/> قرار گیرد لینک‌دار خواهد شد، قطعه کد زیر را مشاهده کنید:

خروجی کد زیر به شکل زیر خواهد بود:

 

اگر به کد بالا دقت کنید خواهید دید کل پاراگراف به لینک تبدیل شده و با کلیک در هر جای آن به لینک مورد نظر وارد خواهید شد.

حال که با کاربر و نحوه‌ی استفاده از لینک آشنا شدید پروژه‌ی زیر را به عنوان تمرین انجام دهید:

  • یک صفحه‌ی HTML بسازید و متن کوچکی را از اینترنت پیدا کرده و در صفحه‌ی خود درج کنید، منبع نوشته را نیز به صورت لینک در انتهای متن خود درج کنید (لینک شما باید در صفحه‌‌ای جدید گشوده شود)

سخنی با شما دوست عزیز: تمام آموزش‌های پاس کن ! به صورت رایگان برای شما منتشر می‌شود و رایگان خواهد ماند، همچنین برای راحتی شما هیچ‌گونه تبلیغات مزاحمی در سایت درج نخواهیم کرد، اما با توجه به افزایش حجم مطالب و تعداد کاربران، برای تامین هزینه‌های سرور (Server) و ادامه‌ی فعالیت سایت به حمایت‌های شما نیازمندیم، اگر این آموزش برای شما مفید بود و از مطالعه‌ی آن لذت بردید، میتوانید با مبلغ ناچیزی (حتی ۱۰۰۰ تومان) از ما حمایت کرده و با این کار ارزشمند خود ما را در ادامه‌ی فعالیت سایت یاری دهید…

تمامی حقوق مادی و معنوی برای پاس کن ! محفوظ میباشد.

طراحی و بهینه سازی : هاست دانلود ایران | اورداپ سرور