مقدمه
با عرض سلام خدمت کاربران سایت پی وی لرن . در سایر بخش های آموزشهای html ، به کاربرد تگ های Quotation و Citationدر html ، اشاره ای داشتیم. و توضیحاتی در مورد آن ارائه گردید. در این بخش از آموزش، قصد داریم به آموزش استفاده از لینک ها در html ، بپردازیم. لینک ها تقریبا، در تمام صفحات وب پیدا می شوند. لینک ها ، به شما اجازه می دهد، تا کاربران را از صفحه ای به صفحه ای دیگر در وب هدایت کنید. و باعث می شود که هر روزه تمام مطالب وب سایت شما مورد بازدید قرار بگیرد.
از این رو یادگیری درست استفاده از لینک ها در صفحات وب سایت، از اهمیت ویژه ای برخوردار است. در این پست آموزشی ، ما شما را با ساختار کلی لینک ها و استفاده از آن در صفحات وب آشنا می کنیم.
links
استفاده از لینک ها در html
لینک ها در html، ابر پیوند ها هستند. شما می توانید فقط با کلیک روی یک لینک از صفحه جاری به صفحه ای دیگر منتقل شوید. زمانیکه شما اشاره گر ماوس را روی یک لینک می برید ، اشاره گر تبدیل به یه دست کوچک می شود.
ساختار لینک در html
در html ، لینک ها با استفاده از تگ <a> تعریف می شوند:
مثال :
| <a href="url">link text</a> |
مثال : سینتکس لینک
| <a href="https://www.pvlearn.com/html/">Visit our HTML tutorial</a> |
صفت href ، در تگ <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> |
صفت target
این صفت تعیین می کند که با کلیک بر روی لینک ، صفحه ای که با آن لینک می شود ، در کجا باز شود. که این صفت مقادیر زیر را می پذیرد:
- blank_ : لینک را در صفحه یا تب جدیدی باز می کند.
- self_ : لینک را در همان پنجره باز می کند. (پیش فرض)
- parent_ : لینک را در همان پنجره در داخل یک قاب کوچک از پنجره باز می کند.
- top_ : لینک را در قسمت کامل پنجره ، باز می کند.
- framename : لینک را در یک قاب نامگذاری شده باز می کند.
مثال : صفت target
| <a href="https://www.pvlearn.com/" target="_blank">Visit pvlearn!</a> |
نکته: اگر صفحه وب شما در یک frame باشد، می توانید از target = “_ top” برای خارج شدن از frame استفاده کنید:
مثال : مقدار top
| <a href="https://www.w3schools.com/html/" target="_top">HTML5 tutorial!</a> |
استفاده از تصاویر برای لینک
از تصاویر نیز می توان برای لینک دادن به سایر صفحات استفاده کرد.
مثال : افزودن لینک به تصویر
| <a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;"> </a> |
نکته: در کد فوق border:0; برای جلوگیری از نمایش border در اطراف تصویر در مرورگرهای IE9(و قدیمی تر) اضافه شده است.
لینک کردن title
صفت title ، اطلاعاتی اضافی را در مورد یک عنصر نگهداری می کند، و در واقع یک را توصیف می کند. زمانیکه شما اشاره گر ماوس را روی یک عنصر می برید متن کوچکی در توصیف عنصر مورد نظر ظاهر می شود.
مثال:
مثال :
| <a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a> |
ایجاد bookmark
bookmark ها در HTML اجازه ی پرش از قسمتی از صفحه وب به قسمت مشخص شده را فراهم می کنند.
bookmark برای صفحات وب طولانی و بلند کاربرد بیشتری دارند.
برای ایجاد bookmark ابتدا باید آن را ایجاد کرده و سپس به آن لینک دهید.
سپس زمانیکه روی لینک کلیک شود، صفحه به محلی که با لینک مشخص شده اسکرول می شود.
مثال:
ابتدا با استفاده از id یک bookmark برای عنصر مورد نظر ایجاد کنید.
مثال :
| <h2 id="C4">Chapter 4</h2> |
سپس از محل مورد نظر یک لینک به bookmark ایجاد شده ایجاد می کنیم.
مثال :
| <a href="#C4">Jump to Chapter 4</a> |
همچنین می توانید از صفحات دیگر به bookmark به صورت زیر لینک دهید:
آدرس های خارجی
صفحات خارجی را می توان با یک URL کامل یا با مسیری نسبت به صفحه وب فعلی ارجاع داد.
برای مثال لینک به یک آدرس URL کامل به صورت زیر است :
مثال : لینک به آدرس کامل
| <a href="https://pvlearn.com/product/full-html-and-html5-tutorial/">HTML tutorial</a> |
لینک زیر به فولدر product وب سایت فعلی ارجاع داده شده است :
مثال : لینک به فولدر product
| <a href="https://pvlearn.com/product/full-html-and-html5-tutorial/">HTML tutorial</a> |
لینک زیر به صفحه وبی در مسیر جاری ارجاع دارد:
مثال :
| <a href="default.asp">HTML tutorial</a> |
خلاصه ی فصل
برای تعیین لینک یک عنصر <a> استفاده کنید.
برای تعیین آدرس لینک، از ویژگی href استفاده کنید.
از مشخصه target برای تعریف کردن کجا برای باز کردن سند پیوند استفاده کنید.
از عنصر <img> از یک تصویر به عنوان یک لینک استفاده کنید.
از مشخصه id برای تعریف بوک مارک ها در یک صفحه استفاده کنید.
از ویژگی href برای پیوند به نشانه استفاده کنید.
کلام آخر
یک وب سایت از صفحات وب مختلفی تشکیل شده است که گاها شما نیاز دارید از بخش های مختلف صفحات وب به یکدیگر لینک بدهید، همچنین ممکن است به لینک به سایر وب سایت ها نیاز باشد، که این اقدامات با استفاده از لینک ها در html انجام می شود.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
سمانه گلشادی
سلام من میخام بره داخل تلگرام وواتساپم کدش چیه؟
صادق
سلام.
اگه منظور شما لینک به گروه ها و کانال های تلگرامی یا واتساپ هست، کافیه لینک گروه رو پس از دریافت از خود تلگرام یا واتساپ، توی قسمت href بذارید.
اگه می خواید به پی وی خودتون لینک بدید، باید یک آی دی (id) برای خودتون بسازید. مثالا اگر id شما myid هست، لینک به این صورت خواهد بود: https://t.me/myid
برای واتساپ نیازی به ساخت id نیست و باید از شماره همراه استفاده کنید. مثال: https://wa.me/0936000000
ارمان
سلام
انشاالله سلامت باشید
دو سوال داشتم
چطور میتونم لینکی بسازم که با زدن اون یک تب خالی یا همون New tab ایجاد بشه؟؟
و سوال دوم اینکه چطور میتونم لینکی بسازم که با زدن اون نرم افزار خاصی باز و اجرا بشه؟؟
ممنون میشم پاسخ بدید