HYPER TEXT MARKUP LANGUAGE DASTURLASH TILINING ENG ZARUR ELEMENTLAR
Abstract
Har qanday raqamli loyihaning yuragi bo`lgan veb-sahifalar qurilishi HTML (Hyper Text Markup Language) bilan boshlanadi. Ushbu maqolada HTML hujjatining eng muhim strukturaviy poydevori ya’ni “skeleti”ni tushunishga yordam beradi. <DOCTYPE> deklaratsiyasidan tortib, <head> ichidagi meta-ma’lumotlarning ahamiyatini batafsil ko`rib chiqamiz. Asosiy e’tibor <body> qismiga qaratiladi, unda siz sahifangizni mazmun bilan to`ldirish uchun eng ko`p qo`llaniladigan elementlar, jumladan, sarlavha (<h1><h6>), xatboshilar(<p>), media(<img>) va navigatsiya(<a>) elementlarining to`g`ri qo`llanilishini o`rganiladi. Qo`llanma orqali sz shunchakikod yozishni emas, balki standartlarga javob bera oladigan, tartibli va yaxshi tuzilgan veb-sahifalarni yaratish uchun fundamental bilimlarni egallaysiz.
Full text
ISSN: 2181-3906 2025 International scientific journal «MODERN SCIENCE АND RESEARCH» VOLUME 4 / ISSUE 12 / UIF:8.2 / MODERNSCIENCE.UZ 622 HYPER TEXT MARKUP LANGUAGE DASTURLASH TILINING ENG ZARUR ELEMENTLAR Sodirova Dilshoda Sodiqjon qizi Namangan davlat pedagogika instituti Intellektual fanlar va axborot texnologiyalari kafedrasi o`qituvchisi. E-mail: [email protected] Ne’matillayeva Gulinur Nasimjon qizi Namangan davlat pedagogika instituti Aniq va tabiiy fanlar fakulteti talabasi. E-mail: gulinurnematullayev[email protected] https://doi.org/10.5281/zenodo.17983488 Annotatsiya. Har qanday raqamli loyihaning yuragi bo`lgan veb-sahifalar qurilishi HTML (Hyper Text Markup Language) bilan boshlanadi. Ushbu maqolada HTML hujjatining eng muhim strukturaviy poydevori ya’ni “skeleti”ni tushunishga yordam beradi. <DOCTYPE> deklaratsiyasidan tortib, <head> ichidagi meta-ma’lumotlarning ahamiyatini batafsil ko`rib chiqamiz. Asosiy e’tibor <body> qismiga qaratiladi, unda siz sahifangizni mazmun bilan to`ldirish uchun eng ko`p qo`llaniladigan elementlar, jumladan, sarlavha (<h1><h6>), xatboshilar(<p>), media(<img>) va navigatsiya(<a>) elementlarining to`g`ri qo`llanilishini o`rganiladi. Qo`llanma orqali sz shunchakikod yozishni emas, balki standartlarga javob bera oladigan, tartibli va yaxshi tuzilgan veb-sahifalarni yaratish uchun fundamental bilimlarni egallaysiz. Kalit so`zlar: HTML, elementlar, teglar, atributlar, hujjat tuzilishi, brauzer, content, ro`yxat, meta-ma`lumot Annotation. The construction of web pages, which is the heart of any digital project, begins with HTML (HyperText Markup Language). This article will help you understand the most crucial structural foundation, the "skeleton," of an HTML document. We will examine in detail everything from the <!DOCTYPE> declaration to the significance of the meta-information within the <head> section. The main focus will be on the <body> section, where you will learn the correct usage of the most common elements to populate your page with content, including headings (<h1> <h6>), paragraphs (<p>), media (<img>), and navigation (<a>) elements. Through this guide, you will gain fundamental knowledge not just for writing code, but for creating well-structured, orderly web pages that meet standards. Keywords: HTML, elements, tags, attributes, document structure, browser, content, list, meta-information Аннотация. Создание веб-страниц, являющихся сердцем любого цифрового проекта, начинается с HTML (HyperText Markup Language). Эта статья поможет вам понять самую важную структурную основу, или «скелет», HTML-документа. Мы подробно рассмотрим всё, начиная от декларации <!DOCTYPE> и заканчивая значением мета-информации внутри секции <head>. Основное внимание будет уделено части <body>, где вы научитесь правильному использованию наиболее распространенных элементов для наполнения вашей страницы содержимым, включая заголовки (<h1><h6>), абзацы (<p>), медиа (<img>) и элементы навигации (<a>).
ISSN: 2181-3906 2025 International scientific journal «MODERN SCIENCE АND RESEARCH» VOLUME 4 / ISSUE 12 / UIF:8.2 / MODERNSCIENCE.UZ 623 С помощью этого руководства вы получите фундаментальные знания не просто о написании кода, а о создании упорядоченных, хорошо структурированных веб-страниц, отвечающих стандартам. Ключевые слова: HTML, элементы, теги, атрибуты, структура документа, браузер, контент, список, метаданные. Kirish Hozirgi raqamli asrda, internet shunchaki axborot manbai emas, milliardlab odamlarni bog`lovchi global platformadir. Ekranda ko`rinayotgan har bir veb-sahifa, xoh yangiliklar partali bo`lsin, xoh ijtimoiy tarmoq yoki onlayn do`kon, ma’lum bir fundamental tilga asoslanadi. HTML - Hyper Text Markup Language ya’ni “Giper matnni belgilash tili” degan so`zlarning qisqartmasi bo`lib, veb-sahifalarni yaratish uchun asosiy til hisoblanadi. HTML yordamida veb-sahifaning tuzilmasini (strukturasi) yaratish, matn, rasm, video, havolalar va boshqa elementlarni joylashtirish, sahifaning qanday ko`rinishini belgilab beradi. Ko`pchilik veb-dasturlashni qiyin va murakkab jarayon deb hisoblaydi, ammo aslida har qanday murakkab veb-sayt oddiy va tartibli tuzilma (skelet) asosida qurilgan. HTMLsiz veb-sahifa shunchaki tartibsiz matn to`plami bo`lib qoladi. Biz shunchaki kod yozishni emas, veb-sahifaning minimal, to`g`ri va standartlarga javob beradigan tuzilishini yaratishni o`rganamiz. Bu poydevor nafaqat brauzerlar, qidiruv tizimlari (Google, Yandex) va maxsus dasturlar (masalan, nogironligi bor shaxslar uchun ekran o`qigichlar) uchun ham sahifangizni to`g`ri tushunishga yordam berdi. Bilamizki, har bir davlatni o`zini tili bo`lib, hamma ham tushunmaydi, shuning uchun, asosiy til sifatida HTMLni ham tili yaratilgan. Barcha davlatdagilar ham bemalol tushuna oladi. 1. Hujjat deklaratsiyasi (<!DOCTYPE html>) nima uchun juda muhim ekanligini. 2. Sahifa haqidagi ko`rinmas, ammo zarur ma’lumotlarni saqlovchi <head> qismining har bir elementi (<meta charset>, <title>) vazifasini. 3. Foydalanuvchi ko`radigan butun content joylashgan <body>ning ahamiyatini tushunamiz. Shundan so`ng, veb-sahifani mazmun bilan to`ldiruvchi uchun zarur bo`lgan elementlarga e’tibor qaratiladi. Siz sarlavhalar orqali ierarxiya yaratish, xatboshilar bilan matnni tartiblash, rasm va havolalar yordamida sahifani boyitishni o`rganasiz. Ma’lumotlarni brauzer tushunadigan tilga o`tkazishning asosiy muammosi quydidagilardan iborat: 1. Strukturaning yo`ligi (Semantika muammosi). Inson ko`zi mantning shrifi yoki hajmidan uning sarlavha yoki oddiy paragraf ekanligini darhol ajratadi. Biroq, kompyuter(brauzer) uchun barcha ma’lumotlar, shunchki, ketma-ket joylashgan belgilar majmuidir. Agar ma’lumot tuzilgan(unstructured) holda brauzerga taqdim etilsa, brauzer uning semanik ma’nosini (masalan, bu qismning sahifaning asosiy sarlavhasi ekanligi yoki bu so`zning tashqi havola ekanligi) anglay olmaydi. 2. Universal Interpreatsiya muammosi. Turli xil qurilmalar (kompyter, telefon, planshet) va turli brauzer (Chrome, Firefox, Safai) ma’lumotni qanday qilib bir xil qabul qilib, deyarli bir xil ko`rinishda namoyish etishi kerak? Strukturasiz ma’lumot bu talabni qondira olmaydi, natijada bitta sahifa turli qurilmalarda buzilgan holda ko`rinish mumkin.
ISSN: 2181-3906 2025 International scientific journal «MODERN SCIENCE АND RESEARCH» VOLUME 4 / ISSUE 12 / UIF:8.2 / MODERNSCIENCE.UZ 624 3. Erishuvchanlik (Accessibility) va SEO muammosi. Brauzerlarga to`g`ri tushunilgan strukturasiz ma’lumotni qidiruv tizimlari (Google, Yandex) ham sifatli indekslay olmaydi. Agar sarlavha oddiy qalin matn bilan belgilansa, qidiruv tizimi uni sahifaning asosiy mavzusi deb tan olmaydi. Bundan tashqi, maxsus dasturlar (masalan, ko`zi ojizlar uchun ekran o`quvchi dasturlash) strukturasiz ma’lumotni foydanuvchiga o`qib bera olmaydi. Yechim va maqolaning maqsadi: Aynan shu fundamental muammolarni bartaraf etish uchun Hyper Text Markup Language (HTML) yaratilgan. HTML o`zining teglar tizimi orqali ma’lumotga strukturaviy ma’no qanday qilish va vizualizatsiya qilishni ko`rsatadi. Ushbu maqola yuqoridagi asosiy muammoni hal qiluvchi HTML5ning asosiy skeletini (Boilerplate) va sodda, lekin funksoinal veb-sahifa qurish uchun zarur bo`lgan minimal kritik elementlar to`plamini tizimli tahlil qilishga qaratilgan. Bu tahlil veb-dasturlashga kirish eshigini ochadi va dasturchiga toza, standartlarga mos va erishuvchan kod yozishning fundamental usullarini tushuntiradi. Har bir zamonaviy va to`g`ri tuzilgan HTML sahifasi, uning murakkabligidan qat’i nazar, to`tta asosiy elementdan iborat bo`lgan standart skeletga ega. Brauzerlar qidiruv tizimlari va hatto yordamchi qurilmalar sahifani xatosiz o`qishi va ko`rsatishi uchun ushbu tuzilishga qat`iy rioya qilish talab etiladi. 1. <!DOCTYPE html >: hujjat tipi deklaratsiyasi – texnik jihatdan element emas, brauzer uchun ko`rsatmadir. Brauzerga hujjat HTML qaysi versiyasi standartlariga muvofiq yozilganligini va uni shu standartga binoan renderlashi (ekranga chiqarishi) kerakligini bildiradi. Eng oxirgi va hozirda rasman ishlaydigan versiyasi HTML5 hisoblanadi. Agar bu deklaratsiya bo`lmasa, ba’zi eski brauzerlar sahifani noto`g`ri rejimda (“Quirks Mode”) ko`rsatishi mumkin, bu esa dizayn muammolariga olib keladi. Hujjatning birinchi qatorida joylashishi shart. 2. <html>: Asosiy element (Root element)- butun HTML hujjatining asosiy konteyneri bo`lib xizmat qiladi. <!DOCTYPE html>dan keyin keladi va <head> hamda <body> elementlarini o`z ichiga olgan yagona elementdir. Lang=”uz” kabi atributni qo`shish sahifaning asosiy tilini belgilaydi. Bu qidiruv tizimlariga va ko`zi ojizlar uchun ekran o`qigichlarga (Accessibility) katta yordam beradi. 3. <head>: Bosh qism (Meta-ma’lumotlar konteyneri)-foydalanuvchiga ko`rinmaydigan ammo veb-sahifaning ishlashi uchun juda zarur bo`lgan ma’lumotlarni o`z ichiga oladi. Sahifa haqidagi metama’lumotlar (ma’lumotlar haqidagi ma’lumot) joylashadigan joy. Bu yerda sahifani yuklash, uning uslubi va skriplarini ulash uchun ko`rsatmalar berilgan. <meta-charset=”UTF8”> Brauzerga simvollarni to`g`ri dekodlash(o`qish) uchun simvol kodlashni belgilaydi. Bu o`zbek va boshqa xalqaro harflar uchun majburiy. <title> Brauzerning yuqori yorlig`ida(tab) va qidiruv natijalarida (SEO uchun juda muhim!) ko`rsatiladigan sahifa sarlavhasini belgilab beradi. <metaname=”viewport”…> Sahifaning mobil qurilmalarga moslashuvchan (responsive) bo`lishini ta’minlaydi. Har doim ishlatilishi shart.
ISSN: 2181-3906 2025 International scientific journal «MODERN SCIENCE АND RESEARCH» VOLUME 4 / ISSUE 12 / UIF:8.2 / MODERNSCIENCE.UZ 625 <link> Sahifa tashqi resurslarni, ko`pincha CSS uslub fayllarini ulash uchun ishlaydi. <script> Sahifaga JavaScript kodlarini ulash yoki yozish uchun ishlatiladi. <body> Tana qism (Ko`rinadigan kontent konteyneri)- sahifaning asosiy, ko`rinadigan kontentini o`z ichiga olgan qismdir. Foydalanuvchi brazerda aynan shu element ichidagi barcha narsani ko`radi. Mant, rasmlar, havolalar, jadvallar, shakllar va boshqa barcha kontent element <body> ichida joylashadi. Ushbu asosiy qismlarni birlashtirgan, to`g`ri tuzilgan HTML hujjati quyidagicha ko`rinishi kerak: <!DOCTYPE html> <html lang="uz"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mening Birinchi To'g'ri Tuzilgan Sahifam</title> </head> <body> <h1>Xush Kelibsiz! </h1> <p>Bu bizning yangi veb-sahifamiz.</p> </body> </html> Asosiy kontent elementlari va ularning turlari HTML hujjatining skeletini (yoki minimal tuzilshini) o`rganib chiqqanidan so`ng, endi <body> ichini kontent bilan to`ldiruvchi elementlarga e’tibor qaratiladi. HTMLda elementlar juda ko`p bo`lsa-da, ularni ikki asosiy mezon bo`yicha tasniflash mumkin: funksiya bo`yicha va ekrandagi joylashuvi (Display)bo`yicha. 1.Funksiyasi bo`yicha element turlari-kontentga ma’lum bir mantiqiy rol berish uchun ishlatiladi. Struktura va lerarxiya elementlari kontentga tartib va ahamiyat darajasini beradi(avval ierarxiya deganda tushuntirilganidek). Sarlavhalar(<h1>dan<h6>gacha): sahifaning asosiy mavzusidan to eng kichik bo`limigacha ierarxik tartibni belgilaydi. Paragraf(<p>): Asosiy mant bloklarini, ya’ni xatboshilarni belgilaydi. Bu element mantni mantiqiy guruhlash uchun ishlatiladi. Interaktiv va media elementlari-sahifani tashqi manbalar bilan bog`laydi yoki foydalanuvchiga media kontentni ko`rsatadi. Havola(<a>-Anchor): Boshqa sahifalarga, saytlarga yoki sahifaning boshqa joyiga o`tish imkonini beradi. Zarur atribut: href (manzilni belgilaydi). Rasm (<img>-image): Sahifaga rasm, foto yoki grafikani joylashtirish uchun ishlatiladi. Zarur atributlar: src(rasm tasviri, SEO va Accessibility uchun muhim). Ro`yxatlar(<ol>,<ul>,<li>):Ma’lumotlarni tartibli(raqamlar yoki harflar bilan) yoki tartibsiz (nuqtalar bilan) shaklda keltirish uchun ishlatiladi.
ISSN: 2181-3906 2025 International scientific journal «MODERN SCIENCE АND RESEARCH» VOLUME 4 / ISSUE 12 / UIF:8.2 / MODERNSCIENCE.UZ 626 Matnni formatlash elementlari matnning ma’lum bir qismiga urg’u yoki muhimlik berish uchun ishlatiladi. <strong>: Matnning shu qismi katta ahamiyatga egaligini bildiradi (odatda qalin yozuvda ko`rsatiladi.) <em>: Matnning shu qismi urg`u berilganligini bildiradi (odatda kursiv yozuvda ko`satiladi). 2. Joylashuvi bo`yicha element turlari (Display Types) HTML elementlari ekranda o`zini qanday tutishiga qarab ikki asosiy toifaga bo`linadi. Bu tushuncha CSS(style) bilan ishlashda juda muhimdir. Blokli elementlar (Block-level Elements). Xususiyati: Ular doim yangi qatordan boshlanadi va mavjud bo`lgan butun kenglikni (sahifa enini). Boshqa elementlar: Blokli elementlar ichida boshqa blokli va satrli elementlarni ham o`z ichiga olish mumkin. Misollar: <p>, <h1>-<h6>, <div> (umumiy blok), <header>, <footer> Satrli elementlar (Inline elements). Xususiyat: Ular yangi qatordan boshlanmaydi va faqat o`zlari egallagan kontent kengligini oladi. Boshqa elementlar: Ular faqatgina satrli elementlarni o`z ichiga olishi mumkin (odatda blokli elementlar ularning ichiga kiritilmaydi). Misollar: <a>, <img>, <strong>, <em>, <span> (umumiy satr). 3.Maxsus elementlar: <div> va <span> elementning o`zida hech qanday semantic ma’no yo`q, lekin sahifani tartiblash va CSS orqali uslub berishda eng ko`p ishlatiladi: <div>: Umumiy blokli konteyner. Bir necha blokli va satrli elementlarni guruhlash uchun ishlatiladi. <span>: Umumiy satrli konteyner. Matnning kichik bir qismiga uslub berish yoki JavaScript orqali boshqarish uchun ishlatiladi. O`tkazilgan tizimli tahlil natijasida aniqlangan HTML5 skeleti va minimal kritik elementlar to`plamining ahamiyati nafaqat sahifa qurishdagi funksionalligi, balki uning zamonaviy veb-standartlarga mos kelishi va dasturiy ta’minotni ishlab chiqarishdagi samaradorligi (efficiency) bilan ham belgilanadi. Natijalarning tahlili va baholanishi 1. Semantik ustinlik: Tanlangan har bir element (masalan, <h1>,<a>,<p>) ma’lumotga aniq semantik ma’no beradi. Bu esa brauzer va qidiruv tizimlariga kontent kontekstini mukammal tushunishga yordam beradi. Natijada, ushbu skeletda qurilgan sahifalar SEO (Search Engine Optimization) uchun optimallashtirilgan hisoblanadi. 2. Modular va Minimal yondashuv: Kritik elemantni tanlash natijasida, dasturchi keraksiz teglarni ishlatishdan qochadi. Bu esa kodni qisqartirish (code brevity) va yuklanish tezligini oshirishga olib keladi. Sahifa poydevori modular (bo`laklarga ajratilgan) bo`ladi, bu esa katta loyihalarda uni oson boshqarish imkonini beradi. 3. Standartlarga moslik (Compliance): Tahlil qilingan skelet va element to`plami to`liq W3C(World Wide Web Consortium) standartlariga mos keladi. Bu esa saytning turli xil qurilmalar va bauzerlarda bir xil izchillik(consistency) bilan ishlashini ta’minlaydi. Cheklovlar va kelajakdagi tadqiqotlar
ISSN: 2181-3906 2025 International scientific journal «MODERN SCIENCE АND RESEARCH» VOLUME 4 / ISSUE 12 / UIF:8.2 / MODERNSCIENCE.UZ 627 1. Dizayn cheklovi: HTML skeleti faqat struktura beradi. Murakkab visual dizayn, animatsiya va stil berish uchun CSS (Cascading Style Sheets) qo`shimcha ravishda talab qilinadi. 2. Interaktivlik cheklovi: Kritik elementlar orasiga interaktivlikning asosiy teglari (masalan, <button>) kiritilgan bo`lsa-da, murakkab mantiqiy funksiyalar(validatsiya, ma’lumotlarni qayta ishlash) uchun JavaScript tilidan foydalanish zarur. Kelajakdagi tadqiqotlar ushbu kritik HTML to`plamiga mos keladigan minimal CSS usullari va zarur JavaScript API (Application Programming Interface)larining integratsiyasini o`rganishga qaratilishi mumkin. HTML dasturlash tilida skeletni to`g`ri shakllantirish va eng zarur teglardan samarali foydalanish veb-sahifaning to`g`ri, chiroyli va moslashuvchan ko`rinishini ta`minlaydi. HTMLning asosiy elementlarini o`zlashtirish nafaqat oddiy veb-sahifalarni, balki murakkab interfeyslarni yaratish uchun ham poydevor vazifasini bajaradi. Shuning uchun HTML skeletining yaxlit tuzilishi va zarur teglarning vazifasi chuqur anglash dasturchi kompetensiyasining ajralmas qismi hisoblanadi. Xususan, sahifa strukturasini me’yoriy standartlar asosida shakllantirish, semantik teglardan to`g`ri foydalanish va kontentni mantiqiy taqsimlash veb-loyihaning texnik barqarorligini oshiradi. Bu esa sahifaning brauzerlar orasida mosligini, yuklanish tezligini va qidiruv tizimlarida yuqori indekslanishini ta`minlaydi. Zamonaviy vebtexnalogiyalarni o`zlashtirish jarayonida HTML skeleti bilan ishlash ko`nikmasi CCS, JavaScript va boshqa frontend texnalogiyalarining samarali qo`llanilish uchun zarur baza yaratadi. Shuningdek, HTML elementlarini me’yoriy kombinatsiyada ishlash dizynning qulayligi, sahifada navgatsiya soddaligi va foydalanuvchi tajribasining yaxshilanishiga xizmat qiladi. Demak, veb-dasturchi uchun HTMLni puxta o`zlashtirishkelgusi professional faoliyatning sifatli, barqaror va xalqaro standartlarga mos rivojlanishiga asos yaratadi. Shu bois HTML skeleti va uning asosiy teglari bo`yicha bilimlar nafaqat boshlang`ich bosqichdagi o`rganish jarayonida, balki har qanday darajadagi veb-loyiha ishlash ham dolzarb ahamiyatga ega. Foydalanilgan adabiyotlar 1. W3C(World Wide Web consortium). (2014). HTML 5.2: W3C Recommendation. https://www.w3.org/TR/html52/ 2. Mozilla Developer Netword (MDN). (2025). HTML Reference.[MDN veb-sayti orqali kirish manzil ko`rsatiladi, masalan: https://developer.mozilla.org/enUS/docs/Web/HTML] 3. WHATWG(Web Hyper text Application Technology Working Group). HTML Living Standard. [ Onlayn manba: https://html.spec.whatwg.org/multipage/ ] 4. Robbins,J.N. (2020). Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript and Web Graphics(5-nashr). O`reilly Media. 5. Jon Duckett. (2011). HTML and CSS: Design and Build Websites. Wiley. 6. Pashayev,A.K. (2018). Veb-dasturlash asoslari(HTML va CSS).[O`zbekistondagi nashriyot yoki o`quv adabiyotining nomi]. 7. Smelcer, J& Ebrahimi,M. (2009). The Evolution of Web Design: From HTML 3.2 to HTML5. Internasional Journal of Compyuter Science & Information Technology, 1(2). 8. Nielsen,J. (2011). How Users Read on the Web. NN/g Articles. [Onlayn manba]