Html5

HTML 4 x HTML 5 HTML4 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 áudio Ex:<audio src= “som.mp3” controls= “controls”></audio> loop – define o número e vezes que o som será reproduzido Ex:<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 áudio Ex:<video src= “video.mov” controls= “controls”></video> loop – define o número e vezes que o som será reproduzido Ex:<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ários Outros tipos da tag <input> no formulário. <input type: ”____”> Segue: search tel url email datetime date month week time datetime-local number range color Estes tipos facilita o preenchimento de dados para os browsers mobile. Ex:

Novos recursos para formulários Outros 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 textarea placeholder- 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ários Facilita 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="{5}-?{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ários Facilita 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>

DragandDrop Novo atributo draggable (draggable=“true”) permite o usuário arrastar elementos na tela, juntamente com Javascript. Os eventos do objeto sendo arrastado são: ,[object Object]

drag- O objeto está sendo arrastado

dragend- A ação de arrastar terminouO objeto sobre o qual outro é arrastado sofre os seguintes eventos: ,[object Object]

Html5

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Html5

Ähnlich wie Html5 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (6)

Html5