Embed Size (px)
DESCRIPTION
Aula de html 5
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
<DOCTYPE html>
Pela nova nomenclatura as páginas que vão iniciar com comandos em html5 devem começar desse
jeito.
Facebook:[email protected]
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.
Facebook:[email protected]
Prof. Ricardo
Vocenomundo.net
<head>.... <title></title>...</head>
<head></head>
Cabeçalho dentre outras coisas serve para especificarmos sobre o que é o site. E inserir scripts.
<title></title>
É o título que vai na aba do navegador.
Facebook:[email protected]
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.
Facebook:[email protected]
Prof. Ricardo
Vocenomundo.net
H1 ao h7
<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>
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
Fique atento
Se você pegar uma imagem com estenção (.jpg),(.jpeg), (png) e/ou (.gif). Lembre-se que é o:
nome-da-imagem.estenção
Carro.jpegCidade.jpgFoto_grande.pngAnime.gif
www.thmemgallery.com
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
Orgfree.com
Acesse:http://www.orgfree.com/
Clique aqui
Facebook:[email protected]
Prof. Ricardo
Vocenomundo.net
nomedoseusite
Entenda como se 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
Facebook:[email protected]
Prof. Ricardo
Vocenomundo.net
cadastrando
Coloque o endereç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! : )
Facebook:[email protected]
Prof. Ricardo
Vocenomundo.net
Preenchimento fácil e 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!
Facebook:[email protected]
Prof. Ricardo
Vocenomundo.net Company Logowww.thmemgallery.com
Copie em sua apostila a
parte selecionadaSegredo!
Facebook:[email protected]
Prof. Ricardo
Vocenomundo.net
Pronto, agora vamos hospedar o nosso site...
Clique em Iniciar do Windows >Computador e digite na barra de
endereços:
Facebook:[email protected]
Prof. Ricardo
Vocenomundo.net
Agora pra terminar:
Lembra do Login e da senha que eu
pedi pra vc copiar!
Facebook:[email protected]
Prof. Ricardo
Vocenomundo.net Company Logo
Após o preenchimento
Clique em Logon
Facebook:[email protected]
Prof. Ricardo
Vocenomundo.net
Deletando os arquivos desnecessários
Selecione todos os arquivos que aparecerem como ao
lado.1Delete-os, exceto os que
tem um ponto na frente são chamados arquivos ocultos.2Agora vá em sua pasta
Área de trabalho / Projeto HTML.3
Facebook:[email protected]
Prof. Ricardo
Vocenomundo.net
Ao terminar de copiar Clique em F5 para
atualizar.1Abra o seu navegador e digite o endereço do seu
site, no meu caso é music9035.6te.net2
Prof.Ricardo
Vocenomundo.net
Vocenomundo.net
Obrigado a todos(as).
