Transferir como PDF, PPTX
Carregado porAndré Constantino da Silva
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
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.
Mais conteúdo relacionado
Semelhante a Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Mais de André Constantino da Silva
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
- 1. Introdução a LinguagemHTML: 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
- 3.
- 4. Tudo na WWWtem 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 deHTML • 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 aconteceucom 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 deHTML • 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 deHTML • 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: HyperTextMarkup 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