Mazkur maqolada HTML’da ishlash asoslarini ko’rib chiqamiz. Elementlar, atributlar, teglar kabi tushunchalarni izohlash bilan birga, HTML-elementlar, odatiy HTML-sahifa qanday tuzilishini ham ko’rsatib o’tamiz.

7879536da53abd6474a99.jpg

 

Zaruriy malakalar:

Kompyuter bilan ishlay olish, zaruriy dasturiy ta’minotga, fayllar bilan ishlash bo’yicha asosiy bilimlarga ega bo’lish

Maqsad:

HTML tili bilan tanishish va undagi ba’zi elementlarni yozishni o’rganish.

Avvalgi maqolalarimizda HTML nima ekanligi hamda u bilan ishlash uchun boshlang’ich malakalar haqida ma’lumot bergan edik. HTML turli elementlar ya’ni teglardan iborat. HTML teglardan joylashtirmoqchi bo’lgan ma’lumotingizning ko’rinishi va joylashuvini belgilab berish uchun foydalaniladi. Masalan, quyidagi qatorni ko’rib chiqamiz:

Mening mushugim juda xafa

Agar biz qator shunday ko’rinishda namoyon bo’lishini istasak, uni paragrafdek bo’lishi uchun <p></p> elementini belgilashimiz kerak. Masalan,

<p>Mening mushugim juda xafa</p>

HTML elementlar tuzilishi

Paragraf elementining batafsil ko’rib chiqamiz:

 

90c741cc48812caa91882.png

 

Elementning asosiy qismlari quyidagicha:

Ochiluvchi teg (Opening tag): U qavslar ichidagi element nomidan iborat (bizning vaziyatda p). Ushbu teg boshlanishining belgisi bo’lib xizmat qiladi va shu paytdan e’tiboran o’zidan keyingi matnga ta’sir etadi.

Yopiluvchi teg (Closing tag): Ochuvchi tegdek ko’rinishga ega, lekin teg nomidan avval slesh (/) keladi. Elementning oxirgi elementi bo’lib xizmat qiladi. Yopiluchi tegni unutib qoldirish aksariyat sohada yangi ish boshlaganlar yo’l qo’yadigan xatodir.

Tarkib: ko’rinib turibdiki, bizning vaziyatimizda tarkib oddiy matndan iborat.

Element: Ochiluvchi teg + tarkib + yopiluvchi teg = element.

Siz shuningdek, elementlar ichiga ham boshqa elementlarni kiritishingiz mumkin va bu kiritmalar deb ataladi. Agar biz mushukning xafaligiga alohida urg’u berishni istasak, juda so’ziga <strong> tegi bilan o’rash bilan kontekstda bu so’zning ahamiyatini yanada oshirish mumkin:

<p>Mening mushugim <strong>juda</strong> xafa.</p>

Elementlar bir-birining ichida yoki tashqarisida aniq joylashishini ta’minlash uchun ular to’g’ri ochib-yopilishi shart.

HTML elementlari ikkita asosiy kategoriyaga bo’linadi. Ular blokli va qatorli elementlardir.

Blokli elementlar sahifada ko’rinadigan blok shaklida namoyon bo’ladi – ular o’zidan oldin kelgan istalgan kontentdan so’ng yangi qatordan boshlanadi va ulardan keyingi istalgan kontent yangi qatorda joylashadi, ya’ni blokli elementlarning chap va o’ng tomonida ham hech nima bo’lmaydi.

Blokli elementlarga ko’pincha paragraflar, ro’yxatlar, navigatsiya menyusi kabi sahifaning tuzilmaviy elementlari kiradi. Blokli elementlar qatorli elementlar tarkibiga kirmaydi lekin blokning boshqa elementlari tarkibiga kirishi mumkin.

Qatorli elementlarning blokli elementlardan farqi ular matnning qisqa bo’laklarining ko’rinishini belgilab beradi. Qatorli elementlar hujjatda yangi qator paydo bo’lishiga olib kelmaydi: ular odatda matn abzatsining ichida uchraydilar, misol uchun <a> (havola) elementi yoki <em> (kursiv), <strong> (qalin) elementlari.

Keyingi misolga qarang:

<em>Birinchi</em><em>ikkinchi</em><em>uchinchi</em>

<p>to’rtinchi</p><p>beshinchi</p><p>oltinchi</p>

<em> — bu qator elementi bo’lib, ko’rib turganingizdek, ilk 3 ta elementlar bir-biri bilan ketma-ket bo’sh joysiz bitta qatorda joylashgan. Boshqa tomondan, <p> bu blokli elementi, shunday ekan har bir element tarkibi yangi qatorda joylashgan.

Hamma elementlar ham ochiluvchi teg, kontent, yopiluvchi teg shabloniga mos tushavermaydi. Ba’zi elementlar yagona tegdan iborat bo’ladi va odatda hujjat joylashgan joyga biror nima qo’yish uchun ishlatiladi. Masalan, <img> elementi sahifaning shu joyiga rasm qo’yish uchun foydalaniladi:

<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">

Atributlar elementning qo’shimcha xususiyatlarini belgilab beradi va ular sahifada ko’rinmaydi.

Bu vaziyatda class atributi elementning shakli va ko’rinishini belgilab beruvchi xususiyatlarini qo’llash uchun foydalaniladi.

e3ef54e9e747a060591b3.png

 

Elementga atributlar qo’shish

Misol uchun <a>elementini olamiz, u “anchor” langar degani bo’lib matn ichiga giperyo’llanma qo’shadi.

Matn ichida bir necha atributlar bo’lishi mumkin, ulardan ikkitasi quyida berilgan:

href: bu atributda o’tilishi kerak bo’lgan boshqa sahifa havolasi yoziladi. Masalan, href="https://www.mozilla.org/".

title: title atributi o’tiladigan sahifa haqida qo’shimcha ma’lumot beradi. Masalan, title="The Mozilla homepage". U havolaga kursorni olib borganda paydo bo’ladi.

“Boolean” atributlari

Ba’zida hech qanday qiymatga ega bo’lmagan atributlarni ko’rishingiz mumkin. Bunday atributlar “Boolean” atributlar deb ataladi va nomiga muvofiq faqat bitta qiymatga ega bo’ladi.

Misol tariqasida input elementlarini faol bo’lmagan va foydalanuvchi ularni o’zgartira olmasligi uchun disabled atributini olaylik.

<input type="text" disabled>

Ayrim paytlarda qiymatni atribut nomi bilan ham belgilash mumkin:

<input type="text" disabled="disabled">

Bitta yoki ikkita qo’shtirnoq

Maqolada ikkitalik qo’shtirnoqlardan foydalanilganini ko’rdik. Lekin HTML hujjatlarda bitta qo’shtirnoqlarni ham uchratishingiz mumkin. Bu narsa xohishga ko’ra bo’lib, siz o’zingizga qulayini tanlashingiz mumkin. Quyidagi ikkita qator bir xil hisoblanadi:

<a href="http://www.example.com">A link to my example.</a>

<a href='http://www.example.com'>A link to my example.</a>

Biroq, ularni aralashtirib yubormaslik kerak, aks holda xatolik yuz beradi.

Agar siz o’z HTML sahifangizda bir turdagi qo’shtirnoqni ishlatadigan bo’lsangiz, uning ichiga boshqa turdagi qo’shtirnoqni qo’shishingiz mumkin:

<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>

Agar bir turdagi qo’shtirnoqlarni qo’yishni istasangiz matn ichidagi qo’shtirnoqlarni teskari slesh belgisi “\” ni ishlatishingiz kerak bo’ladi.

Misol uchun, <a href="http://www.example.com" title='Isn\'t this fun?'>A link to my example.</a> ko’rinishda bo’lishi lozim.

HTML’da probellar

Brauzerlarning o’ziga xos jihatidan biri shundaki, kod terish jarayonida bir nechta bo’sh joylar qoldirilsa ham matn bitta probelli masofa bilan ajratiladi. Quyidagi misollar ham bir xil ko’rinishda tasvirlanadi:

<p>Dogs are silly.</p>

<p>Dogs       are

        silly.</p>

Agar bo’sh joylarni matndagidek ko’rsatish zarurati bo’lsa, <pre> tegini ishlatish mumkin.

HTML sharhlar

HTML’da ham boshqa dasturlash tillaridek kodda sharh qoldirish imkoni mavjud. Sharhlar brauzer tomonidan e’tiborsiz qoldiriladi va foydalanuvchilarga ko’rinmaydi, ularni yozma kodning qanday ishlashini, uning alohida bo’limlari nima vazifa bajarishini tushuntirish uchun qo’shiladi.

HTML-fayl ichida sharhlar yozish uchun maxsus markerlar <!-- va -->qo’shish kerak. Misol uchun:

<p>Bu matn ko’rinadi</p>

<!-- <p>Sharh ichida matn ko’rinmaydi </p> -->

Xulosa

Xulosa o’rnida aytish mumkinki, dasturlashda HTML tilini o’rganish o’zining osonligi bilan ommalashgan. Web-dasturlashning qolgan bosqichlarida ham uning asosiy tushunchalari kerak bo’lishi tilni o’rganishga bo’lgan qiziqishni oshirmoqda.

 

O`zbekistonda Web dasturlash bo'yicha, masofaviy ta'lim kurslari, va malaka oshirish.

+998994840105

https://facebook.com/DevelopersUz

https://vk.com/uzbdevelopers

https://t.me/UzbDevelopers