Html 01

469 visualizações

Publicada em

aula de html5

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

Sem downloads
Visualizações
Visualizações totais
469
No SlideShare
0
A partir de incorporações
0
Número de incorporações
136
Ações
Compartilhamentos
0
Downloads
7
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

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

×