Aula 2 – Introdução a HTML - conceitos básicos e estrutura
•
2 recomendaciones•4,478 vistas
Este documento apresenta uma aula introdutória sobre HTML, incluindo a estrutura básica de um documento HTML, conceitos como tags e como formatar texto. Algumas tags ensinadas incluem <b> para negrito, <i> para itálico, <u> para sublinhado, <s> para riscado e <title> para o título da página. Os alunos foram encarregados de criar uma página HTML sobre si mesmos usando as tags aprendidas.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (20)
Similar a Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Similar a Aula 2 – Introdução a HTML - conceitos básicos e estrutura (20)
Más de André Constantino da Silva
Más de André Constantino da Silva (20)
Último
Último (20)
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
- 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. Aula de Hoje • Como escrevo uma página para a internet? • Estrutura básica de um documento HTML • Conceitos • Algumas formatações em HTML
- 4. Tudo na WWW tem HTML? 1. Abrir o Firefox 2. Entrar em um site (digitar URL e teclar enter) 3. Clicar com o botão direito 4. Clicar na opção Código-fonte 5. Irá abrir uma janela com o código HTML • Faça esses passos em mais dois sites
- 5. O que está acontecendo? Navegador
- 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. 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. 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. Conceitos - Tag <html> <head> </head> <body> Olá! Este é um <b>exemplo de código HTML.</b> <body> </html>
- 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. 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. 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. 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. Estrutura básica <html> Indica que este documento possui uma estrutura HTML que se inicia aqui </html> E termina aqui
- 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. 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. Estrutura básica <html> <head> </head> <body> Conteúdo Olá! Este é um <b>exemplo de código HTML.</b> <body> </html>
- 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. A Tag <title> Sem <title> Com <title>
- 20. As Tags <i>, <u> e <s> • <i> exibe o texto em itálico • <u> exibe o texto sublinhado • <s> exibe o texto riscado Vamos testar?
- 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. Fechamento de Tags • E se eu esquecer de fechar uma tag?
- 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