O documento fornece instruções sobre como criar um site HTML5 simples em 3 etapas: 1) Abrir o Bloco de Notas e digitar código HTML básico com uma imagem. 2) Salvar o arquivo como "Index.html" em uma pasta. 3) Hospedar o site gratuitamente usando um serviço online.

1. Conhecendo o HTML5
Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12
xxxxxx 8 10-17 15/09/2014
Instrutor: Ricardo Paladini Matos
Elielso Dias
turmascedaspybsl@gmail.com
1 O que é HTML5
2 Quais as vantagens
3 Alguns comandos
4 Salvando e enviando

2. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12
xxxxxx 8 10-17 15/09/2014
Instrutor: Ricardo Paladini Matos
Elielso Dias
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.
Html:
HyperText Markup Language (Linguagem de marcação de
hipertexto)

3. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12
xxxxxx 8 10-17 15/09/2014
Instrutor: Ricardo Paladini Matos
Elielso Dias
prático
rápido
colorido
bonito
Feito
Pra vc
HTML5
Novos recursos

4. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12
xxxxxx 8 10-17 15/09/2014
Instrutor: Ricardo Paladini Matos
Elielso Dias
O que é HTML5
O código fica oculto, e quem o digita é
vc caro(a) aspirante a progamador!!

5. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12
xxxxxx 8 10-17 15/09/2014
Instrutor: Ricardo Paladini Matos
Elielso Dias
Faça um teste vc mesmo(a)
Abra seu navegador e clique
Ctrl + U
O página que vemos!
O código que você
Não vê!

6. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12
xxxxxx 8 10-17 15/09/2014
Instrutor: Ricardo Paladini Matos
Elielso Dias
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!

7. Geolocalização
Geolocalização
Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12
xxxxxx 8 10-17 15/09/2014
Instrutor: Ricardo Paladini Matos
Elielso Dias
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!

8. Caching de aplicações
Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12
xxxxxx 8 10-17 15/09/2014
Instrutor: Ricardo Paladini Matos
Elielso Dias
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/navegad
or/2254-o-que-e-html-5-.htm#ixzz27fFcSbBL

9. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12
xxxxxx 8 10-17 15/09/2014
Instrutor: Ricardo Paladini Matos
Elielso Dias
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.

10. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12
xxxxxx 8 10-17 15/09/2014
Instrutor: Ricardo Paladini Matos
Elielso Dias
Então vamos começar
Abra o bloco de notas:
Digite igual ao
próximo slide:

11. Elielso Dias Digitando
Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12
xxxxxx 8 10-17 15/09/2014
Instrutor: Ricardo Paladini Matos

12. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12
xxxxxx 8 10-17 15/09/2014
Instrutor: Ricardo Paladini Matos
Elielso Dias
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 /
Lembre-se de
salvar na pasta
criada!
Index.html

13. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12
xxxxxx 8 10-17 15/09/2014
Instrutor: Ricardo Paladini Matos
Elielso Dias

14. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12
xxxxxx 8 10-17 15/09/2014
Instrutor: Ricardo Paladini Matos
Elielso Dias

15. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12
xxxxxx 8 10-17 15/09/2014
Instrutor: Ricardo Paladini Matos
Elielso Dias
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:
elielsolindo.png
imagem1.png

16. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12
xxxxxx 8 10-17 15/09/2014
Instrutor: Ricardo Paladini Matos
Elielso Dias
Inserindo a imagem
<img src="imagem1.jpeg"> Coloque do jeito que está acima!

17. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12
xxxxxx 8 10-17 15/09/2014
Instrutor: Ricardo Paladini Matos
Elielso Dias
Vai ficar desse jeito

18. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12
xxxxxx 8 10-17 15/09/2014
Instrutor: Ricardo Paladini Matos
Elielso Dias
Resumo dos fatos até agora:
Abrimos
O bloco
De notas
Hospeda
gem
Imagem
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 : )

19. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12
xxxxxx 8 10-17 15/09/2014
Instrutor: Ricardo Paladini Matos
Elielso Dias
Agora vamos coloca-lo
na internet
Acesse:
http://www.orgfree.com/
Clique
aqui

20. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12
xxxxxx 8 10-17 15/09/2014
Instrutor: Ricardo Paladini Matos
Elielso Dias
Próxima página é de cadastro

21. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12
xxxxxx 8 10-17 15/09/2014
Instrutor: Ricardo Paladini Matos
Elielso Dias
Depois
Escolha um
subdomínio
Escolha o nome
pro seu site

22. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12
xxxxxx 8 10-17 15/09/2014
Instrutor: Ricardo Paladini Matos
Elielso Dias
Agora basta preencher
Como se pede
corretamente.

23. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12
xxxxxx 8 10-17 15/09/2014
Instrutor: Ricardo Paladini Matos
Elielso Dias

24. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12
xxxxxx 8 10-17 15/09/2014
Instrutor: Ricardo Paladini Matos
Elielso Dias
Copie em sua
apostila a parte
selecionada

25. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12
xxxxxx 8 10-17 15/09/2014
Instrutor: Ricardo Paladini Matos
Elielso Dias
Pronto, agora vamos hospedar o nosso site...
Clique em Inciar do Windows >
Computador e digite na barra de endereços:

26. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12
xxxxxx 8 10-17 15/09/2014
Instrutor: Ricardo Paladini Matos
Elielso Dias
ftp://ftp.6te.net

27. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12
xxxxxx 8 10-17 15/09/2014
Instrutor: Ricardo Paladini Matos
Elielso Dias

28. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12
xxxxxx 8 10-17 15/09/2014
Instrutor: Ricardo Paladini Matos
Elielso Dias
Aqui digite
o usuário e
senha que
você
anotou.

29. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12
xxxxxx 8 10-17 15/09/2014
Instrutor: Ricardo Paladini Matos
Elielso Dias
Agora pra terminar:
Copie os arquivos da pasta:
Projeto HTML
Para a pasta que se
Abriu!!!
Que é a do seu login