• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Html 01
 

Html 01

on

  • 294 views

 

Statistics

Views

Total Views
294
Views on SlideShare
244
Embed Views
50

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 50

http://vocenomundo.net 50

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Html 01 Html 01 Presentation Transcript

    • Vocenomundo.net Prof. RicardoConhecendo o HTML5 Aula 01
    • 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
    • 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
    • O que é HTML5 Novos recursos rápido colorido prático HTML5 bonito Feito Pra vc Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
    • 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
    • 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
    • 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
    • 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
    • Tags de vídeo Tags de vídeoIncluir vídeos em HTML como conhecemoshoje, utilizando códigos para o “embed”, ouseja, incorporar vídeos à página será muitomais simples. Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
    • 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
    • Caching de aplicações Caching de aplicaçõesAgora, com o HTML 5 os aplicativos webpoderão ser acessados offline via cache.Leia maisem: http://www.tecmundo.com.br/navegador/2254-o-que-e-html-5-.htm#ixzz27fFcSbBL Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com
    • E o que muda para o usuário?Se você possui um perfil um pouco maisligado às novidades tecnológicas,sentirá boas diferenças ao navegar pelaInternet. 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
    • 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
    • Digitando Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com Company Logo
    • 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
    • Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
    • Agora vamos visualizar: Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
    • <DOCTYPE html> Pela nova nomenclatura as páginas que vão iniciar com comandos em html5 devem começar desse jeito. Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
    • <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. Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
    • <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. Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
    • <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. Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
    • H1 ao h7 <h1> serve para especificar o tamanho da fonte. • <h1> É a maior <h1> </h1> <h4> • <h4> é um tamanho médio</h4> <h7> • <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> Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
    • <h1> <h4> Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com Company Logo
    • 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
    • Inserindo a imagem <img src="imagem1.jpeg"> Coloque do jeito que está acima! Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
    • Vai ficar desse jeito Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.comwww.thmemgallery
    • 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.jpeg Cidade.jpg Foto_grande.png Anime.gif Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.comwww.thmemgallery
    • 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
    • Orgfree.com Acesse: http://www.orgfree.com/ Clique aqui Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
    • Free web hosting area. Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
    • Entenda como se usa. nomedoseusite Escolha o nome pro seu site Depois Escolha um Observações subdomínioEu coloquei o nome de music9035 vc podeescolher outro que for melhor para o seu Prof. Ricardo projeto! Facebook: Vocenomundo.net Ricardo.ware@gmail.com
    • 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! : ) Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
    • 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! Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
    • Copie em sua apostila a parte Segredo! selecionada Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com Company Logowww.thmemgallery
    • Pronto, agora vamos hospedar o nosso site...Clique em Iniciar do Windows >Computador e digite na barra de endereços: Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
    • ftp://ftp.6te.net Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
    • Agora pra terminar: Lembra do Login e da senha que eu pedi pra vc copiar! Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
    • Após o preenchimento Clique em Logon Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com Company Logo
    • Deletando os arquivos desnecessários 1 Selecione todos os arquivos que aparecerem como ao lado. Delete-os, exceto os que 2 tem um ponto na frente são chamados arquivos ocultos. Agora vá em sua pasta 3 Área de trabalho / Projeto HTML. Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
    • Pasta vazia.... Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
    • Copie e cole Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com Company Logo
    • Ao terminar de copiar 1 Clique em F5 para atualizar. Abra o seu navegador e 2 digite o endereço do seu site, no meu caso é music9035.6te.net Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com
    • Prof. Ricardo Facebook:Vocenomundo.net Ricardo.ware@gmail.com Company Logo
    • Vocenomundo.net Prof. RicardoObrigado a todos(as). Vocenomundo.net