🌝

Qisqa satrlarda HTML — 2. Asosiy tushunchalar

#HTML

HTML — Web Hypertext Application Technology Working Group (WHATWG, ya’ni veb-gipermatn texnologiyalari ishchi guruhi) tomonidan yaratilgan standartdir. Bu guruh eng mashhur brauzer ustida ishlovchilardan tuzilgan. Oddiy qilib aytganda bu guruh Google, Mozilla, Apple va Microsoft tomonidan boshqariladi.

Dastlab HTML ga World Wide Web Consortium (W3C) tashkiloti mas’ul edi. Lekin ularning XHTML ga ko‘p urg‘u berishlari xato qarorligi ayon bo‘lgandan keyin, HTML nazorati WHATWG ga o‘tib ketdi.

XHTML haqida oldin eshitmaganlar uchun kichik hikoya. 2000-yillar boshida, barchamiz Web ning kelachagi XML bilan bog‘liq deb o‘ylardik. Shuning uchun HTML SGML ga asoslangan mualliflik tilidan XML standartiga o‘ta boshladi. Bu juda katta o‘zgarish edi. Biz endi ko‘proq qoidalarni bilishimiz, o‘rganishimiz kerak edi. Qoidalar esa qat’iyroq bo‘ldi. Lekin brauzer ishlab chiqaruvchilari bu yo‘l Web uchun noto‘g‘ri ekanligini anglashdi, va barini ortga qaytarishdi. Natijada biz hozir bilgan HTML5 paydo bo‘ldi.

W3C osonlikcha HTML nazoratini berib qo‘ymadi. Bir necha yil davomida 2 ta standart o‘rtasida raqobat ketdi, ikkisini ham maqsadi rasmiy standtartga aylanish edi. Nihoyat 2019-yil 28-mayga kelibgina W3C rasman mag‘lubiyatini tan oldi va WHATWG tomonidan yaratilgan HTML versiyani to‘g‘ri deb qabul qildi.

Yuqorida HTML5 deb aytib o‘tdim, keling endi HTML versiyalar tarixini ko‘rib chiqsak. Bilaman, bu biroz chalg‘ituvchi hikoya. Aslida hayotda juda ko‘p narsalar shunday, undan ko‘plab aktorlar ishtirok etadi. Lekin shu sababli ham u qiziq =)

HTML 1-versiyasi 1993-yilda e’lon qilindi. Havolada rasmiy RFC ni ko‘rishingiz mumkin.

1995-yil HTML 2, 1997-yil yanvar oyida HTML 3, o‘sha yil dekabr oyida esa HTML 4 ga ega bo‘ldik.

XHTML dan HTML5 o‘tishimiz uchun umumiy 20 yildan ortiqroq vaqt ketdi. HTML5 endi oddiy HTML emas. U barcha zamonaviy texnologiyalari to‘plamini o‘zida jamlangan. Misol qilib juda ko‘plab API va standartlarni sanashimiz mukin: WebGL, SVG…

Bu yerda tushunishingiz kerak bo‘lgan asosiy narsa shuki, HTML ni versiyasi yo‘q. Bu doimiy bor standart, xuddi CSS kabi. Biz uni 3-versiyasi deb atasakda, aslida bu alohida va mustaqil ishlab chiqilgan modullar jamlanmasi. JavaScriptda ham, har yili yangi versiya chiqsada, aslida ahamiyatga ega joyi faqat yangi mustaqil xususiyatlari xolos.

To‘g‘ri biz uni HTML5 deb ataymiz. 1997-yildan boshlab esa HTML4 deganmiz. Bu juda katta muddat, u xoh web bo‘lsin.

Bu yerda shu standart bilan to‘liq tanishishiz mumkin:
https://html.spec.whatwg.org/multipage.

HTML markerlash tili bo‘lib, web olami tuzilmasini yaratishda foydalaniladi.

HTML brauzerga turli yo‘llar bilan uzatiladi:

Keling oxirgi holatni kengroq ko‘rib chiqamiz. Amaliyotda bu eng kam tarqalga usul bo‘lsada, bloklar yasalish asosini tushunib olish uchun muhim.

Konsepsiyaga ko‘ra HTML fayli .html yoki .htm kengaytmasiga ega bo‘ladi. Fayl teglardan iborat. Teglar esa kontentni o‘rab turadi va har bir teg o‘zi o‘rab turgan matnga qandaydir ma’no yuklaydi.

Keling buni misolda ko‘ramiz. Quyudagi HTML kodda p teg paragraf yaratadi:

1

<p>Matn paragrafi</p>

Quyida esa, ul tegi tartiblanmagan ro‘yxatni va li tegi ro‘yxat elementlarini yaratadi:

1
2
3
4
5

<ul>  
    <li>Birinchi element</li>  
    <li>Ikkinchi element</li>  
    <li>Uchinchi element</li>  
</ul>

HTML brauzerga kelgan payti, teglar interpretatsiyadan o‘tadi va brauzer har bir elementni vizual qoidalarga ko‘ra ifodalab beradi. Ba’zi qoidalar standrat holatda berilgan bo‘ladi, masalan, ro‘yxat qanday ifodalanishi yoki havola tagiga ko‘k rangda chizilishi. Boshqa qoidalar esa CSS orqali belgilanadi.

HTML taqdimot uchun emas. U elemetnlarni qanday ko‘rinishini emas, balki nima ekanligini ifodalash uchun foydalaniladi. Uning qanday ko‘rinishda chiqishiga brauzer mas’uldir. U bu ishni CSS ga qarab bajaradi.

HTML sahifa strukturasi

Keling birgalikda HTML sahifa yaratib ko‘ramiz.

Avval hujjat turini e’lon qilish bilan boshlanadi, bu bilan biz brauzerga bu HTML sahifa ekanligini va uning qaysi versiyasidan foydalanayotganligimizni ta’kidlaymiz.

Zamonaviy HTML quyidagi doctype dan foydalanadi

1

<!DOCTYPE html>

Keyin esa ochuvchi va yopuvchi tegga ega bo‘lgan html elementi keladi.

1
2
3
4

<!DOCTYPE html>  
<html>  
    …  
</html>

Ko‘plab teglar juft holatda: ochuvchi va yopuvchi tegi bilan keladi. Yopuvchi teg hamrohidan faqat / belgi orqali farq qiladi.

1

<teg> … </teg>

Ba’zi oz sonli teglar yopuvchi tegga ega emas. Chunki o‘zida hech qanday kontentni olib yurmaydi.

Ochuvchi html tegi sahifa hujjati turini e’lon qilgandan keyin keluvchi dastlabki teg bo‘lishi kerak. Uning yopuvchi tegi esa HTML hujjatdagi eng oxirgi teg bo‘lishi kerak.

html elementi ichida ikkita element keladi. Bular head va body elementlari.

1
2
3
4
5
6
7
8
9

<!DOCTYPE html>  
<html>  
    <head>  
        …  
    </head>  
    <body>  
        …  
    </body>  
</html>

head ni ichida biz web sahifa yaratish uchun kerak bo‘ladigan eng muhim ma’lumotlarni beramiz. Masalan, sarlavha, meta ma’lumot, va ichki yoki tashqi CSS, JavaScript. Aniqroq qililb aytganda sahifada ko‘rinish bermaydi-yu lekin brauzerga sahifani to‘g‘ri ko‘rsatishi uchun yordam beradigan narsalar (botlar ham bo‘lishi mumkin, masalan Google qidiruv boti) keladi.

body ichida esa sahifa kontenti keladi, ya’ni ko‘rinuvchi narsalar.

Teg va element

Men ba’zi o‘rinda teg, ba’zi o‘rinda element so‘zini qo‘llayapman. Bularning farqi nimada?

Element ochuvchi va yopuvchi tegga ega bo‘ladi. Quyidagi misolda biz p elementini yaratish uchun ochuvchi va yopuvchi tegdan foydalanamiz:

1

<p>Qandaydir matn</p>

Demak, elementning tarkibi quyidagi ko‘rinishda bo‘ladi:

Agar element yopuvchi tegga ega bo‘lmasa, u faqat ochuvchi teg orqali yoziladi va hech qanday matnli kontentga ega bo‘lmaydi.

Xulosa qilib aytganda, men element va teg so‘zlari orqali bir xil narsani ifodalayotgan bo‘laman, ochuvchi teg va yopuvchi teg birikmalari bundan mustasno.

Atributlar

Ochuvchi tegga biz atribut deb ataluvchi ma’lumotni biriktirishimiz mumkin.

Attribut sintaksisi kalit=”qiymat” ko‘rinishiga ega:

1

<p class=”a-class”>Matn paragrafi</p>

Siz shuningdek biitalik tirnoq — ‘’ ishlatsangiz ham bo‘ladi, lekin HTML da qo‘shtirnoqdan foydalangan ma’qul va bu shartli ravishda qabul qilingan.

Atributlar bir nechta bo‘lishi ham mumkin:

1

<p class="a-class" id="an-id">Matn paragrafi</p>

Ba’zi atributlar mantiqiydir, ya’ni kalit qiymatini kiritishni o‘zi yetarli:

1

<script defer src="file.js"></script>

Eng ko‘p foydalaniladigan atributlar class va id atributlaridir. Ularning maxsus vazifasi bor, shuningdek CSS va JavaScriptda sezilarli foyda beradi. Ularning o‘zaro farqi shundaki id unikal, butun sahifada takrorlanmas bo‘ladi. class esa aksincha bir necha marta turli elementlarda takrorlanishi mumkin. Yana bir farqi, id faqat bitta qiymatga teng bo‘ladi, class esa o‘zaro ajratilgan holda bir necha qiymatlarga teng bo‘lishi mumkin:

1

<p class="a-class b-class">Matn paragrafi</p>

Class ning qiymatlarida so‘zlarni odatda chiziqcha - bilan ajratiladi, shartli ravishda shunday qabul qilingan.

Bular hozircha bilishingiz kerak bo‘lgan ikkita asosiy atributlardir. Ba’zi shunday atributlar borki, ular faqat biron-bir maxsus tegdagina qo‘llaniladi. Boshqa atributlar esa umumiyroq holda foydalaniladi. Hozir ko‘rganimiz class va id ham shunday toifaga mansub, shuningdek style atributi elementga ichki CSS qoidalarini qo‘shish uchun ishlatiladi.

Registr sezuvchanligi

HTML registr sezuvchan emas, ya’ni teglarni bosh harflarda ham kichik harflarda yozsa bo‘ladi. Avvalari bosh harflar yozish odatiy edi, lekin hozir kichik harflar bilan yozish urf. Bu ham shartli, albatta.

Odatda bunday yozamiz:

1

<p>Matn paragrafi</p>

Bunday emas:

1

<P>Matn paragrafi</P>

Bo‘sh satr

Juda muhim qismi: HTML da bo‘sh satrlar ahamiyatga ega emas. Bo‘sh satr qiymatdan olib tashlanadi.

Brauzer uchun

1

<p>Matn paragrafi</p>

ham,

1

<p>   Matn paragrafi</p>

ham,

1
2

<p>Matn   
      paragrafi </p>

ham bir xil ma’noga ega.

Men sizga yaxshi tartiblangan, o‘qish uchun oson bo‘lgan sintaksisdan foydalanishni maslahat beraman.

Men odatda bunday ko‘rinishni afzal ko‘raman:

1

<p>Matn paragrafi</p>

Yoki

1
2
3

<p>  
    Matn paragrafi  
</p>

Ichma-ich teglar 2 yoki 4 ta belgi orqali bir-biridan ajratiladi.

1
2
3
4
5
6
7
8

<body>  
    <p>  
        Matn paragrafi  
    </p>  
    <ul>   
        <li>ro’yxat elementi</li>  
    </ul>  
</body>

Eslatma 1: “HTML da bo‘sh satrlar ahamiyatga ega emas” jumlasi shuni anglatadiki, agar siz qo‘shimcha bo‘sh satr qo‘shmoqchi bo‘lsangiz, oddiy satr bilan qila olmaysiz va bu sizni asabingizni o‘ynashi mumkin. Shunday holatda CSS dan foydalanishni maslahat beraman.