Embed Size (px)
DESCRIPTION
aula de html5
Citation preview
Prof.Ricardo
Vocenomundo.net
Aula 01
Conhecendo o HTML5Conhecendo o HTML5
Facebook:[email protected]
Prof. Ricardo
Vocenomundo.net
O que veremos hoje
O que é HTML51
Quais as vantagens2
Alguns comandos3
Salvando e enviando4
Facebook:[email protected]
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)
Facebook:[email protected]
Prof. Ricardo
Vocenomundo.net
O que é HTML5
prático
rápidocolorido
bonito
FeitoPra vc
HTML5
Novos recursos
Facebook:[email protected]
Prof. Ricardo
Vocenomundo.net
O que é HTML5
O código fica oculto, e quem o digita é vc caro(a)
aspirante a progamador!!
Facebook:[email protected]
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!
Facebook:[email protected]
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
Facebook:[email protected]
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
Facebook:[email protected]
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
Facebook:[email protected]
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
Facebook:[email protected]
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/2254-o-que-e-html-5-.htm#ixzz27fFcSbBL
Caching de aplicações
Facebook:[email protected]
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.
Facebook:[email protected]
Prof. Ricardo
Vocenomundo.net
Então vamos começar
Abra o bloco de notas:
Digite igual ao próximo
slide:
Facebook:[email protected]
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!
Facebook:[email protected]
Prof. Ricardo
Vocenomundo.net
Antes de começar a explicação vamos colocar uma imagem
Pegue uma imagem no googleDe tamanho médio
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:Ricardo_lindo.png
imagem1.png
Facebook:[email protected]
Prof. Ricardo
Vocenomundo.net
Inserindo a imagem
<img src="imagem1.jpeg">Coloque do jeito que está acima!
Facebook:[email protected]
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.htmlDentro da pasta Projeto HTML
Agora vamos aprender a colocar esse seu site on line : )
Resumo dos fatos até agora:
AbrimosO blocoDe notas
Hospedagem
Imagem
Facebook:[email protected]
Prof. Ricardo
Vocenomundo.net
Agora vamos coloca-lo na internet
Acesse:http://www.orgfree.com/
Clique aqui
Facebook:[email protected]
Prof. Ricardo
Vocenomundo.net Company Logowww.thmemgallery.com
Depois Escolha
um subdomíni
o
Escolha o nome pro seu site
Facebook:[email protected]
Prof. Ricardo
Vocenomundo.net
Agora basta preencher
Como se pede corretamente.
Facebook:[email protected]
Prof. Ricardo
Vocenomundo.net Company Logowww.thmemgallery.com
Copie em sua apostila a
parte selecionada
Facebook:[email protected]
Prof. Ricardo
Vocenomundo.net
Pronto, agora vamos hospedar o nosso site...
Clique em Inciar do Windows >Computador e digite na barra de
endereços:
Facebook:[email protected]
Prof. Ricardo
Vocenomundo.net
Agora pra terminar:
Copie os arquivos da pasta: Projeto HTML
Para a pasta que se Abriu!!!
Que é a do seu login
Prof.Ricardo
Vocenomundo.net
www.themegallery.com
