aula de html5

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. 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

19. Inserindo a imagem
<img src="imagem1.jpeg">
Coloque do jeito que está acima!
Prof. Ricardo
Facebook:
Vocenomundo.net Ricardo.ware@gmail.com

20. Vai ficar desse jeito
Prof. Ricardo
Facebook:
Vocenomundo.net Ricardo.ware@gmail.com
www.thmemgallery

21. 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

22. Agora vamos coloca-lo na
internet
Acesse:
http://www.orgfree.com/
Clique
aqui
Prof. Ricardo
Facebook:
Vocenomundo.net Ricardo.ware@gmail.com

23. Próxima página é de
cadastro
Prof. Ricardo
Facebook:
Vocenomundo.net Ricardo.ware@gmail.com

24. Escolha o nome
pro seu site Depois
Escolha
um
subdomíni
o
Prof. Ricardo
Facebook:
Vocenomundo.net Ricardo.ware@gmail.com
Company Logo
www.thmemgallery

25. Agora basta
preencher
Como se pede
corretamente.
Prof. Ricardo
Facebook:
Vocenomundo.net Ricardo.ware@gmail.com

26. Prof. Ricardo
Facebook:
Vocenomundo.net Ricardo.ware@gmail.com

27. Copie em sua
apostila a
parte
selecionada
Prof. Ricardo
Facebook:
Vocenomundo.net Ricardo.ware@gmail.com
Company Logo
www.thmemgallery

28. Pronto, agora vamos
hospedar o nosso site...
Clique em Inciar do Windows >
Computador e digite na barra de
endereços:
Prof. Ricardo
Facebook:
Vocenomundo.net Ricardo.ware@gmail.com

29. ftp://ftp.6te.net
Prof. Ricardo
Facebook:
Vocenomundo.net Ricardo.ware@gmail.com

30. Agora pra terminar:
Copie os arquivos da pasta:
Projeto HTML
Para a pasta que se
Abriu!!!
Que é a do seu login
Prof. Ricardo
Facebook:
Vocenomundo.net Ricardo.ware@gmail.com

31. Vocenomundo.net Prof.
Ricardo
www.themegallery.com