HTML - 2023 | Updated 2025
Ushbu postda HTML‘dan bilishingiz kerak bo‘lgan barcha asosiy ma’lumotlar jamlangan. Agar post sizga dasturlashni o‘rganishda foydali va manfaatli bo'lgan bo‘lsa, g‘oyibona duo qilishingizning o‘zi kifoya.
Hurmat bilan Foziljon Azimov.
— 1-Dars —
1 - ma'lumot | Dasturlashga kirish, Dasturchining yo'l xaritasi.
— Dasturlash nima?
— Frontend, Backend, Mobile chilar kimlar va ularning vazifalari!
— Dasturlashdagi qiyinchiliklar...
— Dars qilishdagi hatolar
— Soft skillar
— Dasturlashga yangi kirgan o'quvchilarga foydali linklar: Mdn, w3schools
2 - ma'lumot | HTML haqida | Nazariy.
— HTML nima?
— HTML, CSS, Bootstrap, JavaScript, ReactJS nima va ularning ishlatilish o'rinlari.
— HTML4 va HTML5 qachon yaratilgan va asosiy farqlari.
3 - ma'lumot| Birinchi dasturni yozish | Tags
— VS code nima va uni sozlab olish.
— HTML uchun kerakli extensionlarni o'rnatish.
— Papka va File yaratish.
4 - ma'lumot | Birinchi dasturni yozish | Tags
— yozilgan codelarni browserda ko'rish
— VS code da auto save
— Live server
— Tag nima?
— root tagi.
— Headings (h1, h2, ... h6) tagi
— Paragraph tagi
5 - ma'lumot | Formatting tags
— <b> va <strong>
— <i> va <em>
— <u> va <ins>
— yuqoridagi ikkita bir xil tag larning bir-biridan farqi
— <mark> va <del>
— <sub> va <sup>
— <q>, <br> va <hr>
Homework ———>
— 2-Dars —
6 - ma'lumot | File path
— Real project qanaqa ko'rinishda bo'ladi
— file va papkalar bilan ishlash
— terminal bilan ishlash
7 - ma'lumot | Link | Attribute
— Link nima?
— Attribute nima?
— href attribute va ularning qiymatlari
— target attribute va vazifalari
— malumot tortib olish / download
— tooltip / title
8 - ma'lumot | style attribute | style tag
— style nima?
— background-color va color
— border va px tushunchalari
— padding
— margin
9 - ma'lumot | CSS Selectors in HTML
— ID selector
— Class selector
— id vs class
10 - ma'lumot | img tagi
— img attributes - src / alt
— img width and height
— image link
— image map / usemap
— area / shape(rect | circle | poly) / coord("chap-ustki-x, chap-ustki-y, o‘ng-pastki-x, o‘ng-pastki-y" | "markaz-x, markaz-y, radius" |Har bir nuqtaning koordinatalari ketma-ketligi)
— responsive images
— picture / source / media query <picture>
<source srcset="rasm-katta.jpg" media="(min-width: 768px)">
<source srcset="rasm-kichik.jpg" media="(max-width: 767px)">
<img src="default-rasm.jpg" alt="Rasmning alternativ matni">
</picture>
11 - ma'lumot | Media
— video tagi nima vazifa bajaradi?
— nega autoplay attr ishlamaydi(muted) (chrome da)? Izoh...
— video ustiga cover(rasm) qo'yish (poster)
— audio tagi va attributelari.
— iframe tagi va attributlari.
Homework ———>
— 3-Dars —
12 - ma'lumot | Table
— Table nima?
— Table qanchalik muhim?
— table border / border-collapse: collapse / cellspacing
— table, thead, tbody, tfooter, tr, td, th.
— Table sizing.
— colspan / rowspan
— Column grouping (<colgroup></colgroup>, <col span="num">)
13 - ma'lumot | Lists
— list nima?
— ordered list
— unordered list
— description list
— nested list
— ordered list style
— unordered list style
— list-style-type / css orqali type o'zgartirish
14 - ma'lumot| Block | Inline
— block tagi nima?
— inline tagi nima?
— inline vs block taglarining farqarli.
Homework ———>
— 4-Dars —
15 - ma'lumot | Forms
— form tagi va attributelari
— form inputs va ularning typelar...
— placeholder
— autocomplete
— required
— readonly
— disabled
— value
— textarea / attributes
— select / option / default select
— fieldset / legend
— input with datalist / list
16 - ma'lumot | Semantic tags | Box model
— nega semantic taglardan foydalanish kerak?
— header, nav, section(main), article, aside, footer
— box model nima?
17 - ma'lumot | Entities
— ASCII Table
— ISO-8859
— UTF-8
— Charset
— Symbols
Homework ———>