جلسه نهم لینک ها در HTML
15 دی 1402 1402-10-15 16:06جلسه نهم لینک ها در HTML
لینک ها در HTML
لینک ها تقریبا در تمام صفحات وب پیدا می شوند.
لینک ها به کاربران اجازه می دهند تا از صفحه ای به صفحه دیگر کلیک کنند.
نحوه ایجاد لینک ها در سند HTML
<!DOCTYPE html>
<html>
<body>
<p>
<a href="http://codeotech.com/design-page/html">HTML Tutorial</a> This is a link to a page on this website.
</p>
<p>
<a href="http://www.codingtaraz.com/">codingtaraz</a> This is a link to a website on the World Wide Web.
</p>
</body>
</html>خروجی:
<a href="https://codeotech.com/%d8%ac%d9%84%d8%b3%d9%87-%d8%af%d9%88%d9%85-%d8%b9%d9%86%d8%a7%d8%b5%d8%b1-%d9%be%d8%a7%db%8c%d9%87-%d8%a7%db%8c-%d8%af%d8%b1-html/"> HTML Tutorial</a> This is a link to a page on this website
<a href="https://codingtaraz.com/"> codingtaraz</a> This is a link to a website on the World Wide Web
Hyperlink (یا Link ها) در HTML
یک hyperlink یا link یک کلمه یا گروهی از کلمات یا عکس می باشد که شما می توانید با کلیک کردن روی آن به سند جدید یا بخشی از همان سند بروید.
هنگامی که شما موس را روی یک لینک در یک صفحه وب می برید، نشانگر به شکل یک دست کوچک در می آید.
لینک ها در HTML با تگ <a> مشخص می شوند.
تگ <a> به دو روش می تواند استفاده شود:
- برای ایجاد لینک به سندی دیگر، با استفاده از خصوصیت href
- برای ایجاد یک پیوند به دورن همان صفحه (bookmark)، با استفاده از خصوصیت name
نحوه نوشتن لینک در HTML:
<a href="/url">Link text</a>خصوصیت href مقصد یک لینک را مشخص می کند.
مثال:
<a href="https://codeotech.com/">Visit codeotech</a>که به این صورت نمایش داده می شود: Visit codeotech
با کلیک روی لینک بالا، کاربر به صفحه اصلی سایت codeotech ارجاع داده می شود.
نکته: Link text الزاما یک متن نیست. می تواند یک عکس یا هر عنصر دیگر HTML باشد.
خصوصیت target
خصوصیت target مشخص می کند که صفحه لینک شده، چگونه باز شود.
مثال زیر، صفحه لینک شده را در یک پنجره جدید یا در یک تب جدید باز می کند:
<!DOCTYPE html>
<html>
<body>
<a href="http://www.codeotech.com/" target="_blank">Visit codeotech!</a>
<p>If you set the target attribute to "_blank", the link will open in a new browser window or a new tab.</p>
</body>
</html>خروجی:
If you set the target attribute to “_blank”, the link will open in a new browser window or a new tab.
خصوصیت name یا (id)
با تنظیم یک نام منحصر به فرد برای یک عنصر با استفاده از خصوصیت name یا id، می توانید در CSS یا JavaScript به آن دسترسی داشته باشید.
البته از خصوصیت name یا id برای ایجاد یک bookmark یا پیوند به درون همان صفحه نیز می توان استفاده نمود.
نکته: استاندارد HTML5 خصوصیت id را بجای name برای تعیین اسم برای یک محل مشخص پیشنهاد می دهد. خصوصیت id برای HTML4 در تمام مرورگرهای امروزی نیز عمل می کند.
مثال: تنظیم خصوصیت Name برای تگ <a> در سند HTML:
<a name="tips">Useful Tips Section</a>ایجاد یک لینک به محل مشخصی درون صفحه جاری:
<a href="#tips">Visit the Useful Tips Section</a>یا، ایجاد یک لینک به محل مشخصی در صفحه ای دیگر:
<a href="https://codeotech.com/html_links.htm#tips">
Visit the Useful Tips Section</a>
نحوه ایجاد یک عکس به عنوان یک لینک
<!DOCTYPE html>
<html>
<body>
<p>Create a link of an image:
<a href="http://www.codeotech.com">
<img src="smiley.gif" alt="HTML tutorial" width="32" height="32" />
</a></p>
<p>No border around the image, but still a link:
<a href="http://www.beyamooz.com">
<img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32" />
</a></p>
</body>
</html> خروجی:
نحوه ایجاد یک پیوند درون همان صفحه. (این روش برای سندهایی که فهرست بندی شده اند کاربرد زیادی دارد)
<!DOCTYPE html>
<html>
<body>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
خروجی:
چگونه از یک فریم بیرون بیاییم. (اگر سایت شما در یک فریم محصور است)
<!DOCTYPE html>
<html>
<body>
<p>Locked in a frame?</p>
<a href="http://www.codeotech.com/" target="_top">Click here!</a>
</body>
</html>خروجی:
?Locked in a frame
چگونه با یک لینک، متنی را ایمیل کنیم. (تنها زمانی کار می کند که نرم افزار مدیریت ایمیل مثل outlook نصب شده باشد)
<!DOCTYPE html>
<html>
<body>
<p>
This is an email link:
<a href="mailto:someone@example.com?Subject=Hello%20again">
Send Mail</a>
</p>
<p>
<b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.
</p>
</body>
</html>
خروجی:
This is an email link: Send Mail
Note: Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.
