Vocenomundo.net    Prof.                             RicardoConhecendo o HTML5                   Aula 01
O que veremos hoje                  1     O que é HTML5                  2   Quais as vantagens                  3    Algu...
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 ano...
O que é HTML5   Novos recursos                             rápido                                                 colorido...
O que é HTML5                              O código fica oculto, e quem                                  o digita é vc car...
Faça um teste vc mesmo(a)    Abra seu navegador e           clique               O código que você                        ...
O que é HTML5                       Nessa nova linguagem, algumas dessas                      “etiquetas de marcação” mais...
Canvas                         Canvas                   Especializadas em renderizar imagens em                   bitmap, ...
Tags de vídeo   Tags de vídeoIncluir vídeos em HTML como conhecemoshoje, utilizando códigos para o “embed”, ouseja, incorp...
Geolocalização                            Geolocalização                         Saber onde você está não é uma informação...
Caching de aplicações   Caching de aplicaçõesAgora, com o HTML 5 os aplicativos webpoderão ser acessados offline via cache...
E o que muda para o                usuário?Se você possui um perfil um pouco maisligado às novidades tecnológicas,sentirá ...
Então vamos começar   Abra o bloco de notas:                               Digite igual                               ao p...
Digitando                          Prof. Ricardo                                 Facebook:Vocenomundo.net           Ricard...
Agora vamos salvar:      Vamos ser organizados    1. Vamos criar uma pasta na área              Lembre-se         de traba...
Prof. Ricardo                         Facebook:Vocenomundo.net   Ricardo.ware@gmail.com
Agora vamos visualizar:                                Prof. Ricardo                                        Facebook:Vocen...
<DOCTYPE html>       Pela nova nomenclatura as páginas que vão iniciar        com comandos em html5 devem começar desse   ...
<html> .... </html>                     <html> Indica o início do site. Ele é fundamental                     pois é com e...
<head>.... <title></title>...</head>      <head></head>  Cabeçalho dentre outras coisas  serve para especificarmos sobre  ...
<body> É o corpo do site                        <body></body>            O que se coloca entre um <body> e outro </body>  ...
H1 ao h7           <h1> serve para especificar o tamanho da                            fonte.                          • <...
<h1>                  <h4>                         Prof. Ricardo                                Facebook:Vocenomundo.net  ...
Antes de começar a explicação              vamos colocar uma imagem  Pegue uma imagem no google       De tamanho médio    ...
Inserindo a imagem   <img src="imagem1.jpeg">  Coloque do jeito que está acima!                                     Prof. ...
Vai ficar desse jeito                                      Prof. Ricardo                                             Faceb...
Fique atento  Se você pegar uma imagem com   estenção (.jpg),(.jpeg), (png) e/ou   (.gif). Lembre-se que é o:           ...
Resumo dos fatos até agora:           Abrimos           O bloco           Imagem          Hospeda           De notas      ...
Orgfree.com         Acesse: http://www.orgfree.com/                                Clique                                 ...
Free web hosting area.                                Prof. Ricardo                                        Facebook:Voceno...
Entenda como se usa.            nomedoseusite           Escolha o nome             pro seu site                           ...
cadastrando                          Coloque o endereço do seu email,                          pode ser um endereço falso....
Preenchimento fácil e rápido.                                      Por favor fique                                    aten...
Copie em sua                                   apostila a                                     parte                   Segr...
Pronto, agora vamos              hospedar o nosso site...Clique em Iniciar do Windows >Computador e digite na barra de    ...
ftp://ftp.6te.net                            Prof. Ricardo                                   Facebook:Vocenomundo.net     ...
Agora pra terminar:                              Lembra do Login e                               da senha que eu          ...
Após o                   preenchimento                  Clique em Logon                       Prof. Ricardo               ...
Deletando os arquivos              desnecessários                        1                            Selecione todos os a...
Pasta vazia....                                Prof. Ricardo                                       Facebook:Vocenomundo.ne...
Copie e cole                  Prof. Ricardo                         Facebook:Vocenomundo.net   Ricardo.ware@gmail.com     ...
Ao terminar de copiar                  1    Clique em F5 para                            atualizar.                      A...
Prof. Ricardo                         Facebook:Vocenomundo.net   Ricardo.ware@gmail.com                            Company...
Vocenomundo.net    Prof.                                                   RicardoObrigado a todos(as).               Voce...
Próximos SlideShares
Carregando em…5
×

Html 01

271 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
271
No SlideShare
0
A partir de incorporações
0
Número de incorporações
52
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

×