Könyörtelen források html. A legjobb források a html és a css tanulásához. Mi az a HTML5

Ez az oldal a szabványok kidolgozásában részt vevő személyek számára tartalmaz anyagokat.

Ezen információk nagy része nem védett jelszóval. Egyes oldalak elérésekor azonban szükség lehet egy jelszóra.

Magatartási kódex

Az ISO bizottságok, munkacsoportok vagy az „Összefogás a konszenzus elérése érdekében” tagjait arra ösztönzik, hogy a Magatartási Kódex elveinek megfelelően dolgozzanak.

Versenymegfelelőségi útmutatók

A szabványalkotási folyamat során a jogszabályok betartása fontos a piaci mechanizmusok hatékony működésének biztosításához és a versenyképesség fokozásához, valamint a szabványokba vetett bizalom növeléséhez. Az ISO jogi kérdésekben útmutatást ad a szabványfejlesztési folyamat minden résztvevőjének.

A versenyjogi irányelvekkel kapcsolatos kérdéseit az ISO jogi csapatához lehet fordulni a címen.

szerzői jog

A szabványosítási tevékenységek minden résztvevőjének tiszteletben kell tartania az ISO-kiadványokkal és projektfejlesztéssel, valamint az ISO-val kapcsolatos minden tartalommal kapcsolatos szerzői jogokat. Ezeket a szabályokat tükrözi a Nyilatkozat, amellyel minden szabványosításban érdekelt félnek egyet kell értenie.

Politika a bizottság külső felekkel folytatott kommunikációja és a dokumentumok megőrzése terén

Az ISO-szabványok kidolgozási folyamataiban résztvevőket ösztönözheti (például a média), vagy kezdeményezheti saját kezdeményezését (pl. közösségi hálózatok) információkat cserélhet külső felekkel a bizottság munkájának különféle vonatkozásairól. Az ISO működési szabályzatot dolgozott ki az ilyen külső interakciókra.

A jelen szabályzattal kapcsolatos kérdéseit a következő címre lehet intézni email TMB titkárság: .

Adatvédelmi szabályzat

A szabványosítási folyamatban részt vevő valamennyi félnek jogai és kötelezettségei vannak az adatvédelem tekintetében. Ezeket tükrözi az ISO tagok számára kidolgozott Adatvédelmi Szabályzat, valamint a Nyilatkozat, amelyet minden érintett félnek be kell tartania. ez a folyamat. Ez vonatkozik az ISO IT szolgáltatásokban tárolt adatokra, valamint számos, a szabványosítási munkák során gyűjtött személyes adatra (pl. jelenléti ívek, jegyzőkönyvek).

Az ISO szabványokban használt kifejezések és kifejezések magyarázata Nemzetközi szabványok és kereskedelem Az ISO jogi szankcióinak típusai

Az ISO kidolgozott egy dokumentumot, amely összefoglalja a szankciókkal és a szabványok kidolgozási folyamatával kapcsolatos kérdéseket.

Az érintettek bevonása és a konszenzus kialakítása

Az ISO munkája azt a célt szolgálja, hogy a szabványokat az érdekelt felek, az érintettek számára dolgozzák ki, így a piaci igényeket hatékonyabban lehet kielégíteni.

Az alábbiakban olyan dokumentumokat talál, amelyek útmutatást nyújtanak az érintettek bevonására vonatkozóan.

Úgy döntöttem, hogy folytatom ezt a forró témát. Összeállítottam egy listát a legjobb forrásokról a html és css megtanulásához, hogy segítsek az érdeklődőknek ezeknek a kérdéseknek a tanulásában. Emlékszem, amikor webmesterként kezdtem, nagyon hiányzott a minőségi és hasznos források ilyen választéka.

Először néhány definíció:

A HTML (az angol "HyperText Markup Language" szóból - hiperszöveg jelölőnyelv) az szabványos nyelv weboldal jelölése.

A Css (az angol "Cascading Style Sheets" szóból - lépcsőzetes stíluslapok) egy leírási technológia kinézet weboldalak.

A html és a css ismerete nélkül a webhely futtatása nagyon problémás lesz - még statisztikai számlálót vagy bannert sem fog tudni telepíteni. Nem kellene szakértőkhöz rohannunk segítségért, vagy témát témáról témára létrehozni a fórumokon? Csak el kell fogadni és megtanulni.

Saját tapasztalatból azt tudom mondani, hogy a html és a css 1 hónap alatt megtanulható. Természetesen nem a szakmai magasságokról beszélek - ha akarja, maga is elérheti őket.

Szerintem, A legjobb mód a html, css és egyéb témák elsajátítása, beleértve a webhely-promóciót is, azt jelenti, hogy saját weboldallal kell rendelkeznie, és gyakorolnia kell rajta. Egyébként itt láthatod az első weboldalt, amit a Counter-Strike játékhoz készítettem térképekhez, aminek az elkészítésére akkor nagyon kíváncsi voltam. Íme a térképek és a hozzájuk tartozó képernyőképek, amelyeket az idős Globator készített azokban az időkben, amikor még nem tudta, mi az a top 10, a TCI és a PR, és gondtalanul száguldott a napon, háromdimenziós térképeket alkotva :) Ezt az oldalt egy hónap alatt hoztam létre, a gyakorlatban tanultam a html-t és a css-t.

Nem kell műszaki szakértőnek lenned ahhoz, hogy megtanulj html-t és css-t. Én például általában humanista vagyok, és matematikából többnyire „2”-est kaptam :) Így bárki megtanulhatja a html-t és a css-t. Az általam felsorolt források arra is alkalmasak, hogy bármikor megtudhassák azokat a html-t és css-t illetően, ami érdekli.

Weboldalak html és css tanuláshoz

Elindítok egy válogatást a html és a css tanulásához szükséges hasznos forrásokból egy saját magam által használt webhelyről. Ezeket a Wild html leckéket Valentina Akhmetzyanova aka Dikarka írta. Olyan vidáman és érdekesen leírta az összes szükséges pontot, hogy a html és css tanulása a leckék segítségével izgalmas tevékenységgé válik. Egyébként a blog oldalát olvashatod. A vad leckék elegendőek a html és a css megtanulásához a webmesteri munkához szükséges szinten.

El tudod képzelni, ki lennék, ha tovább fejlődnék a Photoshop témában? Igazi szörnyeteg lennék! De itt belefogtam a SEO-ba és vegetálok, a hidegtől görcsös ujjakkal gépelve ezeket a betűket :) Csak viccelek, itt is meleg van és jó az étel :)

Utolsó frissítés: 2019. november 9., 06:54:54 (UTC/GMT +8 óra)

Mi az a HTML?

A HTML a Hyper Text Markup Language rövidítése, amelyet weboldalak, valamint webböngészőben megtekinthető más típusú dokumentumok létrehozására használnak.

A HTML a World Wide Web Consortium által meghatározott és karbantartott szabvány.

Feltalálásától kezdve a HTML különböző verziókon keresztül fejlődött. A HTML jelenlegi verziója a HTML 4.01.

A HTML következő verziója a HTML 5, amely fejlesztés alatt áll, de a fejlesztők már elkezdték használni egyes funkcióit.

A következő oldalakon részletesen tárgyaljuk a HTML 4.01-et. Ha megtanulja, hogy melyiket, akkor képes lesz weboldalakat létrehozni saját maga.

Egy egyszerű weboldal HTML kódja

Egy példa HTML oldalra Ez egy példa HTML oldalra

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at nisi velit, aliquet iaculis est. Curabitur porttitor nisi vel lacus euismod egestas. In hac habitasse platea dictumst. In sagittis magna eu odio interdum mollis. Phasellus sagittis pulvinar facilis. Donec vel odio volutpat tortor volutpat commodo. Donec vehicula vulputate sem, vel iaculis urna molestie eget. Sed pellentesque adipiscing tortor, at condimentum elit elementum sed. Mauris dignissim elementum nunc, non elementum felis condimentum eu. In turpis quis erat imperdiet vulputate. Pellentesque mauris turpis, dignissim sed iaculis eu, euismod eget ipsum. Vivamus mollis adipiscing viverra. Morbi at sem eget nisl euismod porta. Sed semper, tortor eu molestie iaculis, felis massa vestibulum massa, vitae suscipit arcu nunc quis ante. Phasellus aliquam elit és nisl condimentum commodo. Nunc congue nibh aliquam enim aliquet nec feugiat diam condimentum. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam accumsan velit sed lacus pellentesque in gravida nunc ultrices. Aliquam varius scelerisque erat ut egestas.

Tanuljon HTML-t a webhelyről

Ez egy példa a HTML oldalra

A w3resource HTML oktatóanyagok jellemzői

Lefedtük az összes HTML 4.01 elemet vagy címkét és azok attribútumait. Mert ezek a HTML elemek (vagy címkék) és attribútumok, amelyeket meg kell értened a HTML tanulásához. A HTML oktatóanyagainkban a HTML-címkék vagy elemek megvitatása során a következő funkciókat használtuk, hogy jobban megértse:

1. Egy világos és egyszerű leírással kezdtük.

2. Adtunk egy szintaxist, hogy emlékezzen, hogyan kell írni.

3. A Használja, hogy megmutassa, hogyan kell írni a gyakorlatban.

4. Megmutattuk a használat eredményét.

5. Mivel a HTML címkék tartalmazhatnak vagy nem tartalmazhatnak záró címkét az elem bezárásához, mindig megmutattuk, hogy szükséges-e a Start és End tag vagy sem.

6. Melyik Kategóriába tartozik a HTML elem, pl. ha szöveghez vagy címsorhoz vagy űrlapok létrehozásához stb.

7. Milyen egyéb elemeket vagy milyen típusú tartalmat tartalmazhat a HTML-címke.

8. A HTML-címkével ellátott egyéb elemeken belül.

9. A címke különböző attribútumai, leírásuk és példák.

10. Példa erre a HTML-címkére.

11. A példa eredménye.

12. Tekintse meg a példát egy böngészőben.

13. Hogyan néz ki a címke különböző böngészőkben.

Ki a világon a legaranyosabb, legpirultabb és legkívánatosabb? Ne gondolj semmi vulgárisra, csak a jelölőnyelv új verziójára gondolok – a HTML5-re. Legújabb verziók A modern böngészők már megértenek néhány HTML5 trükköt, ami azt jelenti, hogy ideje elkezdeni használni a projektekben.

Mi az a HTML5?

Első pillantásra a HTML5 csak egy új verzió jelölőnyelv. Most azonban ez a kifejezés valamivel mást jelent. Egyszerűen abszurd a HTML5-öt a CSS3 említése nélkül fontolóra venni, mivel e nélkül lehetetlen igazán modern webalkalmazásokat fejleszteni. Nem feledkezhetünk meg a JavaScriptről sem. Segítségével megvalósul a HTML5 szabványban leírt gazdag API-hoz való hozzáférés. Összegezve a fentieket, egy definíció utal arra, hogy a HTML5 modern technológiák/szabványok (JS, HTML5, CSS3 stb.) halmaza, amelyet webes alkalmazások fejlesztésére használnak.

Egy csepp történelem

A HTML5 nem jelent meg hirtelen. Fejlesztése még 2007-ben kezdődött. A munkafolyamatért a W3C konzorciumból egy speciálisan létrehozott csoport felelt. De a HTML5 számos funkcióját a Web Application 1.0 szabvány keretein belül találták ki, és 2004 óta foglalkoznak vele. Tehát a valóságban a HTML5 nem olyan fiatal technológia, mint amilyennek első pillantásra tűnhet.

A HTML5 specifikáció első vázlata 2008. január 22-én vált elérhetővé. Három év telt el, de a specifikáció végleges változata még mindig nincs készen, és nem valószínű, hogy a következő egy-két évben elkészül. Ez a szomorú pillanat arra kötelezi a fejlesztőket, hogy gondosan alkalmazzák az új funkciókat projektjeikben. A specifikáció könnyen változhat, és nem minden modern böngészők(FireFox 4, Google Chrome 10, IE9, Opera 11) teljes mértékben támogatják az új funkciókat.

Egészséges receptek

A HTML5 elméletéről nagyon sokáig beszélhetünk, de rovatunk a „Kódolás” nevet viseli, ezért arra hívlak benneteket, hogy a gyakorlatban is megtapasztalják a szabvány képességeit. Nem törődtem azzal, hogy szupereredeti recepteket készítsek, hanem úgy döntöttem, hogy példákat hozok olyan dolgokra, amelyek valóban hasznosak, és amelyeket most lehet és kell használni az oldalain. Akkor gyerünk.

1. recept: Kapcsolja be a Drag&Drop funkciót teljes mértékben

A HTML5 egyik jó tulajdonsága (valószínűleg nem kellett volna annyi energiaitalt innod, mert ott kell lennie a „trükkök” szónak – a szerkesztő megjegyzése) a File API és a Drag and Drop API használatának képessége volt.

Segítségükkel megszervezheti a fájlok gyönyörű átvitelét a felhasználó számítógépéről a szerverre. Emlékszel, korábban mindig volt egy mező a „Tallózás” gombbal a fájlok küldéséhez? A rákattintás után egy szabványos fájlkiválasztó párbeszédablak jelenik meg, amelyben ki kellett választania az átvinni kívánt fájlt. Nevezze el ezt a módszert kényelmes nyelv nem fordul. Különösen, ha több fájlt kell hozzáadni a letöltési sorhoz.

Kicsit később a kézművesek elkezdtek flash-feltöltőket készíteni, amelyek több funkcionalitást biztosítottak, de volt egy komoly hátrányuk - a telepített vaku szükségessége. Ráadásul a felhasználónak mindkét esetben nem volt lehetősége az egeret az oldalra húzva fájlokat hozzáadni az átvitelhez.

De a Drag&Drop technológiát elég gyakran használják a rendszerben. Én személy szerint mindig is csak kiemelni akartam szükséges fájlokatés a patkány enyhe intésével dobd fel az oldalra. Ez sokkal kényelmesebb, mint a fájl keresése egy szabványos párbeszédpanelen.

A HTML5 elvégezte a beállításokat, és most már semmi sem akadályozza meg, hogy teljes értékű Drag&Drop-ot szervezzen egy fájl oldalra átviteléhez. A Google alkalmazottai voltak az elsők, akik ezt a funkciót alkalmazták a Gmailben. Ha a Google-t használja, valószínűleg már régóta felfigyelt arra a területre, ahol fájlokat húzva csatolhat egy levélhez. Személy szerint aktívan használom ezt a funkciót, és most megmutatom, hogyan hozhatja létre ugyanazt a projekthez. Projektünk három fájlból fog állni: sample.html, style.css és scripts.js. Természetesen korlátozhatnánk magunkat egy html fájlra, de akkor a kód olvashatatlannak bizonyulna. Nem kell keverni a HTML-t JS-sel vagy CSS-sel. Jobb mindent fájlokra bontani, majd nyugodtan dolgozni velük. Mindenekelőtt készítsük el az alkalmazásunk szerkezetét. Hozz létre egy sample.html fájlt, és írd bele:

Húzza ide a fájlokat

A JavaScriptben való kódírás kényelme érdekében beépítettem a jquery könyvtárat. Ezt követően leírtam a leendő html dokumentum felépítését. Pokolian egyszerű – le kell írnunk azt a mezőt, ahová a felhasználónak át kell húznia a fájlokat. Ehhez csak egy div tárolóra van szükség. Ha most megnyitja az oldalt egy böngészőben, akkor semmi jót nem fog látni. Ahhoz, hogy a területünk vizuálisan is észrevehetővé váljon, meg kell terveznünk CSS segítség. Nyissa meg a style.css fájlt, és írja be a következő kódot:

#box (
szélesség: 500 képpont;
magasság: 300 képpont;
szegély: 2px szaggatott #000000;
háttérszín: #FCFFB2;
szöveg igazítása: középre;
szín: #3D91FF;
betűméret: 2em;
font-család: Verdana, sans-serif;

Moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
#label (
pozíció: relatív;
felső: 2%;
}

A „doboz” azonosító a jövőbeli tárolónk a fájlok fogadására (a felhasználónak erre a területre kell húznia a dokumentumokat). Hogy a felhasználó ne hagyja ki, nagyobbra teszem a területet, és keretezési lehetőségként a szaggatott - pontozott vonalakat - választom. A szabályos pontozott vonalak nem néznek ki túl jól, ezért azonnal beállítottam a tulajdonságok értékeit: -moz-border-radius és -webkitborderradius. Most megnyithatja a létrehozott oldalt a böngészőben, és értékelheti az általános megjelenést.

Viszont ha most megpróbálsz elhúzni valamit, semmi érdekes nem fog történni. A húzott fájl egyszerűen megnyílik a webböngészőben, és kész. Egy kis JavaScript-kód segít kijavítani a helyzetet:

$(dokumentum).ready(function() (

//Eseménykezelők hozzáadása

Var mybox = document.getElementById("doboz")

Mybox.addEventListener("dragater", dragEnter, false);

Mybox.addEventListener("dragexit", dragExit, false);

Mybox.addEventListener("dragover", dragOver, false);

Mybox.addEventListener("drop", drop, false);
});
függvény dragEnter(evt) (

Evt.stopPropagation();

Evt.preventDefault();
}
függvény dragExit(evt) (

Evt.stopPropagation();

Evt.preventDefault();
}
függvény dragOver(evt) (

Evt.stopPropagation();

Evt.preventDefault();
}
függvény drop(evt) (

Evt.stopPropagation();

Evt.preventDefault();

Var files = evt.dataTransfer.files;

Var count = files.length;

Ha (szám > 0)

HandleFiles(fájlok);
}
function handleFájlok(fájlok) (

//Vegyük az első fájlt

//Ha többel kell dolgozni

//fájlokat, akkor itt meg kell szervezni a keresést

Var file = fájlok;

Document.getElementById("label").innerHTML =
"Elkapott: " + fájl.név;

Var olvasó = new FileReader();

Reader.onprogress = handleReaderProgress;

Reader.readAsDataURL(file);
}
function handleReaderProgress(evt) (

If (evt.lengthComputable) (

If (evt.loaded = evt.total) (

Alert("Töltve...");
}
}
}

Első pillantásra nehézkesnek és érthetetlennek tűnhet a kód, de aki legalább egy kicsit ismeri a JavaScriptet és a jquery-t, annak azonnal meg kell értenie, mi történik. Már az elején azonosítom azokat az eseményeket, amelyek bekövetkezése érdekel. Mindegyikhez külön funkciót írok le. Például a dragExit esemény akkor következik be, amikor a felhasználó elmozdítja az egérkurzort egy húzott elemről. Ha a felhasználó áthúz egy fájlt, a handleFiles() függvény veszi át az irányítást.

Ebben szándékosan hozzáférek a legelső fájlhoz (fájlokhoz), és elkezdek vele dolgozni. Felhívjuk figyelmét, hogy a felhasználó egyszerre több fájlt is áthúzhat. Ha az alkalmazásnak képesnek kell lennie az ilyen helyzetek kezelésére, akkor keresést szervezünk a teljes fájltömbben. A handleFiles() függvény az, ahol minden móka megtörténik.

Először a címkeelemben jelenítem meg (emlékszel a „Húzd ide a fájlokat” feliratra?) annak a fájlnak a nevét, amelyet a felhasználó az aktív területre húzott, majd elkezdem olvasni egy FileReader() típusú objektum segítségével. . Erről ebben a cikkben olvashat bővebben: html5rocks.com/tutorials/file/dndfiles. Minden esetre definiálok egy onProgress eseménykezelőt egy FileReader() típusú objektumhoz. Ez az esemény minden egyes adat beolvasásakor meghívásra kerül. Magában a kezelőben feltételt állítottam be: ha a betöltött adatok mennyisége megegyezik a fájl méretével, akkor az olvasás sikeresen befejeződött, és boldog üzenet jelenhet meg.

2. recept: Igyál sört, nézz videókat, hallgass rockot

A HTML5 megjelenése előtt a webes videókat mindenféle flash lejátszó segítségével nézték meg. Ez nem jelenti azt, hogy kényelmetlen lenne így nézni a videókat. Az egyetlen problémánk a biztonsággal van (az utóbbi időben Flash player egyszerűen hemzseg a sebezhetőségektől), és magának a bővítménynek a telepítése szükséges. A HTML5 szabvány elegáns megoldást kínál – a beépített videó- és audiotartalmak lejátszásának lehetőségét.

Valószínűleg sokan már sejtették, hogy a címkékről és a címkékről beszélek. Lehetővé teszik hang és videó közvetlenül az oldalba ágyazását. Az egyetlen csalódás, amellyel meg kell küzdenünk, a támogatott kodekek készlete. Sajnos ez a készlet böngészőnként más és más, így nagy a valószínűsége annak, hogy a videód tökéletesen fog megjelenni a Chrome-ban, de a FireFox felhasználók az erdőben maradnak. Annak elkerülése érdekében, hogy ilyen helyzetbe kerüljön, ajánlott ügyelni a biztonsági háló lehetőségre - a videó lejátszására Flash lejátszóval. Beszélgettünk a cukiságról (nem, végül is nem keverte össze a szavakat, elektrokonvulzív terápiával kell majd kezelni az anime-függőség miatt - Lozovsky megjegyzése) és problémákról, most térjünk át a gyakorlásra. A videólejátszás demonstrálására egy egyszerű példát hoztam össze:

Itt kell lennie egy videónak. Ha ezt a szöveget látja, akkor böngészője nem támogatja az új szabványt.

Kérjük, vegye figyelembe, hogy a címke példájában megadtam a poszter attribútumot. Ebben jelzem a hozzá vezető utat grafikus fájl, amelyet az oldal betöltése után azonnal meg kell jeleníteni - az "első képkocka".

Mire lehet ez hasznos? Alternatív megoldásként beillesztheti cége/projektje logóját ilyen képként. A címkét ugyanúgy alkalmazzák. Lehetővé teszi egyszerre több forrás megadását egy médiafájlhoz. Így feltöltheti ugyanazt a fájlt különböző formátumok(ogg, mp3). Ha a felhasználó böngészőjében nincs mp3 kodek, akkor a rendszer megpróbálja lejátszani az ogg-t. Kiderült, hogy egyszerű manipulációkkal könnyen megoldható a kompatibilitási probléma, és biztos lehet benne, hogy a felhasználó képes lesz reprodukálni a tartalmat.

3. recept: Hol vagy most (geolocation API)

A Geolocation API egy szoftveres interfész a felhasználói koordináták meghatározásához. A kapott adatok alapján könnyen meg lehet jelölni a felhasználó tartózkodási helyét mondjuk rajta Google térkép. Hol használható ez a funkció? Igen, sok helyen! Például a népszerű Twitter mikroblog szolgáltatás fejlesztői a Geolocation API-t használják a Twitter kliens webes felületén. Ha egy felhasználó engedélyezi a tartózkodási helye megosztását, akkor az összes tweetjéhez hozzáadja azt a várost, amelyben jelenleg tartózkodik.

Nincs kétségem afelől, hogy most kínozza a következő kérdés: „Honnan szerzik a GAPI-k a helyadatokat?” Ne is gondold, hogy kémműholdak és egyéb Bond-cuccok érintettek. Minden sokkal prózaibb - az elemzéshez szükséges információcsomag az IP-címről, a közeli Wi-Fi hotspotokról, a GPS-ről (ha van eszköz), a GSM cellaazonosítóról stb. Ha érdekli a fent felsorolt forrásokból közelítő koordináták megszerzésének elmélete és gyakorlata, akkor azt tanácsolom, hogy nyissa meg a ][ mappát, és keresse meg Step cikkét ebben a témában, ahol alaposan elemezte az elméleti részt, és áttekintést adott a a megfelelő szoftvert. Most nézzünk egy példát a GAPI használatára. Minden rendkívül egyszerű és világos:

if (navigátor.geolocation) (
navigator.geolocation.getCurrentPosition(
funkció (pozíció) (
document.getElementById("szélesség").innerHTML =
pozíció.koordák.szélesség;
document.getElementById("hosszúság").innerHTML =
pozíció.koordinák.hosszúság;
},
);
}

Szélesség: Ismeretlen

Hosszúság: Ismeretlen

Mielőtt megpróbálná megszerezni a koordinátákat, győződjön meg arról, hogy böngészője támogatja a GAPI-t. Ha a földrajzi helymeghatározási módszer igazat adott vissza, akkor minden rendben van, és megpróbálhatja lekérni a koordinátákat. Ehhez a navigátor objektum getGurrentPosition metódusát fogjuk használni. Siker esetén megkapjuk a koordinátákat, amelyeket közvetlenül a dokumentumhoz küldünk.

4. recept: Adatbázis a böngészőben

A webes alkalmazások fejlesztése során megszoktuk az adatbázisok használatát. A MySQL, SQLite minden programozó számára ismert termékek. A HTML ötödik verziója egy újabb ajándékot hoz nekünk: az önálló SQLite adatbázis használatának lehetőségét. Állj meg!

Kiderül, hogy minden adat a felhasználó számítógépén lesz tárolva? Igen, pontosan. Nem kell kiabálni, hogy nem biztonságos. Bizonyos projekteknél ez a funkció jól jöhet. Sajnos még nem minden böngésző teszi lehetővé az adatbázis használatát.

Például az IE9 és FF4 még nem rendelkezik ezzel a funkcióval, így a gyakorlatban csak a Google Chrome-ban ismerkedhet meg a funkcióval. Nem mondok példát valódi kódra, csak megmutatom általános elv művek:

this.db = openDatabase("xakep", "1.0", "teszt", 8192);
tx.executeSql("mytable létrehozása, ha nem létezik" +
"checkins(id integer elsődleges kulcs asc, field_number_one string)",
, function() ( console.log("A kérés sikeresen befejeződött"); ));
);

Ha jobban megnézzük a fenti példát, akkor észrevehetjük, hogy a beépített adatbázissal általában ugyanúgy működik, mint a normál SQLite-nál: megnyitjuk az adatbázist, elkészítjük a lekérdezés szövegét és végrehajtjuk.

HTML5.Shutdown()

Az Önön múlik, hogy projektjei során használ-e HTML5-öt vagy sem. Azt hiszem, itt az ideje. Ha Ön professzionális webhelyfejlesztő, ne legyen lusta a HTML5-funkciók beágyazására. Természetesen ne felejtsen el gondoskodni a kompatibilitásról - alkalmazza a modern és az elavult böngészők támogatását. Mindened megvan, ami ehhez kell. Ne lassítson, és próbáljon kitűnni a projektjei közül. Sok szerencsét!

Hogyan biztosítsd magad?

A cikkben végig elmondtam, hogy a modern böngészők jelenleg különböző mennyiségű HTML5-funkciót támogatnak. Ezért legyen óvatos, és próbáljon meg nem nagyon egzotikus dolgokat használni. Azonnal felmerül a kérdés: „Hogyan lehet megtudni, hogy egy adott böngésző mely HTML5-funkciókat támogatja?” Számos módja van ennek a probléma megoldásának, de a kedvencem egy Modernizr (modernizr.com) nevű apró JavaScript-könyvtár használata.

A könyvtárat teljesen ingyenesen terjesztjük, és amint csatlakoztatja a projekthez, azonnal megjeleníti a böngésző által támogatott HTML5-funkciók listáját. A könyvtár működőképességének teszteléséhez nem kell azonnal letöltenie és csatlakoztatnia a projekthez. Csak fel kell lépnie a könyvtár hivatalos webhelyére, és azonnal látni fogja, hogy a böngészője mit támogat és mit nem. Tekintse meg a képernyőképeket a webhely látogatásáról, mikor Google segítség Chrome és internet böngésző 9. A jó PR kampány és a dicsérő cikkek ellenére a Microsoft böngészője egyértelműen kevesebb funkciót támogat, mint a Google Chrome.

A HTML5 lenyomja a Flasht

A HTML5 egyik legérdekesebb tulajdonsága az animációk készítésének képessége. Ez a HTML5 és a CSS3 keverésével érhető el.

Ez az animáció nagyon szépnek tűnik, és sok esetben helyettesítheti a Flash-t. Bátran állíthatom, hogy ez nem fog megtörténni egyhamar, hiszen ma már könnyebb elsajátítani a Flasht, mint megérteni a homályos HTML5/CSS3 kódot (IMHO). Ennek ellenére tudnia kell egy ilyen funkcióról. Nagyon ajánlom, hogy kövesse az alábbi linkeket, és nézze meg saját szemével az animáció lehetőségét bemutató gyönyörű demókat.

Egy gyönyörű demó, amely bemutatja a Canvas képességeit: feedtank.com/labs/html_canvas;
Egy gyönyörű 3D-s doboz beépített keresősávval a Google-tól: ;
Egy kattintás, és az oldal elkezd megtelni golyókkal. Több kattintás – több labda. Miután a színültig kitöltötte az oldalt, próbálja meg élesen húzni őket. Nagyon viccesen néz ki: mrdoob.com/projects/chromeexperiments/ball_pool ;
Csak egy fantasztikus bemutató, amely különféle kémiai vegyületeket mutat be. Mindenképpen érdemes megnézni: alteredqualia.com/canvasmol;
Szeretett volna valaha patológusnak érezni magát, és felfedezni az emberi test titkait?

Ha igen, akkor ez a link határozottan neked szól. A Google kiváló bemutatót készített a WebGL, HTML5, CSS3 és Flash technológiák keverékével. A koktél eredménye egy 3D-s emberi testet bemutató interaktív alkalmazás lett, amelyben a belső szervek felépítését lehet megvizsgálni. Amikor először megláttam, nem tudtam elszakadni tőle.

…Bár a HTML szintaxisa viszonylag egyszerűen megtanulható, még mindig sok olyan elem, attribútum és… egyéb fogalom van, amelyeket meg kell tanulnia és nyomon kell követnie. hogy megismerje a HTML lényegét, ez… tényleg nem úgy van kialakítva, hogy megtanítsa az összes elérhető elemet és attribútumot.…Ezt szem előtt tartva szeretnék néhány online HTML-forrást átadni, amelyek valóban segíthetnek elkezdi tanulni a HTML-t, és…a későbbiekben értékes hivatkozásokként szolgálhat, amikor saját oldalait készíti.…Most kezdjük magával a specifikációkkal…

És ez valami, két dokumentum, amelyet mindenképpen meg kell jelölnie a könyvjelzővel.…Szóval, ez a HTML5 W3Cs verziója.…Láthatja, hogy a legújabb Publisher Verziójuk van.…Megnézheti a Szerkesztői tervezetet… ha szeretné nézd meg, mi jön le a csövön.…És ez elég nagy.…Ha lejjebb görgetek, láthatod, hogy itt csak a tartalomjegyzék.…És nem is fogok mindent végiggörgetni tőlük.…

Az átirat automatikus görgetésének folytatása

Frissítve 2017.03.30. Megjelent 2015.03.16

A HTML az a programozási nyelv, amely vezérli a webet. És mint minden nyelv, amint elsajátította, elkezdheti saját tartalom létrehozását, legyen szó egyszerű webhelyekről vagy összetett webalkalmazásokról. Ez a kurzus alapos áttekintést nyújt a lényegről: a HTML szintaxisáról és a bevált módszerekről a kód megírása és szerkesztése. A vezető munkatárs, James Williamson áttekinti egy tipikus HTML-dokumentum szerkezetét, és megmutatja, hogyan lehet oldalakat szekciózni és HTML-formátummal formázni a tartalmat. Ezen kívül megtanulja, hogyan hozhat létre hivatkozásokat és listákat, és hogyan működik a HTML CSS és JavaScript gazdag, lebilincselő felhasználói élmények létrehozásához. Nyisson meg egy szövegszerkesztőt, nézze meg ezeket a videókat, és kezdje el megtanulni a HTML helyes megírását.

A témák a következők:

Miért fontos a HTML?
HTML dokumentum felfedezése
Tartalom formázása
Képek megjelenítése
Nav, article és div elemek használata
Oldalakra és letölthető tartalmakra mutató hivatkozások
Listák készítése
A stílus szabályozása (betűtípusok, színek és egyebek)
Alapvető forgatókönyvek írása