Aula 2 – Introdução a HTML - conceitos básicos e estrutura

3,998 views

Published on

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,998
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
207
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Aula 2 – Introdução a HTML - conceitos básicos e estrutura

  1. 1. Introdução a Linguagem HTML: Conceitos Básicos e Estrutura Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 12 de março de 2012
  2. 2. Aula de Hoje• Como escrevo uma página para a internet?• Estrutura básica de um documento HTML• Conceitos• Algumas formatações em HTML
  3. 3. HTML, onde está?
  4. 4. Tudo na WWW tem HTML?1. Abrir o Firefox2. Entrar em um site (digitar URL e teclar enter)3. Clicar com o botão direito4. Clicar na opção Código-fonte5. Irá abrir uma janela com o código HTML• Faça esses passos em mais dois sites
  5. 5. O que está acontecendo? Navegador
  6. 6. Contando as Palavras• Ver o código-fonte do site www.folha.com.br• Verificar quantas vezes as palavras aparecem: N. Palavra Repetições N. Palavra Repetições 1 <html> 7 <h1> 2 </html> 8 </h1> 3 <body> 9 <h2> 4 </body> 10 </h2> 5 <title> 11 <h3> 6 </title> 12 </h3>• Dica: pressione CTRL+F para o navegador exibir os campos de busca
  7. 7. Um Exemplo de HTML• Abrir o Bloco de Notas e digitar o seguinte texto: <html> <head> </head> <body> Olá! Este é um exemplo de código HTML. <body> </html>• Salvar na pasta htdocs com o nome exemplo1.html• No Firefox, digitar: http://localhost/~seulogin/exemplo1.html• O que aparece?
  8. 8. O que aconteceu com as palavras?• <html>, </html>, <head>, </head>, <body>, </body> são palavras chamadas tags• Uma tag é um comando (instrução) de formatação – Não são exibidas pelo navegador• Sempre são escritas entre < >• Possuem seu respectivo elemento de fechamento </ >
  9. 9. Conceitos - Tag<html> <head> </head> <body> Olá! Este é um <b>exemplo de código HTML.</b> <body></html>
  10. 10. Um Exemplo de HTML• Modificar o texto para: <html> <head> </head> <body> <b>Olá!</b> Este é um exemplo de código HTML. <body> </html>• Salvar• No Firefox, clicar no botão atualizar (refresh)• O que acontece?
  11. 11. Um Exemplo de HTML• Modificar o texto para: <html> <head> </head> <body> Olá! Este é um <b>exemplo de código HTML.</b> <body> </html>• Alterar a posição de <b> e </b> para ver o resultado• Salvar• No Firefox, clicar no botão atualizar (refresh)• O que acontece?
  12. 12. A Tag <b>• <b> indica ao navegador para escrever em negrito• </b> indica onde deve-se terminar de aplicar a formatação de negrito
  13. 13. Conceitos• HTML: HyperText Markup Language – Tradução: Linguagem de Marcação de Hipertexto – Usado para produzir páginas na Web• Tag: uma marcação, um comando de formatação – Escrito usando <> – Fechamento </>
  14. 14. Estrutura básica<html> Indica que este documento possui uma estrutura HTML que se inicia aqui</html> E termina aqui
  15. 15. Estrutura básica<html> O cabeçalho (head ) é <head> elemento fundamental de um </head> documento HTML. O propósito é apresentar informações gerais sobre a página.</html>
  16. 16. Estrutura básica<html> <head> </head> O corpo (body) é outro <body> elemento fundamental. O conteúdo dentro de <body> será exibido pelo <body> navegador.</html>
  17. 17. Estrutura básica<html> <head> </head> <body> Conteúdo Olá! Este é um <b>exemplo de código HTML.</b> <body></html>
  18. 18. A Tag <title>• Modificar o texto para: <html> <head> <title>Exemplo de documento HTML</title> </head> <body> Olá! Este é um <b>exemplo de código HTML.</b> <body> </html>• Alterar a posição de <b> e </b> para ver o resultado• Salvar• No Firefox, clicar no botão atualizar (refresh)• O que acontece?
  19. 19. A Tag <title>Sem <title> Com <title>
  20. 20. As Tags <i>, <u> e <s>• <i> exibe o texto em itálico• <u> exibe o texto sublinhado• <s> exibe o texto riscadoVamos testar?
  21. 21. As Tags <i>, <u> e <s>• Modificar seu documento HTML para: <html> <head> <title>Exemplo de documento HTML</title> </head> <body> Olá! Este é um <b>exemplo de código HTML.</b> Em HTML indicamos formatação através de tags. É possível escrever em <b>negrito</b>, em <i>itálico</i>, <u>sublinhado</u> e <s>riscado</s>. <body> </html>• O que acontece?
  22. 22. Fechamento de Tags• E se eu esquecer de fechar uma tag?
  23. 23. Tarefa para Casa• Com as tags aprendidas hoje, faça uma página HTML sobre você com as seguintes informações: – Seu nome e de sua família (pais, irmãos) – O que você gosta de fazer – O que você não gosta de fazer – Música, filme ou comida favoritos

×