ایجاد کد پیوند HTML

ایجاد کد پیوند HTML

دسته بندی : آموزش HTML سطح مقاله : متوسط زمان مطالعه : 5 دقیقه آخرین بروز رسانی: 02 آذر 1399

ایجاد کد پیوند HTML عنصری قابل کلیک است که کاربر را به صفحه دیگری می برد.

تعریف پیوند HTML

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

<a href="https://www.bitdegree.org">This is a link to coding lessons.</a>

توجه: پیوند HTML نمی تواند عنصر خالی باشد ، زیرا باید دارای محتوای قابل کلیک باشد.

درج ویژگی href در تگ <a> بسیار مهم است – در غیر این صورت پیوند HTML شما به جایی نمی رسد. مانند همه ویژگی ها ، در یک جفت نام و مقدار مشخص شده با حروف کوچک مشخص شده است. در مثال زیر ، یک لینک HTML ساده مشاهده می کنید که شما را به وب سایت BitDegree هدایت می کند:

<a href="https://www.bitdegree.org">This is a link to coding lessons.</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  اضافه کنید. اینگونه می توانید پیوندی را در هر نوع تعریف کنید:

LinkType
https://www.bitdegree.org/learn/html-tagsAbsolute
html-tagsRelative
/learn/html-tagsRoot-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 را باز می کند. در اینجا تمام گزینه های ممکن وجود دارد:

DescriptionOption
کاربر را به یک پنجره یا برگه جدید هدایت می کند.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>

در دوره آموزش HTML بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.

این مقاله چقدر براتون مفید بود؟

اولین امتیاز را ثبت کنید😊