لینک دادن در HTML
لینک دادن به صفحه جدید در HTMl
پیوندها تقریباً در همه صفحات وب یافت می شوند.link ها به کاربران این امکان را می دهند تا راه خود را از صفحه به صفحه دیگر کلیک کنند.
آنچه در ادامه خواهید آموخت:
- از عنصر برای تعریف پیوند استفاده کنید
- برای مشخص کردن آدرس پیوند از ویژگی href استفاده کنید
- از ویژگی target برای تعیین محل باز کردن سند پیوندی استفاده کنید
- از عنصر
(داخل ) برای استفاده از تصویر به عنوان پیوند استفاده کنید
- از mailto داخل ویژگی href برای ایجاد پیوندی که برنامه ایمیل کاربر را باز می کند ، استفاده کنید.
- از تگ title برای استفاده از عنوان برای پیوند استفاده کنید.
برچسب پیوند HTML
| Tag | شرح |
|---|---|
| <a> | پیوندی را تعریف می کند |
لینک دادن در HTML و کاربرد آن ها(Hyperlink)
لینک یا پیوند یا Hyperlink در HTML برای ایجاد لینک به سایر صفحات استفاده می شود که قابلیت کلیک شدن و انتقال کاربر از مکانی به مکانی دیگر در یک صفحه وب را دارا میباشد.
توجه:وقتی ماوس بروی یک لینک قرار میگیرد علامت آن به شکل
تبدیل می شود.
توجه: لزوماً پیوند نباید متنی باشد. پیوند می تواند یک تصویر یا هر عنصر HTML دیگر باشد!
نمونه:
|
1 |
<a href="url">متن پیوند</a> |
در نمونه بالا مهمترین ویژگی عنصر ، ویژگی href است که مقصد پیوند را نشان می دهد.در ویژگی herf به جای url لینک مقصد را نوشته و در قسمت متن پیوند نیز متن دلخواهی که میخواهید برای کاربر نمایش داده شود(متن پیوند قسمتی است که برای خواننده قابل مشاهده خواهد بود.)با کلیک بر روی متن پیوند ، خواننده را به آدرس URL مشخص شده ارسال می کند.
مثال:
|
1 |
<a href="https://upweb.ir/?p=1970">کلیک کنید</a> |
نتیجه:
نکته: البته پیوندها را می توان با CSS طراحی کرد ، تا ظاهر دیگری پیدا کند!
پیوند های HTML-تگ target
پیوندها، لینک ها یا Hyperlink بطور پیش فرض پس از کلیک در همان صفحه باز و نمایش داده میشوند.در صورتی که بخواهیم پس از کلیک کردن پنجره فعلی حفظ شده و محتوای لینک در پنجره دیگری نمایش داده شود از تگ target استفاده می کنیم.
ما با استفاده از صفت target در تگ میتوانیم مشخص نماییم که مقصد ما در چه حالتی نمایش داده شود،
نکته:بصورت پیش فرض در HTML مقصد تمامی لینک ها در حالت self_ می باشد.
پارامتر target میتواند مقادیر متفاوتی را بپذیرد که به شکل زیر میباشد:
self_ به طور پیش فرض سند را در همان پنجره/برگه ای که روی آن کلیک شده باز می کند.
blank_ سند را در یک پنجره یا برگه جدید باز می کند.
parent_ نمایش محتوای لینک در پنجره والد (معمولا در حالتی استفاده می شود که لینک از یک frame فراخوانی شود).
top_ نمایش محتوای لینک در بالاترین سطح (معمولا در حالتی استفاده می شود که چند frame در صفحه وجود داشته باشد و بخواهیم محتوای لینک خارج از فریم ها و در بالاترین سطح نمایش داده شود).
مثال:
|
1 2 |
<a href="https://upweb.ir" target="_self" rel="noopener">Self</a> <a href="https://upweb.ir" target="_blank" rel="noopener">Blank</a> |
نتیجه:
پیوندهای HTML -ساختن لینک با استفاده از تصاویر
برای استفاده از یک تصویر به عنوان پیوند ، فقط تگ را درون برچسب قرار دهید.در هنگام ساختن یک لینک باید مکانی که پیوند به آن اشاره می کند را مشخص کرد. برای نمایش آدرس وب سایت یا سند از صفت href استفاده می کنیم.
نمونه:
|
1 |
<a href="url"><img src="image.gif" /></a> |
- image.gif همان نام تصویر یا آدرس تصویر میباشد.
- url آدرس سایتی که میخواهید به آن لینک شود میباشد.
مثال:
|
1 2 3 |
<h2>تصویر به عنوان پیوند</h2> <p>تصویر زیر یک پیوند است. لطفا روی آن کلیک کنید.</p> <a href="https://upweb.ir"><img src="https://upweb.ir/host.jpg"></a> |
نتیجه:
تصویر به عنوان پیوند
تصویر زیر یک پیوند است. لطفا روی آن کلیک کنید.
ساخت لینک برای آدرس ایمیل(پیوند به آدرس ایمیل)در HTML
تگ در HTML گزینه ای را برای مشخص کردن یک آدرس ایمیل برای ارسال یک ایمیل فراهم می کند.ر حالیکه از تگ به عنوان یک تگ ایمیل استفاده می کنید از mailto داخل ویژگی href برای ایجاد پیوندی که برنامه ایمیل کاربر را باز می کند استفاده میکنید.
|
1 |
لینک دادن با (دکمه) button در HTML
تگ button یک دکمه قابل کلیک ایجاد می کند ، که می تواند در هر نقطه از صفحه وب قرار گیرد.
برای استفاده از دکمه HTML به عنوان پیوند ، باید مقداری کد جاوا اسکریپت اضافه کنید.
جاوا اسکریپت به شما امکان می دهد آنچه را که در رویدادهای خاص اتفاق می افتد ، مانند کلیک روی دکمه ، مشخص کنید:
نکته:اگر در مرورگر کدهای جاوا اسکریپت فعال نباشند، دکمه‌ی ما کار نخواهد کرد.
نکته: اگر بخواهیم لینک در پنجره‌ی جدیدی باز شود، ممکن است عملکرد Popup Blocker مرورگر مانع عملکرد دکمه شود.
مثال:
|
1 |
<button type="button"> فروش هاست پرسرعت-آپ وب</button> |
نتیجه:
پیوند دادن به عنوان ها در HTML
ویژگی عنوان اطلاعات اضافی را در مورد یک عنصر مشخص می کند. وقتی موس روی عنصر حرکت می کند ، اغلب اطلاعات به عنوان یک متن راهنمای ابزار نشان داده می شود.
مثال:
|
1 |
<a title="برو به آپ وب" href="https://upweb.ir">فروش هاست پرسرعت در آپ وب</a> |
نتیجه:
با نگه داشتن ماوس برروی فروش هاست پرسرعت در آپ وب در بالا توضیحات مختصر را مشاهده خواهید کرد.