Html5

HTML 4 x HTML 5HTML4 não possui tags especificas para melhor divisão do código. No HTML 4 isto é feito por ID

Vantagens HTML 5 Otimização da linguagem: Cabeçalho : <!DOCTYPE html >Includes: <script src= “javascript.js”></script><style src= “estilo.css”></style>Meta: <meta charset= “utf-8” />Fim de divs

Alguns dos novos elementos<header> - Topo da página<nav> - Sessão de navegação<article> - Define um conteúdo externo. Ex: notícia, artigo, texto.<footer> - Rodapé da página<aside> - É utilizada para representar conteúdo que está relacionado com outro conteúdo dentro de um contexto (<article>) <details> - descrever detalhes de um documento, ou trechos <meter> – usada para representar medidas<time> – representa data e/ou hora

Audio e HTML5 <audio>Define um som, podendo ser música, podcast, entre outros. Qualquer conteúdo dentro da tag de áudio será um texto alternativo caso o navegador utilizado não suporte a tag.<audio src="musica.mp3"> Seu navegador não suporta o elemento de áudio.</audio>Aributos da tag <audio>: autoplay - execução automática do arquivo após carregamento. Ex:<audio src= “som.mp3” autoplay= “autoplay”></audio>controls - especifica se deve ou não exibir os controles de áudioEx:<audio src= “som.mp3” controls= “controls”></audio> loop – define o número e vezes que o som será reproduzidoEx:<audio src= “som.mp3” loop= “10”></audio>Para oferecer um formato alternativo de áudio basta inserir a tag source. Ex:<audio controls="true" autoplay="true"> <source src="mus.oga" /> <source src="mus.mp3" /> <source src="mus.wma" /> </audio>

Video e HTML5 <video>Define um vídeo. Qualquer conteúdo dentro da tag de áudio será um texto alternativo caso o navegador utilizado não suporte a tag. Essa tag promete aposentar a tag <embed><video src="musica.mov"> Seu navegador não suporta o elemento de vídeo.</audio>Aributos da tag <video>: autoplay - execução automática do arquivo após carregamento. Ex:<video src= “video.mov” autoplay= “autoplay”></video>controls - especifica se deve ou não exibir os controles de áudioEx:<video src= “video.mov” controls= “controls”></video> loop – define o número e vezes que o som será reproduzidoEx:<video src= “video.mov” loop= “10”></video>Para oferecer um formato alternativo de vídeo basta inserir a tag source. Ex:<video controls="true" autoplay="true"> <source src="mus.mov" /> <source src="mus.mp4" /> <source src="mus.avi" /> </video>

Dialog e HTML5 <dialog>Define um diálogo ou uma conversa.Exemplo de como usar: <dialog><dt>Pedro</dt><dd>Oi Lyvia como vai você?</dd><dt>Lyvia</dt><dd>Vou bem e você?</dd><dt>Pedro</dt><dd>Tudo ótimo!</dd></dialog>

Figure e HTML5 <figure>É utilizada pra inserir uma legenda relacionada a uma imagem, vídeo, áudio, objeto, etc.Exemplo de como usar: <figure><img src="imagem.jpg" alt="imagem" title="imagem" /><legend>Figura 1. Este texto tem relação com a imagem acima.</legend></figure>

Canvas e HTML5 <canvas>Elemento gráfico do HTML5. Capaz de criar diversos formatos via javascript. Consegue de maneira fácil criar gráficos, composições de fotos e animações usando JavaScript. Facilita no desenvolvimento de jogos, entre outros.Exemplo de como usar: <canvas id="tutorial" width="300" height="300"></canvas>Incluindo um javascript com as propiedades de formas. Ex: fillStyle, strokeStyle, fillRect,strokeRect , etc..Página html: http://bit.ly/9PZg7b

FormuláriosOutros tipos da tag <input> no formulário. <input type: ”____”> Segue:search telurlemaildatetimedate monthweektimedatetime-localnumberrangecolorEstes tipos facilita o preenchimento de dados para os browsers mobile. Ex:

Novos recursos para formuláriosOutros atributos na tag <input> no formulário, antes usado somente em linguagens de servidor como DOT.NET. Segue:autofocus- O foco será colocado neste campo automaticamente ao carregar a página.required- Para tornar um campo de formulário obrigatório (seu valor precisa ser preenchido).maxlenght – Com HTML5 também é permitido usar este atributo no textareaplaceholder- Ele mostra um texto em cinza clarinho na área de texto que desaparece quando o textarea está em foco ou tem algum valor. Antes só era possível com javascript.http://bit.ly/9PZg7b

Validações de formuláriosFacilita o processo de validação tornando automática no HTML5.pattern- permite definir expressões regulares de validação, sem Javascript . Ex: <label for="CEP">CEP:<input name="CEP" id="CEP" required pattern="\d{5}-?\d{3}" /></label>novalidate – quando precisa que o formulário não seja validado. Inserir o atributo no form.formnovalidate- quando necessita que o formulário não seja validado dependendo da ação de submit. Pode usar no botão de submit este atributo. Ex: <input type="submit" name="action" value="Salvar rascunho" formnovalidate>

Validações de formuláriosFacilita o processo de validação tornando automática no HTML5.oninput- O evento é disparado quando algo é modificado no valor de um campo de formulário. Diferente de onchange, que é disparado ao final da edição, oninput é disparado ao editar. É diferente também de onkeyup e onkeypress, porque vai capturar qualquer modificação no valor do campo, feita com mouse, teclado ou outra interface qualquer. <label>CPF: <input name="cpf" oninput="vCPF(this)" /></label>

DragandDropNovo atributo draggable (draggable=“true”) permite o usuário arrastar elementos na tela, juntamente com Javascript.Os eventos do objeto sendo arrastado são:dragstart- O objeto começou a ser arrastado. O evento que a função recebe tem um atributo target, que contém o objeto sendo arrastado.

drag- O objeto está sendo arrastado

dragend- A ação de arrastar terminouO objeto sobre o qual outro é arrastado sofre os seguintes eventos:dragenter- O objeto sendo arrastado entrou no objeto target

Html5

Mais conteúdo relacionado

Mais procurados (20)

Semelhante a Html5 (20)

Último (12)

Html5