Baixar para ler offline
Carregado porRicardo neves
Html 01
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.
Mais conteúdo relacionado
Html 01
- 1.
- 2. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net O queveremos 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 Oque é 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ódigoque 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 novalinguagem, 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 emrenderizar 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 deví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 ondevocê 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 deaplicaçõ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 oque 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 vamoscomeçar Abra o bloco de notas: Digite igual ao próximo slide:
- 14.
- 15. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Agora vamossalvar: 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.
- 17.
- 18. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net <DOCTYPE html> Pelanova 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çalhodentre 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 aoh7 <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.
- 24. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Antes decomeç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 aimagem <img src="imagem1.jpeg"> Coloque do jeito que está acima!
- 26. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Vai ficardesse jeito www.thmemgallery
- 27. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Fique atento Sevocê 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 imagemna 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.
- 30.
- 31. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net nomedoseusite Entenda comose 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 oendereç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ácile 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 CompanyLogo Copie em sua apostila a parte selecionadaSegredo!
- 35. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Pronto, agoravamos hospedar o nosso site... Clique em Iniciar do Windows > Computador e digite na barra de endereços:
- 36.
- 37. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Agora praterminar: Lembra do Login e da senha que eu pedi pra vc copiar!
- 38. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net CompanyLogo Após o preenchimento Clique em Logon
- 39. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Deletando osarquivos 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.
- 41.
- 42. Facebook: Ricardo.ware@gmail.com Prof. Ricardo Vocenomundo.net Ao terminarde 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.
- 44.