Primer lesson: gipermatnni belgilash tili

Dars: Gipermatnni belgilash tili (HTML)

HTML Hypertext Markup Language degan ma'noni anglatadi. Bu veb-sahifalarni yaratish uchun ishlatiladigan maxsus til. Veb-saytga tashrif buyurganingizda, kompyuter sizga so'zlar, rasmlar va havolalarni ko'rsatish uchun HTML-ni o'qiydi. HTMLni veb-saytning qurilish bloklari sifatida tasavvur qiling. Siz uy yoki mashina qurish uchun Lego buyumlaridan foydalanganingizdek, biz ham veb-sahifa yaratish uchun HTML teglaridan foydalanamiz.

HTML nima?

HTML - bu kompyuterga veb-sahifadagi matn, tasvir, video va havolalarni qanday ko'rsatishni ko'rsatadigan kod. Bu siz uchun rasm chizayotgan do'stingizga ko'rsatma berishga o'xshaydi. HTML veb-sahifaning bir qismining boshi va oxirini belgilash uchun teglar deb ataladigan burchakli qavslar ichidagi so'zlardan foydalanadi.

HTML nima uchun muhim?

Siz tashrif buyurgan har bir veb-sayt qaysidir ma'noda HTMLdan foydalanadi. HTML bo'lmasa, siz ko'radigan veb-sahifalar bo'lmaydi. HTML kontentni tartibga solishga yordam beradi va kompyuterga sahifani qanday ko'rsatishni aytadi. Bu veb-ishlab chiqishda o'rganadigan birinchi narsa, chunki u internetni ishlaydi!

HTML hujjatining asosiy tuzilishi

HTML hujjati maxsus tuzilishga ega. U <code><!DOCTYPE html></code> deb nomlangan deklaratsiya bilan boshlanadi va u kompyuterga sahifa HTMLdan foydalanishini bildiradi. Keyin hujjat ikkita asosiy qismga bo'linadi: bosh va tana.

Juda oddiy HTML hujjati quyidagicha ko'rinadi:

<kod><!DOCTYPE html>
<html>
<head>
<title>Mening birinchi veb-sahifam</title>
</head>
<tana>
<p>Salom, dunyo!</p>
</body>
</html> </code>

Bu misolda <head> bo'limi sahifaning sarlavhasini beradi, <tana> bo'limi esa ekranda paydo bo'ladigan tarkibni joylashtiradigan joydir.

HTML teglari va elementlari

HTML veb-sahifaning turli qismlarini belgilash uchun teglardan foydalanadi. Teg burchakli qavslar ichidagi so'zdir. Masalan, <code><p></code> kompyuterga keyingi narsa paragraf ekanligini aytadi. Paragrafni tugatgandan so'ng, yakunni ko'rsatish uchun <code></p></code> yopilish tegidan foydalanasiz.

HTML elementi ochilish tegi, ba'zi kontent va yopilish tegidan iborat. Masalan:

<code><p>Bu paragraf.</p></code>

Har bir teg veb-brauzerga kontentni qanday ko'rsatishni ko'rsatib beradi.

Umumiy HTML teglari

HTMLda juda ko'p teglar mavjud. Eng keng tarqalganlardan ba'zilari:

<html> - Bu teg kompyuterga bu HTML hujjati ekanligini bildiradi.
<head> - Bu bo'lim to'g'ridan-to'g'ri ekranda ko'rsatilmagan sahifa haqidagi ma'lumotlarni saqlaydi.
<title> - Bu teg veb-sahifaning sarlavhasini belgilaydi va brauzer yorlig'ida paydo bo'ladi.
<body> - Bu teg veb-sahifaning ko'rinadigan mazmunini o'z ichiga oladi.
<p> - Bu teg matn bloki bo'lgan paragrafni yaratadi.
<h1> dan <h6> - Bu teglar sarlavhalarni yaratadi. <h1> eng katta sarlavha, <h6> esa eng kichik.
<a> - Bu teg boshqa veb-sahifalarga havolalar yaratish uchun ishlatiladi.
<img> - Bu teg sahifaga rasm qo'shish uchun ishlatiladi.

HTML atributlari

Atributlar HTML elementi haqida qo'shimcha ma'lumot beradi. Ular tegning burchakli qavslar ichidagi ochilish tegiga qo'shiladi. Eng keng tarqalgan atributlar src va alt tasvir tegi bilan ishlatiladi.

Masalan, rasm qo'shish uchun quyidagilarni yozishingiz mumkin:

Bu yerda src brauzerga rasm fayli qayerdaligini bildiradi va agar uni ko'rsatib bo'lmasa, alt tasvirning tavsifini beradi.

Bosh va tana qismlari

HTML hujjati ikki qismga bo'lingan:

Bosh bo'lim: Bu sahifa sarlavhasi va uslublar jadvallariga havolalar kabi ma'lumotlarni o'z ichiga oladi. Bu sahifa uchun ko'rsatmalarni saqlaydigan boshqaruv markaziga o'xshaydi.
Asosiy qism: Bu qism veb-sahifada ko'rinadi. Sahifada ko'rgan barcha matn, rasmlar va havolalar korpus ichida yozilgan.

HTMLda havolalar yaratish

Havolalar bir sahifadan ikkinchisiga o'tish imkonini beradi. HTMLda biz <a> tegi yordamida havolalar yaratamiz. Teg ichidagi href atributi brauzerga havolaning manzilini bildiradi.

Masalan:

<code><a href="https://www.example.com">Example.com saytiga tashrif buyuring</a></code>

Ushbu havolani bosganingizda brauzeringiz example.com veb-saytini ochadi.

Veb-sahifaga rasmlar qo'shish

Rasmlar veb-sahifani yorqinroq qiladi va uni yanada qiziqarli qiladi. Rasm qo'shish uchun <img> tegidan foydalanasiz. Esingizda bo'lsin, <img> tegida yopish tegi yo'q.

Rasmni qanday qo'shishingiz mumkin:

Ushbu kod brauzerga kungaboqar tasvirini ko'rsatishni aytadi. src atributi tasvirning joylashuviga ishora qiladi va alt atributi tasvirning tavsifini beradi.

HTMLda ro'yxatlardan foydalanish

Ro'yxatlar ma'lumotlarni aniq formatda tartibga soladi. HTMLda ro'yxatlarning ikkita asosiy turi mavjud:

Buyurtma qilingan ro'yxat: Bu ro'yxat raqamlangan. U <ol> tegidan foydalanadi.
Tartibsiz ro'yxat: Bu ro'yxatda o'q nuqtalari ishlatiladi. U <ul> tegidan foydalanadi.

Mana tartibsiz ro'yxatga misol:

<kod><ul>
<li>Olma</li>
<li>Banan</li>
<li>Gilos</li>
</ul> </code>

Va bu erda tartiblangan ro'yxatga misol:

<kod><ol>
<li>Birinchi</li>
<li>Ikkinchi</li>
<li>Uchinchi</li>
</ol> </code>

HTML tilidagi jadvallar

Jadvallar ma'lumotlarni satr va ustunlarda ko'rsatishga yordam beradi. Ular ma'lumotlarni solishtirish yoki tarmoqdagi elementlarni ro'yxatga olish kerak bo'lganda foydalidir.

Bu erda HTML jadvalining oddiy misoli:

Ushbu jadvalda <tr> jadval qatorini belgilaydi, <th> jadval sarlavhasi (qalin matn) uchun, <td> esa jadval ma'lumotlari (yacheykalar) uchun ishlatiladi.

Multimedia bilan ishlash: audio va video

HTML shuningdek, ovoz va video kabi multimedia qo'shish imkonini beradi. <audio> tegi yordamida siz ovozli fayllarni kiritishingiz mumkin. <video> tegi yordamida veb-sahifangizga video pleyerlarni joylashtirishingiz mumkin.

Mana videoni joylashtirish kodiga misol:

Ushbu kod o'ynash, to'xtatib turish yoki ovoz balandligini o'zgartirish tugmalari bo'lgan video pleer yaratadi. Controls atributi brauzerga ushbu tugmalarni ko'rsatishni bildiradi.

Kundalik hayotda HTML

Internetdagi har bir veb-sayt HTML bilan yaratilgan. Tasavvur qiling, siz maktabingiz veb-saytiga, qiziqarli o'yin saytiga tashrif buyuryapsiz yoki onlayn hikoyani o'qiyapsiz. HTML matn, rasmlar va boshqa kontentni aniq ko'rishingiz uchun ularni tartibga solish uchun sahna ortida ishlamoqda.

Misol uchun, sevimli multfilm qahramoningizning rasmini onlaynda ko'rsangiz yoki qiziqarli mavzu haqida ko'proq o'qish uchun havolani bossangiz, HTML bu ish uchun mavjud.

Oddiy HTML loyihasi misoli

Keling, oddiy loyihani ko'rib chiqaylik. Tasavvur qiling, siz mushuk kabi sevimli hayvoningiz haqida kichik veb-sahifa yaratmoqchisiz. Siz sarlavha, mushuklar haqida paragraf, rasm va hatto qiziqarli mushuk faktlari bilan veb-saytga havolani qo'shishingiz mumkin.

Sizning HTML kodingiz quyidagicha ko'rinishi mumkin:

<kod><!DOCTYPE html>
<html>
<head>
<title>Mening sevimli hayvonim</title>
</head>
<tana>
<h1>Mushuklar haqida hamma narsa</h1>
<p>Mushuklar o'ynoqi va yumshoq. Ular uxlashni va xirillashni yaxshi ko'radilar. Ko'pchilik mushuklarni uy hayvonlari sifatida ko'rishni yaxshi ko'radi.</p>
<img src="cat.jpg" alt="Yoqimli mushuk">
<a href="https://www.catfacts.com">Mushuklar haqida batafsil ma'lumot</a>
</body>
</html> </code>

Ushbu loyiha sarlavhalar, paragraflar, rasmlar va havolalardan foydalanadi. Bu HTML-dan ko'p qismlardan iborat to'liq veb-sahifani yaratish uchun qanday ishlatilishini ko'rsatadi.

HTML, CSS va JavaScript

HTML veb-sahifaning strukturasini yaratsa-da, veb-saytlarni qiziqarli ko'rinishga olib keladigan boshqa vositalar ham mavjud.

CSS (Cascading Style Sheets) ranglar qo'shish, shriftlarni o'zgartirish va veb-sahifa tartibini sozlash uchun ishlatiladi. Bu sahifani chiroyli qiladi.
JavaScript - bu sahifaga interaktivlik qo'shadigan dasturlash tili. U tugmani bosganingizda narsalarni harakatga keltirishi yoki javob berishi mumkin.

Bugun biz HTML haqida o'rganayotgan bo'lsak ham, CSS va JavaScript haqida bilish veb-saytlar qanday yaratilganligini tushunishga yordam beradi.

Ko'proq HTML teglari va ulardan foydalanish

HTML-ni o'rganganingizda, siz boshqa ko'plab teglarni topasiz. Yana bir nechtasini bilishingiz kerak:

<div> - Bu teg sahifani turli bo'limlarga bo'lish uchun ishlatiladi. Bu tarkibni tartibli saqlashga yordam beradi.
<span> - Bu teg kichik matn qismlari yoki boshqa elementlarni guruhlaydi. U <div> ga o'xshaydi, lekin kichikroq elementlar bilan ishlaydi.
<br> - Bu teg qatorni qo'shadi. Bu matn protsessorida Enter tugmasini bosishga o'xshaydi.
<strong> - Bu teg muhimligini ko'rsatish uchun matnni qalin qiladi.
<em> - Bu teg urg'u qo'shish uchun matnni kursiv qiladi.

Ushbu teglar sizning kontentingiz veb-sahifada qanday ko'rinishini ko'proq nazorat qilish imkonini beradi.

HTML evolyutsiyasi

HTML birinchi yaratilganidan beri juda ko'p o'zgardi. Vaqt o'tishi bilan ko'plab yangi teglar va xususiyatlar qo'shildi. HTMLning har bir yangi versiyasi murakkab va chiroyli veb-saytlarni yaratishni osonlashtiradi. Bugungi kunda HTML CSS va JavaScript bilan birgalikda foydalanish qiziqarli va ajoyib ko'rinishga ega zamonaviy veb-saytlarni yaratish uchun ishlaydi.

Ushbu evolyutsiya HTMLni o'rganish oson va oddiy veb-sahifalardan tortib murakkab veb-ilovalargacha hamma narsani yaratish uchun etarlicha kuchli ekanligini anglatadi.

Internetda xavfsiz qolish

HTMLni o'rganish qiziqarli bo'lsa-da, internetda xavfsiz bo'lish har doim muhim. Veb-saytlarga tashrif buyurganingizda yoki onlayn tarkibni o'rganayotganingizda, biror narsaga ishonchingiz komil bo'lmasa, har doim kattalardan yordam so'rashni unutmang. Sizning xavfsizligingiz birinchi o'rinda turadi va HTMLni o'rganish har doim qiziqarli va xavfsiz tajriba bo'lishi kerak.

Ko'rib chiqish: Asosiy HTML shartlari

Keling, bugun o'rgangan ba'zi muhim atamalarni ko'rib chiqaylik:

HTML: Gipermatnni belgilash tili, veb-sahifalarni yaratish uchun ishlatiladigan til.
Teg: kompyuterga sahifaning qaysi qismini ko'rsatish kerakligini bildiruvchi burchakli qavs ichidagi so'z. Masalan, <code><p></code> paragraf hosil qiladi.
Element: ochilish yorlig'i, mazmuni va yopilish yorlig'ini o'z ichiga olgan to'liq to'plam.
Atribut: Tasvir tegidagi <code>src</code> yoki <code>alt</code> kabi teg ichiga qoʻshilgan qoʻshimcha maʼlumotlar.
Havola: Bir sahifani boshqasiga ulash uchun <code><a></code> tegi bilan yaratilgan.

Haqiqiy dunyo ilovalari

HTML ko'plab real dunyo sozlamalarida qo'llaniladi. Mana bir nechta misollar:

Maktab veb-saytlari: Maktablar o'quvchilar va ota-onalar bilan jadvallar, uy vazifalari va yangiliklarni almashish uchun HTMLdan foydalanadilar.
Onlayn hikoyalar va o'yinlar: Qiziqarli hikoyalar yoki o'yinlarga ega veb-saytlar rasmlar, matn va videolarni ko'rsatish uchun HTML-dan foydalanadi.
Biznes veb-saytlari: Ko'pgina mahalliy do'konlar va kompaniyalar o'z mahsulotlari va xizmatlarini ko'rsatish uchun HTML bilan yaratilgan veb-saytlarga ega.
Interfaol ta'lim: Yangi narsalarni o'rganishga yordam beradigan o'quv saytlari CSS va JavaScript kabi boshqa vositalar bilan birga HTML bilan yaratilgan.

Ushbu misollar HTML kundalik hayotning ko'p qismlarida qanchalik foydali vosita ekanligini ko'rsatadi.

Asosiy fikrlarning qisqacha mazmuni

Bugun biz HTML qisqacha Hypertext Markup Language ekanligini bilib oldik. Bu veb-sahifalarni yaratish uchun ishlatiladigan asosiy til. Bu erda eslash kerak bo'lgan asosiy fikrlar:

HTML teglar yordamida veb-sahifa strukturasini quradi.
Asosiy tuzilma hujjat turi deklaratsiyasini va html , head va body teglarini o'z ichiga oladi.
Teglar juft bo'lib keladi: ochilish tegi va yopish tegi, ular orasida kontent mavjud.
src va alt kabi atributlar elementlar haqida qo'shimcha ma'lumot beradi.
Umumiy teglarga paragraflar uchun <p> , havolalar uchun <a> , rasmlar uchun <img> va <h1> dan <h6> kabi sarlavha teglari kiradi.
Ro'yxatlar va jadvallar veb-sahifadagi ma'lumotlarni tartibga solishga yordam beradi.
Zamonaviy veb-sahifalar uslub uchun CSS va interaktivlik uchun JavaScript bilan birgalikda HTMLdan foydalanadi.

HTML Internetda ko'riladigan har bir veb-saytning asosidir. Teglar va atributlar kabi oddiy qurilish bloklari yordamida siz qiziqarli va interaktiv sahifalar yaratishingiz mumkin. O'rganishda davom etar ekansiz, HTML qanday qilib veb-sahifalarni jonlantirishga yordam berishini ko'rasiz, bu esa internetni foydali va qiziqarli kashf qilish joyiga aylantiradi.

gipermatnni belgilash tili