Atributlar

HTML atributlari HTML elementlari (teglar) haqida qo'shimcha ma'lumot beradi.

HTML atributlari

  • Barcha HTML elementlar atributlarga ega bo'lishi mumkin.

  • Atributlar elementlar haqida qo'shimcha ma'lumot beradi.

  • Atributlar har doim ochiluvchi teg ichida yoziladi.

  • Atributlar odatda atributning nomi va qiymati ko'rinishida keladi: name="value".

href atributi

<a> tegi havolani ifodalaydi. href atributi havola boradigan sahifaning URL manzilni o'z ichiga oladi.

<a href="https://www.w3schools.com">Visit W3Schools</a>
LogoW3Schools online HTML editor

Bizning HTML Havolalar bo'limimizda havolalar haqida ko'proq ma'lumotga ega bo'lasiz.

src atributi

<img> tegi rasmni HTML sahifaga joylashtirish uchun ishlatiladi. src atributi esa rasmning joylashuvini belgilaydi.

<img src="img_girl.jpg">
LogoW3Schools online HTML editor

Atributda URL manzilini ko'rsatishning 2 xil yo'li bor:

1. To'liq URL - boshqa web-saytda joylashgan rasmning havolasi. Misol: src="https://www.w3schools.com/images/img_girl.jpg"

Eslatma: Boshqa web-saytdagi rasmlar mualliflik huquqi asosida himoyalangan bo'lishi mumkin. Agar undan foydalanish uchun muallifdan ruxsat olmagan bo'lsangiz, mualliflik huquqi to'g'risidagi qonunlarni buzgan bo'lishingiz mumkin.

2. Nisbiy URL - veb-saytning ichidagi rasm uchun havolalar. Bunda URL ichida domen nomi yozilmaydi. Agar URL qiyshiq chiziqsiz ( / ) boshlansa, rasm aynan shu sahifada joylashganini bildiradi. Misol: src="img_girl.jpg". Agar URL qiyshiq chiziq bilan boshlansa, rasm biror bir papka ichida ekanligini bildiradi Misol: src="/images/img_girl.jpg".

Maslahat: Deyarli har doim nisbiy URL manzillaridan foydalanish samarali usul hisoblanadi.

Width va height atributlari

Shuningdek, <img> tegida rasmning balandligi va kengligini piksellarda belgilaydigan width va height atributlari ham mavjud.

<img src="img_girl.jpg" width="500" height="600">
LogoW3Schools online HTML editor

Alt atributi

<img> tegining alt atributi rasm biror sababga ko'ra ko'rinmay qolsa, rasmning o'rniga unga berilgan matnni ko'rsatadi. Rasm ko'rinmay qolishining sababi internetning sekinligi yoki src atributidagi xatolik yoki screen readerdan foydalanilganligi bo'lishi mumkin.

<img src="img_girl.jpg" alt="Girl with a jacket">
LogoW3Schools online HTML editor

Agar mavjud bo'lmagan rasmni ko'rsatishga harakat qilsak, nima bo'lishini ko'ring:

<img src="img_typo.jpg" alt="Girl with a jacket">
LogoW3Schools online HTML editor

Bizning rasmlar bo'limimizda rasmlar haqida ko'proq bilib olasiz.

Style atributi

Style atributi elementga rang, shrift, oʻlcham va boshqa ko'plab xususiyatlar berish uchun ishlatiladi.

Misol uchun:

<p style="color:red;">This is a red paragraph.</p>
LogoW3Schools online HTML editor

Bizning Stillar bo'limimizda ular haqida ko'proq ma'lumot bilib olasiz.

Lang atributi

Veb-sahifa qaysi tilda ekanligini bildirish uchun har doim lang atributini <html> tegiga beramiz. Bu qidiruv tizimlari va brauzerlarga yordam berish uchun mo'ljallangan.

Quyidagi misol sayt ingliz tilida ekanligini ifodalaydi:

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

Mamlakat kodlari lang atributidagi til kodiga ham qo'shilishi mumkin. shunday qilib birinchi ikkita belgi HTML sahifasining tilini, oxirgi ikkita ikkita belgi esa mamlakatni belgilaydi.

Quyidagi misolda ingliz tili til sifatida, AQSH esa mamlakat sifatida ko'rsatilgan:

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

Siz barcha til kodlarini HTMLning til kodlari bo'limidan koʻrishingiz mumkin.

title (sarlavha) atributi

title atributi element haqida qo'shimcha ba'zi ma'lumotlarni belgilaydi.

Element ustiga sichqonchani olib borganingizda,o'ng tomonda title atributiga berilgan qo'shimcha ma'lumot ko'rsatiladi:

<p title="I'm a tooltip">This is a paragraph.</p>
LogoW3Schools online HTML editor

Tavsiyamiz: har doim kichik harfli atributlardan foydalaning

HTML standarti atribut nomlarini aynan kichik harfda yozilishini talab qilmaydi.

title atributi (va shu kabi barcha boshqa atributlar ham) title yoki TITLE kabi katta yoki kichik harflar bilan yozilishi mumkin.

Biroq, W3C ning maslahati atributlarni kichik harfda yozishni tavsiya qiladi va XHTML kabi murakkab hujjat turlari kichik harf atributlarini talab qiladi.

W3Schools da biz har doim kichik harfdagi atribut nomlaridan foydalanamiz.

Bizning taklif: har doim atribut qiymatlarini qo'shtirnoq (") ichiga oling.

HTML standarti atribut qiymatlarini aynan qo'shtirnoq ichida bo'lishini talab qilmaydi.

Biroq, W3C atribut qiymatlarini qo'shtirnoq ichida yozishni maslahat beradi va XHTML kabi murakkab hujjat turlari kodirovkalarni talab qiladi.

Yaxshi kod:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
Yomon kod:
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>

Ba'zan siz qo'shtirnoqlardan foydalanishingiz shart. Ushbu misolda title atributi to'g'ri ko'rsatilmaydi, chunki unda bo'sh joy bor:

<p title=About W3Schools>
LogoW3Schools online HTML editor

W3Schools da biz har doim atribut qiymatlarini qo'shtirnoqlar ichida yozamiz.

Bir tirnoq yoki qo'shtirnoq ?

HTMLda atribut qiymatlarini qo'shtirnoq ichida yozish eng keng tarqalgan usul, ammo bir tirnoqdan ham foydalanish mumkin.

Ba'zi hollarda, atribut qiymatidagi matnning bir qismida qo'shtirnoqdan foydalanilgan bo'lsa, umumiy atribut qiymayini birtirnoq ichida yozish kerak:

<p title='John "ShotGun" Nelson'>

yoki aksincha:

<p title="John 'ShotGun' Nelson">
LogoW3Schools online HTML editor

Xulosa

  • Barcha HTML elementlari atributlarga ega bo'lishi mumkin;

  • <a> tegining href atributi havola boradigan sahifaning URL manzilini belgilaydi;

  • <img> tegining src atributi ko'rsatiladigan rasmning joylashuv manzilini belgilaydi;

  • <img> tegining width va height atributlari rasmlarning o'lchami belgilaydi;

  • <img> tegining alt atributi rasm ko'rinmay qolsa, uning o'rniga kiritilgan matnni taqdim etadi;

  • style atributi rang, shrift, o'lcham va boshqa shu kabi elementga qo'shimcha xususiyat berish uchun ishlatiladi;

  • <html> tegining lang atributi websahifa tilini ifodalaydi;

  • title atributi element haqida ba'zi qo'shimcha ma'lumotlarni belgilaydi.

HTML mashqlari

LogoW3Schools HTML Exercise

HTML atributiga tavsiya

LogoHTML Attributes
PreviousElementlarNextHeadinglar

Last updated