HTML — veb-sahifadagi sarlavha, matn, ro’yxat va boshqa qismlarni belgilaydigan til. Brauzer shu belgilarni o’qib, sahifani sizga tushunarli ko’rinishda chiqaradi. Quyidagi tushuntirish va namunalar yordamida oddiy sahifa tuzib, uni kompyuteringizda ochib ko’rishingiz mumkin.
HTML nima va u qanday ishlaydi?
Saytdagi maqolani ko’z oldingizga keltiring: tepada sarlavha, uning ostida matn, keyin esa kerakli buyumlar ro’yxati turibdi. HTML bu qismlarning vazifasini belgilaydi. U brauzerga qaysi yozuv sarlavha, qaysinisi oddiy xatboshi ekanini bildiradi. Brauzer — internet sahifalarini ochib ko’rsatadigan dastur.
Buni maktab daftariga o’xshatish mumkin. Mavzu nomini alohida, tushuntirishni boshqa qatorda, topshiriqlarni esa ro’yxat qilib yozasiz. HTML ham sahifa mazmunini shunday tartibga soladi. Faqat daftar o’rniga matnli fayl, yozuvlarning vazifasini ajratish uchun esa maxsus belgilar ishlatiladi.
HTML odatda dasturlash tili emas, belgilash tili deb ataladi. Chunki uning asosiy vazifasi hisoblash yoki shartga qarab buyruq bajarish emas, mazmun qismlarini belgilashdir. HTML nima vazifa bajarishini tushunish uchun avval sahifaning rangi yoki bezagiga emas, undagi matn qanday tuzilganiga qarang.
Teglar matnga qanday ma’no beradi?
Teg — burchakli qavslar orasiga yoziladigan maxsus belgi. Masalan, <p> xatboshining boshlanishini, </p> esa tugashini bildiradi. Ularning orasiga matn yoziladi: <p>Men yangi sahifa yaratdim.</p>. Brauzerda bu yozuvni sahifa sifatida ochsangiz, qavsli belgilar emas, gapning o’zi ko’rinadi.
Ochuvchi tegni qutining boshlanishiga, yopuvchi tegni uning oxiriga o’xshatish mumkin. Yopuvchi tegdagi qiya chiziqqa e’tibor bering. Bir qism ichiga boshqa qism ham joylashadi: masalan, xatboshi ichidagi muhim so’z alohida belgilanadi. Bunday paytda ichkarida ochilgan juft teg avval yopiladi.
- <h1> — sahifaning asosiy sarlavhasini belgilaydi.
- <h2> — asosiy mavzu ichidagi bo’lim sarlavhasi uchun ishlatiladi.
- <p> — alohida xatboshi yaratadi.
- <ul> — raqamsiz ro’yxatni, uning ichidagi <li> esa ro’yxat bandini belgilaydi.
- <strong> — mazmunning muhim qismini ajratadi; brauzer uni odatda qalin yozuvda ko’rsatadi.
Tegni faqat tashqi ko’rinish uchun tanlamang. Masalan, yozuvni yiriklashtirish maqsadida har bir gapni sarlavhaga aylantirish sahifa tuzilishini chalkashtiradi. Sarlavha mavzuni nomlasin, xatboshi esa uni tushuntirsin. Maktab darsligidagi bo’limlar tartibi bu farqni tasavvur qilishga yordam beradi.
Birinchi veb-sahifani qanday tuzasiz?
Boshlash uchun oddiy matn muharriri va brauzer yetadi. Matn muharriri — yozuv kiritib, uni fayl sifatida saqlaydigan dastur. Yangi hujjat oching va quyidagi namunani undagi har bir qatorni alohida yozgan holda ko’chiring. Hozircha murakkab bezaklar kerak emas.
<!DOCTYPE html>
<html lang=”uz”>
<head>
<meta charset=”UTF-8″>
<title>Mening birinchi sahifam</title>
</head>
<body>
<h1>Mening sevimli mashg’ulotim</h1>
<p>Men bo’sh vaqtimda rasm chizishni yaxshi ko’raman.</p>
<h2>Kerakli buyumlar</h2>
<ul>
<li>Qog’oz</li>
<li>Rangli qalamlar</li>
</ul>
</body>
</html>
Faylni sahifa.html nomi bilan saqlang. Bu yerdagi .html — fayl kengaytmasi, ya’ni uning turini bildiradigan nom oxiri. Muharrir fayl nomiga yana .txt qo’shmaganini tekshiring. Keyin saqlangan faylni brauzer orqali oching: sarlavha, xatboshi va buyumlar ro’yxati ko’rinishi kerak.
Namunadagi qismlar nimaga kerak?
Eng yuqoridagi <!DOCTYPE html> yozuvi brauzerga hujjatni HTML qoidalari bo’yicha ko’rsatishni bildiradi. <html> sahifaning umumiy chegarasini belgilaydi. Uning ichidagi <head> hujjat haqidagi ma’lumotlar uchun, <body> esa sahifada ko’rinadigan mazmun uchun xizmat qiladi. Shu sabab asosiy matnni <body> ichiga yozasiz.
<title> orasidagi nom brauzerning sahifa yorlig’ida ko’rinadi. Uni sahifa ichidagi <h1> sarlavhasi bilan adashtirmang: ular turli joylarda chiqadi. Namunada birinchisi hujjatni tanishga yordam beradi, ikkinchisi esa o’qiladigan mavzuni bildiradi. Ikkalasini ham mazmunga mos nomlasangiz, sahifani topish va tushunish osonlashadi.
lang=”uz” yozuvi hujjat tili o’zbekcha ekanini bildiradi. Tegga shu tarzda qo’shiladigan ma’lumot atribut deb ataladi. UTF-8 esa belgilarni saqlash va o’qish usulining nomi; namunadagi teg brauzerga shu usulni ko’rsatadi. Bu yozuvlarni hozircha o’zgartirmay, sarlavha va xatboshilar ustida mashq qilishingiz mumkin.
Sahifa kutilgandek chiqmasa, nimani tekshirasiz?
Avval faylni saqlaganingizga qarang. Muharrirdagi o’zgarish saqlanmasa, brauzer oldingi matnni ko’rsatadi. Saqlagach, ochiq sahifani yangilang. Masalan, mashq uchun sarlavhani boshqa so’zga almashtiring: o’zgarish ko’rinsa, kerakli faylni tahrirlayotganingizni bilasiz.
Yozuvlar chalkash ko’rinsa, teglarni tekshiring. Ochuvchi va yopuvchi belgilar bir-biriga mos kelishi, burchakli qavslar esa tushib qolmasligi kerak. Kodni qatorlarga ajratib, ichki qismlarni biroz ichkaridan yozish tekshirishni osonlashtiradi. Brauzer ayrim xatolarni o’zi tuzatib ko’rsatishi mumkin, ammo bunga tayanib qolmang.
Oddiy HTML sahifasi bezaksiz ko’rinishi tabiiy. Rang, oraliq va joylashuvni boshqarishda odatda CSS — sahifa ko’rinishini belgilaydigan uslublar tili yordam beradi. Tugma bosilganda biror harakat bajarish kabi vazifalar uchun esa JavaScript dasturlash tilidan foydalanish mumkin. Dastlab mazmunni to’g’ri tuzing, keyin bezak va harakatlarni qo’shing.
Qiziqarli faktlar
- Oddiy HTML faylini internetga joylamasdan ham kompyuterdagi brauzerda ochish mumkin.
- Veb-sahifaning kodi bilan brauzerda ko’rinadigan natija bir xil ko’rinishda bo’lmaydi: teglar mazmunni tartibga soladi.
- HTML kodida ketma-ket bosilgan oddiy bo’shliqlar odatda sahifada bitta bo’shliq sifatida ko’rinadi.
- Muharrirda yangi qatorga o’tishning o’zi brauzerda yangi xatboshi yaratmaydi; xatboshi uchun teg kerak.
- Barcha teglar juft emas: masalan, <br> satrni uzadi va alohida yopuvchi teg talab qilmaydi.
Farqni o’zingiz kuzating: namunadagi xatboshi ichida bir gapdan keyin yangi qatorga o’tib, yana matn yozing va natijani oching. So’ng gaplarni alohida <p> teglari orasiga joylang. Brauzerdagi o’zgarishni solishtirish tegning vazifasini yodlashdan ko’ra tushunarliroq ko’rsatadi.
Ko’p beriladigan savollar
HTML o’rganish uchun internet kerakmi?
Oddiy sahifa yozish va uni brauzerda tekshirish uchun doimiy internet shart emas. Matn muharriri va brauzer qurilmangizda bo’lsa, faylni saqlab, o’sha yerning o’zida ochishingiz mumkin. Internetdagi rasm yoki boshqa tashqi ma’lumotdan foydalansangiz, ulanish kerak bo’lishi mumkin.
Nega sahifa o’rniga teglarning o’zi ko’rinyapti?
Fayl oddiy matn sifatida ochilgan yoki uning kengaytmasi noto’g’ri saqlangan bo’lishi mumkin. Nomi .html bilan tugashini va uni matn muharririda emas, brauzerda ochganingizni tekshiring. Agar teglarni burchakli qavslar o’rniga ularning yozma belgilari bilan kiritgan bo’lsangiz, kodni namunaga solishtiring.
HTML bilan chiroyli sayt yaratish mumkinmi?
HTML saytning mazmuni va tuzilishini yaratadi, ko’rinishini batafsil bezash uchun esa odatda CSS qo’shiladi. Avval sarlavha, xatboshi va ro’yxatlar o’z vazifasiga mos kelishiga e’tibor bering. Tartibli tuzilma keyingi bezash ishini ham yengillashtiradi.
Faylni saqlasam, sahifam internetda hammaga ko’rinadimi?
Yo’q, faylni kompyuterga saqlash uni internetga joylash degani emas. Boshqalar sahifangizni internet orqali ochishi uchun uni veb-sahifalarni saqlab, foydalanuvchilarga yetkazadigan xizmatga joylash kerak. Dastlabki mashqlarni esa qurilmangizda saqlab, bemalol sinab ko’rishingiz mumkin.