Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

HTML havolalar

Havolalar deyarli barcha veb-sahifalarda uchraydi. Havolalar foydalanuvchilarga sahifadan sahifaga o‘tish imkonini beradi.

ULASHISH

HTML havolalar — giperhavolalar

HTML havolalari — giperhavolalar.

Siz havolaga bosib, boshqa hujjatga o‘tishingiz mumkin.

Sichqonchani havola ustiga olib borganingizda, sichqoncha o‘qi kichik qo‘l shakliga o‘tadi.

Eslatma: Havola faqat matn bo‘lishi shart emas. Havola rasm yoki boshqa har qanday HTML elementi bo‘lishi mumkin!

HTML havolalar — sintaksis

HTML <a> tegi giperhavolani aniqlaydi. Uning sintaksisi quyidagicha:

<a href="url">link text</a>

<a> elementining eng muhim atributi — havolaning manzilini ko‘rsatuvchi href atributi.

Havola matni — o‘quvchiga ko‘rinadigan qismi.

Havola matniga bosish o‘quvchini belgilangan URL manzilga yuboradi.

Misol

Ushbu misolda W3Schools.com saytiga havola yaratish ko‘rsatilgan:

<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
O‘zingiz sinab ko‘ring »

Standart bo‘yicha havolalar barcha brauzerlarda quyidagicha ko‘rinadi:

  • Tashrif buyurilmagan havola tagi chizilgan va ko‘k rangda
  • Tashrif buyurilgan havola tagi chizilgan va binafsha rangda
  • Faol havola tagi chizilgan va qizil rangda

Maslahat: havolalarga boshqacha ko‘rinish berish uchun, albatta, CSS dan foydalanishingiz mumkin!

HTML havolalar — target atributi

Standart bo‘yicha havola qilingan sahifa joriy brauzer oynasida ochiladi. Buni o‘zgartirish uchun havolaga boshqa target ko‘rsatishingiz kerak.

target atributi havola qilingan hujjat qayerda ochilishini belgilaydi.

target atributi quyidagi qiymatlardan biriga ega bo‘lishi mumkin:

  • _self — Standart. Hujjat bosilgan o‘sha oyna/tablarda ochiladi
  • _blank — hujjatni yangi oyna yoki tabda ochadi
  • _parent — hujjatni ota-ramkada ochadi
  • _top — hujjatni oynaning to‘liq qismida ochadi

Misol

Havoladagi hujjatni brauzerning yangi oynasi yoki varag‘ida ochish uchun target="_blank" dan foydalaning:

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
O‘zingiz sinab ko‘ring »

Absolyut va relyativ URL’lar

Yuqoridagi ikkala misol ham href atributida mutlaq URL (to‘liq veb-manzil) dan foydalanadi.

Lokal havola (shu sayt ichidagi sahifaga havola) nisbiy URL bilan ko‘rsatiladi ( "https://www" qismisiz):

Misol

<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>
O‘zingiz sinab ko‘ring »

HTML havolalar — rasmni havola sifatida ishlatish

Rasmni havola sifatida ishlatish uchun <img> tegini <a> tegi ichiga joylashtiring:

Misol

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
O‘zingiz sinab ko‘ring »

Email manzilga havola

href atributi ichida mailto: dan foydalanib, foydalanuvchining e-pochta dasturini ochadigan havola yarating (ularga yangi e-pochta yuborishlariga ruxsat berish uchun):

Misol

<a href="mailto:someone@example.com">Send email</a>
O‘zingiz sinab ko‘ring »

Havola sifatidagi tugma

HTML tugmani havola sifatida ishlatish uchun bir oz JavaScript kodi qo‘shishingiz kerak.

JavaScript tugma bosilishi kabi muayyan hodisalarda nima sodir bo‘lishini belgilash imkonini beradi:

Misol

<button onclick="document.location='default.asp'">HTML Tutorial</button>
O‘zingiz sinab ko‘ring »

Maslahat: JavaScript haqida JavaScript darsligimizda batafsil o‘rganing.

Havola sarlavhalari

title atributi element haqida qo‘shimcha ma’lumot belgilaydi. Bu ma’lumot ko‘pincha sichqoncha element ustiga olib borilganda maslahat matni (tooltip) sifatida ko‘rsatiladi.

Misol

<a href="/html" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>
O‘zingiz sinab ko‘ring »

Absolyut va relyativ URL’lar haqida ko‘proq

Misol

Veb-sahifaga havola qilish uchun to‘liq URL dan foydalaning: 

<a href="/html">HTML tutorial</a>

O‘zingiz sinab ko‘ring »

Misol

Joriy veb-saytdagi html papkasida joylashgan sahifaga havola qiling: 

<a href="/html/default.asp">HTML tutorial</a>

O‘zingiz sinab ko‘ring »

Misol

Joriy sahifa bilan bir xil papkada joylashgan sahifaga havola qiling: 

<a href="default.asp">HTML tutorial</a>

O‘zingiz sinab ko‘ring »

Fayl yo‘llari haqida HTML fayl yo‘llari bobida ko‘proq o‘qishingiz mumkin.

Bob xulosasi

  • Havolani aniqlash uchun <a> elementidan foydalaning
  • Havola manzilini aniqlash uchun href atributidan foydalaning
  • Havolalangan hujjat qayerda ochilishini belgilash uchun target atributidan foydalaning
  • Rasmni havola sifatida ishlatish uchun <a> ichida <img> elementidan foydalaning
  • Foydalanuvchining elektron pochta dasturini ochadigan havola yaratish uchun href atributi ichida mailto: sxemasidan foydalaning

HTML havola teglari

Tag Tavsif
<a>Giperhavolani belgilaydi

Barcha mavjud HTML teglarining to‘liq ro‘yxati uchun HTML teglar ma’lumotnomamizga murojaat qiling.

Video: HTML havolalari

Tutorial on YouTube
Tutorial on YouTube
‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish