Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html 01

481 views

Published on

aula de html5

Published in: Education
  • Be the first to comment

Html 01

  1. 1. Vocenomundo.net Prof. RicardoConhecendo o HTML5 Aula 01
  2. 2. O que veremos hoje 1 O que é HTML5 2 Quais as vantagens 3 Alguns comandos 4 Salvando e enviando Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  3. 3. O que é HTML5 Você depende dele, mas não o vê a olho nu. O código HTML está presente nas páginas da web há mais de dez anos e tem uma larga aceitação dos usuários por todo o mundo. Leia mais em: http://www.tecmundo.com.br/navegador/2254-o-que-e-html-5- .htm#ixzz27f9AAH9O Html: HyperText Markup Language (Linguagem de marcação de hipertexto) Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com Company Logo
  4. 4. O que é HTML5 Novos recursos rápido colorido prático HTML5 bonito Feito Pra vc Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  5. 5. O que é HTML5 O código fica oculto, e quem o digita é vc caro(a) aspirante a progamador!! Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  6. 6. Faça um teste vc mesmo(a) Abra seu navegador e clique O código que você Não vê! Ctrl + U O página que vemos! Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  7. 7. O que é HTML5 Nessa nova linguagem, algumas dessas “etiquetas de marcação” mais objetivas. De modo geral, com essas e as outras novidades, será muito mais fácil navegar pela Internet! Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  8. 8. Canvas Canvas Especializadas em renderizar imagens em bitmap, as tags canvas serão específicas para a edição breve de imagens através de APIs ou JavaScript. Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  9. 9. Tags de vídeo Tags de vídeoIncluir vídeos em HTML como conhecemoshoje, utilizando códigos para o “embed”, ouseja, incorporar vídeos à página será muitomais simples. Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  10. 10. Geolocalização Geolocalização Saber onde você está não é uma informação importante só para os seus pais, namorados ou namoradas. Geolocalização O HTML 5 também possui maneiras de descobrir a sua localização e informá-la aos sites e serviços que você acessa! Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  11. 11. Caching de aplicações Caching de aplicaçõesAgora, com o HTML 5 os aplicativos webpoderão ser acessados offline via cache.Leia maisem: http://www.tecmundo.com.br/navegador/2254-o-que-e-html-5-.htm#ixzz27fFcSbBL Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com
  12. 12. E o que muda para o usuário?Se você possui um perfil um pouco maisligado às novidades tecnológicas,sentirá boas diferenças ao navegar pelaInternet. Isso porque o HTML 5 irá facilitar muito a vida de todos nós – quer sejamos desenvolvedores ou apenas usuários. Para os desenvolvedores, fica mais rápido produzir sites cada vez mais fáceis e limpo. Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com
  13. 13. Então vamos começar Abra o bloco de notas: Digite igual ao próximo slide: Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  14. 14. Digitando Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com Company Logo
  15. 15. Agora vamos salvar: Vamos ser organizados 1. Vamos criar uma pasta na área Lembre-se de trabalho com o nome de salvar na Projeto HTML5 pasta criada! 2. Agora vamos no Bloco de notas e vamos em: Arquivo / Salvar Como / Index.html Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  16. 16. Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  17. 17. Agora vamos visualizar: Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  18. 18. Antes de começar a explicação vamos colocar uma imagem Pegue uma imagem no google De tamanho médio Obs.: O nome da extensão Renomeia a imagem para= do arquivo não pode imagem1 ser mudado somente o nome, exemplo: Ricardo_lindo.png Copie e cole pra sua pasta na Área de trabalho imagem1.png Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  19. 19. Inserindo a imagem <img src="imagem1.jpeg"> Coloque do jeito que está acima! Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  20. 20. Vai ficar desse jeito Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.comwww.thmemgallery
  21. 21. Resumo dos fatos até agora: Abrimos O bloco Imagem Hospeda De notas gem Digitamos o código na Pegamos uma listagem acima… imagem na Agora vamos internet e aprender a E salvamos colocamos na colocar esse como mesma pasta e seu site on line Index.html inserimos o :) Dentro da pasta código img src= Projeto HTML Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  22. 22. Agora vamos coloca-lo na internet Acesse: http://www.orgfree.com/ Clique aqui Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  23. 23. Próxima página é de cadastro Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  24. 24. Escolha o nome pro seu site Depois Escolha um subdomíni o Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com Company Logowww.thmemgallery
  25. 25. Agora basta preencher Como se pede corretamente. Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  26. 26. Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  27. 27. Copie em sua apostila a parte selecionada Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com Company Logowww.thmemgallery
  28. 28. Pronto, agora vamos hospedar o nosso site...Clique em Inciar do Windows >Computador e digite na barra de endereços: Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  29. 29. ftp://ftp.6te.net Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  30. 30. Agora pra terminar: Copie os arquivos da pasta: Projeto HTML Para a pasta que se Abriu!!! Que é a do seu login Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  31. 31. Vocenomundo.net Prof. Ricardowww.themegallery.com

×