• Kasblar
    • HTML
    CSS
    JavaScript
    PHP
    SQL
    Python
  • Bo'limlar
    • Yangiliklar
    Texnologiyalar
    Maqolalar

    Links

    Link so'zini havolar deb tarjima qilsak bo'ladi. Ammo darslarda link so'zini ishlatib ketamiz.

    Link lar deyarli barcha veb-sahifalarda uchraydi. Ularni sahifadan sahifaga o’tuvchi "ko’prik" desak ham bo’laveradi.

    HTML linklar aslida giperlinklar.

    Siz, linklarni "bosib" boshqa bir faylga yoki sahifaga o’tishingiz mumkin.

    Eslatma: link faqatgina matn bo’lishi shart emas. Rasm yoki har qanday HTML fayl link bo’la oladi!

     

    HTML havolalar – Sintaksiz

    HTMLning  <a>  tegi  link yaratish uchun ishlatiladi.  Ushbu tegning sintaksizi quyidagicha:

    <a href="url"> Link matni </a>

     <a>  elementining eng kerakli atributi bu  href  atributi hisoblanadi.  href  atributi linkning manzilini belgilaydi.Ya'ni link bosilganda u qayerga o'tishi yoki borishi kerakligini ko'rsatadi.

    Link matni – foydalanuvchiga ko’rinadigan qism.

    Linkda matniga bosganda foydalanuvchi belgilangan url manzilga yo’naltiriladi.

    Namuna

    
<!DOCTYPE html>
<html>
<body>

 <h1>HTML linklar</h1>
        
<p>
  <a target="_blank" href="https://www.spaces.uz/">Bizning saytni kuzatib boring!</a>
</p>

</body>
</html>

     

    Natija

    Bizning saytni kuzatib boring!

    Odatda, barcha brauzerlarlarda linklar quyidagicha paydo bo’ladi.

    • Agar linkga shu paytgacha bosilmagan bo'lsa  link osti chizilgan va ko’k rangda bo'ladi
    • Agar link bosilgan bo'lsa  link ostiga chizilgan va binafsha rangda bo’ladi.
    • Agar Faol link bo'lsa link ostiga chizilgan va qizil rangda bo'ladi.

    Maslahat: HTML linklarini ko’rinishi o’zgartirish uchun ularga CSS bilan stil belgilash mumkin.

    Target atributi

    Linklar odatda brauzerning faol (siz turgan) oynasida ochiladi, buni o’zgartirish uchun target atributidan foydalanish kerak.

    Target atributi yozilgan linkning  qayerda ochish belgilaydi.

    Target atributi quyidagi qiymatlardan birini qo’llashi mumkin.

    •  _self    -  default holatda bo'ladi. Ya'ni agar target yozilmagan bo'lsa demak  _self  yozilgan deb tushiniladi. Havolani faol (siz turgan) oynada ochadi.
    •  _blank  - linklarni yangi oynada ochadi.
    •  _parent  -  linklar yangi ('parent')  freymda ochadi,  agar yangi freym yo’q bo’lsa  '_self'  bilan bir xil ishlaydi.
    •  _top  – Barcha freymlarni bekor qiladi sahifani brauzerning to’liq oynasida ochadi,  agar freymlar yo’q bo’lsa, '_self' bilan bir xil ishlaydi.

     

    Mutloq va Nisbiy URL manzillar

    Tepadagi misollarda mutloq (to’liq veb manzil) URL manzillar href atributi bilan qo’llanilgan.

    Nisbiy URL da linklar shu siz turgan veb-sahifaning bosha bir saxifasiga linklar bo'ladi va https://www. sizmi bo'lmaydi.

    Namuna

    <!DOCTYPE html>
<html>
<body>

<h2>Mutloq URL manzillar</h2>
<p><a target="_blank" href="https://www.spaces.uz">spaces.uz sayti</a></p>

<h2>Nisbiy URL manzillar</h2>
<p><a target="_blank" href="/dars/html.html">Manbalar</a></p>

</body>
</html>

    Natija

    Mutloq URL manzillar

    <a href="https://www.spaces.uz/">spaces.uz sayti</a>

    spaces.uz sayti

    Nisbiy URL manzillar

    <a href="https://www.spaces.uz/dars/html.html>Manbalar</a>

    Manbalar

    Rasm va link

    Rasmni link da qo’llash uchun faqatgina <a> tegini ichiga <img> tegini joylang. 

    Namuna

    <!DOCTYPE html>
<html>
<body>

 <h2>Rasm-havola</h2>
        
 <p>Ushbu rasm sizni manbalar saxifasiga olib o'tadi.</p>
        
 <a target="_blank" href="https://www.spaces.uz/dars/html.html">
  <img src="https://picsum.photos/id/1/200/300" >
 </a>
        
</body>
</html>

    Natija

     

    Button va link

    HTML button (tugma/kno'pka) ni havola sifatida ishlatish uchun siz JavaScript kodidan foydalanishingiz kerak.

    JavaScript sizga ba’zi bir hodisalar bo'lsa  undan keyin nima bo'lishni  belgilashga imkon beradi. Masalan, buttonni (tugmani/knopkani) bosganda nima sodir bo'lishini siz o'zingiz aytsangiz bo'ladi.

    Namuna

    <!DOCTYPE html>
<html>
<body>

 <h2>Tugma - havolalar</h2>
        
 <p>html darsliklarini ko'rish uchun tugmani bosing.</p>
        
 <button onclick="document.location='https://www.spaces.uz'">Bizning sayt</button>
        

</body>
</html>

     

    Natija

    Link sarlavhasi.

     title  atributi element haqida qo’shimcha ma’lumotni ko'rsatadi.

    Ushbu ma’lumotlar sichqoncha kursori element ustiga keltirilganida  ko’rsatiladi.

    Namuna

    <!DOCTYPE html>
<html>
<body>

 <h2>Havola sarlavhalari</h2>
 <p>Qo'shimcha ma'lumotlarga ega bo'lish uchun</p>
 <p>sichqoncha kursorini pasdagi element ustiga olib boring</p>
 <a href="https://www.spaces.uz/" title="spaces.uz saytiga o'tish">Bizning sayt</a>  

</body>
</html>

    Natija

    Bizning sayt