Html 01

189 views
131 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
189
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html 01

  1. 1. Prof. Ricardo Vocenomundo.net Aula 01 Conhecendo o HTML5
  2. 2. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net O que veremos hoje O que é HTML51 Quais as vantagens2 Alguns comandos3 Salvando e enviando4
  3. 3. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Html: Company Logo 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 HyperText Markup Language (Linguagem de marcação de hipertexto)
  4. 4. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net O que é HTML5 prático rápido colorido bonito Feito Pra vc HTML5 Novos recursos
  5. 5. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net O que é HTML5 O código fica oculto, e quem o digita é vc caro(a) aspirante a progamador!!
  6. 6. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net O código que você Não vê! Faça um teste vc mesmo(a) Abra seu navegador e clique Ctrl + U O página que vemos!
  7. 7. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net 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! O que é HTML5
  8. 8. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net 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. Canvas
  9. 9. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Tags de vídeo Incluir vídeos em HTML como conhecemos hoje, utilizando códigos para o “embed”, ou seja, incorporar vídeos à página será muito mais simples. Tags de vídeo
  10. 10. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Geolocalização Saber onde você está não é uma informação importante só para os seus pais, namorados ou namoradas. O HTML 5 também possui maneiras de descobrir a sua localização e informá-la aos sites e serviços que você acessa! Geolocalização Geolocalização
  11. 11. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Caching de aplicações Agora, com o HTML 5 os aplicativos web poderão ser acessados offline via cache. Leia mais em: http://www.tecmundo.com.br/navegador/2 254-o-que-e-html-5-.htm#ixzz27fFcSbBL Caching de aplicações
  12. 12. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net E o que muda para o usuário? Se você possui um perfil um pouco mais ligado às novidades tecnológicas, sentirá boas diferenças ao navegar pela Internet. 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.
  13. 13. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Então vamos começar Abra o bloco de notas: Digite igual ao próximo slide:
  14. 14. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Digitando Company Logo
  15. 15. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Agora vamos salvar: Vamos ser organizados 1. Vamos criar uma pasta na área de trabalho com o nome Projeto HTML5 2. Agora vamos no Bloco de notas e vamos em: Arquivo / Salvar Como / Index.html Lembre-se de salvar na pasta criada!
  16. 16. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net
  17. 17. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Agora vamos visualizar:
  18. 18. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net <DOCTYPE html> Pela nova nomenclatura as páginas que vão iniciar com comandos em html5 devem começar desse jeito.
  19. 19. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net <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.
  20. 20. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net <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.
  21. 21. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net <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.
  22. 22. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net H1 ao h7 <h1> serve para especificar o tamanho da fonte. • <h1> É a maior </h1><h1> • <h4> é um tamanho médio</h4> <h4> •<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><h7>
  23. 23. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Company Logo <h1> <h4>
  24. 24. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Antes de começar a explicação vamos colocar uma imagem Pegue uma imagem no google De tamanho médio Renomeia a imagem para= imagem1 Copie e cole pra sua pasta na Área de trabalho Obs.: O nome da extensão do arquivo não pode ser mudado somente o nome, exemplo: Ricardo_lindo.png imagem1.png
  25. 25. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Inserindo a imagem <img src="imagem1.jpeg"> Coloque do jeito que está acima!
  26. 26. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Vai ficar desse jeito www.thmemgallery
  27. 27. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net 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 www.thmemgallery
  28. 28. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Pegamos uma imagem na internet e colocamos na mesma pasta e inserimos o código img src= Digitamos o código na listagem acima… E salvamos como Index.html Dentro da pasta Projeto HTML Agora vamos aprender a colocar esse seu site on line : ) Resumo dos fatos até agora: Abrimos O bloco De notas Hospeda gem Imagem
  29. 29. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Orgfree.com Acesse: http://www.orgfree.com/ Clique aqui
  30. 30. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Free web hosting area.
  31. 31. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net nomedoseusite Entenda como se usa. Depois Escolha um subdomínio Escolha o nome pro seu site Eu coloquei o nome de music9035 vc pode escolher outro que for melhor para o seu projeto! Observações
  32. 32. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net 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! : )
  33. 33. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net 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!
  34. 34. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net www.thmemgallery Company Logo Copie em sua apostila a parte selecionadaSegredo!
  35. 35. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Pronto, agora vamos hospedar o nosso site... Clique em Iniciar do Windows > Computador e digite na barra de endereços:
  36. 36. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net ftp://ftp.6te.net
  37. 37. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Agora pra terminar: Lembra do Login e da senha que eu pedi pra vc copiar!
  38. 38. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Company Logo Após o preenchimento Clique em Logon
  39. 39. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Deletando os arquivos desnecessários Selecione todos os arquivos que aparecerem como ao lado.1 Delete-os, exceto os que tem um ponto na frente são chamados arquivos ocultos. 2 Agora vá em sua pasta Área de trabalho / Projeto HTML. 3
  40. 40. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Pasta vazia....
  41. 41. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Company Logo Copie e cole
  42. 42. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Ao terminar de copiar Clique em F5 para atualizar.1 Abra o seu navegador e digite o endereço do seu site, no meu caso é music9035.6te.net2
  43. 43. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Company Logo
  44. 44. Prof. Ricardo Vocenomundo.net Vocenomundo.net Obrigado a todos(as).

×