Aula 8 web

Aula: Pág: Data:10 10 a 17 18-jan-122503-BTurma:

Instrutor: Ricardo Paladini Matos

xxxxxx 8 10-17 15/09/2014

Elielso Dias

[email protected]

Conhecendo o HTML5

O que é HTML51

Quais as vantagens2

Alguns comandos3

Salvando e enviando4

mailto:[email protected]



xxxxxx 8 10-17 15/09/2014

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)



xxxxxx 8 10-17 15/09/2014

Elielso Dias

prático

rápidocolorido

bonito

FeitoPra vc

HTML5

Novos recursos



xxxxxx 8 10-17 15/09/2014

Elielso Dias

O que é HTML5

O código fica oculto, e quem o digita é vc caro(a) aspirante a progamador!!



xxxxxx 8 10-17 15/09/2014

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ê!



xxxxxx 8 10-17 15/09/2014

Elielso Dias

O que é HTML5Nessa 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!



xxxxxx 8 10-17 15/09/2014

Elielso Dias

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!

Geolocalização



xxxxxx 8 10-17 15/09/2014

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/navegador/2254-o-que-e-html-5-.htm#ixzz27fFcSbBL

Caching de aplicações

http://www.tecmundo.com.br/navegador/2254-o-que-e-html-5-.htm#ixzz27fFcSbBL



xxxxxx 8 10-17 15/09/2014

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 avida de todos nós – quer sejamosdesenvolvedores ou apenas usuários.

Para os desenvolvedores, fica mais rápido produzir sites cada vez mais fáceis e limpo.



xxxxxx 8 10-17 15/09/2014

Elielso Dias

Então vamos começarAbra o bloco de notas:

Digite igual ao próximo slide:



xxxxxx 8 10-17 15/09/2014

Elielso Dias Digitando



xxxxxx 8 10-17 15/09/2014

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



xxxxxx 8 10-17 15/09/2014

Elielso Dias



xxxxxx 8 10-17 15/09/2014

Elielso Dias



xxxxxx 8 10-17 15/09/2014

Elielso Dias

Antes de começar a explicação vamos colocar uma imagem

Pegue uma imagem no googleDe 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.pngimagem1.png



xxxxxx 8 10-17 15/09/2014

Elielso Dias

Inserindo a imagem

<img src="imagem1.jpeg"> Coloque do jeito que está acima!



xxxxxx 8 10-17 15/09/2014

Elielso Dias

Vai ficar desse jeito



xxxxxx 8 10-17 15/09/2014

Elielso Dias

Resumo dos fatos até agora:

AbrimosO bloco

De notas

Hospedagem

Imagem

Pegamos umaimagem na internet e colocamos namesma pasta e inserimos o códigoimg src=

Digitamos o códigona listagemacima…

E salvamos comoIndex.htmlDentro da pasta Projeto HTML

Agora vamosaprender a colocaresse seu site on line : )



xxxxxx 8 10-17 15/09/2014

Elielso Dias

Agora vamos coloca-lo na internet

Acesse:http://www.orgfree.com/

Clique aqui



xxxxxx 8 10-17 15/09/2014

Elielso Dias

Próxima página é de cadastro



xxxxxx 8 10-17 15/09/2014

Elielso Dias

Depois Escolha um subdomínio

Escolha o nome pro seu site



xxxxxx 8 10-17 15/09/2014

Elielso Dias

Agora basta preencher Como se pede corretamente.



xxxxxx 8 10-17 15/09/2014

Elielso Dias



xxxxxx 8 10-17 15/09/2014

Elielso Dias

Copie em sua apostila a parte

selecionada



xxxxxx 8 10-17 15/09/2014

Elielso Dias

Pronto, agora vamos hospedar o nosso site...

Clique em Inciar do Windows >Computador e digite na barra de endereços:



xxxxxx 8 10-17 15/09/2014

Elielso Dias

ftp://ftp.6te.net



xxxxxx 8 10-17 15/09/2014

Elielso Dias



xxxxxx 8 10-17 15/09/2014

Elielso Dias

Aqui digiteo usuário esenha quevocêanotou.



xxxxxx 8 10-17 15/09/2014

Elielso Dias

Agora pra terminar:

Copie os arquivos da pasta: Projeto HTML

Para a pasta que se Abriu!!!

Que é a do seu login

Education

Aula 8 web