Příklady použití některých nových funkcí HTML5. Co HTML5 NENÍ. Nové funkce formuláře

Pokud vytváříte šablonu od začátku, musíte začít od něčeho. Vzhledem k tomu, že standard HTML5 je „rozšířený po celé zemi“, v tomto článku uvedu příklad prázdné šablony HTML5.

Nový standard hodně zjednodušil a nyní základní část vypadá takto:

...

Nové HTML5 tagy

V HTML5 bylo zavedeno několik nových značek pro strukturu kódu: , , , , , které v některých případech nahrazují obvyklé . To bylo provedeno pro vyhledávací roboty, aby mohli lépe rozpoznat kód stránky a oddělit hlavní obsah od pomocných prvků.

Použití nových značek prázdná šablona HTML5 může vypadat takto:

Název stránky Navigační nabídka Postranní panel Obsah bočního panelu - hlavní obsah stránky. Zápatí webu

Zjednodušení psaní DOCTYPE

Připomeňme si, jak to bylo dříve, v HTML4 značka DOCTYPE vypadala takto:

Nyní je záznam minimální, jednodušší už to asi být nemůže:

K podobným zjednodušením došlo i u dalších značek, takže přechod na standard HTML5 výrazně zjednodušuje psaní.

Volitelné značky v HTML5

Nová norma přinesla velkou úlevu návrhářům rozvržení. Zejména použití HTML prvky, HEAD a BODY již nejsou pro značení HTML5 vyžadovány. Pokud neexistují, prohlížeč si stále myslí, že existují. Ve skutečnosti jediná věc, která zbývá v HTML5, je .

Výklad ruštiny jako hlavního jazyka jazyk HTML dokument

Tag definuje jazyk dokumentu. Na internetu se pravidelně objevují diskuse o jeho správném pravopisu, zejména o správném pravopisu „ru-RU“. Přikláním se k názoru, že „-RU“ je nadbytečné, protože ruský jazyk nemá dialekty a hláskování jako angličtina (britská a americká). Přípona RU určuje, kde se mluví rusky. To znamená, pokud en-US znamená " anglický jazyk mluvený v USA“, pak ru-RU znamená „rusky mluvené v Rusku“, což je nadbytečné.

Nic špatného se však nestane, pokud budete nadále používat možnost „ru-RU“.

Jednoduchý dokument HTML5

Podívejme se na jeden z nejjednodušších HTML5 dokumentů. Začíná určením typu dokumentu pomocí speciálního kódu popisu typu dokumentu (význam tohoto kódu je vysvětlen v další části), následuje kódování a název dokumentu a poté jeho obsah. V v tomto případě Obsah tvoří jeden odstavec textu:

Malý dokument HTML5

Tento jednoduchý dokument lze ještě dále zjednodušit. Například ve standardu HTML5 není koncová značka ve skutečnosti vyžadována, protože prohlížeče vědí, jak vše zavřít otevřené prvky na konci dokumentu (a standard HTML5 toto chování legalizuje). Ale ořezávání, jako je toto, místo zjednodušení ztěžuje pochopení označení a může způsobit neočekávané chyby.

Většina webových vývojářů zastává názor, že použití tradičních sekcí je užitečné pro snazší pochopení dokumentu, protože jasně oddělují informace o stránce (název stránky) od samotného obsahu (těla stránky). Tato struktura je užitečná zejména při přidávání skriptů, šablon stylů a meta prvků na stránku:

Malý dokument HTML5

Pojďme zatřást prohlížečem ve stylu HTML5!

Nakonec lze celý dokument (kromě řádku doctype) zabalit do tradičního prvku, jak je znázorněno v následujícím seznamu:

Malý dokument HTML5

Pojďme zatřást prohlížečem ve stylu HTML5!

Až do HTML5 vyžadovala použití prvku každá verze oficiální specifikace HTML, i když přítomnost tohoto prvku nijak neovlivňuje způsob, jakým prohlížeč zpracovává zbytek kódu stránky. V HTML5 je použití tohoto prvku zcela ponecháno na osobním uvážení vývojáře.

Použití prvků , a je pouze otázkou stylu. Stránka bez těchto prvků bude perfektně fungovat i na starších prohlížečích, které o HTML5 nikdy ani neslyšely. Prohlížeč ve skutečnosti automaticky předpokládá přítomnost těchto prvků. Pokud se tedy podíváte na DOM (soubor softwarových objektů, které představují stránku) stránky pomocí skriptu JavaScript, bude obsahovat objekty pro prvky , a , i když je vývojář nepoužil.

Na v tomto stádiu Tato ukázková stránka je někde mezi nejzákladnějším HTML5 dokumentem a pokročilým výchozím bodem pro praktickou HTML5 webovou stránku. V dalších částech k němu přidáme zbytek potřebné prvky a zavrtat se hlouběji do značení.

Popis typu dokumentu HTML5

První řádek každého dokumentu HTML5 vždy popisuje typ dokumentu. Tento popis jasně ukazuje, že to, co následuje, je obsah HTML5, a vypadá takto:

První věc, kterou si všimnete na typu dokumentu HTML5, je jeho úžasná jednoduchost. Porovnejte to například s neohrabaným popisem typu dokumentu, který musí weboví vývojáři používat při práci s přísným XHTML 1.0:

Dokonce i profesionální weboví vývojáři byli nuceni vložit popis typu dokumentu XHTML zkopírováním a vložením z jiného dokumentu. A popis typu dokumentu HTML5 je krátký, jasný a snadno se zadává ručně.

Popis typu dokumentu HTML5 je také pozoruhodný tím, že neobsahuje oficiální číslo. HTML verze(5 pro HTML5). Jednoduše uvádí, že stránka je stránka HTML. To je v souladu s novým konceptem HTML5 jako živého jazyka. Nové funkce přidané do HTML jsou automaticky dostupné pro umístění na stránku, aniž by bylo nutné měnit popis typu dokumentu.

To vše vyvolává obtížnou otázku: pokud je HTML5 živý jazyk, proč tedy stránka vůbec potřebuje popis typu dokumentu?

Odpověď na tuto otázku je, že popis typu dokumentu se nadále používá historické důvody. Při zpracování stránky s chybějícím popisem typu dokumentu většina prohlížečů (včetně internet Explorer a Firefox) přejděte na režim kompatibility (režim quirks). V tomto režimu se pokoušejí vykreslit stránku na základě chyb v pravidlech používaných v dřívějších verzích. Problém je v tom, že režim kompatibility jednoho prohlížeče se může lišit od režimu kompatibility jiného prohlížeče, v důsledku čehož budou stránky navržené pro jeden prohlížeč s největší pravděpodobností zobrazovat chyby v jiném prohlížeči, jako je nesprávná velikost písma, nefunkční rozložení a tak dále.

A když prohlížeč najde na stránce popis typu dokumentu, ví, že zpracování této stránky musí probíhat podle přísnějších pravidel standardní režim, který zajišťuje konzistentní formátování a strukturu stránky při zobrazení jakýmkoli moderním prohlížečem. Až na výjimky je prohlížeči zcela lhostejné, jaký typ dokumentu je v popisu uveden. Jednoduše zkontroluje, že stránka má nějaký druh popisu typu dokumentu. Popis typu dokumentu HTML5 je jednoduše nejkratší platný popis typu dokumentu, který umožňuje standardní režim prohlížeče.

Kódování znaků

Kódování je standard, který říká počítači, jak převést text na sekvenci bajtů při zápisu textu do souboru (a také jak inverzní konverze při otevírání souboru). Z historických důvodů je jich mnoho různá kódování. V současné době téměř všechny webové stránky používají kompaktní a rychlé kódování UTF-8, které podporuje všechny ostatní abecedy, které kdy budete potřebovat.

Webové servery jsou často nakonfigurovány tak, aby sdělily prohlížečům, které je navštíví, že stránky, které server nabízí, mají určité kódování. Nemůžete si však být jisti, že webový server, na kterém plánujete hostovat svůj web, bude takto nakonfigurován (pokud to není váš). vlastní server). Navíc pokus prohlížeče uhodnout nejpravděpodobnější použité kódování může selhat kvůli nějaké nejasné bezpečnostní chybě. Z těchto důvodů byste měli vždy zahrnout informace o kódování použitém v označení stránky.

HTML5 tento úkol usnadňuje. Chcete-li to provést, stačí vložit prvek na úplný začátek bloku (nebo, pokud prvek není použit, ihned za kód popisu typu dokumentu):

Malý dokument HTML5

Nástroje pro vývoj webu, jako je Dreamweaver nebo Expression Web, vkládají tento prvek automaticky při vytváření stránky. Tyto nástroje také umožňují ukládání souborů do UTF kódování. Při vytváření webové stránky pomocí běžného textového editoru však možná budete muset provést další kroky, abyste zajistili uložení souborů ve správném kódování.

Jazyk

Za dobrou formu se považuje označení přirozeného jazyka webové stránky. Tyto informace mohou být někdy užitečné pro ostatní, např. vyhledávače můžete jej použít k filtrování výsledků vyhledávání tak, aby vracely pouze stránky v určeném jazyce.

Nejjednodušší způsob, jak vložit jazykové informace na webovou stránku, je prostřednictvím prvku:

Informace o jazyce mohou být také užitečné, pokud stránka obsahuje text různé jazyky, který je třeba číst pomocí čtečky textu na obrazovce. V tomto případě se vloží atribut lang s odpovídajícím kódem jazyka na správném místě dokument, například do prvků pokrývajících text v různých jazycích. Tímto způsobem je čtečka textu na obrazovce schopna určit, jaký text může číst.

Přidání šablony stylů

Téměř každá stránka správně navrženého profesionálního webu používá šablony stylů. Chcete-li zadat požadovanou šablonu stylů, použijte prvek v bloku dokumentu HTML5:

Malý dokument HTML5

Tato metoda je podobná specifikování šablon stylů v tradičních HTML dokumentech, ale je trochu jednodušší. Protože jazyk je jen jeden kaskádové tabulky styles - CSS, pak již není nutné přidávat atribut type="text/css", který byl dříve vyžadován.

Přidání kódu JavaScript

Jazyk JavaScript skripty byl původně vytvořen jako pracný způsob, jak přidat lesk a kouzlo nudným webovým stránkám. V současné době se hlavní využití JavaScriptu přesunulo od vývoje rozhraní zvonků a píšťalek k vývoji vlastních webových aplikací, včetně velmi efektivních klientů. E-mailem, textové editory a mapové nástroje, které běží přímo v prohlížeči.

Kód JavaScript se vkládá do dokumentu HTML5 v podstatě stejným způsobem, jako se vkládá do tradiční stránky HTML. Následující výpis je příkladem vložení kódu JavaScript do webového dokumentu pomocí odkazu na externí soubor:

Malý dokument HTML5

Atribut language="JavaScript" je volitelný, protože pokud není specifikován jiný skriptovací jazyk (a protože JavaScript je jediným široce podporovaným skriptovacím jazykem pro HTML, pravděpodobnost, že k tomu dojde, je zanedbatelná), prohlížeče automaticky předpokládají, že je použit JavaScript. Ale i při odkazování na externí soubor JavaScriptu si stále musíte pamatovat uzavírací značku. Pokud tuto značku přehlédnete kvůli nedopatření nebo při pokusu o zkrácení kódu pomocí syntaxe prázdné prvky, pak stránka nebude fungovat správně.

Pokud trávíte hodně času testováním stránek JavaScriptu v aplikaci Internet Explorer, může být užitečné přidat štítek MOTW (zn síť- štítek síťové funkce) v bloku bezprostředně za kódovacím řádkem. To se provádí takto:

Malý dokument HTML5

Tento řádek kódu říká aplikaci Internet Explorer, aby se stránkou zacházela, jako by byla načtena ze vzdáleného webu. Jinak se IE přepne na zvláštní zacházení blokování, zobrazí v řádku zprávy bezpečnostní varování a odmítne provést jakékoli JavaScript kód dokud nekliknete na tlačítko „Povolit blokovaný obsah“.

Všechny ostatní prohlížeče značku MOTW ignorují a používají stejné nastavení zabezpečení pro obě stránky načtené ze vzdálených webových stránek a místní soubory HTML.

Dnes si povíme něco o sémantice v HTML5. Už jsem psal malý recenzní příspěvek o . Doporučuji, abyste se s ním před čtením tohoto článku nejprve seznámili. Nyní se na tuto problematiku podíváme podrobněji, jak správně a kompetentně sestavit sémantickou strukturu dokumentu HTML5.

V tomto článku budeme postupně tvořit html stránku a navrhněte jej pomocí sémantických značek HTML5.

Výkres - Sémantická struktura pro stránku HTML5.

DOCTYPE a meta tagy v názvu stránky

Začněme se standardní šablonou dokumentu HTML5 a přidejte metaznačky do hlavy:

Název stránky

Přidal jsem značku, která je zodpovědná klíčová slova. A značku, která je zodpovědná za popis stránky. Pro SEO optimalizace tyto značky jsou povinné. Je také nutné správně vyplnit štítek. Název stránky musí být unikátní pro celý web a obsahovat v názvu celou podstatu stránky, pro kterou je specifikován.

Pojďme dále. HTML5 má nové značky, které se používají sémantické označení dokument. Tento hlavičkové značky, navigace, hlavní, článek, stranou, zápatí atd. Z hlediska zobrazení fungují stejně jako běžné tagy, tedy jsou to blokové prvky. Ale pokud to nemá sémantické zatížení, pak by se hlavička, navigace, hlavní a další měly používat pouze smysluplně.

Název stránky

Záhlaví stránky je formátováno v tagu header. Vezměte prosím na vědomí, že název stránky je napsán pomocí značky h1.

Titulek webové stránky

Pokud máme u nadpisu i slogan, pak jej umístíme do p, div nebo span.

Titulek webové stránky

slogan webu

Poznámka ke značce H1

Je třeba poznamenat, že v HTML5 se značka H1 používá k označení názvu kontejneru, ve kterém se nachází (může to být záhlaví, sekce, článek atd.)

Před příchodem HTML5 tagů byla sémantika poněkud odlišná a odlišná. Takže v HTML4 mohl být pouze jeden nadpis H1 na stránku! Zpravidla se jednalo o nadpis článku nebo nadpis stránky (např. jde-li o stránku kategorie, na které je zobrazeno několik článků.) H2 se používal pro podnadpisy, případně pro sekce hlavního článku. H3 pro podsekce a tak dále.

Navigace na stránce

Návrh hlavní navigace na webu by měl být obsažen v značce nav. Měli byste také pamatovat na to, že se považuje za dobrou praxi navrhnout navigaci s prvky seznamu.

• Domov
• Portfolio
• Galerie
• Kontakty

Obsah na stránce

Hlavní obsah stránky je formátován v hlavním tagu. Může to být jeden článek nebo několik náhledů článků, pokud mluvíme o stránce blogu s několika položkami. Do hlavní značky nemůžete umístit postranní panel, záhlaví stránky, zápatí nebo hlavní navigaci!

...obsah hlavní stránky...

Design článku

Tag článku se používá k zalamování článků. Obecně tato značka obsahuje blok obsahu, který lze vyjmout z kontextu stránky a použít samostatně jinde. Může to být článek (celý text článku nebo náhled), příspěvek na fóru atd.

V níže uvedeném příkladu jsem ukázal design článku v kontextu, uvnitř hlavní značky. Článek má blok záhlaví s názvem článku. Datum zveřejnění článku je stanoveno se speciálním štítkemčas, který se zobrazuje jako normální vložený prvek. Časová značka má speciální atribut, ve kterém musí být uveden čas publikace ve strojovém formátu. Může to být jen datetime="2015-09-30" nebo hodiny, minuty a sekundy datetime="2015-09-30T15:25:55" . Parametr pubdate označuje, že článek byl publikován ve stejnou dobu jako byl napsán. Pokud se jedná o zprávy, může se stát, že čas zpráv je jedna a čas zveřejnění je jiný, proto musíte zadat časový tag dvakrát a zadat pubdate pouze do tagu, kde je uveden čas zveřejnění.

... Název článku 30. září Podnázev článku

Lorem ipsum dolor sit amet, consectetur adipisicing elita. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?

Z výše uvedeného příkladu je zřejmé, že tagy záhlaví a zápatí byly použity uvnitř článku pro zvýraznění nadpisu a zápatíčlánky.

Postranní panel nebo sloupec s widgety

Pro každého individuální prvek postranní panel používáme blok stranou. Uvnitř je název naformátován pomocí značky h1. Sloupec postranního panelu tedy může vypadat takto:

Název widgetu... Poslední poznámky... Oblíbené komentáře ...

Značka sekce

Značka sekce se používá k reprezentaci skupiny nebo sekce tematicky souvisejícího obsahu. Její použití je podobné jako u článku s tím hlavním rozdílem, že obsah v prvku může být mimo kontext samotné stránky bezvýznamný. K označení tématu sekce se doporučuje používat značky ( – ).

Chcete-li uvést příklad článku, který právě čtete, můžete každý odstavec zabalit do značky. Značku sekce lze například použít ke zvýraznění bloků obsahu na vstupní stránce. Zní to podobně jako definice prvek div, který se často používá jako kontejner pro obsah. Rozdíl je v tom, že div nemá sémantický význam a neříká nic o obsahu uvnitř. Značka sekce se naopak používá k jasnému označení toho, že obsah v ní souvisí významem. Některé ze svých značek div můžete nahradit značkami sekcí, ale vždy si položte otázku: „Souvisí tento obsah nebo ne?“

Příklad použití značky sekce v seznamu měst:

An Event Apart Cities

Přidejte se k nám v těchto městech v roce 2010.

Seattle

Pokračujte po žluté cihlové cestě.

Boston

To je Beantown svým přátelům.

Minneapolis

To je milé.

Ubytování není zajištěno.

Zápatí webu - Zápatí

Zápatí webu je navrženo se značkou

© 2015 stránky Copyright

Závěr

Ke kontrole struktury stránky můžete použít nástroj HTML5 outliner. Zobrazuje strukturu stránky podle bloků a nadpisů.

Sémantika v HTML5 není omezena na značky uvedené výše v článku. Pomocí uvedených příkladů však můžete své označení obnovit a web učinit uživatelsky přívětivějším. vyhledávače, což ovlivní vyšší hodnocení webu ve výsledcích vyhledávání.

Chcete-li pokračovat v tomto tématu, můžete prozkoumat další nové značky HTML5. Stejně jako mikroformáty pro navrhování a strukturování dat, jako je schema.org

Důležitá poznámka k používání značek HTML5. Specifikace nespecifikuje striktní pravidla pro použití sémantických značek, poskytuje pouze doporučení pro jejich použití. Pokud nerozumíte nebo nevíte, kde a jakou značku HTML5 použít, je lepší použít div - abyste nepoškodili nebo neporušili strukturu dokumentu.

Články a materiály

Standard HTML5 se stále více používá v moderním webdesignu. A přestože je stále ve vývoji, mnoho jeho standardů již bylo schváleno a používá je každý moderní prohlížeče včetně mobilních.

V tomto článku se podíváme na některé nové funkce HTML5 s konkrétními příklady, jak je využít v praxi.

Nový DOCTYPE

Připomeňme si, jak se určuje typický XHTML dokument v sekci DOCTYPE:

‹! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"›

Deklarování typu dokumentu ve značkovacím jazyce vypadá mnohem stručněji a čitelněji

‹!DOCTYPE html›

Navíc můžete tento DOCTYPE použít při rozvržení jakékoli stránky. Pokud prohlížeč nezná HTML5, zobrazí stránku ve standardním režimu.

Vylepšená sémantika kódu

Vylepšená sémantika kódu umožňuje vyhledávačům jasně rozlišovat mezi typy obsahu na stránce a samostatným obsahem důležitá informace, zvýšit hodnocení stránky pro vyhledávací dotazy.

Prvky záhlaví a zápatí

Nyní se můžete zbavit konstrukcí jako

‹div id="header"› … ‹/div› ‹div id="footer"› … ‹/div›

A začít používat takové, které jsou srozumitelnější jak pro lidi, tak pro stroje

‹header› … ‹/header› ‹footer› … ‹/footer›

‹div› podle původu nemají žádnou sémantickou strukturu a mohou být vnořeny vícekrát do sebe a do jiných kontejnerů. Použití promyšlenější sémantické struktury umožňuje vyhledávači jasně rozlišit, kde se nachází záhlaví, zápatí a hlavní informační část.

prvek OBRÁZEK

Zvažte následující část kódu:

‹img src="mars.jpg" alt="O Marsu" /› ‹p›This is an image of Mars‹/p› !}

V tomto případě je pro vyhledávače obtížné určit, že značka ‹p› obsahující popis obrázku je ve skutečnosti jeho popisem. Proto je lepší takové konstrukce spojit do společného kontejneru, kterým je ‹obrázek ›:

‹figure› ‹img src="mars.jpg" alt="O Marsu" /› ‹figcaption› ‹p›This is an image of Mars‹/p› ‹/figcaption› ‹/figure› !}

V tomto případě bude dodatečný štítek‹figcapture› , který určuje, co je obsahem obrázku a jaký je jeho název

Pomocí hgroup

Představte si, že záhlaví vašeho webu se skládá z hlavního nadpisu a podnadpisu. Použití obvyklých značek ‹h1› a ‹h2› žádným způsobem neodráží vztah mezi těmito dvěma položkami. Proto je lze sémanticky kombinovat pomocí tagu ‹hgroup›:

‹header› ‹hgroup› ‹h1›Fotogalerie‹/h1› ‹h2›Naše volné místo v Praze‹/h2› ‹/hgroup› ‹/header›

Žádné typy pro připojení skriptů a stylů

Možná stále používáte struktury k připojení skriptů, knihoven, šablon stylů atd. následujícího formuláře:

‹link rel="stylesheet" href="stylesheet.css" type="text/css" /› ‹script src="script.js" type="text/javascript"›‹/script›

Nyní tedy již není potřeba specifikovat typ souboru, který má být zahrnut. Prohlížeč to automaticky rozpozná. To znamená, že atribut type již není nutný:

‹link rel="stylesheet" href="stylesheet.css" /› ‹script src="script.js"›‹/script›

Struktura kódu

Standard XHTML vyžadoval, aby hodnoty atributů byly uvedeny v jednoduchých nebo dvojitých uvozovkách. Standard HTML5 umožňuje vynechat použití uvozovek, pokud nejsou nutné, tzn. hodnota atributu je uvedena jedním slovem bez mezer. Navíc nemusíte ani zavírat spárované prvky. Zde je příklad:

‹p class=myClass id=pId›Obsah

To však může narušit čitelnost kódu ze strany vývojáře. Styl psaní kódu je tedy zcela na vás, protože starý (léty prověřený) styl je stále podporován.

Upravitelný obsah

HTML5 vám umožňuje plně upravovat obsah vašich webových stránek bez nutnosti vkládání skrytá pole zadejte text. Vše, co musíte udělat, je přidat atribut contenteditable="true" (nebo bez uvozovek, jak jsme se dozvěděli v předchozím odstavci) k prvku, který chcete upravit. Poté bude uživatel moci upravovat její obsah přímo ze stránky.

V tomto případě může uživatel přidávat, mazat a upravovat položky v neuspořádaném seznamu ‹ul›. Níže je uveden příklad seznamu, jehož položky lze změnit

• Sledovat televizi
• Poslouchat hudbu
• Hrát videohry

Nové funkce formuláře

HTML5 poskytuje uživatelům a vývojářům skvělé příležitosti pro zadávání informací do formulářů. Pro tyto účely bylo přidáno mnoho užitečných věcí. Podívejme se na některé z nich.

Pole pro zadání e-mailu

Použijte atribut type="email" ke značce ‹input› a vstupní pole budou mít další jedinečné schopnosti pro kontrolu správnosti zadané adresy, a pokud je adresa zadaná špatně, prohlížeč uživateli zobrazí varovnou zprávu.

‹input id="email" name="email" type="email" /›

Výsledek by mohl být takový ( Google Chrome):

K dispozici jsou také další vstupní pole, jako jsou adresy webových stránek nebo telefonní čísla. Princip jejich fungování je podobný jako u pole email.

Pomocí nápověd

Nyní již není potřeba používat javascript k vytváření zástupných symbolů pro vstup textová pole. HTML5 doporučuje použít speciální atribut zástupný symbol , který může zobrazit popisek s textem na pozadí pro pole.

‹input name="email" type="email" placeholder=" [e-mail chráněný]" /›

Výsledek je uveden níže:

Tento příklad bude fungovat pouze v prohlížečích, které podporují HTML5

E-mailem:

Autofokus

Bez pomocí javascriptu po načtení stránky můžete automaticky aktivovat prvek. Chcete-li to provést, musíte do pole, které je třeba zadat jako první, přidat atribut bez parametrů.

‹input name="name" type="text" autofocus /›

Pole pro jméno se automaticky aktivuje a bude připraveno k zadání textu.

Povinná pole

Pokud potřebujete označit některá pole jako povinná, nyní stačí zadat atribut. Při odesílání formuláře tedy prohlížeč zkontroluje, zda povinná pole a pokud ne, zobrazí se zpráva.

‹input name="name" type="text" placeholder="John Smith" required /› !}

Níže je ilustrace výsledku tohoto kódu (Google Chrome):

Vstup rozsahu

HTML5 představuje absolutně nový prvek ovládací prvky – vstup rozsahu, což je posuvník, jehož hodnota se mění tažením speciální značky mezi přednastavenými hodnotami.

‹input type="range" name="quantity" min="0" max="100" step=".25" value="10" /›

Atributy min a max se používají k nastavení extrémních hodnot posuvníku, step je krok, ve kterém se hodnota mění. Prohlížeč Google Chrome zobrazuje tento ovládací prvek takto:

Tento příklad bude fungovat pouze v prohlížečích, které podporují HTML5

Místní úložiště

Místní úložiště umožňuje uložit informace zadané uživatelem, pokud je stránka prohlížeče zavřena nebo znovu načtena. To je velmi výhodné zejména v případech, kdy je formulář poměrně velký a web byl omylem uzavřen.

Sám od sebe Místní úložiště není součástí specifikace HTML5, ale úzce s ní souvisí.

Místní úložiště je spravováno prostřednictvím objektu třídy localStorage pomocí dvou metod setData() a getData() . Níže je uveden příklad, který používá výše popsaný upravitelný seznam, ve kterém budou uloženy poslední hodnoty zadané do něj.

‹h1›Seznam úkolů‹/h1› ‹ul contenteditable=true› ‹li›Sledování televize‹/li› ‹li›Poslouchejte hudbu‹/li› ‹li›Hrajte videohry‹/li› ‹/ul›

JavaScript (pomocí jQuery knihovny, ale je to volitelné):

$("#todo").blur(funkce () ( localStorage.setItem("todoData", this.html); )); if (localStorage.getItem("todoData")) ( $("#todo").html(localStorage.getItem("todoData")); )

Podpora multimédií

Nyní již není potřeba k připojení používat pluginy a knihovny třetích stran různé audio a video soubory. Všechny možnosti vkládání médií jsou nyní zahrnuty ve specifikaci HTML5.

Zvuk

Pro vložení na stránku zvukový soubor musíte použít značku ‹audio› s potřebnými atributy. Níže uvedený příklad zobrazuje na stránce ovládací blok pro zvukový soubor obsahující odkaz ke stažení tohoto souboru. Zvuk se přehraje automaticky.

‹ovládání automatického přehrávání zvuku›
‹source src="file.ogg" /›
‹source src="soubor.mp3" /›
‹a href="file.mp3"›Stáhnout tento soubor.‹/a›

Na stránce tento blok může vypadat takto ( Prohlížeč Google Chrome)

U této značky Prohlížeče mají své vlastní podpůrné funkce. Například, Prohlížeč Mozilla Firefox pracuje se soubory .ogg, zatímco prohlížeče Webkit pracují se soubory .mp3

Video

Až donedávna bylo jediným způsobem, jak vložit videoobsah do stránky HTML, integrace obsahu Flash. Tuto schopnost však nyní poskytují samotné prohlížeče, které splňují specifikace HTML5. To získalo zvláštní popularitu, když největší web pro hostování videa YouTube.com přešel na formát HTML5.

Chcete-li úspěšně integrovat video na stránku, musíte použít značku ‹video›. Bohužel mezi výrobci prohlížečů nepanuje shoda, v jakém formátu by mělo být video prezentováno, takže každý z nich propaguje svůj vlastní formát. Zatímco IE a Safsri podporují video H.264 (které podporovaly přehrávače Flash), Opera a Firefox propagují open source Formáty Vorbis a Theora. Chrome na druhou stranu umí správně zobrazovat videa ve všech formátech, včetně WebM.

‹předběžné načtení ovládacích prvků videa› ‹source src="video.ogv" type="video/ogg; codecs="vorbis, theora"" /› ‹source src="video.mp4" type="video/mp4; codecs=" avc1.42E01E, mp4a.40.2"" /› ‹p›Váš prohlížeč je starý. ‹a href="video.mp4"›Stáhněte si místo toho toto video.‹/a› ‹/p› ‹/video›

Ne všechny prohlížeče umí zobrazit video HTML5, takže pod značkou ‹source› můžete zadat odkaz ke stažení videa nebo integrovat přehrávač Flash.

Atribut preload umožňuje prohlížeči automaticky zahájit načítání videa, což se může hodit, pokud je video dostatečně velké. Atribut controls umožňuje nastavit standardní ovládací prvky video streamu.

Další důkaz toho, že ať se nám to líbí nebo ne, HTML5 se zde vážně a na dlouhou dobu zabydlelo a JIŽ se stalo standardem. Udělali jsme zajímavé recenze na toto téma v našem časopise již dříve, přičemž uvádíme příklady luxusních nových stránek navržených pomocí HTML5. Abych se neopakoval, rozhodl jsem se nabídnout vám nový výběr vzorky nejsou součástí předchozí publikace, která demonstruje nejmodernější pokroky, které HTML5 umožňuje. Některé z nich však nejsou tak nové, ale existují i ​​velmi nedávné příklady. A také několik míst v originální design které lze vysledovat, i když zatím ne příliš jasně, k novým, ale již zavedeným technikám.

Doufám, že vás výběr inspiruje a potěší. Celosvětový webčeká na své inovátory!

Chtěli jste někdy vidět epizody z vašeho vlastního života jako video k videoklipu k písni jedné z vašich oblíbených kapel? Díky HTML5 je to nejen možné, ale také snadno proveditelné ve vašem prohlížeči. Přejděte na stránku The Wilderness Downtown a zadejte adresu svého dětského domova. A pak sledujte a užijte si úžasnou cestu do vaší minulosti, kde vás The Arcade Fire vezme do hudby Google mapy a Chris Milk (filmový režisér).

02.

Kompaktní a flexibilní operační systém zapnutý Na bázi Linuxu, která vám poskytuje neomezený přístup k aplikacím, které potřebujete – jak síťovým, tak vestavěným.

03.

Chcete vidět slovo nebo frázi napsané ve všech fontech zabudovaných ve vašem počítači, prezentované trochu pohodlněji než v rozbalovací nabídce? No, prosím. Zkus to sám!

04.

Proč jsem nedostal tuto hru? základní škola kdy jsem se naučil psát? Vážně, pokud se vám podaří se od ní odtrhnout, aniž byste dosáhli „10 útoku“, pak jste člověk se silnější vůlí než já. Z-type stimuluje rozvoj rychlého a kompetentního psaní pomocí prvku HTML5 Canvas, zvukové efekty a javascript ve vesmírném prostředí, kde vás ohrožují mimozemšťané a asteroidy. Pojď, zkus to!

05.

Kdo řekl, že přímočarost a chytlavost (vlastní například Flash prvkům) rrrr otravuje? Nike určitě ne, protože stránky této společnosti, krásně navržené a na pohled vůbec neurážlivé, nám jasně demonstrují schopnosti HTML5, pokud jde o zobrazování přírodních krás zcela novým způsobem. Přijďte se podívat.

06.

Nejnovější a nejlepší (ačkoli kontroverzní) způsob, jak poskytnout důkaz, že to, co jste viděli na obloze, nebyla iluze, je zachytit to na tomto plátně HTML5, které vyvinuli kluci z Klowdz. Můžete si dokonce koupit výtisky svého umění! Slibují také, že v blízké budoucnosti otevřou „soutěžní“ sekci, kde se můžete s přáteli donekonečna dohadovat o tom, čí pravá hemisféra mozku je lépe vyvinutá.

07.

Další ze zajímavých projektů série „Chrome Experiments“, Canvas Cycle, je jako editační okno zabudované do vašeho herní konzole Super Nintendo. S jeho pomocí lze vybírat 8bitové epizody z celé řady z nich, upravovat parametry přehrávání zvuku, měnit měřítko obrazu, nastavovat rychlost cyklického přehrávání (pohyb vody/zvuku), aplikovat různé úpravy cyklů a samozřejmě , různé barvy.

08.

3D kalkulačka vytvořená pomocí HTML5, která vám umožňuje prohlížet 3D grafy jejich otáčením pomocí tlačítek myši. Co sem mohu přidat? Točit se!

09.

Tato výbušná směs mě „chytla“ více než všechny ostatní příklady v našem výběru. Proč? Ano, protože Google Maps API umožňuje pořídit upravené cibulové slupky obrázku pomocí HTML5 Canvas. Skvělé je, že možností využití této funkce je i přes její praktičnost evidentně nepřeberné množství. V našem konkrétním případě vidíme, kolik kol je aktuálně k dispozici k zapůjčení v síti London Cycle na základě dat získaných prostřednictvím Boris Bikes API.

10.

Webová aplikace, která vám dává možnost extrahovat obrázky z různých síťové zdroje, jako je Flickr, a upravovat/ukládat je pomocí základní sady velmi výkonných nástrojů pro zpracování.