Html 01
Transferir como PPTX, PDF0 gostou274 visualizações
O documento apresenta uma aula introdutória sobre HTML5. Apresenta o que é HTML5, suas vantagens e alguns comandos básicos. Inclui instruções passo a passo para criar um arquivo HTML, inserir imagens, formatar texto e hospedar o site na internet usando um serviço gratuito.
Html 01
- 1. Vocenomundo.net Prof. Ricardo Conhecendo 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í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. 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çõ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 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 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. 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. <h1> <h4> Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com Company Logo
- 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. Inserindo a imagem <img src="imagem1.jpeg"> Coloque do jeito que está acima! Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com
- 26. Vai ficar desse jeito Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com www.thmemgallery
- 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.com www.thmemgallery
- 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. Orgfree.com Acesse: http://www.orgfree.com/ Clique aqui Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com
- 30. Free web hosting area. Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com
- 31. Entenda como se usa. nomedoseusite Escolha o nome pro seu site Depois Escolha um Observações subdomínio Eu coloquei o nome de music9035 vc pode escolher outro que for melhor para o seu Prof. Ricardo projeto! Facebook: Vocenomundo.net Ricardo.ware@gmail.com
- 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. 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. Copie em sua apostila a parte Segredo! selecionada Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com Company Logo www.thmemgallery
- 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. ftp://ftp.6te.net Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com
- 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. Após o preenchimento Clique em Logon Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com Company Logo
- 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. Pasta vazia.... Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com
- 41. Copie e cole Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com Company Logo
- 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. Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com Company Logo
- 44. Vocenomundo.net Prof. Ricardo Obrigado a todos(as). Vocenomundo.net