ایجاد کد پیوند HTML
دسته بندی : آموزش HTML سطح مقاله : متوسط زمان مطالعه : 5 دقیقه آخرین بروز رسانی: 02 آذر 1399ایجاد کد پیوند HTML عنصری قابل کلیک است که کاربر را به صفحه دیگری میبرد. پیوند HTML نمیتواند عنصر خالی باشد، زیرا باید دارای محتوای قابل کلیک باشد.
تعریف پیوند HTML
پیوندهای HTML یا پیوندهای اینترنتی به کاربران امکان میدهد تا به راحتی با یک وب سایت تعامل داشته باشند. برای قرار دادن یکی در صفحه وب خود ، باید از یک جفت تگ <a> استفاده کنید:
<a href="https://www.bitdegree.org">This is a link to coding lessons.</a>
درج ویژگی href در تگ <a>
بسیار مهم است – در غیر این صورت پیوند HTML شما به جایی نمیرسد. مانند همه ویژگیها ، در یک جفت نام و مقدار مشخص شده با حروف کوچک مشخص شده است. در مثال زیر ، یک لینک HTML ساده مشاهده میکنید که شما را به وب سایت BitDegree هدایت میکند:
<a href="https://www.bitdegree.org">This is a link to coding lessons.</a>
اجزای کلیدی:
- تگ
<a>
: این تگ ابتدای پیوند را مشخص میکند. href
: این صفت آدرس (URL) مقصد پیوند را تعیین میکند. آدرس باید داخل دابل کوتیشن (“”) یا سینگل کوتیشن (”) قرار گیرد.target
: این صفت (اختیاری) تعیین میکند که پیوند در چه کادر یا تب مرورگر باز شود. مقادیر رایج برای این صفت عبارتند از:_blank
: پیوند در یک تب یا پنجره جدید باز میشود._self
: پیوند در همان تب یا پنجره فعلی باز میشود._parent
: پیوند در تب یا پنجرهای که پیوند در آن قرار دارد باز میشود._top
: پیوند در اولین تب یا پنجره مرورگر باز میشود.
- متن پیوند: متنی که بین تگهای
<a>
قرار میگیرد، به عنوان متن قابل کلیک پیوند نمایش داده میشود.
لینک های HTML مطلق، نسبی و ریشه ای
یک URL مطلق مسیر کامل به آدرس وب مرتبط شده را مشخص میکند. این یک آدرس URL کامل است که شامل http: // www … یا https: // www …. در اکثر موارد ، از آن برای ارجاع به منابع خارجی استفاده میشود.
یک URL نسبی موقعیت صفحه وب پیوند شده را در رابطه با صفحه فعلی توصیف می کند. از URL های نسبی معمولاً برای ارجاع کاربر به مکان دیگری در وب سایت فعلی استفاده میشود:
<a href="html-basics">HTML Tutorials</a>
اگر میخواهید یک پرونده را در پوشهای پیدا کنید که در یک سطح بالاتر از پوشه موجود قرار دارد ، باید دو دوره و یک بریدگی اضافه کنید:
<a href="../html-basics" target="_blank">HTML Tutorials</a>
از URL مربوط به root معمولاً برای ارجاع آدرس نسبت به ریشه دامنه وب سایت فعلی استفاده میشود. این همیشه با یک اسلش رو به جلو شروع میشود :
<a href="/learn/html-basics" target="_blank">HTML Examples</a>
بیایید یک مقایسه ساده ببینیم تا تفاوت بین لینک HTML مطلق، نسبی و نسبی ریشهای بهتر شود. تصور کنید میخواهید پیوندی به صفحه https://www.bitdegree.org/learn/html-tags اضافه کنید. اینگونه میتوانید پیوندی را در هر نوع تعریف کنید:
Link | Type |
https://www.bitdegree.org/learn/html-tags | Absolute |
html-tags | Relative |
/learn/html-tags | Root-relative |
استفاده از تصاویر به عنوان پیوندهای HTML
شما میتوانید یک عملکرد تصویر را به عنوان لینک نیز ایجاد کنید. این تکنیک با کلمات یکسان است، عنصر قابل کلیک باید درون تگهای لنگر قرار گیرد. در این حالت ، شما باید تگهای <img>
را درون تگهای پیوند قرار دهید:
<a href="https://www.bitdegree.org/course/coding-for-beginners-space-doggos">
<img src="image.png" alt="HTML Tutorials" style="width: 200px; height: 200px; border: 0;">
</a>
تنظیم رنگهای ایجاد کد پیوند HTML
به طور پیش فرض، تمام مرورگرها لینک HTML را زیر خط میبندند و رنگ های زیر را به آنها می٬دهند:
Meaning | (رنگ) Color |
یک پیوند HTML بازدید نشده | (آبی)Blue |
پیوند HTML بازدید شده | (صورتی)Purple |
یک پیوند فعال HTML | (قرمز)Red |
برای تغییر رنگهای پیش فرض ، میتوانید از یک ظاهر طراحی داخلی CSS استفاده کنید:
<style>
a:link {
color: crimson;
background-color: lightgrey;
}
a:visited {
color: maroon;
background-color: lightgrey;
}
a:active {
color: orangered;
background-color: lightgrey;
}
a:hover {
color: red;
background-color: lightgrey;
}
</style>
توجه: همچنین میتوانید رنگ دیگری را برای زمانی که کاربر نشانگر خود را روی پیوند قرار میدهد تنظیم کنید.
پیوندهای نشانه HTML
میتوانید پیوندهای HTML خود را علامت گذاری کنید تا به قسمتهای خاصی از همان صفحه وب (یا یک صفحه وب دیگر) بروید. اگر محتوای شما بسیار طولانی باشد ، نشانکها میتوانند مفید باشند – به عنوان مثال ، ما از نشانکها برای ساده کردن پیمایش در این جدول مرجع استفاده کردیم.
برای ایجاد پیوندهای نشانک HTML در همان صفحه ، باید یک نشانک با استفاده از ویژگی id ایجاد کنید. از آن برای علامت گذاری در بخشی از صفحه که قصد دارید کاربران در انتها بدانند استفاده کنید:
<h2 id="examples">HTML Examples</h2>
سپس ، با اضافه کردن یک علامت هش (#) و به دنبال آن مقدار id از هدف مشخص شده ، پیوند را ایجاد کنید:
<a href="#examples">Jump to HTML Examples</a>
برای قرار دادن پیوند به نشانک از صفحهای دیگر ، قبل از نماد هش (با فرض وجود شناسهای با این مقدار در صفحه دیگر) آدرس URL را وارد کنید:
<a href="https://www.bitdegree.org/tutorials/difference-between-html-and-html5/#What_is_HTML5">Jump to read about HTML5</a>
ویژگی های پیوند HTML که بیشتر مورد استفاده قرار می گیرد
href
ویژگی href آدرس URL مورد نظر را برای یک پیوند HTML تعریف میکند ، و کلمه یا عبارت مشخص شده را قابل کلیک میکند. از آنجا که href پیوند به صفحه وب دیگری را ایجاد میکند ، پیوند HTML بدون آن کار نمیکند:
<a href="https://www.bitdegree.org">This is a link to coding lessons.</a>
Style
ویژگی style ویژگیهای سبک (به عنوان مثال ، رنگ ها) را برای عنصر تنظیم میکند:
<a href="https://www.bitdegree.org/" style="background-color: lime;">This is a hyperlink!</a>
target
ویژگی target محل پیوند HTML را باز میکند. در اینجا تمام گزینههای ممکن وجود دارد:
Description | Option |
کاربر را به یک پنجره یا برگه جدید هدایت میکند. | blank- |
URL را در همان پنجره یا برگهای که روی آن کلیک شده بارگیری میکند. | (self (default feature- |
URL را در قاب اصلی بارگیری میکند. فقط با فریم استفاده میشود | parent- |
سند پیوند داده شده را در بدنه کامل پنجره بارگیری میکند. | top- |
سند پیوند داده شده را در یک قاب مشخص بارگذاری کرد | (frame name (deprecated |
<a href="https://www.bitdegree.org" target="_blank">Loads in New</a>
<a href="https://www.bitdegree.org" target="_self">Loads in Self</a>
<a href="https://www.bitdegree.org" target="_parent">Loads in Parent</a>
<a href="https://www.bitdegree.org" target="_top">Loads in Body</a>
title
ویژگی title اطلاعات اضافی در مورد هدف پیوند را مشخص میکند. اگر کاربری ماوس خود را روی پیوند HTML قرار دهد، به زودی یک راهنما برای توصیف هدف، عنوان یا سایر اطلاعات پیوند HTML ظاهر میشود:
<a href="https://www.bitdegree.org/" title="Link to learn">Learn to code</a>
نکات مهم ایجاد کد پیوند HTML
- اگر از تصویری به عنوان پیوند استفاده میکنید ، بهتر است صفت alt را در آن قرار دهید تا متن جایگزینی برای نمایش در صورت بارگیری نکردن تصویر ارائه شود.
- از ویژگی href میتوان به همراه مقدار mailto و آدرس ایمیل به عنوان مقدار آن استفاده کرد. با کلیک بر روی پیوند HTML ، کاربر به برنامه ایمیل پیش فرض خود که آدرس ایمیل قبلاً در آن موجود است ، هدایت میشود:
<a href="mailto:info@bitdegree.org">Email BitDegree</a>
این مقاله چقدر براتون مفید بود؟