Html 01
•Descargar como PPTX, PDF•
0 recomendaciones•1,576 vistas
O documento apresenta uma aula introdutória sobre HTML5 ministrada pelo professor Ricardo. Na aula, ele explica o que é HTML5, quais são suas vantagens e mostra alguns comandos básicos. Ele também ensina como salvar e publicar um arquivo HTML na internet para compartilhamento.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (15)
Similar a Html 01
Similar a Html 01 (20)
Más de Ricardo neves
Más de Ricardo neves (20)
Html 01
- 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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:
- 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!
- 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. 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. 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. 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. 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. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Company Logo <h1> <h4>
- 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. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Inserindo a imagem <img src="imagem1.jpeg"> Coloque do jeito que está acima!
- 26. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Vai ficar desse jeito www.thmemgallery
- 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. 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
- 30. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Free web hosting area.
- 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. 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. 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. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net www.thmemgallery Company Logo Copie em sua apostila a parte selecionadaSegredo!
- 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:
- 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. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Company Logo Após o preenchimento Clique em Logon
- 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
- 41. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Company Logo Copie e cole
- 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