HTML Atributlari

HTML Atributlari


Atributlar HTML elementlari haqida qo'shimcha ma'lumot beradi.


HTML Atributlari

  • HTML elementlari atributlarga ega bo'lishi mumkin
  • Atributlar HTML elementlari haqida qo'shimcha ma'lumot beradi
  • Atributlar har doim bosh(body) tegi ichida keladi.
  • Atributlar nom va qiymat juftligida ishlatiladi: nom="qiymat"

lang Atributi

Dokumentning tilini <html> tegi ichida ba'yon qilish mumkin

Til lang atributi ichida ba'yon qilinadi

Dokumentning tilini kiritib o'tish foydalanuvchi qurilma dasturlar va qidiruv tizimlari yaxshi ishlashini ta'minlaydi:

<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>Mening birinchi sarlavham.</h1>
<p>Mening birinchi paragrafim.</p>
</body>
</html>

Birinchi ikkita harf tilni aniqlaydi (uz). Agar dialekt mavjud bo'lsa yana ikkita harf ishlatiladi (en-US yoki en-UK).


Title (sarlavha) atributi

HTML paragraflari <p> tegi blan ba'yon qilinadi

Quyidagi misolda <p> elementi title atributiga ega. Atributning qiymati "inLab.uz haqida":

Namuna:

O'zingni Sinab Ko'r
<p title="inLab haqida">
inLab veb developerlar sayti. 
U HTML, CSS, JavaScript, XML, SQL, PHP, ASP va veb dasturlashning
boshqa jabhalarini qamrovchi qo'llanmalarni taqdim qiladi.
</p>

...   Sichqonchani element ustiga olib kelsangiz title atributining qiymati "tooltip" ning ichida ekranga chiqadi.


href Atributi

HTML havolalari(link) <a> tegi bilan ba'yon qilinadi. Havolalarning manzillari href atributida beriladi

Namuna:

O'zingni Sinab Ko'r
<a href="http://www.inLab.uz">Bu havola</a>

Havolalar(link) va <a> tegi haqida keyingi sahifalarimizda ko'proq narsalarni o'rganib olasiz


O'lcham atributlari

HTML rasmlar <img> tegi blan ba'yon qilinadi

Manbaning (src) fayl nomi, va rasmning o'lchamlari (width va height) atributlar ko'rinishida beriladi

Namuna:

O'zingni Sinab Ko'r
<img src="inlab.png" width="200" height="50">

Rasmning o'lchami piksellarda beriladi: width="104" rasmning eni 104 pikselga tengligini bildiradi.

Rasmlar va <img> tegi haqida to'liq ma'lumotni keyingi sahifalarimizda o'rganib olasiz


alt Atributi

Alt atributi HTML elementini ekranga chiqarish imkoni mavjud bo'lmaganda ekranga chiqaraladigan alternativ tekstni ba'yon qiladi.

Atribut qiymati screen readerla orqali o'qilishi mumkin. Bu esa o'z navbatida ko'r insonlar uchun element qiymatini eshitish imkonini beradi.

Namuna:

O'zingni Sinab Ko'r
<img src="inLab.jpg" alt="inLab.uz" width="104" height="104">

Har doim kichik harfdagi atributlarni ishlatishni maslahat beramiz

HTML5 standartlari kichik harfdagi atribut nomlarini talab qilmaydi

title atributi Title yoki TITLE ko'rinishida ham yozilishi mumkin

Biz HTML4 da kichik harflarni ishlatishni maslahat beramiz, XHTML kabi talabchan dokument turlari esa kichik harflarni ishlatishni talab qiladi.

...   Kichik harf eng keng tarqalgan hisoblanadi, unda yozish onsonroq. inLab jamoasi atributlar nomlari uchun kichik harflardan foydalanish maslahat beradi chunki bu keyinchalik qulayliklar yaratdi


Atributlarning qiymatlarini doim qo'shtirnoqlar ichida yozishni maslahat beramiz

HTML5 standartlari atributlarning qiymatlarini qo'shtirnoqqa olishni talab qilmaydi

Yuqorida ko'rsatilgan href atributi, quyidagidek yozilishi mumkin:

Namuna:

O'zingni Sinab Ko'r
<a href=http://www.inLab.uz>Bu link</a>

inLab HTML4 da qo'shtirnoqlarni ishlatishni maslahat beradi, XHTML kabi talabchan dokument turlarida esa qo'shtirnoqlarni ishlatishni talab qiladi

Ba'zida qo'shtiqnoqlarni ishlatish zarur. Quyidagi namuna to'g'ri natijani chiqarmaydi, chunki atributning qiymatida bo'shliq (probel) bor

Namuna:

O'zingni Sinab Ko'r
<p title=inLab haqida>

...   Qo'shtirnoqlarni ishlatich juda keng tarqalgan. Ularni ishlatmaslik xatolarni kelitirib chiqarishi mumkin. inLab da biz har doim qo'shtirnoqlardan foydalanamiz.


Yakka yoki juft qo'shtirnoqlar?

HTML da juft qo'shtirnoqlar ko'proq ishlatiladi, lekin yakka qo'shtirnoqlarni ishlatish mumkin.

Artibutning qiymatida juft qo'shtirnoq ishlatilgan bo'lsa yakka qo'shtirnoqni ishlatish zarur.

<p title='Islombek "Cool" analysist'>

va aksincha:

<p title="Islombek 'Cool' analysist">

Sahifa xulosalari:

  •   Barcha HTML elementlari atributlarga ega bo'lishi mumkin
  •   title atributi "tool-tip" da qo'shimcha ma'lumot beradi
  •   href atributi havolalarning manzilini berish uchun ishlatiladi
  •   width va height atributlari rasm o'lchamlari haqida ma'lumot beradi
  •   alt attrbuti "screen reader" larga tekstni beradi
  •   inLabda HTML atributlari nomlarini kichik harflard yozamiz.
  •   inLabda atributlarning qiymatlarini juft qo'shtirnoqlar ichida yozamiz.

HTML atributlari

atribut Tavsifi
alt Rasm uchun alternativ mattni ba'yon qiladi
disabled Kiritilgan element o'chiq bo'lishini ba'yon qiladi.
href Havolaning manzili (URL) ni ba'yon qiladi.
id Elementga yagona id beradi.
src Rasmning manzili (URL) ni ba'yon qiladi.
style translate
title translate
value translate

Innovative Lab web sahifasiga xush kelibsiz biz bilan birga IT sohasidagi o'z bilimlaringizni bosqichma-bosqich oshirib boring!


Telegram kanalimizdan kunlik darslarni o'rganing  

TOSHKENT SHAHRIDAGI INHA UNIVERSITETI - 2017