HyperText Markup Language (HTML) ancha eski.

Bizning hayotimizni World Wide Websiz tasavvur qilib bo'lmaydi. HTML vebning burchak toshlaridan biridir.

HTML nisbatan sodda tildir. U tarkibni tuzish va veb-brauzerlarga hujjatlarni ko'rsatishga ko'rsatma berish uchun foydalaniladigan elementlar (teglar) to'plamidan iborat.

Dastlab HTML uslublar uchun juda ko'p ishlatilgan. Styling uchun ishora sifatida ishlaydigan teglarning mashhur misollari:

  • ‹shrift›
  • ‹katta›
  • ‹markaz›
  • ‹marquee› (Internetning paydo bo'lishida veb-sayt marqueesiz veb-sayt emas edi)

‹font› tegini hali ham 6,5 million veb-saytlarda topish mumkin bo'lsa-da, tashqi ko'rinish va his qilish uchun HTMLdan foydalanish tavsiya etilmaydi. Kaskadli uslublar jadvallari (CSS) HTML elementlarini uslublash tilidir. CSS allaqachon 1990-yillarning oxiridan beri mavjud.

HTMLning eng muhim vazifasi hujjatlarningsemantik tuzilishinitariflashdir.

Boshi

Tim Berners-Li va Robert Kayliau 1980-yillarda Yevropa yadroviy tadqiqotlar tashkilotida (CERN) ishlagan. Ular www oldingi gipermatn tizimini ishlab chiqdilar. Ushbu tizimning maqsadi tadqiqotchilar o'rtasida ma'lumot almashish va yangilashni osonlashtirish edi. 1960-yillarda Internet AQSh armiyasi tomonidan ishlab chiqilgan.

Bu ikki texnologiyani: internet va gipermatnni birlashtirishdahog‘oya bo‘ldi.

Men shunchaki gipermatn g'oyasini olishim va uni TCP va DNS g'oyalariga ulashim kerak edi va - ta-da! - World Wide Web. (Tim Berners-Li)

1980-yillarda Berners-Li va Cailliau birinchi veb-brauzerni, HTTP protokolini va birinchi veb-serverni (NeXTcube-da) ishlab chiqdilar. 1991 yilda birinchi veb-sayt ishga tushirildi: http://info.cern.ch/hypertext/WWW/TheProject.html

WWW ixtirosini kitob chop etish ixtirosi bilan solishtirish mumkin, deb bahslashish mumkin. Dunyo aholisining yarmi internetda. Bu bizning hayotimizga juda katta ta'sir ko'rsatadi - ham ijobiy, ham salbiy.

1991: Tim Berners-Li HTMLning birinchi norasmiy versiyasini nashr etdi

1993 yil: HTML 1.0 nashr etildi

HTML tarixidagi ushbu dastlabki bosqichni veb-brauzerlar orqali ma'lumotni bazal almashish sifatida tavsiflash mumkin. O'sha paytda HTML 18 tegdan iborat edi. Taqqoslash uchun, u hozirda 140+ tegga ega. Veb-ishlab chiquvchilar ko'p emas edi.

Ushbu HTML ning birinchi versiyasining (v1.2) mashhur teglari:

  • sarlavha ‹h1›, ‹h2›, … sahifa boʻlimlarining yuqori qismiga sarlavhalar va sarlavhalar qoʻshish orqali tarkibni tartibga solish uchun
  • paragraf ‹p› matnning paragraflarini aniqlash uchun
  • langar ‹a› boshqa veb-kontentga havola qilish uchun
  • list ‹ul›, ‹ol› elementlarni roʻyxatga kiritish uchun
  • tasvirni veb-sahifaga joylashtirish uchun ‹img›

1990-yillar

1995 yil: HTML 2.0 nashr etildi

Ushbu versiyada bir nechta qo'shimcha funktsiyalar mavjud.

1997 yil: HTML 3.2 nashr etildi

Ushbu versiyada ko'plab yaxshilanishlar mavjud. HTML3 quyidagi yangi xususiyatlarni o'z ichiga oladi:

  • jadval (o'lchamini o'zgartirish mumkin)
  • shakl
  • applet (shu paytgacha statik veb-kontentga yanada dinamik tajriba beradigan kichik Java dasturlari)
  • tasvir atrofida matn oqimi
  • tasvir foni
  • pastki (super) skript

Ushbu katta yaxshilanish ortidagi harakatlantiruvchi kuch Deyv Raggett edi. Uning fikricha, veb-sahifalar darslik sahifalari (zerikarli) o'rniga ko'proq (porloq) jurnal qog'ozlariga o'xshash bo'lishi kerak. Raggett veb-texnologiyalarni rivojlantirishda muhim rol o'ynadi. HTMLdan tashqari, u HTTP, XHTML, VRML va narsalar ustida ishlagan. 1993–1998 yillarda u Arena veb-brauzerida ishlagan. Bu shaxsiy loyiha edi. Hozirgi vaqtda tushunish qiyin, bu davrda yirik kompyuter korporatsiyalari WWWga ishonmagan.

HTML3 va Arena veb-brauzerlari juda innovatsion bo'lsa-da, ulardan foydalanish bo'yicha muvaffaqiyat qozona olmadi. Arena xususiy loyiha edi. HTML3-ning yaxshilanishi brauzer sotuvchilari tomonidan tezda amalga oshirilishi uchun juda keng edi. Ushbu kuzatish keyingi yillarda HTML ning rivojlanishiga yanada modulli yondashuvga olib keldi.

2000-yillar

1999 yil: HTML 4.01 nashr etildi

HTML 4.01 juda muvaffaqiyatli bo'ldi va 2000-yillarda eng ko'p foydalanilgan versiya. 2000 yilda XHTML nashr etildi. XHTML - qat'iy qoidalarga ega HTML.

HTML 4.01 da muhim yangi elementlar kiritildi:

  • ‹jadval› ma'lumotlarni satr va ustunlarga ajratish uchun (allaqachon HTML3 dami?)
  • ‹style› CSS qo'shish va HTML elementlarining uslublarini aniqlash
  • JavaScript-ni qo'shish va (statik) veb-sahifalarni yanada interaktiv qilish uchun ‹script›

CSS-ni joriy qilish orqali hujjatning semantik tuzilishini aniqlash va ushbu elementlarni foydalanuvchiga taqdim etish va vizualizatsiya qilish usullari o'rtasida ajratish mumkin.

Internetning dasturlash tili bo'lgan JavaScript-ning kiritilishi foydalanuvchi tajribasini yaxshilash uchun deyarli cheksiz imkoniyatlarni berdi.

2010-yillar

2008: HTML5 loyihasi veb-gipermatnli ilovalar texnologiyasi ishchi guruhi (WHATWG)

2014: World Wide Web Consortium (W3C) tomonidan rasmiy standart

HTML5 juda mashhur HTML 4.01 versiyasining kengaytmasi hisoblanadi. HTML5 shiori: keling, narsalarni yaxshilaymiz! Uch jihatni ajratib ko'rsatish mumkin:

  • Ko'proq dinamik va ko'p qirrali xususiyatlarni yarating. Bu skriptni belgilash bilan almashtirish uchun hozirgi kungacha harakatni o'z ichiga oladi
  • Turli xil qurilmalarda o'xshash foydalanuvchi tajribasini ta'minlash. Bu mobil qurilmalarning ko'tarilishi bilan juda rag'batlantirildi.
  • Foydalanuvchi uchun qulayroq va xatosiz

Yaxshi ma'lum bo'lgan misol - kirish turi ‹kiritish turi = "raqam"›:

Raqamni kiritish foydalanuvchi uchun qulay. Masalan, raqamli bo'lmagan qiymatni kiritish mumkin emas. Turli xil qurilmalarda u xuddi shunday harakat qiladi. Raqamlarni kiritish funksiyalarini oʻzingiz amalga oshirish uchun endi JavaScript kodini yozishingiz shart emas. Bu JavaScript va uslublarni qamrab oluvchi veb-komponentdir.

HTML5 ko'proq narsani taklif qiladi.

  1. Audio va video
  • endi plaginlar kerak emas
  • ijro etish xususiyatlari
  • foydalanish imkoniyati

Quyidagi minimalistik kod parchasida ‹video› va ‹canvas› elementlari qurilma kamerasiga ulanish va oniy tasvirni chizish uchun ishlatiladi:

<video id="my-video" autoplay></video>

<button onclick="getCurrentFrame()">Take Snapshot</button>

<canvas id="my-canvas" width="640" height="480"></canvas>

<script>
    const video = document.getElementById('my-video');
    const canvasContext = document.getElementById('my-canvas').getContext('2d');

    if (!navigator.getUserMedia) {
        console.log("getUserMedia not supported by your browser");
    }

    navigator.getUserMedia(
        {
            video: true,
            audio: false
        },
        (stream) => video.srcObject = stream,
        (error) => console.log(error)
    );

    function getCurrentFrame() {
        canvasContext.drawImage(video, 0, 0)
    }
</script>

2. Ko'pgina yangi semantik teglar

Misollar:

  • ‹sarlavha›
  • ‹footer›
  • ‹nav›
  • ‹ chetga ›

Semantik teglar sahifalarga ma'no va tuzilish beradi. Bu quyidagilar uchun muhim:

  • ekran o'quvchilari, brauzerlar va plaginlar
  • qidiruv tizimlari va qidiruv tizimini optimallashtirish (SEO)
  • uslublar (CSS)

CSS imkon qadar ‹div› elementlarning sinf va id atributlariga emas, balki mazmunli HTML elementlariga asoslanishi kerak. HTML5 ning yangi semantik teglari divitit:ni oldini olishga yordam beradi

(veb-dizayn,odatda kamsituvchi) Ma'noli semantik HTML elementlari o'rniga ko'plab div elementlari bilan veb-sahifa kodini yaratish amaliyoti. (Vikipediya)

3. Ish unumdorligini oshirish

Ishlashni yaxshilashga misollar:

  • JavaScript-ni asinxron yuklash: ‹script async›
  • videoni oldindan yuklash: ‹videoni oldindan yuklash›

4. Oflayn yordam

Oflayn qo'llab-quvvatlash xususiyatlari quyidagilardir: AppCache, xizmat ko'rsatish xodimlari va mahalliy xotira.

2010-yillarda WHATWG va W3C o'rtasida HTML versiyasi haqida munozaralar bo'lib o'tdi. W3C muhim bosqichga yondashuvni xohladi. WHATWG jonli hujjat yondashuvni talab qildi. Ikkinchisining afzalligi shundaki, brauzer sotuvchilari iterativ yangilanishlarga osonroq moslasha oladilar (HTML3 ni amalga oshirishdagi qiyinchiliklarga qarang). Kamchiliklari shundaki, qo'llab-quvvatlashni kuchaytirish qiyinroq va bir vaqtning o'zida qaysi xususiyatlar mavjud bo'lganligini aniqlash qiyin bo'lishi mumkin.

2019 yildan beri WHATWG HTML va DOM standartining vakolati hisoblanadi. HTML spetsifikatsiyasi tirik hujjatdir. Qarang: “https://whatwg.org/”

HTML6

Hozirda odamlar HTML6 haqida gapirishadi. HTML iterativ yangilanishlar orqali rivojlanayotganini hisobga olsak, 6-versiya haqida gapirish muammoli. Yangi funksiyalar qisman qabul qilingan mavjud yo‘lning davomi, masalan, mahalliy komponentlar va semantik teglarning kengayishi, qisman yangi g‘oyalar, ekspress teglar va nomlar bo'shliqlari kabi. html6test.com sayti brauzeringiz HTML6-ni qanchalik qo'llab-quvvatlashini o'lchaydi. Bu HTML6 deb hisoblangan xususiyatlar to'plami mavjudligini ko'rsatadi.

Keling, ushbu yangi xususiyatlarni ko'rib chiqaylik.

Yana semantik teglar

HTML spetsifikatsiyasiga yana ko'proq semantik teglar qo'shiladi. Shunga qaramay, bu teglar hech qanday xatti-harakatlarga ega emas va ularning yagona maqsadi hujjatga ma'no berishdir. Ushbu teglar CSS va tashqi dasturiy ta'minot (parserlar) uchun ilgaklar sifatida ishlatilishi mumkin. Ba'zi misollar:

Menyu

<menu type="toolbar">
  <li><button>Apples</button></li>
  <li><button>Pears</button></li>
  <li><button>Oranges</button></li>
</menu>

Ta'riflar ro'yxati

<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>

  <dt>Chrome</dt>
  <dd>Another web browser</dd>
</dl>

Rasm

<figure>
  <figcaption>Johan Cruijff</figcaption>
  <blockquote>
    Als ik zou willen dat je het begreep, zou ik het beter hebben uitgelegd.
  </blockquote>
</figure>

<figure>
  <img src="favicon.ico">
  <figcaption>Star</figcaption>
</figure>

<figure>
  <pre>
      ___________________________
    < I'm an expert in my field. >
      ___________________________
          \   ^__^
           \  (oo)\_______
              (__)\       )\/\
                  ||----w |
                  ||     ||
  </pre>
</figure>

Kod

<p>The <code>push()</code> method adds one or more elements to
  the end of an array and returns the new length of the array.</p>

Ta'rif

<p>A <dfn id="def-validator">validator</dfn> is a program that
  checks for syntax errors in code or documents.</p>

Vaqt

<p>The concert starts at <time datetime="2018-07-07T20:00:00">20:00</time>.</p>

Bu element mashinada o'qiladigan formatdagi vaqt tamg'asini ifodalaydi.

Ma'lumotlarga ma'no berish uchun katta teglar to'plamiga ega bo'lish muhimdir. Shu nuqtai nazardan, mikroformatlar va ekspress teglarga qarash qiziq.

Mikroformatlar hujjatlarga belgi qo'shish usulidir. Bu dasturiy ta'minotga (tahlil qiluvchilarga) ma'lumotni ajratib olish va uni indekslash, qidirish yoki boshqa usulda qayta ishlash imkonini beradi. Semantik teglar singari, mikroformatlar ham hujjatlarga meta-ma'lumot qo'shadi. “https://microformats.org/”ga qarang

Yangi HTML funksiyasi haqida izohlarni internetda topish mumkin: ekspress teglar. G'oya shundaki, muallif o'z teglarini yaratishi mumkin. Bu ‹div› lardan foydalanishni kamaytiradi va shuning uchun semantik tuzilmani qo'shadi. Bunday DIY teglariga misollar bo'lishi mumkin:

  • ‹div id=”logo” o‘rniga ‹logo›
  • ‹div id=”asboblar paneli” o‘rniga ‹asboblar paneli
  • ‹div id=”konteyner”› o‘rniga ‹konteyner›

Bu XML kabi nom maydonlarini nazarda tutadi:

  • ‹html:title›
  • ‹html:a›
  • ‹html:body›
  • va boshqalar

Ko'proq mahalliy komponentlar

2010-yillarda HTML5 bilan boshlangan narsalarni yaxshilash kontekstida yanada yangi boy komponentlar yaratildi. Ushbu HTML elementlari JavaScript va CSS kodlarini (DOM soyasiga) tortdi, aks holda ishlab chiquvchilar o'zlari yozishlari kerak bo'ladi. Keling, ba'zi misollarni ko'rib chiqaylik. Ushbu kod parchalari iloji boricha minimalist. Ushbu elementlarning qutidan tashqarida taqdim etadigan funksiyalarini ko'rish hayratlanarli!

Tafsilotlar

<details id="foo">
  <summary>Presenting with IntelliJ IDEA</summary>
  To enable mouse zoom, you need to turn it on explicitly.
  Go to Preferences > Editor > General and select Change font size with
  Command+Mouse Wheel (on Mac)
</details>

<button onclick="toggleDetails()">Toggle</button>

<script>
  function toggleDetails() {
    const el = document.getElementById('foo');
    el.open = !el.open;
  }
</script>

Ma'lumotlar ro'yxati (avtomatik to'ldirish)

<input list="browsers">

<datalist id="browsers">
  <option value="Chrome">
  <option value="Edge">
  <option value="Firefox">
  <option value="Safari">
</datalist>

Sana va vaqt tanlagichiga ulangan maʼlumotlar roʻyxati:

<input type="date" list="dates">

<datalist id="dates">
  <option value="2023-06-01">
  <option value="2023-06-02">
  <option value="2023-06-03">
</datalist>

<input type="time" list="hours">

<datalist id="hours">
  <option value="12:00">
  <option value="13:00">
  <option value="14:00">
  <option value="15:00">
</datalist>

Ma'lumotlar ro'yxati diapazon slayderiga ulangan:

<input type="range" list="percentages" min="0" max="100">

<datalist id="percentages">
  <option value="0"></option>
  <option value="25"></option>
  <option value="50"></option>
  <option value="75"></option>
  <option value="100"></option>
</datalist>

Rang tanlagichga ulangan maʼlumotlar roʻyxati:

<input type="color" list="redColors">

<datalist id="redColors">
  <option value="#800000"></option>
  <option value="#8B0000"></option>
  <option value="#A52A2A"></option>
  <option value="#DC143C"></option>
</datalist>

Dialog

<dialog id="foo">
  <p>Is this a HTML-powered dialog box?</p>
  <form method="dialog">
    <input type="submit" value="Yes">
    <input type="submit" value="No">
  </form>
</dialog>

<button onclick="openDialog()">Open dialog</button>

<button onclick="showDialogValue()">Show value</button>

<script>
  openDialog = () => document.getElementById('foo').open = true;

  showDialogValue = () => window.alert(`Dialog value: ${document.getElementById('foo').returnValue}`)
</script>

Metr

<meter
  id="fuel"
  min="0" max="100"
  low="33" high="66" optimum="80"
  value="100"
>
</meter>

<script>
  const el = document.getElementById('fuel');
  const intervalId = setInterval(() => {
    el.value -= 1;
    if (el.value === 100) {
      clearInterval(intervalId);
    }
  }, 100);
</script>

Taraqqiyot paneli

<progress id="foo" value="0" max="100"></progress>

<script>
  const el = document.getElementById('foo');
  const intervalId = setInterval(() => {
    el.value += 1;
    if (el.value === 100) {
      clearInterval(intervalId);
    }
  }, 100);
</script>

Mish-mishlar

Semantik teglar va mahalliy komponentlar bo'yicha davom etgan ishlardan tashqari, ko'proq yaxshilanishlar mavjud. Masalan: ‹picture› yorlig‘i, uning tasvirlarni ko‘rsatish ustidan nozik nazorati, ‹output› tegi va yangi “yashirin” atributi. Bundan tashqari, Internetdagi ba'zi bloglarda maqomi men uchun noaniq bo'lgan yangi xususiyatlar tasvirlangan:

  • Uyiladigan tillar. Masalan, ‹script type=”matn/python”›. Nima uchun JavaScript o'rniga Python-dan foydalanish kerak?
  • Kafolatlangan kutubxonalar. Veb-brauzerlar tomonidan taqdim etilgan kutubxonalar.
  • Qattiqlashtirilgan autentifikatsiya.
  • Kamerani birlashtirish. HTMLda hali hech qanday mahalliy ‹kamera› komponenti mavjud emas. ‹input› elementidan JavaScript-ni ishlatmasdan foydalanish haqidagi qiziqarli maqola “https://jakub-kozak.medium.com/how-to-open-the-native-camera-in-mobile-browsers-327820fa669a”.

Xulosa

Zamonaviy hayot ko'p jihatdan Internetga kirishga bog'liq. HTML vebning texnik asosiga tegishli. Bu qadimgi til, lekin juda muhim va juda jonli. U millionlab mualliflar tomonidan qo'llaniladi va doimo rivojlanib boradi va takomillashtiriladi.