SlideShare uma empresa Scribd logo
Vocenomundo.net    Prof.
                             Ricardo




Conhecendo 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í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.




                                              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çõ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/2
254-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 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.




                                                           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.com
www.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.com
www.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ínio

Eu coloquei o nome de
 music9035 vc pode
escolher 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 Logo
www.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.
                                                   Ricardo




Obrigado a todos(as).



               Vocenomundo.net

Mais conteúdo relacionado

Destaque

Destaque (8)

4 shared
4 shared4 shared
4 shared
 
Excel ricardo153
Excel ricardo153Excel ricardo153
Excel ricardo153
 
Aula 04 endereço eletrônico
Aula 04   endereço eletrônicoAula 04   endereço eletrônico
Aula 04 endereço eletrônico
 
Baixando e instalando
Baixando e instalandoBaixando e instalando
Baixando e instalando
 
Aula 01
Aula 01Aula 01
Aula 01
 
Aula 04 a matemática e as planilhas
Aula 04   a matemática e as planilhasAula 04   a matemática e as planilhas
Aula 04 a matemática e as planilhas
 
Objeto controle
Objeto controleObjeto controle
Objeto controle
 
Aula 5 sistemas operacionais
Aula 5   sistemas operacionaisAula 5   sistemas operacionais
Aula 5 sistemas operacionais
 

Semelhante a Html 01

Aula Inaugural Faveni - glauciobedim.com
Aula Inaugural Faveni - glauciobedim.comAula Inaugural Faveni - glauciobedim.com
Aula Inaugural Faveni - glauciobedim.comAgência GB Creative
 
Curso online Realtime Guru
Curso online Realtime GuruCurso online Realtime Guru
Curso online Realtime GuruCarlos Eduardo
 
Comunicação em tempo real com WebRTC e PHP
Comunicação em tempo real com WebRTC e PHPComunicação em tempo real com WebRTC e PHP
Comunicação em tempo real com WebRTC e PHPMichael Douglas
 
Atec cursowebdesign aula01
Atec cursowebdesign aula01Atec cursowebdesign aula01
Atec cursowebdesign aula01Weslley Harakawa
 
Atec cursowebdesign aula01
Atec cursowebdesign aula01Atec cursowebdesign aula01
Atec cursowebdesign aula01Wcre8tive
 
Aula01 - introdução
Aula01 - introduçãoAula01 - introdução
Aula01 - introduçãoRicardo neves
 
ESUD 2017 Añadiendo valor al elearning: Blockchain, videos, LMS y met
ESUD 2017 Añadiendo valor al elearning: Blockchain, videos, LMS y metESUD 2017 Añadiendo valor al elearning: Blockchain, videos, LMS y met
ESUD 2017 Añadiendo valor al elearning: Blockchain, videos, LMS y metGorka J Palacio Arko
 
Desenvolva Sites com Webmatrix
Desenvolva Sites com WebmatrixDesenvolva Sites com Webmatrix
Desenvolva Sites com WebmatrixNorton Guimarães
 
Vitor - O potencial didático do WordPress no ensino-aprendizagem de Programação
Vitor - O potencial didático do WordPress no ensino-aprendizagem de ProgramaçãoVitor - O potencial didático do WordPress no ensino-aprendizagem de Programação
Vitor - O potencial didático do WordPress no ensino-aprendizagem de ProgramaçãoWordPress Floripa
 
HTML5 – O que tem de novo?
HTML5 – O que tem de novo?HTML5 – O que tem de novo?
HTML5 – O que tem de novo?Diego Santos
 

Semelhante a Html 01 (20)

Html 01
Html 01Html 01
Html 01
 
Html5
Html5Html5
Html5
 
O que é HTML5
O que é HTML5O que é HTML5
O que é HTML5
 
Beaga.JS
Beaga.JSBeaga.JS
Beaga.JS
 
Aula Inaugural Faveni - glauciobedim.com
Aula Inaugural Faveni - glauciobedim.comAula Inaugural Faveni - glauciobedim.com
Aula Inaugural Faveni - glauciobedim.com
 
Curso online Realtime Guru
Curso online Realtime GuruCurso online Realtime Guru
Curso online Realtime Guru
 
Comunicação em tempo real com WebRTC e PHP
Comunicação em tempo real com WebRTC e PHPComunicação em tempo real com WebRTC e PHP
Comunicação em tempo real com WebRTC e PHP
 
SEO, Semantica e HTML5
SEO, Semantica e HTML5SEO, Semantica e HTML5
SEO, Semantica e HTML5
 
Atec cursowebdesign aula01
Atec cursowebdesign aula01Atec cursowebdesign aula01
Atec cursowebdesign aula01
 
Atec cursowebdesign aula01
Atec cursowebdesign aula01Atec cursowebdesign aula01
Atec cursowebdesign aula01
 
Aula01 - introdução
Aula01 - introduçãoAula01 - introdução
Aula01 - introdução
 
Ai ad-tp2-g1
Ai ad-tp2-g1Ai ad-tp2-g1
Ai ad-tp2-g1
 
ESUD 2017 Añadiendo valor al elearning: Blockchain, videos, LMS y met
ESUD 2017 Añadiendo valor al elearning: Blockchain, videos, LMS y metESUD 2017 Añadiendo valor al elearning: Blockchain, videos, LMS y met
ESUD 2017 Añadiendo valor al elearning: Blockchain, videos, LMS y met
 
Desenvolva Sites com Webmatrix
Desenvolva Sites com WebmatrixDesenvolva Sites com Webmatrix
Desenvolva Sites com Webmatrix
 
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 4 - 1...
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 4 - 1...Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 4 - 1...
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 4 - 1...
 
Vitor - O potencial didático do WordPress no ensino-aprendizagem de Programação
Vitor - O potencial didático do WordPress no ensino-aprendizagem de ProgramaçãoVitor - O potencial didático do WordPress no ensino-aprendizagem de Programação
Vitor - O potencial didático do WordPress no ensino-aprendizagem de Programação
 
Revista programar 10
Revista programar 10Revista programar 10
Revista programar 10
 
HTML5 - O Futuro da web
HTML5 - O Futuro da webHTML5 - O Futuro da web
HTML5 - O Futuro da web
 
HTML5 – O que tem de novo?
HTML5 – O que tem de novo?HTML5 – O que tem de novo?
HTML5 – O que tem de novo?
 
Ai ad-tp2-g1
Ai ad-tp2-g1Ai ad-tp2-g1
Ai ad-tp2-g1
 

Mais de Ricardo neves

Aula 01 criação de jogos-parte2
Aula 01 criação de jogos-parte2Aula 01 criação de jogos-parte2
Aula 01 criação de jogos-parte2Ricardo neves
 
Aula 01 criação de jogos
Aula 01 criação de jogosAula 01 criação de jogos
Aula 01 criação de jogosRicardo neves
 
Aula 01 de reforço de português
Aula 01 de reforço de portuguêsAula 01 de reforço de português
Aula 01 de reforço de portuguêsRicardo neves
 
Aula 03 direitos e obrigações
Aula 03   direitos e obrigaçõesAula 03   direitos e obrigações
Aula 03 direitos e obrigaçõesRicardo neves
 
Aula 02 comprei um computador e agora
Aula 02   comprei um computador e agoraAula 02   comprei um computador e agora
Aula 02 comprei um computador e agoraRicardo neves
 
Aula 03 conhecendo o site do cedaspy
Aula 03   conhecendo o site do cedaspyAula 03   conhecendo o site do cedaspy
Aula 03 conhecendo o site do cedaspyRicardo neves
 
Avaliação de inglês 2 - respostas
Avaliação de inglês 2 - respostasAvaliação de inglês 2 - respostas
Avaliação de inglês 2 - respostasRicardo neves
 
Aula 10 inglês 1 - ruture
Aula 10   inglês 1 - rutureAula 10   inglês 1 - ruture
Aula 10 inglês 1 - rutureRicardo neves
 
Aula 09-inglês i - simple past
Aula 09-inglês i - simple pastAula 09-inglês i - simple past
Aula 09-inglês i - simple pastRicardo neves
 

Mais de Ricardo neves (20)

Tcp – aula 02
Tcp – aula 02Tcp – aula 02
Tcp – aula 02
 
Tcp – aula 02
Tcp – aula 02Tcp – aula 02
Tcp – aula 02
 
Tcp – aula 01
Tcp – aula 01Tcp – aula 01
Tcp – aula 01
 
Lógica matemática
Lógica matemáticaLógica matemática
Lógica matemática
 
Aula 01 criação de jogos-parte2
Aula 01 criação de jogos-parte2Aula 01 criação de jogos-parte2
Aula 01 criação de jogos-parte2
 
Aula 01 criação de jogos
Aula 01 criação de jogosAula 01 criação de jogos
Aula 01 criação de jogos
 
Aula 01 de reforço de português
Aula 01 de reforço de portuguêsAula 01 de reforço de português
Aula 01 de reforço de português
 
Acompanhamento
AcompanhamentoAcompanhamento
Acompanhamento
 
Aula 03 direitos e obrigações
Aula 03   direitos e obrigaçõesAula 03   direitos e obrigações
Aula 03 direitos e obrigações
 
Aula 02 comprei um computador e agora
Aula 02   comprei um computador e agoraAula 02   comprei um computador e agora
Aula 02 comprei um computador e agora
 
Aula 03 conhecendo o site do cedaspy
Aula 03   conhecendo o site do cedaspyAula 03   conhecendo o site do cedaspy
Aula 03 conhecendo o site do cedaspy
 
Projeto final
Projeto finalProjeto final
Projeto final
 
Excel ricardo153
Excel ricardo153Excel ricardo153
Excel ricardo153
 
Avaliação de inglês 2 - respostas
Avaliação de inglês 2 - respostasAvaliação de inglês 2 - respostas
Avaliação de inglês 2 - respostas
 
Aula 10 inglês 2
Aula 10   inglês 2Aula 10   inglês 2
Aula 10 inglês 2
 
Aula 09 inglês 2
Aula 09   inglês 2Aula 09   inglês 2
Aula 09 inglês 2
 
Aula 08 inglês 2
Aula 08   inglês 2Aula 08   inglês 2
Aula 08 inglês 2
 
Aula 10 inglês 1 - ruture
Aula 10   inglês 1 - rutureAula 10   inglês 1 - ruture
Aula 10 inglês 1 - ruture
 
Aula 09-inglês i - simple past
Aula 09-inglês i - simple pastAula 09-inglês i - simple past
Aula 09-inglês i - simple past
 
Aula 07 inglês 2
Aula 07   inglês 2Aula 07   inglês 2
Aula 07 inglês 2
 

Último

00Certificado - MBA - Gestão de projetos
00Certificado - MBA - Gestão de projetos00Certificado - MBA - Gestão de projetos
00Certificado - MBA - Gestão de projetosLeonardoHenrique931183
 
Slides Lição 8, Central Gospel, Os 144 Mil Que Não Se Curvarão Ao Anticristo....
Slides Lição 8, Central Gospel, Os 144 Mil Que Não Se Curvarão Ao Anticristo....Slides Lição 8, Central Gospel, Os 144 Mil Que Não Se Curvarão Ao Anticristo....
Slides Lição 8, Central Gospel, Os 144 Mil Que Não Se Curvarão Ao Anticristo....LuizHenriquedeAlmeid6
 
04_GuiaDoCurso_Neurociência, Psicologia Positiva e Mindfulness.pdf
04_GuiaDoCurso_Neurociência, Psicologia Positiva e Mindfulness.pdf04_GuiaDoCurso_Neurociência, Psicologia Positiva e Mindfulness.pdf
04_GuiaDoCurso_Neurociência, Psicologia Positiva e Mindfulness.pdfARIANAMENDES11
 
22-modernismo-5-prosa-de-45.pptxrpnsaaaa
22-modernismo-5-prosa-de-45.pptxrpnsaaaa22-modernismo-5-prosa-de-45.pptxrpnsaaaa
22-modernismo-5-prosa-de-45.pptxrpnsaaaaCarolineFrancielle
 
Slides Lição 9, CPAD, Resistindo à Tentação no Caminho, 2Tr24.pptx
Slides Lição 9, CPAD, Resistindo à Tentação no Caminho, 2Tr24.pptxSlides Lição 9, CPAD, Resistindo à Tentação no Caminho, 2Tr24.pptx
Slides Lição 9, CPAD, Resistindo à Tentação no Caminho, 2Tr24.pptxLuizHenriquedeAlmeid6
 
Hans Kelsen - Teoria Pura do Direito - Obra completa.pdf
Hans Kelsen - Teoria Pura do Direito - Obra completa.pdfHans Kelsen - Teoria Pura do Direito - Obra completa.pdf
Hans Kelsen - Teoria Pura do Direito - Obra completa.pdfLeandroTelesRocha2
 
Manual dos Principio básicos do Relacionamento e sexologia humana .pdf
Manual dos Principio básicos do Relacionamento e sexologia humana .pdfManual dos Principio básicos do Relacionamento e sexologia humana .pdf
Manual dos Principio básicos do Relacionamento e sexologia humana .pdfPastor Robson Colaço
 
Multiplicação - Caça-número
Multiplicação - Caça-número Multiplicação - Caça-número
Multiplicação - Caça-número Mary Alvarenga
 
Junho Violeta - Sugestão de Ações na Igreja
Junho Violeta - Sugestão de Ações na IgrejaJunho Violeta - Sugestão de Ações na Igreja
Junho Violeta - Sugestão de Ações na IgrejaComando Resgatai
 
Apresentação Formação em Prevenção ao Assédio
Apresentação Formação em Prevenção ao AssédioApresentação Formação em Prevenção ao Assédio
Apresentação Formação em Prevenção ao Assédioifbauab
 
5ca0e9_ea0307e5baa1478490e87a15cb4ee530.pdf
5ca0e9_ea0307e5baa1478490e87a15cb4ee530.pdf5ca0e9_ea0307e5baa1478490e87a15cb4ee530.pdf
5ca0e9_ea0307e5baa1478490e87a15cb4ee530.pdfedjailmax
 
Apresentação de vocabulário fundamental em contexto de atendimento
Apresentação de vocabulário fundamental em contexto de atendimentoApresentação de vocabulário fundamental em contexto de atendimento
Apresentação de vocabulário fundamental em contexto de atendimentoPedroFerreira53928
 
Apresentação sobre as etapas do desenvolvimento infantil
Apresentação sobre as etapas do desenvolvimento infantilApresentação sobre as etapas do desenvolvimento infantil
Apresentação sobre as etapas do desenvolvimento infantilMariaHelena293800
 
INTRODUÇÃO A ARQUEOLOGIA BÍBLICA [BIBLIOLOGIA]]
INTRODUÇÃO A ARQUEOLOGIA BÍBLICA [BIBLIOLOGIA]]INTRODUÇÃO A ARQUEOLOGIA BÍBLICA [BIBLIOLOGIA]]
INTRODUÇÃO A ARQUEOLOGIA BÍBLICA [BIBLIOLOGIA]]ESCRIBA DE CRISTO
 
Fotossíntese para o Ensino médio primeiros anos
Fotossíntese para o Ensino médio primeiros anosFotossíntese para o Ensino médio primeiros anos
Fotossíntese para o Ensino médio primeiros anosbiancaborges0906
 
Hans Kelsen - Teoria Pura do Direito - Obra completa.pdf
Hans Kelsen - Teoria Pura do Direito - Obra completa.pdfHans Kelsen - Teoria Pura do Direito - Obra completa.pdf
Hans Kelsen - Teoria Pura do Direito - Obra completa.pdfrarakey779
 
Produção de poemas - Reciclar é preciso
Produção  de  poemas  -  Reciclar é precisoProdução  de  poemas  -  Reciclar é preciso
Produção de poemas - Reciclar é precisoMary Alvarenga
 
bem estar animal em proteção integrada componente animal
bem estar animal em proteção integrada componente animalbem estar animal em proteção integrada componente animal
bem estar animal em proteção integrada componente animalcarlamgalves5
 
ATPCG 27.05 - Recomposição de aprendizagem.pptx
ATPCG 27.05 - Recomposição de aprendizagem.pptxATPCG 27.05 - Recomposição de aprendizagem.pptx
ATPCG 27.05 - Recomposição de aprendizagem.pptxmairaviani
 
O que é uma Revolução Solar. tecnica preditiva
O que é uma Revolução Solar. tecnica preditivaO que é uma Revolução Solar. tecnica preditiva
O que é uma Revolução Solar. tecnica preditivaCludiaRodrigues693635
 

Último (20)

00Certificado - MBA - Gestão de projetos
00Certificado - MBA - Gestão de projetos00Certificado - MBA - Gestão de projetos
00Certificado - MBA - Gestão de projetos
 
Slides Lição 8, Central Gospel, Os 144 Mil Que Não Se Curvarão Ao Anticristo....
Slides Lição 8, Central Gospel, Os 144 Mil Que Não Se Curvarão Ao Anticristo....Slides Lição 8, Central Gospel, Os 144 Mil Que Não Se Curvarão Ao Anticristo....
Slides Lição 8, Central Gospel, Os 144 Mil Que Não Se Curvarão Ao Anticristo....
 
04_GuiaDoCurso_Neurociência, Psicologia Positiva e Mindfulness.pdf
04_GuiaDoCurso_Neurociência, Psicologia Positiva e Mindfulness.pdf04_GuiaDoCurso_Neurociência, Psicologia Positiva e Mindfulness.pdf
04_GuiaDoCurso_Neurociência, Psicologia Positiva e Mindfulness.pdf
 
22-modernismo-5-prosa-de-45.pptxrpnsaaaa
22-modernismo-5-prosa-de-45.pptxrpnsaaaa22-modernismo-5-prosa-de-45.pptxrpnsaaaa
22-modernismo-5-prosa-de-45.pptxrpnsaaaa
 
Slides Lição 9, CPAD, Resistindo à Tentação no Caminho, 2Tr24.pptx
Slides Lição 9, CPAD, Resistindo à Tentação no Caminho, 2Tr24.pptxSlides Lição 9, CPAD, Resistindo à Tentação no Caminho, 2Tr24.pptx
Slides Lição 9, CPAD, Resistindo à Tentação no Caminho, 2Tr24.pptx
 
Hans Kelsen - Teoria Pura do Direito - Obra completa.pdf
Hans Kelsen - Teoria Pura do Direito - Obra completa.pdfHans Kelsen - Teoria Pura do Direito - Obra completa.pdf
Hans Kelsen - Teoria Pura do Direito - Obra completa.pdf
 
Manual dos Principio básicos do Relacionamento e sexologia humana .pdf
Manual dos Principio básicos do Relacionamento e sexologia humana .pdfManual dos Principio básicos do Relacionamento e sexologia humana .pdf
Manual dos Principio básicos do Relacionamento e sexologia humana .pdf
 
Multiplicação - Caça-número
Multiplicação - Caça-número Multiplicação - Caça-número
Multiplicação - Caça-número
 
Junho Violeta - Sugestão de Ações na Igreja
Junho Violeta - Sugestão de Ações na IgrejaJunho Violeta - Sugestão de Ações na Igreja
Junho Violeta - Sugestão de Ações na Igreja
 
Apresentação Formação em Prevenção ao Assédio
Apresentação Formação em Prevenção ao AssédioApresentação Formação em Prevenção ao Assédio
Apresentação Formação em Prevenção ao Assédio
 
5ca0e9_ea0307e5baa1478490e87a15cb4ee530.pdf
5ca0e9_ea0307e5baa1478490e87a15cb4ee530.pdf5ca0e9_ea0307e5baa1478490e87a15cb4ee530.pdf
5ca0e9_ea0307e5baa1478490e87a15cb4ee530.pdf
 
Apresentação de vocabulário fundamental em contexto de atendimento
Apresentação de vocabulário fundamental em contexto de atendimentoApresentação de vocabulário fundamental em contexto de atendimento
Apresentação de vocabulário fundamental em contexto de atendimento
 
Apresentação sobre as etapas do desenvolvimento infantil
Apresentação sobre as etapas do desenvolvimento infantilApresentação sobre as etapas do desenvolvimento infantil
Apresentação sobre as etapas do desenvolvimento infantil
 
INTRODUÇÃO A ARQUEOLOGIA BÍBLICA [BIBLIOLOGIA]]
INTRODUÇÃO A ARQUEOLOGIA BÍBLICA [BIBLIOLOGIA]]INTRODUÇÃO A ARQUEOLOGIA BÍBLICA [BIBLIOLOGIA]]
INTRODUÇÃO A ARQUEOLOGIA BÍBLICA [BIBLIOLOGIA]]
 
Fotossíntese para o Ensino médio primeiros anos
Fotossíntese para o Ensino médio primeiros anosFotossíntese para o Ensino médio primeiros anos
Fotossíntese para o Ensino médio primeiros anos
 
Hans Kelsen - Teoria Pura do Direito - Obra completa.pdf
Hans Kelsen - Teoria Pura do Direito - Obra completa.pdfHans Kelsen - Teoria Pura do Direito - Obra completa.pdf
Hans Kelsen - Teoria Pura do Direito - Obra completa.pdf
 
Produção de poemas - Reciclar é preciso
Produção  de  poemas  -  Reciclar é precisoProdução  de  poemas  -  Reciclar é preciso
Produção de poemas - Reciclar é preciso
 
bem estar animal em proteção integrada componente animal
bem estar animal em proteção integrada componente animalbem estar animal em proteção integrada componente animal
bem estar animal em proteção integrada componente animal
 
ATPCG 27.05 - Recomposição de aprendizagem.pptx
ATPCG 27.05 - Recomposição de aprendizagem.pptxATPCG 27.05 - Recomposição de aprendizagem.pptx
ATPCG 27.05 - Recomposição de aprendizagem.pptx
 
O que é uma Revolução Solar. tecnica preditiva
O que é uma Revolução Solar. tecnica preditivaO que é uma Revolução Solar. tecnica preditiva
O que é uma Revolução Solar. tecnica preditiva
 

Html 01

  • 1. Vocenomundo.net Prof. Ricardo Conhecendo o HTML5 Aula 01
  • 2. 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
  • 3. 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
  • 4. O que é HTML5 Novos recursos rápido colorido prático HTML5 bonito Feito Pra vc Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. 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
  • 9. Tags de vídeo 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. Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com
  • 10. 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
  • 11. Caching de aplicações 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/2 254-o-que-e-html-5-.htm#ixzz27fFcSbBL Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com
  • 12. 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. Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com
  • 13. 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
  • 14. Digitando Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com Company Logo
  • 15. 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
  • 16. Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com
  • 17. Agora vamos visualizar: Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com
  • 18. <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
  • 19. <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
  • 20. <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
  • 21. <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
  • 22. 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
  • 23. <h1> <h4> Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com Company Logo
  • 24. 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
  • 25. Inserindo a imagem <img src="imagem1.jpeg"> Coloque do jeito que está acima! Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com
  • 26. Vai ficar desse jeito Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com www.thmemgallery
  • 27. 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.com www.thmemgallery
  • 28. 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
  • 29. Orgfree.com Acesse: http://www.orgfree.com/ Clique aqui Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com
  • 30. Free web hosting area. Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com
  • 31. Entenda como se usa. nomedoseusite Escolha o nome pro seu site Depois Escolha um Observações subdomínio Eu coloquei o nome de music9035 vc pode escolher outro que for melhor para o seu Prof. Ricardo projeto! Facebook: Vocenomundo.net Ricardo.ware@gmail.com
  • 32. 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
  • 33. 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
  • 34. Copie em sua apostila a parte Segredo! selecionada Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com Company Logo www.thmemgallery
  • 35. 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
  • 36. ftp://ftp.6te.net Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com
  • 37. Agora pra terminar: Lembra do Login e da senha que eu pedi pra vc copiar! Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com
  • 38. Após o preenchimento Clique em Logon Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com Company Logo
  • 39. 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
  • 40. Pasta vazia.... Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com
  • 41. Copie e cole Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com Company Logo
  • 42. 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
  • 43. Prof. Ricardo Facebook: Vocenomundo.net Ricardo.ware@gmail.com Company Logo
  • 44. Vocenomundo.net Prof. Ricardo Obrigado a todos(as). Vocenomundo.net