Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Prof.
Ricardo
Vocenomundo.net
Aula 01
Conhecendo o HTML5
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
O que veremos hoje
O que é HTML51
Quais as vantagens2
Algun...
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
Html:
Company Logo
O que é HTML5
Você depende dele, mas não...
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
O que é HTML5
prático
rápido
colorido
bonito
Feito
Pra vc
H...
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
O que é HTML5
O código fica oculto, e quem
o digita é vc ca...
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 se...
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
Nessa nova linguagem, algumas dessas
“etiquetas de marcação...
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
Canvas
Especializadas em renderizar imagens em
bitmap, as t...
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
Tags de vídeo
Incluir vídeos em HTML como conhecemos
hoje, ...
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
Geolocalização
Saber onde você está não é uma informação
im...
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
Caching de aplicações
Agora, com o HTML 5 os aplicativos we...
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
E o que muda para o
usuário?
Se você possui um perfil um po...
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
Então vamos começar
Abra o bloco de notas:
Digite igual
ao ...
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
Digitando
Company Logo
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
Agora vamos salvar:
Vamos ser organizados
1. Vamos criar um...
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
Agora vamos visualizar:
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
<DOCTYPE html>
Pela nova nomenclatura as páginas que vão in...
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
<html> .... </html>
<html> Indica o início do site. Ele é f...
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
<head>.... <title></title>...</head>
<head></head>
Cabeçalh...
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
<body> É o corpo do site
<body></body>
O que se coloca entr...
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
H1 ao h7
<h1> serve para especificar o tamanho da
fonte.
• ...
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net Company Logo
<h1>
<h4>
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
Antes de começar a explicação
vamos colocar uma imagem
Pegu...
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
Inserindo a imagem
<img src="imagem1.jpeg">
Coloque do jeit...
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
Vai ficar desse jeito
www.thmemgallery
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
Fique atento
Se você pegar uma imagem com
estenção (.jpg),...
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
Pegamos uma
imagem na
internet e
colocamos na
mesma pasta e...
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
Orgfree.com
Acesse:
http://www.orgfree.com/
Clique
aqui
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
Free web hosting area.
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
nomedoseusite
Entenda como se usa.
Depois
Escolha um
subdom...
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
cadastrando
Coloque o endereço do seu email,
pode ser um en...
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
Preenchimento fácil e rápido.
Por favor fique
atento, caso ...
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
www.thmemgallery Company Logo
Copie em sua
apostila a
parte...
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
Pronto, agora vamos
hospedar o nosso site...
Clique em Inic...
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
ftp://ftp.6te.net
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
Agora pra terminar:
Lembra do Login e
da senha que eu
pedi ...
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net Company Logo
Após o
preenchimento
Clique em Logon
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
Deletando os arquivos
desnecessários
Selecione todos os arq...
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
Pasta vazia....
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net Company Logo
Copie e cole
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net
Ao terminar de copiar
Clique em F5 para
atualizar.1
Abra o ...
Facebook:
Ricardo.ware@gmail.com
Prof. Ricardo
Vocenomundo.net Company Logo
Prof.
Ricardo
Vocenomundo.net
Vocenomundo.net
Obrigado a todos(as).
Upcoming SlideShare
Loading in …5
×

Html 01

1,470 views

Published on

Aula de html 5

  • Be the first to comment

  • Be the first to like this

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).

×