Html 01
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Html 01

  • 655 views
Uploaded on

Mostrando o básico pra se fazer um site, ...

Mostrando o básico pra se fazer um site,
e criando uma página online

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
655
On Slideshare
467
From Embeds
188
Number of Embeds
1

Actions

Shares
Downloads
5
Comments
0
Likes
0

Embeds 188

http://vocenomundo.net 188

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Vocenomundo.net Prof. RicardoConhecendo o HTML5 Aula 01
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Digitando Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com Company Logo
  • 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. Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  • 17. Agora vamos visualizar: Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  • 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. <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. <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. <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. 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. 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
  • 24. Inserindo a imagem <img src="imagem1.jpeg"> Coloque do jeito que está acima! Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  • 25. Vai ficar desse jeito Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.comwww.thmemgallery
  • 26. 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
  • 27. 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
  • 28. Orgfree.com Acesse: http://www.orgfree.com/ Clique aqui Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  • 29. Free web hosting area. Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  • 30. 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
  • 31. 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
  • 32. 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
  • 33. Copie em sua apostila a parte Segredo! selecionada Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com Company Logowww.thmemgallery
  • 34. 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
  • 35. ftp://ftp.6te.net Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  • 36. Agora pra terminar: Lembra do Login e da senha que eu pedi pra vc copiar! Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  • 37. Após o preenchimento Clique em Logon Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com Company Logo
  • 38. 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
  • 39. Pasta vazia.... Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
  • 40. Copie e cole Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com Company Logo
  • 41. 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
  • 42. Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com Company Logo
  • 43. Vocenomundo.net Prof. RicardoObrigado a todos(as). Vocenomundo.net