HTML: veb sahifani noldan quring

To'liq sahifa skeleti

Haqiqiy HTML sahifa yolg'iz teglardan emas, balki standart «skelet»dan boshlanadi. Bu skelet brauzerga sahifani qanday o'qishni aytadi. Deyarli har sahifa quyidagi qismlardan iborat:

Har qismning vazifasi:

• <!DOCTYPE html>: brauzerga «bu HTML5» deydi (birinchi qatorda turadi).
• <html lang="uz">: butun sahifani o'raydi; lang="uz" sahifa tili o'zbekcha ekanini bildiradi (qidiruv tizimi va tarjimonlar uchun muhim).
• <meta charset="utf-8">: harflar kodlashini belgilaydi. Busiz o'zbekcha yoki boshqa harflar buzuq chiqishi mumkin. <head> ichida birinchi bo'lishi kerak. Bu toq teg (yopilmaydi).
• <head>: ko'rinmaydigan ma'lumot (sozlamalar, sahifa nomi).
• <body>: ko'rinadigan qism (sarlavha, matn, rasm).
• <title>: sahifa nomi; brauzer tabida chiqadi.

Quyida to'liq skelet. O'zgartiring va natijani kuzating:

Tushundim

head va body farqi

<head> va <body>, bu sahifaning ikki asosiy qismi. <head> ichidagisi ekranda ko'rinmaydi (u faqat sahifa haqidagi ma'lumot). <body> ichidagisi esa ekranda ko'rinadi.

Sinab ko'ring: <head> dagi <title> natijada ko'rinmaydi, faqat <body> dagi matn ko'rinadi:

Tushundim

Amaliyot: sahifaga nom bering

Quyida to'liq skelet bor, lekin sahifaning nomi bo'sh. <title> teg ichiga o'z sahifangiz nomini yozing.

Tushundim

Mashqlar: mustahkamlash

Quyidagi kichik vazifalarni birma-bir bajaring. Har birida kod yozing va natijani darhol yonida ko'ring. Uchala mashq to'g'ri bo'lsa, bo'lim yakunlanadi.

Sarlavhalar: h1 dan h6 gacha

Sarlavha uchun 6 ta daraja bor: <h1> eng katta, <h6> eng kichik. Ular matnni bo'limlarga ajratadi. Sahifada odatda bitta <h1> (asosiy sarlavha), qolganlari kichik bo'limlar uchun ishlatiladi.

Muharrirda sarlavha raqamini o'zgartiring (1 dan 6 gacha) va o'lcham qanday o'zgarishini ko'ring:

Tushundim

Paragraflar: p, br va probel

Oddiy matn <p> (paragraph, xatboshi) ichiga yoziladi. Har bir <p> alohida blok bo'lib, oldidan va keyinidan bo'sh joy qoldiradi. Muhim qoida: HTML kodidagi ortiqcha probel va yangi qatorlar brauzerda bitta probelga aylanadi. Ya'ni kodda 10 ta probel qo'ysangiz ham, ekranda bitta bo'ladi.

Matn ichida ataylab yangi qatordan boshlash uchun <br> (toq teg), bo'limlarni ajratuvchi chiziq uchun <hr> ishlatiladi. Quyida sinab ko'ring: birinchi xatboshidagi ortiqcha probellar siqiladi, ikkinchisida <br> yangi qator beradi:

Tushundim

Styles: stil atributi

Elementning ko'rinishini (rang, o'lcham, fon) o'zgartirish uchun unga style atributi beriladi. Uning ichiga CSS xossalari xossa: qiymat ko'rinishida, ; bilan ajratib yoziladi. Bu «ichki stil» (inline CSS) deb ataladi.

Eng ko'p ishlatiladigan xossalar:

• color: matn rangi (masalan red yoki #e34f26)
• background-color: fon rangi
• font-size: matn o'lchami (masalan 20px)
• text-align: joylashuv (left, center, right)
• font-family: shrift turi (masalan Georgia)
• padding: ichki bo'shliq (masalan 10px)

Quyida jonli sinab ko'ring: qiymatlarni o'zgartiring va ko'rinish qanday o'zgarishini kuzating:

Tushundim

Matn formatlash teglari

Oddiy matn <p> (paragraf) ichiga yoziladi. Ichidagi ba'zi so'zlarni ajratish uchun ko'plab teglar bor. Avval bitta muhim tushuncha: teglar tuzilishiga ko'ra ikki turga bo'linadi.

Quyida asosiy formatlash teglari: kodi, tayyor natijasi, vazifasi va turi. Natija ustunida haqiqiy ko'rinishni kuzating:

Endi o'zingiz sinab ko'ring. So'zlarni turli teglar bilan o'rab, natijasini kuzating:

Tushundim

Comments: izohlar

Izoh (comment), bu kodga o'zingiz uchun yozadigan eslatma. Brauzer uni o'qimaydi va ekranda ko'rsatmaydi. Izoh <!-- bilan boshlanib, --> bilan tugaydi; ular orasidagi hamma narsa yashirin qoladi. Izoh ikki narsaga kerak: (1) kodni tushuntirish, (2) biror qismni vaqtincha «o'chirib qo'yish» (o'chirmasdan yashirish).

Quyida sinab ko'ring: izoh va izohga olingan paragraf natijada chiqmaydi:

Tushundim

Amaliyot: kichik maqola

Sahifada sarlavha va paragraf bor. Endi paragrafdagi biror so'zni <b> teg bilan qalin qiling.

Tushundim

Mashqlar: mustahkamlash

Quyidagi kichik vazifalarni birma-bir bajaring. Har birida kod yozing va natijani darhol yonida ko'ring. Uchala mashq to'g'ri bo'lsa, bo'lim yakunlanadi.

Ro'yxatlar: ul, ol va li

Ro'yxat uch tegdan tuziladi. Tashqi teg butun ro'yxatni o'raydi: <ul> (belgili, tartibsiz) yoki <ol> (raqamli, tartibli). Ichkarida esa har bir band alohida <li> (list item) teg ichida yoziladi. Ya'ni matnni to'g'ridan-to'g'ri emas, doim <li>...</li> orasiga qo'yasiz, keyin barcha <li> larni <ul> yoki <ol> ichiga joylaysiz.

Muharrirda ro'yxatga yana <li> qo'shing yoki <ul> ni <ol> ga o'zgartirib, natijani kuzating:

Belgi yoki raqamning ko'rinishini type atributi bilan tanlaysiz. U ochuvchi tegga yoziladi, masalan <ul type="square">. Quyida barcha qiymatlar va tayyor natijasi:

Tushundim

Havolalar va atributlar

Havola (link) bosilganda boshqa sahifaga olib boradi. U <a> teg bilan yaratiladi. Lekin <a> qayerga borishini bilishi kerak, buni atribut orqali aytamiz.

Atribut, bu teg ichidagi qo'shimcha ma'lumot. U nom="qiymat" ko'rinishida ochuvchi teg ichida yoziladi. Havola uchun bu atribut href (manzil) deb ataladi:

Muharrirda havola matnini yoki manzilini o'zgartiring va natijadagi havolani bosib ko'ring:

Tushundim

Amaliyot: menyu yasang

Kichik menyu yasang: bitta ro'yxat va bitta havola bo'lsin.

Tushundim

Mashqlar: mustahkamlash

Quyidagi kichik vazifalarni birma-bir bajaring. Har birida kod yozing va natijani darhol yonida ko'ring. Uchala mashq to'g'ri bo'lsa, bo'lim yakunlanadi.

Rasm qo'yish: img

Sahifaga rasm qo'yish uchun <img> teg ishlatiladi. U toq (yolg'iz) teg, ya'ni yopilmaydi. Rasmning o'zi kod ichida bo'lmaydi, teg faqat rasm qayerdaligini ko'rsatadi. Buning uchun ikki muhim atribut bor: src (rasm manzili) va alt (rasm chiqmasa yoki ko'rish imkoniyati cheklangan foydalanuvchi uchun matn).

Muharrirda alt matnini yoki width (kenglik) qiymatini o'zgartiring va natijani kuzating:

Tushundim

O'lcham va boshqa media

Rasm o'lchamini width (kenglik) va height (balandlik) atributlari piksel bilan belgilaydi. Ko'pincha faqat bittasi (masalan width) yoziladi, ikkinchisi mutanosib o'zgaradi.

Muharrirda width qiymatini o'zgartiring va rasm qanday kichrayib-kattalashishini ko'ring:

Rasmdan tashqari yana video va audio ham qo'yish mumkin. Ular juft teg va controls atributi bilan ijro tugmalarini ko'rsatadi:

• <img>: rasmni ko'rsatadi (src, alt). Toq teg.
• <video controls>: videoni ijro etadi (play, pauza, ovoz). Juft teg.
• <audio controls>: audioni ijro etadi. Juft teg.

Quyida jonli namuna: controls atributi ijro tugmalarini chiqaradi. Video va audio pleyerlarini bosib sinab ko'ring:

YouTube videosini joylash

Boshqa saytdagi videoni (masalan YouTube) o'z sahifangizga qo'yish uchun <iframe> ("ichki ramka") ishlatiladi. YouTube videosini oching, "Share" (Ulashish), keyin "Embed" (Kodni joylash) tugmasini bosing va berilgan <iframe> kodini nusxalab sahifaga qo'ying. src ichida video manzili, width/height esa o'lchami turadi:

<iframe width="420" height="236"
  src="https://www.youtube.com/embed/tgbNymZ7vqY"
  title="YouTube video"></iframe>

Yuqoridagi kod aynan quyidagi videoni sahifaga joylaydi (bosib ijro eting):

Tushundim

Amaliyot: rasmga alt bering

Quyidagi rasmda alt yo'q. Unga mazmunli alt matnini qo'shing.

Tushundim

Mashqlar: mustahkamlash

Quyidagi kichik vazifalarni birma-bir bajaring. Har birida kod yozing va natijani darhol yonida ko'ring. Uchala mashq to'g'ri bo'lsa, bo'lim yakunlanadi.

Jadval: table, tr, th, td

Ma'lumotni qator va ustunlarga joylash uchun jadval ishlatiladi: <table> butun jadval, <tr> bitta qator (table row), <th> sarlavha katak (qalin, markazda), <td> oddiy katak (table data). Chegara ko'rinishi uchun <table> tegiga border="1" atributini beramiz (bu HTML atribut), cellpadding="6" esa kataklar ichiga bo'sh joy qo'yadi.

Quyida ikki ustunli jadval. Kataklar (<td>) matnini o'zgartiring yoki yangi qator (<tr>) qo'shib ko'ring:

Tushundim

Kataklarni birlashtirish: colspan, rowspan

Ba'zan bitta katak bir nechta ustun yoki qatorni egallashi kerak. colspan="2" katakni gorizontal birlashtiradi (2 ustun kengligida). rowspan="2" katakni vertikal birlashtiradi (2 qator balandligida). Katak birlashtirilganda, uning o'rniga keyingi qator yoki ustunda ortiqcha <td> yozilmaydi.

Quyida colspan (yuqori sarlavha 2 ustun) va rowspan ("Til" 2 qator) birga ishlatilgan. Sonlarni o'zgartirib ko'ring:

Tushundim

Forma va input turlari

Foydalanuvchidan ma'lumot olish uchun forma ishlatiladi. Forma <form> ichida bo'ladi: <label> maydon nomi (yorliq), <input> kiritish maydoni, <button> tugma. <input> ning type atributi maydon turini belgilaydi. Quyida asosiy turlar keltirilgan (har birini bosib sinab ko'ring):

Ikki muhim atribut: placeholder maydon bo'sh turganda ichida maslahat matnini ko'rsatadi; required esa maydonni to'ldirishni majburiy qiladi (bo'sh bo'lsa forma yuborilmaydi). Quyida jonli forma:

Tushundim

textarea, radio, checkbox, select

<input> dan tashqari yana bir nechta maydon turi bor:

• <textarea>: ko'p qatorli matn (izoh, xabar). Juft teg. rows atributi balandligini beradi.
• <input type="radio">: variantlardan faqat bittasi tanlanadi. Bir guruh bo'lishi uchun ularning name atributi bir xil bo'lishi shart.
• <input type="checkbox">: bir nechta variantni birga belgilash mumkin.
• <select> va ichidagi <option>: ochiluvchi ro'yxat (dropdown).

Quyida hammasi jonli. Radio, checkbox va ochiluvchi ro'yxatni bosib ko'ring:

Tushundim

Amaliyot: formaga izoh maydoni qo'shing

Quyidagi formada ism maydoni va tugma bor. Unga izoh yozish uchun <textarea> qo'shing.

Tushundim

Mashqlar: mustahkamlash

Quyidagi kichik vazifalarni birma-bir bajaring. Har birida kod yozing va natijani darhol yonida ko'ring. Uchala mashq to'g'ri bo'lsa, bo'lim yakunlanadi.

div: elementlarni guruhlash

Katta sahifada elementlarni guruhlarga ajratish kerak bo'ladi: yuqori qism, asosiy qism, pastki qism. Buning uchun <div> tegi ishlatiladi. <div> o'zi hech qanday ko'rinish bermaydi, u shunchaki bir nechta elementni bitta quti ichiga oladi. Bu quti keyinroq CSS bilan bezatiladi yoki joyi belgilanadi.

Quyida <div> ichiga sarlavha va matn joylashtirilgan. Chegara (border) qutini ko'rsatib turibdi:

Tushundim

span va block/inline elementlar

HTML elementlari ikki asosiy turga bo'linadi: block va inline. Block element har doim yangi qatordan boshlanadi va butun enni (chapdan o'nggacha) egallaydi: <div>, <p>, <h1>-<h6>, <ul>, <li>, <table>, <form>. Inline element esa yangi qator ochmaydi; faqat o'z kontenti qadar joy egallaydi va matn ichida yonma-yon turadi: <span>, <a>, <b>, <img>, <input>. Shuning uchun <div> block quti (kattaroq bo'laklarni guruhlaydi), <span> esa inline quti (matn ichidagi kichik bo'lakni belgilaydi).

Quyida farqni ko'ring: ikki <div> (block) yangi qatordan boshlanadi va to'liq enlik; <span> (inline) esa jumla ichida yonma-yon turadi. Fon rangi qutilarning enini ko'rsatadi:

Tushundim

class va id: yorliq berish

Elementlarga yorliq (belgi) berish mumkin. Ikki xil yorliq bor: class va id. class bu guruh yorlig'i: uni bir nechta elementga berish mumkin (masalan hamma kartalarga class="karta"). id esa yagona yorliq: u sahifada faqat bitta elementga beriladi (masalan asosiy blokka id="asosiy"). Bu yorliqlar keyinroq CSS va JavaScript uchun kerakli elementni topishga yordam beradi.

Quyidagi kodda <style> ichida .karta (class) va #asosiy (id) bezatilgan. Ikkala div ham karta class'iga ega, lekin faqat bittasi asosiy id'ga ega:

Tushundim

Amaliyot: karta yasang

Quyida yashil chegarali .mahsulot uslubi tayyor turibdi. Endi shu class'li <div> ni o'zingiz yozing va ichiga biror matn qo'ying.

Tushundim

Mashqlar: mustahkamlash

Quyidagi kichik vazifalarni birma-bir bajaring. Har birida kod yozing va natijani darhol yonida ko'ring. Uchala mashq to'g'ri bo'lsa, bo'lim yakunlanadi.

Semantik teglar: header, nav, main, footer

Hozirgacha guruhlash uchun <div> ishlatdik. Lekin <div> «bu nima» ekanini bildirmaydi. HTML5 semantik (ma'noli) teglarni beradi: ular xuddi <div> kabi guruhlaydi, lekin qism vazifasini ham aytadi. Asosiylari: <header> yuqori qism (logo, sarlavha), <nav> menyu (havolalar), <main> asosiy kontent (sahifada bitta), <footer> pastki qism (mualliflik, aloqa).

Quyida jonli sinab ko'ring (ranglar qismlarni ajratib turibdi, ular oddiy bloklar kabi tepadan pastga joylashadi):

Tushundim

section, article, aside va sahifa tuzilishi

Asosiy kontent (<main>) ichida yana ma'noli teglar bor: <section> mavzuli bo'lim (masalan «So'nggi yangiliklar»), <article> mustaqil, alohida turadigan kontent (bitta maqola yoki blog posti), <aside> yon panel (qo'shimcha havolalar, reklama). To'liq sahifa odatda shunday quriladi: yuqorida header va nav, o'rtada main (ichida article va aside), pastda footer.

Quyida <main> ichidagi <article> va <aside> (yonma-yon joylashuvi CSS bilan berilgan):

Tushundim

Yaxshi amaliyot (Best Practices)

Professional HTML bir nechta oddiy qoidaga amal qiladi. Ular kodni toza, to'g'ri va hamma uchun qulay qiladi:

• Teglarni kichik harfda yozing: <p>, <P> emas.
• Atribut qiymatlarini qo'shtirnoqqa oling: class="box".
• Har <img> ga mazmunli alt bering.
• Sahifada faqat bitta <h1> ishlating.
• Sahifa boshida <!DOCTYPE html>, <html lang="uz">, <meta charset="utf-8"> bo'lsin.
• <div> o'rniga imkon boricha semantik teglardan foydalaning.
• Kodni ichma-ich chekinish (indentation) bilan tartibli yozing.
• Teglarni doim yoping va to'g'ri joylang (ichma-ich tartibda).

Bir xil natija beruvchi ikki kod, lekin sifat farqi katta:

Tushundim

Yakuniy loyiha: shaxsiy sahifa

Endi hamma o'rgangan narsangizni birlashtirib, to'liq bir sahifa quramiz. Quyidagi skeletni to'ldiring: menyuga havolalar, asosiy qismga ro'yxat qo'shing.

Tushundim

Yakuniy amaliy loyiha

Tabriklaymiz, kursning barcha modul mavzularini yakunladingiz! Endi eng muhim qadam, yakuniy loyiha. Quyidagi tugmani bosing, to'liq ekranli kod studiyasi ochiladi: chapda kod yozasiz, o'ng tomonda «Namuna» (siz yasashingiz kerak bo'lgan tayyor sahifa) va «Natija» (sizning jonli natijangiz) yorliqlari bo'ladi. Studio ochilganda kursning qolgan qismi ko'rinmaydi, siz faqat loyihaga e'tibor qaratasiz.

Yakuniy loyihani boshlash

Bu tugma barcha dars mavzularini tugatganingizdan so'ng faollashadi.