HTML dasturlash tili qayerda ishlatiladi? HTML WEB dasturlash tili asoslari

CSS-ni o'rganishni boshlashdan oldin, keling, gipermatn belgilash tili HTML aslida nima uchun ekanligini eslaylik va kelajakda undan qanday foydalanishni hal qilamiz.

CSS-dan oldin HTML qanday ishlatilgan

HTML (HyperText Markup Language) tilining asosiy maqsadi veb-sahifalardagi ma'lumotlarni tuzishdir. Dastlab, bu til aynan shu maqsadlar uchun ixtiro qilingan. Ammo internetning ommabopligi oshib borgani sari, foydalanuvchilarning saytlarini qandaydir tarzda diversifikatsiya qilish va bezash istagi ham ortib bordi.

Veb-dizaynerlar ma'lumotni chiroyli taqdim etish yo'llarini izlay boshladilar. Ba'zi HTML teglari mo'ljallangan maqsadlaridan tashqari maqsadlarda ishlatilgan, masalan.

. Ushbu teg yordamida veb-hujjatlarni joylashtirish usuli shu qadar mashhur bo'ldiki, u hatto alohida nom oldi - jadvalli tartib. Ilgari, bu sahifadagi elementlarni aniq joylashtirishning yagona yo'li edi.

Jadvalli tartib bilan veb-sahifa dizayni to'g'ridan-to'g'ri HTML hujjatida yaratilgan. Styling va formatlash uchun boshqa teglar ham ishlatilgan. Bu qanday muammolarga olib keldi? Birinchidan, HTML kodi nihoyatda katta bo'ldi, bu hujjatning og'irligiga ham, qidiruv robotlari tomonidan indekslanishiga ham salbiy ta'sir ko'rsatdi. Ikkinchidan, masalan, saytning har bir sahifasidagi h1 sarlavhalarining rangini o'zgartirish uchun men ularning har birini qo'lda ishlashga majbur bo'ldim. Bularning barchasi ko'p vaqt va kuch talab qildi.

Nima uchun bizga HTML hozir kerak?

Bugungi kunda CSS-ning mavjudligi tufayli sahifa dizaynini uning mazmunidan ajratish, shuningdek, ish jarayonini tezlashtirish va HTML hujjatining hajmini sezilarli darajada kamaytirish mumkin. Juda uzoq vaqtdan beri veb-saytlar yaratayotganlar eski odatlardan xalos bo'lishlari va HTMLni faqat ma'lumotlarni tuzish va tartibga solish uchun mo'ljallangan belgilash tili sifatida qabul qilishni o'rganishlari kerak. Yangi boshlanuvchilar uchun sahifalarni jozibador qilish vositasi sifatida HTML-da ko'rishlar yo'qligi sababli veb-sahifalarni yaratishning yangi tamoyillarini o'rganish osonroq bo'ladi. Buning uchun endi CSS javobgar.

Muhim: HTML hujjatini yaratishda uni qanday bezash haqida emas, balki faqat tarkibni qanday tartibga solish haqida o'ylang. Sahifani hech qanday tarzda tuzmaydigan teglarni unuting va faqat dizaynni o'zgartiring, chunki CSS yordamida siz bir xil vizual effektlarga erishasiz, lekin shu bilan birga HTML kodini toza va keraksiz narsalardan tozalang.

Mana CSS uslublari bilan xavfsiz almashtirilishi mumkin bo'lgan (va kerak bo'lgan) ba'zi HTML teglari:

  • "bezatish", teglarga tekislash atributlari (rang, bgcolor, align va boshqalar);
  • teg
(veb-sahifani joylashtirish uchun foydalanilganda);
  • teg .
  • Strukturalash uchun HTML teglari

    Sahifalaringizni tuzish uchun quyidagi teglardan foydalaning:

    H1-H6 (sarlavha) h1-h6 teglari sarlavhalarni ko'rsatish uchun mo'ljallangan. Bu teglar matnni ajratishni juda qulay qiladi. Yaxshiroq tushunish uchun bo'limlar va kichik bo'limlarga ega bo'lgan kitobni tasavvur qiling. Kitob bobining nomi h1, kichik boblar h2, kichik boblarning qismlari h3 va hokazo. Sarlavha teglarini ketma-ket joylashtirish yaxshidir. P (paragraf) teg

    Matnning paragraflarini ko'rsatish uchun ishlatiladi. OL, UL (tartibli ro'yxat, tartibsiz ro'yxat) Teglar

      ,
        - ro'yxatlarni belgilash uchun qulay vosita (navigatsiya havolalari, matndagi nuqtalar, ketma-ket ro'yxat va boshqalar). DL (ta'riflar ro'yxati) teg
        teglar bilan birgalikda
        ,
        ta'riflar ro'yxatini yaratishda foydalaniladi, bu erda
        - ta'rifning nomi (ta'rif atamasi),
        - ta'rif tavsifi. DIV (bo'linish) DIV - blok elementi bo'lib, hujjatning bir qismini ajratib ko'rsatish, shuningdek, bir nechta elementlarni mantiqiy birlashtirish uchun ishlatilishi mumkin. CSS-dan foydalanib, siz blok berishingiz mumkin
        zarur ko'rinish va joylashishni aniqlash, lekin o'zida
        hujjatning ko'rinishini hech qanday tarzda o'zgartirmaydi. SPAN (span) tegi roliga o'xshaydi
        . Lekin
        blok elementi hisoblanadi va - kichik harf. Masalan, teg ichidagi bitta so'zning uslubini o'zgartirish kerak bo'lsa

        Siz bu so'zni tegga "o'rab" olasiz , selektor nomi bilan id yoki sinf atributini qo'shing va keyin unga CSS-da kerakli uslubni belgilang. HTML5 semantik teglar HTML hujjatingizni yaxshiroq tuzish uchun tarkibni yaxshiroq tasvirlashga yordam beradigan yangi teglardan foydalaning. Masalan, sayt sarlavhasi, navigatsiya menyusi va altbilgini boshqa kontentdan qanday ajratish mumkin, agar ularning barchasi teglar bilan belgilangan bo'lsa

        ? HTML5 teglari kabi:
        ,
    hujjat tartibi uchun.

    Brauzerlar veb-sahifani to'g'ri ko'rsatishi uchun siz elementdan foydalanishingiz kerakkodning birinchi qatorida.

    Keyingi bobda biz CSS sintaksisi va jadvallarni HTML ga ulash bilan tanishamiz hamda birinchi uslubni yozamiz.

    Assalomu alaykum aziz boshlang'ich veb-ustalar. Keling, dasturlash tillarini o'rganishni boshlaylik.

    Va biz ularni html bilan o'rganishni boshlaymiz.

    Darhol aytamanki, kurs oxirida siz o'zingiz sof html-da veb-sayt yozishingiz va uni Internetga joylashtirishingiz mumkin. Lekin men hali ham vaqtingizni ajratishni va html dan keyin CSS bilan tanishishni tavsiya qilaman.

    Shunda siz saytni salqinlashtirasiz va tayyor CMS (kontentni boshqarish tizimi) da yaratilgan sayt ko'rinishini to'g'irlashingiz mumkin bo'ladi.

    Dasturlash tilini o'rganish va chet tilini o'rganish bir xil narsa emas va bu juda oson. Bundan tashqari, bu qo'rqinchli emas, balki juda hayajonli.

    Faqat tushunarsiz narsa sizni doimo qo'rqitadi, lekin men sizga va'da beramanki, birinchi darslardan keyin barcha qo'rquvlar o'tib ketadi.

    Biz kompyuteringizga o'rnatishingiz kerak bo'lgan muharrirdan foydalanishni o'rganamiz.

    Ushbu fayl muharririda siz kod yozishingiz va brauzer uni qanday ko'rsatishini darhol ko'rishingiz mumkin. Juda qulay.

    Keling, avval men sizga HTML nima ekanligini bir oz aytib beraman va bu bizning kursimizning zerikarli qismi bo'ladi, keyin esa eng qiziqarli amaliyotga o'tamiz. U erda, albatta, zerikarli bo'lmaydi.

    HTML (HyperText Markup Language) so'zma-so'z tarjimada gipermatnni belgilash tilini anglatadi. U veb-sahifalarni yaratish uchun ishlatiladi.

    Va agar bizning tushunchamizga ko'ra, bitta mavzu bilan birlashtirilgan oddiy sahifalar to'plami kitob bo'lsa yoki hatto yaxshiroq aytganda, qalin jurnal bo'lsa, unda bitta domen nomi bilan birlashtirilgan veb-sahifalar to'plami veb-saytdir.

    Har bir veb-sahifada siz yozgan va html kodiga kiritilgan o'ziga xos matn mavjud.

    Kod - brauzerga ma'lum bir elementni qanday ko'rsatish bo'yicha ko'rsatmalar. Aytaylik, siz so'z yozdingiz, lekin u ekranda qanday ko'rinishda paydo bo'lishi uni qaysi kodga kiritganingizga bog'liq.

    Html kodi quyidagi elementlardan iborat:

    2. Teg atributlari.

    3. Atribut qiymatlari.

    Keling, ularni tartibda ko'rib chiqaylik.

    Html tegi kodning asosiy elementi hisoblanadi. Bu shunday yozilgan:

    Ko'rib turganingizdek, u ikki qismdan iborat. Birinchi burchakli qavslar ochilish qismi, ikkinchisi esa qiyshiq chiziq bilan yopish qismidir.

    Ushbu ikki qism o'rtasida ekranda ko'rsatiladigan sahifa kodining qolgan qismi yoziladi.

    teg brauzerga bu HTML hujjati ekanligini va boshqa barcha elementlar uchun asosiy (ota) teg ekanligini aytadi.

    Qolgan teglarda, kod elementlarida burchakli qavslar ichida harf yoki so'z yoziladi, bu tegning nomi bo'ladi va ushbu teg orqali qaysi element ekranda ko'rsatilishini aniqlaydi.

    Misol uchun, agar siz h1 harfini burchakli qavs ichiga qo'ysangiz, matn ekranda sarlavha sifatida ko'rsatiladi.

    Salom

    Ya'ni, "Salom" so'zining shrifti matnning qolgan qismiga qaraganda kattaroq va qalinroq bo'ladi.

    Agar siz p harfini burchakli qavs ichiga qo'ysangiz, tegga kiritilgan matn paragraf sifatida ko'rsatiladi.

    Salom

    Ya'ni, shrift normal bo'ladi, lekin bu tegdan keyin yozilgan hamma narsa yangi satrdan boshlanadi.

    HTML-da bir necha o'nlab shunday harflar va hatto buyruq turini aniqlaydigan so'zlar mavjud, garchi ko'pincha 10-15 tegdan ko'p foydalanilmasa.

    Yo'l davomida ularning har birini batafsil ko'rib chiqamiz.

    Quyida teg atributlari keltirilgan. Tez-tez ishlatiladi, shuningdek, o'ndan ortiq emas. Va yaqinda bundan ham kamroq, chunki barcha atribut funktsiyalari CSS-ga ko'chirildi.

    Ammo bu haqda keyinroq ko'proq ma'lumot beramiz, ammo hozircha biz atribut nima ekanligini bilib olamiz, chunki ularning ba'zilari o'z ahamiyatini yo'qotmagan va hech qachon yo'qotmaydi.

    Atribut qo'shimcha buyruqdir. Bu tegning ochilish qismida yozilgan. Misol uchun, agar siz sarlavhani rangli qilishni istasangiz, h1 tegining ochilish qismiga rang atributini kiritishingiz kerak.

    Keling, to'g'ridan-to'g'ri atribut qiymatlariga o'tamiz. Gap shundaki, atribut qiymatga ega bo'lishi kerak. Ya'ni, agar siz sarlavha rangli bo'lishi kerakligi haqida buyruq bergan bo'lsangiz, unda qanday rang bo'lishini ko'rsatishingiz kerak.

    Bu ko'rsatkich atribut qiymati bo'ladi. Bu shunday ko'rinadi:

    Bu qizil.

    Xuddi shu tarzda, lekin boshqa atributlardan foydalanib, siz matn hajmini, chekinishlarni, hizalamalarni va boshqa ko'p narsalarni o'rnatishingiz mumkin.

    Garchi dizayn tobora ko'proq CSS-ga o'tmoqda va dizayn atributlari asta-sekin eskirib, amaliyotdan chiqib ketmoqda.

    Va endi biz yuqorida aytilganlarning barchasidan xulosa chiqaramiz:

    HTML - bu brauzerlar tushunadigan til. Brauzer bilan bog'lanish uchun yoki, aytish mumkinki, uni boshqarish uchun, ya'ni unga biz yozgan narsalarni qanday idrok etish va ekranda ko'rsatish haqida buyruqlar berish uchun kerak.

    Shuni qo'shimcha qilmoqchimanki, teglar, atributlar va ularning ma'nolarini amaliy mashg'ulotlar davomida eslab qolish oson, bu esa keyingi barcha maqolalar bo'ladi.

    U erda siz darhol tegni ko'rasiz, siz uning ma'nosini, qaysi holatda va qaysi joyda ishlatilganligini, qanday belgilar bilan birga kelganini va qanday yozilganligini bilib olasiz, shuning uchun endi men sizga barcha teglar va atributlarni ko'rsatmayman, hammasini amalda ko'ramiz.

    Agar kimdir qiziqsa, siz har doim html teglari va atributlarining to'liq ro'yxatini ko'rishingiz mumkin. .

    Agar siz professional tarzda dasturlashmoqchi bo'lmasangiz ham, bir nechta (taxminan o'nlab) asosiy teglar va bir nechta atributlarni bilish kifoya.

    Xo'sh, bu hammasi, menimcha. Ozi? Va hozircha ko'proq narsaga hojat yo'q. Qolganlarini o'quv jarayonida aniq misollar yordamida bilib olamiz.

    O'ylaymanki, buni misollar bilan yaxshiroq tushunish mumkin. Bizning maqsadimiz veb-sayt yaratish va uning qanday ishlashini tushunishdir, shuning uchun davom eting va mashq qiling.

    Buriling

    O‘qishga o‘tirishing bilan, qandaydir bir badbashara sizni uyg‘otishi tayin!!!

    Maktabda o'qituvchi o'quvchilarga aytadi:
    - Oxir-oqibat qaysi biringiz o'zingizni ahmoq deb hisoblaysiz? O'rningizdan turing.
    Uzoq tanaffusdan so'ng bir talaba o'rnidan turadi:
    - Demak, o'zingizni ahmoq deb o'ylaysizmi?
    - Xo'sh, aniq emas, lekin sizning yolg'iz qolganingiz qandaydir noqulay.

    HTMLning paydo bo'lishi uchun zamonaviy dunyoda Yadroviy tadqiqotlar bo'yicha Yevropa kengashida (Conseil Européen pour la Recherche Nucléaire, CERN) bitta olim minnatdorchilik bildiradi. Bu olimning ismi Timoti Jon Berners-Li. HTMLning birinchi versiyasi ilmiy hujjatlarni formatlash maqsadida yaratilgan. Bu rang sxemalari, shrift parametrlari va boshqalarni tavsiflash elementlarisiz tizimli formatlash. Shunday qilib, HTML dastlab matndagi sarlavhalar, paragraflar, ro'yxatlar va shunga o'xshash strukturaviy elementlarni ajratib ko'rsatish imkonini berdi. HTML-ni qayta ishlash yoki "o'ynash" natijasi uni vizualizatsiya qilish uchun uskunaning texnik xususiyatlariga bog'liq bo'lmasligi kerak, chunki unda ushbu vizualizatsiya parametrlari mavjud emas edi. Vaqt o'tishi bilan gipermatnni belgilash tilining bu xususiyati qisman yo'qoldi.

    Shunday qilib, HTML ning birinchi versiyalarining paydo bo'lishi 1986 yilga to'g'ri keladi va 1991 yilda HTML sezilarli darajada takomillashtirildi va butun dunyo bo'ylab gipermatnni uzatish uchun maxsus foydalanila boshlandi. Ularning aytishicha, Hyper Text Markup Language degan ma'noni anglatuvchi dunyoga mashhur HTML qisqartmasi aynan o'tgan asrning 90-yillari boshlarida paydo bo'lgan. Va endi markirovka tillarining nasl-nasabiga qisqa ekskursiya. HTML gipermatn belgilash tilining birinchi versiyasi standart umumlashtirilgan belgilash tili (SGML) asosida yaratilgan bo'lib, uni qaysidir ma'noda eXtensible Markup Language prototipi deb hisoblash mumkin. XML standarti kompyuter texnologiyalarida qo'llaniladigan kengaytmalarining ko'pligi tufayli bizning davrimizda juda mashhur bo'ldi. O'quvchini to'liq chalkashtirib yuborish uchun men darhol shuni qo'shimcha qilamanki, keyinchalik XML asosida XHTML (Extensible Hypertext Markup Language) gipermatn belgilash tili ishlab chiqilgan bo'lib, u asosan HTMLni takrorlaydi. Natijada, bizda SGML, HTML, XML va XHTML qisqartmalari bor va biz qaysi biri ekanligini tushunishimiz kerak. Aslida, hamma narsa oddiy: SGML - bu har qanday belgilash tilini qurish mumkin bo'lgan qoidalar to'plamidan boshqa narsa emas. HTML bu tillardan biri - SGML ilovasi. Boshqacha qilib aytadigan bo'lsak, SGML belgilash elementlari qanday bo'lishi kerakligini, HTML esa aynan qanday elementlar bo'lishi kerakligini va brauzerlar tomonidan qanday talqin qilinishi kerakligini belgilaydi. XHTML, o'z navbatida, XML ilovasi va XMLning o'zi SGML ning soddalashtirilgan versiyasidan boshqa narsa emas. , ular tashqi ko'rinishida juda o'xshash bo'lishiga qaramay, ular muhim yashirin farqlarga ega, bu ko'pincha ularni qayta ishlash printsipida yotadi.

    Endi HTML ning rivojlanish tarixiga qaytaylik. Shunday qilib, 1994 yilgacha HTML hali ham faqat ma'lumotlarning tarkibiy belgilarini belgilash uchun ishlatilgan, ammo u qalin yoki kursiv bilan matnni ta'kidlash uchun teglarni o'z ichiga olgan. Xuddi shu 1994 yilda W3C (World Wide Web Consortium) tashkiloti - Butunjahon Internet Konsorsiumi yaratildi, uni mantiqan o'sha Tim Berners-Li boshqaradi va 1995 yilda HTML 2.0 tavsiyasi nashr etildi. HTML yaratuvchilari vaqt o'tishi bilan ularning miyasi statik matn belgilash tilidan dinamik Internet resurslarini yaratish uchun asosiy vositaga aylanishini allaqachon tushunishgan. HTML 2.0 ning asosiy qo'shimchasi foydalanuvchi HTTP so'rovlari uchun parametrlarni kiritish uchun ishlatilishi kerak bo'lgan foydalanuvchi boshqaruvlari to'plamiga ega shakllar tilining bir qismi sifatida ko'rinishi edi.

    Ikkinchi versiya chiqarilgandan so'ng darhol HTMLning keyingi avlodi ustida ish boshlandi. 1997 yilda HTML 3.2 tavsiyasi chiqarildi, u belgilash tilini jadvallar, ramkalar, rasmlar va boshqa muhim teglar bilan to'ldirdi. Ammo 3-versiyaning eng muhim yutug'i shundaki, uning mualliflari yana brauzerda belgilashni vizualizatsiya qilish muammosiga qaytib, HTML faqat hujjat tuzilishini belgilashi va elementlarni ko'rsatish uchun grafik uslublar parametrlarini bevosita o'z ichiga olmaydi. brauzer. Ularning HTML 3.2 ustida olib borgan ishlarining natijasi mustaqil CSS tilining (Cascading Style Sheets) - kaskadli uslublar jadvallarining paydo bo'lishi bo'ldi, ularning kodi endi HTML belgilash kodiga ulanishi va shu bilan sahifaning ko'rinishini sozlashi mumkin.

    1997 yilda HTML-ning 4-versiyasi chiqarilishi bilan W3C xodimlari CSS-ning paydo bo'lishi bilan eskirgan va tuzilma belgilarini taqdimot parametrlarini ajratish g'oyasini buzgan keraksiz elementlardan xalos bo'lishdi. Ammo bunday mayda-chuydalar tufayli hech kim yangi versiyani bloklamas edi. HTML 4.0 tavsiyalarining asosiy yutug'i sahifa ob'ekt modelining (Hujjat ob'ekt modeli, DOM) paydo bo'lishi edi, uning elementlari endi brauzerlar tomonidan bajariladigan dasturlash tillari skriptlari orqali boshqarilishi mumkin edi. Bunday dasturlash tilining eng mashhuri JavaScript hisoblanadi. HTML plus DOM plus JavaScript Dynamic HTML yoki oddiygina DHTML ga teng, bu veb-dizayndagi yutuqni qayd etdi. Endi yuklangan Internet-sahifaning elementlari foydalanuvchi harakatlariga javoban tashqi ko'rinishini o'zgartirishi, shuningdek, yangi elementlarni qo'shishi va mavjud elementlarni o'chirishi mumkin. 1999-yil 24-dekabrda gipermatnni belgilash tilining 4-versiyasining oxirgi nashri HTML 4.01 chiqdi.

    HTML5 hali rasmiy W3C tavsiyasi maqomini olmagan, biroq HTML mualliflari hujjat obyekti modelini qoʻllab-quvvatlash va JavaScript-ni talqin qilish talablarini ishlab chiqish ustida ishlashda davom etayotgani allaqachon aniq. HTML5 bir qator yangi teglarni oladigan bo'lsa-da, tavsiyalarning aksariyati hali ham DHTML kontekstida brauzerning xatti-harakatiga taalluqlidir: sudrab olib tashlash funktsiyalari, virtual tuvalda chizish qobiliyati uchun o'rnatilgan yordam bo'ladi. , koʻrish tarixini boshqarish va sahifalar oʻrtasida xabar almashish, ijro kontekstini saqlash va boshqalar. Yangi HTML tavsiyalarining chiqarilishi bilan bir xil JavaScript kodi turli xil brauzerlarda turlicha bajarilganda brauzerlararo mos kelmaslik muammolari asta-sekin yo'qoladi degan umiddamiz. Axir, ob'ekt modeli va JavaScript bilan ishlash uchun talablarni aniqlash tendentsiyasi davom etadi va brauzer ishlab chiquvchilari (agar ular o'zlarining dasturiy mahsulotlaridan foydalanishni xohlasalar) ushbu talablarga rioya qilishlari kerak bo'ladi.

    HTML5 2014 yilda chiqarilishi rejalashtirilgan. Ehtimol, o'sha vaqtga kelib W3C faqat JavaScript dasturlash bilan bog'liq alohida tavsiyalarni ishlab chiqqan bo'lishi mumkin va HTML oxir-oqibat yana faqat hujjat tuzilishi uchun belgilash tiliga aylanadi. Bugungi kunda faqat 2012 yil bo'lishiga qaramay, ko'pchilik allaqachon eng mashhur brauzerlar tomonidan qo'llab-quvvatlanadi. Ilgari veb-dizaynerlar mustaqil ravishda qilishlari kerak bo'lgan ko'p narsa (bir xil sudrab tashlash), HTML5-ning chiqarilishi bilan brauzer darajasida qo'llab-quvvatlanadi va voqealarning rivojlanishi quvonmaydi. Biz faqat tendentsiya davom etishiga umid qilishimiz mumkin.

    Biz HTML nima ekanligini tafsilotlari va tarixiga kirmaymiz, lekin darhol asosiy fikrlarga o'tamiz. HTML har qanday veb-sayt yaratish uchun asosdir! Veb-sayt yaratish mavzusini o'rganayotganda, siz undan boshlashingiz kerak. Bu erda og'ir narsa yo'q. ALBATTA HAMMA bu texnologiyani o'zlashtira oladi!

    Darhol ta'kidlashni istardimki, bu dasturlash tili EMAS, balki belgilash tili.

    Nima uchun HTMLni o'rganish oson?

    Ingliz tilida ravon gapirish uchun ingliz tilidagi barcha so'zlarni bilish shart emas. Shunday qilib, bu erda siz faqat ba'zi asosiy teglarni o'rganishingiz va ular bilan qanday ishlashni o'rganishingiz kerak. Va keyin siz qilishingiz kerak bo'lgan narsa - mashq qilish va mahoratni rivojlantirish.

    Keling, ushbu qiziqarli va ayni paytda oddiy texnologiyani o'rganishni boshlaylik.

    Bir oz nazariya ...

    Har qanday sahifa teglardan iborat. Ya'ni, sahifa aslida biz ko'rgan narsaga o'xshamaydi, balki ko'plab teglardan iborat bo'lib, ularning har biri o'ziga xos rol o'ynaydi.

    Bu g‘ishtdan qurilgan katta devorga o‘xshaydi. Agar undagi barcha g'ishtlar chiroyli tarzda yotqizilgan bo'lsa, unda butun devor chiroyli ko'rinadi. Shuning uchun, sahifa tuzilishini yozishda har bir tegga e'tibor berish kerak, chunki u bizning kelajak sahifamiz uchun "qurilish bloki" dir.

    Lekin HMTL da teg nima?

    Bu qandaydir tarzda sahifaning ko'rinishi va tartibiga ta'sir qiladigan HTML sahifa elementi. Buni so'z bilan tushunish juda qiyin, shuning uchun siz darhol amalda hamma narsani ko'rib chiqishingiz va kodga ko'nikishingiz kerak. Quyidagi rasmga qarang:

    Bu eng oddiy sahifaning tuzilishi. Ammo uchburchak qavs ichidagi bu takrorlangan so'zlar teglardir. Agar siz matn muharriringizni ochsangiz va ushbu kodni yozsangiz va keyin uni HTML formatida saqlasangiz, siz HTML sahifasini olasiz. HTML nima ekanligi hali aniq emasmi? 🙂

    Ushbu strukturadan siz mavjud bo'lishi kerak bo'lgan teglarni ko'rishingiz mumkin. Bu teglar:

    • va yopish
    • va yopish
    • va yopish

    Aniqroq qilish uchun men ularni quyidagi rasmda to'q sariq rangda ajratib ko'rsatdim:

    Biz teglar orasiga yozamiz Va biz sahifamizda ko'rmaymiz. Bu teglar brauzerga kodlash, sahifamizning sarlavhasi, turli uslublar, skriptlar va hokazolar haqida ma'lumot berishi mumkin. Bularning barchasini keyingi darslarda ko'rasiz.

    Va bu erda biz teglar orasiga yozadigan barcha teglar Va, maqsadiga qarab, HTML sahifamizning tuzilishiga ta'sir qiladi.

    Xo'sh, HTML nima ekanligi aniqroq bo'ldimi? 😉 Lekin biz to'xtab qolmaymiz va davom etamiz...

    Ba'zi teglarda yopish tegi bo'lishi mumkin, ba'zilarida esa yo'q. Masalan, teg yopilish belgisi mavjud. Siz allaqachon taxmin qilganingizdek, teglar slash yordamida yopiladi.

    Ochilish va yopish teglarini hurmat qilish juda muhimdir. Hech qanday xato bo'lmasligi uchun. Brauzer xatoni ko'rsatmasligi mumkin, ammo sahifalaringizning tuzilishi noto'g'ri bo'ladi va uslublar bilan keyingi ishlashda katta muammolar paydo bo'ladi (bu erda biz tashqi ko'rinish bilan shug'ullanamiz). Shuning uchun, agar tegda yopish tegi bo'lsa, u to'g'ri joyda bo'lishi kerak.

    Keling, teglarni qanday yopmaslik va uni qanday tartibda bajarish kerakligi haqidagi misolni ko'rib chiqaylik. Ikki tegga misol:

    To'g'ri HTML KOD

    Yuqorida ko'rgan narsangiz bu yopish teglarini yozishning to'g'ri tartibi. Ammo bunday vaziyat bo'lishi mumkin

    HTML KODDA XATO

    Shunday qilib, teglarni yoping qat'iyan man etiladi!

    HTML nima ekanligini tushunish uchun mashq qiling...

    HTML nima ekanligini faqat amaliyot orqali bilib olishingiz mumkin. Buning uchun har qanday matn muharriridan foydalanishingiz mumkin. Hatto bloknot. Lekin men Notepad++ dan foydalanishni tavsiya qilaman, chunki HTML bilan ishlash uchun ko'proq funksiyalar mavjud. Uni Notepad++ yuklab olish havolasidan yuklab olishingiz mumkin. Ushbu muharrir HTML sahifalarni yaratish va tahrirlash uchun barcha imkoniyatlarga ega.

    Keling, boshlaymiz. Dasturni ochganingizdan so'ng siz quyidagi oynani ko'rasiz:

    HTML-sahifani yaratish uchun ushbu maydonga sahifaning "tanasini" kiritishingiz kerak. Siz quyidagi matnni nusxalashingiz va shunchaki joylashtirishingiz mumkin. Lekin hamma narsani qo'lda kiritish yaxshiroqdir. Shunday qilib, siz tezda eslab qolishingiz va teglarga ko'nikishingiz mumkin.

    Shunday qilib, siz quyidagilarni olishingiz kerak:

    Keyinchalik, ushbu sahifani HTML formatida saqlashingiz kerak. Buni amalga oshirish uchun "Fayl" menyusini bosing, so'ng "Boshqa saqlash ..." tugmasini bosing. HTML sahifa nomini kiriting. Men uni index.html deb nomladim. Keyin biz uni shunchaki kompyuterimizdagi qulay joyga saqlaymiz. Shundan so'ng, HTML teglari ajratib ko'rsatiladi, chunki Notepad++ muharriri bu HTML hujjati ekanligini tushunadi. Va orqa yorug'lik bilan ishlash ancha yoqimli.

    HTML nima ekanligini va nima uchun kerakligini tushunish uchun brauzerda istalgan sahifani ochamiz va uning manba kodini ko'rib chiqamiz.

    Misol uchun, men Yandex qidiruvi sahifasini ochaman.

    Sahifada ko'rgan barcha grafikalar va matnlar HTML kod yordamida yaratilgan.

    HTML- bu veb-sahifa va unda qo'llaniladigan qo'shimcha texnologiyalar o'rtasidagi bog'liqlik.

    Aslini olganda, yuqoridagi rasmda ko'rayotgan barcha HTML buyruqlar har qanday matn muharririda yozilishi mumkin bo'lgan oddiy matndir. Matn faylining kengaytmasini *.html ga o'zgartirib (buni qanday qilish haqida keyinroq gaplashamiz), biz brauzer qayta ishlay oladigan to'liq veb-sahifaga ega bo'lamiz.

    Endi ta'rifning o'ziga qaraylik va u nimani anglatishini ko'rib chiqaylik.

    HTML HyperText Markup Language yoki rus tiliga “Hypertext Markup Language” deb tarjima qilingan qisqartma hisoblanadi.

    Bularning barchasi nimani anglatishini tushunish uchun keling, ushbu qisqartmadagi har bir so'zni alohida ko'rib chiqaylik.

    Til.

    HTML, birinchi navbatda, til uning yordamida brauzerga veb-sahifada qanday elementlar borligi va ular qanday ma'noga ega ekanligi haqida ma'lumot berishingiz mumkin.

    Har qanday til kabi HTMLda ham so‘zlar (buyruqlar) va bu so‘zlarni yozish qoidalari (til sintaksisi) mavjud.

    Belgilash.

    E'tibor bering, HTMLning asosiy vazifasi brauzerni veb-sahifadagi elementlarning ma'nosi haqida xabardor qilishdir.

    HTML kodi veb-sahifani alohida elementlarga "parchalash" va brauzerga qaysi element nima ekanligini aytish imkonini beradi.

    Masalan, ushbu ro'yxatga olish shakli:

    Brauzerga u paragraf bilan ishlayotganini aytadi.

    Va bu ro'yxatga olish shakli:

    Sarlavha

    Elementning sarlavha ekanligini bildiradi.

    Bundan kelib chiqadiki, HTML hujjatning ko'rinishi va dizayni uchun javobgar emas.

    Buni ko'rish uchun misol sifatida bitta veb-sahifani olaylik va undagi dizayn uchun mas'ul bo'lgan uslublarni o'chirib qo'yamiz va uning qanday o'zgarishini ko'ramiz.

    Dizayn uslublari bilan sahifa:

    Xuddi shu sahifa, lekin uslublar o'chirilgan (faqat bitta HTML kod ishlatiladi):

    Bundan tashqari, HTML dasturlash tili emas va sahifada mantiqiy va dasturlash operatsiyalarini bajarish va ma'lumotlarni qayta ishlash uchun javobgar emas. Brauzeringizda mijozning veb-dasturlash tilini qo'llab-quvvatlashni o'chirib qo'ysangiz, buni osongina tekshirishingiz mumkin.

    Ko'pincha yangi boshlanuvchilar ushbu qoidani unutib qo'yishadi va HTML-dan foydalanib, elementni u yoki bu tarzda ko'rsatishga majburlash yoki HTML-dan foydalanib sahifada ba'zi amallarni bajarishga majbur qilish uchun harakat qilishadi, lekin bu to'g'ri emas. Elementdagi har bir harakat o'z texnologiyalariga ega.

    Gipermatn.

    Va nihoyat, HTML tilining ta'rifidagi oxirgi so'z giperhavoladir. Veb-sahifalarda ushbu sahifalarni maxsus qiladigan va ularni oddiy rasmli matndan ajratib turadigan element mavjud. Ushbu element havolalardir.

    "Hiper" prefiksi havolani bosganingizda Internetdagi boshqa resurs (sahifa) ochilishi mumkinligini anglatadi, u boshqa serverda joylashgan bo'lishi mumkin.

    HTML - bu giperhavolalarni o'z ichiga olgan sahifalarni yaratish uchun maxsus ishlab chiqilgan til.

    Xulosa qilib aytadigan bo'lsak, HTML - bu brauzerga veb-sahifa qaysi qismlardan iboratligini va bu elementlar qanday ma'noga ega ekanligini tushunish uchun yaratilgan til.

    Hozircha hammasi nazariya bilan. Keling, keyingi amaliy bosqichga o'tamiz. Endi bizning vazifamiz HTML bilan ishlash uchun foydalanadigan dasturlarni tayyorlashdir.