html 5 Darslar | O'zbekcha!

...

1.Kirish

REJA:

HTML bo'yicha boshlang'ich ko'nikmaga ega bo'lish <html> <⁄html>

CSS bo'yicha boshlang'ich ko'nikmaga ega bo'lish <CSS> <⁄html>

Kursdan asosiy maqsadi Bootstrap 5strong> frameworkini to'liq o'rganib olib, uning yordamida osonlik bilan responsive va zamonaviy web sahifalar yaratishni o'rganish. Albatta kursni oxirida, Bootstrap 5 yordamida o'zimizning loyihani yaratib chiqamiz

HTML haqida tushuncha

✅Internetning WWW hizmati, asosan, Web-sahifalarga bog‘liq ekan, ular qanday yaratiladi? – degan savol tug‘ulishi tabiiy.

Web-sahifalar HTML (Hypertext Markup Language – Gipermatnli markerlash tili) tilida yoziladi. HTML – dasturlash tili hisoblanmaydi.

Bu tilda hujjat (Web-sahifa) tayyorlash uchun Windows’ning Bloknot kabi oddiy matn muharriri yetarli. visual studio code kabi siz yozayotgan teglarni doimiy ayib turadi

HTML tilining buyruqlari “<” ва “>” belgilari orasiga yoziladi va deskriptor yoki teg (inglizcha tag – yorliq, belgi, alomat) deb ataladi.

Masalan, yozuvi HTML tilidagi hujjatning boshlanishini anglatadi. Teglarni yuqori yoki quyi registrdagi lotin alifbosi harflari yordamida yozish mumkin, ya’ni va bir xil tegdir.

Umuman, teglar ikki turga bo‘linadi:

Juft teglar yoki konteyner-teglar: ko‘rinishdagi teg uchun tegi mavjud bo‘lib, birinchisi biror amal boshlanishini bildirsa, ikkinchisi shu amal yakunlanganini bildiradi.

Juftmas teglar: ko‘rinishdagi teg ochiladi, yopilishi shart emas, masalan, o‘zidan keyingi matnni yangi satrga o‘tkazuvchi tegi kabi.

HTML-hujjat – “html” yoki “htm” kengaytmali matnli fayl bo‘lib, u oddiy matn muharririda teglar qo‘llab yozilgan matn.

HTML-hujjat va teglari orasida yozilgan bo‘ladi. HTML-hujjat hotiraga yuklansa, u ekranda web-brauzer yordamida Web-sahifa ko‘rinishida aks etadi.

HTML-hujjat, odatda, ikkita bo‘limdan iborat bo‘ladi. Birinchi bo‘lim HEAD (bosh qism yoki sarlavha) bo‘limi bo‘lib u tegi bilan boshlanib tegi bilan tugaydi.

Ikkinchi bo‘lim BODY (tana) bo‘limi bo‘lib, unda hujjatni mazmuni aks ettiradi va u tegi bilan boshlanib tegi bilan tugaydi.

Agar HTML-hujjat freym-strukturani ifodalashi (Web-brauzer oynasidagi ma’lumotlar alohida sohalarda aks ettishi) lozim bo‘lsa, u holda BODY bo‘limi o‘rniga FRAMESET (FRAME SET – strukturalar (ramkalar) tizilmasi (to‘plami), juft tegi yordamida) bo‘limi ishlatiladi.

Shuni ta’kidlash joizki, HTML-hujjatda va juft teglarini yozish tavsiya etiladi, lekin majburiy emas.

Web-sahifaga kiritilishi lozim bo‘lgan yana bir element – Web-sahifa nomi bo‘lib, nom kiritish uchun <ТITLE> tegi qo‘llaniladi.

Web-sahifada bu teg bir marta ishlatiladi. Web-sahifa nomi Web-brauzerning sarlavha satrida aks etib, Web-sahifaning o‘zida ko‘rinmaydi.

Shu sababli uni Web-sahifaning istalgan joyiga yozish mumkin. Ammo Web-sahifa nomini Web-sahifa boshiga yozish maqsadga muvofiq.

Web-sahifa nomi tegi bilan yakunlanadi. Web-sahifaga istalgan nom, masalan, o‘z ismingizni berishingiz mumkin.

HTML tili muttasil rivojlanib bormoqda. O‘z navbatida Web-brauzerlar ham yangilanib turibdi.

Hozirgi kunda Web-sahifa tayyorlash uchun asosan HTML-4 tilidan foydalaniladi. Uning ba’zi buyruqlarini “yeski” Web-brauzerlar (Internet Explorer-3, Internet Explorer-4) bajara olmaydi.

Bundan tashqari turli Web-brauzerlar, masalan, Internet Explorer va Netscape ham bir biridan bir oz farq qiladi. Shu sababli bitta HTML-hujjat turli wyeb-brauzerlarda biror farq bilan aks etishi mumkin.

✅World Wide Web, Butunjahon oʻrgimchak toʻri, (qisqacha WWW yoki Web)

Internetda chop etilgan hamda bir-biriga oʻzaro bogʻliq hiper matnli hujjatlardan tashkil topgan axborot tizimidir.

Ushbu hujjatlarning har biri web-sahifa deb ataladi va veb-sahifalarga Internet foydalanuvchisining kompyuterida ishlaydigan veb-brauzerlar deb nomlangan kompyuter dasturlari orqali kirish mumkin.

Veb-sahifalarda matn, rasm, video va boshqa multimedia elementlari boʻlishi mumkin va boshqa linklar va hipermurojaat orqali veb-sahifalarga oʻtish mumkin.

Internet va Web soʻzlari bir xil hodisani tasvirlamaydi. Chunki, Internet faqatgina internetda ishlaydigan xizmatdir.

Web konseptini CERN'da faoliyat yurutuvchi dasturchi Tim Berners-Lee yaratdi, u HTML deb ataladigan matnli formatlash tilini ishlab chiqdi. Bugungi kunda, u W3C standartlarni oʻrnatmoqda.

✅ HTML sahifa yaratamiz
Demak, Htmlni boshlang'ich taglari

HTML 5 uchun !doctype strukturasi juda qisqa va lo'nda qilib yozilgan

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Html teg orqali rang berish

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

Htmlda comments ya'ni izohlar Htmlda Izohlar qanday quyidagi ko'rinishda yoziladi
Izohlar asosan qaysi tag ekanligini yoki yaxshiroq tushuntirish, yodda saqlash uchun yoziladi. Ba'zida boshqa dasturchilarga bu yerda qanday tag yozilgan va tugagan boshlangan joylarini bilishda qiynalmaslik uchun yoziladi.
Eslatma: Ushbu izohlar foydalanuvchi qismida ko'rinmaydi. Faqatgina kod qismida ko'rish mumkin.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Table tagida jadvallar yaratish HTML -jadvallar veb -ishlab chiquvchilarga ma'lumotlarni qator va ustunlarga ajratish imkonini beradi. Veb -saytingizda HTML jadvallarini ishlatishni o'ylab ko'rishingiz mumkin. Ma'lumotlarni satr va ustunlarda ko'rsatish uchun HTML jadvallarini yaratish bilan bir qatorda, veb -sahifangizdagi ma'lumotlarni tartibga solish uchun HTML jadvallarini ham yaratishingiz mumkin. HTML -jadval yaratish jarayoni sizning veb -sahifangizni yaratish jarayoniga o'xshaydi va siz o'z sahifangizga havolalar yoki ramkalar kabi qo'shgan bo'lishi mumkin bo'lgan elementlarga o'xshaydi. HTML -jadvallarni veb -sahifangizga kodlash juda oson, chunki siz faqat bir nechta asosiy jadval kodlarini tushunishingiz kerak. HTML -dagi jadval satr va ustunlar ichidagi jadval hujayralaridan iborat Jadval hujayralari Har bir jadval katakchasi <td> va </td> tegi bilan belgilanadi. td jadval ma'lumotlarini bildiradi. <td> va </td> orasidagi hamma narsa jadval yacheykasining tarkibi.

<table> jadvalni belgilash.

<tr> jadvaldagi qatorni belgilaydi.

<th> jadvaldagi sarlavha katakchasini belgilaydi.

<td> U jadvaldagi katakchani belgilaydi.

<caption> jadval sarlavhasini belgilaydi.

<colgroup> Jadvalda formatlash uchun bir yoki bir nechta ustunlar guruhini ko'rsatadi.

<col> bilan <colgroup> har bir ustun uchun ustun xususiyatlarini belgilaydigan element.

<tbody> U tana tarkibini jadvalga guruhlash uchun ishlatiladi.

<thead> Bu sarlavha tarkibini jadvalga guruhlash uchun ishlatiladi.

<tfooter> Bu altbilgilar tarkibini jadvalga guruhlash uchun ishlatiladi.

HTML ro'yxatlari veb ishlab chiquvchilarga ro'yxatdagi tegishli elementlar to'plamini guruhlash imkonini beradi.

  • Kofe
  • Choy
  • Sut

HTML ro'yxatlari avtomatik raqamlaydi.

HTML id xususiyati

HTML id atributi HTML elementi uchun yagona identifikatorni ko'rsatish uchun ishlatiladi.

HTML hujjatida bir xil identifikatorli bir nechta element bo'lishi mumkin emas.

Id atributidan foydalanish

id Xususiyati HTML element uchun noyob identifikatorini belgilaydi. id HTML hujjatida atribut qiymati yagona bo'lishi kerak. id Xususiyati ma'lum bir uslub deklaratsiya nuqtasi uchun ishlatiladi. Bundan tashqari, JavaScriptda ma'lum identifikatorli elementga kirish va uni boshqarish uchun ishlatiladi. Idning sintaksisi quyidagicha: hash belgisini yozib (#), keyin id nomi. Keyin CSS xususiyatlarini jingalak qavslar ichida belgilang {}. Quyidagi misolda bizda <h1>"myHeader" id nomiga ishora qiluvchi element bor. Ushbu <h1> element #myHeader bosh qismidagi uslub ta'rifiga muvofiq uslublanadi : <!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
</body>
</html>

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Block elementlar

<address> <aside> <canvas> <div> <dt> <figcaption> <footer> <h1>-<h6> <hr> <main> <noscript> <p> <section> <tfoot> <video>

<article> <blockquote> <dd> <dl> <fieldset> <figure> <form> <header> <li> <nav> <ol> <pre> <table> <ul>

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

<video width="320" height="240" controls >
<source src="movie.mp4" type="video/mp4" >
<source src="movie.ogg" type="video/ogg" >
Sizning qurilmangiz browser i videoni qo'llamaydi. </video >

Bundan oldin HTML va CSS bo'yicha boshlang'ich ko'nikma yaxshi o'rganib olish

Videolarni etibor bilan ko'rib chiqish.

Video davomida yozilayotgan kodlarni o'zingizda ham yozib oling.

Tushunmagan va qiyin tuyilgan mavzular yoki savollarni yozib boring.

Practice, Practice va yana Practice.

1. VS Code IDE (Live Server) (https://code.visualstudio.com/docs/?dv=win)

2. Google Chrome Browser (https://www.google.com/chrome/)