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,188

Published on

Aula de html 5

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

  • Be the first to like this

No Downloads
Views
Total Views
1,188
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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).
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×