Html 01

251 visualizações

Publicada em

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
251
No SlideShare
0
A partir de incorporações
0
Número de incorporações
56
Ações
Compartilhamentos
0
Downloads
1
Comentários
0
Gostaram
0
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. <DOCTYPE html> Pela nova nomenclatura as páginas que vão iniciar com comandos em html5 devem começar desse jeito. Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  19. 19. <html> .... </html> <html> Indica o início do site. Ele é fundamental pois é com essa TAG que o navegador sabe o que fazer. Após o <html> vem o que o site deve apresentar... </html> é sempre o último, não esqueça-o pois o seu site pode não funcionar direito. Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  20. 20. <head>.... <title></title>...</head> <head></head> Cabeçalho dentre outras coisas serve para especificarmos sobre o que é o site. E inserir scripts. <title></title> É o título que vai na aba do navegador. Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  21. 21. <body> É o corpo do site <body></body> O que se coloca entre um <body> e outro </body> é o que será visto no site. Ou seja toda a parte visual do site textos, imagens, filmes e qualquer coisa. Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  22. 22. H1 ao h7 <h1> serve para especificar o tamanho da fonte. • <h1> É a maior <h1> </h1> <h4> • <h4> é um tamanho médio</h4> <h7> • <h7> Lembrando que as fontes vão de h1 até h7, que é o menor tamanho. Veremos outras opções pra se trabalhar com fontes.</h7> Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  23. 23. <h1> <h4> Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com Company Logo
  24. 24. 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
  25. 25. Inserindo a imagem <img src="imagem1.jpeg"> Coloque do jeito que está acima! Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  26. 26. Vai ficar desse jeito Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.comwww.thmemgallery
  27. 27. Fique atento Se você pegar uma imagem com estenção (.jpg),(.jpeg), (png) e/ou (.gif). Lembre-se que é o: nome-da-imagem.estenção Carro.jpeg Cidade.jpg Foto_grande.png Anime.gif Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.comwww.thmemgallery
  28. 28. 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
  29. 29. Orgfree.com Acesse: http://www.orgfree.com/ Clique aqui Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  30. 30. Free web hosting area. Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  31. 31. Entenda como se usa. nomedoseusite Escolha o nome pro seu site Depois Escolha um Observações subdomínioEu coloquei o nome de music9035 vc podeescolher outro que for melhor para o seu Prof. Ricardo projeto! Facebook: Vocenomundo.net Ricardo.ware@gmail.com
  32. 32. cadastrando Coloque o endereço do seu email, pode ser um endereço falso. Crie uma senha e se possível anote, pois você vai precisar dela! Lembre-se de marcar esta opção Redigite os Captcha e mostre que vc é uma pessoa de verdade! : ) Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  33. 33. Preenchimento fácil e rápido. Por favor fique atento, caso não vá para a próxima tela veja qual o erro está em vermelho e tente corrigir! Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  34. 34. Copie em sua apostila a parte Segredo! selecionada Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com Company Logowww.thmemgallery
  35. 35. Pronto, agora vamos hospedar o nosso site...Clique em Iniciar do Windows >Computador e digite na barra de endereços: Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  36. 36. ftp://ftp.6te.net Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  37. 37. Agora pra terminar: Lembra do Login e da senha que eu pedi pra vc copiar! Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  38. 38. Após o preenchimento Clique em Logon Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com Company Logo
  39. 39. Deletando os arquivos desnecessários 1 Selecione todos os arquivos que aparecerem como ao lado. Delete-os, exceto os que 2 tem um ponto na frente são chamados arquivos ocultos. Agora vá em sua pasta 3 Área de trabalho / Projeto HTML. Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  40. 40. Pasta vazia.... Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  41. 41. Copie e cole Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com Company Logo
  42. 42. Ao terminar de copiar 1 Clique em F5 para atualizar. Abra o seu navegador e 2 digite o endereço do seu site, no meu caso é music9035.6te.net Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  43. 43. Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com Company Logo
  44. 44. Vocenomundo.net Prof. RicardoObrigado a todos(as). Vocenomundo.net

×