Introdução ao HTML4 e HTML5

1.141 visualizações

Publicada em

Aula introdutória sobre o uso de HTML nas versões 4 e 5.

Publicada em: Educação
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
1.141
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
38
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • http://www.truquesedicas.com/tutoriais/html/00007a.htm
  • Similarao Word
  • Html 4 se tornou umpadrãoem 1999
  • http://www.w3schools.com/tags/tag_progress.asp
  • http://www.w3schools.com/tags/tag_article.asp
  • http://www.w3schools.com/html/html5_geolocation.asp
  • http://imasters.com.br/artigo/16455/desenvolvimento/html-5-na-pratica-canvas-parte-01/
  • http://www.w3schools.com/html/html5_form_input_types.asp
  • http://www.pageresource.com/html5/input-validation-tutorial/
  • http://www.w3schools.com/html/html5_draganddrop.asp
  • http://html5doctor.com/the-contenteditable-attribute/#live-examples
  • Introdução ao HTML4 e HTML5

    1. 1. SIntrodução ao HTML 4 e 5Prof. Leonardo Soares
    2. 2. HTMLS Não é uma linguagem de programaçãoS É uma linguagem de marcaçãoS Na programação para web é usada para apresentar elementosvisuaisS Utiliza uma síntaxe similar ao XMLS Utiliza tags <>S É guiado por uma específicação do W3C
    3. 3. Olá mundo!<html><head><title>Meu primeiro aplicativo</title></head><body><h1>Olá mundo!</h1></body></html>
    4. 4. HTML e linguagens deprogramaçãoS HTML não possui recursos de programacão, isto impossibilita:S O uso de repetiçõesS CondicionaisS Usar variáveis de programação, etc…S Apenas com HTML iremos produzir páginas estáticasS Ao associar HTML com linguagens de programaçãoproduziremos páginas dinâmicasS É uma boa prática evitar código de programação junto aoHTML
    5. 5. Tags HTMLS Tudo em HTML será representado através de tags <>S Sua sintaxe possui duas formas:S <tag />S <tag></tag>S Há também o uso de propriedades nas tags para alterar seucomportamentoS <tag height=“20px”>S Precisamos conhecer as tags HTML para saber o que pode serfeito com ele…
    6. 6. Estrutura de uma páginaHTMLS <html>S <head>S <body>
    7. 7. Tag <head>• <title> - Usada para determinar o título da página e seráexibido no topo da aplicação• <style> - Determina parâmetros de estilo CSS a seremaplicados na página• <script> - Scripts em javascript a serem utilizados na página• <meta> - Informações usadas para descrever a página
    8. 8. Tags HTML para textos• Podemos formatar os textos que serão exibidos ao usuário• Pode-se:• Aplicar negrito• Itálico• Subescrito
    9. 9. CabeçalhoS São os textos que, em geral, aparecem no início dapáginaS Há diferentes tags para representar diferentes tamanhos:S <h1>S <h2>S …S <h5>S ExemploS <h1>Olá mundo!</h1>
    10. 10. Tags HTML para estilos emtextos• <b> texto em negrito </b>• <i> texto em itálico </i>• Texto <sup> acima </sup>• Texto <sub> abaixo </sub>• Texto <small> menor </small>
    11. 11. Parágrafo e quebra de linha• Utilização de parágrafo em HTML:• <p> Texto dentro do parágrafo </p>• Quebra de linha em textos:• Texto em uma linha <br /> Textro em outra linha
    12. 12. exercício
    13. 13. links• Âncoras para acessar outras partes de um site• Tag <a>• Exemplo: <a href=“google.com”>Google</a>
    14. 14. Atributos da tag a• Href• Descrição: usado para especificar a url queserá carregada ao clicar no link• Target• Descrição: usado para especificar onde o linkserá aberto• Valores: _blank, _self, _parent, _top
    15. 15. Exemplo de uso da tag a• Exemplo:<a href=„index.html‟ target=„_parent‟>Texto do link</a>
    16. 16. Uso de imagens em HTML• Exibe uma imagem na página HTML• Tag <img>
    17. 17. Atributos da tag img• src• Descrição: especifica o caminho (pasta ou diretório)onde encontra-se a imagem• width• Descrição: especifica a largura da imagem• height• Descrição: especifica a altura da imagem• alt• Descrição: especifica o texto que irá aparecer quando omouse passar pela imagem
    18. 18. Exemplo do uso da tag imgS<img src=„audi.jpg‟ alt=„Versão…‟Sheight=„200px‟ width=„100px‟>
    19. 19. Links e imagens• É possível associar imagens a links
    20. 20. Exercício1. Incluir uma imagem em uma página HTML2. Associar um link a esta imagem
    21. 21. Lista de itens não ordenada• Este é um exemplo de lista não ordenada• Tag <ul> e vários <li>
    22. 22. Lista de itens não ordenada• Exemplo:S<ul>S <li>Item 1.</li>S <li>Item 2.</li>S <li>Item 3.</li>S</ul>
    23. 23. Lista de itens ordenada• Este é um exemplo de lista ordenada• Tag <ol> e vários <li>
    24. 24. Lista de itens ordenada• Exemplo:S<ol>S <li>Item 1.</li>S <li>Item 2.</li>S <li>Item 3.</li>S</ol>
    25. 25. Exercício• Criem lista ordenadas e não ordenadas em vários itens• Façam o uso de ambas as listas
    26. 26. HTML 5S HTML 4 não dá mais… obsoleto!S Flash também não!S Uma nova forma de pensar o desenvolvimento para awebS Não é apenas HTML, mas também uma API DOM
    27. 27. Principais recursos do HTML 5S Suporte a vídeo e audioS Gráficos 2d/3dS Armazenamento local ou com SQLS GeolocalizaçãoS Validação de formulários
    28. 28. ProgressS Certas operações levam algum tempo para seremrealizadasS O usuário precisa ser informado sobre seu progressoS <progress></progress>
    29. 29. DataS Em algumas situações desejamos armazenar informações emnossas tagsS Por exemplo:S <div id=“carro” marca=“toyota”>S O problema é que isto é inválido do ponto de vista da validaçãoHTMLS Uma alternativa está no uso de atributos data-S <div id =“carro” data-marca=“toyota”>
    30. 30. Media tagsS VideosS <video src=“” controls />S AudioS <audio src=“” />
    31. 31. GeolocalizaçãoS Com o HTML 5 também trás a possibilidade de obter alocalização do usuárioS Este recurso é útil para aplicações ou sites que mudem ou seadaptem quando houver essa informaçãoS A forma como a localização é obtida varia de dispositivo paradispositivo
    32. 32. GráficosS Um dos princípios do HTML 5 é evitar o uso de pluginsexternos, como o FlashS É introduzido uma forma de criar gráficos denominadocanvasS É possível exibir elementos 2D, 3G, imagens em SVGS Será utilizado uma linguagem de scripting (em geral oJavaScript)
    33. 33. Novos inputsS Até o HTML 4 haviam basicamente 3 formas de inserirdados em um formulárioS <select> <textarea> <input>S Tinhamos de fazer várias modificações para lidar comcores, datas, e-mail, númerosS Agora foram adicionadas novas formas de entrada quefacilitam este processo
    34. 34. Exemplos de input
    35. 35. Validação de formulárioS Validar dados é um processo necessário para garantirque informações corretas estão sendo inseridas nosistemaS Normalmente fazemos de duas forma:S Validação no clienteS Validação no servidorS Observando que é um processo bastante comum oHTML 5 oferece algumas validações prontas
    36. 36. DraggableS Arrastar e soltar é uma operação bastante comumS Antes utilizávamos frameworks javascript, como o jQueryS Agora temos uma forma padronizada de fazer isto
    37. 37. Armazenamento
    38. 38. Item editávelS Partes de nosso site podem ser editáveis, e permitir istoera um problema…S JavascriptS CSSS HTMLS Provê uma edição WYSIWYG

    ×