0
HTML Básico Como criar uma página de internet
Marcelo Machado Pereira Consultor de TI. Instrutor de Treinamentos. Programador Web Master. Gestor de Projetos de SGDB. Mi...
Licença: Html Básico de Marcelo Machado Pereira é licenciado sob uma   Licença Creative Commons Atribuição-Uso não-comerci...
Objetivos: Aprender o que é HTML e para que serve.  Desenvolver uma página de Internet básica. Assimilar os conceitos bási...
Apresentação: Com HTML você pode criar o seu próprio Web Site.  Esta apresentação ensina muitos conceitos de HTML. HTML é ...
O que é HTML? HTML é a sigla para Hyper Text Markup Language. HTML não é uma linguagem de programação. HTML é uma linguage...
Tags HTML Deve-se sempre abrir e fechar as tags. São os textos que ficam entre < > ou < />. Geralmente são sempre pares,<p...
Documentos HTML Contém tags Html e texto plano. Exibem conteúdo de páginas web. Também são chamados de páginas web.
Browsers e o HTML Finalidade é ler o documento Html e exibir o conteúdo da página. Não exibem as tags mas usam as tags par...
Exemplo de Browsers
Quem criou o HTML? Sir Tim Berners-Lee, em 1989. A versão 1 era muito básica e era limitada na integração multimídia. Em 1...
Qual a versão atual do HTML? Atualmente a maioria dos sites usa HTML 4.01 mas alguns browsers já aceitam HTML5. Mudança de...
Do que você precisa? Não precisa de um Web Site.  Não precisa de um editor HTML. Não precisa de um servidor Web. Para apre...
Editanto o HTML HTML pode ser escrito e editado com o uso dos mais diferentes editores como Dreamweaver ou Visual Studio. ...
Editanto o HTML Um editor de texto plano é a melhor escolha quando se pretende editar um arquivo para aprender o HTML.
Usar .htm ou .html na extenção? Quando você salvar um arquivo HTML tanto faz salvar como .htm ou como .html Na prática não...
Como criar um arquivo HTML Abrir o editor de textos. Criar um novo arquivo em branco. Salvar o arquivo com a extensão .htm...
Arquivo básico HTML <html>     <head>        <title>Minha página de Internet</title>     </head>     <body>        ...Cont...
Explicação do exemplo O texto entre <html> e </html> descreve o conteúdo da página. O texto entre <head> e </head> é o cab...
Cabeçalhos HTML Os cabeçalhos são definidos com as tags <h1> até <h6>. Exemplo: <h1>Isto é um cabeçalho</h1> <h2>Isto é um...
Parágrafos HTML Os parágrafos HTML são definidos com a tag <p>.   Exemplo:  <p>Isto é um parágrafo.</p> <p>Isto é um outro...
Links HTML Os links HTML são definidos com tag <a>.   Exemplo:  <a href=&quot;http://www.meusite.com.br&quot;>Isto é um li...
Imagens HTML As imagens HTML são definidas com a tag <img>. Exemplo: <img src=&quot;imagem.jpg&quot; width=&quot;104&quot;...
Elementos HTML Documenos HTML são definidos por elementos HTML. Um elemento HTML é tudo que está entre a tag inicial e a t...
Elementos HTML tag inicial        conteúdo do elemento        tag final   <p>                 Isto é um parágrafo         ...
Sintaxe dos elementos HTML Um elemento HTML inicia com a tag inicial. Um elemento HTML termina com a tag final. O conteúdo...
Sintaxe dos elementos HTML Alguns elementos HTML tem conteúdo vazio. Elementos vazios são fechados na tag inicial. A maior...
Elementos HTML aninhados A maioria dos elementos HTML podem ser aninhados, ou seja, podem conter outros elementos HTML. Do...
Exemplo de documento HTML <html>    <body>        <p>Meu primeiro parágrafo.</p>    </body> </html>
O elemento <p> O elemento <p> define um parágrafo no documento HTML. O elemento tem uma tag inicial <p> e uma tag final </...
O elemento <body> O elemento <body> define o corpo do documento HTML. O elemento tem uma tag inicial <body> e uma tag fina...
O elemento <html> O elemento <html> define o todo do documento HTML. O elemento tem uma tag inicial <html> e uma tag final...
Elementos HTML vazios Elementos HTML sem conteúdo são chamados de elementos vazios. <br> é um elemento vazio sem uma tag f...
Dica: use sempre minúsculas HTML não é case sensitive. <P> significa o mesmo que <p>. Muitos web sites usam maiúsculas nas...
Atributos HTML Elementos HTML podem ter atributos. Atributos fornecem informação adicional sobre um elemento. Atributos sã...
Exemplo de Atributos HTML Links HTML são definidos pela tag <a>. O endereço do link é especificado no atributo href. <a hr...
Valor de atributos entre aspas Valor de atributos devem sempre estar entre aspas. Aspas duplas são o mais comum em HTML, m...
Dica: use atributos em minúsculas Nomes de atributos e valores de atributos são case sensitive. O W3C recomenda usar minús...
Referência de atributos HTML Alguns atributos que são padrão na maioria dos elementos HTML. Atributo            Valor     ...
Dúvidas ?    ?                ?      ?            ?                ?           ?            ?                ?            ...
Upcoming SlideShare
Loading in...5
×

Html Básico

1,890

Published on

Html Básico - Fundamentos da linguagem de marcação Html 4.01 e uso das principais tags

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,890
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
125
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Html Básico"

  1. 1. HTML Básico Como criar uma página de internet
  2. 2. Marcelo Machado Pereira Consultor de TI. Instrutor de Treinamentos. Programador Web Master. Gestor de Projetos de SGDB. Micro Empreendedor e Blogueiro.
  3. 3. Licença: Html Básico de Marcelo Machado Pereira é licenciado sob uma   Licença Creative Commons Atribuição-Uso não-comercial-Compartilhamento pela mesma licença 3.0 Unported .
  4. 4. Objetivos: Aprender o que é HTML e para que serve. Desenvolver uma página de Internet básica. Assimilar os conceitos básicos da programação para web.
  5. 5. Apresentação: Com HTML você pode criar o seu próprio Web Site. Esta apresentação ensina muitos conceitos de HTML. HTML é muito fácil de aprender e vocês vão adorar.
  6. 6. O que é HTML? HTML é a sigla para Hyper Text Markup Language. HTML não é uma linguagem de programação. HTML é uma linguagem de marcação. As marcações são feitas através de <tags>.
  7. 7. Tags HTML Deve-se sempre abrir e fechar as tags. São os textos que ficam entre < > ou < />. Geralmente são sempre pares,<p> e </p>.
  8. 8. Documentos HTML Contém tags Html e texto plano. Exibem conteúdo de páginas web. Também são chamados de páginas web.
  9. 9. Browsers e o HTML Finalidade é ler o documento Html e exibir o conteúdo da página. Não exibem as tags mas usam as tags para interpretar o conteúdo das mesmas.
  10. 10. Exemplo de Browsers
  11. 11. Quem criou o HTML? Sir Tim Berners-Lee, em 1989. A versão 1 era muito básica e era limitada na integração multimídia. Em 1993 foi adicionado mais recursos, como a interação de imagens.
  12. 12. Qual a versão atual do HTML? Atualmente a maioria dos sites usa HTML 4.01 mas alguns browsers já aceitam HTML5. Mudança de conceitos para o design da página. Substituição de algumas tags por formatação e design em CCS.
  13. 13. Do que você precisa? Não precisa de um Web Site. Não precisa de um editor HTML. Não precisa de um servidor Web. Para aprender HTML não é necessário nenhuma ferramenta.
  14. 14. Editanto o HTML HTML pode ser escrito e editado com o uso dos mais diferentes editores como Dreamweaver ou Visual Studio. Entretanto, iremos usar um editor de texto plano como o notepad.
  15. 15. Editanto o HTML Um editor de texto plano é a melhor escolha quando se pretende editar um arquivo para aprender o HTML.
  16. 16. Usar .htm ou .html na extenção? Quando você salvar um arquivo HTML tanto faz salvar como .htm ou como .html Na prática não há a menor diferença entre ambas as extenções.
  17. 17. Como criar um arquivo HTML Abrir o editor de textos. Criar um novo arquivo em branco. Salvar o arquivo com a extensão .html Iniciar a edição do arquivo.
  18. 18. Arquivo básico HTML <html>    <head>        <title>Minha página de Internet</title>    </head>    <body>        ...Conteúdo da página...    </body> </html>
  19. 19. Explicação do exemplo O texto entre <html> e </html> descreve o conteúdo da página. O texto entre <head> e </head> é o cabeçalho da página, não é exibido no browser. O texto entre <body> e </body> é o conteúdo visível da página no browser.
  20. 20. Cabeçalhos HTML Os cabeçalhos são definidos com as tags <h1> até <h6>. Exemplo: <h1>Isto é um cabeçalho</h1> <h2>Isto é um cabeçalho</h2> <h3>Isto é um cabeçalho</h3>
  21. 21. Parágrafos HTML Os parágrafos HTML são definidos com a tag <p>.   Exemplo: <p>Isto é um parágrafo.</p> <p>Isto é um outro parágrafo.</p>
  22. 22. Links HTML Os links HTML são definidos com tag <a>.   Exemplo: <a href=&quot;http://www.meusite.com.br&quot;>Isto é um link</a>   O endereço do link é especificado no atributo href.
  23. 23. Imagens HTML As imagens HTML são definidas com a tag <img>. Exemplo: <img src=&quot;imagem.jpg&quot; width=&quot;104&quot; height=&quot;142&quot; />   O nome e o tamanho da imagem são fornecidos nos atributos.
  24. 24. Elementos HTML Documenos HTML são definidos por elementos HTML. Um elemento HTML é tudo que está entre a tag inicial e a tag final.
  25. 25. Elementos HTML tag inicial        conteúdo do elemento        tag final   <p>                 Isto é um parágrafo            </p>   <a>                 Isto é um link                      </a>
  26. 26. Sintaxe dos elementos HTML Um elemento HTML inicia com a tag inicial. Um elemento HTML termina com a tag final. O conteúdo do elemento será tudo que estiver entre a tag inicial e a tag final.
  27. 27. Sintaxe dos elementos HTML Alguns elementos HTML tem conteúdo vazio. Elementos vazios são fechados na tag inicial. A maioria dos elementos HTML podem ter atributos.
  28. 28. Elementos HTML aninhados A maioria dos elementos HTML podem ser aninhados, ou seja, podem conter outros elementos HTML. Documentos HTML consistem de aninhamentos de elementos HTML.
  29. 29. Exemplo de documento HTML <html>    <body>        <p>Meu primeiro parágrafo.</p>    </body> </html>
  30. 30. O elemento <p> O elemento <p> define um parágrafo no documento HTML. O elemento tem uma tag inicial <p> e uma tag final </p>. O conteúdo do elemento é: Meu primeiro parágrafo.
  31. 31. O elemento <body> O elemento <body> define o corpo do documento HTML. O elemento tem uma tag inicial <body> e uma tag final </body>. O conteúdo do elemento é outro elemento HTML, um elemento <p>.
  32. 32. O elemento <html> O elemento <html> define o todo do documento HTML. O elemento tem uma tag inicial <html> e uma tag final </html>. O conteúdo do elemento é outro elemento HTML, um elemento <body>.
  33. 33. Elementos HTML vazios Elementos HTML sem conteúdo são chamados de elementos vazios. <br> é um elemento vazio sem uma tag final. A tag <br> define uma quebra de linha.
  34. 34. Dica: use sempre minúsculas HTML não é case sensitive. <P> significa o mesmo que <p>. Muitos web sites usam maiúsculas nas tags HTML. O W3C recomenda o uso de tags em minúsculas.
  35. 35. Atributos HTML Elementos HTML podem ter atributos. Atributos fornecem informação adicional sobre um elemento. Atributos são sempre especificados na tag inicial. Atributos vem em pares como name=&quot;value&quot;.
  36. 36. Exemplo de Atributos HTML Links HTML são definidos pela tag <a>. O endereço do link é especificado no atributo href. <a href=&quot;http://www.meusite.com.br&quot;>Isto é um link</a>
  37. 37. Valor de atributos entre aspas Valor de atributos devem sempre estar entre aspas. Aspas duplas são o mais comum em HTML, mas aspas simples também são permitidas.
  38. 38. Dica: use atributos em minúsculas Nomes de atributos e valores de atributos são case sensitive. O W3C recomenda usar minúsculas desde o HTML4.
  39. 39. Referência de atributos HTML Alguns atributos que são padrão na maioria dos elementos HTML. Atributo            Valor            Descrição   class                classname    especifica a classname                                             do elemento id                     id                  especifica o unique id                                                do elemento
  40. 40. Dúvidas ?   ?                ?     ?            ?                ?          ?            ?                ?                ?    
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×