{"id":832,"date":"2023-11-09T17:17:20","date_gmt":"2023-11-09T17:17:20","guid":{"rendered":"https:\/\/dars-ishlanma.uz\/?p=832"},"modified":"2023-11-10T16:58:23","modified_gmt":"2023-11-10T16:58:23","slug":"html-tuhsunchasi-va-veb-sahifani-sozlash","status":"publish","type":"post","link":"https:\/\/dars-ishlanma.uz\/ru\/html-tuhsunchasi-va-veb-sahifani-sozlash\/","title":{"rendered":"HTML TUHSUNCHASI VA VEB-SAHIFANI SOZLASH"},"content":{"rendered":"

Dars maqsadi:<\/strong><\/p>\n\n\n\n

    \n
  1. Ta\u2019limiy:<\/strong> O\u2019quvchilarga \u201cHTML tushunchasi va veb-sahifani sozlash\u201d mavzusini o\u2019rgatish;<\/li>\n\n\n\n
  2. Tarbiyaviy:<\/strong> O\u2019quvchilarni vatanga sodiq va umummadaniy qadriyatlarimiz asosida tarbiyalash;<\/li>\n\n\n\n
  3. Rivojlantiruvchi:<\/strong> O\u2019quvchilarda \u201cHTML tushunchasi va veb-sahifani sozlash\u201d mavzusi bo\u2019yicha bilim, ko\u2019nikma, malaka va kompetensiyalarini rivojlantirish.<\/li>\n<\/ol>\n\n\n\n

    Dars uchun umumiy kompetensiya:<\/strong><\/p>\n\n\n\n

      \n
    1. Axborotlar bilan ishlash;<\/li>\n\n\n\n
    2. O\u2019z-o\u2019zini rivojlantirish;<\/li>\n\n\n\n
    3. Milliy va umummadaniy;<\/li>\n\n\n\n
    4. Kompyuter savodxonlik.<\/li>\n<\/ol>\n\n\n\n

      Fanga oid kompetensiya:<\/strong><\/p>\n\n\n\n

      O\u2019quvchilarda \u201cHTML tushunchasi va veb-sahifani sozlash\u201d mavzusi yuzasidan ko\u2019nikmalari rivojlangan. Ixtiyoriy kompyuterda veb-sahifa tayyorlab unda HTML buyruqlaridan foydalana oladi.<\/p>\n\n\n\n

      Darsning borishi:<\/strong><\/p>\n\n\n\n

        \n
      • Tashkiliy qism:<\/li>\n\n\n\n
      • Salomlashish:<\/li>\n\n\n\n
      • Davomatni aniqlash:<\/li>\n\n\n\n
      • Siyosiy daqiqa (Bugungi kundagi axborot texnologiya yangiliklari)<\/li>\n<\/ul>\n\n\n\n

        Yangi mavzu bayoni:<\/strong><\/strong><\/p>\n\n\n\n

        Veb-saytlardan <\/strong>harxil maqsadlarda foydalanish mumkin. Masalan, ular orqali sevimli mavzular haqida o’qish, ijtimoiy tarmoqlarda suhbatlashish, musiqa yoki kinolarni yuklab olish yoki ij’ro ettirish, shuningdek, kompyuter o’yinlarini o’ynash mumkin. Har qanday veb-saytga doir qiziq holatlardan biri shuki, u qaysi maqsad uchun ishlatilishidan qat\u2019i nazar, foydalanuvchilarga qulay dizaynga ega bo’lishi kerak. Hech veb-saytdan izlagan narsangizni topolmay xunob bo’lganmisiz?<\/p>\n\n\n\n

        Agar veb-saytning dizayni har tomonlama o’ylangan holda ishlab chiqilgan bo’lsa, foydalanuvchi (yoki auditoriya) <\/strong>uni ishlatishdan zavqlanadi. Yoki, aksincha, veb-sayt dizayni puxta yaratilmagan yoki undan ko’zlangan maqsad <\/strong>noaniq bo’lsa, bu foydalanuvchida yomon taassurot uyg’otadi.<\/p>\n\n\n\n

        Siz veb-sahifani HTML <\/strong>yordamida yaratishni o’rganasiz. Har bitta mayda tafsilotga diqqat qiling, chunki kodda kichik xatoga yo’l qo’yilsa, veb-sahifadagi elementlar to’g’ri aks etmasligi mumkin.<\/p>\n\n\n\n

        Kalit so\u2019z<\/strong><\/td><\/tr>
        Veb-sayt:<\/em><\/strong> veb- sahifalar majmui.<\/em> Auditoriya:<\/em><\/strong> veb- sahifaga tashrif buyuruvchi kishilar.<\/em> Maqsad:<\/em><\/strong> veb-sahifan yaratish sababi, masalan, vaqtni maroqli o’tkazish.<\/em> Veb-sahifa:<\/em><\/strong> veb saytdagi bir sahifa.<\/em> HTML:<\/em><\/strong> veb-sahifa yaratish uchun ishlatilgan til.<\/em><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

        HTML nima?<\/strong><\/p>\n\n\n\n

        HTML – \u201cHypertext Markup Language\u201d iborasining qisqartmasi. Bu veb-sahifa yaratish uchun ishlatiladigan dasturlash tillaridan biridir. Veb-sahifa yaratish uchun ishlatiladigan boshqa tillar qatoriga JavaScript, CSS va PHP kiradi. Ammo HTML eng eski va keng tarqalgan tillardan biridir.<\/p>\n\n\n\n

        Siz yozgan HTML kodni veb-brauzer aks ettiradi (o’qiydi). Veb-brauzer siz veb-saytda aks etishini istagan barcha matnlar va tasvirlarni namoyish qilishga xizmat qiladi. Veb-brauzer ularning to\u2018g\u2018ri formatlanishini ta\u2019minlaydi. Veb-brauzer koddan har xil elementlarni qayerga joylash va ularning qanday bo’lishini aytib turadigan bayonot sifatida foydalanadi.<\/p>\n\n\n\n

        Veb-saytlar interfaol elementlarga ega bo’lishi, shuningdek, har xil ekranlar va qurilmalarda aks etishi uchun ular kodda yozilishi lozim. Uning muqobili sifatida foydalanuvchiga butun veb-sahifani katta tasvir sifatida yuborish mumkin. Bunday holatda qanday muammolar kuzatilgan bo’lar edi?<\/p>\n\n\n\n

        Ayrim odamlar veb-sahifa yaratish uchun shablonni ishlatadi. Bu ularga samarali dizayn yaratishga yordam beradi. Siz yangi veb-sahifani boshidan yaratishni o’rganasiz. Ushbu jarayon amaliy ko’nikmalarni egallashga va aynan o’zingiz istagan veb-sahifani yaratishga imkon beradi.<\/p>\n\n\n\n

        Veb-sahifani sozlash<\/strong><\/p>\n\n\n\n

        Birinchi galda Notepad <\/strong>(\u0411\u043b\u043e\u043a\u043d\u043e\u0442) dasturidan foydalanib, veb-sahifani sozlab olish kerak. Notepad (\u0411\u043b\u043e\u043a\u043d\u043e\u0442) boshqa ko’plab kontentlar singari veb-sahifalar uchun ham ishlatilishi mumkin. Bu siz yaratayotgan veb-sahifa ekanini anglatish uchun muayyan HTML<\/strong> kodni yozish talab etiladi.<\/p>\n\n\n\n

        Siz yozadigan HTML<\/strong> kod veb-sahifaning manba kodi <\/strong>deb ataladi. Kodni yozish uchun Notepad (\u0411\u043b\u043e\u043a\u043d\u043e\u0442) dasturini ishga tushurish kerak va yangi Notepad (\u0411\u043b\u043e\u043a\u043d\u043e\u0442) fayliga quyidagi HTML kodni kiritish kerak.<\/p>\n\n\n

        \n
        \"\"<\/figure>\n<\/div>\n\n\n

        Siz yozgan kod veb-sahifa uchun asosiy tuzilma hisoblanadi. Kodni juda aniqlik bilan yozish kerak. Biror mayda xatoga yo\u2018l qo’yilsa, veb-sahifa to\u2018g\u2018ri aks etmasligi mumkin. Deylik, burchak qavslar < > va ularning ichidagi matn orasida hech qanday bo\u2018sh joy bo’lmasligi kerak.<\/p>\n\n\n\n

        <!DOCTYPE html> <\/strong>dasturiy ta\u2019minotga siz yaratayotgan hujjat HTML hujjat ekanini bildiradi.<\/p>\n\n\n\n

        Bu dasturiy ta\u2019minotga u veb-sahifa bo’lishini bildiradi.<\/p>\n\n\n\n

        Koddagi har bir qatorning boshi va oxirida keladigan burchak qavslar (< >) teg <\/strong>yaratishga xizmat qiladi. Notepad (\u0411\u043b\u043e\u043a\u043d\u043e\u0442) teglari dasturga aynan nimani va qay shaklda aks etishini bildirish uchun ishlatiladi.<\/p>\n\n\n\n

        <html> – ochish tegi. <\/strong>Bu dasturiy ta\u2019minotga veb-sahifa qayerdan boshlanishini bildirish uchun ishlatiladi.<\/p>\n\n\n\n

        <head> <\/strong>– sarlavha qismi uchun ochish tegi. Bosh qism sahifa nomi kabi elementlar uchun ishlatiladi va veb-sahifaning yuqorisidagi satrda aks etadi.<\/p>\n\n\n\n

        <\/head> – <\/strong>sarlavha bo’limini yopish tegi. <\/strong>Yopish tegi o’ngga egilgan tikka chiziq (\/) slesh bilan boshlanadi. Bu orqali uni ochish tegidan farqlash mumkin.<\/p>\n\n\n\n

        Kalit so\u2019z<\/strong><\/td><\/tr>
        Teg:<\/em><\/strong> veb-sahifaga kontent kiritish va uslubni qo’shish uchun ishlatiladigan kodning bir qismi. Ochish tegi:<\/strong> kontentning boshida joylashgan teg.<\/em> Yopish tegi:<\/em><\/strong> kontentning oxirida joylashgan teg.<\/em><\/em><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

        <body> <\/strong>– asosiy qism uchun ochish tegi. Asosiy qism veb-sahifadagi barcha kontent yoziladigan bo’limdir.<\/p>\n\n\n\n

        <\/body> <\/strong>– asosiy qism uchun yopish tegi.<\/p>\n\n\n\n

        <\/html> <\/strong>– htmlni yopish tegi. Bu dasturiy ta\u2019minotga veb-sahifa qayerda tugashini bildirish uchun ishlatiladi.<\/p>\n\n\n\n

        HTML kod orqali siz aks ettirishni istagan aksariyat elementlar ochish va yopish teglariga egadir.<\/p>\n\n\n\n

        Veb-sayt uchun tuzilmani sozlagandan keyin unga kontent kiritishni boshlash mumkin. Har bitta veb-sahifaga kiritilishi lozim bo’lgan elementlardan biri bu sarlavhadir. U haqiqiy sahifada aks etmaydi, balki veb-sahifa ochilganda, veb-brauzer panelida (sarlavha satrida) paydo bo’ladi.<\/p>\n\n\n\n

        Sarlavha kiritish<\/strong><\/p>\n\n\n\n

        Veb-sahifa uchun quyidagi kodni bosh teglar orasiga yozing.<\/p>\n\n\n\n

        <title>Sinov sahifa<\/title><\/strong><\/p>\n\n\n\n

        U mana bunday ko’rinishda bo’lishi kerak:<\/p>\n\n\n

        \n
        \"\"<\/figure>\n<\/div>\n\n\n

        Hujjatni veb-sahifa sifatida saqlash<\/strong><\/p>\n\n\n\n

        Bu juda muhim:<\/strong><\/p>\n\n\n\n

        O\u2018zingiz yaratgan veb-sahifani ochish uchun uni alohida usulda saqlashingiz kerak. U HTML fayl sifatida saqlanishi lozim.<\/p>\n\n\n\n

        1. Avval File <\/strong>(\u0424\u0430\u0439\u043b) <\/strong>va shundan keyin Save As <\/strong>(\u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043a\u0430\u043a\u2026) buyrug\u2019ini tanlang.<\/p>\n\n\n

        \n
        \"\"<\/figure>\n<\/div>\n\n\n

        2. Veb-sahifa kerakli papkaga saqlanganiga ishonch hosil qiling.<\/p>\n\n\n\n

        3. Veb-sahifa uchun \u201c.html\u201d bilan tugaydigan mos nomni kiriting. Masalan: Mening_veb_sahifam.html<\/strong><\/p>\n\n\n\n

        4. Fayl nomi kiritilgach, Save<\/strong> (\u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c) tugmasini bosing.<\/p>\n\n\n\n

        Yozilayotgan kodda har gal faylga o’zgartirish kiritilganda, faylni saqlash talab etiladi. Buning uchun Fayl menyusidagi Save<\/strong> <\/strong>(\u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c) buyrug’idan foydalanish mumkin.<\/p>\n\n\n\n

        Endi hujjatni veb-sahifa sifatida ochish mumkin. Agar hujjatlarga o’tib, saqlagan faylingizni topsangiz, uning yonida veb-brauzer ikonkasi borligiga guvoh bo’lasiz.<\/p>\n\n\n\n

        Faylning ustiga bosilganda, u veb-sahifani veb-brauzerda ochadi. Hali sahifaga hech qanday kontent kiritilmagani uchun unda hozircha hech narsa aks etmayapti. Kiritgan sarlavha tepadagi panel (sarlavha satrida) da aks etadi.<\/p>\n\n\n

        \n
        \"\"<\/figure>\n<\/div>\n\n\n

        Yangi mavzuni mustahkamlash:<\/strong><\/p>\n\n\n\n

        1-mashg\u2018ulot<\/strong><\/p>\n\n\n\n

        Kompyuteringizda papka yarating va unga Website deb nom bering. Bu papka ichida boshqa papka yaratib, uni Images deb nomlang. Veb-sahifalarni Website deb atalgan papkaga, veb-saytga mo’ljallangan tasvirlarni esa Images deb nomlangan papkaga saqlash mumkin.<\/p>\n\n\n\n

        2-mashg\u2018ulot<\/strong><\/strong><\/p>\n\n\n\n

        Veb-sahifani \u201cBosh sahifa\u201d nomi bilan sozlang. Bosh sahifa veb-saytning asosiy veb-sahifasi hisoblanadi. 1-amaliy ko\u2018nikmadagi kodni ishlating: Sarlavha kiritish sizga namuna sifatida yordam beradi. Kodni veb-sayt papkasida saqlashni unutmang.<\/p>\n\n\n\n

        Uyga vazifa:<\/strong><\/p>\n\n\n\n

        Mavzuga oid atamalarni o\u2019zlashtirish. Qo\u2019shimcha ravishda mustaqil mashqlar bajarish.<\/em><\/p>\n\n\n\n\n

        <\/div>\n