Aula 8 web

975 visualizações

Publicada em

Aula 8

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
975
No SlideShare
0
A partir de incorporações
0
Número de incorporações
688
Ações
Compartilhamentos
0
Downloads
11
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula 8 web

  1. 1. Conhecendo o HTML5 Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 8 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias turmascedaspybsl@gmail.com 1 O que é HTML5 2 Quais as vantagens 3 Alguns comandos 4 Salvando e enviando
  2. 2. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 8 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias 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. Html: HyperText Markup Language (Linguagem de marcação de hipertexto)
  3. 3. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 8 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias prático rápido colorido bonito Feito Pra vc HTML5 Novos recursos
  4. 4. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 8 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias O que é HTML5 O código fica oculto, e quem o digita é vc caro(a) aspirante a progamador!!
  5. 5. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 8 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias Faça um teste vc mesmo(a) Abra seu navegador e clique Ctrl + U O página que vemos! O código que você Não vê!
  6. 6. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 8 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias 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!
  7. 7. Geolocalização Geolocalização Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 8 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias 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!
  8. 8. Caching de aplicações Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 8 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias 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/navegad or/2254-o-que-e-html-5-.htm#ixzz27fFcSbBL
  9. 9. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 8 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias 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.
  10. 10. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 8 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias Então vamos começar Abra o bloco de notas: Digite igual ao próximo slide:
  11. 11. Elielso Dias Digitando Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 8 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos
  12. 12. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 8 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias 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 / Lembre-se de salvar na pasta criada! Index.html
  13. 13. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 8 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias
  14. 14. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 8 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias
  15. 15. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 8 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias 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: elielsolindo.png imagem1.png
  16. 16. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 8 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias Inserindo a imagem <img src="imagem1.jpeg"> Coloque do jeito que está acima!
  17. 17. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 8 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias Vai ficar desse jeito
  18. 18. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 8 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias Resumo dos fatos até agora: Abrimos O bloco De notas Hospeda gem Imagem 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 : )
  19. 19. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 8 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias Agora vamos coloca-lo na internet Acesse: http://www.orgfree.com/ Clique aqui
  20. 20. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 8 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias Próxima página é de cadastro
  21. 21. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 8 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias Depois Escolha um subdomínio Escolha o nome pro seu site
  22. 22. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 8 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias Agora basta preencher Como se pede corretamente.
  23. 23. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 8 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias
  24. 24. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 8 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias Copie em sua apostila a parte selecionada
  25. 25. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 8 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias Pronto, agora vamos hospedar o nosso site... Clique em Inciar do Windows > Computador e digite na barra de endereços:
  26. 26. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 8 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias ftp://ftp.6te.net
  27. 27. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 8 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias
  28. 28. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 8 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias Aqui digite o usuário e senha que você anotou.
  29. 29. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 8 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias Agora pra terminar: Copie os arquivos da pasta: Projeto HTML Para a pasta que se Abriu!!! Que é a do seu login

×