Html5

HTML5elcio@visie com br. .

HTML

JS CSS

Server Programing

Mark-up

JS CSS3

Server Programing

APIs

HTML5

Mark up-

Mark up-<!DOCTYPE HTML>

<html lang='pt-BR'>

<head>

<meta charset='UTF-8'>

<title>Produto</title>

</head>

<body>

Mark up-

<header>

<hgroup>

<h1><a href='/'>Projeto</a></h1>

<h2>Um projeto HTML5</h2>

</hgroup>

<nav>

<li><a href='/'>Home</a></li>

<li><a href='/projeto'>Projeto</a></li>

<li><a href='/contato'>Contato</a></li>

</nav>

</header>

Mark up-<section>

<article>

<h3>Sobre o Produto</h3>

<p>...</p>

</article>

<aside>

<h4>Links relacionados</h4>

<nav>

<li><a href='top1'>Tópico 1</a></li>

<li><a href='top2'>Tópico 2</a></li>

</nav>

<aside>

</section>

Mark up-<section>

<h5>Fale conosco:</h5>

<form>

<label>Nome <input required

/></label>

<label>E-mail <input type='email'

required /></label>

<label>URL <input type='datetime'

required /></label>

</form>

</section>

Mark up-<footer>

<h6>Produto</h6>

<address>Rua Tal, 0</address>

</footer>

</body>

</html>

Novos Tipos de Campos

Demonstracao

Conteudo Editavel

Drag and Drop- -

Aplicacoes Offline

Demonstracao

History

Demonstracao

Geolocation

Demonstracao

Detalhes

● <input oninput=”trata(this)”>● elm.scrollIntoView()● elm.innerHTML='<p>Teste</p>'● document.querySelector('#titulo')● document.head

Audio e Video

Demonstracao

Posso usar isso hoje?

modernizr js e .progressive enhancement

tableless com br html5. . /

diveintohtml5 org.

Obrigado!elcio@visie com br. .

Html5

Documents

Transcript of Html5