HTML5 ja ülevaade uutest veebiprogrammeerimisvõimalustest. Mis on HTML5-s uut? Pildi atribuut srcset

Tõlge: Vlad Merževitš

Võite küsida: "Kuidas ma saan HTML5-d kasutada, kui vanemad brauserid seda ei toeta?" Tegelikult on see küsimus vale. HTML5 ei ole üks suur asi, see on erinevate funktsioonide kogum. Te ei saa kirjutada "HTML5 toetatud", kuna see on vastuoluline, kuid saate määrata toe mõnele HTML 5 tehnoloogiale, nagu joonistamine, video ja geolokatsioon.

Võite mõelda HTML-ile kui siltidele ja nurksulgudele. See on muidugi oluline osa, kuid mitte kogu asi. HTML5 spetsifikatsioon määrab ka selle, kuidas need nurksulgud suhtlevad JavaScriptiga dokumendiobjekti mudeli (DOM) kaudu. HTML5 ei määratle ainult märgendit, vaid ütleb DOM-ile ka kõigi videoobjektide kohta. Rakenduse programmeerimisliidest (API) saate kasutada erinevate videovormingute toetamiseks, video esitamiseks, selle peatamiseks, heli vaigistamiseks, failide allalaadimiste jälgimiseks ja paljuks muuks, mis põhineb kasutaja ja sildi vahelisel suhtlusel.

Kas teile meeldib või mitte, ei saa te eitada, et HTML4 on kõige edukam märgistusvorming. HTML5 tugineb sellele õnnele, nii et te ei pea olemasolevat märgistust minema viskama ja uuesti õppima. Kui teie veebirakendus töötab täna HTML4-s, töötab see ka HTML5-s.

Siin on konkreetne näide: HTML5 toetab kõiki vormielemente, mida HTML4, ja sisaldab ka uusi elemente. Mõned neist, nagu liugurid ja kuupäevavalik, on olnud juba pikka aega ilmsed, teised pole nii ilmsed. Näiteks e-posti aadressi sisestamise väli on tavaline tekstiväli, kuid selle välja jaoks mõeldud kaasaegsed brauserid muudavad aadressi sisestamise lihtsamaks. Vanemad brauserid ei toeta input type="email" , mistõttu kuvatakse tavalist tekstivälja ja vormid töötavad sellega ilma täiendavate nippideta. See võimaldab teil täna oma vorme täiustada, isegi kui mõned kasutajad on endiselt IE6-ga ummikus.

HTML5-le „uuendamist” saab teha lihtsalt dokumenditüübi muutmisega. Element tuleks alati paigutada mis tahes veebilehe koodi esimesele reale. HTML-i eelmine versioon määratles mitu doctype-suvandit ja õige valimine polnud lihtne. HTML5-s on ainult üks doktüüp:

Dokutüübi muutmine ei hävita olemasolevat paigutust, sest kõiki HTML4-s määratletud silte toetab ka HTML5. Lisaks saate õigesti kasutada uusi semantilisi elemente, nagu , , ja .

Ükskõik, kas soovite joonistada pilte, esitada videoid, täiustada vormide funktsionaalsust või luua võrguühenduseta veebirakendust, leiate, et brauserid toetavad hästi HTML5. Firefoxi, Safari, Chrome'i ja mobiilibrauserid töötavad sildi, video, geograafilise asukoha, kohaliku salvestusruumi jms abil. Google mõistab mikroandmete annotatsiooni. Isegi Microsoft, mis tavaliselt jääb standarditest maha, toetab oma Internet Explorer 9 brauseris HTML5 põhifunktsioone.

Kõik selle raamatu jaotised sisaldavad populaarsete brauserite ühilduvustabelit. Veelgi olulisem on see, et kaasatakse vanemate brauserite toetamise võimaluste arutelu. HTML5 tehnoloogiaid, nagu geolokatsioon ja video, rakendati selliste pistikprogrammide abil nagu Gears või Flash. Muid funktsioone, näiteks joonistamist, saab emuleerida JavaScripti kaudu. See raamat näitab, kuidas kasutada kaasaegsete brauserite sisseehitatud funktsioone ilma vanemaid versioone ära viskamata.

Tim Berners-Lee leiutas ülemaailmse veebi üheksakümnendate alguses. Hiljem asutas ta veebistandardite säilitamiseks W3C – organisatsiooni, millel on rohkem kui viisteist aastat ajalugu. W3C teatas veebistandardite tuleviku kohta 2009. aasta juulis järgmiselt:

Juhtkond teatas täna, et kui XHTML 2 töörühma põhikiri 2009. aasta lõpus lõpeb, siis seda ei uuendata. Selle eesmärk on suurendada HTML-i töörühma ressursse. W3C loodab, et see kiirendab HTML5 edenemist ja selgitab W3C seisukohta HTML-i tuleviku suhtes.

HTML5 on siin. Sukeldume sellesse.

HTML5 spetsifikatsioon toob endaga kaasa palju erineva tasemega ja erineva tähtsusega muudatusi. Põhimõtteliselt saab peamised muudatused jagada 7 plokki:

a) Semantika (keeleüksuste semantiline tähendus)

HTML5 tutvustab mitmeid uusi semantilisi silte, mis võimaldavad sisukamalt korraldada veebilehtede sisemist struktuuri. See hõlmab nii plokkmärgendeid (nt päis, jalus, artikkel) kui ka tekstimärgistusmärgendeid (nt mark, ruby, üksikasjad). Mitmed olemasolevad HTML4 sildid on kuulutatud aegunuks, üksikud sildid on muutnud oma tähendust ja atribuudid on läbinud teatud muudatused.

b) Multimeedia

HTML5 lisab multimeediumisisu (heli ja video) loomuliku toe otse HMTL-i märgistusele – koos sellega seotud API-ga haldamiseks.

c) Graafika

Kliendipoolne graafikaga töötamine on muutunud märgatavalt lihtsamaks. HTML5-sse on lisatud lõuendi element ja spetsiaalne JavaScripti API sellega töötamiseks. Lõuend on dünaamiline "pind", millele saate programmiliselt joonistada. HTML5 sisaldab ametlikult ka svg tagi, mis võimaldab realiseerida vastava veebistandardi SVG (Scalable Vector Graphics) poolt kirjeldatud vektorgraafikat.

d) Veebivormid

Uued veebivormi elemendid: tüübid ja atribuudid, mis võimaldavad teil laiendada traditsiooniliste vormide võimalusi sisseehitatud tööriistadega ilma täiendavaid teeke kasutamata - alates vihjetest sisestusväljal (kohahoidja) ja sisestatud väärtuste valideerimisest kuni spetsiaalsete elementideni kuupäevade ja värvide sisestamine.

e) JavaScripti API-d.

HTML5 sisaldab uusi võimalusi objektide teisaldamiseks (Drag & Drop), üleminekute ajalooga töötamiseks (History API), aga ka mitmeid pisiasju, näiteks võimalust muuta sisu redigeeritavaks sisu redigeeritavate atribuutide abil otse praeguses asukohas. .

f) Uus DOCTYPE

Märgend DOCTYPE on standarditele väidetavalt vastavate veebilehtede põhikomponent: ilma selleta ei lähe kood validaatorist läbi. DOCTYPE on oluline ka lehe kuvamiseks ja korrektseks toimimiseks standarditele vastavates brauserites.

HTML 4-s oli kolme tüüpi elemente:

• 1. Range
• 2. Üleminek
• 3. Raamidega (Frameset)

Tihti oli ühe või teise DOCTYPE elemendi valimine üsna keeruline. HTML5 DOCTYPE-is on ainult üks, see on kirjutatud järgmiselt:

See lühike kirje asendab vanema, pikema vormi:

g) Süntaks

HTML 5-l on kaks süntaksit – "kohandatud" HTML ja XML. HTML-i süntaks määratleb üksikasjalikud sõelumisreeglid (sh "tõrkekäsitlus").

XML-i süntaks ühildub XHTML1 dokumentide ja selle rakendustega. Selle süntaksi kasutamiseks tuleb XML-i tüübina deklareerida tüüp MIME (Multipurpose Internet Mail Extensions) ja elemendid tuleb konstrueerida vastavalt XML-i spetsifikatsioonile.

Joonis 2 – HTML5 põhiomadused

HTML5 – uus põlvkond. HTML 4.01 soovituse avaldamisest (1999) on möödas üle 10 aasta ja seetõttu on oodata palju muudatusi ja täiendusi. HTML5 spetsifikatsioon on praegu veel väljatöötamisel. World Wide Web Consortium ei tööta välja standardeid, vaid annab ainult soovitusi. Kõik algab tööaruteludest, seejärel algatatakse töökavand, seejärel vabastatakse soovituse kandidaat ja alles siis saab täpsustus lõpuks soovitusliku staatuse. Praegu on HTML5-ga töötamine alles mustandi staadiumis. Vaatamata sellele toetab enamik populaarsemaid Interneti-brausereid juba osaliselt HTML5 uuendusi. Enne nendest lühiülevaate tegemist kordan üle, et mitte kõik brauserid ei rakenda seda funktsiooni ja mitte veel täielikult. Täna võime loota, et Opera, Chrome, Firefox, Safari ja Internet Explorer toetavad HTML5 erineval määral.

Ja seal on tõesti palju uut. Nüüd on veebiarendajatel mitmeid lisafunktsioone, nagu geomeetriliste kujundite joonistamine veebilõuendile, sisseehitatud pukseerimisvõimalus ning video- ja helifailide esitamine (varem sai seda teha ainult pistikprogrammide, näiteks Adobe Flash Playerina) ja palju muud, millest tuleb juttu veidi hiljem. Alustuseks ütlen paar sõna HTML-i arengu üldistest suundumustest.

See osa HTML5 spetsifikatsioonist, mis uute siltide näol silma jääb, on vaid jäämäe tipp. Enamik HTML5 täiustatud funktsioone on saadaval ainult skriptimise programmeerimiskeele abil, mis on kliendipoolse veebiprogrammeerimise aluseks. Kui võtta sama joonistusfunktsioon, mis on realiseeritud sildi abil, siis me ei räägi geomeetriliste kujundite siltide abil "joonistamise märgistusest", nagu võiks eeldada. Lõuendi paigutus lõpeb lõuendi elemendi asetamisega lehele ja kõik. Joonis ise on JavaScripti funktsioon, mis pärast lõuendile juurdepääsu tõmbab sellele kujundeid samamoodi nagu tavalised Windowsi rakendused kuvavad graafikat akendele GDI (Graphics Device Interface) liidese kaudu. Seega seab HTML5 spetsifikatsioon Interneti-brauseritele JavaScriptiga töö rakendamisel üsna tõsiseid nõudeid, mis reguleerivad suures osas programmiliidest () dokumendiobjekti mudeliga (DOM) töötamiseks. See on hea uudis, kuna paljud teavad, et erinevad brauserid saavad objektimudeliga tööd korraldada üksteisest erinevate programmiliideste kaudu. Osaliselt on tarkvaraliidese spetsifikatsioon organisatsiooni teene Veebi hüperteksti rakendustehnoloogia töörühm (WHATWG), mis teeb jõupingutusi mitte ainult märgistuskeele, vaid ka skriptikeeltes (nt JavaScripti) kirjutatud rakendustes kasutatavate API-de standardimiseks. WHATWG osaleb ka W3C arenduses.

Samuti võime järeldada, et HTML5 autorid püüdsid mõnede populaarsete ja nõutud veebiprogrammeerimisülesannete teostamise üle anda Interneti-brauserite endi vastutusele. Näiteks HTML5 abil saab üsna lihtsalt ellu viia veebipoodide kasutajaliidestes nii populaarseks saanud elementide lohistamise funktsionaalsust (toodete ostukorvi valimine). Varem tuli selleks kirjutada JavaScriptis skript, kasutades erinevaid tugiteeke, näiteks . Nüüd on palju lihtsam rakendada pukseerimist, määratledes mitmed täiendavad atribuudid ja lisades vajalike siltide jaoks mõned sündmusekäitlejad. “Drag&drop” korraldamine jQuery abil pole samuti eriti keeruline, kuid HTML5 puhul on meil tegu ühe soovitusega kõikidele Interneti-tarkvara klientidele ning see on hoopis teistsugune tugi ja brauseriülese ühilduvuse garantii. Selgub, et HTML5 soovitusi toetavad brauserid võimaldavad nüüd seansi seadeid salvestada ja taastada veebiseansi enda kontekstis. Näiteks lehe uuesti laadimisel ei lähe sellele varem sisestatud info kaotsi, vaid see taastatakse praeguse seansi keskkonnast. See on juba serveripoolse veebiprogrammeerimise "territooriumile sisenemine", kuna varem ei saanud seda teha ainult HTML-i ja JavaScripti abil.

Noh, nüüd nimekiri HTML5 kõige tähelepanuväärsematest uuendustest:

Nagu juba mainitud, on uue elemendi kasutamisega seotud soovituste põhiosa on spetsifikatsioon tarkvaraliidesele, mis võimaldab sellel kuvada graafikat. Alustuseks pange lehele silt teatud laiuse ja kõrguse, siis pääsete sellele JavaScripti koodis ligi (näiteks id abil) ja hakkate sellele joonistama. Joonistamine taandub joonestiili joonestusstiili järjestikusele määratlemisele, täitmisstiilile fillStyle ja joonistusmeetodite kutsumisele, nagu näiteks moveTo (pliiatsi liigutamine), lineTo (joone tõmbamine), kaar (kaare joonistamine) jne. Allpool vaadake näidet - lihtsaim tööriist hiirega joonistamiseks. Allpool on selle lähtekood JavaScriptis ja HTML-i märgistuses. Pliiatsiga joonistamiseks vajutage hiire vasakut nuppu ja liigutage kursorit üle lõuendi. Režiimis "Jooned" või "hulknurgad" klõpsake lihtsalt lõuendil järjestikku, näidates sellega polüliinide või alaobjektide tippe.

Näide joonistustoimingute rakendamisest elemendil HTML5 abil.

//Praeguse operatsiooni kood var operation=0; //Operatsiooni olek var active=false; //Käivitage graafiline tehte funktsioon startOperation(e) ( if (operation==0) return; if (aktiivne) return; var kontekst = getContext(); context.strokeStyle = getColor("stroke"); kontekst.fillStyle = getColor ( "fill"); context.beginPath(); var point = getPoint(e); context.moveTo(point.x, point.y); active = true; ) //Graafilise operatsiooni funktsiooni stopOperation() lõpetamine ( kui (! active) return; var kontekst = getContext(); kontekst.closePath(); active = false; ) //Hiire sündmuste funktsioon mouseDown(e) ( var e = e || window.event; if (!active) ( startOperation(e); return; ) else ( var kontekst = getContext(); var point = getPoint(e); kontekst.lineTo(punkt.x, punkt.y); kontekst.stroke(); if (operatsioon == 3 ) kontekst .fill(); ) return true; ) funktsioon mouseUp(e) ( var e = e || window.event; if (!active || operatsioon != 1) return; stopOperation(); return true; ) funktsioon mouseMove( e) ( var e = e || window.event; if (!active || operatsioon != 1) return; var kontekst = getContext(); var point = getPoint(e); kontekst.joonTo(punkt.x, punkt.y); kontekst.stroke(); tagasta tõene; ) funktsioon getColor(control) ( var color = document.getElementById(control).value; if (color == "") color = "#000"; return color; ) //Canvas element function getCanvas() ( tagastada dokument. getElementById("canvas"); ) //Kontekst kahemõõtmelise graafika kuvamiseks lõuendil elemendi funktsioon getContext() ( return getCanvas().getContext("2d"); ) //Element "valitud toiming" getSelected() ( return document. getElementById("selected"); ) //Hiire kursori funktsiooni getPoint(e) suhtelised koordinaadid ( var x = event.pageX || event.x; var y = event.pageY || event.y; var rect = getCanvas() .getBoundingClientRect(); var point = (); point.x = x - rect.left; point.y = y - rect.top; return point; ) //Valige toimingu funktsioon selectOperation(code) ( stopOperation(); operatsioon = kood; switch(operatsioon) ( case 1: ( getSelected().innerText = "Selected: pen"; break; ) case 2: ( getSelected().innerText = "Valitud: read"; break; ) juhtum 3: ( getSelected().innerText = "Valitud: hulknurgad"; murda; ) ) )

pliiatsi jooned hulknurgad Valitud: joone värv täitevärv

See pole midagi enamat kui brauseri tugi klassikalisele lohistamismudelile, mis on tavalistes GUI rakendustes väga populaarne. Lohitavate elementide jaoks määrake lohistatav atribuut ja elementide jaoks, millele lohistate, sündmuste käitlejad ondragenter , ondragover ja ondorp . See on tegelikult kõik. Näide allpool.

Näide pukseerimisoperatsioonide (elementide lohistamise) rakendamisest HTML5 abil.

HTML5: Drag and Drop html, body ( fondiperekond: Arial font-size: 11px; ) .basket (ääris: 1px solid #777; laius: 105px; kõrgus: 120px; polsterdus: 10px; border-raadius:0 0 10px 10px; taustavärv: #eee; kasti vari: sisestus 0px 0px 5px #777; ) .basket .ball (laius: 30px; kõrgus: 30px; äärise raadius: 15px; kasti vari: 5px 5px 10px #777; hõljuk: parem; ) .pall (ääris: 1px tahke #FF7F50; laius: 20px; kõrgus: 20px; äärise raadius: 10px; taustavärv: #FF8C00; kasti vari: 0px 0px 5px #777; hõljuk: vasak; veeris: 1px; ) funktsioon startDrag(e) ( var e = e || window.event; e.dataTransfer.setData("Pall", e.target.id); e.dataTransfer.effectAllowed="move"; return true ; ) funktsioon endDrag(e) ( var e = e || window.event; e.dataTransfer.clearData("Ball"); return true; ) funktsioon drop(e) ( var e = e || window.event; e .target.appendChild(document.getElementById(e.dataTransfer.getData("Pall"))); e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true; tagastama vale; ) ...

Siin on kõik üsna lihtne, oleks, mida paljundada ja kus. Asetage sildid Ja Määrake oma lehel nende jaoks atribuut src, näidates taasesituse allikat, ja oodake, kuni Interneti-brauserid õpivad neid suurepäraseid juhiseid töötlema ja kõige levinumaid vorminguid esitama.

HTML5 lubab uusi elemenditüüpe , mis juhivad Interneti-aadressi, e-posti aadressi, arvväärtuste, kuupäeva, kellaaja, värvi jne sisestamist. Kui teie brauser juba toetab kõiki neid uuendusi, siis allpool näete, kuidas see seda teeb. Kui brauser ei toeta kõiki uut tüüpi elemente, näevad need, millega ta veel ei tea, kuidas töötada, tavaliste tekstisisestusväljadena.

Erinevate tüübiatribuutide väärtustega elementide variandid:

Kui aadressi väärtus ei vasta vormingule url, siis pärast [kinnita] klõpsamist proovib brauser seda parandada. Kui see ei saa seda teha, kuvab see veateate. Kui meili väärtus ei vasta vormingule email, siis pärast [kinnita] klõpsamist parandab brauser aadressi või teatab sisestusveast.

Arvväärtuse esitamine skaala kujul, millel on võimalus näidata intervalle alla madala ja kõrge normi, samuti optimaalse väärtuse optimumi.

Element:

Täitmisprotsessi visualiseerimine. Saate määrata ainult maksimaalse max ja praeguse väärtuse.

HTML-i lähtekoodi element

Number intervallist:

Täisarv:

Päev ja aeg:

Kuupäev:

Aeg:

Kuu:

Nädal:

Värv:

url:

email:

Varem laaditud lehtedele üleminekut saab iseseisvalt hallata JavaScripti ja objekti abil ajalugu. Näiteks akna window.history.length kutsumine tagastab "ajaloo pikkuse" ja kutsumine window.history.back() , window.history.forward() või window.history.go(stepCount) viib läbi vastavad üleminekud. Allpool on väike näide:

Edasi>

See suurepärane funktsioon võimaldab teil salvestada ja taastada seansi andmeid. Täitsime tellimuse, käisime toodet vaatamas, pöördusime tagasi (lingi abil) uuesti tellimust täitma, kuid eelnevalt sisestatud andmed olid alles. Varem ei saanud sellise lehe atribuudi pakkumiseks hakkama ilma täiendavate pingutusteta veebirakenduse serveri poolel. Nüüd on võimalik andmeid salvestada veebiseansi kontekstis ( sessionSalvestus) või lokaalselt brauseri RAM-is ( kohalik salvestusruum). SessioonStorage peaks võimaldama andmete säilitamist seni, kuni seanss, milles need initsialiseeriti, on aktiivne. Salvestatud andmetele pääseb juurde erinevatelt brauseri poolt laaditud veebisaidi lehtedelt. LocalStorage'i valik peaks ilmselt salvestama andmeid, kui brauser ise on avatud. Kuna juurdepääs localStorage'ile peaks olema alati saadaval, isegi kui serveriga pole ühendust, saavad kõik brauseri poolt avatud leheküljed kohalikult salvestuselt andmeid vastu võtta. Mõlemal juhul on seansi olek võtme-väärtuste paaride kogum, millele pääseb juurde väljakutsetega xxxStorage.setItem(võti, väärtus) ja xxxStorage.getItem(key) .

Näide: Vaadake jaotist elemendi sisu redigeerimise kohta uue atribuudi abil rahulolev, mis on kasutusele võetud HTML5-s, on. Allpool on lisatud kaks nuppu, millest üks salvestab redigeeritud ploki sisu ja teine ​​taastab selle. Klõpsake [Salvesta], muutke ploki sisu ja klõpsake nuppu [Restore]. Kui teie brauser toetab HTML5-funktsiooni sessionSalvestus, seejärel ploki sisu rahulolev taastatakse.

Taastama

Salvesta Taasta

Kui teie leht sisaldab elemente mis laadivad teiste lehtede sisu: mitte ainult teie saidi lehti, vaid ka täiesti erineva domeeni lehti, siis on HTML5 soovituste rakendamisega võimalik selliste akendega sõnumeid vahetada. Sõnumi saatv leht teeb seda funktsiooni window.postMessage(message, target) abil ja sõnumit vastuvõttev leht peab sisaldama sündmuste töötlejat "onmessage", kus ta peab juba töötlema sõnumiteksti event.data, kui see on tõesti nii. selle saaja – vastab väärtusele sündmus.päritolu . Enne selle mehhanismi tulekut ei olnud võimalik suhelda erinevate Interneti-ressurssidega kliendi poolel. Allpool on toodud näide kahe lehe vahelise suhtluse kõige lihtsamast rakendamisest, kasutades uut HTML5 sõnumimehhanismi. Esmapilgul võib tunduda, et näites ei toimu midagi erilist. Täpsemalt jääb arusaamatuks, milleks seda kõike vaja on. Tegelikult võib sõnumside saada populaarseks, kui luuakse erinevaid internetiteenuseid ühte kohta koondavaid infoportaale. Oletame näiteks, et on olemas teatud Interneti-teenus, mille teenuseid saab kasutada alles pärast mahuka elektroonilise avalduse täitmist. Samuti oletame, et mõni klient kasutab selle teenuse teenuseid üsna sageli, kuid tema taotlused erinevad üksteisest iga kord vähe (enamik parameetreid on alati samad). Kui selline Interneti-teenus lisaks taotluse täitmise elektroonilisele vormile toetaks ka "sõnumi vastuvõtjat" oma teenuste automaatseks tellimuse esitamiseks, saaksid selle kliendid selle teenuse akna "lohistada" nende lehtedel (kasutades elementi ), looge sinna oma (enda jaoks optimeeritud) taotlusvormid ja funktsioonid nende sõnumite kujul sihtteenusele saatmiseks. Enamik parameetreid genereeritakse sel juhul automaatselt, näiteks kliendi andmed. Loomulikult saab sarnast suhtlust realiseerida ka HTTP päringute kaudu kliendilt serverisse, mille päises edastatakse vajalikud parameetrid, kuid tasub tähele panna, et HTML5 sõnumimehhanismi puhul on edastamisel liiklus null parameetrid, kuna kõik toimub kliendi poolel.

Näide lehtedevahelise sõnumivahetuse rakendamisest HTML5 abil.

function init() ( document.getElementById("vorm").onsubmit = sendMessage; ) function sendMessage() ( var asukoht = aken.koht; var sõnum = document.getElementById("sõnum").väärtus; var target = dokument. getElementById("target"); target.contentWindow.postMessage(message, location.protocol+"//"+location.host); return false; ) ...

message_source.html:

Sõnumi tekst

function init() ( if (window.addEventListener) window.addEventListener("message", ReceiveMessage, false); else window.attachEvent("onmessage", ReceiveMessage); ) funktsioon ReceiveMessage(event) ( document.getElementById("target" ).innerHTML = event.data; document.getElementById("origin").innerHTML = "from " + event.origin; ) ...

messages_target.html:

Nüüd saate atribuudi contenteditable defineerimisega muuta redigeeritavaks üksikud märgistuselemendid, näiteks tekstiplokid, loendid jne. Atribuudi designmode abil saate muuta kogu lehe redigeeritavaks. See funktsioon võib olla kasulik ressursi omanikuga tagasiside korraldamisel, näiteks avalduse, tellimuse või muu taolise täitmiseks ja saatmiseks. Loote vormi HTML-lehe algsel kujul ja annate selle kasutajale täitmiseks. Pärast täitmist kinnitab kasutaja sisestatud andmed ning redigeeritud dokument saadetakse serverisse. Redigeeritava märgistuse näide on näidatud allpool:

Selle ploki sisu saab redigeerida, kuna selle jaoks on määratud atribuut rahulolev:

Tabeli lahtrite redigeerimisel muutuvad veergude laius ja joonte kõrgus automaatselt.

Uue loendiüksuse sisestamiseks vajutage .

• Loendi üksus 1
• Loendi punkt 2
• Loendi punkt 3

Pärast uue üksuse lisamist loendisse uuendatakse numeratsiooni automaatselt.

Oodatakse toetust SVG- vektorgraafika märgistuskeel, mis põhineb . Graafika lisatakse märgendisse, mis on loogiline, kasutades silti , näiteks nii:

Kui näete allolevaid geomeetrilisi kujundeid, tähendab see, et teie brauser toetab juba svg-d.

Oodatud on ka toetust MathML- XML-il põhinevate matemaatiliste avaldiste märgistuskeel. Siin on näide kolmnurga külje pikkuse arvutamise valemi märkimisest koosinusteoreemi abil:

a = b 2 + c 2 - 2 b c cos α

Kui näete ruutjuure sümboliga valemit, mõistab teie brauser juba MathML-i.

A = b 2 + c 2 - 2 b c cos α

Kõigepealt tahaksin esile tuua rühma uusi lehe märgistuselemente, mida varem selgesõnaliselt ei eksisteerinud. Nende hulka kuulub silt - artikkel, märkus, uudis jne; - artikli pealkiri või päis - jalus või jalus - artikli jaotis või peatükk. Miks seda vaja on, kui sama asja saab teha elemente kasutades erinevad klassid? See on vajalik, et teie märgistuse tähendus oleks selge ka neile, kes proovivad seda analüüsida. Ma ei räägi inimesest, kes teie teksti loeb (ta ei näe märgistust, ilma selleta on talle kõik selge), vaid automatiseeritud süsteemidest ja ennekõike kehtib see otsingumootorite kohta. Semantiline koormus on otsingumootorite jaoks väga oluline teie lehtede asjakohasuse arvutamisel konkreetse otsingupäringuga. Selles kontekstis väärib element erilist tähelepanu , sest see on mõeldud teie lehe peamiste navigeerimislinkidega ploki esiletõstmiseks. Võib-olla kohtlevad otsingumootorid selliseid linke erinevalt. Allpool on kokkuvõtlik tabel uutest HTML5-märgenditest, mis lisavad märgistusele tähenduse.

Allpool on näide HTML-i märgistusest, kasutades loetletud silte.

HTML5 ei ole veel soovituslikuks muutunud ja selle semantiliste siltide kasutamise üle on vaidlusi, näiteks Ja juba päris palju. Keegi ei tea veel, kuidas neid õigesti märgistusse sisestada, kuid uute HTML5 struktuurimärgendite kasutamiseks on mitmeid näpunäiteid, millele on raske vastu vaielda, kuna nende tähendus on ilmne. Siin on mõned neist:

See on minu jaoks kõik hüperteksti märgistuskeele uute funktsioonide kohta, mis peaksid ilmuma koos HTML5 soovituse avaldamisega.

HTML5 on peamise veebilehe märgistuskeele uusim versioon. HTML-is pole viimase 10 aasta jooksul suuri muudatusi olnud, mis on pisut veider, arvestades veebitehnoloogia kiiret arengut. Ja lõpuks, HTML5 on meie jaoks ümber korraldatud ja see artikkel räägib teile, mida uut me selles versioonis saime.

HTML5-l on varasema XHTML-iga võrreldes leebemad reeglid, nüüd saate:

• Sul ei ole vaja sulgemismärke kasutada.
• Ärge kasutage atribuudi väärtustes jutumärke.
• Kasutage elementides ja atribuutides suurtähti.

Uued sildid.
Nii ilmusid HTML5-sse uued sildid.

Samuti on välistatud silte, mis ei ole enam asjakohased ja mida ei soovitata kasutada.